afm-client/bower_components/foundation-apps/js/angular/components/offcanvas/offcanvas.js

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