zurb-foundation 4.0.9 → 4.1.1

data/docs/components/orbit.html.erb

@@ -258,7 +258,7 @@ $stack-on-small-margin-bottom: emCalc(20px); // Stack on small does not function
   orbit_transition_class: 'orbit-transitioning'
 }", :js %>
 
-    <p>You can also use the <code>data-options</code> attribute to pass configuration settings to Orbit. Treat it like a <code>style</code> property:</p>
+    <p>Starting in 4.0.7 you can also use the <code>data-options</code> attribute to pass configuration settings to Orbit. Treat it like a <code>style</code> property:</p>
 
 <%= code_example '
 <ul data-orbit data-options="timer_speed:2500; bullets:false;">

data/docs/components/section.html.erb

@@ -39,7 +39,7 @@
             </div>
           </div>
           <div class="large-9 columns">
-            <div class="section-container horizontal-nav" data-section="horizontal-nav">
+            <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">
@@ -275,7 +275,7 @@
         <h6>Deep Linking</h6>
         <p>Set <code>deep-linking</code> to true to enable deep linking to sections of content. Deep linking allows visitors to visit a predefined URL with a hash that points to a particular section of the content. Deep linking also requires a matching <code>data-slug</code> on the content section that the hash should point to, without the pound (&#35;) sign.</p>
 
-        <%= code_example '
+<%= 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>
@@ -295,6 +295,32 @@
 
         <hr>
 
+      <!--   <h3>Building with Mixins</h3>
+        <p>If you are keen on SCSS and use it for your Foundation projects, you have access to mixins that will let you create any type of section you want and change it within a media query too! Building a section with our mixins requires a bit of predefined structure, but you can choose the classes or ID's to style them with. Start with some sort of block-level container, we use a <code>&lt;div&gt;</code>. This container needs to have <code>data-section="type-of-section"</code>. The section types are explained above. Inside this you create "sections", which can be an HTML5 <code>section</code> element or a <code>&lt;div class="section"&gt;</code>, that will hold content.<p>
+
+        <h5>Title and Content Elements</h5>
+        <p>Inside of these "sections" you created you'll need to add a title and content. To create the title element, use something like a <code>&lt;p&gt;</code>, <code>&lt;h5&gt;</code>, etc and give it an attribute of <code>data-section-title</code>. After this, you add <code>&lt;div data-section-content&gt;</code> and fill it with your content.</p>
+
+        <p>Here's an example structure you might use with the section mixin:</p>
+
+<%= 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">
+      <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">
+      <p>Content of section 2.</p>
+    </div>
+  </section>
+</div>', :html %>
+
+        <hr> -->
+
         <h5>Default SCSS Variables</h5>
 <%= code_example '
 /* We use these to set padding and hover factor */
@@ -368,6 +394,7 @@ $section-bottom-margin:          emCalc(20px);
 {
   deep_linking: false,
   one_up: true,
+  rtl: false,
   callback: function (){}
 }", :js %>
 

data/docs/components/split-buttons.html.erb

@@ -156,7 +156,7 @@ $split-button-pip-left-lrg:    emCalc(-9px);
 <%= code_example '
 <a href="#" data-dropdown="drop1" class="button dropdown">Dropdown Button <span data-dropdown="drop1"></span></a><br>
 
-<ul id="drop1" class="f-dropdown">
+<ul id="drop1" class="f-dropdown" data-dropdown-content>
   <li><a href="#">This is a link</a></li>
   <li><a href="#">This is another</a></li>
   <li><a href="#">Yet another</a></li>

data/docs/components/top-bar.html.erb

@@ -76,9 +76,6 @@
     <div class="row">
       <div class="large-12 columns">
 
-        <p>The topbar is only designed to have one per page, so we can't include a demo on this page due to the fact that we have one on the page already. Take a look at the code we have below and checkout our topbar to get a feel for how it works. The only thing about the one on this page is it doesn't have a dropdown.</p>
-        <hr>
-
         <h3>Build With HTML Classes</h3>
         <p>The top bar is a pretty complex piece of magical UI goodness, which makes it really difficult to create a mixin from it. We rely on many presentational classes to accomplish the styles and there's a lot happening in the JS.</p>
 

data/docs/css/docs.scss

@@ -7,6 +7,8 @@
 /* Coderay styles */
 .html, .css, .scss, .js { position: relative; }
 
+ul, ol, dl { list-style-position: inside; }
+
 .CodeRay:before {
   position: absolute;
   top: 6px;
@@ -46,7 +48,7 @@ footer.row.full-width {
 
 .docs.header { margin-bottom: 10px; }
 .docs.subheader {
-  float: left;
+  float: $default-float;
 }
 
 .docs.section-container a.active { font-weight: bold; }
@@ -92,7 +94,7 @@ footer.row.full-width {
 
 /* Clearing Docs */
 .clearing-thumbs { list-style: none;
-  li { float: left; margin-right: 10px; }
+  li { float: $default-float; margin-#{$opposite-direction}: 10px; }
 }
 
 /* Forms Docs */
@@ -152,8 +154,8 @@ input[type="text"].attached-input {
 
 /* Grid Docs */
 #masthead { @include grid-row; @include panel;
-  & > hgroup { @include grid-column(4, $float:left); }
-  & > section { @include grid-column(8, $float:left); }
+  & > hgroup { @include grid-column(4, $float:$default-float); }
+  & > section { @include grid-column(8, $float:$default-float); }
 }
 
 /* Switch Docs */
@@ -179,10 +181,10 @@ input[type="text"].attached-input {
 }
 
 @media only screen and (min-width: 800px) {
-  .docs.header { float: left; }
+  .docs.header { float: $default-float; }
 
   .docs.subheader {
     margin-top: 38px;
-    float: right;
+    float: $opposite-direction;
   }
 }

data/docs/layout.html.erb

@@ -71,7 +71,7 @@
     <div id="copyright">
       <div class="row full-width">
         <div class="large-4 columns">
-          <p>Site content &copy; 2013 ZURB, inc.</p>
+          <p>Site content &copy; <%= Time.now.year %> ZURB, inc.</p>
         </div>
         <div class="large-8 columns">
           <ul class="inline-list right">
@@ -109,7 +109,18 @@
     </script>
     <script src="<%= asset_path %>/docs.js"></script>
     <script>
-      $(document).foundation();
+      $(document)
+      <% if @joyride %>
+        .foundation()
+        .foundation('joyride', 'start');
+      <% else %>
+        .foundation();
+      <% end %>
+
+      // For Kitchen Sink Page
+      $('#start-jr').on('click', function() {
+        $(document).foundation('joyride','start');
+      });
     </script>
   </body>
 </html>

data/docs/rtl.html.erb

@@ -0,0 +1,53 @@
+<% @side_nav = "using" %>
+<div class="row">
+  <div class="large-9 push-3 columns">
+
+    <% @page_title = "Right-to-Left Support" %>
+    <div class="row">
+      <div class="large-12 columns">
+        <h2><%= @page_title %></h2>
+        <h4 class="subheader">Right-to-left text direction support in Foundation allows you to easily switch text direction for all components.<h4>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="large-12 columns">
+        <h3>Setup</h3>
+        <p>Foundation 4 was built to support right-to-left text direction out of the box, but you'll need to make a couple of adjustments to your markup and SCSS to get everything up and running.</p>
+
+        <h4>Markup Changes for Right-to-Left Layouts</h4>
+        <p>You'll need to make a few changes to your markup to get the javascript components working nice and smooth. In the <code>html</code> tag, you'll need to add a <code>dir</code> attribute with a value of <code>rtl</code>. Here's what your <code>html</code> tag should look like:</p>
+<%= code_example '
+<!-- This example is for a right-to-left Arabic layout -->
+<html class="no-js" lang="ar" dir="rtl">
+', :html %>
+        <h5>Change the Language Too</h5>
+        <p>You'll need to change your <code>lang</code> attribute value to match your language. Here's a handy list of common right-to-left languages and their html codes:</p>
+        <ul>
+          <li><strong>Arabic:</strong> ar</li>
+          <li><strong>Chinese:</strong> zh</li>
+          <li><strong>Farsi:</strong> fa</li>
+          <li><strong>Hebrew:</strong> he, iw</li>
+          <li><strong>Japanese:</strong> ja</li>
+          <li><strong>Urdu:</strong> ur</li>
+          <li><strong>Yiddish:</strong> yi, ji</li>
+        </ul>
+        <hr>
+        <h4>A Single SCSS Adjustment</h4>
+        <p>We made it really easy to switch the entire Foundation grid to right-to-left by changing the <code>$text-direction</code> SCSS variable. Here's what the variable should look like:</p>
+<%= code_example '
+$text-direction: rtl;
+', :css %>
+        <p>By changing this single variable, the entire grid and all the Foundation components will be switched to right-to-left orientation.</p>
+        <div class="panel">
+          <h6>Using CSS</h6>
+          <p>If you downloaded a static version of Foundation using the customizer to get a right-to-left support, your download should be ready to use without any of the steps mentioned above.</p>
+          <a href="http://foundation.zurb.com/download.php#customizeFoundation">Download Right-to-Left Foundation 4 &raquo;</a>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="large-3 pull-9 columns">
+    <%= render "_sidebar.html.erb" %>
+  </div>
+</div>

data/docs/support.html.erb

@@ -112,7 +112,7 @@
     <hr>
 
     <h5>Want IE8 Grid Support?</h5>
-    <p>We know it can be hard to get clients to ditch support for IE8. We're hoping with the auto-update to IE10 release from Microsoft, we won't need to worry about it anymore. Until then, here's a gist with a grid grid that will work in IE8, just like it did in Foundation 3.</p>
+    <p>We know it can be hard to get clients to ditch support for IE8. We're hoping with the auto-update to IE10 release from Microsoft, we won't need to worry about it anymore. Until then, here's a gist with a grid that will work in IE8, just like it did in Foundation 3.</p>
     <a class="small button" href="https://gist.github.com/zurbchris/5068210">Foundation IE8 Grid</a>
 
     <hr>

data/js/foundation/foundation.clearing.js

@@ -6,14 +6,14 @@
   Foundation.libs.clearing = {
     name : 'clearing',
 
-    version : '4.0.0',
+    version : '4.1.0',
 
     settings : {
       templates : {
         viewing : '<a href="#" class="clearing-close">&times;</a>' +
           '<div class="visible-img" style="display: none"><img src="//:0">' +
-          '<p class="clearing-caption"></p><a href="#" class="clearing-main-left"><span></span></a>' +
-          '<a href="#" class="clearing-main-right"><span></span></a></div>'
+          '<p class="clearing-caption"></p><a href="#" class="clearing-main-prev"><span></span></a>' +
+          '<a href="#" class="clearing-main-next"><span></span></a></div>'
       },
 
       // comma delimited list of selectors that, on click, will close clearing,
@@ -25,8 +25,7 @@
       locked : false
     },
 
-    init : function (scope, method, options) {
-      this.scope = this.scope || scope;
+    init : function (method, options) {
       Foundation.inherit(this, 'set_data get_data remove_data throttle');
 
       if (typeof method === 'object') {
@@ -80,9 +79,9 @@
             self.update_paddles(target);
           })
 
-        .on('click.fndtn.clearing', '.clearing-main-right',
+        .on('click.fndtn.clearing', '.clearing-main-next',
           function (e) { this.nav(e, 'next') }.bind(this))
-        .on('click.fndtn.clearing', '.clearing-main-left',
+        .on('click.fndtn.clearing', '.clearing-main-prev',
           function (e) { this.nav(e, 'prev') }.bind(this))
         .on('click.fndtn.clearing', this.settings.close_selectors,
           function (e) { Foundation.libs.clearing.close(e, this) })
@@ -269,20 +268,27 @@
 
       if (target.prev().length) {
         visible_image
-          .find('.clearing-main-left')
+          .find('.clearing-main-prev')
           .removeClass('disabled');
       } else {
         visible_image
-          .find('.clearing-main-left')
+          .find('.clearing-main-prev')
           .addClass('disabled');
       }
     },
 
     center : function (target) {
-      target.css({
-        marginLeft : -(this.outerWidth(target) / 2),
-        marginTop : -(this.outerHeight(target) / 2)
-      });
+      if (!this.rtl) {
+        target.css({
+          marginLeft : -(this.outerWidth(target) / 2),
+          marginTop : -(this.outerHeight(target) / 2)
+        });
+      } else {
+        target.css({
+          marginRight : -(this.outerWidth(target) / 2),
+          marginTop : -(this.outerHeight(target) / 2)
+        });
+      }
       return this;
     },
 
@@ -328,7 +334,7 @@
         return;
       }
 
-      if (this.complete || this.readyState === 4) {
+      if (image[0].complete || image[0].readyState === 4) {
         loaded();
       } else {
         bindLoad.call(image);

data/js/foundation/foundation.dropdown.js

@@ -6,7 +6,7 @@
   Foundation.libs.dropdown = {
     name : 'dropdown',
 
-    version : '4.0.9',
+    version : '4.1.0',
 
     settings : {
       activeClass: 'open'
@@ -14,7 +14,7 @@
 
     init : function (scope, method, options) {
       this.scope = scope || this.scope;
-      Foundation.inherit(this, 'throttle');
+      Foundation.inherit(this, 'throttle scrollLeft');
 
       if (typeof method === 'object') {
         $.extend(true, this.settings, method);
@@ -44,7 +44,7 @@
       $('*, html, body').on('click.fndtn.dropdown', function (e) {
         if (!$(e.target).data('dropdown')) {
           $('[data-dropdown-content]')
-            .css('left', '-99999px')
+            .css(Foundation.rtl ? 'right':'left', '-99999px')
             .removeClass(self.settings.activeClass);
         }
       });
@@ -59,11 +59,11 @@
     toggle : function (target, resize) {
       var dropdown = $('#' + target.data('dropdown'));
 
-      $('[data-dropdown-content]').not(dropdown).css('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
-          .css('left', '-99999px')
+          .css(Foundation.rtl ? 'right':'left', '-99999px')
           .removeClass(this.settings.activeClass);
       } else {
         this
@@ -82,11 +82,9 @@
     },
 
     css : function (dropdown, target) {
-      if (dropdown.parent()[0] === $('body')[0]) {
-        var position = target.offset();
-      } else {
-        var position = target.position();
-      }
+      var position = target.position();
+      position.top += target.offsetParent().offset().top;
+      position.left += target.offsetParent().offset().left;
 
       if (this.small()) {
         dropdown.css({
@@ -97,7 +95,7 @@
           top: position.top + this.outerHeight(target)
         });
       } else {
-        if ($(window).width() > this.outerWidth(dropdown) + target.offset().left) {
+        if (!Foundation.rtl && $(window).width() > this.outerWidth(dropdown) + target.offset().left) {
           var left = position.left;
         } else {
           if (!dropdown.hasClass('right')) {
@@ -105,6 +103,7 @@
           }
           var left = position.left - (this.outerWidth(dropdown) - this.outerWidth(target));
         }
+
         dropdown.attr('style', '').css({
           position : 'absolute',
           top: position.top + this.outerHeight(target),

data/js/foundation/foundation.forms.js

@@ -45,6 +45,16 @@
       var self = this;
 
       $(this.scope)
+        .on('click.fndtn.forms', 'form.custom span.custom.checkbox', function (e) {
+          e.preventDefault();
+          e.stopPropagation();
+          self.toggle_checkbox($(this));
+        })
+        .on('click.fndtn.forms', 'form.custom span.custom.radio', function (e) {
+          e.preventDefault();
+          e.stopPropagation();
+          self.toggle_radio($(this));
+        })
         .on('change.fndtn.forms', 'form.custom select:not([data-customforms="disabled"])', function (e) {
           self.refresh_custom_select($(this));
         })
@@ -56,26 +66,17 @@
             if ($associatedElement.attr('type') === 'checkbox') {
               e.preventDefault();
               $customCheckbox = $(this).find('span.custom.checkbox');
-
-              //the checkbox might be outside after the label
-              if ($customCheckbox.length == 0) {
-                $customCheckbox = $(this).next('span.custom.checkbox');
-              }
-              //the checkbox might be outside before the label
+              //the checkbox might be outside after the label or inside of another element
               if ($customCheckbox.length == 0) {
-                $customCheckbox = $(this).prev('span.custom.checkbox');
+                $customCheckbox = $associatedElement.add(this).siblings('span.custom.checkbox').first();
               }
               self.toggle_checkbox($customCheckbox);
             } else if ($associatedElement.attr('type') === 'radio') {
               e.preventDefault();
               $customRadio = $(this).find('span.custom.radio');
-              //the radio might be outside after the label
+              //the radio might be outside after the label or inside of another element
               if ($customRadio.length == 0) {
-                $customRadio = $(this).next('span.custom.radio');
-              }
-              //the radio might be outside before the label
-              if ($customRadio.length == 0) {
-                $customRadio = $(this).prev('span.custom.radio');
+                $customRadio = $associatedElement.add(this).siblings('span.custom.radio').first();
               }
               self.toggle_radio($customRadio);
             }
@@ -143,6 +144,37 @@
           }
         });
 
+      $(window).on('keydown', function (e) {
+        var focus = document.activeElement,
+            dropdown = $('.custom.dropdown.open');
+
+        if (dropdown.length > 0) {
+          e.preventDefault();
+
+          if (e.which === 13) {
+            dropdown.find('li.selected').trigger('click');
+          }
+
+          if (e.which === 38) {
+            var current = dropdown.find('li.selected'),
+                prev = current.prev(':not(.disabled)');
+
+            if (prev.length > 0) {
+              current.removeClass('selected');
+              prev.addClass('selected');
+            }
+          } else if (e.which === 40) {
+            var current = dropdown.find('li.selected'),
+                next = current.next(':not(.disabled)');
+
+            if (next.length > 0) {
+              current.removeClass('selected');
+              next.addClass('selected');
+            }
+          }
+        }
+      });
+
       this.settings.init = true;
     },