Permalink
Browse files

Merge branch 'open-source-site' of https://github.com/mobify/mobifyjs

…into open-source-site

Conflicts:
	www/modules/accordion-examples.md
  • Loading branch information...
2 parents 48d445f + 7c4486b commit 8e36f39ad499aa5e15bcd81cf5d9c601a55ad4c2 @mobifydave mobifydave committed Aug 1, 2012
@@ -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+ */
@@ -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 */
+ }
@@ -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;
@@ -30,6 +28,6 @@
margin: 0;
}
-.m-accordion .header > a {
+.m-accordion .m-header > a {
pointer-events: none;
}
@@ -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;
@@ -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();
@@ -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);
};
@@ -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);
@@ -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);
}
};
Oops, something went wrong.

0 comments on commit 8e36f39

Please sign in to comment.