From 82d441db264febabee791648a426dc84963454f4 Mon Sep 17 00:00:00 2001
From: "Alex A. Naanou" <alex.nanou@gmail.com>
Date: Wed, 18 May 2016 20:23:31 +0300
Subject: [PATCH] started playing with iScroll as an alternative to native and
 main scroller for FF...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
---
 .../experiments/native-scroll-ribbon.html     | 157 +++++++++++++++---
 ui (gen4)/lib/util.js                         |  26 +++
 2 files changed, 160 insertions(+), 23 deletions(-)
diff --git a/ui (gen4)/experiments/native-scroll-ribbon.html b/ui (gen4)/experiments/native-scroll-ribbon.html
index 560c88bc..710c2ada 100755
--- a/ui (gen4)/experiments/native-scroll-ribbon.html	
+++ b/ui (gen4)/experiments/native-scroll-ribbon.html	
@@ -1,11 +1,41 @@
 <!DOCTYPE html>
 <html>
 <style>
+// mark the center...
+[mark-center]:before {
+	position: absolute;
+	display: block;
+	content: "";
+	width: 5px;
+	height: 5px;
+	right: 50%;
+	bottom: 50%;
+	border-right: solid 2px attr(mark-center);
+	border-bottom: solid 2px attr(mark-center);
+	margin-bottom: -1px;
+	margin-right: -1px;
+}
+[mark-center]:after {
+	position: absolute;
+	display: block;
+	content: "";
+	width: 5px;
+	height: 5px;
+	left: 50%;
+	top: 50%;
+	border-left: solid 2px attr(mark-center);
+	border-top: solid 2px attr(mark-center);
+	margin-left: -1px;
+	margin-top: -1px;
+}
+
+
 /* XXX appears that there is no way to hide the scrollbar on FF...
 *	...one way around this is to use something like iScroll/Scrolly
 *	on FF or where more control is needed...
 */
 .viewer {
+	position: relative;
 	display: inline-block;
 	border: solid 1px gray;
 
@@ -13,18 +43,30 @@
 	height: 500px;
 
 	overflow: hidden;
+}
+
+.scaler {
+	position: relative;
+	width: 100%;
+	height: 100%;
+
+	top: 50%;
+	left: 50%;
+	margin-top: -50%;
+	margin-left: -50%;
+
+	transform-origin: 50% 50%;
 
 	overflow-x: hidden;
 	overflow-y: scroll;
 
 	-ms-overflow-style: none;
 }
-.viewer::-webkit-scrollbar { 
+.scaler::-webkit-scrollbar { 
     display: none; 
 }
 
 
-
 /* This is to be used for:
 *	- vrtical positioning
 *	- scaling
@@ -41,13 +83,6 @@
 
 	padding-top: 50%;
 	padding-bottom: 50%;
-
-	margin-left: -50%;
-	left: 50%;
-
-
-	transform-origin: 50% 50%;
-	/*transform: scale(0.5);*/
 }
 
 
@@ -98,50 +133,126 @@
 
 <script src="../ext-lib/velocity.min.js"></script>
 
+<script src="../ext-lib/iscroll.js"></script>
+<script src="../ext-lib/iscroll-zoom.js"></script>
+
 <script src="../lib/jli.js"></script>
 
 <script>
 
+// XXX when setting origin at scales different from 1, we'll need to 
+//	adjust offset to compensate for the shift... 
+// XXX one other simplification might be adding a new element specifically
+//	dedicated to scaling...
+var centerOrigin = function(){
+	var H = $('.viewer').height()
+	var s = $('.viewer')[0].scrollTop
+
+	$('.ribbon-set').css({
+		'transform-origin': '50% '+ (s + H/2) +'px'
+	})
+}
+
 // XXX these accumolate errors...
 var zoomIn = function(c){
 	c = c || 1.2
-	$('.ribbon-set')
+	$('.scaler')
 		.velocity('stop')
-		.css({
-		})
 		.velocity({
 			scale: '*='+c,
 			width: '/='+c,
+			height: '/='+c,
 			'margin-left': '/='+c,
+			'margin-top': '/='+c,
 		}, 300)
 }
 var zoomOut = function(c){
 	c = c || 1.2
-	$('.ribbon-set')
+	$('.scaler')
 		.velocity('stop')
 		.velocity({
 			scale: '/='+c,
 			width: '*='+c,
+			height: '*='+c,
 			'margin-left': '*='+c,
+			'margin-top': '*='+c,
 		}, 300)
 }
 
