made #URLs updates optional (still some work to be done with history) + reorganized the generic lib structure..

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>

TODO.otl

@@ -5,15 +5,15 @@
 		| touchdown point.
 		[_] BUG: no drag threshold on excludedElements (TouchSwipe)
 		| stalled...
-	[_] 66% general todo
+	[_] 67% general todo
 		[_] move some of the current configuration options to the magazine...
+		| same idea as .no-resize class...
 		[_] add option to align page to right or left screen border
 		| now only centering is possible...
 		[_] add transition-duration editors to config page (a-la PAGES_IN_RIBBON)...
 		| will help tuning the system,,,
 		[_] add toggleEditiorMode to all editable in all versions...
 		| text areas, inputs, ...
-		[_] make #URL updates optional...
 		[_] Try using scroll instead of left of .magazine....
 		| this might improve speed...
 		[_] BUG: as on android before, on loading from json view does not reach cur page...
@@ -68,6 +68,9 @@
 		[_] BUG: href to existing anchors will mess up layout...
 		| need to find out how can we disable anchor links from actually
 		| going to the anchor...
+		[_] BUG: when #URL updates are off layer toggling breaks...
+		| will show but not hide layers...
+		[X] make #URL updates optional...
 		[X] add click current page to full page view...
 		[X] 100% templates
 			[X] page number

ext-lib/jquery.scrollto.js

