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

   1 (function() {
   2   'use strict';
   3
   4   angular.module('foundation.panel', ['foundation.core'])
   5     .directive('zfPanel', zfPanel)
   6     .service('FoundationPanel', FoundationPanel)
   7   ;
   8
   9   FoundationPanel.$inject = ['FoundationApi'];
  10
  11   function FoundationPanel(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
  30   zfPanel.$inject = ['FoundationApi', '$window'];
  31
  32   function zfPanel(foundationApi, $window) {
  33     var directive = {
  34       restrict: 'EA',
  35       templateUrl: 'components/panel/panel.html',
  36       transclude: true,
  37       scope: {
  38         position: '@?'
  39       },
  40       replace: true,
  41       compile: compile
  42     };
  43
  44     return directive;
  45
  46     function compile(tElement, tAttrs, transclude) {
  47       var type = 'panel';
  48
  49       return {
  50         pre: preLink,
  51         post: postLink
  52       };
  53
  54       function preLink(scope, iElement, iAttrs, controller) {
  55         iAttrs.$set('zf-closable', type);
  56         scope.position = scope.position || 'left';
  57         scope.positionClass = 'panel-' + scope.position;
  58       }
  59
  60       function postLink(scope, element, attrs) {
  61         scope.active = false;
  62         var animationIn, animationOut;
  63         var globalQueries = foundationApi.getSettings().mediaQueries;
  64
  65         //urgh, there must be a better way
  66         if(scope.position === 'left') {
  67           animationIn  = attrs.animationIn || 'slideInRight';
  68           animationOut = attrs.animationOut || 'slideOutLeft';
  69         } else if (scope.position === 'right') {
  70           animationIn  = attrs.animationIn || 'slideInLeft';
  71           animationOut = attrs.animationOut || 'slideOutRight';
  72         } else if (scope.position === 'top') {
  73           animationIn  = attrs.animationIn || 'slideInDown';
  74           animationOut = attrs.animationOut || 'slideOutUp';
  75         } else if (scope.position === 'bottom') {
  76           animationIn  = attrs.animationIn || 'slideInUp';
  77           animationOut = attrs.animationOut || 'slideOutBottom';
  78         }
  79
  80
  81         //setup
  82         foundationApi.subscribe(attrs.id, function(msg) {
  83           var panelPosition = $window.getComputedStyle(element[0]).getPropertyValue("position");
  84
  85           // patch to prevent panel animation on larger screen devices
  86           if (panelPosition !== 'absolute') {
  87             return;
  88           }
  89
  90           if(msg == 'show' || msg == 'open') {
  91             scope.show();
  92           } else if (msg == 'close' || msg == 'hide') {
  93             scope.hide();
  94           } else if (msg == 'toggle') {
  95             scope.toggle();
  96           }
  97
  98           if (!scope.$root.$$phase) {
  99             scope.$apply();
 100           }
 101
 102           return;
 103         });
 104
 105         scope.hide = function() {
 106           if(scope.active){
 107             scope.active = false;
 108             foundationApi.animate(element, scope.active, animationIn, animationOut);
 109           }
 110
 111           return;
 112         };
 113
 114         scope.show = function() {
 115           if(!scope.active){
 116             scope.active = true;
 117             foundationApi.animate(element, scope.active, animationIn, animationOut);
 118           }
 119
 120           return;
 121         };
 122
 123         scope.toggle = function() {
 124           scope.active = !scope.active;
 125           foundationApi.animate(element, scope.active, animationIn, animationOut);
 126
 127           return;
 128         };
 129
 130         element.on('click', function(e) {
 131           //check sizing
 132           var srcEl = e.srcElement;
 133
 134           if(!matchMedia(globalQueries.medium).matches && srcEl.href && srcEl.href.length > 0) {
 135             //hide element if it can't match at least medium
 136             scope.hide();
 137             foundationApi.animate(element, scope.active, animationIn, animationOut);
 138           }
 139         });
 140       }
 141     }
 142   }
 143
 144 })();