afb-client/bower_components/foundation-apps/js/angular/components/actionsheet/actionsheet.js

   1 (function() {
   2   'use strict';
   3
   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)
  10   ;
  11
  12   FoundationActionSheet.$inject = ['FoundationApi'];
  13
  14   function FoundationActionSheet(foundationApi) {
  15     var service    = {};
  16
  17     service.activate = activate;
  18     service.deactivate = deactivate;
  19
  20     return service;
  21
  22     //target should be element ID
  23     function activate(target) {
  24       foundationApi.publish(target, 'show');
  25     }
  26
  27     //target should be element ID
  28     function deactivate(target) {
  29       foundationApi.publish(target, 'hide');
  30     }
  31   }
  32
  33   zfActionSheetController.$inject = ['$scope', 'FoundationApi'];
  34
  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);
  40
  41     controller.registerContent = function(scope) {
  42       content = scope;
  43       content.active = false;
  44     };
  45
  46     controller.registerContainer = function(scope) {
  47       container = scope;
  48       container.active = false;
  49     };
  50
  51     controller.toggle = toggle;
  52     controller.hide = hide;
  53
  54     controller.registerListener = function() {
  55       document.body.addEventListener('click', listenerLogic);
  56     };
  57
  58     controller.deregisterListener = function() {
  59       document.body.removeEventListener('click', listenerLogic);
  60     }
  61
  62     function listenerLogic(e) {
  63       var el = e.target;
  64       var insideActionSheet = false;
  65
  66       do {
  67         if(el.classList && el.classList.contains('action-sheet-container')) {
  68           insideActionSheet = true;
  69           break;
  70         }
  71
  72       } while ((el = el.parentNode));
  73
  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']) {
  77           return;
  78         };
  79         // if the element is outside the action sheet and is NOT a toggle element, hide
  80         hide();
  81       }
  82     }
  83
  84     function hide() {
  85       content.hide();
  86       container.hide();
  87
  88       content.$apply();
  89       container.$apply();
  90     }
  91
  92     function toggle() {
  93       content.toggle();
  94       container.toggle();
  95
  96       content.$apply();
  97       container.$apply();
  98     }
  99   }
 100
 101   zfActionSheet.$inject = ['FoundationApi'];
 102
 103   function zfActionSheet(foundationApi) {
 104     var directive = {
 105       restrict: 'EA',
 106       transclude: true,
 107       replace: true,
 108       templateUrl: 'components/actionsheet/actionsheet.html',
 109       controller: 'ZfActionSheetController',
 110       compile: compile
 111     };
 112
 113     return directive;
 114
 115     function compile() {
 116
 117       return {
 118         pre: preLink,
 119         post: postLink
 120       };
 121
 122       function preLink(scope, iElement, iAttrs) {
 123         iAttrs.$set('zf-closable', 'actionsheet');
 124       }
 125
 126       function postLink(scope, element, attrs, controller) {
 127         var id = attrs.id || foundationApi.generateUuid();
 128         attrs.$set('id', id);
 129
 130         scope.active = false;
 131
 132         foundationApi.subscribe(id, function(msg) {
 133           if (msg === 'toggle') {
 134             controller.toggle();
 135           }
 136
 137           if (msg === 'hide' || msg === 'close') {
 138             controller.hide();
 139           }
 140
 141         });
 142
 143         controller.registerContainer(scope);
 144
 145         scope.toggle = function() {
 146           scope.active = !scope.active;
 147           return;
 148         };
 149
 150         scope.hide = function() {
 151           scope.active = false;
 152           return;
 153         };
 154       }
 155     }
 156   }
 157
 158   zfAsContent.$inject = ['FoundationApi'];
 159
 160   function zfAsContent(foundationApi) {
 161     var directive = {
 162       restrict: 'EA',
 163       transclude: true,
 164       replace: true,
 165       templateUrl: 'components/actionsheet/actionsheet-content.html',
 166       require: '^zfActionSheet',
 167       scope: {
 168         position: '@?'
 169       },
 170       link: link
 171     };
 172
 173     return directive;
 174
 175     function link(scope, element, attrs, controller) {
 176       scope.active = false;
 177       scope.position = scope.position || 'bottom';
 178       controller.registerContent(scope);
 179
 180       scope.toggle = function() {
 181         scope.active = !scope.active;
 182         if(scope.active) {
 183           controller.registerListener();
 184         } else {
 185           controller.deregisterListener();
 186         }
 187
 188         return;
 189       };
 190
 191       scope.hide = function() {
 192         scope.active = false;
 193         controller.deregisterListener();
 194         return;
 195       };
 196     }
 197   }
 198
 199   zfAsButton.$inject = ['FoundationApi'];
 200
 201   function zfAsButton(foundationApi) {
 202     var directive = {
 203       restrict: 'EA',
 204       transclude: true,
 205       replace: true,
 206       templateUrl: 'components/actionsheet/actionsheet-button.html',
 207       require: '^zfActionSheet',
 208       scope: {
 209         title: '@?'
 210       },
 211       link: link
 212     }
 213
 214     return directive;
 215
 216     function link(scope, element, attrs, controller) {
 217
 218       element.on('click', function(e) {
 219         controller.toggle();
 220         e.preventDefault();
 221       });
 222
 223     }
 224   }
 225
 226 })();