Released and packed v1.6.9

Updated the CHANGELOG, functions and toptions documentation
Introduced the toption 'storeCurrent' and TopUp.restore()

CHANGELOG

@@ -1,5 +1,9 @@
 = TopUp CHANGELOG
 
+== Version 1.6.9 (February 2, 2010)
+
+* Introduced the toption 'storeCurrent' and TopUp.restore(). This enables you to 'store' the currently displayed content when rendering new content. As the function name describes: calling TopUp.restore() restores the stored content. Please note that this function still needs to be tweaked a bit. Storing multiple isn't possible at the moment (to be continued).
+
 == Version 1.6.8 (January 25, 2010)
 
 * Fixed bug when calling TopUp.display() with type: 'html'

app/views/layouts/_secondary.html.erb

@@ -1,7 +1,7 @@
 <div id="secondary">
   <%= h2 "Get the latest version", false %>
   <div class="box">
-    <small>Current Release: 1.6.8</small>
+    <small>Current Release: 1.6.9</small>
     <%= link_to "Download TopUp", "http://gettopup.com/releases/packed/latest.zip", :class => "download_top_up" %>
     <small>
       Want to keep track of new releases?

assets/examples/javascripts/top_up-pt.js

@@ -16,7 +16,7 @@ var scriptHost = (function deriveScriptHost() {
 }());
 
 // *
-// * TopUp 1.6.8 (Uncompressed) - Alpha release
+// * TopUp 1.6.9 (Uncompressed) - Alpha release
 // * The #1 Javascript Pop Up / Lightbox (http://gettopup.com)
 // *
 // * This library requires Prototype (http://prototypejs.org)
