From: Colin Marshall Date: Tue, 26 Jan 2016 06:39:00 +0000 (-0700) Subject: Converted Magellan, Off-Canvas, Orbit, Reveal, and Responsive Toggle to template... X-Git-Tag: v6.2.0-rc.1~57^2~3 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=e92d0455a60bd1c81dec4b9e442163743ca43353;p=thirdparty%2Ffoundation%2Ffoundation-sites.git Converted Magellan, Off-Canvas, Orbit, Reveal, and Responsive Toggle to template literals --- diff --git a/js/foundation.magellan.js b/js/foundation.magellan.js index f6ba9d7b0..17aa1542b 100644 --- a/js/foundation.magellan.js +++ b/js/foundation.magellan.js @@ -204,7 +204,7 @@ */ Magellan.prototype.destroy = function(){ this.$element.off('.zf.trigger .zf.magellan') - .find('.' + this.options.activeClass).removeClass(this.options.activeClass); + .find(`.${this.options.activeClass}`).removeClass(this.options.activeClass); if(this.options.deepLinking){ var hash = this.$active[0].getAttribute('href'); diff --git a/js/foundation.offcanvas.js b/js/foundation.offcanvas.js index 9b9e1ea70..f53e3941e 100644 --- a/js/foundation.offcanvas.js +++ b/js/foundation.offcanvas.js @@ -304,7 +304,7 @@ OffCanvas.prototype.close = function(cb) { var _this = this; // Foundation.Move(this.options.transitionTime, this.$element, function(){ - $('[data-off-canvas-wrapper]').removeClass('is-off-canvas-open is-open-' + _this.options.position); + $('[data-off-canvas-wrapper]').removeClass(`is-off-canvas-open is-open-${_this.options.position}`); _this.$element.removeClass('is-open'); // Foundation._reflow(); // }); diff --git a/js/foundation.orbit.js b/js/foundation.orbit.js index 3fda7d956..1ca6ef604 100644 --- a/js/foundation.orbit.js +++ b/js/foundation.orbit.js @@ -149,8 +149,8 @@ * @private */ Orbit.prototype._init = function(){ - this.$wrapper = this.$element.find('.' + this.options.containerClass); - this.$slides = this.$element.find('.' + this.options.slideClass); + this.$wrapper = this.$element.find(`.${this.options.containerClass}`); + this.$slides = this.$element.find(`.${this.options.slideClass}`); var $images = this.$element.find('img'), initActive = this.$slides.filter('.is-active'); @@ -185,7 +185,7 @@ * @private */ Orbit.prototype._loadBullets = function(){ - this.$bullets = this.$element.find('.' + this.options.boxOfBullets).find('button'); + this.$bullets = this.$element.find(`.${this.options.boxOfBullets}`).find('button'); }; /** * Sets a `timer` object on the orbit, and starts the counter for the next slide. @@ -291,7 +291,7 @@ } if(this.options.navButtons){ - var $controls = this.$element.find('.' + this.options.nextClass + ', .' + this.options.prevClass); + var $controls = this.$element.find(`.${this.options.nextClass}, .${this.options.prevClass}`); $controls.attr('tabindex', 0) //also need to handle enter/return and spacebar key presses .on('click.zf.orbit touchend.zf.orbit', function(){ @@ -350,9 +350,9 @@ if(!chosenSlide){//most of the time, this will be auto played or clicked from the navButtons. $newSlide = isLTR ? //if wrapping enabled, check to see if there is a `next` or `prev` sibling, if not, select the first or last slide to fill in. if wrapping not enabled, attempt to select `next` or `prev`, if there's nothing there, the function will kick out on next step. CRAZY NESTED TERNARIES!!!!! - (this.options.infiniteWrap ? $curSlide.next('.' + this.options.slideClass).length ? $curSlide.next('.' + this.options.slideClass) : $firstSlide : $curSlide.next('.' + this.options.slideClass))//pick next slide if moving left to right + (this.options.infiniteWrap ? $curSlide.next(`.${this.options.slideClass}`).length ? $curSlide.next(`.${this.options.slideClass}`) : $firstSlide : $curSlide.next(`.${this.options.slideClass}`))//pick next slide if moving left to right : - (this.options.infiniteWrap ? $curSlide.prev('.' + this.options.slideClass).length ? $curSlide.prev('.' + this.options.slideClass) : $lastSlide : $curSlide.prev('.' + this.options.slideClass));//pick prev slide if moving right to left + (this.options.infiniteWrap ? $curSlide.prev(`.${this.options.slideClass}`).length ? $curSlide.prev(`.${this.options.slideClass}`) : $lastSlide : $curSlide.prev(`.${this.options.slideClass}`));//pick prev slide if moving right to left }else{ $newSlide = chosenSlide; } @@ -365,7 +365,7 @@ Foundation.Motion.animateIn( $newSlide.addClass('is-active').css({'position': 'absolute', 'top': 0}), - this.options['animInFrom' + dirIn], + this.options[`animInFrom${dirIn}`], function(){ $newSlide.css({'position': 'relative', 'display': 'block'}) .attr('aria-live', 'polite'); @@ -373,7 +373,7 @@ Foundation.Motion.animateOut( $curSlide.removeClass('is-active'), - this.options['animOutTo' + dirOut], + this.options[`animOutTo${dirOut}`], function(){ $curSlide.removeAttr('aria-live'); if(_this.options.autoPlay && !_this.timer.isPaused){ @@ -402,7 +402,7 @@ * @param {Number} idx - the index of the current slide. */ Orbit.prototype._updateBullets = function(idx){ - var $oldBullet = this.$element.find('.' + this.options.boxOfBullets) + var $oldBullet = this.$element.find(`.${this.options.boxOfBullets}`) .find('.is-active').removeClass('is-active').blur(), span = $oldBullet.find('span:last').detach(), $newBullet = this.$bullets.eq(idx).addClass('is-active').append(span); diff --git a/js/foundation.responsiveToggle.js b/js/foundation.responsiveToggle.js index 55083733a..38bac6b27 100644 --- a/js/foundation.responsiveToggle.js +++ b/js/foundation.responsiveToggle.js @@ -44,7 +44,7 @@ ResponsiveToggle.prototype._init = function() { console.error('Your tab bar needs an ID of a Menu as the value of data-tab-bar.'); } - this.$targetMenu = $('#'+targetID); + this.$targetMenu = $(`#${targetID}`); this.$toggler = this.$element.find('[data-toggle]'); this._update(); diff --git a/js/foundation.reveal.js b/js/foundation.reveal.js index 58bc374cd..ad04462fa 100644 --- a/js/foundation.reveal.js +++ b/js/foundation.reveal.js @@ -127,7 +127,7 @@ this.id = this.$element.attr('id'); this.isActive = false; - this.$anchor = $('[data-open="' + this.id + '"]').length ? $('[data-open="' + this.id + '"]') : $('[data-toggle="' + this.id + '"]'); + this.$anchor = $(`[data-open="${this.id}"]`).length ? $(`[data-open="${this.id}"]`) : $(`[data-toggle="${this.id}"]`); if(this.$anchor.length){ var anchorId = this.$anchor[0].id || Foundation.GetYoDigits(6, 'reveal'); @@ -158,7 +158,7 @@ }); this._events(); - if(this.options.deepLink && window.location.hash === ( '#' + this.id)){ + if(this.options.deepLink && window.location.hash === ( `#${this.id}`)){ $(window).one('load.zf.reveal', this.open.bind(this)); } }; @@ -213,7 +213,7 @@ this.$overlay.off('.zf.reveal').on('click.zf.reveal', this.close.bind(this)); } if(this.options.deepLink){ - $(window).on('popstate.zf.reveal:' + this.id, this._handleState.bind(this)); + $(window).on(`popstate.zf.reveal:${this.id}`, this._handleState.bind(this)); } }; /** @@ -221,7 +221,7 @@ * @private */ Reveal.prototype._handleState = function(e){ - if(window.location.hash === ( '#' + this.id) && !this.isActive){ this.open(); } + if(window.location.hash === ( `#${this.id}`) && !this.isActive){ this.open(); } else{ this.close(); } }; /** @@ -271,7 +271,7 @@ */ Reveal.prototype.open = function(){ if(this.options.deepLink){ - var hash = '#' + this.id; + var hash = `#${this.id}`; if(window.history.pushState){ window.history.pushState(null, null, hash); @@ -496,7 +496,7 @@ } this.$element.hide().off(); this.$anchor.off('.zf'); - $(window).off('.zf.reveal:' + this.id); + $(window).off(`.zf.reveal:${this.id}`); Foundation.unregisterPlugin(this); };