cc86736ef848bec653e3c5e30ff901480b7b58b0
[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         $('<a>')
23           .text(I18n.t('javascripts.close'))
24           .attr('class', 'sidebar_close')
25           .attr('href', '#')
26           .bind('click', toggle))
27       .append(
28         $('<h4>')
29           .text(I18n.t('javascripts.key.title')));
30
31     var $section = $('<div>')
32       .attr('class', 'section')
33       .appendTo($ui);
34
35     options.sidebar.addPane($ui);
36
37     $ui
38       .on('show', shown)
39       .on('hide', hidden);
40
41     map.on('baselayerchange', updateButton);
42
43     updateButton();
44
45     function shown() {
46       map.on('zoomend baselayerchange', update);
47       $section.load('/key', update);
48     }
49
50     function hidden() {
51       map.off('zoomend baselayerchange', update);
52     }
53
54     function toggle(e) {
55       e.stopPropagation();
56       e.preventDefault();
57       if (!button.hasClass('disabled')) {
58         options.sidebar.togglePane($ui, button);
59       }
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 };