From a6ac56c5e510395d160cdb7ccc7a88d87403e687 Mon Sep 17 00:00:00 2001 From: John Firebaugh Date: Wed, 12 Jun 2013 14:11:38 -0700 Subject: [PATCH 1/1] Only one pane visible at a time --- app/assets/javascripts/index.js | 11 +++--- app/assets/javascripts/leaflet.key.js | 43 ++++++++++++----------- app/assets/javascripts/leaflet.layers.js | 25 ++++++------- app/assets/javascripts/leaflet.share.js | 16 +++------ app/assets/javascripts/leaflet.sidebar.js | 35 ++++++++++++++++++ 5 files changed, 78 insertions(+), 52 deletions(-) create mode 100644 app/assets/javascripts/leaflet.sidebar.js diff --git a/app/assets/javascripts/index.js b/app/assets/javascripts/index.js index 9a975c11c..ffe12ecc6 100644 --- a/app/assets/javascripts/index.js +++ b/app/assets/javascripts/index.js @@ -1,4 +1,5 @@ //= require_self +//= require leaflet.sidebar //= require leaflet.customzoom //= require leaflet.locate //= require leaflet.layers @@ -61,27 +62,27 @@ $(document).ready(function () { L.control.locate({position: 'topright'}) .addTo(map); - var uiPane = $('#map-ui')[0]; + var sidebar = L.OSM.sidebar('#map-ui'); L.OSM.layers({ position: 'topright', layers: layers, - uiPane: uiPane + sidebar: sidebar }).addTo(map); L.OSM.key({ position: 'topright', - uiPane: uiPane + sidebar: sidebar }).addTo(map); L.OSM.note({ position: 'topright', - uiPane: uiPane + sidebar: sidebar }).addTo(map); L.OSM.share({ getUrl: getShortUrl, - uiPane: uiPane + sidebar: sidebar }).addTo(map); L.control.scale() diff --git a/app/assets/javascripts/leaflet.key.js b/app/assets/javascripts/leaflet.key.js index 4906cfcff..9fe457851 100644 --- a/app/assets/javascripts/leaflet.key.js +++ b/app/assets/javascripts/leaflet.key.js @@ -8,14 +8,13 @@ L.OSM.key = function (options) { $('') .attr('class', 'control-button') .attr('href', '#') - .attr('title', I18n.t("javascripts.key.tooltip")) + .attr('title', I18n.t('javascripts.key.tooltip')) .html('') .on('click', toggle) .appendTo($container); var $ui = $('
') - .attr('class', 'layers-ui') - .appendTo(options.uiPane); + .attr('class', 'layers-ui'); $('

') .text(I18n.t('javascripts.key.title')) @@ -24,32 +23,34 @@ L.OSM.key = function (options) { var $section = $('
') .appendTo($ui); + options.sidebar.addPane($ui); + + $ui + .on('show', shown) + .on('hide', hidden); + + function shown() { + map.on('zoomend baselayerchange', update); + $section.load('/key', update); + } + + function hidden() { + map.off('zoomend baselayerchange', update); + } + function toggle(e) { e.stopPropagation(); e.preventDefault(); - - var controlContainer = $('.leaflet-control-container .leaflet-top.leaflet-right'); - - if ($ui.is(':visible')) { - $(options.uiPane).hide(); - controlContainer.css({paddingRight: '0'}); - map.off("zoomend baselayerchange", update); - } else { - $(options.uiPane).show(); - controlContainer.css({paddingRight: '200px'}); - map.on("zoomend baselayerchange", update); - $section.load('/key', update); - } + options.sidebar.togglePane($ui); } function update() { - var mapLayer = getMapBaseLayerId(map), - mapZoom = map.getZoom(); + var layer = getMapBaseLayerId(map), + zoom = map.getZoom(); - $(".mapkey-table-entry").each(function () { + $('.mapkey-table-entry').each(function () { var data = $(this).data(); - - if (mapLayer == data.layer && mapZoom >= data.zoomMin && mapZoom <= data.zoomMax) { + if (layer == data.layer && zoom >= data.zoomMin && zoom <= data.zoomMax) { $(this).show(); } else { $(this).hide(); diff --git a/app/assets/javascripts/leaflet.layers.js b/app/assets/javascripts/leaflet.layers.js index bbc84701c..2bc538798 100644 --- a/app/assets/javascripts/leaflet.layers.js +++ b/app/assets/javascripts/leaflet.layers.js @@ -16,8 +16,7 @@ L.OSM.layers = function(options) { .appendTo($container); var $ui = $('
') - .attr('class', 'layers-ui') - .appendTo(options.uiPane); + .attr('class', 'layers-ui'); $('

') .text(I18n.t('javascripts.map.layers.header')) @@ -124,25 +123,23 @@ L.OSM.layers = function(options) { }); }); - function toggle(e) { - e.stopPropagation(); - e.preventDefault(); + options.sidebar.addPane($ui); - 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'}); - } + $ui + .on('show', shown); + function shown() { $ui.find('.base-layers .leaflet-container').each(function() { $(this).data('map').invalidateSize(); }); } + function toggle(e) { + e.stopPropagation(); + e.preventDefault(); + options.sidebar.togglePane($ui); + } + return $container[0]; }; diff --git a/app/assets/javascripts/leaflet.share.js b/app/assets/javascripts/leaflet.share.js index 548be3fcc..6653a5b92 100644 --- a/app/assets/javascripts/leaflet.share.js +++ b/app/assets/javascripts/leaflet.share.js @@ -14,8 +14,7 @@ L.OSM.share = function (options) { .appendTo($container); var $ui = $('
') - .attr('class', 'share-ui') - .appendTo(options.uiPane); + .attr('class', 'share-ui'); $('

') .text(I18n.t('javascripts.share.title')) @@ -26,19 +25,12 @@ L.OSM.share = function (options) { map.on('moveend layeradd layerremove', update); + options.sidebar.addPane($ui); + 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'}); - } + options.sidebar.togglePane($ui); } function update() { diff --git a/app/assets/javascripts/leaflet.sidebar.js b/app/assets/javascripts/leaflet.sidebar.js new file mode 100644 index 000000000..a6529ad00 --- /dev/null +++ b/app/assets/javascripts/leaflet.sidebar.js @@ -0,0 +1,35 @@ +L.OSM.sidebar = function(selector) { + var control = {}, + sidebar = $(selector), + current = $(); + + control.addPane = function(pane) { + pane + .hide() + .appendTo(sidebar); + }; + + control.togglePane = function(pane) { + var controlContainer = $('.leaflet-control-container .leaflet-top.leaflet-right'); + + current + .hide() + .trigger('hide'); + + if (current === pane) { + $(sidebar).hide(); + controlContainer.css({paddingRight: '0'}); + current = $(); + } else { + $(sidebar).show(); + controlContainer.css({paddingRight: '200px'}); + current = pane; + } + + current + .show() + .trigger('show'); + }; + + return control; +}; -- 2.43.2