X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/36fac06bd5ae1b9c26e44945c41053e0ce6829f1..1debc147b8c4d9c917d54a279dcf0e2718e0665e:/app/assets/javascripts/leaflet.share.js?ds=sidebyside diff --git a/app/assets/javascripts/leaflet.share.js b/app/assets/javascripts/leaflet.share.js index 9c3d94218..664aebaa5 100644 --- a/app/assets/javascripts/leaflet.share.js +++ b/app/assets/javascripts/leaflet.share.js @@ -1,51 +1,85 @@ -//= require templates/map/share - -L.Control.Share = L.Control.extend({ - options: { - position: 'topright', - title: 'Share' - }, - - 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 link = L.DomUtil.create('a', 'leaflet-bar-part leaflet-bar-part-single', container); - link.href = '#'; - link.title = this.options.title; - - this._uiPane = L.DomUtil.create('div', 'leaflet-map-ui', map._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); - - return container; - }, - - 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"]()); - 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($ui) + .append( + $('') + .html('»') + .attr('class', 'close-button') + .attr('href', '#') + .bind('click', toggle)) + .append( + $('

') + .text(I18n.t('javascripts.share.title'))); + + var $share_link = $('
') + .appendTo($ui); + + var $title = $('

') + .text(I18n.t('javascripts.share.link')) + .appendTo($share_link); + + var $input = $('') + .attr('type', 'text') + .appendTo($share_link); + + var $list = $('
    ') + .appendTo($share_link); + + var $short_option = $('
  • ') + .appendTo($list); + + var $short_url_label = $('') + .attr('for', 'short_url') + .appendTo($short_option); + + var $short_url_input = $('') + .attr('id', 'short_url') + .attr('type', 'checkbox') + .prop('checked', 'checked') + .appendTo($short_url_label) + .bind('change', function() { + options.short = $(this).prop('checked'); + update(); + }); + + $short_url_label.append(I18n.t('javascripts.share.short_url')); + + map.on('moveend layeradd layerremove', update); + + options.sidebar.addPane($ui); + + function toggle(e) { + e.stopPropagation(); + e.preventDefault(); + options.sidebar.togglePane($ui); + $input.select(); + } + + function update() { + $input.val( + options.short ? options.getShortUrl(map) : options.getUrl(map) + ); } -}); -L.control.share = function(options) { - return new L.Control.Share(options); + return $container[0]; + }; + + return control; };