From 976ce7f29b812bcfedc3c64834a4f879a10cf9a6 Mon Sep 17 00:00:00 2001 From: David Hellsing Date: Sat, 25 Aug 2012 18:55:26 +0200 Subject: [PATCH] better .destroy() + simpler interface for handling multiple themes --- docs/api/utilities.rst | 30 +++++++++-- docs/options/responsive.rst | 2 +- docs/themes/using_themes.rst | 18 ++++--- src/galleria.js | 100 +++++++++++++++++++++-------------- 4 files changed, 99 insertions(+), 51 deletions(-) diff --git a/docs/api/utilities.rst b/docs/api/utilities.rst index 10703984..45cc3cb1 100644 --- a/docs/api/utilities.rst +++ b/docs/api/utilities.rst @@ -18,7 +18,10 @@ This function initializes the gallery. The first argument is the jQuery selector element(s) you want to load the gallery to. The second argument (optional) is an object of configuration options:: + // with defaukt options Galleria.run('#galleria'); + + // with custom options Galleria.run('#galleria', { imageCrop: true, transition: 'fade' @@ -63,6 +66,20 @@ when the gallery is loaded. Example:: }); +Galleria.on( event, fn ) +------------------------ + + | returns Galleria + +Convenient global event listener for all instances. You can use this instead of `bind()` +as a static function. Example on how to listen to when an image is shown +and log the current image source path:: + + Galleria.on('image', function(e) { + Galleria.log( e.imageTarget.src ); // e is the event object + }); + + Galleria.log( msg [,msg,...] ) ------------------------------ @@ -101,8 +118,8 @@ return an array with all galleries initiated. Example:: .. _loadTheme: -Galleria.loadTheme( url[, options] ) ------------------------------------- +Galleria.loadTheme( url ) +------------------------- | returns Galleria @@ -120,7 +137,14 @@ absolute path to the theme .js file. Example:: // when the theme is fully loaded, galleria will run. -The second argument, options, can be used when loading a new theme into an existing gallery. Galleria will then reset the options and then apply any new options you add as a second argument. + +Galleria.unloadTheme() +---------------------- + + | returns Galleria + +Unloads the theme at source, but still keeps the current theme in memory. +Use this before you load a new theme into the same gallery. Galleria.addTransition( name, function ) diff --git a/docs/options/responsive.rst b/docs/options/responsive.rst index 7689197c..e7cadfbc 100644 --- a/docs/options/responsive.rst +++ b/docs/options/responsive.rst @@ -3,7 +3,7 @@ responsive ========== | type: **Boolean** - | default: **false** + | default: **true** This option sets thew Gallery in responsive mode. That means that it will resize the entire container if your CSS is dynamic. In other words, you can add media queries or dynamic proportions in your CSS and the gallery will follow these proportions as the window resizes. \ No newline at end of file diff --git a/docs/themes/using_themes.rst b/docs/themes/using_themes.rst index 9fbcbdd2..41038849 100644 --- a/docs/themes/using_themes.rst +++ b/docs/themes/using_themes.rst @@ -59,19 +59,25 @@ Howver, this is not necessary as the script will automatically load the CSS for Switching themes ================ -You can switch themes at runtime, just fire another ``Galleria.loadTheme()`` function. The following example loads the classic theme, then adds a link with a click event that triggers a theme load (fullscreen):: +You can switch themes at runtime. First you need to call `unloadTheme` to completely unload the previous theme, +then load the new theme and run Galleria again: + // unload the current theme + Galleria.unloadTheme(); + + // load a new theme + Galleria.loadTheme('thems/fullscreen/galleria.fullscreen.min.js'); -The ``loadTheme()`` method will automatically convert all your Galleria instances into the new theme. All options will then be resetted, but the data will be kept. You can apply additional options you wish to apply to the new theme in a second argument. Please refer to the :ref:`loadTheme` documentation for more information. + // run Galleria again with the new theme + Galleria.run('#galleria'); + }).text('Switch to fullscreen').appendTo('body'); + diff --git a/src/galleria.js b/src/galleria.js index a0b4c34c..ce7ee6b4 100644 --- a/src/galleria.js +++ b/src/galleria.js @@ -1,5 +1,5 @@ /** - * Galleria v 1.2.9b 2012-08-13 + * Galleria v 1.2.9b 2012-08-25 * http://galleria.io * * Licensed under the MIT license @@ -266,6 +266,7 @@ var undef, // themeLoad trigger _themeLoad = function( theme ) { + Galleria.theme = theme; // run the instances we have in the pool @@ -306,6 +307,16 @@ var undef, return elem; }, + removeFromArray : function( arr, elem ) { + $.each(arr, function(i, el) { + if ( el == elem ) { + arr.splice(i, 1); + return false; + } + }); + return arr; + }, + getScriptPath : function( src ) { // the currently executing script is always the last @@ -758,8 +769,17 @@ var undef, img.style.msInterpolationMode = force ? 'bicubic' : 'nearest-neighbor'; }, - insertStyleTag : function( styles ) { + insertStyleTag : function( styles, id ) { + + if ( id && $( '#'+id ).length ) { + return; + } + var style = doc.createElement( 'style' ); + if ( id ) { + style.id = id; + } + DOM().head.appendChild( style ); if ( style.styleSheet ) { // IE @@ -1386,7 +1406,7 @@ Galleria = function() { var css = '.galleria-tooltip{padding:3px 8px;max-width:50%;background:#ffe;color:#000;z-index:3;position:absolute;font-size:11px;line-height:1.3;' + 'opacity:0;box-shadow:0 0 2px rgba(0,0,0,.4);-moz-box-shadow:0 0 2px rgba(0,0,0,.4);-webkit-box-shadow:0 0 2px rgba(0,0,0,.4);}'; - Utils.insertStyleTag(css); + Utils.insertStyleTag( css, 'galleria-tooltip' ); self.$( 'tooltip' ).css({ opacity: 0.8, @@ -2066,7 +2086,7 @@ Galleria = function() { '.galleria-'+prefix+'box.iframe .galleria-'+prefix+'nextholder{'+ 'width:100px;height:100px;top:50%;margin-top:-70px}'; - Utils.insertStyleTag( css ); + Utils.insertStyleTag( css, 'galleria-lightbox' ); // create the elements $.each(elems.split(' '), function( i, elemId ) { @@ -3598,8 +3618,12 @@ Galleria.prototype = { */ destroy : function() { - this.get('target').innerHTML = this._original.html; + this.$( 'target' ).data( 'galleria', null ); + this.$( 'container' ).unbind( 'galleria' ); + this.get( 'target' ).innerHTML = this._original.html; this.clearTimer(); + Utils.removeFromArray( _instances, this ); + Utils.removeFromArray( _galleries, this ); return this; }, @@ -5168,57 +5192,47 @@ Galleria.addTheme = function( theme ) { Galleria.loadTheme = function( src, options ) { + // Don't load if theme is already loaded + if( $('script').filter(function() { return $(this).attr('src') == src; }).length ) { + return; + } + var loaded = false, length = _galleries.length, err = window.setTimeout( function() { Galleria.raise( "Theme at " + src + " could not load, check theme path.", true ); - }, 5000 ); + }, 10000 ); // first clear the current theme, if exists - Galleria.theme = undef; + Galleria.unloadTheme(); // load the theme Utils.loadScript( src, function() { - window.clearTimeout( err ); + }); - // check for existing galleries and reload them with the new theme - if ( length ) { - - // temporary save the new galleries - var refreshed = []; - - // refresh all instances - // when adding a new theme to an existing gallery, all options will be resetted but the data will be kept - // you can apply new options as a second argument - $.each( Galleria.get(), function(i, instance) { - - // mix the old data and options into the new instance - var op = $.extend( instance._original.options, { - data_source: instance._data - }, options); + return Galleria; +}; - // remove the old container - instance.$('container').remove(); +/** + unloadTheme unloads the Galleria theme and prepares for a new theme - // create a new instance - var g = new Galleria(); + @returns Galleria +*/ - // move the id - g._id = instance._id; +Galleria.unloadTheme = function() { - // initialize the new instance - g.init( instance._original.target, op ); + if ( typeof Galleria.theme == 'object' ) { - // push the new instance - refreshed.push( g ); - }); + $('script').each(function( i, script ) { - // now overwrite the old holder with the new instances - _galleries = refreshed; - } + if( new RegExp( 'galleria\\.' + Galleria.theme.name + '\\.' ).test( script.src ) ) { + $( script ).remove(); + } + }); - }); + Galleria.theme = undef; + } return Galleria; }; @@ -5984,10 +5998,14 @@ $.fn.galleria = function( options ) { return this.each(function() { - // fail silent if already run - if ( !$.data(this, 'galleria') ) { - $.data( this, 'galleria', new Galleria().init( this, options ) ); + // destroy previous instance and prepare for new load + if ( $.data(this, 'galleria') ) { + $.data( this, 'galleria' ).destroy(); + $( this ).find( '*' ).hide(); } + + // load the new gallery + $.data( this, 'galleria', new Galleria().init( this, options ) ); }); };