]> git.openstreetmap.org Git - rails.git/blob - app/assets/javascripts/leaflet.key.js
Merge branch 'redesign'
[rails.git] / app / assets / javascripts / leaflet.key.js
1 L.OSM.key = function (options) {
2   var control = L.control(options);
3
4   control.onAdd = function (map) {
5     var $container = $('<div>')
6       .attr('class', 'control-key');
7
8     var button = $('<a>')
9       .attr('class', 'control-button')
10       .attr('href', '#')
11       .html('<span class="icon key"></span>')
12       .on('click', toggle)
13       .appendTo($container);
14
15     var $ui = $('<div>')
16       .attr('class', 'key-ui');
17
18     $('<div>')
19       .attr('class', 'sidebar_heading')
20       .appendTo($ui)
21       .append(
22         $('<span>')
23           .text(I18n.t('javascripts.close'))
24           .attr('class', 'icon close')
25           .bind('click', toggle))
26       .append(
27         $('<h4>')
28           .text(I18n.t('javascripts.key.title')));
29
30     var $section = $('<div>')
31       .attr('class', 'section')
32       .appendTo($ui);
33
34     options.sidebar.addPane($ui);
35
36     $ui
37       .on('show', shown)
38       .on('hide', hidden);
39
40     map.on('baselayerchange', updateButton);
41
42     updateButton();
43
44     function shown() {
45       map.on('zoomend baselayerchange', update);
46       $section.load('/key', update);
47     }
48
49     function hidden() {
50       map.off('zoomend baselayerchange', update);
51     }
52
53     function toggle(e) {
54       e.stopPropagation();
55       e.preventDefault();
56       if (!button.hasClass('disabled')) {
57         options.sidebar.togglePane($ui, button);
58       }
59       $('.leaflet-control .control-button').tooltip('hide');
60     }
61
62     function updateButton() {
63       var disabled = map.getMapBaseLayerId() !== 'mapnik'
64       button
65         .toggleClass('disabled', disabled)
66         .attr('data-original-title', I18n.t(disabled ?
67           'javascripts.key.tooltip_disabled' :
68           'javascripts.key.tooltip'))
69     }
70
71     function update() {
72       var layer = map.getMapBaseLayerId(),
73         zoom = map.getZoom();
74
75       $('.mapkey-table-entry').each(function () {
76         var data = $(this).data();
77         if (layer == data.layer && zoom >= data.zoomMin && zoom <= data.zoomMax) {
78           $(this).show();
79         } else {
80           $(this).hide();
81         }
82       });
83     }
84
85     return $container[0];
86   };
87
88   return control;
89 };