|
1 | 1 | /**
|
2 | 2 | * @ngdoc directive
|
3 |
| - * @name info-window |
4 |
| - * @requires Attr2Options |
| 3 | + * @name info-window |
| 4 | + * @requires Attr2Options |
5 | 5 | * @requires $compile
|
6 |
| - * @description |
| 6 | + * @description |
7 | 7 | * Defines infoWindow and provides compile method
|
8 |
| - * |
| 8 | + * |
9 | 9 | * Requires: map directive
|
10 | 10 | *
|
11 | 11 | * Restrict To: Element
|
|
14 | 14 | * @param {Boolean} visible-on-marker Indicates to show it on a marker when map is initialized
|
15 | 15 | * @param {Expression} geo-callback if position is an address, the expression is will be performed when geo-lookup is successful. e.g., geo-callback="showDetail()"
|
16 | 16 | * @param {String} <InfoWindowOption> Any InfoWindow options,
|
17 |
| - * https://developers.google.com/maps/documentation/javascript/reference?csw=1#InfoWindowOptions |
| 17 | + * https://developers.google.com/maps/documentation/javascript/reference?csw=1#InfoWindowOptions |
18 | 18 | * @param {String} <InfoWindowEvent> Any InfoWindow events, https://developers.google.com/maps/documentation/javascript/reference
|
19 | 19 | * @example
|
20 |
| - * Usage: |
| 20 | + * Usage: |
21 | 21 | * <map MAP_ATTRIBUTES>
|
22 | 22 | * <info-window id="foo" ANY_OPTIONS ANY_EVENTS"></info-window>
|
23 | 23 | * </map>
|
24 | 24 | *
|
25 |
| - * Example: |
| 25 | + * Example: |
26 | 26 | * <map center="41.850033,-87.6500523" zoom="3">
|
27 | 27 | * <info-window id="1" position="41.850033,-87.6500523" >
|
28 | 28 | * <div ng-non-bindable>
|
|
39 | 39 | (function() {
|
40 | 40 | 'use strict';
|
41 | 41 |
|
42 |
| - var infoWindow = function(Attr2Options, $compile, $timeout, $parse) { |
43 |
| - var parser = Attr2Options; |
44 |
| - |
45 |
| - var getInfoWindow = function(options, events, element) { |
46 |
| - var infoWindow; |
47 |
| - |
48 |
| - /** |
49 |
| - * set options |
50 |
| - */ |
51 |
| - if (options.position && !(options.position instanceof google.maps.LatLng)) { |
52 |
| - delete options.position; |
53 |
| - } |
54 |
| - infoWindow = new google.maps.InfoWindow(options); |
55 |
| - |
56 |
| - /** |
57 |
| - * set events |
58 |
| - */ |
59 |
| - if (Object.keys(events).length > 0) { |
60 |
| - console.log("infoWindow events", events); |
61 |
| - } |
62 |
| - for (var eventName in events) { |
63 |
| - if (eventName) { |
64 |
| - google.maps.event.addListener(infoWindow, eventName, events[eventName]); |
65 |
| - } |
66 |
| - } |
67 |
| - |
68 |
| - /** |
69 |
| - * set template ane template-relate functions |
70 |
| - * it must have a container element with ng-non-bindable |
71 |
| - */ |
72 |
| - var template = element.html().trim(); |
73 |
| - if (angular.element(template).length != 1) { |
74 |
| - throw "info-window working as a template must have a container"; |
75 |
| - } |
76 |
| - infoWindow.__template = template.replace(/\s?ng-non-bindable[='"]+/,""); |
77 |
| - |
78 |
| - infoWindow.__compile = function(scope, anchor) { |
79 |
| - anchor && (scope['this'] = anchor); |
80 |
| - var el = $compile(infoWindow.__template)(scope); |
81 |
| - infoWindow.setContent(el[0]); |
82 |
| - scope.$apply(); |
83 |
| - }; |
84 |
| - |
85 |
| - infoWindow.__open = function(map, scope, anchor) { |
86 |
| - $timeout(function() { |
87 |
| - var tempTemplate = infoWindow.__template; // set template in a temporary variable |
88 |
| - infoWindow.__compile(scope, anchor); |
89 |
| - if (anchor && anchor.getPosition) { |
90 |
| - infoWindow.open(map, anchor); |
91 |
| - } else if (anchor && anchor instanceof google.maps.LatLng) { |
92 |
| - infoWindow.open(map); |
93 |
| - infoWindow.setPosition(anchor); |
94 |
| - } else { |
95 |
| - infoWindow.open(map); |
96 |
| - } |
97 |
| - infoWindow.__template = tempTemplate; // reset template to the object |
98 |
| - }); |
99 |
| - }; |
100 |
| - |
101 |
| - return infoWindow; |
102 |
| - }; |
103 |
| - |
104 |
| - var linkFunc = function(scope, element, attrs, mapController) { |
105 |
| - element.css('display','none'); |
106 |
| - var orgAttrs = parser.orgAttributes(element); |
107 |
| - var filtered = parser.filter(attrs); |
108 |
| - var options = parser.getOptions(filtered, scope); |
109 |
| - var events = parser.getEvents(scope, filtered); |
110 |
| - console.log('infoWindow', 'options', options, 'events', events); |
111 |
| - |
112 |
| - var address; |
113 |
| - if (options.position && !(options.position instanceof google.maps.LatLng)) { |
114 |
| - address = options.position; |
115 |
| - } |
116 |
| - var infoWindow = getInfoWindow(options, events, element); |
117 |
| - if (address) { |
118 |
| - mapController.getGeoLocation(address).then(function(latlng) { |
119 |
| - infoWindow.setPosition(latlng); |
120 |
| - infoWindow.__open(mapController.map, scope, latlng); |
121 |
| - var geoCallback = attrs.geoCallback; |
122 |
| - geoCallback && $parse(geoCallback)(scope); |
123 |
| - }); |
124 |
| - } |
125 |
| - |
126 |
| - mapController.addObject('infoWindows', infoWindow); |
127 |
| - mapController.observeAttrSetObj(orgAttrs, attrs, infoWindow); /* observers */ |
128 |
| - |
129 |
| - scope.$on('mapInitialized', function(evt, map) { |
130 |
| - infoWindow.visible && infoWindow.__open(map, scope); |
131 |
| - if (infoWindow.visibleOnMarker) { |
132 |
| - var markerId = infoWindow.visibleOnMarker; |
133 |
| - infoWindow.__open(map, scope, map.markers[markerId]); |
134 |
| - } |
135 |
| - }); |
136 |
| - |
137 |
| - /** |
138 |
| - * provide showInfoWindow method to scope |
139 |
| - */ |
140 |
| - |
141 |
| - scope.showInfoWindow = function(e, id, marker) { |
142 |
| - var infoWindow = mapController.map.infoWindows[id]; |
143 |
| - var anchor = marker ? marker : (this.getPosition ? this : null); |
144 |
| - infoWindow.__open(mapController.map, scope, anchor); |
145 |
| - }; |
146 |
| - |
147 |
| - /** |
148 |
| - * provide hideInfoWindow method to scope |
149 |
| - */ |
150 |
| - scope.hideInfoWindow = scope.hideInfoWindow || |
151 |
| - function(event, id) { |
152 |
| - var infoWindow = mapController.map.infoWindows[id]; |
153 |
| - infoWindow.close(); |
154 |
| - }; |
155 |
| - |
156 |
| - }; //link |
157 |
| - |
158 |
| - return { |
159 |
| - restrict: 'E', |
160 |
| - require: '^map', |
161 |
| - link: linkFunc |
162 |
| - }; |
163 |
| - |
164 |
| - }; // infoWindow |
165 |
| - infoWindow.$inject = ['Attr2Options', '$compile', '$timeout', '$parse']; |
166 |
| - |
167 |
| - angular.module('ngMap').directive('infoWindow', infoWindow); |
| 42 | + var infoWindow = function(Attr2Options, $compile, $timeout, $parse) { |
| 43 | + var parser = Attr2Options; |
| 44 | + |
| 45 | + var getInfoWindow = function(options, events, element) { |
| 46 | + var infoWindow; |
| 47 | + |
| 48 | + /** |
| 49 | + * set options |
| 50 | + */ |
| 51 | + if (options.position && !(options.position instanceof google.maps.LatLng)) { |
| 52 | + delete options.position; |
| 53 | + } |
| 54 | + infoWindow = new google.maps.InfoWindow(options); |
| 55 | + |
| 56 | + /** |
| 57 | + * set events |
| 58 | + */ |
| 59 | + if (Object.keys(events).length > 0) { |
| 60 | + console.log("infoWindow events", events); |
| 61 | + } |
| 62 | + for (var eventName in events) { |
| 63 | + if (eventName) { |
| 64 | + google.maps.event.addListener(infoWindow, eventName, events[eventName]); |
| 65 | + } |
| 66 | + } |
| 67 | + |
| 68 | + /** |
| 69 | + * set template ane template-relate functions |
| 70 | + * it must have a container element with ng-non-bindable |
| 71 | + */ |
| 72 | + var template = element.html().trim(); |
| 73 | + if (angular.element(template).length != 1) { |
| 74 | + throw "info-window working as a template must have a container"; |
| 75 | + } |
| 76 | + infoWindow.__template = template.replace(/\s?ng-non-bindable[='"]+/,""); |
| 77 | + |
| 78 | + infoWindow.__compile = function(scope, anchor) { |
| 79 | + anchor && (scope['this'] = anchor); |
| 80 | + var el = $compile(infoWindow.__template)(scope); |
| 81 | + infoWindow.setContent(el[0]); |
| 82 | + scope.$apply(); |
| 83 | + }; |
| 84 | + |
| 85 | + infoWindow.__open = function(map, scope, anchor) { |
| 86 | + $timeout(function() { |
| 87 | + var tempTemplate = infoWindow.__template; // set template in a temporary variable |
| 88 | + infoWindow.__compile(scope, anchor); |
| 89 | + if (anchor && anchor.getPosition) { |
| 90 | + infoWindow.open(map, anchor); |
| 91 | + } else if (anchor && anchor instanceof google.maps.LatLng) { |
| 92 | + infoWindow.open(map); |
| 93 | + infoWindow.setPosition(anchor); |
| 94 | + } else { |
| 95 | + infoWindow.open(map); |
| 96 | + } |
| 97 | + infoWindow.__template = tempTemplate; // reset template to the object |
| 98 | + }); |
| 99 | + }; |
| 100 | + |
| 101 | + return infoWindow; |
| 102 | + }; |
| 103 | + |
| 104 | + var linkFunc = function(scope, element, attrs, mapController) { |
| 105 | + element.css('display','none'); |
| 106 | + var orgAttrs = parser.orgAttributes(element); |
| 107 | + var filtered = parser.filter(attrs); |
| 108 | + var options = parser.getOptions(filtered, scope); |
| 109 | + var events = parser.getEvents(scope, filtered); |
| 110 | + console.log('infoWindow', 'options', options, 'events', events); |
| 111 | + |
| 112 | + var address; |
| 113 | + if (options.position && !(options.position instanceof google.maps.LatLng)) { |
| 114 | + address = options.position; |
| 115 | + } |
| 116 | + var infoWindow = getInfoWindow(options, events, element); |
| 117 | + if (address) { |
| 118 | + mapController.getGeoLocation(address).then(function(latlng) { |
| 119 | + infoWindow.setPosition(latlng); |
| 120 | + infoWindow.__open(mapController.map, scope, latlng); |
| 121 | + var geoCallback = attrs.geoCallback; |
| 122 | + geoCallback && $parse(geoCallback)(scope); |
| 123 | + }); |
| 124 | + } |
| 125 | + |
| 126 | + mapController.addObject('infoWindows', infoWindow); |
| 127 | + mapController.observeAttrSetObj(orgAttrs, attrs, infoWindow); /* observers */ |
| 128 | + |
| 129 | + scope.$on('mapInitialized', function(evt, map) { |
| 130 | + infoWindow.visible && infoWindow.__open(map, scope); |
| 131 | + if (infoWindow.visibleOnMarker) { |
| 132 | + var markerId = infoWindow.visibleOnMarker; |
| 133 | + infoWindow.__open(map, scope, map.markers[markerId]); |
| 134 | + } |
| 135 | + }); |
| 136 | + |
| 137 | + /** |
| 138 | + * provide showInfoWindow method to scope |
| 139 | + */ |
| 140 | + |
| 141 | + scope.showInfoWindow = function(e, id, marker) { |
| 142 | + var infoWindow = mapController.map.infoWindows[id]; |
| 143 | + var anchor = marker ? marker : (this.getPosition ? this : null); |
| 144 | + infoWindow.__open(mapController.map, scope, anchor); |
| 145 | + }; |
| 146 | + |
| 147 | + /** |
| 148 | + * provide hideInfoWindow method to scope |
| 149 | + */ |
| 150 | + scope.hideInfoWindow = scope.hideInfoWindow || |
| 151 | + function(event, id) { |
| 152 | + var infoWindow = mapController.map.infoWindows[id]; |
| 153 | + infoWindow.close(); |
| 154 | + }; |
| 155 | + |
| 156 | + }; //link |
| 157 | + |
| 158 | + return { |
| 159 | + restrict: 'E', |
| 160 | + require: '^map', |
| 161 | + link: linkFunc |
| 162 | + }; |
| 163 | + |
| 164 | + }; // infoWindow |
| 165 | + infoWindow.$inject = ['Attr2Options', '$compile', '$timeout', '$parse']; |
| 166 | + |
| 167 | + angular.module('ngMap').directive('infoWindow', infoWindow); |
168 | 168 | })();
|
0 commit comments