From a8b4c263e51a4e61e69ea2179917250922cbfb2a Mon Sep 17 00:00:00 2001
From: "Alex A. Naanou" <alex.nanou@gmail.com>
Date: Thu, 19 May 2016 13:59:52 +0300
Subject: [PATCH] tweaking...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
---
 .../experiments/native-scroll-ribbon.html     | 85 +++++++++++++------
 1 file changed, 59 insertions(+), 26 deletions(-)
diff --git a/ui (gen4)/experiments/native-scroll-ribbon.html b/ui (gen4)/experiments/native-scroll-ribbon.html
index 710c2ada..0cb9601b 100755
--- a/ui (gen4)/experiments/native-scroll-ribbon.html	
+++ b/ui (gen4)/experiments/native-scroll-ribbon.html	
@@ -1,21 +1,7 @@
 <!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 {
+.mark-center:after {
 	position: absolute;
 	display: block;
 	content: "";
@@ -23,10 +9,25 @@
 	height: 5px;
 	left: 50%;
 	top: 50%;
-	border-left: solid 2px attr(mark-center);
-	border-top: solid 2px attr(mark-center);
+	border-left: solid 2px red;
+	border-top: solid 2px red;
 	margin-left: -1px;
 	margin-top: -1px;
+	opacity: 0.8;
+}
+.mark-center:before {
+	position: absolute;
+	display: block;
+	content: "";
+	width: 5px;
+	height: 5px;
+	right: 50%;
+	bottom: 50%;
+	border-bottom: solid 2px red;
+	border-right: solid 2px red;
+	margin-bottom: -1px;
+	margin-right: -1px;
+	opacity: 0.8;
 }
 
 
@@ -45,6 +46,8 @@
 	overflow: hidden;
 }
 
+
+
 .scaler {
 	position: relative;
 	width: 100%;
@@ -67,6 +70,7 @@
 }
 
 
+
 /* This is to be used for:
 *	- vrtical positioning
 *	- scaling
@@ -126,6 +130,8 @@
 	margin-right: 50%;
 }
 
+
+
 </style>
 
 <script src="../ext-lib/jquery.js"></script>
@@ -140,6 +146,12 @@
 
 <script>
 
+var scale = function(){
+	var s = /scale\(([^\)]+)\)/.exec($('.scaler')[0].style.transform)
+	return s ? parseFloat(s.pop()) : 1
+}
+
+
 // 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
@@ -153,37 +165,47 @@ var centerOrigin = function(){
 	})
 }
 
+
 // XXX these accumolate errors...
 var zoomIn = function(c){
 	c = c || 1.2
+
+	centerOrigin()
 	$('.scaler')
 		.velocity('stop')
 		.velocity({
 			scale: '*='+c,
+
 			width: '/='+c,
 			height: '/='+c,
 			'margin-left': '/='+c,
 			'margin-top': '/='+c,
-		}, 300)
+		}, {
+			duration: 300,
+			easing: 'linear',
+		})
 }
 var zoomOut = function(c){
 	c = c || 1.2
+
+	centerOrigin()
 	$('.scaler')
 		.velocity('stop')
 		.velocity({
 			scale: '/='+c,
+
 			width: '*='+c,
 			height: '*='+c,
 			'margin-left': '*='+c,
 			'margin-top': '*='+c,
-		}, 300)
+		}, {
+			duration: 300,
+			easing: 'linear',
+		})
 }
 
 
-var ISCROLL = false
-
-
-$(function(){
+var setup = function(){
 	var H = $('.viewer').height()
 	var W = $('.viewer').width()
 
@@ -193,6 +215,15 @@ $(function(){
 			'margin-left': -W/2,
 			'margin-top': -H/2,
 		}, 0)
+}
+
+
+
+var ISCROLL = true
+
+
+$(function(){
+	setup()
 
 
 if(ISCROLL){
@@ -201,11 +232,12 @@ if(ISCROLL){
 		overflow: 'hidden',
 	})
 	var scroll_view = new IScroll('.scaler', {
+		// XXX setting this to false makes zoom reset x to 0 after it's done...
 		scrollX: false,
 		scrollY: true,
 
-		mouseWheel: true,
 		disableMouse: false,
+		mouseWheel: true,
 
 		eventPassthrough: 'horizontal',
 
@@ -228,7 +260,8 @@ if(ISCROLL){
 				scrollY: false,
 
 				disableMouse: false,
-				// XXX need this to work in a horizontal direction...
+				// XXX this only reads vertical mousewheel...
+				//	...need this to work in a horizontal direction...
 				//mouseWheel: true,
 			}))
 		})
@@ -239,7 +272,7 @@ if(ISCROLL){
 
 <body>
 
-<div class="viewer" mark-center="red">
+<div class="viewer mark-center">
 	<div class="scaler">
 		<div class="ribbon-set">
 			<div class="ribbon-container">