@@ -0,0 +1,225 @@
+/**
+ * @depends jquery
+ * @name jquery.scrollto
+ * @package jquery-scrollto {@link http://balupton.com/projects/jquery-scrollto}
+ */
+
+/**
+ * jQuery Aliaser
+ */
+(function(window,undefined){
+	// Prepare
+	var jQuery, $, ScrollTo;
+	jQuery = $ = window.jQuery;
+
+	/**
+	 * jQuery ScrollTo (balupton edition)
+	 * @version 1.2.0
+	 * @date July 9, 2012
+	 * @since 0.1.0, August 27, 2010
+	 * @package jquery-scrollto {@link http://balupton.com/projects/jquery-scrollto}
+	 * @author Benjamin "balupton" Lupton {@link http://balupton.com}
+	 * @copyright (c) 2010 Benjamin Arthur Lupton {@link http://balupton.com}
+	 * @license MIT License {@link http://creativecommons.org/licenses/MIT/}
+	 */
+	ScrollTo = $.ScrollTo = $.ScrollTo || {
+		/**
+		 * The Default Configuration
+		 */
+		config: {
+			duration: 400,
+			easing: 'swing',
+			callback: undefined,
+			durationMode: 'each',
+			offsetTop: 0,
+			offsetLeft: 0
+		},
+
+		/**
+		 * Configure ScrollTo
+		 */
+		configure: function(options){
+			// Apply Options to Config
+			$.extend(ScrollTo.config, options||{});
+
+			// Chain
+			return this;
+		},
+
+		/**
+		 * Perform the Scroll Animation for the Collections
+		 * We use $inline here, so we can determine the actual offset start for each overflow:scroll item
+		 * Each collection is for each overflow:scroll item
+		 */
+		scroll: function(collections, config){
+			// Prepare
+			var collection, $container, container, $target, $inline, position,
+				containerScrollTop, containerScrollLeft,
+				containerScrollTopEnd, containerScrollLeftEnd,
+				startOffsetTop, targetOffsetTop, targetOffsetTopAdjusted,
+				startOffsetLeft, targetOffsetLeft, targetOffsetLeftAdjusted,
+				scrollOptions,
+				callback;
+
+			// Determine the Scroll
+			collection = collections.pop();
+			$container = collection.$container;
+			container = $container.get(0);
+			$target = collection.$target;
+
+			// Prepare the Inline Element of the Container
+			$inline = $('<span/>').css({
+				'position': 'absolute',
+				'top': '0px',
+				'left': '0px'
+			});
+			position = $container.css('position');
+
+			// Insert the Inline Element of the Container
+			$container.css('position','relative');
+			$inline.appendTo($container);
+
+			// Determine the top offset
+			startOffsetTop = $inline.offset().top;
+			targetOffsetTop = $target.offset().top;
+			targetOffsetTopAdjusted = targetOffsetTop - startOffsetTop - parseInt(config.offsetTop,10);
+
+			// Determine the left offset
+			startOffsetLeft = $inline.offset().left;
+			targetOffsetLeft = $target.offset().left;
+			targetOffsetLeftAdjusted = targetOffsetLeft - startOffsetLeft - parseInt(config.offsetLeft,10);
+
+			// Determine current scroll positions
+			containerScrollTop = container.scrollTop;
+			containerScrollLeft = container.scrollLeft;
+
+			// Reset the Inline Element of the Container
+			$inline.remove();
+			$container.css('position',position);
+
+			// Prepare the scroll options
+			scrollOptions = {};
+
+			// Prepare the callback
+			callback = function(event){
+				// Check
+				if ( collections.length === 0 ) {
+					// Callback
+					if ( typeof config.callback === 'function' ) {
+						config.callback.apply(this,[event]);
+					}
+				}
+				else {
+					// Recurse
+					ScrollTo.scroll(collections,config);
+				}
+				// Return true
+				return true;
+			};
+
+			// Handle if we only want to scroll if we are outside the viewport
+			if ( config.onlyIfOutside ) {
+				// Determine current scroll positions
+				containerScrollTopEnd = containerScrollTop + $container.height();
+				containerScrollLeftEnd = containerScrollLeft + $container.width();
+
+				// Check if we are in the range of the visible area of the container
+				if ( containerScrollTop < targetOffsetTopAdjusted && targetOffsetTopAdjusted < containerScrollTopEnd ) {
+					targetOffsetTopAdjusted = containerScrollTop;
+				}
+				if ( containerScrollLeft < targetOffsetLeftAdjusted && targetOffsetLeftAdjusted < containerScrollLeftEnd ) {
+					targetOffsetLeftAdjusted = containerScrollLeft;
+				}
+			}
+
+			// Determine the scroll options
+			if ( targetOffsetTopAdjusted !== containerScrollTop ) {
+				scrollOptions.scrollTop = targetOffsetTopAdjusted;
+			}
+			if ( targetOffsetLeftAdjusted !== containerScrollLeft ) {
+				scrollOptions.scrollLeft = targetOffsetLeftAdjusted;
+			}
+
+			// Perform the scroll
+			if ( $.browser.safari && container === document.body ) {
+				window.scrollTo(scrollOptions.scrollLeft, scrollOptions.scrollTop);
+				callback();
+			}
+			else if ( scrollOptions.scrollTop || scrollOptions.scrollLeft ) {
+				$container.animate(scrollOptions, config.duration, config.easing, callback);
+			}
+			else {
+				callback();
+			}
+
+			// Return true
+			return true;
+		},
+
+		/**
+		 * ScrollTo the Element using the Options
+		 */
+		fn: function(options){
+			// Prepare
+			var collections, config, $container, container;
+			collections = [];
+
+			// Prepare
+			var	$target = $(this);
+			if ( $target.length === 0 ) {
+				// Chain
+				return this;
+			}
+
+			// Handle Options
+			config = $.extend({},ScrollTo.config,options);
+
+			// Fetch
+			$container = $target.parent();
+			container = $container.get(0);
+
+			// Cycle through the containers
+			while ( ($container.length === 1) && (container !== document.body) && (container !== document) ) {
+				// Check Container for scroll differences
+				var scrollTop, scrollLeft;
+				scrollTop = $container.css('overflow-y') !== 'visible' && container.scrollHeight !== container.clientHeight;
+				scrollLeft =  $container.css('overflow-x') !== 'visible' && container.scrollWidth !== container.clientWidth;
+				if ( scrollTop || scrollLeft ) {
+					// Push the Collection
+					collections.push({
+						'$container': $container,
+						'$target': $target
+					});
+					// Update the Target
+					$target = $container;
+				}
+				// Update the Container
+				$container = $container.parent();
+				container = $container.get(0);
+			}
+
+			// Add the final collection
+			collections.push({
+				'$container': $(
+					($.browser.msie || $.browser.mozilla) ? 'html' : 'body'
+				),
+				'$target': $target
+			});
+
+			// Adjust the Config
+			if ( config.durationMode === 'all' ) {
+				config.duration /= collections.length;
+			}
+
+			// Handle
+			ScrollTo.scroll(collections,config);
+
+			// Chain
+			return this;
+		}
+	};
+
+	// Apply our jQuery Prototype Function
+	$.fn.ScrollTo = $.ScrollTo.fn;
+
+})(window);

index.html

@@ -7,11 +7,18 @@
 <link rel="stylesheet" href="magazine.css">
 <link rel="stylesheet" href="magazine-custom.css">
 
