From: John Firebaugh Date: Wed, 12 Jun 2013 18:34:43 +0000 (-0700) Subject: Consistent JavaScript style X-Git-Tag: live~5402^2~33 X-Git-Url: https://git.openstreetmap.org./rails.git/commitdiff_plain/eebe1f1d3ed885e94725c07d24e0483f603f03da Consistent JavaScript style --- diff --git a/app/assets/javascripts/index.js b/app/assets/javascripts/index.js index 39d416ba9..710095e2d 100644 --- a/app/assets/javascripts/index.js +++ b/app/assets/javascripts/index.js @@ -75,12 +75,12 @@ $(document).ready(function () { uiPane: uiPane }).addTo(map); - L.control.note({ + L.OSM.note({ position: 'topright', uiPane: uiPane }).addTo(map); - L.control.share({ + L.OSM.share({ getUrl: getShortUrl, uiPane: uiPane }).addTo(map); diff --git a/app/assets/javascripts/leaflet.key.js b/app/assets/javascripts/leaflet.key.js index 4cab964c9..5756f0c41 100644 --- a/app/assets/javascripts/leaflet.key.js +++ b/app/assets/javascripts/leaflet.key.js @@ -1,25 +1,19 @@ -L.OSM.Key = L.Control.extend({ - onAdd: function (map) { - this._map = map; - this._initLayout(); - return this.$container[0]; - }, - - _initLayout: function () { - var map = this._map; +L.OSM.key = function(options) { + var control = L.control(options); - this.$container = $('
') + control.onAdd = function (map) { + var $container = $('
') .attr('class', 'control-key'); - var link = $('') + $('') .attr('class', 'control-button') .attr('href', '#') .attr('title', 'Map Key') .html('') - .appendTo(this.$container); - } -}); + .appendTo($container); -L.OSM.key = function(options) { - return new L.OSM.Key(options); + return $container[0]; + }; + + return control; }; diff --git a/app/assets/javascripts/leaflet.layers.js b/app/assets/javascripts/leaflet.layers.js index 09cf1cf60..bbc84701c 100644 --- a/app/assets/javascripts/leaflet.layers.js +++ b/app/assets/javascripts/leaflet.layers.js @@ -1,15 +1,10 @@ -L.OSM.Layers = L.Control.extend({ - onAdd: function (map) { - this._map = map; - this._initLayout(); - return this.$container[0]; - }, - - _initLayout: function () { - var map = this._map, - layers = this.options.layers; - - this.$container = $('
') +L.OSM.layers = function(options) { + var control = L.control(options); + + control.onAdd = function (map) { + var layers = options.layers; + + var $container = $('
') .attr('class', 'control-layers'); var link = $('') @@ -17,20 +12,21 @@ L.OSM.Layers = L.Control.extend({ .attr('href', '#') .attr('title', 'Layers') .html('') - .appendTo(this.$container); + .on('click', toggle) + .appendTo($container); - if (OSM.STATUS != 'api_offline' && OSM.STATUS != 'database_offline') { - this.$ui = $('
') - .attr('class', 'layers-ui') - .appendTo(this.options.uiPane); + var $ui = $('
') + .attr('class', 'layers-ui') + .appendTo(options.uiPane); - $('

') - .text(I18n.t('javascripts.map.layers.header')) - .appendTo(this.$ui); + $('

') + .text(I18n.t('javascripts.map.layers.header')) + .appendTo($ui); + if (OSM.STATUS != 'api_offline' && OSM.STATUS != 'database_offline') { var overlaySection = $('
') .addClass('overlay-layers') - .appendTo(this.$ui); + .appendTo($ui); $('

') .text(I18n.t('javascripts.map.layers.overlays')) @@ -72,7 +68,7 @@ L.OSM.Layers = L.Control.extend({ var baseSection = $('

') .addClass('base-layers') - .appendTo(this.$ui); + .appendTo($ui); $('

') .text(I18n.t('javascripts.map.layers.base')) @@ -128,29 +124,27 @@ L.OSM.Layers = L.Control.extend({ }); }); - $(link).on('click', $.proxy(this.toggleLayers, this)); - }, + function toggle(e) { + e.stopPropagation(); + e.preventDefault(); - toggleLayers: function (e) { - e.stopPropagation(); - e.preventDefault(); + var controlContainer = $('.leaflet-control-container .leaflet-top.leaflet-right'); - var controlContainer = $('.leaflet-control-container .leaflet-top.leaflet-right'); + if ($ui.is(':visible')) { + $(control.options.uiPane).hide(); + controlContainer.css({paddingRight: '0'}); + } else { + $(control.options.uiPane).show(); + controlContainer.css({paddingRight: '230px'}); + } - if (this.$ui.is(':visible')) { - $(this.options.uiPane).hide(); - controlContainer.css({paddingRight: '0'}); - } else { - $(this.options.uiPane).show(); - controlContainer.css({paddingRight: '230px'}); + $ui.find('.base-layers .leaflet-container').each(function() { + $(this).data('map').invalidateSize(); + }); } - this.$ui.find('.base-layers .leaflet-container').each(function() { - $(this).data('map').invalidateSize(); - }); - } -}); + return $container[0]; + }; -L.OSM.layers = function(options) { - return new L.OSM.Layers(options); + return control; }; diff --git a/app/assets/javascripts/leaflet.note.js b/app/assets/javascripts/leaflet.note.js index 24f18f7ab..68e09c88d 100644 --- a/app/assets/javascripts/leaflet.note.js +++ b/app/assets/javascripts/leaflet.note.js @@ -1,39 +1,31 @@ -L.Control.Note = L.Control.extend({ - options: { - position: 'topright', - title: 'Notes', - }, +L.OSM.note = function (options) { + var control = L.control(options); - onAdd: function (map) { - var className = 'control-note', - container = L.DomUtil.create('div', className); + control.onAdd = function (map) { + var $container = $('

