Skip to content
This repository has been archived by the owner on Aug 5, 2020. It is now read-only.

Commit

Permalink
Merge branch 'open-source-site' of https://github.com/mobify/mobifyjs …
Browse files Browse the repository at this point in the history 
…into open-source-site

Conflicts:
	www/modules/accordion-examples.md
  • Loading branch information
@mobifydave
mobifydave committed Aug 1, 2012
2 parents 48d445f + 7c4486b commit 8e36f39
Show file tree
Hide file tree
Showing 18 changed files with 1,012 additions and 1,104 deletions.
72 changes: 58 additions & 14 deletions modules/accordion/accordion-controls.css → modules/accordion/accordion-style.css
View file
@@ -1,23 +1,24 @@
/* Base Style */
.m-accordion {
color: black;
}

.m-accordion .header {
.m-accordion .m-header {
height: 54px;
line-height: 52px;
padding: 0 20px;
border: solid 1px #ededed;
border-width: 1px 0;
position: relative;
cursor: pointer;
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f6f6f6)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#f6f6f6 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#f6f6f6 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%,#f6f6f6 100%); /* W3C */
line-height: 52px;
cursor: pointer;
}
.m-accordion .header:hover, .m-accordion .header:focus {
.m-accordion .m-header:hover, .m-accordion .hm-eader:focus {
z-index: 2;
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 100%); /* FF3.6+ */
Expand All @@ -28,40 +29,83 @@
background: linear-gradient(to bottom, #f6f6f6 0%,#f0f0f0 100%); /* W3C */
border-bottom-color: #d6d6d6;
}
.m-accordion .m-item:first-child .header {
.m-accordion .m-item:first-child .m-header {
-webkit-border-top-left-radius: 9px;
-webkit-border-top-right-radius: 9px;
-moz-border-radius-topleft: 9px;
-moz-border-radius-topright: 9px;
border-top-left-radius: 9px;
border-top-right-radius: 9px;
}
.m-accordion .m-item:last-child .header, .m-accordion .m-active:last-child .inner-content {
.m-accordion .m-item:last-child .m-header, .m-accordion .m-active:last-child .m-inner-content {
-webkit-border-bottom-left-radius: 9px;
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomleft: 9px;
-moz-border-radius-bottomright: 9px;
border-bottom-left-radius: 9px;
border-bottom-right-radius: 9px;
}
.m-accordion .m-active:last-child .header {
.m-accordion .m-active:last-child .m-header {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}


.m-accordion .header a {
.m-accordion .m-header a {
color: black;
}

.m-accordion .inner-content {
.m-accordion .m-inner-content {
padding: 10px 20px;
background: white;
}

.m-accordion h2 {
margin: 0;
color: black;
text-shadow: none;
}


/* Accordion with Images */
.m-indicators-images .m-header:after {
content : "";
display: block;
position: absolute;
top: 50%;
right: 10px;
margin-top: -11px;
z-index: 9;
width: 22px;
height: 22px;
background: url(../img/accordion.png) 0 -20px no-repeat;
}
.m-indicators-images .m-active .m-header:after {
background-position: 0 -43px;
}
/* -- Retina version -- */
@media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-devicepixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
.m-indicators-images .m-header:after {
background-position: -11px 0;
background-size: 33px 43px;
}
.m-indicators-images .m-active .m-header:after {
background-position: -11px -22px;
}
}

/* Accordion with CSS indicators */
.m-indicators-css .m-header:after {
content : "+";
color: #999;
text-shadow: #fff 0 1px 0;
display: block;
position: absolute;
top: 50%;
right: 15px;
margin-top: -13px;
z-index: 9;
font-size: 26px;
line-height: 22px;
font-weight: bold;
}
.m-indicators-css .m-active .m-header:after {
content: "\2212"; /* Unicode minus sign */
}
18 changes: 8 additions & 10 deletions modules/accordion/accordion.css
View file
Expand Up @@ -5,21 +5,19 @@
list-style: none;
margin: 0;
}

.m-accordion .content {
-webkit-transition: max-height 1s ease;
-moz-transition: max-height 1s ease;
-o-transition: max-height 1s ease;
transition: max-height 1s ease;
.m-accordion .m-content {
-webkit-transition: max-height 0.5s ease;
-moz-transition: max-height 0.5s ease;
-o-transition: max-height 0.5s ease;
transition: max-height 0.5s ease;
overflow: hidden;
max-height: 0;
}

.m-accordion .m-active .content {
.m-accordion .m-active .m-content {
max-height: 10000px; /* IE hack */
}

.m-accordion .header {
.m-accordion .m-header {
z-index: 1;
position: relative;
margin-top: -1px;
Expand All @@ -30,6 +28,6 @@
margin: 0;
}

.m-accordion .header > a {
.m-accordion .m-header > a {
pointer-events: none;
}
45 changes: 28 additions & 17 deletions modules/accordion/accordion.js
View file
Expand Up @@ -56,8 +56,9 @@ Mobify.UI.Utils = (function($) {
return;
};

// http://stackoverflow.com/questions/5023514/how-do-i-normalize-css3-transition-functions-across-browsers
// determine which transition event to use
function whichTransitionEvent(){
// http://stackoverflow.com/questions/5023514/how-do-i-normalize-css3-transition-functions-across-browsers
// hack for ios 3.1.* because of poor transition support.
if (/iPhone\ OS\ 3_1/.test(navigator.userAgent)) {
return undefined;
Expand Down Expand Up @@ -110,10 +111,14 @@ Mobify.UI.Accordion = (function($, Utils) {
, dragRadius = this.dragRadius;

function endTransition(){
// recalculate proper height
var height = 0;
// transition attached to .content elements, use parent to grab .item
var $item = $(this).parent();

// if the transition is ending
if ($item.hasClass('m-closed')) $(this).parent().removeClass('m-active');

// recalculate proper height
var height = 0;
$('.m-item', $element).each(function(index) {
var $item = $(this);
height += $item.height();
Expand All @@ -122,35 +127,42 @@ Mobify.UI.Accordion = (function($, Utils) {
};

function close($item) {
// toggle opened and closed classes
$item.removeClass('m-opened');
$item.addClass('m-closed')
var $content = $item.find('.content');
if(!Utils.events.transitionend) $item.toggleClass('m-active');
$content.css('max-height', 0)
$item.addClass('m-closed');

// toggle active class on close only if there is no transition support
if(!Utils.events.transitionend) $item.removeClass('m-active');

// set max-height to 0 upon close
$item.find('.m-content').css('max-height', 0)
};

function open($item) {
var $content = $item.find('.content');
$item.toggleClass('m-active');
var $content = $item.find('.m-content');
$item.addClass('m-active');
$item.removeClass('m-closed');
$item.addClass('m-opened')

var contentChildren = $content.children();
// determine which height function to use (outerHeight not supported by zepto)
var contentChildren = $content.children();
var contentHeight = ('outerHeight' in contentChildren) ? contentChildren['outerHeight']() : contentChildren['height']();
$content.css('max-height', contentHeight * 1.5 +'px');

// if transitions are supported, minimize browser reflow
// if transitions are supported, minimize browser reflow by adding the height
// of the to-be expanded content element to the height of the entire accordion
if (Utils.events.transitionend) {
$element.css('min-height', $element.height() + contentHeight + 'px');
}
};

function down(e) {
// get initial position on mouse/touch start
xy = Utils.getCursorPosition(e);
};

function move(e) {
// update position upon move
dxy = Utils.getCursorPosition(e);
};

Expand All @@ -163,7 +175,7 @@ Mobify.UI.Accordion = (function($, Utils) {
if ((dx*dx) + (dy*dy) > dragRadius*dragRadius) return;
}

// toggle open/close on item tapped
// close or open item depending on active class
var $item = $(this).parent();
if ($item.hasClass('m-active')) {
close($item);
Expand All @@ -178,23 +190,22 @@ Mobify.UI.Accordion = (function($, Utils) {
};


// Open items that are hash linked
// Auto-open items that are hash linked
var hash = location.hash;
var $hashitem = $element.find('.header a[href="'+hash+'"]');
var $hashitem = $element.find('.m-header a[href="'+hash+'"]');

if ($hashitem.length) {
open($hashitem.parent());
}

// bind events
$element.find('.header')
$element.find('.m-header')
.on(Utils.events.down, down)
.on(Utils.events.move, move)
.on(Utils.events.up, up)
.on('click', click);

if (Utils.events.transitionend) {
$element.find('.content').on(Utils.events.transitionend, endTransition);
$element.find('.m-content').on(Utils.events.transitionend, endTransition);
}

};
Expand Down

0 comments on commit 8e36f39

Please sign in to comment.