1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
|
(function() {
'use strict';
angular.module('foundation.offcanvas', ['foundation.core'])
.directive('zfOffcanvas', zfOffcanvas)
.service('FoundationOffcanvas', FoundationOffcanvas)
;
FoundationOffcanvas.$inject = ['FoundationApi'];
function FoundationOffcanvas(foundationApi) {
var service = {};
service.activate = activate;
service.deactivate = deactivate;
return service;
//target should be element ID
function activate(target) {
foundationApi.publish(target, 'show');
}
//target should be element ID
function deactivate(target) {
foundationApi.publish(target, 'hide');
}
function toggle(target) {
foundationApi.publish(target, 'toggle');
}
}
zfOffcanvas.$inject = ['FoundationApi'];
function zfOffcanvas(foundationApi) {
var directive = {
restrict: 'EA',
templateUrl: 'components/offcanvas/offcanvas.html',
transclude: true,
scope: {
position: '@'
},
replace: true,
compile: compile
};
return directive;
function compile(tElement, tAttrs, transclude) {
var type = 'offcanvas';
return {
pre: preLink,
post: postLink
}
function preLink(scope, iElement, iAttrs, controller) {
iAttrs.$set('zf-closable', type);
document.body.classList.add('has-off-canvas');
}
function postLink(scope, element, attrs) {
scope.position = scope.position || 'left';
scope.active = false;
//setup
foundationApi.subscribe(attrs.id, function(msg) {
if(msg === 'show' || msg === 'open') {
scope.show();
} else if (msg === 'close' || msg === 'hide') {
scope.hide();
} else if (msg === 'toggle') {
scope.toggle();
}
if (!scope.$root.$$phase) {
scope.$apply();
}
return;
});
scope.hide = function() {
scope.active = false;
return;
};
scope.show = function() {
scope.active = true;
return;
};
scope.toggle = function() {
scope.active = !scope.active;
return;
};
}
}
}
})();
|
