added transition duration configuration to index.html and basic manupulation helper to jli.js

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

TODO.otl

@@ -1,11 +1,11 @@
-[_] 36% Priority work
+[_] 37% Priority work
 	[_] 0% TouchSwipe issues...
 		[_] BUG: swipe-back does not cancel a swipe... (TouchSwipe)
 		| ...unless the finger is return to within the threshold of the 
 		| touchdown point.
 		[_] BUG: no drag threshold on excludedElements (TouchSwipe)
 		| stalled...
-	[_] 63% general todo
+	[_] 66% general todo
 		[_] 50% move some of the current configuration options to the magazine...
 			[X] page align
 			[_] resize settings (.no-resize class)
@@ -21,8 +21,6 @@
 		[_] add default empty state to viewer, magazine and article...
 		| use it to trigger a "New Magazine", "New Cover"/"New Article" and
 		| "New Cover"/"New Page" actions...
-		[_] add transition-duration editors to config page (a-la PAGES_IN_RIBBON)...
-		| will help tuning the system,,,
 		[_] EXPERIMENT: Try using scroll instead of left of .magazine....
 		| this might improve speed...
 		[_] JSON: add page URLs as an alternative to direct content...
@@ -82,6 +80,8 @@
 		[_] 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...
+		[X] add transition-duration editors to config page (a-la PAGES_IN_RIBBON)...
+		| will help tuning the system,,,
 		[X] BUG: jquery does not set background to none on detached elements...
 		| use transparent instead!!
 		[X] 100% add page sets..

index.html

@@ -647,6 +647,16 @@ $(document).ready(function(){
 								<button onclick="$('#PAGES_IN_RIBBON').attr('value', parseFloat($('#PAGES_IN_RIBBON').attr('value'))-0.5); saveSettings()">-</button>
 							</td>
 						</tr>
+						<tr>
+							<td>
+								Transition duration: 
+							</td>
+							<td>
+								<input id="transition_duration" type="text" size="8" style="text-align:center" disabled>
+								<button onclick="$('#transition_duration').attr('value', parseInt($('#transition_duration').attr('value'))*2); saveSettings()">+</button>
+								<button onclick="$('#transition_duration').attr('value', parseInt($('#transition_duration').attr('value'))/2); saveSettings()">-</button>
+							</td>
+						</tr>
 						<tr>
 							<td>
 								Fit page to view: 
@@ -715,7 +725,7 @@ $(document).ready(function(){
 
 					<hr noshade color="silver">
 
-					<table class="settings" width="100%">
+					<table class="settings" width="100%" style="font-size:small">
 						<tr>
 							<td width="50%">
 								Fingers supported: 
@@ -745,6 +755,9 @@ $(document).ready(function(){
 					</div>
 
 					<script>
+
+					var TRANSITION_DURATION = 100
+
 					var toggleViewerAnimation = function(){
 						var toggler = createCSSClassToggler(
 							// XXX this will turn off magazine animations...
@@ -775,6 +788,16 @@ $(document).ready(function(){
 						// we need to reset the visible value in case it was wrong...
 						$('#PAGES_IN_RIBBON').attr('value', PAGES_IN_RIBBON)
 
+						// transition duration...
+						var t = parseInt($('#transition_duration').attr('value'))
+						t = t == null ? TRANSITION_DURATION : t
+						t = t < 25 ? 25 : t
+						console.log(t)
+						TRANSITION_DURATION = t
+						setTransitionDuration($('.scaler'), t)
+						setTransitionDuration($('.magazine'), t)
+
+
 						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
@@ -783,6 +806,7 @@ $(document).ready(function(){
 						FULL_HISTORY_ENABLED = $('#FULL_HISTORY_ENABLED').text() == 'true' ? true : false
 					}
 					function loadSettings(){
+						$('#transition_duration').attr('value', TRANSITION_DURATION)
 						$('#PAGES_IN_RIBBON').attr('value', PAGES_IN_RIBBON)
 						$('#FIT_PAGE_TO_VIEW').text(FIT_PAGE_TO_VIEW)
 						$('#ANIMATE_WINDOW_RESIZE').text(ANIMATE_WINDOW_RESIZE)

lib/jli.js

@@ -160,6 +160,20 @@ function setElementScale(elem, scale){
 }
 
 
+function setTransitionDuration(elem, ms){
+	if(typeof(ms) == typeof(0)){
+		ms = ms + 'ms'
+	}
+	return elem.css({
+		'transition-duration': ms, 
+		'-moz-transition-duration': ms,
+		'-o-transition-duration': ms,
+		'-ms-transition-duration': ms,
+		'-webkit-transition-duration': ms
+	})
+}
+
+
 
 /************************************************* keyboard handler **/
 

magazine.css

@@ -156,11 +156,11 @@ body {
 	-ms-transform: scale(1);	
 	transform: scale(1);
 
-	-webkit-transition: all 0.2s ease;
+	-webkit-transition: all 0.1s ease;
-	-moz-transition: all 0.2s ease;
+	-moz-transition: all 0.1s ease;
-	-o-transition: all 0.2s ease;
+	-o-transition: all 0.1s ease;
-	-ms-transition: all 0.2s ease;	
+	-ms-transition: all 0.1s ease;	
-	transition: all 0.2s ease;
+	transition: all 0.1s ease;
 }
 /* element used to center and align the magazine... */
 .aligner {
@@ -186,11 +186,11 @@ body {
 	/* XXX change to relative units... */
 	margin-left: -400px;
 
-	-webkit-transition: all 0.2s ease;
+	-webkit-transition: all 0.1s ease;
-	-moz-transition: all 0.2s ease;
+	-moz-transition: all 0.1s ease;
-	-o-transition: all 0.2s ease;
+	-o-transition: all 0.1s ease;
-	-ms-transition: all 0.2s ease;	
+	-ms-transition: all 0.1s ease;	
-	transition: all 0.2s ease;
+	transition: all 0.1s ease;
 }
 /* XXX does not appear to work... (likely because :before/:after mess things up) */
 .magazine:empty {
@@ -376,11 +376,11 @@ body {
 
 	opacity: 0.7;
 
-	-webkit-transition: all 0.2s ease;
+	-webkit-transition: all 0.1s ease;
-	-moz-transition: all 0.2s ease;
+	-moz-transition: all 0.1s ease;
-	-o-transition: all 0.2s ease;
+	-o-transition: all 0.1s ease;
-	-ms-transition: all 0.2s ease;	
+	-ms-transition: all 0.1s ease;	
-	transition: all 0.2s ease;
+	transition: all 0.1s ease;
 }
 
 .dragging .navigator .bar .indicator {

magazine.js

@@ -415,7 +415,6 @@ function fitNPages(n, fit_to_content){
 	if(!USE_REAL_PAGE_SIZES && fit_to_content){
 		var offset = rW * getPageNumber()-1
 	} else {
-		console.log('slow...')
 		// calculate the target offset...
 		if(USE_REAL_PAGE_SIZES){
 			var rpages = $('.page:not(.no-resize), .current.page')