starting to cleanup+style map controls.

[rails.git] / app / assets / javascripts / leaflet.share.js

diff --git a/app/assets/javascripts/leaflet.share.js b/app/assets/javascripts/leaflet.share.js
index 9c3d94218b18a00a1d5bb50e1a64364b596fb12d..7449fb6d786f9e9178a9ddc100644d2e5a3b8d1e 100644 (file)
--- a/app/assets/javascripts/leaflet.share.js
+++ b/app/assets/javascripts/leaflet.share.js
@@ -1,46 +1,58 @@
-//= require templates/map/share
-
 L.Control.Share = L.Control.extend({
     options: {
         position: 'topright',
-        title: 'Share'
+        title: 'Share',
+        url: function(map) {
+            return '';
+        }
     },
 
     onAdd: function (map) {
-        var className = 'leaflet-control-locate',
-            classNames = className + ' leaflet-control-zoom leaflet-bar leaflet-control',
-            container = L.DomUtil.create('div', classNames);
-
-        var self = this;
-        this._layer = new L.LayerGroup();
-        this._layer.addTo(map);
-        this._event = undefined;
+        var className = 'control-share',
+            container = L.DomUtil.create('div', className);
 
-        var link = L.DomUtil.create('a', 'leaflet-bar-part leaflet-bar-part-single', container);
+        var link = L.DomUtil.create('a', 'control-button', container);
+        link.innerHTML = "<span class='icon share'></span>";
         link.href = '#';
         link.title = this.options.title;
 
         this._uiPane = L.DomUtil.create('div', 'leaflet-map-ui', map._container);
 
+        L.DomEvent
+            .on(this._uiPane, 'click', L.DomEvent.stopPropagation)
+            .on(this._uiPane, 'click', L.DomEvent.preventDefault)
+            .on(this._uiPane, 'dblclick', L.DomEvent.preventDefault);
+
+        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, 'click', this._toggle, this)
             .on(link, 'dblclick', L.DomEvent.stopPropagation);
 
+        map.on('moveend layeradd layerremove', this._update, this);
+
         return container;
     },
 
-    toggle: function() {
+    _update: function (e) {
+        var center = map.getCenter().wrap();
+        var layers = getMapLayers();
+        this._linkInput.value = this.options.getUrl(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()
-                .html(JST["templates/map/share"]());
+            $(this._uiPane).show();
             controlContainer.css({paddingRight: '200px'});
         }
     }