mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-31 19:30:07 +00:00
started playing with iScroll as an alternative to native and main scroller for FF...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
19dee8e43b
commit
82d441db26
@ -1,11 +1,41 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<style>
|
<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...
|
/* XXX appears that there is no way to hide the scrollbar on FF...
|
||||||
* ...one way around this is to use something like iScroll/Scrolly
|
* ...one way around this is to use something like iScroll/Scrolly
|
||||||
* on FF or where more control is needed...
|
* on FF or where more control is needed...
|
||||||
*/
|
*/
|
||||||
.viewer {
|
.viewer {
|
||||||
|
position: relative;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
border: solid 1px gray;
|
border: solid 1px gray;
|
||||||
|
|
||||||
@ -13,18 +43,30 @@
|
|||||||
height: 500px;
|
height: 500px;
|
||||||
|
|
||||||
overflow: hidden;
|
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-x: hidden;
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
|
|
||||||
-ms-overflow-style: none;
|
-ms-overflow-style: none;
|
||||||
}
|
}
|
||||||
.viewer::-webkit-scrollbar {
|
.scaler::-webkit-scrollbar {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* This is to be used for:
|
/* This is to be used for:
|
||||||
* - vrtical positioning
|
* - vrtical positioning
|
||||||
* - scaling
|
* - scaling
|
||||||
@ -41,13 +83,6 @@
|
|||||||
|
|
||||||
padding-top: 50%;
|
padding-top: 50%;
|
||||||
padding-bottom: 50%;
|
padding-bottom: 50%;
|
||||||
|
|
||||||
margin-left: -50%;
|
|
||||||
left: 50%;
|
|
||||||
|
|
||||||
|
|
||||||
transform-origin: 50% 50%;
|
|
||||||
/*transform: scale(0.5);*/
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -98,39 +133,114 @@
|
|||||||
|
|
||||||
<script src="../ext-lib/velocity.min.js"></script>
|
<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 src="../lib/jli.js"></script>
|
||||||
|
|
||||||
<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...
|
// XXX these accumolate errors...
|
||||||
var zoomIn = function(c){
|
var zoomIn = function(c){
|
||||||
c = c || 1.2
|
c = c || 1.2
|
||||||
$('.ribbon-set')
|
$('.scaler')
|
||||||
.velocity('stop')
|
.velocity('stop')
|
||||||
.css({
|
|
||||||
})
|
|
||||||
.velocity({
|
.velocity({
|
||||||
scale: '*='+c,
|
scale: '*='+c,
|
||||||
width: '/='+c,
|
width: '/='+c,
|
||||||
|
height: '/='+c,
|
||||||
'margin-left': '/='+c,
|
'margin-left': '/='+c,
|
||||||
|
'margin-top': '/='+c,
|
||||||
}, 300)
|
}, 300)
|
||||||
}
|
}
|
||||||
var zoomOut = function(c){
|
var zoomOut = function(c){
|
||||||
c = c || 1.2
|
c = c || 1.2
|
||||||
$('.ribbon-set')
|
$('.scaler')
|
||||||
.velocity('stop')
|
.velocity('stop')
|
||||||
.velocity({
|
.velocity({
|
||||||
scale: '/='+c,
|
scale: '/='+c,
|
||||||
width: '*='+c,
|
width: '*='+c,
|
||||||
|
height: '*='+c,
|
||||||
'margin-left': '*='+c,
|
'margin-left': '*='+c,
|
||||||
|
'margin-top': '*='+c,
|
||||||
}, 300)
|
}, 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>
|
</script>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="viewer">
|
<div class="viewer" mark-center="red">
|
||||||
|
<div class="scaler">
|
||||||
<div class="ribbon-set">
|
<div class="ribbon-set">
|
||||||
<div class="ribbon-container">
|
<div class="ribbon-container">
|
||||||
<div class="ribbon">
|
<div class="ribbon">
|
||||||
@ -146,6 +256,7 @@ var zoomOut = function(c){
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -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...
|
// like .length but for sparse arrays will return the element count...
|
||||||
// XXX make this a prop...
|
// XXX make this a prop...
|
||||||
/*
|
/*
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user