1 | /*
|
---|
2 | Mobile Nav directives
|
---|
3 | */
|
---|
4 |
|
---|
5 | (function (ng, $) {
|
---|
6 |
|
---|
7 | angular.module('mobileNav')
|
---|
8 | // data-add-mobile-nav-transition
|
---|
9 | .directive('addMobileNavTransition', ['$timeout', function ($timeout) {
|
---|
10 |
|
---|
11 | var navigateMenuToActivePage = function($menu) {
|
---|
12 | var pathArray = window.location.pathname.split('/'),
|
---|
13 | arrLength = pathArray.length,
|
---|
14 | pathBuilder = "";
|
---|
15 |
|
---|
16 | for (var i = 0; i < arrLength; i++) {
|
---|
17 | var path = "/" + pathArray[i];
|
---|
18 | if (path.length < 2 || i === (arrLength - 1)) {
|
---|
19 | continue;
|
---|
20 | }
|
---|
21 |
|
---|
22 | pathBuilder += path;
|
---|
23 |
|
---|
24 | //console.log(pathBuilder);
|
---|
25 | $menu.find('a[href^="' + pathBuilder + '"]')
|
---|
26 | .first()
|
---|
27 | .next('.showChildren')
|
---|
28 | .trigger('click');
|
---|
29 | }
|
---|
30 | };
|
---|
31 |
|
---|
32 | return {
|
---|
33 | restrict: 'A',
|
---|
34 | link: function (scope, element, attrs) {
|
---|
35 | var slideAmount = 0;
|
---|
36 |
|
---|
37 | // Using jQuery "on" here as HTML for the mobile nav has not been added
|
---|
38 | // to the DOM by the time this directive runs
|
---|
39 | element.on('click', 'li.hasList > .showChildren', function (e) {
|
---|
40 | $(this).nextAll("ul").addClass("active");
|
---|
41 | slideAmount = slideAmount - 100;
|
---|
42 | // jQuery will vendor-prefix "tranform" e.g. "-webkit-transform: translate3d(0, 0, 0);" for Chrome
|
---|
43 | element.css({ "transform": "translate3d(" + slideAmount + "%,0,0)" });
|
---|
44 | });
|
---|
45 |
|
---|
46 | element.on('click', '.backLink', function (e) {
|
---|
47 | // cache selector for use in setTimeout
|
---|
48 | var $parent = $(this).parent("ul");
|
---|
49 | slideAmount = slideAmount + 100;
|
---|
50 | // jQuery will vendor-prefix "tranform" e.g. "-webkit-transform: translate3d(0, 0, 0);" for Chrome
|
---|
51 | element.css({ "transform": "translate3d(" + slideAmount + "%,0,0)" });
|
---|
52 | // Wait 300ms for the transform to complete
|
---|
53 | setTimeout(function () {
|
---|
54 | $parent.removeClass("active");
|
---|
55 | }, 300);
|
---|
56 | });
|
---|
57 |
|
---|
58 | $(function () {
|
---|
59 | setTimeout(function () {
|
---|
60 | navigateMenuToActivePage(element);
|
---|
61 | }, 1000);
|
---|
62 | });
|
---|
63 | }
|
---|
64 | };
|
---|
65 | }])
|
---|
66 | // data-overlay-toggle
|
---|
67 | .directive('overlayToggle', ['$timeout', '$window', function ($timeout, $window) {
|
---|
68 | return {
|
---|
69 | restrict: 'A',
|
---|
70 | link: function (scope, element, attrs) {
|
---|
71 | scope.newFastClickAdded = false;
|
---|
72 |
|
---|
73 | var $overlay = element;
|
---|
74 | attrs.$observe('overlayToggle', function (value) {
|
---|
75 | if (value == 'true') {
|
---|
76 | // Reinitialise Fastclick for dynamicaly added menu links
|
---|
77 | if (!scope.newFastClickAdded && $window.FastClick) {
|
---|
78 | new FastClick.attach(document.body);
|
---|
79 | scope.newFastClickAdded = true;
|
---|
80 | }
|
---|
81 |
|
---|
82 | $('body').css('overflow-x', 'hidden');
|
---|
83 | $overlay.show(0, function () {
|
---|
84 | $overlay.addClass('show');
|
---|
85 | });
|
---|
86 | } else {
|
---|
87 | $overlay.removeClass('show');
|
---|
88 | $timeout(function () {
|
---|
89 | $overlay.hide();
|
---|
90 | $('body').css('overflow-x', '');
|
---|
91 | }, 200);
|
---|
92 | }
|
---|
93 | });
|
---|
94 | }
|
---|
95 | };
|
---|
96 | }]);
|
---|
97 | })(angular, window.jQuery || angular.element); |
---|