347 lines
14 KiB
JavaScript
347 lines
14 KiB
JavaScript
/*
|
|
* jQuery pageSlide
|
|
* Version 2.0
|
|
* http://srobbin.com/jquery-pageslide/
|
|
*
|
|
* jQuery Javascript plugin which slides a webpage over to reveal an additional interaction pane.
|
|
*
|
|
* Copyright (c) 2011 Scott Robbin (srobbin.com)
|
|
* Dual licensed under the MIT and GPL licenses.
|
|
*/
|
|
|
|
(function($){
|
|
// Convenience vars for accessing elements
|
|
var $body = $('#main-wrap'),
|
|
$pageslide = $('#pageslide'),
|
|
$viewPage = $('#view-page');
|
|
|
|
var _sliding = false, // Mutex to assist closing only once
|
|
_lastCaller; // Used to keep track of last element to trigger pageslide
|
|
|
|
// If the pageslide element doesn't exist, create it
|
|
if( $pageslide.length == 0 ) {
|
|
$pageslide = $('<div />').attr( 'id', 'pageslide' )
|
|
.css( 'display', 'none' )
|
|
.appendTo( $('#main-wrap') );
|
|
}
|
|
|
|
/*
|
|
* Private methods
|
|
*/
|
|
function _load( url, useIframe ) {
|
|
// Are we loading an element from the page or a URL?
|
|
|
|
if ( url.indexOf("#") === 0 ) {
|
|
// Load a page element
|
|
$(url).clone(true).appendTo( $pageslide.empty() ).show();
|
|
if($('#items').length) {
|
|
$pageslide.css({'width': '324px'});
|
|
} else {
|
|
$pageslide.css({'width': '264px'});
|
|
}
|
|
} else {
|
|
// Load a URL. Into an iframe?
|
|
if( useIframe ) {
|
|
var iframe = $("<iframe />").attr({
|
|
src: url,
|
|
frameborder: 0,
|
|
hspace: 0
|
|
})
|
|
.css({
|
|
width: "100%",
|
|
height: "100%"
|
|
});
|
|
|
|
$pageslide.html( iframe );
|
|
} else {
|
|
$viewPage.find('.content').load(url, function(){
|
|
$viewPage.clone(true).appendTo( $pageslide.empty() ).show();
|
|
});
|
|
$(window).width() > 1600 ? $pageslide.css({'width': '1024px'}) : $pageslide.css({'width': '953px'});
|
|
// $pageslide.load( url );
|
|
}
|
|
|
|
$pageslide.data( 'localEl', false );
|
|
|
|
}
|
|
}
|
|
|
|
// Function that controls opening of the pageslide
|
|
function _start( direction, speed ) {
|
|
var slideWidth,
|
|
bodyAnimateIn = {},
|
|
slideAnimateIn = {};
|
|
// If the slide is open or opening, just ignore the call
|
|
if( $pageslide.is(':visible') || _sliding ) return;
|
|
_sliding = true;
|
|
|
|
switch( direction ) {
|
|
case 'left':
|
|
if($(window).width() > 1600) {
|
|
$pageslide.css({'width': '1024px'});
|
|
slideWidth = $pageslide.outerWidth( true );
|
|
bodyAnimateIn['width'] = '-=' + slideWidth;
|
|
} else {
|
|
$pageslide.css({'width': '953px'});
|
|
slideWidth = $pageslide.outerWidth( true );
|
|
}
|
|
|
|
$pageslide.css({ left: 'auto', right: '-' + slideWidth + 'px' });
|
|
slideAnimateIn['right'] = '+=' + slideWidth;
|
|
|
|
|
|
|
|
// bodyAnimateIn['margin-left'] = '-=' + slideWidth;
|
|
|
|
// for Orbit ---> Fixed page does not move to the left
|
|
if($('#items').length) {
|
|
// bodyAnimateIn['padding-left'] = '+=' + slideWidth;
|
|
}
|
|
//
|
|
|
|
break;
|
|
default:
|
|
// Original
|
|
// $pageslide.css({ left: '-' + slideWidth + 'px', right: 'auto' });
|
|
// bodyAnimateIn['margin-left'] = '+=' + slideWidth;
|
|
|
|
// for Orbit
|
|
// if($('#items').length) {
|
|
// $pageslide.css({'width': '324px'});
|
|
// slideWidth = $pageslide.outerWidth( true );
|
|
// } else {
|
|
// $pageslide.css({'width': '264px'});
|
|
// }
|
|
slideWidth = $pageslide.outerWidth( true );
|
|
if($sidebarState && !$('#items').length) {
|
|
$pageslide.css({ left: '-' + (slideWidth-241) + 'px', right: 'auto' });
|
|
}else{
|
|
$pageslide.css({ left: '-' + (slideWidth-61) + 'px', right: 'auto' });
|
|
};
|
|
|
|
|
|
bodyAnimateIn['margin-left'] = '+=' + slideWidth;
|
|
// bodyAnimateIn['width'] = '-=' + slideWidth;
|
|
//
|
|
|
|
slideAnimateIn['left'] = '+=' + slideWidth;
|
|
break;
|
|
}
|
|
|
|
// Animate the slide, and attach this slide's settings to the element
|
|
console.log("d")
|
|
$body.animate(bodyAnimateIn, speed);
|
|
$pageslide.show()
|
|
.animate(slideAnimateIn, speed, function() {
|
|
_sliding = false;
|
|
});
|
|
}
|
|
|
|
/*
|
|
* Declaration
|
|
*/
|
|
$.fn.pageslide = function(options) {
|
|
var $elements = this,
|
|
$ua = navigator.userAgent,
|
|
event = ($ua.match(/iPad/i)||$ua.match(/iPhone/i)||$ua.match(/iPod/i)||$ua.match(/Android/)) ? "touchstart" : "click";
|
|
// On click
|
|
$elements.on(event, function(e) {
|
|
var $self = $(this),
|
|
settings = $.extend({ href: $self.attr('href') }, options);
|
|
|
|
// Prevent the default behavior and stop propagation
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
|
|
if ( $pageslide.is(':visible') && $self[0] == _lastCaller ) {
|
|
// If we clicked the same element twice, toggle closed
|
|
$.pageslide.close();
|
|
} else {
|
|
// Open
|
|
$.pageslide( settings );
|
|
|
|
// for Orbit
|
|
|
|
if($('#items').length) {
|
|
$('.item-menu > a, .navbar-inner').removeClass("active");
|
|
$(this).parents('.navbar-inner').addClass('active').end().addClass('active');
|
|
if(!$.support.touch) {
|
|
if($('.item-menu > a').hasClass('active')) {
|
|
$('.item-menu').css({
|
|
'display': 'none',
|
|
});
|
|
$(this).parents('.item-menu').css({
|
|
'display': 'inline-block',
|
|
});
|
|
}
|
|
}
|
|
if($(this).hasClass('view-page')) {
|
|
pageID = $(this).data('pageId');
|
|
}
|
|
} else if($('.tags-groups').length) {
|
|
$(this).parents('li').addClass("active").siblings().removeClass("active").parent('ul').siblings().children('li').removeClass("active");
|
|
} else {
|
|
$(this).parents("tr").addClass("active").siblings().removeClass("active");;
|
|
}
|
|
$pageslide.focusFirstField(); // focus first form
|
|
|
|
setTimeout(setScroll, 300);
|
|
//
|
|
|
|
// Record the last element to trigger pageslide
|
|
_lastCaller = $self[0];
|
|
}
|
|
});
|
|
};
|
|
|
|
/*
|
|
* Default settings
|
|
*/
|
|
$.fn.pageslide.defaults = {
|
|
speed: 300, // Accepts standard jQuery effects speeds (i.e. fast, normal or milliseconds)
|
|
direction: 'right', // Accepts 'left' or 'right'
|
|
modal: false, // If set to true, you must explicitly close pageslide using $.pageslide.close();
|
|
iframe: false, // By default, linked pages are loaded into an iframe. Set this to false if you don't want an iframe.
|
|
href: null // Override the source of the content. Optional in most cases, but required when opening pageslide programmatically.
|
|
};
|
|
|
|
/*
|
|
* Public methods
|
|
*/
|
|
|
|
// Open the pageslide
|
|
$.pageslide = function( options ) {
|
|
// Extend the settings with those the user has provided
|
|
var settings = $.extend({}, $.fn.pageslide.defaults, options);
|
|
|
|
// Are we trying to open in different direction?
|
|
// if( $pageslide.is(':visible') && $pageslide.data( 'direction' ) != settings.direction) {
|
|
if( $pageslide.is(':visible')) {
|
|
$.pageslide.close(function(){
|
|
_load( settings.href, settings.iframe );
|
|
_start( settings.direction, settings.speed );
|
|
});
|
|
} else {
|
|
_load( settings.href, settings.iframe );
|
|
if( $pageslide.is(':hidden') ) {
|
|
_start( settings.direction, settings.speed );
|
|
}
|
|
}
|
|
$pageslide.data( settings );
|
|
|
|
|
|
// for Orbit
|
|
if($('#add-tags').length) {
|
|
$('.set_new').addClass('active in').siblings().removeClass('active in');
|
|
$('#pageslide .select_default .search-query').attr('id','filter-default-tag')
|
|
$('#filter-default-tag').fastLiveFilter('.add-default-tags-list', '.filter-item', '.tag');
|
|
$('.add-default-tags-list .filter-item').removeClass('mark');
|
|
}
|
|
//
|
|
}
|
|
|
|
// Close the pageslide
|
|
$.pageslide.close = function( callback ) {
|
|
var $pageslide = $('#pageslide'),
|
|
slideWidth,
|
|
speed = $pageslide.data( 'speed' ),
|
|
bodyAnimateIn = {},
|
|
slideAnimateIn = {}
|
|
|
|
// If the slide isn't open, just ignore the call
|
|
if( $pageslide.is(':hidden') || _sliding ) return;
|
|
_sliding = true;
|
|
|
|
switch( $pageslide.data( 'direction' ) ) {
|
|
case 'left':
|
|
if($(window).width() > 1600) {
|
|
$pageslide.css({'width': '1024px'});
|
|
} else {
|
|
$pageslide.css({'width': '953px'});
|
|
}
|
|
slideWidth = $pageslide.outerWidth( true );
|
|
// bodyAnimateIn['margin-left'] = '+=' + slideWidth;
|
|
if($(window).width() > 1600) {
|
|
bodyAnimateIn['width'] = '+=' + slideWidth;
|
|
}
|
|
|
|
// for Orbit ---> Fixed page does not move to the left
|
|
if($('#items').length) {
|
|
bodyAnimateIn['padding-left'] = '-=' + slideWidth;
|
|
}
|
|
//
|
|
|
|
slideAnimateIn['right'] = '-=' + slideWidth;
|
|
break;
|
|
default:
|
|
// Original
|
|
// bodyAnimateIn['margin-left'] = '-=' + slideWidth;
|
|
// bodyAnimateIn['width'] = '+=' + slideWidth;
|
|
|
|
// for Orbit
|
|
// if($('#items').length) {
|
|
// $pageslide.css({'width': '324px'});
|
|
// slideWidth = $pageslide.outerWidth( true );
|
|
// } else {
|
|
// $pageslide.css({'width': '264px'});
|
|
// }
|
|
slideWidth = $pageslide.outerWidth( true );
|
|
bodyAnimateIn['margin-left'] = '-=' + slideWidth;
|
|
// bodyAnimateIn['width'] = '+=' + slideWidth;
|
|
if($pageslide.find('.preview').length) {
|
|
$pageslide.find('.preview').cycle('destroy');
|
|
$pageslide.find('.preview img').removeAttr('style');
|
|
}
|
|
//
|
|
|
|
slideAnimateIn['left'] = '-=' + slideWidth;
|
|
break;
|
|
}
|
|
|
|
// for Orbit
|
|
if($('#items').length) {
|
|
$(".navbar-inner").removeClass("active");
|
|
$('.item-menu > a, .navbar-inner').removeClass("active");
|
|
if(!$.support.touch) {
|
|
$('.item-menu').css({
|
|
'display': 'none',
|
|
});
|
|
}
|
|
} else if($('.tags-groups').length) {
|
|
$('.tags-groups').children('li').removeClass("active");
|
|
} else {
|
|
$("tr").removeClass("active");
|
|
};
|
|
//
|
|
|
|
$pageslide.animate(slideAnimateIn, speed);
|
|
$body.animate(bodyAnimateIn, speed, function() {
|
|
$pageslide.hide();
|
|
_sliding = false;
|
|
if( typeof callback != 'undefined' ) callback();
|
|
$body.css({'width': 'auto'});
|
|
});
|
|
}
|
|
|
|
/* Events */
|
|
|
|
// Don't let clicks to the pageslide close the window
|
|
$pageslide.click(function(e) {
|
|
e.stopPropagation();
|
|
});
|
|
|
|
// Close the pageslide if the document is clicked or the users presses the ESC key, unless the pageslide is modal
|
|
$(document).bind('click keyup', function(e) {
|
|
// If this is a keyup event, let's see if it's an ESC key
|
|
if( e.type == "keyup" && e.keyCode != 27) return;
|
|
|
|
// Make sure it's visible, and we're not modal
|
|
if( $pageslide.is( ':visible' ) && !$pageslide.data( 'modal' ) ) {
|
|
$.pageslide.close();
|
|
}
|
|
});
|
|
function setScroll(){
|
|
$pageslide.children('.nano').nanoScroller({ scrollTop: 0, iOSNativeScrolling: true }); // set nano scroll
|
|
};
|
|
|
|
})(jQuery); |