zurb-foundation 4.1.2 → 4.1.5

data/js/foundation/foundation.section.js

@@ -6,11 +6,17 @@
   Foundation.libs.section = {
     name: 'section',
 
-    version : '4.1.2',
+    version : '4.1.3',
 
     settings : {
       deep_linking: false,
       one_up: true,
+      section_selector : '[data-section]',
+      region_selector : 'section, .section, [data-section-region]',
+      title_selector : '.title, [data-section-title]',
+      active_region_selector : 'section.active, .section.active, .active[data-section-region]',
+      content_selector : '.content, [data-section-content]',
+      nav_selector : '[data-section="vertical-nav"], [data-section="horizontal-nav"]',
       callback: function (){}
     },
 
@@ -18,6 +24,10 @@
       var self = this;
       Foundation.inherit(this, 'throttle data_options position_right offset_right');
 
+      if (typeof method === 'object') {
+        $.extend(true, self.settings, method);
+      }
+
       if (typeof method != 'string') {
         this.set_active_from_hash();
         this.events();
@@ -34,9 +44,10 @@
       $(this.scope)
         .on('click.fndtn.section', '[data-section] .title, [data-section] [data-section-title]', function (e) {
           var $this = $(this),
-              section = $this.closest('[data-section]');
+              section = $this.closest(self.settings.section_selector);
 
           self.toggle_active.call(this, e, self);
+          self.reflow();
         });
 
       $(window)
@@ -52,9 +63,9 @@
 
       $(document)
         .on('click.fndtn.section', function (e) {
-          if ($(e.target).closest('.title, [data-section-title]').length < 1) {
-            $('[data-section="vertical-nav"], [data-section="horizontal-nav"]')
-              .find('section, .section, [data-section-region]')
+          if ($(e.target).closest(self.settings.title_selector).length < 1) {
+            $(self.settings.nav_selector)
+              .children(self.settings.region_selector)
               .removeClass('active')
               .attr('style', '');
           }
@@ -64,11 +75,13 @@
 
     toggle_active : function (e, self) {
       var $this = $(this),
-          section = $this.closest('section, .section, [data-section-region]'),
-          content = section.find('.content, [data-section-content]'),
-          parent = section.closest('[data-section]'),
           self = Foundation.libs.section,
-          settings = $.extend({}, self.settings, self.data_options(parent));
+          region = $this.closest(self.settings.region_selector),
+          content = $this.siblings(self.settings.content_selector),
+          parent = region.parent(),
+          settings = $.extend({}, self.settings, self.data_options(parent)),
+          prev_active_section = parent
+            .children(self.settings.active_region_selector);
 
       self.settings.toggled = true;
 
@@ -76,39 +89,60 @@
         e.preventDefault();
       }
 
-      if (section.hasClass('active')) {
+      if (region.hasClass('active')) {
+        // this is causing the style flash.
         if (self.small(parent)
-          || self.is_vertical(parent)
-          || self.is_horizontal(parent)
+          || self.is_vertical_nav(parent)
+          || self.is_horizontal_nav(parent)
           || self.is_accordion(parent)) {
-          section
-            .removeClass('active')
-            .attr('style', '');
+            if (prev_active_section[0] !== region[0] 
+              || (prev_active_section[0] === region[0] && !settings.one_up)) {
+              region
+                .removeClass('active')
+                .attr('style', '');
+            }
         }
       } else {
-        var prev_active_section = null,
-            title_height = self.outerHeight(section.find('.title, [data-section-title]'));
+        var prev_active_section = parent
+              .children(self.settings.active_region_selector),
+            title_height = self.outerHeight(region
+              .children(self.settings.title_selector));
 
         if (self.small(parent) || settings.one_up) {
-          prev_active_section = $this.closest('[data-section]').find('section.active, .section.active, .active[data-section-region]');
 
           if (self.small(parent)) {
             prev_active_section.attr('style', '');
           } else {
-            prev_active_section.attr('style', 'visibility: hidden; padding-top: '+title_height+'px;');
+            prev_active_section.attr('style', 
+              'visibility: hidden; padding-top: '+title_height+'px;');
           }
         }
 
         if (self.small(parent)) {
-          section.attr('style', '');
+          region.attr('style', '');
         } else {
-          section.css('padding-top', title_height);
+          region.css('padding-top', title_height);
+        }
+
+        region.addClass('active');
+
+        if (prev_active_section.length > 0) {
+          prev_active_section
+            .removeClass('active')
+            .attr('style', '');
         }
 
-        section.addClass('active');
+        // Toggle the content display attribute. This is done to
+        // ensure accurate outerWidth measurements that account for
+        // the scrollbar.
+        if (self.is_vertical_tabs(parent)) {
+          content.css('display', 'block');
 
-        if (prev_active_section !== null) {
-          prev_active_section.removeClass('active').attr('style', '');
+          if (prev_active_section !== null) {
+            prev_active_section
+              .children(self.settings.content_selector)
+              .css('display', 'none');
+          }
         }
       }
 
@@ -120,12 +154,13 @@
     },
 
     resize : function () {
-      var sections = $('[data-section]'),
-          self = Foundation.libs.section;
+      var self = Foundation.libs.section,
+          sections = $(self.settings.section_selector);
 
       sections.each(function() {
         var $this = $(this),
-            active_section = $this.find('section.active, .section.active, .active[data-section-region]'),
+            active_section = $this
+              .children(self.settings.active_region_selector),
             settings = $.extend({}, self.settings, self.data_options($this));
 
         if (active_section.length > 1) {
@@ -134,32 +169,35 @@
             .removeClass('active')
             .attr('style', '');
         } else if (active_section.length < 1
-          && !self.is_vertical($this)
-          && !self.is_horizontal($this)
+          && !self.is_vertical_nav($this)
+          && !self.is_horizontal_nav($this)
           && !self.is_accordion($this)) {
 
-          var first = $this.find('section, .section, [data-section-region]').first();
+          var first = $this.children(self.settings.region_selector).first();
 
-          if (settings.one_up) {
+          if (settings.one_up || !self.small($this)) {
             first.addClass('active');
           }
 
           if (self.small($this)) {
             first.attr('style', '');
           } else {
-            first.css('padding-top', self.outerHeight(first.find('.title, [data-section-title]')));
+            first.css('padding-top', self.outerHeight(first
+              .children(self.settings.title_selector)));
           }
         }
 
         if (self.small($this)) {
           active_section.attr('style', '');
         } else {
-          active_section.css('padding-top', self.outerHeight(active_section.find('.title, [data-section-title]')));
+          active_section.css('padding-top', self.outerHeight(active_section
+            .children(self.settings.title_selector)));
         }
 
         self.position_titles($this);
 
-        if (self.is_horizontal($this) && !self.small($this)) {
+        if ( (self.is_horizontal_nav($this) && !self.small($this))
+          || self.is_vertical_tabs($this)) {
           self.position_content($this);
         } else {
           self.position_content($this, false);
@@ -167,11 +205,11 @@
       });
     },
 
-    is_vertical : function (el) {
+    is_vertical_nav : function (el) {
       return /vertical-nav/i.test(el.data('section'));
     },
 
-    is_horizontal : function (el) {
+    is_horizontal_nav : function (el) {
       return /horizontal-nav/i.test(el.data('section'));
     },
 
@@ -179,8 +217,12 @@
       return /accordion/i.test(el.data('section'));
     },
 
-    is_tabs : function (el) {
-      return /tabs/i.test(el.data('section'));
+    is_horizontal_tabs : function (el) {
+      return /^tabs$/i.test(el.data('section'));
+    },
+
+    is_vertical_tabs : function (el) {
+      return /vertical-tabs/i.test(el.data('section'));
     },
 
     set_active_from_hash : function () {
@@ -193,21 +235,29 @@
             settings = $.extend({}, self.settings, self.data_options(section));
 
         if (hash.length > 0 && settings.deep_linking) {
-          section
-            .find('section, .section, [data-section-region]')
+          var regions = section
+            .children(self.settings.region_selector)
             .attr('style', '')
             .removeClass('active');
-          section
-            .find('.content[data-slug="' + hash + '"], [data-section-content][data-slug="' + hash + '"]')
-            .closest('section, .section, [data-section-region]')
+          regions
+            .map(function () {
+              return $(this).children('.content[data-slug="' + hash + '"], [data-section-content][data-slug="' + hash + '"]');
+            })
+            .parent()
             .addClass('active');
         }
       });
     },
 
     position_titles : function (section, off) {
-      var titles = section.find('.title, [data-section-title]'),
+      var self = this,
+          titles = section
+            .children(this.settings.region_selector)
+            .map(function () {
+              return $(this).children(self.settings.title_selector);
+            }),
           previous_width = 0,
+          previous_height = 0,
           self = this;
 
       if (typeof off === 'boolean') {
@@ -215,59 +265,125 @@
 
       } else {
         titles.each(function () {
-          if (!self.rtl) {
-            $(this).css('left', previous_width);
+          if (self.is_vertical_tabs(section)) {
+            $(this).css('top', previous_height);
+            previous_height += self.outerHeight($(this));
           } else {
-            $(this).css('right', previous_width);
+            if (!self.rtl) {
+              $(this).css('left', previous_width);
+            } else {
+              $(this).css('right', previous_width);
+            }
+            previous_width += self.outerWidth($(this));
           }
-          previous_width += self.outerWidth($(this));
         });
       }
     },
 
     position_content : function (section, off) {
-      var titles = section.find('.title, [data-section-title]'),
-          content = section.find('.content, [data-section-content]'),
-          self = this;
+      var self = this,
+          regions = section.children(self.settings.region_selector),
+          titles = regions
+            .map(function () {
+              return $(this).children(self.settings.title_selector);
+            }),
+          content = regions
+            .map(function () {
+              return $(this).children(self.settings.content_selector);
+            });
 
       if (typeof off === 'boolean') {
         content.attr('style', '');
         section.attr('style', '');
       } else {
-        section.find('section, .section, [data-section-region]').each(function () {
-          var title = $(this).find('.title, [data-section-title]'),
-              content = $(this).find('.content, [data-section-content]');
-          if (!self.rtl) {
-            content.css({left: title.position().left - 1, top: self.outerHeight(title) - 2});
+        if (self.is_vertical_tabs(section)
+            && !self.small(section)) {
+          var content_min_height = 0,
+              content_min_width = Number.MAX_VALUE,
+              title_width = null;
+
+          regions.each(function () {
+            var region = $(this),
+                title = region.children(self.settings.title_selector),
+                content = region.children(self.settings.content_selector),
+                content_width = 0;
+
+            title_width = self.outerWidth(title);
+            content_width = self.outerWidth(section) - title_width;
+            if (content_width < content_min_width) {
+              content_min_width = content_width;
+            }
+
+            // Increment the minimum height of the content region
+            // to align with the height of the titles.
+            content_min_height += self.outerHeight(title);
+
+            // Set all of the inactive tabs to 'display: none'
+            // The CSS sets all of the tabs as 'display: block'
+            // in order to account for scrollbars when measuring the width
+            // of the content regions.
+            if (!$(this).hasClass('active')) {
+              content.css('display', 'none');
+            }
+          });
+
+          regions.each(function () {
+            var content = $(this).children(self.settings.content_selector);
+            content.css('minHeight', content_min_height);
+
+            // Remove 2 pixels to account for the right-shift in the CSS
+            content.css('maxWidth', content_min_width - 2);
+          });
+
+          // Adjust the outer section container width to match
+          // the width of the title and content
+          section.css('maxWidth', title_width + content_min_width);
+        } else {
+          regions.each(function () {
+            var region = $(this),
+                title = region.children(self.settings.title_selector),
+                content = region.children(self.settings.content_selector);
+            if (!self.rtl) {
+              content
+                .css({left: title.position().left - 1, 
+                  top: self.outerHeight(title) - 2});
+            } else {
+              content
+                .css({right: self.position_right(title) + 1, 
+                  top: self.outerHeight(title) - 2});
+            }
+          });
+
+          // temporary work around for Zepto outerheight calculation issues.
+          if (typeof Zepto === 'function') {
+            section.height(this.outerHeight(titles.first()));
           } else {
-            content.css({right: self.position_right(title) + 1, top: self.outerHeight(title) - 2});
+            section.height(this.outerHeight(titles.first()) - 2);
           }
-        });
-
-        // temporary work around for Zepto outerheight calculation issues.
-        if (typeof Zepto === 'function') {
-          section.height(this.outerHeight(titles.first()));
-        } else {
-          section.height(this.outerHeight(titles.first()) - 2);
         }
       }
-
     },
 
     position_right : function (el) {
-      var section = el.closest('[data-section]'),
-          section_width = el.closest('[data-section]').width(),
-          offset = section.find('.title, [data-section-title]').length;
+      var self = this,
+          section = el.closest(this.settings.section_selector),
+          regions = section.children(this.settings.region_selector),
+          section_width = el.closest(this.settings.section_selector).width(),
+          offset = regions
+            .map(function () {
+              return $(this).children(self.settings.title_selector);
+            }).length;
       return (section_width - el.position().left - el.width() * (el.index() + 1) - offset);
     },
 
-    reflow : function () {
-      $('[data-section]').trigger('resize');
+    reflow : function (scope) {
+      var scope = scope || document;
+      $(this.settings.section_selector, scope).trigger('resize');
     },
 
     small : function (el) {
       var settings = $.extend({}, this.settings, this.data_options(el));
-      if (this.is_tabs(el)) {
+      if (this.is_horizontal_tabs(el)) {
         return false;
       }
       if (el && this.is_accordion(el)) {
@@ -288,4 +404,4 @@
       $(document).off('.fndtn.section')
     }
   };
-}(Foundation.zj, this, this.document));
+}(Foundation.zj, this, this.document));

data/js/foundation/foundation.tooltips.js

@@ -6,12 +6,13 @@
   Foundation.libs.tooltips = {
     name: 'tooltips',
 
-    version : '4.1.0',
+    version : '4.1.3',
 
     settings : {
       selector : '.has-tip',
       additionalInheritableClasses : [],
       tooltipClass : '.tooltip',
+      appendTo: 'body',
       tipTemplate : function (selector, content) {
         return '<span data-selector="' + selector + '" class="' 
           + Foundation.libs.tooltips.settings.tooltipClass.substring(1) 
@@ -98,10 +99,10 @@
     },
 
     create : function ($target) {
-      var $tip = $(this.settings.tipTemplate(this.selector($target), $('<div>').html($target.attr('title')).html())),
+      var $tip = $(this.settings.tipTemplate(this.selector($target), $('<div></div>').html($target.attr('title')).html())),
           classes = this.inheritable_classes($target);
 
-      $tip.addClass(classes).appendTo('body');
+      $tip.addClass(classes).appendTo(this.settings.appendTo);
       if (Modernizr.touch) {
         $tip.append('<span class="tap-to-close">tap to close </span>');
       }