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

Commit

Permalink
MOBILE-690 animations: Cache jquery selector
Browse files Browse the repository at this point in the history
  • Loading branch information
@jleyva
jleyva committed Oct 10, 2014
1 parent 0d0a8c9 commit 6b76291
Showing 1 changed file with 65 additions and 43 deletions.
108 changes: 65 additions & 43 deletions lib/mm.panels.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,25 +121,30 @@ MM.panels = {
*/
show: function(position, content, settings) {

var pageTitle = $("#page-title");
var panelLeft = $('#panel-left');
var panelCenter = $('#panel-center');
var panelRight = $('#panel-right');

MM.panels.html(position, content);
MM.panels.currentPanel = position;

if (MM.deviceType == 'tablet') {
// Clean the page title.
$("#page-title").html("");
pageTitle.html("");

MM.panels.hideRight = false;
if (settings && settings.hideRight) {
MM.panels.hideRight = true;
}
if (settings && settings.title) {
$("#page-title").html(settings.title);
pageTitle.html(settings.title);
}
MM.panels.menuShow(false, settings);
} else {
// Clean the page title.
MM.panels.previousPanelPageTitle = $("#page-title").html();
$("#page-title").html("");
MM.panels.previousPanelPageTitle = pageTitle.html();
pageTitle.html("");

// Short text for page title (MOBILE-462).
// We can't do this using CSS text-overflow because of the header dynamic width.
Expand All @@ -148,19 +153,27 @@ MM.panels = {
}

if (position == 'center') {

$('#panel-right').css('display', 'none');
$('#panel-left').animate({
// Detect if we are in the center.
if (panelCenter.css('display') == 'block') {
$(".header-main .nav-item.home").removeClass("menu-back").addClass("menu-home");
if (settings && settings.title) {
pageTitle.html(settings.title);
}
$(document).scrollTop(0);
return;
}
panelRight.css('display', 'none');
panelLeft.animate({
left: '-100%'
}, 300, function() { $(this).css('display', 'none') });

$('#panel-center').css('display','block');
$('#panel-center').animate({
panelCenter.css('display','block');
panelCenter.animate({
left: 0
}, 300, function () {
$(".header-main .nav-item.home").removeClass("menu-back").addClass("menu-home");
if (settings && settings.title) {
$("#page-title").html(settings.title);
pageTitle.html(settings.title);
}
$(document).scrollTop(0);
});
Expand All @@ -172,24 +185,24 @@ MM.panels = {
} else if (position == 'right') {
// Detect if we are currently at the right.
// This is possible since there are 4 level pages (contents folder)
var contentWidth = parseInt($('#panel-right').css("width"));
if ($('#panel-right').css('display') != 'block') {
var contentWidth = parseInt(panelRight.css("width"));
if (panelRight.css('display') != 'block') {
contentWidth = $(document).innerWidth() + 50;
$('#panel-right').css("width", contentWidth);
panelRight.css("width", contentWidth);
}
$("#panel-right .content-index").css("width", contentWidth - 50);

$('#panel-center').animate({
panelCenter.animate({
left: '-100%'
}, 300, function() { $(this).css('display', 'none') });

$('#panel-right').css('display','block');
$('#panel-right').animate({
panelRight.css('display','block');
panelRight.animate({
left: 0
}, 300, function(){
$(".header-main .nav-item.home").removeClass("menu-home").addClass("menu-back");
if (settings && settings.title) {
$("#page-title").html(settings.title);
pageTitle.html(settings.title);
}
$(document).scrollTop(0);
});
Expand Down Expand Up @@ -346,6 +359,11 @@ MM.panels = {
*/
menuShow: function(show, settings) {

var headerWrapper = $(".header-wrapper");
var panelLeft = $('#panel-left');
var panelCenter = $('#panel-center');
var panelRight = $('#panel-right');

// Clear modal panels.
if (typeof(MM.plugins.contents.infoBox) != "undefined") {
MM.plugins.contents.infoBox.remove();
Expand Down Expand Up @@ -375,7 +393,11 @@ MM.panels = {
}
}

$('#panel-left, #panel-center, #panel-right, .header-wrapper').css("-webkit-transition", "");
panelLeft.css("-webkit-transition", "");
panelCenter.css("-webkit-transition", "");
panelRight.css("-webkit-transition", "");
headerWrapper.css("-webkit-transition", "");


// Menu is currently hidden, so we are going to make it visible.
if (!MM.panels.menuStatus) {
Expand All @@ -398,7 +420,7 @@ MM.panels = {
// In this case, we are about to display the left menu.
// But the right panel is currently hidden.
// So we have to be sure that the right panel is going to be still hidden.
if ($('#panel-right').css('left') == "100%" || parseInt($('#panel-right').css('left')) >= $(document).innerWidth()) {
if (panelRight.css('left') == "100%" || parseInt(panelRight.css('left')) >= $(document).innerWidth()) {
settings.hideRight = true;
}

Expand All @@ -408,9 +430,9 @@ MM.panels = {
}

if (!settings.animate) {
$('#panel-left').css('display', 'block');
$('#panel-center').css('left', sizes.center.left).css('width', sizes.center.width);
$('#panel-right').css('left', sizes.right.left).css('width', sizes.right.width);
panelLeft.css('display', 'block');
panelCenter.css('left', sizes.center.left).css('width', sizes.center.width);
panelRight.css('left', sizes.right.left).css('width', sizes.right.width);
MM.util.applyOverflow('center');
MM.util.applyOverflow('right');
$('.header-wrapper').css('left', sizes.wrapper.left).css('width', sizes.wrapper.width);
Expand All @@ -421,15 +443,15 @@ MM.panels = {
if (MM.getConfig("dev_css3transitions")) {
MM.log("Using CSS3 transitions");

$('#panel-left').css('display', 'block');
panelLeft.css('display', 'block');
$('#panel-center, #panel-right, .header-wrapper').css("-webkit-transition", "left 0.3s ease-in, width 0.3s ease-in");

$('#panel-center').css('left', sizes.center.left).css('width', sizes.center.width);
$('#panel-right').css('left', sizes.right.left).css('width', sizes.right.width);
$('.header-wrapper').css('left', sizes.wrapper.left);
panelCenter.css('left', sizes.center.left).css('width', sizes.center.width);
panelRight.css('left', sizes.right.left).css('width', sizes.right.width);
headerWrapper.css('left', sizes.wrapper.left);

setTimeout(function () {
$('.header-wrapper').css('width', sizes.wrapper.width);
headerWrapper.css('width', sizes.wrapper.width);
MM.util.applyOverflow('center');
MM.util.applyOverflow('right');
}, 500);
Expand All @@ -438,21 +460,21 @@ MM.panels = {
return;
}

$('#panel-left').css('display', 'block');
$('#panel-center').animate({
panelLeft.css('display', 'block');
panelCenter.animate({
left: sizes.center.left, width: sizes.center.width, avoidTransforms: true
}, 300, function() {
MM.panels.menuStatus = true;
MM.util.applyOverflow('center');
});

$('#panel-right').animate({
panelRight.animate({
left: sizes.right.left, width: sizes.right.width, avoidTransforms: true
}, 300, function() {
MM.util.applyOverflow('right');
});

$('.header-wrapper').animate({
headerWrapper.animate({
left: sizes.wrapper.left, width: sizes.wrapper.width, avoidTransforms: true
}, 300);

Expand Down Expand Up @@ -480,12 +502,12 @@ MM.panels = {
}

if (!settings.animate) {
$('#panel-left').css('display', 'none');
$('#panel-center').css('left', sizes.center.left).css('width', sizes.center.width);
$('#panel-right').css('left', sizes.right.left).css('width', sizes.right.width);
panelLeft.css('display', 'none');
panelCenter.css('left', sizes.center.left).css('width', sizes.center.width);
panelRight.css('left', sizes.right.left).css('width', sizes.right.width);
MM.util.applyOverflow('center');
MM.util.applyOverflow('right');
$('.header-wrapper').css('left', sizes.wrapper.left).css('width', sizes.wrapper.width);
headerWrapper.css('left', sizes.wrapper.left).css('width', sizes.wrapper.width);
MM.panels.menuStatus = false;
return;
}
Expand All @@ -495,12 +517,12 @@ MM.panels = {

$('#panel-center, #panel-right, .header-wrapper').css("-webkit-transition", "left 0.3s ease-in, width 0.3s ease-in");

$('#panel-center').css('left', sizes.center.left).css('width', sizes.center.width);
$('#panel-right').css('left', sizes.right.left).css('width', sizes.right.width);
$('.header-wrapper').css('left', sizes.wrapper.left).css('width', sizes.wrapper.width);
panelCenter.css('left', sizes.center.left).css('width', sizes.center.width);
panelRight.css('left', sizes.right.left).css('width', sizes.right.width);
headerWrapper.css('left', sizes.wrapper.left).css('width', sizes.wrapper.width);

setTimeout(function () {
$('#panel-left').css('display', 'none');
panelLeft.css('display', 'none');
MM.util.applyOverflow('center');
MM.util.applyOverflow('right');
}, 500);
Expand All @@ -509,21 +531,21 @@ MM.panels = {
return;
}

$('#panel-center').animate({
panelCenter.animate({
left: sizes.center.left, width: sizes.center.width, avoidTransforms: true
}, 300, function() {
MM.panels.menuStatus = false;
MM.util.applyOverflow('center');
$('#panel-left').css('display', 'none');
panelLeft.css('display', 'none');
});

$('#panel-right').animate({
panelRight.animate({
left: sizes.right.left, width: sizes.right.width, avoidTransforms: true
}, 300, function() {
MM.util.applyOverflow('right');
});

$('.header-wrapper').animate({
headerWrapper.animate({
left: sizes.wrapper.left, width: sizes.wrapper.width, avoidTransforms: true
}, 300);
}
Expand Down

0 comments on commit 6b76291

Please sign in to comment.