') + .attr('class', 'control-note'); - var link = L.DomUtil.create('a', 'control-button', container); - link.innerHTML = ""; - link.href = '#'; - link.title = this.options.title; + $('') + .attr('class', 'control-button') + .attr('href', '#') + .attr('title', 'Notes') + .html('') + .on('click', toggle) + .appendTo($container); - L.DomEvent - .on(link, 'click', L.DomEvent.stopPropagation) - .on(link, 'click', L.DomEvent.preventDefault) - .on(link, 'click', this._toggle, this) - .on(link, 'dblclick', L.DomEvent.stopPropagation); + function toggle(e) { + e.stopPropagation(); + e.preventDefault(); - this.map = map; - - return container; - }, - - // TODO: this relies on notesLayer on the map - _toggle: function() { - if (this.map.hasLayer(this.map.noteLayer)) { - this.map.removeLayer(this.map.noteLayer); - } else { - this.map.addLayer(this.map.noteLayer); - } + if (map.hasLayer(map.noteLayer)) { + map.removeLayer(map.noteLayer); + } else { + map.addLayer(map.noteLayer); + } } -}); -L.control.note = function(options) { - return new L.Control.Note(options); + return $container[0]; + }; + + return control; }; diff --git a/app/assets/javascripts/leaflet.share.js b/app/assets/javascripts/leaflet.share.js index d43f99b1d..548be3fcc 100644 --- a/app/assets/javascripts/leaflet.share.js +++ b/app/assets/javascripts/leaflet.share.js @@ -1,60 +1,54 @@ -L.Control.Share = L.Control.extend({ - options: { - position: 'topright', - title: 'Share', - url: function(map) { - return ''; - } - }, - - onAdd: function (map) { - var className = 'control-share', - container = L.DomUtil.create('div', className); - - var link = L.DomUtil.create('a', 'control-button', container); - link.innerHTML = ""; - link.href = '#'; - link.title = this.options.title; - - this._uiPane = this.options.uiPane; - - this._map = map; - - var h2 = L.DomUtil.create('h2', '', this._uiPane); - h2.innerHTML = I18n.t('javascripts.share.title'); - - this._linkInput = L.DomUtil.create('input', '', this._uiPane); - - L.DomEvent - .on(link, 'click', L.DomEvent.stopPropagation) - .on(link, 'click', L.DomEvent.preventDefault) - .on(link, 'click', this._toggle, this) - .on(link, 'dblclick', L.DomEvent.stopPropagation); - - map.on('moveend layeradd layerremove', this._update, this); - - return container; - }, - - _update: function (e) { - var center = this._map.getCenter().wrap(); - var layers = getMapLayers(this._map); - this._linkInput.value = this.options.getUrl(this._map); - }, - - _toggle: function() { - var controlContainer = $('.leaflet-control-container .leaflet-top.leaflet-right'); - - if ($(this._uiPane).is(':visible')) { - $(this._uiPane).hide(); - controlContainer.css({paddingRight: '0'}); - } else { - $(this._uiPane).show(); - controlContainer.css({paddingRight: '200px'}); - } +L.OSM.share = function (options) { + var control = L.control(options); + + control.onAdd = function (map) { + var $container = $('
') + .attr('class', 'control-share'); + + $('') + .attr('class', 'control-button') + .attr('href', '#') + .attr('title', 'Share') + .html('') + .on('click', toggle) + .appendTo($container); + + var $ui = $('
') + .attr('class', 'share-ui') + .appendTo(options.uiPane); + + $('

') + .text(I18n.t('javascripts.share.title')) + .appendTo($ui); + + var $input = $('') + .appendTo($ui); + + map.on('moveend layeradd layerremove', update); + + function toggle(e) { + e.stopPropagation(); + e.preventDefault(); + + var controlContainer = $('.leaflet-control-container .leaflet-top.leaflet-right'); + + if ($ui.is(':visible')) { + $(control.options.uiPane).hide(); + controlContainer.css({paddingRight: '0'}); + } else { + $(control.options.uiPane).show(); + controlContainer.css({paddingRight: '200px'}); + } } -}); -L.control.share = function(options) { - return new L.Control.Share(options); + function update() { + var center = map.getCenter().wrap(); + var layers = getMapLayers(map); + $input.val(options.getUrl(map)); + } + + return $container[0]; + }; + + return control; };