mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-31 19:30:07 +00:00
some work on direct control...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
2127b49707
commit
662486266f
@ -63,7 +63,6 @@ core.ImageGridFeatures.Feature('viewer-testing', [
|
||||
'app-control',
|
||||
|
||||
// chrome...
|
||||
'ui-direct-control',
|
||||
'ui-animation',
|
||||
'ui-bounds-indicators',
|
||||
'ui-current-image-indicator',
|
||||
@ -77,6 +76,9 @@ core.ImageGridFeatures.Feature('viewer-testing', [
|
||||
'ui-browse-actions',
|
||||
'ui-widget-test',
|
||||
|
||||
//'ui-direct-control-jquery',
|
||||
'ui-direct-control-gsap',
|
||||
|
||||
// experimental and optional features...
|
||||
//'auto-single-image',
|
||||
|
||||
|
||||
@ -2386,48 +2386,85 @@ module.AutoSingleImage = core.ImageGridFeatures.Feature({
|
||||
// XXX add pinch-zoom...
|
||||
// XXX add vertical scroll...
|
||||
// XXX BUG: current image indicator gets shown in random places...
|
||||
var DirectControl =
|
||||
module.DirectControl = core.ImageGridFeatures.Feature({
|
||||
var DirectControljQ =
|
||||
module.DirectControljQ = core.ImageGridFeatures.Feature({
|
||||
title: '',
|
||||
doc: '',
|
||||
|
||||
tag: 'ui-direct-control',
|
||||
tag: 'ui-direct-control-jquery',
|
||||
depends: [
|
||||
'ui',
|
||||
// this is only used to trigger reoad...
|
||||
//'ui-partial-ribbons',
|
||||
],
|
||||
|
||||
/*
|
||||
config: {
|
||||
'ui-direct-control-engines': [
|
||||
'none',
|
||||
'jquery',
|
||||
],
|
||||
'ui-direct-control-engine': 'jquery',
|
||||
},
|
||||
|
||||
actions: actions.Actions({
|
||||
toggleDirectControlEngine: ['Interface/',
|
||||
base.makeConfigToggler('ui-direct-control-engine',
|
||||
function(){ return this.config['ui-direct-control-engines'] })],
|
||||
}),
|
||||
*/
|
||||
|
||||
// XXX add setup/taredown...
|
||||
handlers: [
|
||||
// setup click targets...
|
||||
// XXX click only if we did not drag...
|
||||
['updateImage',
|
||||
function(res, gid){
|
||||
var that = this
|
||||
var img = this.ribbons.getImage(gid)
|
||||
|
||||
// set the clicker only once...
|
||||
if(!img.prop('clickable')){
|
||||
var x, y
|
||||
img
|
||||
.prop('clickable', true)
|
||||
.on('mousedown touchstart', function(){
|
||||
x = event.clientX
|
||||
y = event.clientY
|
||||
t = Date.now()
|
||||
})
|
||||
.on('mouseup touchend', function(){
|
||||
if(x != null
|
||||
&& Math.max(
|
||||
Math.abs(x - event.clientX),
|
||||
Math.abs(y - event.clientY)) < 5){
|
||||
// this will prevent double clicks...
|
||||
x = null
|
||||
y = null
|
||||
that.focusImage(that.ribbons.getElemGID($(this)))
|
||||
}
|
||||
})
|
||||
}
|
||||
}],
|
||||
|
||||
// setup ribbon dragging...
|
||||
// XXX this is really sloooooow...
|
||||
// XXX hide current image indicator as soon as the image is not visible...
|
||||
// XXX inertia...
|
||||
// XXX limit scroll to at least one image being on screen (center?)...
|
||||
// XXX add setup/taredown...
|
||||
['updateRibbon',
|
||||
function(_, target){
|
||||
var that = this
|
||||
var r = this.ribbons.getRibbon(target)
|
||||
|
||||
var scale = 1
|
||||
|
||||
// setup dragging...
|
||||
r.length > 0
|
||||
&& !r.hasClass('ui-draggable')
|
||||
&& r.draggable({
|
||||
axis: 'x',
|
||||
|
||||
start: function(evt, ui){
|
||||
scale = that.ribbons.getScale()
|
||||
},
|
||||
// compensate for ribbon scale...
|
||||
drag: function(evt, ui) {
|
||||
// compensate for scale...
|
||||
ui.position = {
|
||||
left: ui.originalPosition.left
|
||||
+ (ui.position.left
|
||||
- ui.originalPosition.left) / scale,
|
||||
top: ui.originalPosition.top
|
||||
+ (ui.position.top
|
||||
- ui.originalPosition.top) / scale,
|
||||
}
|
||||
},
|
||||
|
||||
stop: function(){
|
||||
var c = that.ribbons.getImageByPosition('center', r)
|
||||
that
|
||||
@ -2441,6 +2478,92 @@ module.DirectControl = core.ImageGridFeatures.Feature({
|
||||
})
|
||||
|
||||
|
||||
var DirectControlGSAP =
|
||||
module.DirectControlGSAP = core.ImageGridFeatures.Feature({
|
||||
title: '',
|
||||
doc: '',
|
||||
|
||||
tag: 'ui-direct-control-gsap',
|
||||
depends: [
|
||||
'ui',
|
||||
// this is only used to trigger reoad...
|
||||
//'ui-partial-ribbons',
|
||||
],
|
||||
|
||||
// XXX add setup/taredown...
|
||||
handlers: [
|
||||
// setup click targets...
|
||||
// XXX click only if we did not drag...
|
||||
['updateImage',
|
||||
function(res, gid){
|
||||
var that = this
|
||||
var img = this.ribbons.getImage(gid)
|
||||
|
||||
// set the clicker only once...
|
||||
if(!img.prop('clickable')){
|
||||
var x, y
|
||||
img
|
||||
.prop('clickable', true)
|
||||
.on('mousedown touchstart', function(){
|
||||
x = event.clientX
|
||||
y = event.clientY
|
||||
t = Date.now()
|
||||
})
|
||||
.on('mouseup touchend', function(){
|
||||
if(x != null
|
||||
&& Math.max(
|
||||
Math.abs(x - event.clientX),
|
||||
Math.abs(y - event.clientY)) < 5){
|
||||
// this will prevent double clicks...
|
||||
x = null
|
||||
y = null
|
||||
that.focusImage(that.ribbons.getElemGID($(this)))
|
||||
}
|
||||
})
|
||||
}
|
||||
}],
|
||||
|
||||
// setup ribbon dragging...
|
||||
// XXX fast but uses messes up positioning...
|
||||
// ...setting type: 'left' will fix this but make things
|
||||
// really slow (as slow as jQuery.ui.draggable(..))...
|
||||
['updateRibbon',
|
||||
function(_, target){
|
||||
var that = this
|
||||
var r = this.ribbons.getRibbon(target)
|
||||
|
||||
// setup dragging...
|
||||
if(r.length > 0 && !r.hasClass('draggable')){
|
||||
r.addClass('draggable')
|
||||
|
||||
var o
|
||||
|
||||
Draggable.create(r, {
|
||||
type: 'x',
|
||||
onDragStart: function(){
|
||||
o = r.position().left
|
||||
},
|
||||
onDragEnd: function(){
|
||||
var l = r.position().left
|
||||
l += o - l
|
||||
|
||||
that.ribbons.preventTransitions(r)
|
||||
r[0].style.left = l
|
||||
r[0].style.transform = 'translate3d(0, 0, 0)'
|
||||
that.ribbons.restoreTransitions(r)
|
||||
|
||||
var c = that.ribbons.getImageByPosition('center', r)
|
||||
that
|
||||
.updateRibbon(c)
|
||||
// XXX is this correct???
|
||||
//.updateCurrentImageIndicator()
|
||||
}})
|
||||
}
|
||||
}],
|
||||
],
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
//---------------------------------------------------------------------
|
||||
|
||||
@ -177,6 +177,12 @@ typeof(require) != 'undefined' && require('nw.gui').Window.get().showDevTools()
|
||||
<script src="ext-lib/jquery-ui.js"></script>
|
||||
<script src="ext-lib/jquery.ui.touch-punch.min.js"></script>
|
||||
|
||||
<script src="ext-lib/gsap/TweenLite.min.js"></script>
|
||||
<script src="ext-lib/gsap/jquery.gsap.min.js"></script>
|
||||
<script src="ext-lib/gsap/utils/Draggable.min.js"></script>
|
||||
<script src="ext-lib/gsap/plugins/CSSPlugin.min.js"></script>
|
||||
|
||||
|
||||
<script src="lib/jli.js"></script>
|
||||
<script src="lib/toggler.js"></script>
|
||||
|
||||
|
||||
@ -38,7 +38,7 @@ function(path){
|
||||
//.map(encodeURIComponent)
|
||||
.join('/')
|
||||
// NOTE: keep '%' the first...
|
||||
.replace(/%/g, '%25')
|
||||
//.replace(/%/g, '%25')
|
||||
.replace(/#/g, '%23')
|
||||
.replace(/&/g, '%26'))
|
||||
}
|
||||
|
||||
@ -485,7 +485,7 @@ var RibbonsPrototype = {
|
||||
// Set ribbon set scale...
|
||||
//
|
||||
// .setScale(<scale>)
|
||||
// .setScale(<scale>, <image>)
|
||||
// .setScale(<scale>, <image>|'current'|'closest')
|
||||
// .setScale(<scale>, 'top'|'center'|'bottom'|<px>|%, 'left'|'center'|'right'|<px>|%)
|
||||
// -> <ribbons>
|
||||
//
|
||||
@ -499,13 +499,20 @@ var RibbonsPrototype = {
|
||||
return this
|
||||
}
|
||||
|
||||
if(t != null && l != null){
|
||||
this.setOrigin(t, l)
|
||||
// default origin -- center...
|
||||
if(t == null && l == null){
|
||||
this.setOrigin('center', 'center')
|
||||
|
||||
// an image...
|
||||
} else if(l == null){
|
||||
t = t == 'current' ? this.getImage()
|
||||
: t == 'closest' ? this.getImageByPosition()
|
||||
: t
|
||||
this.setOrigin(t)
|
||||
|
||||
// explicit...
|
||||
} else {
|
||||
var img = t == null ? this.getImage() : t
|
||||
|
||||
this.setOrigin(img)
|
||||
this.setOrigin(t, l)
|
||||
}
|
||||
|
||||
setElementScale(ribbon_set, scale)
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user