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

   1 (function() {
   2   'use strict';
   3
   4   angular.module('foundation.popup', ['foundation.core'])
   5     .directive('zfPopup', zfPopup)
   6     .directive('zfPopupToggle', zfPopupToggle)
   7     .service('FoundationPopup', FoundationPopup)
   8   ;
   9
  10   FoundationPopup.$inject = ['FoundationApi'];
  11
  12   function FoundationPopup(foundationApi) {
  13     var service    = {};
  14
  15     service.activate = activate;
  16     service.deactivate = deactivate;
  17
  18     return service;
  19
  20     //target should be element ID
  21     function activate(target) {
  22       foundationApi.publish(target, 'show');
  23     }
  24
  25     //target should be element ID
  26     function deactivate(target) {
  27       foundationApi.publish(target, 'hide');
  28     }
  29
  30     function toggle(target, popupTarget) {
  31       foundationApi.publish(target, ['toggle', popupTarget]);
  32     }
  33   }
  34
  35   zfPopup.$inject = ['FoundationApi'];
  36
  37   function zfPopup(foundationApi) {
  38     var directive = {
  39       restrict: 'EA',
  40       transclude: true,
  41       replace: true,
  42       templateUrl: 'components/popup/popup.html',
  43       scope: {
  44         pinTo: '@?',
  45         pinAt: '@?',
  46         target: '@?'
  47       },
  48       compile: compile
  49     };
  50
  51     return directive;
  52
  53     function compile() {
  54       return {
  55         pre: preLink,
  56         post: postLink
  57       };
  58
  59       function preLink(scope, iElement, iAttrs) {
  60         iAttrs.$set('zf-closable', 'popup');
  61       }
  62
  63       function postLink(scope, element, attrs) {
  64         scope.active = false;
  65         scope.target = scope.target || false;
  66
  67         var attachment = scope.pinTo || 'top center';
  68         var targetAttachment = scope.pinAt || 'bottom center';
  69         var tetherInit = false;
  70         var tether     = {};
  71
  72         //setup
  73         foundationApi.subscribe(attrs.id, function(msg) {
  74           if(msg[0] === 'show' || msg[0] === 'open') {
  75             scope.show(msg[1]);
  76           } else if (msg[0] === 'close' || msg[0] === 'hide') {
  77             scope.hide();
  78           } else if (msg[0] === 'toggle') {
  79             scope.toggle(msg[1]);
  80           }
  81
  82           scope.$apply();
  83
  84           return;
  85         });
  86
  87
  88         scope.hide = function() {
  89           scope.active = false;
  90           tetherElement();
  91           tether.disable();
  92           return;
  93         };
  94
  95         scope.show = function(newTarget) {
  96           scope.active = true;
  97           tetherElement(newTarget);
  98           tether.enable();
  99
 100           return;
 101         };
 102
 103         scope.toggle = function(newTarget) {
 104           scope.active = !scope.active;
 105           tetherElement(newTarget);
 106
 107           if(scope.active) {
 108             tether.enable();
 109           } else  {
 110             tether.disable();
 111           }
 112
 113           return;
 114         };
 115
 116         function tetherElement(target) {
 117           if(tetherInit) {
 118             return;
 119           }
 120
 121           scope.target = scope.target ? document.getElementById(scope.target) : document.getElementById(target);
 122
 123           tether = new Tether({
 124             element: element[0],
 125             target: scope.target,
 126             attachment: attachment,
 127             targetAttachment: targetAttachment,
 128             enable: false
 129           });
 130
 131           tetherInit = true;
 132         }
 133
 134       }
 135     }
 136   }
 137
 138   zfPopupToggle.$inject = ['FoundationApi'];
 139
 140   function zfPopupToggle(foundationApi) {
 141     var directive = {
 142       restrict: 'A',
 143       link: link
 144     };
 145
 146     return directive;
 147
 148     function link(scope, element, attrs) {
 149       var target = attrs.zfPopupToggle;
 150       var id = attrs.id || foundationApi.generateUuid();
 151       attrs.$set('id', id);
 152
 153       element.on('click', function(e) {
 154         foundationApi.publish(target, ['toggle', id]);
 155         e.preventDefault();
 156       });
 157     }
 158   }
 159
 160 })();