Template literals for Sticky, Tabs, Toggler, Tooltip & Utils

diff --git a/js/foundation.sticky.js b/js/foundation.sticky.js
index ebd29b0cb61028bc59f4e116f47179658d09c406..e5f4d4c32362fcedae1b31c45680cc1749319291 100644 (file)
--- a/js/foundation.sticky.js
+++ b/js/foundation.sticky.js
@@ -114,7 +114,7 @@
     this.isStuck = false;
 
     if(this.options.anchor !== ''){
-      this.$anchor = $('#' + this.options.anchor);
+      this.$anchor = $(`#${this.options.anchor}`);
     }else{
       this._parsePoints();
     }
@@ -142,7 +142,7 @@
           pt = pts[i];
         }else{
           var place = pts[i].split(':'),
-              anchor = $('#' + place[0]);
+              anchor = $(`#${place[0]}`);
 
           pt = anchor.offset().top;
           if(place[1] && place[1].toLowerCase() === 'bottom'){
@@ -166,7 +166,7 @@
    */
   Sticky.prototype._events = function(id){
     var _this = this,
-        scrollListener = this.scrollListener = 'scroll.zf.' + id;
+        scrollListener = this.scrollListener = `scroll.zf.${id}`;
     if(this.isOn){ return; }
     if(this.canStick){
       this.isOn = true;
@@ -263,20 +263,20 @@
         notStuckTo = stickTo === 'top' ? 'bottom' : 'top',
         css = {};
 
-    css[mrgn] = this.options[mrgn] + 'em';
+    css[mrgn] = `${this.options[mrgn]}em`;
     css[stickTo] = 0;
     css[notStuckTo] = 'auto';
     css['left'] = this.$container.offset().left + parseInt(window.getComputedStyle(this.$container[0])["padding-left"], 10);
     this.isStuck = true;
-    this.$element.removeClass('is-anchored is-at-' + notStuckTo)
-                 .addClass('is-stuck is-at-' + stickTo)
+    this.$element.removeClass(`is-anchored is-at-${notStuckTo}`)
+                 .addClass(`is-stuck is-at-${stickTo}`)
                  .css(css)
                  /**
                   * Fires when the $element has become `position: fixed;`
                   * Namespaced to `top` or `bottom`.
                   * @event Sticky#stuckto
                   */
-                 .trigger('sticky.zf.stuckto:' + stickTo);
+                 .trigger(`sticky.zf.stuckto:${stickTo}`);
   };
 
   /**
@@ -308,15 +308,15 @@
 
     css['left'] = '';
     this.isStuck = false;
-    this.$element.removeClass('is-stuck is-at-' + stickTo)
-                 .addClass('is-anchored is-at-' + topOrBottom)
+    this.$element.removeClass(`is-stuck is-at-${stickTo}`)
+                 .addClass(`is-anchored is-at-${topOrBottom}`)
                  .css(css)
                  /**
                   * Fires when the $element has become anchored.
                   * Namespaced to `top` or `bottom`.
                   * @event Sticky#unstuckfrom
                   */
-                 .trigger('sticky.zf.unstuckfrom:' + topOrBottom);
+                 .trigger(`sticky.zf.unstuckfrom:${topOrBottom}`);
   };
 
   /**
@@ -340,7 +340,7 @@
     }
 
     this.$element.css({
-      'max-width': newElemWidth - pdng + 'px'
+      'max-width': `${newElemWidth - pdng}px`
     });
 
     var newContainerHeight = this.$element[0].getBoundingClientRect().height || this.containerHeight;
@@ -403,7 +403,7 @@
   Sticky.prototype.destroy = function(){
     this._removeSticky(true);
 
-    this.$element.removeClass(this.options.stickyClass + ' is-anchored is-at-top')
+    this.$element.removeClass(`${this.options.stickyClass} is-anchored is-at-top`)
                  .css({
                    height: '',
                    top: '',

diff --git a/js/foundation.tabs.js b/js/foundation.tabs.js
index 3a1a06fcf80c18b2b2a0d34e01de815a40fb8e24..90b6ed3e7e50ff65a8512b9945d8a1d9b3fb1ea4 100644 (file)
--- a/js/foundation.tabs.js
+++ b/js/foundation.tabs.js
@@ -81,16 +81,16 @@
   Tabs.prototype._init = function(){
     var _this = this;
 
-    this.$tabTitles = this.$element.find('.' + this.options.linkClass);
-    this.$tabContent = $('[data-tabs-content="' + this.$element[0].id + '"]');
+    this.$tabTitles = this.$element.find(`.${this.options.linkClass}`);
+    this.$tabContent = $(`[data-tabs-content="${this.$element[0].id}"]`);
 
     this.$tabTitles.each(function(){
       var $elem = $(this),
           $link = $elem.find('a'),
           isActive = $elem.hasClass('is-active'),
           hash = $link[0].hash.slice(1),
-          linkId = $link[0].id ? $link[0].id : hash + '-label',
-          $tabContent = $('#' + hash);
+          linkId = $link[0].id ? $link[0].id : `hash${-label}`,
+          $tabContent = $(`#${hash}`);
 
       $elem.attr({'role': 'presentation'});
 
@@ -140,7 +140,7 @@
   Tabs.prototype._addClickHandler = function(){
     var _this = this;
     this.$element.off('click.zf.tabs')
-                   .on('click.zf.tabs', '.' + this.options.linkClass, function(e){
+                   .on('click.zf.tabs', `.${this.options.linkClass}`, function(e){
                      e.preventDefault();
                      e.stopPropagation();
                      if($(this).hasClass('is-active')){
@@ -211,11 +211,11 @@
     var $tabLink = $target.find('[role="tab"]'),
         hash = $tabLink[0].hash,
         $targetContent = $(hash),
-        $oldTab = this.$element.find('.' + this.options.linkClass + '.is-active')
+        $oldTab = this.$element.find(`.${this.options.linkClass}.is-active`)
                   .removeClass('is-active').find('[role="tab"]')
                   .attr({'aria-selected': 'false'}).attr('aria-controls');
 
-    $('#'+$oldTab).removeClass('is-active').attr({'aria-hidden': 'true'});
+    $(`#${$oldTab}`).removeClass('is-active').attr({'aria-hidden': 'true'});
 
     $target.addClass('is-active');
 
@@ -247,9 +247,9 @@
     }
 
     if(idStr.indexOf('#') < 0){
-      idStr = '#' + idStr;
+      idStr = `#${idStr}`;
     }
-    var $target = this.$tabTitles.find('[href="' + idStr + '"]').parent('.' + this.options.linkClass);
+    var $target = this.$tabTitles.find(`[href="${idStr}"]`).parent(`.${this.options.linkClass}`);
 
     this._handleTabChange($target);
   };
@@ -262,7 +262,7 @@
    */
   Tabs.prototype._setHeight = function(){
     var max = 0;
-    this.$tabContent.find('.' + this.options.panelClass)
+    this.$tabContent.find(`.${this.options.panelClass}`)
                     .css('height', '')
                     .each(function(){
                       var panel = $(this),
@@ -279,7 +279,7 @@
 
                       max = temp > max ? temp : max;
                     })
-                    .css('height', max + 'px');
+                    .css('height', `${max}px`);
   };
 
   /**
@@ -287,9 +287,9 @@
    * @fires Tabs#destroyed
    */
   Tabs.prototype.destroy = function() {
-    this.$element.find('.' + this.options.linkClass)
+    this.$element.find(`.${this.options.linkClass}`)
                  .off('.zf.tabs').hide().end()
-                 .find('.' + this.options.panelClass)
+                 .find(`.${this.options.panelClass}`)
                  .hide();
     if(this.options.matchHeight){
       $(window).off('changed.zf.mediaquery');

diff --git a/js/foundation.toggler.js b/js/foundation.toggler.js
index c6889aea9578bef50d32dc698580944c905a20e3..ffc34763ecf8b0e3a0d02d9849a2412f5fc94d75 100644 (file)
--- a/js/foundation.toggler.js
+++ b/js/foundation.toggler.js
@@ -57,7 +57,7 @@
 
     // Add ARIA attributes to triggers
     var id = this.$element[0].id;
-    $('[data-open="'+id+'"], [data-close="'+id+'"], [data-toggle="'+id+'"]')
+    $(`[data-open="${id}"], [data-close="${id}"], [data-toggle="${id}"]`)
       .attr('aria-controls', id);
     // If the target is hidden, add aria-hidden
     this.$element.attr('aria-expanded', this.$element.is(':hidden') ? false : true);

diff --git a/js/foundation.tooltip.js b/js/foundation.tooltip.js
index 7401709c8645dc689f7be80458a7e35f739951b7..19edaa665ad8155f0d2c3686210916c488d75121 100644 (file)
--- a/js/foundation.tooltip.js
+++ b/js/foundation.tooltip.js
@@ -161,7 +161,7 @@
    * @private
    */
   Tooltip.prototype._buildTemplate = function(id){
-    var templateClasses = (this.options.tooltipClass + ' ' + this.options.positionClass + ' ' + this.options.templateClasses).trim();
+    var templateClasses = (`${this.options.tooltipClass} ${this.options.positionClass} ${this.options.templateClasses}`).trim();
     var $template =  $('<div></div>').addClass(templateClasses).attr({
       'role': 'tooltip',
       'aria-hidden': true,

diff --git a/js/foundation.util.keyboard.js b/js/foundation.util.keyboard.js
index 849034ab04e2eea8f8f073cb5bbe100618ee6fec..63507ee8b7460e67b2f31c0665086fed9f3a32f6 100644 (file)
--- a/js/foundation.util.keyboard.js
+++ b/js/foundation.util.keyboard.js
@@ -40,9 +40,9 @@
    */
   var parseKey = function(event) {
     var key = keyCodes[event.which || event.keyCode] || String.fromCharCode(event.which).toUpperCase();
-    if (event.shiftKey) key = 'SHIFT_' + key;
-    if (event.ctrlKey) key = 'CTRL_' + key;
-    if (event.altKey) key = 'ALT_' + key;
+    if (event.shiftKey) key = `SHIFT_${key}`;
+    if (event.ctrlKey) key = `CTRL_${key}`;
+    if (event.altKey) key = `ALT_${key}`;
     return key;
   };
   Foundation.Keyboard.parseKey = parseKey;

diff --git a/js/foundation.util.mediaQuery.js b/js/foundation.util.mediaQuery.js
index 1fe797a53988b3f8be7ac75929488a5d60e4763c..d4cb4a5f7141f9534d55855348f9d6cdee4b431c 100644 (file)
--- a/js/foundation.util.mediaQuery.js
+++ b/js/foundation.util.mediaQuery.js
@@ -63,7 +63,7 @@ var MediaQuery = {
     for (var key in namedQueries) {
       self.queries.push({
         name: key,
-        value: 'only screen and (min-width: ' + namedQueries[key] + ')'
+        value: `only screen and (min-width: ${namedQueries[key]})`
       });
     }
 
@@ -147,7 +147,7 @@ window.matchMedia || (window.matchMedia = function() {
 
     styleMedia = {
       matchMedium: function(media) {
-        var text = '@media ' + media + '{ #matchmediajs-test { width: 1px; } }';
+        var text = `@media ${media}{ #matchmediajs-test { width: 1px; } }`;
 
         // 'style.styleSheet' is used by IE <= 8 and 'style.textContent' for all other browsers
         if (style.styleSheet) {

diff --git a/js/foundation.util.motion.js b/js/foundation.util.motion.js
index adeb39c178cc91f820dc8a9b5c87e7bce3a5028f..f612b10fbb41e2d9374ea9de1a674417cf9c89f7 100644 (file)
--- a/js/foundation.util.motion.js
+++ b/js/foundation.util.motion.js
@@ -50,7 +50,7 @@ function animate(isIn, element, animation, cb) {
   // Resets transitions and removes motion-specific classes
   function reset() {
     element[0].style.transitionDuration = 0;
-    element.removeClass(initClass + ' ' + activeClass + ' ' + animation);
+    element.removeClass(`${initClass} ${activeClass} ${animation}`);
   }
 }
 

diff --git a/js/foundation.util.nest.js b/js/foundation.util.nest.js
index d6b53c5260ea12116fb20cb0632c66176ef4b92d..3b1679e3481ddcb827c184cd52672ba85aab3230 100644 (file)
--- a/js/foundation.util.nest.js
+++ b/js/foundation.util.nest.js
@@ -5,9 +5,9 @@
       menu.attr('role', 'menubar');
       type = type || 'zf';
       var items = menu.find('li').attr({'role': 'menuitem'}),
-          subMenuClass = 'is-' + type + '-submenu',
-          subItemClass = subMenuClass + '-item',
-          hasSubClass = 'is-' + type + '-submenu-parent';
+          subMenuClass = `is-${type}-submenu`,
+          subItemClass = `${subMenuClass}-item`,
+          hasSubClass = `is-${type}-submenu-parent`;
       menu.find('a:first').attr('tabindex', 0);
       items.each(function(){
         var $item = $(this),
@@ -19,7 +19,7 @@
                  'aria-expanded': false,
                  'aria-label': $item.children('a:first').text()
                });
-          $sub.addClass('submenu ' + subMenuClass)
+          $sub.addClass(`submenu ${subMenuClass}`)
               .attr({
                 'data-submenu': '',
                 'aria-hidden': true,
@@ -27,21 +27,21 @@
               });
         }
         if($item.parent('[data-submenu]').length){
-          $item.addClass('is-submenu-item ' + subItemClass);
+          $item.addClass(`is-submenu-item ${subItemClass}`);
         }
       });
       return;
     },
     Burn: function(menu, type){
       var items = menu.find('li').removeAttr('tabindex'),
-          subMenuClass = 'is-' + type + '-submenu',
-          subItemClass = subMenuClass + '-item',
-          hasSubClass = 'is-' + type + '-submenu-parent';
+          subMenuClass = `is-${type}-submenu`,
+          subItemClass = `${subMenuClass}-item`,
+          hasSubClass = `is-${type}-submenu-parent`;
 
       // menu.find('.is-active').removeClass('is-active');
       menu.find('*')
       // menu.find('.' + subMenuClass + ', .' + subItemClass + ', .is-active, .has-submenu, .is-submenu-item, .submenu, [data-submenu]')
-          .removeClass(subMenuClass + ' ' + subItemClass + ' ' + hasSubClass + ' is-submenu-item submenu is-active')
+          .removeClass(`${subMenuClass} ${subItemClass} ${hasSubClass} is-submenu-item submenu is-active`)
           .removeAttr('data-submenu').css('display', '');
 
       // console.log(      menu.find('.' + subMenuClass + ', .' + subItemClass + ', .has-submenu, .is-submenu-item, .submenu, [data-submenu]')

diff --git a/js/foundation.util.timerAndImageLoader.js b/js/foundation.util.timerAndImageLoader.js
index 9ebf3f78b48e983aa915562ca480b3a6f3a1b250..4440405089f8c2d5be4bb3e04503e46170b42aca 100644 (file)
--- a/js/foundation.util.timerAndImageLoader.js
+++ b/js/foundation.util.timerAndImageLoader.js
@@ -29,7 +29,7 @@
         }
         cb();
       }, remain);
-      elem.trigger('timerstart.zf.' + nameSpace);
+      elem.trigger(`timerstart.zf.${nameSpace}`);
     };
 
     this.pause = function(){
@@ -39,7 +39,7 @@
       elem.data('paused', true);
       var end = Date.now();
       remain = remain - (end - start);
-      elem.trigger('timerpaused.zf.' + nameSpace);
+      elem.trigger(`timerpaused.zf.${nameSpace}`);
     };
   };
   /**

diff --git a/js/foundation.util.touch.js b/js/foundation.util.touch.js
index 9a7c9e3c62357932a266e79e9e23314a1b431755..5a5a2a69ff6ac1b8eef58377706876c0d86b2255 100644 (file)
--- a/js/foundation.util.touch.js
+++ b/js/foundation.util.touch.js
@@ -43,7 +43,7 @@
       if(dir) {
         e.preventDefault();
         onTouchEnd.call(this);
-        $(this).trigger('swipe', dir).trigger('swipe' + dir);
+        $(this).trigger('swipe', dir).trigger(`swipe${dir}`);
       }
     }
   }
@@ -70,7 +70,7 @@
   $.event.special.swipe = { setup: init };
 
   $.each(['left', 'up', 'down', 'right'], function () {
-    $.event.special['swipe' + this] = { setup: function(){
+    $.event.special[`swipe${this}`] = { setup: function(){
       $(this).on('swipe', $.noop);
     } };
   });

diff --git a/js/foundation.util.triggers.js b/js/foundation.util.triggers.js
index 46cb971dc3f868f03374bd23b39c81bb5a1994b4..75a0171c489a18fd91838e762325cb9fc554e2f8 100644 (file)
--- a/js/foundation.util.triggers.js
+++ b/js/foundation.util.triggers.js
@@ -41,8 +41,8 @@
   var MutationObserver = (function () {
     var prefixes = ['WebKit', 'Moz', 'O', 'Ms', ''];
     for (var i=0; i < prefixes.length; i++) {
-      if (prefixes[i] + 'MutationObserver' in window) {
-        return window[prefixes[i] + 'MutationObserver'];
+      if (`${prefixes[i]}MutationObserver` in window) {
+        return window[`${prefixes[i]}MutationObserver`];
       }
     }
     return false;
@@ -85,7 +85,7 @@
 
       $(window).off(listeners).on(listeners, function(e, pluginId){
         var plugin = e.namespace.split('.')[0];
-        var plugins = $('[data-' + plugin + ']').not('[data-yeti-box="' + pluginId + '"]');
+        var plugins = $(`[data-${plugin}]`).not(`[data-yeti-box="${pluginId}"]`);
 
         plugins.each(function(){
           var _this = $(this);