CODEWITHSUNDEEP
javascriptgoogle-mapsjavascript-objectsdom-events
roza
roza

Reputation: 585

How to move Javascript functions within object and DRY?

In functions presented below are repeated the same operations. I'd like to move as much as possible to the object. Maybe it is possible directly from button once initialize right method in object?

HTML:

<div id="map" style="width: 500px; height: 400px;"></div>
<button onclick="drawPoly()">Draw This Poly</button>
<button onclick="newPoly()">Create New Poly</button>
<button onclick="restorePolys()">Restore Polys</button>
<button onclick="dropMarker()">Drop Marker</button>

JS:

var map;
var mapListener = null;

$(function() {
    map = new google.maps.Map(document.getElementById('map'), {
        center: new google.maps.LatLng(48.864715, 10.546875),
        zoom: 4,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
});

dropMarker = function() {
    if ( !! mapListener) google.maps.event.removeListener(mapListener);

    mapListener = google.maps.event.addListener(map, 'click', function(e) {
        tools.createMarker(e.latLng);
    });
}

drawPolyline = function() {
    if ( !! mapListener) google.maps.event.removeListener(mapListener);

    mapListener = google.maps.event.addListener(map, 'click', function(e) {
        tools.addPoint(e.latLng);
    });
}

newPolyline = function() {
    if ( !! mapListener) google.maps.event.removeListener(mapListener);

    tools.createPolyline();
    mapListener = google.maps.event.addListener(map, 'click', function(e) {
        tools.addPoint(e.latLng);
    });
}

newPolygon = function() {
    if ( !! mapListener) google.maps.event.removeListener(mapListener);

    tools.createPolygon();
    mapListener = google.maps.event.addListener(map, 'click', function(e) {
        tools.addPoint(e.latLng);
    });
}

var tools = {
    polyMarkers: [],
    polyLines: [],
    polyLine: null,
    // ...

    // mapListener: null,
    // tools: function(option) {
    //     if ( !! this.mapListener) google.maps.event.removeListener(this.mapListener);
    //     this.mapListener = google.maps.event.addListener(map, 'click', function(e) {
    //         option(e.latLng);
    //     });
    // },
    // and so on

EDIT I got expected function, added to tools:

mapListener: null,

initFeature: function(type, aspect) {
    if ( !! this.mapListener) google.maps.event.removeListener(this.mapListener);

    if (aspect) this[aspect]();

    this.mapListener = google.maps.event.addListener(map, 'click', function(e) {
        tools[type](e.latLng);
    });
},

Call:

tools.initFeature(type, aspect);

Upvotes: 1

Views: 167

Answers (1)

GillesC
GillesC

Reputation: 10874

If I get what you are trying to do maybe having a builder function will help, something like this that should handle most of your case usage.

function MakeNew(act1, act2) {

    return function() {

        if ( !! mapListener) google.maps.event.removeListener(mapListener);

        if ( act2 ) tools[act2]();

        mapListener = google.maps.event.addListener(map, 'click', function(e) {
            tools[act1](e.latLng);
        });
    };
};


dropMarker = MakeNew('createMarker');
newPolygon = MakeNew('addPoint', 'createPolygon');
createPolygon = MakeNew('addPoint', 'createPolyline');

Upvotes: 1

Related Questions