4 angular.module('foundation.actionsheet', ['foundation.core'])
5 .controller('ZfActionSheetController', zfActionSheetController)
6 .directive('zfActionSheet', zfActionSheet)
7 .directive('zfAsContent', zfAsContent)
8 .directive('zfAsButton', zfAsButton)
9 .service('FoundationActionSheet', FoundationActionSheet)
12 FoundationActionSheet.$inject = ['FoundationApi'];
14 function FoundationActionSheet(foundationApi) {
17 service.activate = activate;
18 service.deactivate = deactivate;
22 //target should be element ID
23 function activate(target) {
24 foundationApi.publish(target, 'show');
27 //target should be element ID
28 function deactivate(target) {
29 foundationApi.publish(target, 'hide');
33 zfActionSheetController.$inject = ['$scope', 'FoundationApi'];
35 function zfActionSheetController($scope, foundationApi) {
36 var controller = this;
37 var content = controller.content = $scope.content;
38 var container = controller.container = $scope.container;
39 var body = angular.element(document.body);
41 controller.registerContent = function(scope) {
43 content.active = false;
46 controller.registerContainer = function(scope) {
48 container.active = false;
51 controller.toggle = toggle;
52 controller.hide = hide;
54 controller.registerListener = function() {
55 document.body.addEventListener('click', listenerLogic);
58 controller.deregisterListener = function() {
59 document.body.removeEventListener('click', listenerLogic);
62 function listenerLogic(e) {
64 var insideActionSheet = false;
67 if(el.classList && el.classList.contains('action-sheet-container')) {
68 insideActionSheet = true;
72 } while ((el = el.parentNode));
74 if(!insideActionSheet) {
75 // if the element has a toggle attribute, do nothing
76 if (e.target.attributes['zf-toggle'] || e.target.attributes['zf-hard-toggle']) {
79 // if the element is outside the action sheet and is NOT a toggle element, hide
101 zfActionSheet.$inject = ['FoundationApi'];
103 function zfActionSheet(foundationApi) {
108 templateUrl: 'components/actionsheet/actionsheet.html',
109 controller: 'ZfActionSheetController',
122 function preLink(scope, iElement, iAttrs) {
123 iAttrs.$set('zf-closable', 'actionsheet');
126 function postLink(scope, element, attrs, controller) {
127 var id = attrs.id || foundationApi.generateUuid();
128 attrs.$set('id', id);
130 scope.active = false;
132 foundationApi.subscribe(id, function(msg) {
133 if (msg === 'toggle') {
137 if (msg === 'hide' || msg === 'close') {
143 controller.registerContainer(scope);
145 scope.toggle = function() {
146 scope.active = !scope.active;
150 scope.hide = function() {
151 scope.active = false;
158 zfAsContent.$inject = ['FoundationApi'];
160 function zfAsContent(foundationApi) {
165 templateUrl: 'components/actionsheet/actionsheet-content.html',
166 require: '^zfActionSheet',
175 function link(scope, element, attrs, controller) {
176 scope.active = false;
177 scope.position = scope.position || 'bottom';
178 controller.registerContent(scope);
180 scope.toggle = function() {
181 scope.active = !scope.active;
183 controller.registerListener();
185 controller.deregisterListener();
191 scope.hide = function() {
192 scope.active = false;
193 controller.deregisterListener();
199 zfAsButton.$inject = ['FoundationApi'];
201 function zfAsButton(foundationApi) {
206 templateUrl: 'components/actionsheet/actionsheet-button.html',
207 require: '^zfActionSheet',
216 function link(scope, element, attrs, controller) {
218 element.on('click', function(e) {