4 angular.module('foundation.panel', ['foundation.core'])
5 .directive('zfPanel', zfPanel)
6 .service('FoundationPanel', FoundationPanel)
9 FoundationPanel.$inject = ['FoundationApi'];
11 function FoundationPanel(foundationApi) {
14 service.activate = activate;
15 service.deactivate = deactivate;
19 //target should be element ID
20 function activate(target) {
21 foundationApi.publish(target, 'show');
24 //target should be element ID
25 function deactivate(target) {
26 foundationApi.publish(target, 'hide');
30 zfPanel.$inject = ['FoundationApi', '$window'];
32 function zfPanel(foundationApi, $window) {
35 templateUrl: 'components/panel/panel.html',
46 function compile(tElement, tAttrs, transclude) {
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;
60 function postLink(scope, element, attrs) {
62 var animationIn, animationOut;
63 var globalQueries = foundationApi.getSettings().mediaQueries;
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';
82 foundationApi.subscribe(attrs.id, function(msg) {
83 var panelPosition = $window.getComputedStyle(element[0]).getPropertyValue("position");
85 // patch to prevent panel animation on larger screen devices
86 if (panelPosition !== 'absolute') {
90 if(msg == 'show' || msg == 'open') {
92 } else if (msg == 'close' || msg == 'hide') {
94 } else if (msg == 'toggle') {
98 if (!scope.$root.$$phase) {
105 scope.hide = function() {
107 scope.active = false;
108 foundationApi.animate(element, scope.active, animationIn, animationOut);
114 scope.show = function() {
117 foundationApi.animate(element, scope.active, animationIn, animationOut);
123 scope.toggle = function() {
124 scope.active = !scope.active;
125 foundationApi.animate(element, scope.active, animationIn, animationOut);
130 element.on('click', function(e) {
132 var srcEl = e.srcElement;
134 if(!matchMedia(globalQueries.medium).matches && srcEl.href && srcEl.href.length > 0) {
135 //hide element if it can't match at least medium
137 foundationApi.animate(element, scope.active, animationIn, animationOut);