better .destroy() + simpler interface for handling multiple themes

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 )

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.

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:
 
     <script>
-        Galleria.loadTheme('galleria/classic/galleria.classic.js');
+        Galleria.loadTheme('themes/classic/galleria.classic.min.js');
         Galleria.run('#galleria');
 
         $('<a>').click(function(e) {
 
             e.preventDefault();
-            Galleria.loadTheme('galleria/fullscreen/galleria.fullscreen.js');
 
-        }).text('Switch to fullscreen').appendTo('body');
-    </script>
+            // 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');
+    </script>

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 ) );
     });
 
 };