From 09eff9fc2677911160398f75ffc3e8f400062ae9 Mon Sep 17 00:00:00 2001 From: Brian Soumakian Date: Thu, 14 Jul 2016 04:18:29 -0700 Subject: [PATCH 01/11] backlog of fixes for repository merge of https://github.com/fiboacademy/foundation-apps/tree/fibo-master --- js/angular/components/common/common.js | 34 ++++++-- js/angular/components/iconic/iconic.js | 13 +++- .../components/interchange/interchange.js | 67 ++++++++-------- js/angular/components/modal/modal.js | 77 ++++++++++++------- .../components/notification/notification.js | 28 ++++++- js/angular/components/offcanvas/offcanvas.js | 9 +++ js/angular/components/panel/panel.js | 24 ++++-- js/angular/components/popup/popup.js | 25 ++++-- js/angular/services/base.core.js | 27 ++++++- .../base.dynamicRouting.animations.js | 20 ++--- js/angular/services/base.mediaquery.js | 22 +++--- scss/components/_button.scss | 4 + scss/components/_grid.scss | 64 ++++++++++++++- scss/components/_iconic.scss | 6 +- 14 files changed, 302 insertions(+), 118 deletions(-) diff --git a/js/angular/components/common/common.js b/js/angular/components/common/common.js index 03b8a69..30fb720 100644 --- a/js/angular/components/common/common.js +++ b/js/angular/components/common/common.js @@ -192,22 +192,40 @@ function link(scope, element, attrs) { element.on('click', function(e) { - var tar = e.target; - var avoid = ['zf-toggle', 'zf-hard-toggle', 'zf-open', 'zf-close'].filter(function(e, i){ + var tar = e.target, avoid, activeElements, closedElements, i; + + // check if clicked target is designated to open/close another component + avoid = ['zf-toggle', 'zf-hard-toggle', 'zf-open', 'zf-close'].filter(function(e){ return e in tar.attributes; }); + if(avoid.length > 0) { + // do nothing + return; + } - if(avoid.length > 0){ return; } + // check if clicked element is inside active closable parent + if (getParentsUntil(tar, 'zf-closable') !== false) { + // do nothing + return; + } - var activeElements = document.querySelectorAll('.is-active[zf-closable]'); + // close all active elements + activeElements = document.querySelectorAll('.is-active[zf-closable]'); + closedElements = 0; + if(activeElements.length > 0) { + for(i = 0; i < activeElements.length; i++) { + if (!activeElements[i].hasAttribute('zf-ignore-all-close')) { + foundationApi.publish(activeElements[i].id, 'close'); + closedElements++; + } + } - if(activeElements.length && !activeElements[0].hasAttribute('zf-ignore-all-close')){ - if(getParentsUntil(tar, 'zf-closable') === false){ + // if one or more elements were closed, + // prevent the default action + if (closedElements > 0) { e.preventDefault(); - foundationApi.publish(activeElements[0].id, 'close'); } } - return; }); } /** special thanks to Chris Ferdinandi for this solution. diff --git a/js/angular/components/iconic/iconic.js b/js/angular/components/iconic/iconic.js index e40d8ab..24c7791 100644 --- a/js/angular/components/iconic/iconic.js +++ b/js/angular/components/iconic/iconic.js @@ -152,9 +152,11 @@ injectSvg(element[0]); - foundationApi.subscribe('resize', function () { - // only run update on current element - ico.update(element[0]); + // subscribe for resize events + foundationApi.subscribe('resize', resize); + + scope.$on("$destroy", function() { + foundationApi.unsubscribe('resize', resize); }); // handle dynamic updating of src @@ -254,6 +256,11 @@ } }); } + + function resize() { + // run update on current element + ico.update(element[0]); + } } function addDataDash(attr) { diff --git a/js/angular/components/interchange/interchange.js b/js/angular/components/interchange/interchange.js index 3e91c84..1764391 100644 --- a/js/angular/components/interchange/interchange.js +++ b/js/angular/components/interchange/interchange.js @@ -31,8 +31,32 @@ var globalQueries = foundationMQ.getMediaQueries(); - //setup - foundationApi.subscribe('resize', function(msg) { + // subscribe for resize events + foundationApi.subscribe('resize', resize); + + scope.$on("$destroy", function() { + foundationApi.unsubscribe('resize', resize); + }); + + //init + foundationApi.publish('resize', 'initial resize'); + + function templateLoader(templateUrl) { + return $http.get(templateUrl, {cache: $templateCache}); + } + + function collectInformation(el) { + var data = foundationMQ.collectScenariosFromElement(el); + + scenarios = data.scenarios; + innerTemplates = data.templates; + } + + function checkScenario(scenario) { + return !current || current !== scenario; + } + + function resize(msg) { transclude(function(clone, newScope) { if(!scenarios || !innerTemplates) { collectInformation(clone); @@ -72,25 +96,6 @@ } } }); - - }); - - //init - foundationApi.publish('resize', 'initial resize'); - - function templateLoader(templateUrl) { - return $http.get(templateUrl, {cache: $templateCache}); - } - - function collectInformation(el) { - var data = foundationMQ.collectScenariosFromElement(el); - - scenarios = data.scenarios; - innerTemplates = data.templates; - } - - function checkScenario(scenario) { - return !current || current !== scenario; } } } @@ -224,17 +229,10 @@ function postLink(scope, element, attrs) { // subscribe for resize events - foundationApi.subscribe('resize', function() { - var orignalVisibilty = scope[queryResult]; - runQuery(); - if (orignalVisibilty != scope[queryResult]) { - // digest if visibility changed - scope.$digest(); - } - }); + foundationApi.subscribe('resize', resize); scope.$on("$destroy", function() { - foundationApi.unsubscribe('resize'); + foundationApi.unsubscribe('resize', resize); }); // run first media query check @@ -259,6 +257,15 @@ } } } + + function resize() { + var orignalVisibilty = scope[queryResult]; + runQuery(); + if (orignalVisibilty != scope[queryResult]) { + // digest if visibility changed + scope.$digest(); + } + } } } } diff --git a/js/angular/components/modal/modal.js b/js/angular/components/modal/modal.js index 2f6d642..569f196 100644 --- a/js/angular/components/modal/modal.js +++ b/js/angular/components/modal/modal.js @@ -71,7 +71,7 @@ var dialog = angular.element(element.children()[0]); var animateFn = attrs.hasOwnProperty('zfAdvise') ? foundationApi.animateAndAdvise : foundationApi.animate; - scope.active = scope.active || false; + scope.active = false; scope.overlay = attrs.overlay === 'false' ? false : true; scope.overlayClose = attrs.overlayClose === 'false' ? false : true; @@ -88,27 +88,32 @@ }; scope.hide = function() { - scope.active = false; - animate(); + if (scope.active) { + scope.active = false; + adviseActiveChanged(); + animate(); + } return; }; scope.show = function() { - scope.active = true; - animate(); - dialog.tabIndex = -1; - dialog[0].focus(); + if (!scope.active) { + scope.active = true; + adviseActiveChanged(); + animate(); + dialog.tabIndex = -1; + dialog[0].focus(); + } return; }; scope.toggle = function() { scope.active = !scope.active; + adviseActiveChanged(); animate(); return; }; - init(); - //setup foundationApi.subscribe(attrs.id, function(msg) { if(msg === 'show' || msg === 'open') { @@ -126,6 +131,12 @@ return; }); + function adviseActiveChanged() { + if (!angular.isUndefined(attrs.zfAdvise)) { + foundationApi.publish(attrs.id, scope.active ? 'activated' : 'deactivated'); + } + } + function animate() { //animate both overlay and dialog if(!scope.overlay) { @@ -136,7 +147,7 @@ // due to a bug where the overlay fadeIn is essentially covering up // the dialog's animation if (!scope.active) { - animateFn(element, scope.active, overlayIn, overlayOut); + foundationApi.animate(element, scope.active, overlayIn, overlayOut); } else { element.addClass('is-active'); @@ -144,12 +155,6 @@ animateFn(dialog, scope.active, animationIn, animationOut); } - - function init() { - if(scope.active) { - scope.show(); - } - } } } } @@ -165,6 +170,7 @@ id = config.id || foundationApi.generateUuid(), attached = false, destroyed = false, + activated = false, html, element, fetched, @@ -177,6 +183,7 @@ 'animationOut', 'overlay', 'overlayClose', + 'ignoreAllClose', 'class' ]; @@ -196,12 +203,12 @@ assembleDirective(); } + self.isActive = isActive; self.activate = activate; self.deactivate = deactivate; self.toggle = toggle; self.destroy = destroy; - return { isActive: isActive, activate: activate, @@ -217,44 +224,53 @@ } function isActive() { - return !destroyed && scope && scope.active === true; + return !destroyed && scope && activated; } function activate() { checkStatus(); $timeout(function() { - init(true); - foundationApi.publish(id, 'show'); + activated = true; + init('show'); }, 0, false); } function deactivate() { checkStatus(); $timeout(function() { - init(false); - foundationApi.publish(id, 'hide'); + activated = false; + init('hide'); }, 0, false); } function toggle() { checkStatus(); $timeout(function() { - init(true); - foundationApi.publish(id, 'toggle'); + activated = !activated; + init('toggle'); }, 0, false); } - function init(state) { + function init(msg) { $q.when(fetched).then(function() { - if(!attached && html.length > 0) { - var modalEl = container.append(element); + var delayMsg = false; + if(!attached && html.length > 0) { + container.append(element); $compile(element)(scope); - attached = true; + + // delay message so directive can be compiled and respond to messages + delayMsg = true; } - scope.active = state; + if (delayMsg) { + $timeout(function() { + foundationApi.publish(id, msg); + }, 0, false); + } else { + foundationApi.publish(id, msg); + } }); } @@ -285,6 +301,9 @@ case 'overlayClose': element.attr('overlay-close', config[prop] === 'false' ? 'false' : 'true'); // must be string, see postLink() above break; + case 'ignoreAllClose': + element.attr('zf-ignore-all-close', 'zf-ignore-all-close'); + break; case 'class': if (angular.isString(config[prop])) { config[prop].split(' ').forEach(function(klass) { diff --git a/js/angular/components/notification/notification.js b/js/angular/components/notification/notification.js index 2478b91..efe6ba7 100644 --- a/js/angular/components/notification/notification.js +++ b/js/angular/components/notification/notification.js @@ -163,11 +163,13 @@ //due to dynamic insertion of DOM, we need to wait for it to show up and get working! setTimeout(function() { scope.active = true; + adviseActiveChanged(); animate(element, scope.active, animationIn, animationOut); }, 50); scope.hide = function() { scope.active = false; + adviseActiveChanged(); animate(element, scope.active, animationIn, animationOut); setTimeout(function() { controller.removeNotification(scope.notifId); @@ -200,6 +202,12 @@ } }); } + + function adviseActiveChanged() { + if (!angular.isUndefined(attrs.zfAdvise)) { + foundationApi.publish(attrs.id, scope.active ? 'activated' : 'deactivated'); + } + } } } } @@ -275,23 +283,35 @@ }); scope.hide = function() { - scope.active = false; - animateFn(element, scope.active, animationIn, animationOut); + if (scope.active) { + scope.active = false; + adviseActiveChanged(); + animateFn(element, scope.active, animationIn, animationOut); + } return; }; scope.show = function() { - scope.active = true; - animateFn(element, scope.active, animationIn, animationOut); + if (!scope.active) { + scope.active = true; + adviseActiveChanged(); + animateFn(element, scope.active, animationIn, animationOut); + } return; }; scope.toggle = function() { scope.active = !scope.active; + adviseActiveChanged(); animateFn(element, scope.active, animationIn, animationOut); return; }; + function adviseActiveChanged() { + if (!angular.isUndefined(attrs.zfAdvise)) { + foundationApi.publish(attrs.id, scope.active ? 'activated' : 'deactivated'); + } + } } } } diff --git a/js/angular/components/offcanvas/offcanvas.js b/js/angular/components/offcanvas/offcanvas.js index 0e8acf2..47c2b61 100644 --- a/js/angular/components/offcanvas/offcanvas.js +++ b/js/angular/components/offcanvas/offcanvas.js @@ -88,18 +88,27 @@ scope.hide = function() { scope.active = false; + adviseActiveChanged(); return; }; scope.show = function() { scope.active = true; + adviseActiveChanged(); return; }; scope.toggle = function() { scope.active = !scope.active; + adviseActiveChanged(); return; }; + + function adviseActiveChanged() { + if (!angular.isUndefined(attrs.zfAdvise)) { + foundationApi.publish(attrs.id, scope.active ? 'activated' : 'deactivated'); + } + } } } } diff --git a/js/angular/components/panel/panel.js b/js/angular/components/panel/panel.js index d608dc1..37a5c24 100644 --- a/js/angular/components/panel/panel.js +++ b/js/angular/components/panel/panel.js @@ -51,6 +51,7 @@ function compile(tElement, tAttrs, transclude) { var type = 'panel'; var animate = tAttrs.hasOwnProperty('zfAdvise') ? foundationApi.animateAndAdvise : foundationApi.animate; + var forceAnimation = tAttrs.hasOwnProperty('forceAnimation'); return { pre: preLink, @@ -106,10 +107,12 @@ foundationApi.subscribe(attrs.id, function(msg) { var panelPosition = $window.getComputedStyle(element[0]).getPropertyValue("position"); - // patch to prevent panel animation on larger screen devices - // don't run animation on grid elements, only panel - if (panelPosition == 'static' || panelPosition == 'relative') { - return; + if (!forceAnimation) { + // patch to prevent panel animation on larger screen devices + // don't run animation on grid elements, only panel + if (panelPosition == 'static' || panelPosition == 'relative') { + return; + } } if(msg == 'show' || msg == 'open') { @@ -127,11 +130,10 @@ return; }); - // function finish(el) - scope.hide = function() { if(scope.active){ scope.active = false; + adviseActiveChanged(); animate(element, scope.active, animationIn, animationOut); } @@ -141,6 +143,7 @@ scope.show = function() { if(!scope.active){ scope.active = true; + adviseActiveChanged(); animate(element, scope.active, animationIn, animationOut); } @@ -149,8 +152,8 @@ scope.toggle = function() { scope.active = !scope.active; + adviseActiveChanged(); animate(element, scope.active, animationIn, animationOut); - return; }; @@ -161,9 +164,14 @@ if (!matchMedia(globalQueries.medium).matches && srcEl.href && srcEl.href.length > 0) { // Hide element if it can't match at least medium scope.hide(); - animate(element, scope.active, animationIn, animationOut); } }); + + function adviseActiveChanged() { + if (!angular.isUndefined(attrs.zfAdvise)) { + foundationApi.publish(attrs.id, scope.active ? 'activated' : 'deactivated'); + } + } } } } diff --git a/js/angular/components/popup/popup.js b/js/angular/components/popup/popup.js index 5181953..df20596 100644 --- a/js/angular/components/popup/popup.js +++ b/js/angular/components/popup/popup.js @@ -92,22 +92,30 @@ scope.hide = function() { - scope.active = false; - tetherElement(); - tether.disable(); + if (scope.active) { + scope.active = false; + adviseActiveChanged(); + tetherElement(); + tether.disable(); + } + return; }; scope.show = function(newTarget) { - scope.active = true; - tetherElement(newTarget); - tether.enable(); + if (!scope.active) { + scope.active = true; + adviseActiveChanged(); + tetherElement(newTarget); + tether.enable(); + } return; }; scope.toggle = function(newTarget) { scope.active = !scope.active; + adviseActiveChanged(); tetherElement(newTarget); if(scope.active) { @@ -137,6 +145,11 @@ tetherInit = true; } + function adviseActiveChanged() { + if (!angular.isUndefined(attrs.zfAdvise)) { + foundationApi.publish(attrs.id, scope.active ? 'activated' : 'deactivated'); + } + } } } } diff --git a/js/angular/services/base.core.js b/js/angular/services/base.core.js index 5baee72..e9a3e0e 100644 --- a/js/angular/services/base.core.js +++ b/js/angular/services/base.core.js @@ -51,8 +51,27 @@ } function unsubscribe(name, callback) { + var listenerIndex = -1, i, resizeListeners; + if (listeners[name] !== undefined) { - delete listeners[name]; + if (name == 'resize') { + resizeListeners = listeners['resize']; + for (i = 0; i < resizeListeners.length; i++) { + if (resizeListeners[i] === callback) { + // listener found + listenerIndex = i; + break; + } + } + + if (listenerIndex != -1) { + // remove listener + resizeListeners.splice(listenerIndex, 1); + } + } else { + // delete all listeners + delete listeners[name]; + } } if (typeof callback == 'function') { callback.call(this); @@ -128,11 +147,13 @@ } function animateAndAdvise(element, futureState, animationIn, animationOut) { + var msgPrefix = "animation-" + (futureState ? "open" : "close"); + publish(element[0].id, msgPrefix + "-started"); var promise = FoundationAnimation.animate(element, futureState, animationIn, animationOut); promise.then(function() { - publish(element[0].id, futureState ? 'active-true' : 'active-false'); + publish(element[0].id, msgPrefix + "-finished"); }, function() { - publish(element[0].id, 'active-aborted'); + publish(element[0].id, msgPrefix + "-aborted"); }); return promise; } diff --git a/js/angular/services/base.dynamicRouting.animations.js b/js/angular/services/base.dynamicRouting.animations.js index fb46969..781240e 100644 --- a/js/angular/services/base.dynamicRouting.animations.js +++ b/js/angular/services/base.dynamicRouting.animations.js @@ -106,22 +106,24 @@ function resetParent() { element.parent().removeClass('position-absolute'); - if(presetHeight !== true) { + if(element.parent()[0] && presetHeight !== true) { element.parent()[0].style.height = null; } } function prepareParent() { - var parentHeight = parseInt(element.parent()[0].style.height); - var elHeight = parseInt(window.getComputedStyle(element[0], null).getPropertyValue('height')); - var tempHeight = parentHeight > 0 ? parentHeight : elHeight > 0 ? elHeight : ''; + if (element.parent()[0]) { + var parentHeight = parseInt(element.parent()[0].style.height); + var elHeight = parseInt(window.getComputedStyle(element[0], null).getPropertyValue('height')); + var tempHeight = parentHeight > 0 ? parentHeight : elHeight > 0 ? elHeight : ''; - if(parentHeight > 0) { - presetHeight = true; - } + if(parentHeight > 0) { + presetHeight = true; + } - element.parent()[0].style.height = tempHeight + 'px'; - element.parent().addClass('position-absolute'); + element.parent()[0].style.height = tempHeight + 'px'; + element.parent().addClass('position-absolute'); + } } } } diff --git a/js/angular/services/base.mediaquery.js b/js/angular/services/base.mediaquery.js index f1b1ec7..b87b144 100644 --- a/js/angular/services/base.mediaquery.js +++ b/js/angular/services/base.mediaquery.js @@ -22,9 +22,9 @@ mqInit.init(); } - FoundationMQInit.$inject = ['mqHelpers', 'FoundationApi', 'Utils']; + FoundationMQInit.$inject = ['mqHelpers', 'FoundationApi', 'Utils', 'FoundationMQ']; - function FoundationMQInit(helpers, foundationApi, u){ + function FoundationMQInit(helpers, foundationApi, u, foundationMQ){ var factory = {}; var namedQueries = { 'default' : 'only screen', @@ -52,10 +52,6 @@ helpers.headerHelper(['foundation-mq']); extractedMedia = helpers.getStyle('.foundation-mq', 'font-family'); - if (!extractedMedia.match(/([\w]+=[\d]+[a-z]*&?)+/)) { - extractedMedia = 'small=0&medium=40rem&large=75rem&xlarge=90rem&xxlarge=120rem'; - } - mediaQueries = helpers.parseStyleToObject((extractedMedia)); mediaQuerySizes = []; @@ -91,6 +87,9 @@ }); window.addEventListener('resize', u.throttle(function() { + // any resize event causes a clearing of the media cache + foundationMQ.clearCache(); + foundationApi.publish('resize', 'window resized'); }, 50)); } @@ -171,20 +170,21 @@ mediaQueryResultCache = {}, queryMinWidthCache = {}; - foundationApi.subscribe('resize', function() { - // any new resize event causes a clearing of the media cache - mediaQueryResultCache = {}; - }); - service.getMediaQueries = getMediaQueries; service.match = match; service.matchesMedia = matchesMedia; service.matchesMediaOrSmaller = matchesMediaOrSmaller; service.matchesMediaOnly = matchesMediaOnly; service.collectScenariosFromElement = collectScenariosFromElement; + service.clearCache = clearCache; return service; + // METHOD INTENDED FOR INTERNAL USE ONLY + function clearCache() { + mediaQueryResultCache = {}; + } + function getMediaQueries() { return foundationApi.getSettings().mediaQueries; } diff --git a/scss/components/_button.scss b/scss/components/_button.scss index 147b4e6..d832f0c 100644 --- a/scss/components/_button.scss +++ b/scss/components/_button.scss @@ -93,6 +93,10 @@ $button-tag-selector: false !default; ){ @if $style == hollow { border: 1px solid $background; + padding-top: calc(#{get-side($button-padding, top)} - 1px); + padding-right: calc(#{get-side($button-padding, right)} - 1px); + padding-bottom: calc(#{get-side($button-padding, bottom)} - 1px); + padding-left: calc(#{get-side($button-padding, left)} - 1px); background: transparent; color: $background; diff --git a/scss/components/_grid.scss b/scss/components/_grid.scss index 80f986c..930ed49 100644 --- a/scss/components/_grid.scss +++ b/scss/components/_grid.scss @@ -1,4 +1,5 @@ @import "panel"; +@import "motion"; /* THE GRID @@ -193,6 +194,23 @@ $block-grid-max-size: 6 !default; } } +@mixin grid-panel-animating($isAnimating: true) { + $sel1: map-get($motion-class, in); + $sel1A: map-get($motion-class-active, in); + $sel2: map-get($motion-class, out); + $sel2A: map-get($motion-class-active, out); + + @if ($isAnimating == true) { + &.#{$sel1}.#{$sel1A}, &.#{$sel2}.#{$sel2A} { + @content; + } + } @else { + &:not(.#{$sel1}):not(.#{$sel1A}):not(.#{$sel2}):not(.#{$sel2A}) { + @content; + } + } +} + /* Resets styles set by panels. Use this when a panel transforms into a block on larger screens. @@ -338,8 +356,6 @@ $block-grid-max-size: 6 !default; // Grids inside content blocks should wrap by default, so they mimic traditional float grids .grid-block { - margin-left: -($block-padding); - margin-right: -($block-padding); flex-wrap: wrap; overflow: visible; @@ -352,6 +368,12 @@ $block-grid-max-size: 6 !default; overflow: visible; } } + + // Grids inside content blocks should undo padding + &:not(.collapse) > .grid-block { + margin-left: -($block-padding); + margin-right: -($block-padding); + } } .grid-container { @include grid-container; @@ -370,7 +392,24 @@ $block-grid-max-size: 6 !default; @include grid-block; // Override panel styles - &.panel { @include grid-panel-reset; } + &.panel { + &.is-active { + @include grid-panel-animating(true) { + position: absolute; + display: block; + } + @include grid-panel-animating(false) { + @include grid-panel-reset; + } + } + &:not(.is-active) { + display: none; + + @include grid-panel-animating(true) { + position: absolute; + } + } + } } } .#{$size}-grid-content { @@ -380,7 +419,24 @@ $block-grid-max-size: 6 !default; @include grid-content; // Override panel styles - &.panel { @include grid-panel-reset; } + &.panel { + &.is-active { + @include grid-panel-animating(true) { + position: absolute; + display: block; + } + @include grid-panel-animating(false) { + @include grid-panel-reset; + } + } + &:not(.is-active) { + display: none; + + @include grid-panel-animating(true) { + position: absolute; + } + } + } } } } diff --git a/scss/components/_iconic.scss b/scss/components/_iconic.scss index e290458..bdbcc89 100644 --- a/scss/components/_iconic.scss +++ b/scss/components/_iconic.scss @@ -2,7 +2,7 @@ // ------ // // A sample of 24 flexible, easily schemable icons from the folks at Iconic. -// +// // Features: // - 24 icons // - Built-in coloring and sizing classes @@ -85,11 +85,11 @@ $iconic-accent-stroke: $iconic-accent-fill !default; } @each $color in map-keys($foundation-colors) { - .iconic-color-#{$color} { + .iconic-color-#{$color}, .iconic.iconic-color-#{$color}, a.iconic-color-#{$color} > .iconic { @include color-icon(map-get($foundation-colors, $color)); } } - .iconic-color-secondary { + .iconic-color-secondary, a > .iconic.iconic-color-secondary { @include color-icon($secondary-color); } } From 91d71414e0f2d88cadb18c9a0192ec374e510a29 Mon Sep 17 00:00:00 2001 From: Brian Soumakian Date: Thu, 14 Jul 2016 05:36:27 -0700 Subject: [PATCH 02/11] Properly destroy popup tether component https://github.com/zurb/foundation-apps/pull/824 --- js/angular/components/popup/popup.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/js/angular/components/popup/popup.js b/js/angular/components/popup/popup.js index df20596..bd2898b 100644 --- a/js/angular/components/popup/popup.js +++ b/js/angular/components/popup/popup.js @@ -127,6 +127,17 @@ return; }; + scope.$on('$destroy', function() { + foundationApi.unsubscribe(attrs.id); + + scope.active = false; + if(tetherInit) { + tether.destroy(); + element.remove(); + tetherInit = false; + } + }); + function tetherElement(target) { if(tetherInit) { return; From 622b4bd3d833fb7af015a18f26f32151b1d7cb4f Mon Sep 17 00:00:00 2001 From: Brian Soumakian Date: Thu, 14 Jul 2016 05:38:02 -0700 Subject: [PATCH 03/11] Bold font weight should be determined from settings https://github.com/zurb/foundation-apps/pull/816 --- scss/components/_title-bar.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scss/components/_title-bar.scss b/scss/components/_title-bar.scss index ca64124..b602242 100644 --- a/scss/components/_title-bar.scss +++ b/scss/components/_title-bar.scss @@ -40,7 +40,7 @@ $titlebar-item-classes: ( // Denotes the title of the bar .#{$title} { - font-weight: bold; + font-weight: $font-weight-bold; } // Denotes left, right, and center sections of the bar From 94a890b37a9ab28fe5bdee69a6c7e1b1918d6de7 Mon Sep 17 00:00:00 2001 From: Brian Soumakian Date: Thu, 14 Jul 2016 05:39:49 -0700 Subject: [PATCH 04/11] Remove fixed 1rem spacings on grid CSS https://github.com/zurb/foundation-apps/pull/815 --- scss/components/_grid.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/scss/components/_grid.scss b/scss/components/_grid.scss index 930ed49..24801fe 100644 --- a/scss/components/_grid.scss +++ b/scss/components/_grid.scss @@ -175,8 +175,8 @@ $block-grid-max-size: 6 !default; */ @mixin grid-nest($nest: true) { @if ($nest) { - margin-left: -1rem; - margin-right: -1rem; + margin-left: -($block-padding); + margin-right: -($block-padding); } } /* @@ -292,7 +292,7 @@ $block-grid-max-size: 6 !default; list-style-type: none; > li, > div, > section { - padding: 0 1rem 1rem; + padding: 0 $block-padding $block-padding; flex: 0 0 percentage(1 / $up); max-width: percentage(1 / $up); } From b8664b56a6f3a5aea29010a91ea4d443a8df5df5 Mon Sep 17 00:00:00 2001 From: Brian Soumakian Date: Thu, 14 Jul 2016 05:41:14 -0700 Subject: [PATCH 05/11] Remove extra "entirely" https://github.com/zurb/foundation-apps/pull/811 --- docs/templates/action-sheet.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/templates/action-sheet.html b/docs/templates/action-sheet.html index 3cde5b3..3372a8c 100644 --- a/docs/templates/action-sheet.html +++ b/docs/templates/action-sheet.html @@ -82,7 +82,7 @@

