source: main/trunk/model-interfaces-dev/heritage-nz/iframe/heritage-nz-dl_files/mapDirectives.js@ 32796

/*
    Map module directives
*/
(function (ng, $) {

    var reinitialiseJscroll = function ($element) {
        var jscrollApi = $element.data('jsp');
        if (jscrollApi) {
            setTimeout(function () {
                jscrollApi.reinitialise();
            }, 0);
        } else {
            $element.jScrollPane({ maintainPosition: false, mouseWheelSpeed: 30, verticalDragMinHeight: 30 });
        }
    };

    angular.module('mapModule')
    // data-google-map
    .directive('googleMap', ['$window', '$timeout', 'utils', function ($window, $timeout, utils) {
        return {
            restrict: 'A',
            scope: {
                googleMapModule: "=googleMap" // two-way binding with controller e.g. MapCtrl
            },
            link: linker
        };

        function linker(scope, element, attrs) {
            
            scope.safeApply = function (fn) {
                var phase = this.$root.$$phase;
                if (phase == '$apply' || phase == '$digest') {
                    if (fn && (typeof (fn) === 'function')) {
                        fn();
                    }
                } else {
                    this.$apply(fn);
                }
            };

            if ($window.google && $window.google.maps && $window.InfoBox) {
                utils.safeApply(scope, function () {
                    initGoogleMaps();
                });
            } else {
                initGoogleMapsAsync();
            }

            function initGoogleMapsAsync() {
                $.when(LoadGoogleMapsWithPromise())
                    .then(function () {
                        return $.ajax({ url: "/scripts/vendor/infobox.min.js", dataType: "script", cache: true });
                    })
                    .then(function () {
                        utils.safeApply(scope, function () {
                            initGoogleMaps();
                        });
                    });
            };

            function initGoogleMaps() {
                if ((!$window.google && !$window.google.maps) || !window.InfoBox) {
                    throw "Google maps or InfoBox failed to load";
                }

                scope.mapOptions = scope.$eval('{' + attrs.mapOptions + '}');
                scope.mapOptions.mapId = attrs.id;

                if (scope.mapOptions.directionsId) {
                    setDirectionsCallbacks();
                }

                // Handle user location callback
                if (angular.isDefined(scope.googleMapModule)) {
                    scope.mapOptions.userLocationSetCallback = function (userLocation) {
                        utils.safeApply(scope, function (){
                            scope.googleMapModule.userLocation = userLocation;
                        });                        
                    };

                    scope.mapOptions.zoomLevelSetCallback = function (zoomLevel, mapCenter) {
                        utils.safeApply(scope, function () {
                            scope.googleMapModule.currentZoomLevel = zoomLevel;
                            scope.googleMapModule.curMapCenter = mapCenter;
                            scope.googleMapModule.isAutoSearch = true;
                        });
                    };

                    scope.mapOptions.mapCenterSetCallback = function (zoomLevel, mapCenter) {
                        utils.safeApply(scope, function () {
                            scope.googleMapModule.currentZoomLevel = zoomLevel;
                            scope.googleMapModule.curMapCenter = mapCenter;
                            scope.googleMapModule.isAutoSearch = true;
                        });
                    };
                }
                // Add google map to scope.googleMap namespace
                GoogleMap.call(scope.googleMapModule, scope.mapOptions);
            }

            function setDirectionsCallbacks() {
                var $mapDirections = $('#' + scope.mapOptions.directionsId);
                var $mapDirectionsContainer = $mapDirections.parent();

                scope.mapOptions.directionsOnSetCallback = function (directionsObject) {
                    scope.$apply(function () {
                        scope.googleMapModule.directions = directionsObject;
                    });

                    var directionsHtml = getDirectionsHtml(directionsObject);

                    $mapDirections.slideDown(200).promise().done(function () {
                        $mapDirections.html(directionsHtml);
                        reinitialiseJscroll($mapDirectionsContainer);
                    });
                };

                scope.mapOptions.directionsOnUpdateCallback = function (directionsObject) {
                    scope.$apply(function () {
                        scope.googleMapModule.directions = directionsObject;
                    });

                    var directionsHtml = getDirectionsHtml(directionsObject);
                    $mapDirections.html(directionsHtml);
                    reinitialiseJscroll($mapDirectionsContainer);
                };

                scope.mapOptions.directionsOnCloseCallback = function (directionsObject) {
                    $mapDirections.slideUp(200).html("");
                };

                var widowResizedTimer;
                $(window).resize(function () {
                    // Wait 500ms after window has stopped resizing
                    clearTimeout(widowResizedTimer);
                    widowResizedTimer = $timeout(function () {
                        reinitialiseJscroll($mapDirectionsContainer);
                    }, 500);
                });

                function getDirectionsHtml(directionsObject) {
                    var directionsHtml = '';
                    directionsHtml += "<p><strong>From</strong>: " + directionsObject.start_address + "</p>";
                    directionsHtml += "<p><strong>To</strong>: " + directionsObject.end_address + "</p>";
                    directionsHtml += "<p><strong>Distance</strong>: " + directionsObject.distance.text + " (about " + directionsObject.duration.text + ").</p>";
                    directionsHtml += "<hr>";

                    angular.forEach(directionsObject.steps, function (item) {
                        directionsHtml += '<p>' + item.instructions + '</p>';
                    });

                    return directionsHtml;
                }

            }
        }
    }])
    // data-jscroll-callback
    .directive('jscrollCallback', ['$timeout', '$window', function ($timeout, $window) {
        return {
            restrict: 'A',
            link: function (scope, element, attrs) {
                scope.$watch(attrs.jscrollCallback, function (oldVal, newVal) {
                    var keys = scope.$eval(attrs.jscrollCallback);
                    if (keys.length) {
                        reinitialiseJscroll(element);
                    }
                });

                var widowResized;
                $(window).resize(function () {
                    // Wait 200ms after window has stopped resizing
                    clearTimeout(widowResized);
                    widowResized = $timeout(function () {
                        reinitialiseJscroll(element);
                    }, 200);
                });
            }
        };
    }]);

})(angular, window.jQuery || angular.element);