zurb-foundation 4.1.1 → 4.1.2

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    zurb-foundation (4.1.1)
+    zurb-foundation (4.1.2)
       sass (>= 3.2.0)
 
 GEM

data/docs/CHANGELOG.md

@@ -1,3 +1,27 @@
+### 4.1.2- April 10, 2013
+
+* Added Joyride expose functionality
+* General bug fixes for regressions that came up with RTL release
+* Section is now fully semantic
+* Clicking on current thumbnail in Clearing now advances to next slide
+* data-options support added to Clearing
+* Addressed Foundation loader incompatiblities with non-jQuery and non-Zepto JS libraries
+* Fixed Rails generator bug when using CoffeeScript files
+* Added `reflow` to Section js plugin to support dynamic content
+
+
+You can compare the commits [here](https://github.com/zurb/foundation/compare/v4.1.1...v4.1.2).
+
+### 4.1.1- April 2, 2013
+* Changed all references to the variable `$default-opposite` to `$opposite-direction`
+* Added `dir` attribute to `html` tag
+* Added direction variables to `foundation.dropdown.js`, `foundation.clearing.js`, `foundation.joyride.js`, `foundation.orbit.js`, `foundation.section.js`, `foundation.topbar.js` and `foundation.tooltips.js`.
+* Updated customizer with text direction setting
+* Added right-to-left text direction documentation
+
+You can compare the commits [here](https://github.com/zurb/foundation/compare/v4.0.9...v4.1.1).
+
+
 ### 4.0.9- March 19, 2013
 * Added `auto` option to `Foundation.section.js.
 * Fixes dropdown positioning for split buttons.

data/docs/components/clearing.html.erb

@@ -132,7 +132,7 @@ $clearing-carousel-thumb-active-border: 4px solid rgb(255,255,255);
 
         <h5>Optional JavaScript Configuration</h5>
 
-        <p>Clearing options can only be passed in during initialization at this time.</p>
+        <p>As of Clearing 4.1.2, you can now pass in options to <code>data-options</code> when the clearing is initialized on the page.</p>
 
 <%= code_example "
 {

data/docs/components/section.html.erb

@@ -65,22 +65,22 @@
                 </div>
               </section>
             </div>
-            <div class="section-container auto" data-section data-options="deep_linking: true;">
-              <section class="section">
-                <p class="title"><a href="#panel1">Section 1</a></p>
-                <div class="content" data-slug="panel1">
+            <div class="section-container auto" data-section>
+              <section>
+                <p class="title" data-section-title><a href="#panel1">Section 1</a></p>
+                <div class="content" data-slug="panel1" data-section-content>
                   <p>Section 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                 </div>
               </section>
-              <section class="section">
-                <p class="title"><a href="#panel2">Section 2</a></p>
-                <div class="content" data-slug="panel2">
+              <section>
+                <p class="title" data-section-title><a href="#panel2">Section 2</a></p>
+                <div class="content" data-slug="panel2" data-section-content>
                   <p>Section 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                 </div>
               </section>
-              <div class="section">
-                <p class="title"><a href="#panel3">Section 3</a></p>
-                <div class="content" data-slug="panel3">
+              <div data-section-region class="section">
+                <p class="title" data-section-title><a href="#panel3">Section 3</a></p>
+                <div class="content" data-slug="panel3" data-section-content>
                   <form>
                     <div class="row collapse">
                       <div class="large-2 columns">
@@ -128,15 +128,15 @@
 
 <%= code_example '
 <div class="section-container auto" data-section>
-  <section class="section">
-    <p class="title"><a href="#panel1">Section 1</a></p>
-    <div class="content">
+  <section>
+    <p class="title" data-section-title><a href="#panel1">Section 1</a></p>
+    <div class="content" data-section-content>
       <p>Content of section 1.</p>
     </div>
   </section>
-  <section class="section">
-    <p class="title"><a href="#panel2">Section 2</a></p>
-    <div class="content">
+  <section>
+    <p class="title" data-section-title><a href="#panel2">Section 2</a></p>
+    <div class="content" data-section-content>
       <p>Content of section 2.</p>
     </div>
   </section>
@@ -161,15 +161,15 @@
         <p>Adding an <code>accordion</code> class to the section container will show an accordion on both small and large screens.</p>
 <%= code_example '
 <div class="section-container accordion" data-section="accordion">
-  <section class="section">
-    <p class="title"><a href="#">Section 1</a></p>
-    <div class="content">
+  <section>
+    <p class="title" data-section-title><a href="#">Section 1</a></p>
+    <div class="content" data-section-content>
       <p>Content of section 1.</p>
     </div>
   </section>
-  <section class="section">
-    <p class="title"><a href="#">Section 2</a></p>
-    <div class="content">
+  <section>
+    <p class="title" data-section-title><a href="#">Section 2</a></p>
+    <div class="content" data-section-content>
       <p>Content of section 2.</p>
     </div>
   </section>
@@ -179,15 +179,15 @@
         <p>Adding a <code>tabs</code> class to the section container will enable tabs on both small and large screens.</p>
 <%= code_example '
 <div class="section-container tabs" data-section="tabs">
-  <section class="section">
-    <p class="title"><a href="#">Section 1</a></p>
-    <div class="content">
+  <section>
+    <p class="title" data-section-title><a href="#">Section 1</a></p>
+    <div class="content" data-section-content>
       <p>Content of section 1.</p>
     </div>
   </section>
-  <section class="section">
-    <p class="title"><a href="#">Section 2</a></p>
-    <div class="content">
+  <section>
+    <p class="title" data-section-title><a href="#">Section 2</a></p>
+    <div class="content" data-section-content>
       <p>Content of section 2.</p>
     </div>
   </section>
@@ -204,9 +204,9 @@
 <div class="row">
   <div class="large-3 columns">
     <div class="section-container vertical-nav" data-section="vertical-nav">
-      <section class="section">
-        <p class="title"><a href="#">Section 1</a></p>
-        <div class="content">
+      <section>
+        <p class="title" data-section-title><a href="#">Section 1</a></p>
+        <div class="content" data-section-content>
           <ul class="side-nav">
             <li><a href="#">Link 1</a></li>
             <li><a href="#">Link 2</a></li>
@@ -216,9 +216,9 @@
           </ul>
         </div>
       </section>
-      <section class="section">
-        <p class="title"><a href="#">Section 2</a></p>
-        <div class="content">
+      <section>
+        <p class="title" data-section-title><a href="#">Section 2</a></p>
+        <div class="content" data-section-content>
           <ul class="side-nav">
             <li><a href="#">Link 1</a></li>
             <li><a href="#">Link 2</a></li>
@@ -244,9 +244,9 @@
 
 <%= code_example '
 <div class="section-container horizontal-nav" data-section="horizontal-nav">
-  <section class="section">
-    <p class="title"><a href="#">Section 1</a></p>
-    <div class="content">
+  <section>
+    <p class="title" data-section-title><a href="#">Section 1</a></p>
+    <div class="content" data-section-content>
       <ul class="side-nav">
         <li><a href="#">Link 1</a></li>
         <li><a href="#">Link 2</a></li>
@@ -256,9 +256,9 @@
       </ul>
     </div>
   </section>
-  <section class="section">
-    <p class="title"><a href="#">Section 2</a></p>
-    <div class="content">
+  <section>
+    <p class="title" data-section-title><a href="#">Section 2</a></p>
+    <div class="content" data-section-content>
       <ul class="side-nav">
         <li><a href="#">Link 1</a></li>
         <li><a href="#">Link 2</a></li>
@@ -277,15 +277,15 @@
 
 <%= code_example '
 <div class="section-container auto" data-section data-options="deep_linking: true">
-  <section class="section">
-    <p class="title"><a href="#section1">Section 1</a></p>
-    <div class="content" data-slug="section1">
+  <section>
+    <p class="title" data-section-title><a href="#section1">Section 1</a></p>
+    <div class="content" data-slug="section1" data-section-content>
       <p>Content of section 1.</p>
     </div>
   </section>
-  <section class="section">
-    <p class="title"><a href="#section2">Section 2</a></p>
-    <div class="content" data-slug="section2">
+  <section>
+    <p class="title" data-section-title><a href="#section2">Section 2</a></p>
+    <div class="content" data-slug="section2" data-section-content>
       <p>Content of section 2.</p>
     </div>
   </section>
@@ -305,18 +305,18 @@
 
 <%= code_example '
 <div class="your-class-name" data-section="auto"> <!-- Can use "auto", "accordion", "tabs", "vertical-nav", or "horizontal-nav" -->
-  <section class="your-section-class" data-section>
-    <p class="title"><a href="#section1">Section 1</a></p>
-    <div class="content" data-slug="section1">
+  <section class="your-section-class">
+    <p class="your-title-class" data-section-title><a href="#section1">Section 1</a></p>
+    <div class="your-content-class" data-slug="section1" data-section-content>
       <p>Content of section 1.</p>
     </div>
   </section>
-  <section class="section">
-    <p class="title"><a href="#section2">Section 2</a></p>
-    <div class="content" data-slug="section2">
+  <div data-section-region>
+    <p class="your-title-class" data-section-title><a href="#section2">Section 2</a></p>
+    <div class="your-content-class" data-slug="section2" data-section-content>
       <p>Content of section 2.</p>
     </div>
-  </section>
+  </div>
 </div>', :html %>
 
         <hr> -->
@@ -359,9 +359,9 @@ $section-bottom-margin:          emCalc(20px);
 
 <%= code_example '
 <div class="section-container auto" data-section>
-  <section class="section">
-    <p class="title"><a href="#panel1">Section 1</a></p>
-    <div class="content">
+  <section>
+    <p class="title" data-section-title><a href="#panel1">Section 1</a></p>
+    <div class="content" data-section-content>
       <ul class="side-nav">
         <li><a href="#">Link 1</a></li>
         <li><a href="#">Link 2</a></li>
@@ -371,9 +371,9 @@ $section-bottom-margin:          emCalc(20px);
       </ul>
     </div>
   </section>
-  <section class="section">
-    <p class="title"><a href="#panel2">Section 2</a></p>
-    <div class="content">
+  <section>
+    <p class="title" data-section-title><a href="#panel2">Section 2</a></p>
+    <div class="content" data-section-content>
       <ul class="side-nav">
         <li><a href="#">Link 1</a></li>
         <li><a href="#">Link 2</a></li>

data/docs/components/type.html.erb

@@ -166,7 +166,7 @@
             </ol>
           </div>
           <div class="large-8 columns">
-            <h6>Defition Lists</h6>
+            <h6>Definition Lists</h6>
             <dl>
               <dt>Definition Title</dt>
               <dd>Definition Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit.</dd>

data/docs/controller.rb

@@ -30,6 +30,10 @@ helpers do
   def features_path
     '/grid.php'
   end
+  
+  def training_path
+    '/training.php'
+  end
 
   def add_ons_path
     '/templates.php'

data/docs/index.html.erb

@@ -108,7 +108,7 @@
       <div class="large-4 columns">
         <dl>
           <dt><h5><a href="components/joyride.html">Joyride</a></h5></dt>
-          <dd>This plugin lets you give users a tour of your site our app. Joyride is easy to customize using CSS or our Scss variables.</dd>
+          <dd>This plugin lets you give users a tour of your site or app. Joyride is easy to customize using CSS or our Scss variables.</dd>
         </dl>
       </div>
     </div>

data/docs/layout.html.erb

@@ -33,6 +33,8 @@
           <li class="divider"></li>
           <li><a href="<%= docs_path %>">Docs</a></li>
           <li class="divider"></li>
+          <li><a href="<%= training_path %>">Training</a></li>
+          <li class="divider"></li>
           <li class="has-form">
             <a href="http://foundation.zurb.com/docs" class="button">Getting Started</a>
           </li>

data/js/foundation/foundation.clearing.js

@@ -6,7 +6,7 @@
   Foundation.libs.clearing = {
     name : 'clearing',
 
-    version : '4.1.0',
+    version : '4.1.2',
 
     settings : {
       templates : {
@@ -25,8 +25,9 @@
       locked : false
     },
 
-    init : function (method, options) {
-      Foundation.inherit(this, 'set_data get_data remove_data throttle');
+    init : function (scope, method, options) {
+      var self = this;
+      Foundation.inherit(this, 'set_data get_data remove_data throttle data_options');
 
       if (typeof method === 'object') {
         options = $.extend(true, this.settings, method);
@@ -34,15 +35,15 @@
 
       if (typeof method != 'string') {
         $(this.scope).find('ul[data-clearing]').each(function () {
-          var self = Foundation.libs.clearing,
-              $el = $(this),
+          var $el = $(this),
               options = options || {},
+              lis = $el.find('li'),
               settings = self.get_data($el);
 
-          if (!settings) {
+          if (!settings && lis.length > 0) {
             options.$parent = $el.parent();
 
-            self.set_data($el, $.extend(true, self.settings, options));
+            self.set_data($el, $.extend({}, self.settings, options, self.data_options($el)));
 
             self.assemble($el.find('li'));
 
@@ -69,13 +70,24 @@
           function (e, current, target) {
             var current = current || $(this),
                 target = target || current,
-                settings = self.get_data(current.parent());
+                next = current.next('li'),
+                settings = self.get_data(current.parent()),
+                image = $(e.target);
 
             e.preventDefault();
             if (!settings) self.init();
 
+            // if clearing is open and the current image is
+            // clicked, go to the next image in sequence
+            if (target.hasClass('visible') 
+              && current[0] === target[0] 
+              && next.length > 0 && self.is_open(current)) {
+              target = next;
+              image = target.find('img');
+            }
+
             // set current and target to the clicked li if not otherwise defined.
-            self.open($(e.target), current, target);
+            self.open(image, current, target);
             self.update_paddles(target);
           })
 
@@ -143,7 +155,10 @@
     },
 
     assemble : function ($li) {
-      var $el = $li.parent(),
+      var $el = $li.parent();
+      $el.after('<div id="foundationClearingHolder"></div>');
+
+      var holder = $('#foundationClearingHolder'),
           settings = this.get_data($el),
           grid = $el.detach(),
           data = {
@@ -153,7 +168,7 @@
           wrapper = '<div class="clearing-assembled"><div>' + data.viewing +
             data.grid + '</div></div>';
 
-      return settings.$parent.append(wrapper);
+      return holder.after(wrapper).remove();
     },
 
     // event callbacks
@@ -166,9 +181,12 @@
 
       if (!this.locked()) {
         // set the image to the selected thumbnail
-        image.attr('src', this.load($image));
+        image
+          .attr('src', this.load($image))
+          .css('visibility', 'hidden');
 
         this.loaded(image, function () {
+          image.css('visibility', 'visible');
           // toggle the gallery
           root.addClass('clearing-blackout');
           container.addClass('clearing-container');
@@ -209,6 +227,10 @@
       return false;
     },
 
+    is_open : function (current) {
+      return current.parent().attr('style').length > 0;
+    },
+
     keydown : function (e) {
       var clearing = $('.clearing-blackout').find('ul[data-clearing]');
 
@@ -256,17 +278,17 @@
         .closest('.carousel')
         .siblings('.visible-img');
 
-      if (target.next().length) {
+      if (target.next().length > 0) {
         visible_image
-          .find('.clearing-main-right')
+          .find('.clearing-main-next')
           .removeClass('disabled');
       } else {
         visible_image
-          .find('.clearing-main-right')
+          .find('.clearing-main-next')
           .addClass('disabled');
       }
 
-      if (target.prev().length) {
+      if (target.prev().length > 0) {
         visible_image
           .find('.clearing-main-prev')
           .removeClass('disabled');
@@ -480,6 +502,10 @@
       $(window).off('.fndtn.clearing');
       this.remove_data(); // empty settings cache
       this.settings.init = false;
+    },
+
+    reflow : function () {
+      this.init();
     }
   };
 

data/js/foundation/foundation.dropdown.js

@@ -37,16 +37,23 @@
 
       $(this.scope).on('click.fndtn.dropdown', '[data-dropdown]', function (e) {
         e.preventDefault();
-        e.stopPropagation();
         self.toggle($(this));
       });
 
-      $('*, html, body').on('click.fndtn.dropdown', function (e) {
-        if (!$(e.target).data('dropdown')) {
-          $('[data-dropdown-content]')
-            .css(Foundation.rtl ? 'right':'left', '-99999px')
-            .removeClass(self.settings.activeClass);
+      $('body').on('click.fndtn.dropdown', function (e) {
+        var parent = $(e.target).closest('[data-dropdown-content]');
+
+        if ($(e.target).data('dropdown')) {
+          return;
+        }
+        if (parent.length > 0 && ($(e.target).is('[data-dropdown-content]') || $.contains(parent.first()[0], e.target))) {
+          e.stopPropagation();
+          return;
         }
+
+        $('[data-dropdown-content]')
+          .css(Foundation.rtl ? 'right':'left', '-99999px')
+          .removeClass(self.settings.activeClass);
       });
 
       $(window).on('resize.fndtn.dropdown', self.throttle(function () {
@@ -59,7 +66,10 @@
     toggle : function (target, resize) {
       var dropdown = $('#' + target.data('dropdown'));
 
-      $('[data-dropdown-content]').not(dropdown).css(Foundation.rtl ? 'right':'left', '-99999px').removeClass(this.settings.activeClass);
+      $('[data-dropdown-content]')
+        .not(dropdown)
+        .css(Foundation.rtl ? 'right':'left', '-99999px')
+        .removeClass(this.settings.activeClass);
 
       if (dropdown.hasClass(this.settings.activeClass)) {
         dropdown

data/js/foundation/foundation.joyride.js

@@ -6,18 +6,21 @@
   Foundation.libs.joyride = {
     name: 'joyride',
 
-    version : '4.0.0',
+    version : '4.1.2',
 
     defaults : {
+      expose               : false,      // turn on or off the expose feature
+      modal                : false,      // Whether to cover page with modal during the tour
       tipLocation          : 'bottom',  // 'top' or 'bottom' in relation to parent
       nubPosition          : 'auto',    // override on a per tooltip bases
-      scrollSpeed          : 300,       // Page scrolling speed in milliseconds
+      scrollSpeed          : 300,       // Page scrolling speed in milliseconds, 0 = no scroll animation
       timer                : 0,         // 0 = no timer , all other numbers = timer in milliseconds
       startTimerOnClick    : true,      // true or false - true requires clicking the first button start the timer
       startOffset          : 0,         // the index of the tooltip you want to start on (index of the li)
       nextButton           : true,      // true or false to control whether a next button is used
       tipAnimation         : 'fade',    // 'pop' or 'fade' in each tip
       pauseAfter           : [],        // array of indexes where to pause the tour after
+      exposed              : [],        // array of expose elements
       tipAnimationFadeSpeed: 300,       // when tipAnimation = 'fade' this is speed in milliseconds for the transition
       cookieMonster        : false,     // true or false to control whether cookies are used
       cookieName           : 'joyride', // Name the cookie you'll use
@@ -26,12 +29,18 @@
       tipContainer         : 'body',    // Where will the tip be attached
       postRideCallback     : function (){},    // A method to call once the tour closes (canceled or complete)
       postStepCallback     : function (){},    // A method to call after each step
+      preStepCallback      : function (){},    // A method to call before each step
+      preRideCallback      : function (){},    // A method to call before the tour starts (passed index, tip, and cloned exposed element)
+      postExposeCallback   : function (){},    // A method to call after an element has been exposed
       template : { // HTML segments for tip layout
         link    : '<a href="#close" class="joyride-close-tip">&times;</a>',
         timer   : '<div class="joyride-timer-indicator-wrap"><span class="joyride-timer-indicator"></span></div>',
         tip     : '<div class="joyride-tip-guide"><span class="joyride-nub"></span></div>',
         wrapper : '<div class="joyride-content-wrapper"></div>',
-        button  : '<a href="#" class="small button joyride-next-tip"></a>'
+        button  : '<a href="#" class="small button joyride-next-tip"></a>',
+        modal   : '<div class="joyride-modal-bg"></div>',
+        expose  : '<div class="joyride-expose-wrapper"></div>',
+        exposeCover: '<div class="joyride-expose-cover"></div>'
       }
     },
 
@@ -84,6 +93,16 @@
 
       $(window).on('resize.fndtn.joyride', self.throttle(function () {
         if ($('[data-joyride]').length > 0 && self.settings.$next_tip) {
+          if (self.settings.exposed.length > 0) {
+            var $els = $(self.settings.exposed);
+
+            $els.each(function () {
+              var $this = $(this);
+              self.un_expose($this);
+              self.expose($this);
+            });
+          }
+
           if (self.is_phone()) {
             self.pos_phone();
           } else {
@@ -105,6 +124,7 @@
       
       // non configureable settings
       this.settings.$content_el = $this;
+      this.settings.$body = $(this.settings.tipContainer);
       this.settings.body_offset = $(this.settings.tipContainer).position();
       this.settings.$tip_content = this.settings.$content_el.find('> li');
       this.settings.paused = false;
@@ -219,6 +239,18 @@
         this.settings.attempts = 0;
 
         if (this.settings.$li.length && this.settings.$target.length > 0) {
+          if (init) { //run when we first start
+            this.settings.preRideCallback(this.settings.$li.index(), this.settings.$next_tip);
+            if (this.settings.modal) {
+              this.show_modal();
+            }
+          }
+
+          this.settings.preStepCallback(this.settings.$li.index(), this.settings.$next_tip);
+
+          if (this.settings.modal && this.settings.expose) {
+            this.expose();
+          }
 
           this.settings.tipSettings = $.extend(this.settings, this.data_options(this.settings.$li));
 
@@ -243,7 +275,7 @@
 
             $timer.width(0);
 
-            if (thsi.settings.timer > 0) {
+            if (this.settings.timer > 0) {
 
               this.settings.$next_tip.show();
 
@@ -310,10 +342,16 @@
     },
 
     hide : function () {
+      if (this.settings.modal && this.settings.expose) {
+        this.un_expose();
+      }
+
+      if (!this.settings.modal) {
+        $('.joyride-modal-bg').hide();
+      }
+      this.settings.$current_tip.hide();
       this.settings.postStepCallback(this.settings.$li.index(),
         this.settings.$current_tip);
-      $('.joyride-modal-bg').hide();
-      this.settings.$current_tip.hide();
     },
 
     set_li : function (init) {
@@ -378,6 +416,7 @@
       var half_fold = Math.ceil($(window).height() / 2),
           tip_position = this.settings.$next_tip.offset(),
           $nub = this.settings.$next_tip.find('.joyride-nub'),
+          nub_width = Math.ceil(this.outerWidth($nub) / 2),
           nub_height = Math.ceil(this.outerHeight($nub) / 2),
           toggle = init || false;
 
@@ -387,7 +426,10 @@
         this.settings.$next_tip.show();
       }
 
-      if (typeof resizing === 'undefined') resizing = false;
+      if (typeof resizing === 'undefined') {
+        resizing = false;
+      }
+
       if (!/body/i.test(this.settings.$target.selector)) {
 
           if (this.bottom()) {
@@ -416,7 +458,7 @@
 
             this.settings.$next_tip.css({
               top: this.settings.$target.offset().top,
-              left: (this.outerWidth(this.settings.$target) + this.settings.$target.offset().left)});
+              left: (this.outerWidth(this.settings.$target) + this.settings.$target.offset().left + nub_width)});
 
             this.nub_position($nub, this.settings.tipSettings.nubPosition, 'left');
 
@@ -424,7 +466,7 @@
 
             this.settings.$next_tip.css({
               top: this.settings.$target.offset().top,
-              left: (this.settings.$target.offset().left - this.outerWidth(this.settings.$next_tip) - nub_height)});
+              left: (this.settings.$target.offset().left - this.outerWidth(this.settings.$next_tip) - nub_width)});
 
             this.nub_position($nub, this.settings.tipSettings.nubPosition, 'right');
 
@@ -503,9 +545,14 @@
     pos_modal : function ($nub) {
       this.center();
       $nub.hide();
+
+      this.show_modal();
+    },
+
+    show_modal : function () {
       if (!this.settings.$next_tip.data('closed')) {
         if ($('.joyride-modal-bg').length < 1) {
-          $('body').append('<div class="joyride-modal-bg">').show();
+          $('body').append(this.settings.template.modal).show();
         }
 
         if (/pop/i.test(this.settings.tipAnimation)) {
@@ -516,6 +563,151 @@
       }
     },
 
+    expose : function () {
+      var expose,
+          exposeCover,
+          el,
+          origCSS,
+          randId = 'expose-'+Math.floor(Math.random()*10000);
+
+      if (arguments.length > 0 && arguments[0] instanceof $) {
+        el = arguments[0];
+      } else if(this.settings.$target && !/body/i.test(this.settings.$target.selector)){
+        el = this.settings.$target;
+      }  else {
+        return false;
+      }
+
+      if(el.length < 1){
+        if(window.console){
+          console.error('element not valid', el);
+        }
+        return false;
+      }
+
+      expose = $(this.settings.template.expose);
+      this.settings.$body.append(expose);
+      expose.css({
+        top: el.offset().top,
+        left: el.offset().left,
+        width: this.outerWidth(el, true),
+        height: this.outerHeight(el, true)
+      });
+      
+      exposeCover = $(this.settings.template.exposeCover);
+
+      origCSS = {
+        zIndex: el.css('z-index'),
+        position: el.css('position')
+      };
+
+      el.css('z-index',expose.css('z-index')*1+1);
+
+      if (origCSS.position == 'static') {
+        el.css('position','relative');
+      }
+
+      el.data('expose-css',origCSS);
+
+      exposeCover.css({
+        top: el.offset().top,
+        left: el.offset().left,
+        width: this.outerWidth(el, true),
+        height: this.outerHeight(el, true)
+      });
+
+      this.settings.$body.append(exposeCover);
+      expose.addClass(randId);
+      exposeCover.addClass(randId);
+      el.data('expose', randId);
+      this.settings.postExposeCallback(this.settings.$li.index(), this.settings.$next_tip, el);
+      this.add_exposed(el);
+    },
+
+    un_expose : function () {
+      var exposeId,
+          el,
+          expose ,
+          origCSS,
+          clearAll = false;
+
+      if (arguments.length > 0 && arguments[0] instanceof $) {
+        el = arguments[0];
+      } else if(this.settings.$target && !/body/i.test(this.settings.$target.selector)){
+        el = this.settings.$target;
+      }  else {
+        return false;
+      }
+
+      if(el.length < 1){
+        if (window.console) {
+          console.error('element not valid', el);
+        }
+        return false;
+      }
+
+      exposeId = el.data('expose');
+      expose = $('.' + exposeId);
+
+      if (arguments.length > 1) {
+        clearAll = arguments[1];
+      }
+
+      if (clearAll === true) {
+        $('.joyride-expose-wrapper,.joyride-expose-cover').remove();
+      } else {
+        expose.remove();
+      }
+
+      origCSS = el.data('expose-css');
+
+      if (origCSS.zIndex == 'auto') {
+        el.css('z-index', '');
+      } else {
+        el.css('z-index', origCSS.zIndex);
+      }
+
+      if (origCSS.position != el.css('position')) {
+        if(origCSS.position == 'static') {// this is default, no need to set it.
+          el.css('position', '');
+        } else {
+          el.css('position', origCSS.position);
+        }
+      }
+
+      el.removeData('expose');
+      el.removeData('expose-z-index');
+      this.remove_exposed(el);
+    },
+
+    add_exposed: function(el){
+      this.settings.exposed = this.settings.exposed || [];
+      if (el instanceof $ || typeof el === 'object') {
+        this.settings.exposed.push(el[0]);
+      } else if (typeof el == 'string') {
+        this.settings.exposed.push(el);
+      }
+    },
+
+    remove_exposed: function(el){
+      var search, count;
+      if (el instanceof $) {
+        search = el[0]
+      } else if (typeof el == 'string'){
+        search = el;
+      }
+
+      this.settings.exposed = this.settings.exposed || [];
+      count = this.settings.exposed.length;
+
+      for (var i=0; i < count; i++) {
+        if (this.settings.exposed[i] == search) {
+          this.settings.exposed.splice(i, 1);
+          return;
+        }
+      }
+    },
+
     center : function () {
       var $w = $(window);
 
@@ -545,14 +737,31 @@
 
     corners : function (el) {
       var w = $(window),
+          window_half = w.height() / 2,
+          //using this to calculate since scroll may not have finished yet.
+          tipOffset = Math.ceil(this.settings.$target.offset().top - window_half + this.settings.$next_tip.outerHeight()),
           right = w.width() + this.scrollLeft(w),
-          bottom = w.width() + w.scrollTop();
+          offsetBottom =  w.height() + tipOffset,
+          bottom = w.height() + w.scrollTop(),
+          top = w.scrollTop();
+
+      if (tipOffset < top) {
+        if (tipOffset < 0) {
+          top = 0;
+        } else {
+          top = tipOffset;
+        }
+      }
+
+      if (offsetBottom > bottom) {
+        bottom = offsetBottom;
+      }
 
       return [
-        el.offset().top <= w.scrollTop(),
-        right <= el.offset().left + this.outerWidth(el),
-        bottom <= el.offset().top + this.outerHeight(el),
-        this.scrollLeft(w) >= el.offset().left
+        el.offset().top < top,
+        right < el.offset().left + el.outerWidth(),
+        bottom < el.offset().top + el.outerHeight(),
+        this.scrollLeft(w) > el.offset().left
       ];
     },
 
@@ -595,6 +804,10 @@
         clearTimeout(this.settings.automate);
       }
 
+      if (this.settings.modal && this.settings.expose) {
+        this.un_expose();
+      }
+
       this.settings.$next_tip.data('closed', true);
 
       $('.joyride-modal-bg').hide();

data/js/foundation/foundation.js

@@ -145,9 +145,9 @@ if (typeof jQuery === "undefined" &&
     },
 
     response_obj : function (response_arr, args) {
-      for (var callback in args) {
-        if (typeof args[callback] === 'function') {
-          return args[callback]({
+      for (var i = 0, len = args.length; i < len; i++) {
+        if (typeof args[i] === 'function') {
+          return args[i]({
             errors: response_arr.filter(function (s) {
               if (typeof s === 'string') return s;
             })

data/js/foundation/foundation.reveal.js

@@ -6,7 +6,7 @@
   Foundation.libs.reveal = {
     name: 'reveal',
 
-    version : '4.0.9',
+    version : '4.1.2',
 
     locked : false,
 
@@ -41,6 +41,8 @@
 
       if (typeof method === 'object') {
         $.extend(true, this.settings, method);
+      } else if (typeof options !== 'undefined') {
+        $.extend(true, this.settings, options);
       }
 
       if (typeof method != 'string') {

data/js/foundation/foundation.section.js

@@ -6,7 +6,7 @@
   Foundation.libs.section = {
     name: 'section',
 
-    version : '4.1.1',
+    version : '4.1.2',
 
     settings : {
       deep_linking: false,
@@ -32,7 +32,7 @@
       var self = this;
 
       $(this.scope)
-        .on('click.fndtn.section', '[data-section] .title', function (e) {
+        .on('click.fndtn.section', '[data-section] .title, [data-section] [data-section-title]', function (e) {
           var $this = $(this),
               section = $this.closest('[data-section]');
 
@@ -52,9 +52,9 @@
 
       $(document)
         .on('click.fndtn.section', function (e) {
-          if ($(e.target).closest('.title').length < 1) {
+          if ($(e.target).closest('.title, [data-section-title]').length < 1) {
             $('[data-section="vertical-nav"], [data-section="horizontal-nav"]')
-              .find('section, .section')
+              .find('section, .section, [data-section-region]')
               .removeClass('active')
               .attr('style', '');
           }
@@ -64,8 +64,8 @@
 
     toggle_active : function (e, self) {
       var $this = $(this),
-          section = $this.closest('section, .section'),
-          content = section.find('.content'),
+          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));
@@ -87,10 +87,10 @@
         }
       } else {
         var prev_active_section = null,
-            title_height = self.outerHeight(section.find('.title'));
+            title_height = self.outerHeight(section.find('.title, [data-section-title]'));
 
         if (self.small(parent) || settings.one_up) {
-          prev_active_section = $this.closest('[data-section]').find('section.active, .section.active');
+          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', '');
@@ -125,7 +125,7 @@
 
       sections.each(function() {
         var $this = $(this),
-            active_section = $this.find('section.active, .section.active'),
+            active_section = $this.find('section.active, .section.active, .active[data-section-region]'),
             settings = $.extend({}, self.settings, self.data_options($this));
 
         if (active_section.length > 1) {
@@ -138,20 +138,23 @@
           && !self.is_horizontal($this)
           && !self.is_accordion($this)) {
 
-          var first = $this.find('section, .section').first();
-          first.addClass('active');
+          var first = $this.find('section, .section, [data-section-region]').first();
+
+          if (settings.one_up) {
+            first.addClass('active');
+          }
 
           if (self.small($this)) {
             first.attr('style', '');
           } else {
-            first.css('padding-top', self.outerHeight(first.find('.title')));
+            first.css('padding-top', self.outerHeight(first.find('.title, [data-section-title]')));
           }
         }
 
         if (self.small($this)) {
           active_section.attr('style', '');
         } else {
-          active_section.css('padding-top', self.outerHeight(active_section.find('.title')));
+          active_section.css('padding-top', self.outerHeight(active_section.find('.title, [data-section-title]')));
         }
 
         self.position_titles($this);
@@ -191,19 +194,19 @@
 
         if (hash.length > 0 && settings.deep_linking) {
           section
-            .find('section, .section')
+            .find('section, .section, [data-section-region]')
             .attr('style', '')
             .removeClass('active');
           section
-            .find('.content[data-slug="' + hash + '"]')
-            .closest('section, .section')
+            .find('.content[data-slug="' + hash + '"], [data-section-content][data-slug="' + hash + '"]')
+            .closest('section, .section, [data-section-region]')
             .addClass('active');
         }
       });
     },
 
     position_titles : function (section, off) {
-      var titles = section.find('.title'),
+      var titles = section.find('.title, [data-section-title]'),
           previous_width = 0,
           self = this;
 
@@ -223,17 +226,17 @@
     },
 
     position_content : function (section, off) {
-      var titles = section.find('.title'),
-          content = section.find('.content'),
+      var titles = section.find('.title, [data-section-title]'),
+          content = section.find('.content, [data-section-content]'),
           self = this;
 
       if (typeof off === 'boolean') {
         content.attr('style', '');
         section.attr('style', '');
       } else {
-        section.find('section, .section').each(function () {
-          var title = $(this).find('.title'),
-              content = $(this).find('.content');
+        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});
           } else {
@@ -254,7 +257,7 @@
     position_right : function (el) {
       var section = el.closest('[data-section]'),
           section_width = el.closest('[data-section]').width(),
-          offset = section.find('.title').length;
+          offset = section.find('.title, [data-section-title]').length;
       return (section_width - el.position().left - el.width() * (el.index() + 1) - offset);
     },
 

data/js/foundation/foundation.topbar.js

@@ -6,7 +6,7 @@
   Foundation.libs.topbar = {
     name : 'topbar',
 
-    version : '4.1.0',
+    version : '4.1.2',
 
     settings : {
       index : 0,
@@ -16,7 +16,7 @@
       init : false
     },
 
-    init : function (method, options) {
+    init : function (section, method, options) {
       var self = this;
 
       if (typeof method === 'object') {
@@ -85,17 +85,18 @@
             }
             section.find('li.moved').removeClass('moved');
             topbar.data('index', 0);
-          }
 
-          if (topbar.parent().hasClass('fixed')) {
+            if (topbar.hasClass('fixed')) {
+              topbar.parent().addClass('fixed');
+              topbar.removeClass('fixed');
+              $('body').css('padding-top',offst);
+            }
+          } else if (topbar.parent().hasClass('fixed')) {
             topbar.parent().removeClass('fixed');
+            topbar.addClass('fixed');
             $('body').css('padding-top','0');
             window.scrollTo(0,0);
-          } else if (topbar.hasClass('fixed expanded')) {
-            topbar.parent().addClass('fixed');
-            $('body').css('padding-top',offst);
           }
-
         })
 
         .on('click.fndtn.topbar', '.top-bar .has-dropdown>a', function (e) {
@@ -126,7 +127,7 @@
             topbar
               .css('min-height', topbar.data('height') + self.outerHeight(titlebar, true) * 2)
           }
-      });
+        });
 
       $(window).on('resize.fndtn.topbar', function () {
         if (!self.breakpoint()) {

data/lib/foundation/generators/install_generator.rb

@@ -21,6 +21,7 @@ module Foundation
       end
 
       def detect_js_format
+        return ['.coffee', '#='] if File.exist?('app/assets/javascripts/application.coffee')
         return ['.js.coffee', '#='] if File.exist?('app/assets/javascripts/application.js.coffee')
         return ['.js', '//='] if File.exist?('app/assets/javascripts/application.js')
       end

data/lib/foundation/generators/templates/application.html.haml

@@ -26,3 +26,6 @@
   = yield
 
   = javascript_include_tag "application"
+
+:plain
+  </html>

data/lib/foundation/version.rb

@@ -1,3 +1,3 @@
 module Foundation
-  VERSION = "4.1.1"
+  VERSION = "4.1.2"
 end

data/scss/foundation/components/_custom-forms.scss

@@ -116,7 +116,7 @@ $custom-dropdown-width-large:           434px !default;
       background: linear-gradient(to bottom, $custom-dropdown-bg 0%,$custom-select-fade-to-color 100%);
       -webkit-box-shadow: none;
       box-shadow: none;
-      font-size: emCalc(14px);
+      font-size: $custom-dropdown-font-size;
       vertical-align: top;
   
       ul {
@@ -237,4 +237,4 @@ $custom-dropdown-width-large:           434px !default;
     /* Custom input, disabled */
     .custom.disabled { background-color: $custom-form-bg-disabled; }
   }
-}
+}

data/scss/foundation/components/_joyride.scss

@@ -157,6 +157,25 @@ $joyride-screenfill:          rgba(0,0,0,0.5) !default;
   cursor: pointer;
 }
 
+.joyride-expose-wrapper {
+  background-color: #ffffff;
+  position: absolute;
+  border-radius: 3px;
+  z-index: 102;
+  -moz-box-shadow: 0px 0px 30px #ffffff;
+  -webkit-box-shadow: 0px 0px 15px #ffffff;
+  box-shadow: 0px 0px 15px #ffffff;
+}
+
+.joyride-expose-cover {
+  background: transparent;
+  border-radius: 3px;
+  position: absolute;
+  z-index: 9999;
+  top: 0px;
+  left: 0px;
+}
+
 
 /* Styles for screens that are atleast 768px; */
 @media #{$small} {

data/scss/foundation/components/_top-bar.scss

@@ -249,7 +249,7 @@ $topbar-media-query: "only screen and (min-width:"#{$topbar-breakpoint}")" !defa
     }
 
     // Apply the active link color when it has that class
-    &.active a { background: darken($topbar-dropdown-bg, 3%); }
+    &.active > a { background: darken($topbar-dropdown-bg, 3%); }
   }
 
   // Add some extra padding for list items contains buttons

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: zurb-foundation
 version: !ruby/object:Gem::Version
-  version: 4.1.1
+  version: 4.1.2
   prerelease: 
 platform: ruby
 authors:
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2013-04-02 00:00:00.000000000 Z
+date: 2013-04-10 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass
@@ -231,7 +231,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
       segments:
       - 0
-      hash: 1017486002222735027
+      hash: -1096634432269913109
 required_rubygems_version: !ruby/object:Gem::Requirement
   none: false
   requirements:
@@ -240,7 +240,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
       segments:
       - 0
-      hash: 1017486002222735027
+      hash: -1096634432269913109
 requirements: []
 rubyforge_project: 
 rubygems_version: 1.8.23