+
+var ISCROLL = false
+
+
+$(function(){
+	var H = $('.viewer').height()
+	var W = $('.viewer').width()
+
+	// set margins to be parant and not content dependant...
+	$('.scaler')
+		.velocity({
+			'margin-left': -W/2,
+			'margin-top': -H/2,
+		}, 0)
+
+
+if(ISCROLL){
+	// setup iScroll...
+	$('.scaler').css({
+		overflow: 'hidden',
+	})
+	var scroll_view = new IScroll('.scaler', {
+		scrollX: false,
+		scrollY: true,
+
+		mouseWheel: true,
+		disableMouse: false,
+
+		eventPassthrough: 'horizontal',
+
+		// XXX for this to work correctly we'll need to:
+		//	1) position the element correctly -- now it jumps after zoom...
+	    	//	2) keep more of the element outside the view...
+		zoom: true,
+	})
+
+	window.scroll_ribbon = []
+	$('.ribbon-container')//.eq(0)
+		.css({
+			overflow: 'hidden',
+		})
+		.each(function(_, e){
+			console.log(e)
+			// XXX this calculates the scroll width incorrectly...
+			scroll_ribbon.push(new IScroll(e, {
+				scrollX: true,
+				scrollY: false,
+
+				disableMouse: false,
+				// XXX need this to work in a horizontal direction...
+				//mouseWheel: true,
+			}))
+		})
+}
+})
+
 </script>
 
 <body>
 
-<div class="viewer">
-	<div class="ribbon-set">
-		<div class="ribbon-container">
-			<div class="ribbon">
+<div class="viewer" mark-center="red">
+	<div class="scaler">
+		<div class="ribbon-set">
+			<div class="ribbon-container">
+				<div class="ribbon">
+				</div>
 			</div>
-		</div>
-		<div class="ribbon-container">
-			<div class="ribbon">
+			<div class="ribbon-container">
+				<div class="ribbon">
+				</div>
 			</div>
-		</div>
-		<div class="ribbon-container">
-			<div class="ribbon">
+			<div class="ribbon-container">
+				<div class="ribbon">
+				</div>
 			</div>
 		</div>
 	</div>
diff --git a/ui (gen4)/lib/util.js b/ui (gen4)/lib/util.js
index d7d7d25d..cd2b45e1 100755
--- a/ui (gen4)/lib/util.js	
+++ b/ui (gen4)/lib/util.js	
@@ -97,6 +97,32 @@ module.chainCmp = function(cmp_chain){
 } 
 
 
+// Get all the accessible keys...
+//
+// This is different to Object.keys(..) in that this will return keys
+// from all the prototypes while .keys(..) will only return the keys
+// defined in the last layer.
+Object.deepKeys = function(obj){
+	var res = []
+	while(obj != null){
+		res = res.concat(Object.keys(obj))
+		obj = obj.__proto__
+	}
+	return res.unique()
+}
+
+// Make a full key set copy of an object...
+//
+// NOTE: this will not deep-copy the values...
+Object.flatCopy = function(obj){
+	var res = {}
+	Object.deepKeys(obj).forEach(function(key){
+		res[key] = obj[key]
+	})
+	return res
+}
+
+
 // like .length but for sparse arrays will return the element count...
 // XXX make this a prop...
 /*