-<script src="jquery.js"></script>
+<script src="ext-lib/jquery.js"></script>
-<script src="jquery.touchSwipe.js"></script>
+<script src="ext-lib/jquery.touchSwipe.js"></script>
-<script src="jstorage.js"></script>
+<script src="ext-lib/jstorage.js"></script>
+<!-- EXPERIMENTAL -->
+<!-- 
+XXX scrollTo is a cool and a powerfull tool but it needs a sustantial code reorganization 
+	this might be a good idea/exersize sometime in the future...
+-->
+<!--script src="ext-lib/jquery.scrollto.js"></script-->
+
+<script src="lib/jli.js"></script>
 
-<script src="jli.js"></script>
 <script src="magazine.js"></script>
 <script src="navigator.js"></script>
 <!--script src="editor.js"></script-->
@@ -653,6 +660,14 @@ $(document).ready(function(){
 								<button id="USE_REAL_PAGE_SIZES" onclick="toggleSetting(this)"></button>
 							</td>
 						</tr>
+						<tr>
+							<td>
+								Enable #URL updating on page flip: 
+							</td>
+							<td>
+								<button id="UPDATE_HASH_URL_POSITION" onclick="toggleSetting(this)"></button>
+							</td>
+						</tr>
 						<tr>
 							<td>
 								Reset stored data:
@@ -722,6 +737,7 @@ $(document).ready(function(){
 						ANIMATE_WINDOW_RESIZE = $('#ANIMATE_WINDOW_RESIZE').text() == 'true' ? true : false
 						DRAG_FULL_PAGE = $('#DRAG_FULL_PAGE').text() == 'true' ? true : false
 						USE_REAL_PAGE_SIZES = $('#USE_REAL_PAGE_SIZES').text() == 'true' ? true : false
+						UPDATE_HASH_URL_POSITION = $('#UPDATE_HASH_URL_POSITION').text() == 'true' ? true : false
 					}
 					function loadSettings(){
 						$('#PAGES_IN_RIBBON').attr('value', PAGES_IN_RIBBON)
@@ -729,6 +745,7 @@ $(document).ready(function(){
 						$('#ANIMATE_WINDOW_RESIZE').text(ANIMATE_WINDOW_RESIZE)
 						$('#DRAG_FULL_PAGE').text(DRAG_FULL_PAGE)
 						$('#USE_REAL_PAGE_SIZES').text(USE_REAL_PAGE_SIZES)
+						$('#UPDATE_HASH_URL_POSITION').text(UPDATE_HASH_URL_POSITION)
 
 						$('#FingersSupported').text($.fn.swipe.fingers.ALL)
 						var b = $('#BrowserInfo')

magazine.js

@@ -28,6 +28,11 @@ var DRAG_FULL_PAGE = true
 //var USE_REAL_PAGE_SIZES = true
 var USE_REAL_PAGE_SIZES = false
 
+// if true this will make each page flip update the hash url...
+// if false, only direct linking will update the url.
+// XXX this if false, will break the layer hide/show toggle...
+var UPDATE_HASH_URL_POSITION = true
+
 
 
 /*********************************************************** modes ***/
@@ -584,6 +589,14 @@ function prevBookmark(){
 // 			$('[title="<magazine>"] [name="<name>"]')
 // XXX BUG: if the hash url part coresponds to a real anchor the browser 
 // 		shifts the page, need to disable this...
+var RELATIVE_URLS = [
+	'back', 'forward',
+	'next', 'prev',
+	'nextArticle', 'prevArticle',
+	'nextBookmark', 'prevBookmark',
+	'bookmark',
+	'hideLayers'
+]
 // URL state managers...
 function loadURLState(){
 	if(window.location.hash == ''){
@@ -593,9 +606,15 @@ function loadURLState(){
 	var n = parseInt(anchor)
 	if(typeof(n) == typeof(1) && n >= 0){
 		return n
+	}
+
+	// for relative #URLs remove them from hash...
+	if(RELATIVE_URLS.indexOf(anchor) >= 0 && !UPDATE_HASH_URL_POSITION){
+		window.location.hash = ''
+	}
 
 	// XXX add real external aliases...
-	} else if(anchor == 'thumbnails') {
+	if(anchor == 'thumbnails') {
 		togglePageView('off')
 		return getPageNumber()
 
@@ -684,7 +703,9 @@ function saveURLState(){
 			return anchor
 		}
 	}
+	if(UPDATE_HASH_URL_POSITION){
 		window.location.hash = n
+	}
 	return n
 }