/* * 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 = $('
').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 = $("").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);