Additional Options

External Triggers

-

To use an entirely different element entirely to control the action sheet, use the following markup. Make sure that the ID for the action sheet and the toggle match up. The zf-as-button element is optional here, since you're using another element to trigger the action sheet.

+

To use an entirely different element to control the action sheet, use the following markup. Make sure that the ID for the action sheet and the toggle match up. The zf-as-button element is optional here, since you're using another element to trigger the action sheet.

Toggle From 6f799549cb22d096c00f521ebf0c08a69f7e1b3d Mon Sep 17 00:00:00 2001 From: Brian Soumakian Date: Thu, 14 Jul 2016 05:42:06 -0700 Subject: [PATCH 06/11] Removed stray closing parentheses https://github.com/zurb/foundation-apps/pull/810 --- docs/templates/action-sheet.html | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/docs/templates/action-sheet.html b/docs/templates/action-sheet.html index 3372a8c..492b899 100644 --- a/docs/templates/action-sheet.html +++ b/docs/templates/action-sheet.html @@ -117,12 +117,10 @@

Sass Mixins

// This is the action sheet itself .custom-action-sheet { // These are the core styles for the sheet menu - - $padding: 1rem, - $color: #000, - $border-color, - $background-hover: #ccc - ); + $padding: 1rem, + $color: #000, + $border-color, + $background-hover: #ccc // This mixin sets up styles for the mobile action sheet @include action-sheet( From 01351626990d406fef94da2703d2333bf948bea7 Mon Sep 17 00:00:00 2001 From: Brian Soumakian Date: Thu, 14 Jul 2016 05:48:53 -0700 Subject: [PATCH 07/11] Apply disabled state with :disabled https://github.com/zurb/foundation-apps/pull/801 --- scss/components/_button.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scss/components/_button.scss b/scss/components/_button.scss index d832f0c..5fe4b1f 100644 --- a/scss/components/_button.scss +++ b/scss/components/_button.scss @@ -198,7 +198,7 @@ $button-tag-selector: false !default; } } - &.disabled { @include button-disabled; } + &.disabled, &:disabled { @include button-disabled; } } @if $button-tag-selector { From ac0a0537b1604af049f03859f98a8e60bbade6ce Mon Sep 17 00:00:00 2001 From: Brian Soumakian Date: Thu, 14 Jul 2016 05:49:37 -0700 Subject: [PATCH 08/11] Fix stagger durations https://github.com/zurb/foundation-apps/pull/785 --- scss/components/_motion.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/scss/components/_motion.scss b/scss/components/_motion.scss index ef8b501..23b107f 100644 --- a/scss/components/_motion.scss +++ b/scss/components/_motion.scss @@ -377,7 +377,7 @@ $motion-delay-long: 700ms !default; $delay: $motion-delay-default, $iterations: null ) { - + animation-name: $animation; animation-duration: $duration; animation-timing-function: $timing; @@ -498,8 +498,8 @@ $motion-delay-long: 700ms !default; &.long-delay { animation-delay: $motion-delay-long !important; } } .stagger { @include stagger($motion-stagger-duration-default); } - .stort-stagger { @include stagger($motion-stagger-duration-default); } - .long-stagger { @include stagger($motion-stagger-duration-default); } + .stort-stagger { @include stagger($motion-stagger-duration-short); } + .long-stagger { @include stagger($motion-stagger-duration-long); } } // View animation classes From 8a0b60fbd781191127e140f72050f9286ac2b449 Mon Sep 17 00:00:00 2001 From: Brian Soumakian Date: Thu, 14 Jul 2016 05:51:30 -0700 Subject: [PATCH 09/11] Applied fix for depciation warning https://github.com/zurb/foundation-apps/pull/768 --- scss/components/_modal.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scss/components/_modal.scss b/scss/components/_modal.scss index 2e2367a..72eb91e 100644 --- a/scss/components/_modal.scss +++ b/scss/components/_modal.scss @@ -67,7 +67,7 @@ $modal-overlay-background: rgba(#333, 0.7) !default; @if $border != 0 { border: $border; } - @if $radius != 0 { + @if $radius != 0px { border-radius: $radius; } @if $shadow != none { From 99d5b2a20fa00f52ba7ff35e5b51f22b899391c0 Mon Sep 17 00:00:00 2001 From: Brian Soumakian Date: Thu, 14 Jul 2016 05:55:27 -0700 Subject: [PATCH 10/11] Fix ModalFactory overlayClose=false option https://github.com/zurb/foundation-apps/pull/717 --- js/angular/components/modal/modal.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/js/angular/components/modal/modal.js b/js/angular/components/modal/modal.js index 569f196..1f72060 100644 --- a/js/angular/components/modal/modal.js +++ b/js/angular/components/modal/modal.js @@ -290,7 +290,7 @@ for(var i = 0; i < props.length; i++) { var prop = props[i]; - if(config[prop]) { + if(angular.isDefined(config[prop])) { switch (prop) { case 'animationIn': element.attr('animation-in', config[prop]); @@ -299,7 +299,7 @@ element.attr('animation-out', config[prop]); break; case 'overlayClose': - element.attr('overlay-close', config[prop] === 'false' ? 'false' : 'true'); // must be string, see postLink() above + element.attr('overlay-close', (config[prop] === 'false' || config[prop] === false) ? 'false' : 'true'); // must be string, see postLink() above break; case 'ignoreAllClose': element.attr('zf-ignore-all-close', 'zf-ignore-all-close'); From 413aae871b5fb3386c069c077748664246c0b051 Mon Sep 17 00:00:00 2001 From: Brian Soumakian Date: Thu, 14 Jul 2016 06:10:41 -0700 Subject: [PATCH 11/11] add back deleted code --- js/angular/services/base.mediaquery.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/js/angular/services/base.mediaquery.js b/js/angular/services/base.mediaquery.js index b87b144..bc65c4d 100644 --- a/js/angular/services/base.mediaquery.js +++ b/js/angular/services/base.mediaquery.js @@ -52,6 +52,10 @@ helpers.headerHelper(['foundation-mq']); extractedMedia = helpers.getStyle('.foundation-mq', 'font-family'); + if (!extractedMedia.match(/([\w]+=[\d]+[a-z]*&?)+/)) { + extractedMedia = 'small=0&medium=40rem&large=75rem&xlarge=90rem&xxlarge=120rem'; + } + mediaQueries = helpers.parseStyleToObject((extractedMedia)); mediaQuerySizes = [];