Permalink
Browse files

Update sections to use the semantic version.

  • Loading branch information...
1 parent 89ce08c commit 5df818a2435e3ec77af307b678c5f6b635fe0a44 @mrsweaters mrsweaters committed Apr 9, 2013
Showing with 66 additions and 66 deletions.
  1. +58 −58 docs/components/section.html.erb
  2. +8 −8 js/foundation/foundation.section.js
@@ -66,21 +66,21 @@
</section>
</div>
<div class="section-container auto" data-section>
- <section class="section">
- <p class="title"><a href="#panel1">Section 1</a></p>
- <div class="content" data-slug="panel1">
+ <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>
@@ -54,7 +54,7 @@
.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')
+ .find('section, .section, [data-section-region]')
.removeClass('active')
.attr('style', '');
}
@@ -64,7 +64,7 @@
toggle_active : function (e, self) {
var $this = $(this),
- section = $this.closest('section, .section'),
+ section = $this.closest('section, .section, [data-section-region]'),
content = section.find('.content, [data-section-content]'),
parent = section.closest('[data-section]'),
self = Foundation.libs.section,
@@ -90,7 +90,7 @@
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,7 +138,7 @@
&& !self.is_horizontal($this)
&& !self.is_accordion($this)) {
- var first = $this.find('section, .section').first();
+ var first = $this.find('section, .section, [data-section-region]').first();
if (settings.one_up) {
first.addClass('active');
@@ -194,12 +194,12 @@
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 + '"], [data-section-content][data-slug="' + hash + '"]')
- .closest('section, .section')
+ .closest('section, .section, [data-section-region]')
.addClass('active');
}
});
@@ -234,7 +234,7 @@
content.attr('style', '');
section.attr('style', '');
} else {
- section.find('section, .section').each(function () {
+ 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) {

0 comments on commit 5df818a

Please sign in to comment.