flynx/ImageGrid
1
1
Fork 0
mirror of https://github.com/flynx/ImageGrid.git synced 2025-10-29 18:30:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

tweaking...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2016-05-19 13:59:52 +03:00
parent 82d441db26
commit a8b4c263e5
1 changed files with 59 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
ui (gen4)/experiments/native-scroll-ribbon.html
View File

@ -1,21 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<style> <style>
// mark the center... .mark-center:after {
[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; position: absolute;
display: block; display: block;
content: ""; content: "";
@ -23,10 +9,25 @@
height: 5px; height: 5px;
left: 50%; left: 50%;
top: 50%; top: 50%;
border-left: solid 2px attr(mark-center); border-left: solid 2px red;
border-top: solid 2px attr(mark-center); border-top: solid 2px red;
margin-left: -1px; margin-left: -1px;
margin-top: -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; overflow: hidden;
} }
.scaler { .scaler {
position: relative; position: relative;
width: 100%; width: 100%;
@ -67,6 +70,7 @@
} }
/* This is to be used for: /* This is to be used for:
* - vrtical positioning * - vrtical positioning
* - scaling * - scaling
@ -126,6 +130,8 @@
margin-right: 50%; margin-right: 50%;
} }
</style> </style>
<script src="../ext-lib/jquery.js"></script> <script src="../ext-lib/jquery.js"></script>
@ -140,6 +146,12 @@
<script> <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 // XXX when setting origin at scales different from 1, we'll need to
// adjust offset to compensate for the shift... // adjust offset to compensate for the shift...
// XXX one other simplification might be adding a new element specifically // XXX one other simplification might be adding a new element specifically
@ -153,37 +165,47 @@ var centerOrigin = function(){
}) })
} }
// XXX these accumolate errors... // XXX these accumolate errors...
var zoomIn = function(c){ var zoomIn = function(c){
c = c || 1.2 c = c || 1.2
centerOrigin()
$('.scaler') $('.scaler')
.velocity('stop') .velocity('stop')
.velocity({ .velocity({
scale: '*='+c, scale: '*='+c,
width: '/='+c, width: '/='+c,
height: '/='+c, height: '/='+c,
'margin-left': '/='+c, 'margin-left': '/='+c,
'margin-top': '/='+c, 'margin-top': '/='+c,
}, 300) }, {
duration: 300,
easing: 'linear',
})
} }
var zoomOut = function(c){ var zoomOut = function(c){
c = c || 1.2 c = c || 1.2
centerOrigin()
$('.scaler') $('.scaler')
.velocity('stop') .velocity('stop')
.velocity({ .velocity({
scale: '/='+c, scale: '/='+c,
width: '*='+c, width: '*='+c,
height: '*='+c, height: '*='+c,
'margin-left': '*='+c, 'margin-left': '*='+c,
'margin-top': '*='+c, 'margin-top': '*='+c,
}, 300) }, {
duration: 300,
easing: 'linear',
})
} }
var ISCROLL = false var setup = function(){
$(function(){
var H = $('.viewer').height() var H = $('.viewer').height()
var W = $('.viewer').width() var W = $('.viewer').width()
@ -193,6 +215,15 @@ $(function(){
'margin-left': -W/2, 'margin-left': -W/2,
'margin-top': -H/2, 'margin-top': -H/2,
}, 0) }, 0)
}
var ISCROLL = true
$(function(){
setup()
if(ISCROLL){ if(ISCROLL){
@ -201,11 +232,12 @@ if(ISCROLL){
overflow: 'hidden', overflow: 'hidden',
}) })
var scroll_view = new IScroll('.scaler', { var scroll_view = new IScroll('.scaler', {
// XXX setting this to false makes zoom reset x to 0 after it's done...
scrollX: false, scrollX: false,
scrollY: true, scrollY: true,
mouseWheel: true,
disableMouse: false, disableMouse: false,
mouseWheel: true,
eventPassthrough: 'horizontal', eventPassthrough: 'horizontal',
@ -228,7 +260,8 @@ if(ISCROLL){
scrollY: false, scrollY: false,
disableMouse: 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, //mouseWheel: true,
})) }))
}) })
@ -239,7 +272,7 @@ if(ISCROLL){
<body> <body>
<div class="viewer" mark-center="red"> <div class="viewer mark-center">
<div class="scaler"> <div class="scaler">
<div class="ribbon-set"> <div class="ribbon-set">
<div class="ribbon-container"> <div class="ribbon-container">