|
20 | 20 | }); |
21 | 21 | }; |
22 | 22 |
|
23 | | - initMap(); |
24 | | - |
25 | | - // jquery ui |
26 | | - if (typeof jQuery.ui != 'undefined') { |
27 | | - // draggable |
28 | | - $('.ui-picker-draggable-handler').draggable({ |
29 | | - addClasses: false, |
30 | | - appendTo: 'body', |
31 | | - cursor: 'move', |
32 | | - cursorAt: { |
33 | | - top: 0, |
34 | | - left: 0 |
35 | | - }, |
36 | | - delay: 100, |
37 | | - helper: function () { |
38 | | - return $('<div class="tile tile-brand-accent ui-draggable-helper"><div class="tile-side pull-left"><div class="avatar avatar-sm"><strong>' + $('.ui-picker-selected:first .ui-picker-draggable-avatar strong').html() + '</strong></div></div><div class="tile-inner text-overflow">' + $('.ui-picker-selected:first .ui-picker-info-title').html() + '</div></div>'); |
39 | | - }, |
40 | | - start: function (event, ui) { |
41 | | - var draggableCount = $('.ui-picker-selected').length; |
42 | | - |
43 | | - if (draggableCount > 1) { |
44 | | - $('.ui-draggable-helper').append('<div class="avatar avatar-brand avatar-sm ui-picker-draggable-count">' + draggableCount + '</div>'); |
45 | | - }; |
46 | | - }, |
47 | | - zIndex: 100 |
48 | | - }); |
49 | | - |
50 | | - // droppable |
51 | | - $('.ui-picker-nav .nav a').droppable({ |
52 | | - accept: '.ui-picker-draggable-handler', |
53 | | - addClasses: false, |
54 | | - drop: function(event, ui) { |
55 | | - $('body').snackbar({ |
56 | | - content: 'Dropped on "' + $(this).html() + '"' |
57 | | - }); |
58 | | - }, |
59 | | - hoverClass: 'ui-droppable-helper', |
60 | | - tolerance: 'pointer' |
61 | | - }); |
62 | | - |
63 | | - // selectable |
64 | | - $pickerLib.selectable({ |
65 | | - cancel: '.ui-picker-draggable-handler', |
66 | | - filter: '.ui-picker-selectable-handler', |
67 | | - selecting: function (event, ui) { |
68 | | - var $selectingParent = $(ui.selecting).parent(); |
69 | | - |
70 | | - $selectingParent.addClass('tile-brand-accent ui-picker-selected'); |
71 | | - |
72 | | - $('.ui-picker-info').addClass('ui-picker-info-active').removeClass('ui-picker-info-null'); |
73 | | - $('.ui-picker-info-desc-wrap').html($selectingParent.find('.ui-picker-info-desc').html()); |
74 | | - $('.ui-picker-info-title-wrap').html($selectingParent.find('.ui-picker-info-title').html()); |
75 | | - |
76 | | - var pickerMapLatLng = new google.maps.LatLng($selectingParent.find('.ui-picker-info-map-lat').html(), $selectingParent.find('.ui-picker-info-map-lng').html()); |
77 | | - |
78 | | - pickerMap.setCenter(pickerMapLatLng); |
| 23 | + if (typeof google != 'undefined') { |
| 24 | + initMap(); |
| 25 | + }; |
| 26 | + |
| 27 | + if (typeof jQuery.ui != 'undefined') { |
| 28 | + // draggable |
| 29 | + $('.ui-picker-draggable-handler').draggable({ |
| 30 | + addClasses: false, |
| 31 | + appendTo: 'body', |
| 32 | + cursor: 'move', |
| 33 | + cursorAt: { |
| 34 | + top: 0, |
| 35 | + left: 0 |
| 36 | + }, |
| 37 | + delay: 100, |
| 38 | + helper: function () { |
| 39 | + return $('<div class="tile tile-brand-accent ui-draggable-helper"><div class="tile-side pull-left"><div class="avatar avatar-sm"><strong>' + $('.ui-picker-selected:first .ui-picker-draggable-avatar strong').html() + '</strong></div></div><div class="tile-inner text-overflow">' + $('.ui-picker-selected:first .ui-picker-info-title').html() + '</div></div>'); |
| 40 | + }, |
| 41 | + start: function (event, ui) { |
| 42 | + var draggableCount = $('.ui-picker-selected').length; |
| 43 | + |
| 44 | + if (draggableCount > 1) { |
| 45 | + $('.ui-draggable-helper').append('<div class="avatar avatar-brand avatar-sm ui-picker-draggable-count">' + draggableCount + '</div>'); |
| 46 | + }; |
| 47 | + }, |
| 48 | + zIndex: 100 |
| 49 | + }); |
| 50 | + |
| 51 | + // droppable |
| 52 | + $('.ui-picker-nav .nav a').droppable({ |
| 53 | + accept: '.ui-picker-draggable-handler', |
| 54 | + addClasses: false, |
| 55 | + drop: function(event, ui) { |
| 56 | + $('body').snackbar({ |
| 57 | + content: 'Dropped on "' + $(this).html() + '"' |
| 58 | + }); |
| 59 | + }, |
| 60 | + hoverClass: 'ui-droppable-helper', |
| 61 | + tolerance: 'pointer' |
| 62 | + }); |
| 63 | + |
| 64 | + // selectable |
| 65 | + $pickerLib.selectable({ |
| 66 | + cancel: '.ui-picker-draggable-handler', |
| 67 | + filter: '.ui-picker-selectable-handler', |
| 68 | + selecting: function (event, ui) { |
| 69 | + var $selectingParent = $(ui.selecting).parent(); |
| 70 | + |
| 71 | + $selectingParent.addClass('tile-brand-accent ui-picker-selected'); |
| 72 | + |
| 73 | + $('.ui-picker-info').addClass('ui-picker-info-active').removeClass('ui-picker-info-null'); |
| 74 | + $('.ui-picker-info-desc-wrap').html($selectingParent.find('.ui-picker-info-desc').html()); |
| 75 | + $('.ui-picker-info-title-wrap').html($selectingParent.find('.ui-picker-info-title').html()); |
| 76 | + |
| 77 | + var pickerMapLatLng = new google.maps.LatLng($selectingParent.find('.ui-picker-info-map-lat').html(), $selectingParent.find('.ui-picker-info-map-lng').html()); |
| 78 | + |
| 79 | + pickerMap.setCenter(pickerMapLatLng); |
| 80 | + pickerMarker.setMap(pickerMap); |
| 81 | + pickerMarker.setPosition(pickerMapLatLng); |
| 82 | + }, |
| 83 | + unselecting: function (event, ui) { |
| 84 | + var $unselectingParent = $(ui.unselecting).parent(); |
| 85 | + |
| 86 | + $unselectingParent.removeClass('tile-brand-accent ui-picker-selected'); |
| 87 | + |
| 88 | + if (!$('.ui-picker-selected').length) { |
| 89 | + $('.ui-picker-info').addClass('ui-picker-info-null'); |
| 90 | + $('.ui-picker-info-desc-wrap').html(''); |
| 91 | + $('.ui-picker-info-title-wrap').html(''); |
| 92 | + pickerMarker.setMap(null); |
| 93 | + } else { |
| 94 | + var $first = $($('.ui-picker-selected')[0]); |
| 95 | + |
| 96 | + $('.ui-picker-info-desc-wrap').html($first.find('.ui-picker-info-desc').html()); |
| 97 | + $('.ui-picker-info-title-wrap').html($first.find('.ui-picker-info-title').html()); |
| 98 | + |
| 99 | + var firstLatLng = new google.maps.LatLng($first.find('.ui-picker-info-map-lat').html(), $first.find('.ui-picker-info-map-lng').html()); |
| 100 | + |
| 101 | + pickerMap.setCenter(firstLatLng); |
79 | 102 | pickerMarker.setMap(pickerMap); |
80 | | - pickerMarker.setPosition(pickerMapLatLng); |
81 | | - }, |
82 | | - unselecting: function (event, ui) { |
83 | | - var $unselectingParent = $(ui.unselecting).parent(); |
84 | | - |
85 | | - $unselectingParent.removeClass('tile-brand-accent ui-picker-selected'); |
86 | | - |
87 | | - if (!$('.ui-picker-selected').length) { |
88 | | - $('.ui-picker-info').addClass('ui-picker-info-null'); |
89 | | - $('.ui-picker-info-desc-wrap').html(''); |
90 | | - $('.ui-picker-info-title-wrap').html(''); |
91 | | - pickerMarker.setMap(null); |
92 | | - } else { |
93 | | - var $first = $($('.ui-picker-selected')[0]); |
94 | | - |
95 | | - $('.ui-picker-info-desc-wrap').html($first.find('.ui-picker-info-desc').html()); |
96 | | - $('.ui-picker-info-title-wrap').html($first.find('.ui-picker-info-title').html()); |
97 | | - |
98 | | - var firstLatLng = new google.maps.LatLng($first.find('.ui-picker-info-map-lat').html(), $first.find('.ui-picker-info-map-lng').html()); |
99 | | - |
100 | | - pickerMap.setCenter(firstLatLng); |
101 | | - pickerMarker.setMap(pickerMap); |
102 | | - pickerMarker.setPosition(firstLatLng); |
103 | | - }; |
104 | | - } |
105 | | - }); |
106 | | - }; |
107 | | - |
108 | | - // picker info |
109 | | - $(document).on('click', '.ui-picker-info-close', function () { |
110 | | - $('.ui-picker-info').removeClass('ui-picker-info-active'); |
111 | | - }); |
| 103 | + pickerMarker.setPosition(firstLatLng); |
| 104 | + }; |
| 105 | + } |
| 106 | + }); |
| 107 | + }; |
| 108 | + |
| 109 | + $(document).on('click', '.ui-picker-info-close', function () { |
| 110 | + $('.ui-picker-info').removeClass('ui-picker-info-active'); |
| 111 | + }); |
112 | 112 |
|
113 | 113 | // ui-picker.html |
114 | 114 | $('#doc_datepicker_example_1').pickdate(); |
|
0 commit comments