ea236a569e316b99ec87f0e86f6189a75fccfbaf
[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     }
60
61     function updateButton() {
62       var disabled = map.getMapBaseLayerId() !== 'mapnik'
63       button
64         .toggleClass('disabled', disabled)
65         .attr('data-original-title', I18n.t(disabled ?
66           'javascripts.key.tooltip_disabled' :
67           'javascripts.key.tooltip'))
68     }
69
70     function update() {
71       var layer = map.getMapBaseLayerId(),
72         zoom = map.getZoom();
73
74       $('.mapkey-table-entry').each(function () {
75         var data = $(this).data();
76         if (layer == data.layer && zoom >= data.zoomMin && zoom <= data.zoomMax) {
77           $(this).show();
78         } else {
79           $(this).hide();
80         }
81       });
82     }
83
84     return $container[0];
85   };
86
87   return control;
88 };