@@ -25,7 +25,7 @@ var scriptHost = (function deriveScriptHost() {
 // * Except otherwise noted, TopUp is licensed under
 // * http://creativecommons.org/licenses/by-sa/3.0
 // *
-// * $Date: 2010-01-25 22:06:09 +0100 (Mon, 25 January 2010) $
+// * $Date: 2010-02-02 12:08:16 +0100 (Tue, 02 February 2010) $
 // *
 
 TopUp = (function() {
@@ -876,7 +876,7 @@ TopUp = (function() {
 	};
 
 	return {
-	  version: "1.6.8",
+	  version: "1.6.9",
 		host: scriptHost,
 		images_path: "images/top_up/",
 		players_path: "players/",

assets/examples/javascripts/top_up.js

@@ -16,7 +16,7 @@ var scriptHost = (function deriveScriptHost() {
 }());
 
 // *
-// * TopUp 1.6.8 (Uncompressed)
+// * TopUp 1.6.9 (Uncompressed)
 // * The #1 Javascript Pop Up / Lightbox (http://gettopup.com)
 // *
 // * This library requires jQuery (http://jquery.com)
@@ -25,7 +25,7 @@ var scriptHost = (function deriveScriptHost() {
 // * Except otherwise noted, TopUp is licensed under
 // * http://creativecommons.org/licenses/by-sa/3.0
 // *
-// * $Date: 2010-01-25 22:06:09 +0100 (Mon, 25 January 2010) $
+// * $Date: 2010-02-02 12:08:16 +0100 (Tue, 02 February 2010) $
 // *
 
 TopUp = (function() {
@@ -756,11 +756,16 @@ TopUp = (function() {
     if (isScrollable) {
       jQuery("#top_up .te_content").removeClass("te_scrollable");
     }
+
 	  var focusedElement = jQuery("#top_up .te_content :focus");
 		var wrapper        = jQuery("#top_up .te_content").lockDimensions().wrapInner("<div></div>").children();
 
 	  wrapper.fadeOut(fadeDuration(250), function() {
-      wrapper.children().appendTo("#temp_up .te_content").end().end().remove();
+      if (parseInt(options.storeCurrent, 10) == 1) {
+	      wrapper.addClass("te_stored_content").hide().find(".te_stored_content").before(wrapper);
+	    } else {
+        wrapper.children().appendTo("#temp_up .te_content").end().end().remove();
+      }
 
 	    if (callback) {
 	      var arg = jQuery("#temp_up .te_content");
@@ -812,7 +817,7 @@ TopUp = (function() {
       marker.after(jQuery(this).removeClass("marked")).remove();
     });
 
-    jQuery(".te_content").children().remove();
+    jQuery(".te_content").children(":not(.te_stored_content)").remove();
   };
 
   var transform = function(direction, dimensions, callback) {
@@ -983,6 +988,8 @@ TopUp = (function() {
   };
 
 	var hide = function(callback) {
+	  jQuery(".te_content .te_stored_content").removeClass("te_stored_content");
+
 	  var duration = fadeDuration(250);
 	  var onReady = function() {
 	    animateHide(callback);
@@ -1044,7 +1051,7 @@ TopUp = (function() {
 	};
 
 	return {
-	  version: "1.6.8",
+	  version: "1.6.9",
 		host: scriptHost,
 		images_path: "images/top_up/",
 		players_path: "players/",
@@ -1130,6 +1137,19 @@ TopUp = (function() {
 
 		  replace(func || function() {});
 		},
+		restore: function(storeCurrent, callback) {
+		  options.storeCurrent = storeCurrent ? 1 : 0;
+		  options.ondisplay    = callback;
+
+		  TopUp.update(function() {
+		    clearContent();
+		    var stored_content = this.children(":not(.te_stored_content):first-child").prev();
+		    if (!stored_content.length) {
+		      stored_content = this.children(".te_stored_content:last-child");
+		    }
+        stored_content.children().insertBefore(stored_content).end().end().remove();
+		  });
+		},
 		previous: function() {
 			navigateInGroup(-1);
 		},

assets/releases/1.6.9/1. Single links/1. TopUp classes.html

@@ -0,0 +1,48 @@
+<html>
+  <head>
+    <title>Single links - Using TopUp classes</title>
+    <link rel="stylesheet" type="text/css" href="../stylesheets/style.css"/>
+    <link rel="stylesheet" type="text/css" href="../stylesheets/example.css"/>
+    <script type="text/javascript" src="http://gettopup.com/releases/latest/top_up-min.js"></script>
+  </head>
+  <body>
+	<div id="page_background"></div>
+	  <div id="page_wrapper">
+	    <div id="page_header" onclick="document.location.href = 'http://gettopup.com'">
+	      <h2>TopUp</h2>
+        <h1>The #1 Javascript Pop Up made by Paul Engel</h1>
+      </div>
+	    <div id="page_content">
+  <div id="description">
+    <h2>TopUp classes</h2>
+    <p>
+      You can implement TopUp just by adding a TopUp class to a HTML element.
+      There are multiple TopUp classes of which you can choose from.
+    </p>
+    <p>
+      For TopUp with default settings, just use 'top_up'.
+      You can also compose the TopUp class which specifies certain TopUp settings.
+    </p>
+    <p>
+      When composing you can specify:
+    </p>
+    <ol>
+      <li>the layout ('db' for dashboard, 'ql' for quicklook, 'fl' for flatlook)</li>
+      <li>the type (see <a href="http://gettopup.com/documentation">documentation</a>)</li>
+      <li>the dimensions (width'x'height)</li>
+    </ol>
+    <p>
+      The composed TopUp class has to begin with 'tu_' followed by the settings joined with underscores.<br>
+      As an example, use 'tu_ql_iframe' for a TopUp with the 'quicklook' layout and the 'iframe' type.
+    </p>
+  </div>
+  <h2>Demo</h2>
+  <div id="demo">
+    <a href="photos/1.jpg" class="top_up"><img src="thumbnails/1.jpg"/></a>
+    <a href="photos/2.jpg" class="tu_ql"><img src="thumbnails/2.jpg"/></a>
+    <a href="http://www.google.nl" class="tu_iframe_800x600">Open Google</a>
+  </div>
+      </div>
+    </div>
+  </body>
+</html>

assets/releases/1.6.9/1. Single links/2. TopUp preset.html

@@ -0,0 +1,48 @@
+<html>
+  <head>
+    <title>Single links - Using a TopUp preset</title>
+    <link rel="stylesheet" type="text/css" href="../stylesheets/style.css"/>
+    <link rel="stylesheet" type="text/css" href="../stylesheets/example.css"/>
+    <script type="text/javascript" src="http://gettopup.com/releases/latest/top_up-min.js"></script>
+  </head>
+  <body>
+	<div id="page_background"></div>
+	  <div id="page_wrapper">
+	    <div id="page_header" onclick="document.location.href = 'http://gettopup.com'">
+	      <h2>TopUp</h2>
+        <h1>The #1 Javascript Pop Up made by Paul Engel</h1>
+      </div>
+	    <div id="page_content">
+  <div id="description">
+    <h2>TopUp preset</h2>
+    <p>
+      Specifying a TopUp preset is just like specifying style attributes to a CSS selector in your stylesheet.
+      The great advantage of using presets is that it provides you to keep your HTML <strong>entirely(!)</strong> clean.
+    </p>
+    <p>
+      Just call <code>TopUp.addPresets()</code> with a hash as parameter.<br>
+      The key of each entry has to be a CSS selector and the value has to be a hash of toptions.
+    </p>
+  </div>
+  <h2>Demo</h2>
+  <div id="demo">
+    <div id="examples">
+      <a href="photos/1.jpg"><img src="thumbnails/1.jpg"/></a>
+      <a href="photos/2.jpg"><img src="thumbnails/2.jpg"/></a>
+      <input type="button" value="Open Google" href="http://www.google.nl" class="tu_iframe_800x600"/>
+    </div>
+    <script type="text/javascript">
+      TopUp.addPresets({
+        "#examples a": {
+          effect: "clip"
+        },
+        "#examples input": {
+          shaded: 1, effect: "fade", overlayClose: 1
+        }
+      });
+    </script>
+  </div>
+      </div>
+    </div>
+  </body>
+</html>

assets/releases/1.6.9/1. Single links/3. Toptions.html

@@ -0,0 +1,35 @@
+<html>
+  <head>
+    <title>Single links - Using Toptions</title>
+    <link rel="stylesheet" type="text/css" href="../stylesheets/style.css"/>
+    <link rel="stylesheet" type="text/css" href="../stylesheets/example.css"/>
+    <script type="text/javascript" src="http://gettopup.com/releases/latest/top_up-min.js"></script>
+  </head>
+  <body>
+	<div id="page_background"></div>
+	  <div id="page_wrapper">
+	    <div id="page_header" onclick="document.location.href = 'http://gettopup.com'">
+	      <h2>TopUp</h2>
+        <h1>The #1 Javascript Pop Up made by Paul Engel</h1>
+      </div>
+	    <div id="page_content">
+  <div id="description">
+    <h2>Toptions</h2>
+    <p>
+      Other than TopUp classes or presets, you can also use plain old options to customize your TopUp element (so called toptions).
+    </p>
+    <p>
+      Just add the <code>toptions</code> attribute to your TopUp element.<br>
+      A toption is specified as "[name] = [value]", use the comma (",") as a seperator between toptions.
+    </p>
+  </div>
+  <h2>Demo</h2>
+  <div id="demo">
+    <a href="photos/1.jpg" toptions="effect = clip"><img src="thumbnails/1.jpg"/></a>
+    <a href="photos/2.jpg" toptions="shaded = 1"><img src="thumbnails/2.jpg"/></a>
+    <input type="button" value="Open Google" href="http://www.google.nl" toptions="type = iframe, effect = fade, width = 800, height = 600, overlayClose = 1"/>
+  </div>
+      </div>
+    </div>
+  </body>
+</html>

assets/releases/1.6.9/1. Single links/README

@@ -0,0 +1,2 @@
+This is the simplest type of all TopUp implementations.
+A single HTML element (in most cases a link) refers to a certain location which will be presented by the TopUp module when clicked on that element.

assets/releases/1.6.9/2. Grouped links/1. TopUp preset.html

@@ -0,0 +1,51 @@
+<html>
+  <head>
+    <title>Grouped links - Using a TopUp preset</title>
+    <link rel="stylesheet" type="text/css" href="../stylesheets/style.css"/>
+    <link rel="stylesheet" type="text/css" href="../stylesheets/example.css"/>
+    <script type="text/javascript" src="http://gettopup.com/releases/latest/top_up-min.js"></script>
+  </head>
+  <body>
+	<div id="page_background"></div>
+	  <div id="page_wrapper">
+	    <div id="page_header" onclick="document.location.href = 'http://gettopup.com'">
+	      <h2>TopUp</h2>
+        <h1>The #1 Javascript Pop Up made by Paul Engel</h1>
+      </div>
+	    <div id="page_content">
+  <div id="description">
+    <h2>TopUp preset</h2>
+    <p>
+      Specifying a TopUp preset is just like specifying style attributes to a CSS selector in your stylesheet.
+      The great advantage of using presets is that it provides you to keep your HTML <strong>entirely(!)</strong> clean.
+    </p>
+    <p>
+      Just call <code>TopUp.addPresets()</code> with a hash as parameter.<br>
+      The key of each entry has to be a CSS selector and the value has to be a hash of toptions.
+    </p>
+    <p>
+      So for grouping links, just specify <code>group: [name]</code> in the preset.
+    </p>
+  </div>
+  <h2>Demo</h2>
+  <div id="demo">
+    <div id="examples">
+      <a href="photos/by-ben-adamson.jpg"><img src="thumbnails/by-ben-adamson.jpg"/></a>
+      <a href="photos/2.jpg"><img src="thumbnails/2.jpg"/></a>
+      <a href="photos/3.jpg"><img alt="At Sunset" src="thumbnails/3.jpg"/></a>
+    </div>
+    <script type="text/javascript">
+      TopUp.addPresets({
+        "#examples a": {
+          title: "Gallery {alt} ({current} of {total})",
+          group: "examples",
+          readAltText: 1,
+          shaded: 1
+        }
+      });
+    </script>
+      </div>
+    </div>
+  </div>
+  </body>
+</html>

assets/releases/1.6.9/2. Grouped links/2. Toptions.html

@@ -0,0 +1,31 @@
+<html>
+  <head>
+    <title>Single links - Using Toptions</title>
+    <link rel="stylesheet" type="text/css" href="../stylesheets/style.css"/>
+    <link rel="stylesheet" type="text/css" href="../stylesheets/example.css"/>
+    <script type="text/javascript" src="http://gettopup.com/releases/latest/top_up-min.js"></script>
+  </head>
+  <body>
+	<div id="page_background"></div>
+	  <div id="page_wrapper">
+	    <div id="page_header" onclick="document.location.href = 'http://gettopup.com'">
+	      <h2>TopUp</h2>
+        <h1>The #1 Javascript Pop Up made by Paul Engel</h1>
+      </div>
+	    <div id="page_content">
+  <div id="description">
+    <h2>Toptions</h2>
+    <p>
+      Just add a <code>toptions</code> attribute with "group = [name]" to your TopUp elements.
+    </p>
+  </div>
+  <h2>Demo</h2>
+  <div id="demo">
+    <a href="photos/by-ben-adamson.jpg" toptions="group = links, effect = clip"><img src="thumbnails/by-ben-adamson.jpg"/></a>
+    <a href="http://smashingmagazine.com" toptions="group = links, shaded = 1, type = iframe, effect = fade, width = 1010, height = 600, layout = quicklook">Smashing Magazine</a>
+    <input type="button" value="Open Google" href="http://www.google.nl" toptions="group = links, type = iframe, effect = fade, width = 900, height = 475, overlayClose = 1, layout = quicklook"/>
+  </div>
+      </div>
+    </div>
+  </body>
+</html>

assets/releases/1.6.9/2. Grouped links/README

@@ -0,0 +1,2 @@
+TopUp offers you to group links together so you can navigate between them in the TopUp.
+In most cases the group feature is used for image galleries, but TopUp provides you the ability to group ANY type of links together.