some fixes and added a basic 'online' configuration demo (last article)...

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

index.html

@@ -14,6 +14,8 @@
 
 <script>
 
+var DEBUG = true
+
 $(document).ready(function(){
 
 	if(DEBUG){
@@ -344,6 +346,57 @@ $(document).ready(function(){
 				</div>
 			</div>
 		</div>
+		<div class="article">
+			<div class="cover page">
+				<div class="content">
+					<h1>Configuration demo</h1>
+
+					<div>
+						Pages in ribbon: <input id="PAGES_IN_RIBBON" type="text"><button onclick="saveSettings()">save</button>
+					</div>
+					<div>
+						Fit page to view: <button id="FIT_PAGE_TO_VIEW" onclick="toggleSetting(this)"></button>
+					</div>
+					<div>
+						Animate window resize: <button id="ANIMATE_WINDOW_RESIZE" onclick="toggleSetting(this)"></button>
+					</div>
+					<div>
+						Drag in full page view: <button id="DRAG_FULL_PAGE" onclick="toggleSetting(this)"></button>
+					</div>
+
+					<div style="position:absolute; width:100%; bottom:10px; text-align: right;">
+						<a href="#home">magazine cover...</a><br>
+					</div>
+
+					<script>
+
+					function saveSettings(){
+						var v = parseInt($('#PAGES_IN_RIBBON').attr('value'))
+						PAGES_IN_RIBBON = v == null ? PAGES_IN_RIBBON : v
+						FIT_PAGE_TO_VIEW = $('#FIT_PAGE_TO_VIEW').text() == 'true' ? true : false
+						ANIMATE_WINDOW_RESIZE = $('#ANIMATE_WINDOW_RESIZE').text() == 'true' ? true : false
+						DRAG_FULL_PAGE = $('#DRAG_FULL_PAGE').text() == 'true' ? true : false
+					}
+					function loadSettings(){
+						$('#PAGES_IN_RIBBON').attr('value', PAGES_IN_RIBBON)
+						$('#FIT_PAGE_TO_VIEW').text(FIT_PAGE_TO_VIEW)
+						$('#ANIMATE_WINDOW_RESIZE').text(ANIMATE_WINDOW_RESIZE)
+						$('#DRAG_FULL_PAGE').text(DRAG_FULL_PAGE)
+					}
+					function toggleSetting(obj){
+						obj = $(obj)
+						obj.text() == 'true' ? obj.text('false') : obj.text('true')
+						saveSettings()
+						updateView()	
+					}
+
+
+					loadSettings()
+
+					</script>
+				</div>
+			</div>
+		</div>
 	</div>
 </div>
 </div>
@@ -352,3 +405,4 @@ $(document).ready(function(){
 
 </body>
 </html>
+<!-- vim:set ts=4 sw=4 nowrap : -->

jli.js

@@ -7,7 +7,7 @@
 * looks...
 **********************************************************************/
 
-var DEBUG = true
+//var DEBUG = DEBUG != null ? DEBUG : true
 
 
 /*********************************************************************/

magazine.js

@@ -1,17 +1,20 @@
 /**********************************************************************
 **********************************************************************/
 
-var DEBUG = true
+//var DEBUG = DEBUG != null ? DEBUG : true
 
 // number of pages to display in ribbon...
 var PAGES_IN_RIBBON = 6
 
 // if true, expand a page to fit the whole view in single page mode...
-var FIT_PAGE_TO_VIEW = false
+var FIT_PAGE_TO_VIEW = true
 
 // if true will make page resizes after window resize animated...
 var ANIMATE_WINDOW_RESIZE = true
 
+// if true will disable page dragging in single page mode...
+var DRAG_FULL_PAGE = false
+
 
 
 /*********************************************************************/
@@ -31,7 +34,7 @@ togglePageView = createCSSClassToggler(
 	// post-change callback...
 	function(action){
 		if(action == 'on'){
-			fitNPages(1)
+			fitNPages(1, !FIT_PAGE_TO_VIEW)
 		} else {
 			fitNPages(PAGES_IN_RIBBON)
 		}
@@ -63,6 +66,8 @@ function getPageNumber(page){
 
 /************************************************** event handlers ***/
 
+// swipe state handler
+// this handles single and double finger swipes and dragging
 function swipeHandler(evt, phase, direction, distance, duration, fingers){
 	var pages = $('.page')
 	var cur = $('.current.page')
@@ -70,7 +75,11 @@ function swipeHandler(evt, phase, direction, distance, duration, fingers){
 	var scale = getPageScale()
 	var mag = $('.magazine')
 
-	if(phase=='move' && (direction=='left' || direction=='right')){
+	if(phase=='move' 
+			// see if wee need to drag the page and allways drag the ribbon...
+			&& (DRAG_FULL_PAGE || togglePageView('?') == 'off')
+			&& (direction=='left' || direction=='right')){
+		// using the "unanimated" trick we will make the drag real-time...
 		mag.addClass('unanimated')
 		if(direction == 'left'){
 			$('.magazine').css({left: -n*cur.width()-distance/scale})