mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-28 18:00:09 +00:00
refactored current marker + experimenting...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
5dfff9413c
commit
43e7990143
@ -684,11 +684,17 @@ stretching in width... */
|
||||
|
||||
|
||||
.current-marker {
|
||||
display: none;
|
||||
position: absolute;
|
||||
border: solid 5px red;
|
||||
background: none;
|
||||
z-index: 100;
|
||||
|
||||
top: 0;
|
||||
left: 0;
|
||||
margin-top: -@image-tile-size / 2;
|
||||
margin-left: -@image-tile-size / 2;
|
||||
|
||||
/* pass events through... (do we need IE10-?) */
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@ -406,13 +406,6 @@ actions.Actions({
|
||||
|
||||
this.focusImage(t, r)
|
||||
}],
|
||||
// XXX add undo...
|
||||
setBaseRibbon: ['Edit|Ribbon/Set base ribbon', {
|
||||
journal: true,
|
||||
browseMode: function(target){
|
||||
return this.current_ribbon == this.base && 'disabled' }},
|
||||
function(target){ this.data.setBase(target) }],
|
||||
|
||||
// shorthands...
|
||||
// XXX do we reset direction on these???
|
||||
firstImage: ['Navigate/First image in current ribbon',
|
||||
@ -584,12 +577,116 @@ actions.Actions({
|
||||
nextRibbon: ['Navigate/Next ribbon',
|
||||
{browseMode: 'lastRibbon'},
|
||||
function(){ this.focusRibbon('after') }],
|
||||
})
|
||||
|
||||
|
||||
var Base =
|
||||
module.Base =
|
||||
core.ImageGridFeatures.Feature({
|
||||
title: 'ImageGrid base',
|
||||
|
||||
tag: 'base',
|
||||
depends: [
|
||||
'changes',
|
||||
],
|
||||
suggested: [
|
||||
'base-edit',
|
||||
//'tags',
|
||||
//'sort',
|
||||
//'tasks',
|
||||
],
|
||||
|
||||
actions: BaseActions,
|
||||
|
||||
handlers: [
|
||||
// manage changes...
|
||||
// everything changed...
|
||||
[[
|
||||
'claer',
|
||||
'loadURLs',
|
||||
],
|
||||
function(){ this.markChanged('all') }],
|
||||
|
||||
['prepareIndexForWrite',
|
||||
function(res){
|
||||
// we save .current unconditionally...
|
||||
res.index.current = res.raw.data.current
|
||||
|
||||
var changes = res.changes
|
||||
|
||||
// data...
|
||||
if(changes === true || changes.data){
|
||||
res.index.data = res.raw.data
|
||||
}
|
||||
|
||||
// images (full)...
|
||||
if(changes === true || changes.images === true){
|
||||
res.index.images = res.raw.images
|
||||
|
||||
// images-diff...
|
||||
} else if(changes && changes.images){
|
||||
var diff = res.index['images-diff'] = {}
|
||||
changes.images.forEach(function(gid){
|
||||
diff[gid] = res.raw.images[gid]
|
||||
})
|
||||
}
|
||||
}],
|
||||
['prepareJSONForLoad',
|
||||
function(res, json, base_path){
|
||||
// build data and images...
|
||||
// XXX do we actually need to build stuff here, shouldn't
|
||||
// .load(..) take care of this???
|
||||
//var d = json.data
|
||||
var d = data.Data.fromJSON(json.data)
|
||||
|
||||
d.current = json.current || d.current
|
||||
|
||||
var img = images.Images(json.images)
|
||||
|
||||
if(base_path){
|
||||
d.base_path = base_path
|
||||
// XXX STUB remove ASAP...
|
||||
// ...need a real way to handle base dir, possible
|
||||
// approaches:
|
||||
// 1) .base_path attr in image, set on load and
|
||||
// do not save (or ignore on load)...
|
||||
// if exists prepend to all paths...
|
||||
// - more to do in view-time
|
||||
// + more flexible
|
||||
// 2) add/remove on load/save (approach below)
|
||||
// + less to do in real time
|
||||
// - more processing on load/save
|
||||
img.forEach(function(_, img){ img.base_path = base_path })
|
||||
}
|
||||
|
||||
res.data = d
|
||||
res.images = img
|
||||
}],
|
||||
],
|
||||
})
|
||||
|
||||
|
||||
|
||||
//---------------------------------------------------------------------
|
||||
// Edit...
|
||||
|
||||
var BaseEditActions =
|
||||
module.BaseEditActions =
|
||||
actions.Actions({
|
||||
config: {
|
||||
},
|
||||
|
||||
// basic ribbon editing...
|
||||
//
|
||||
// NOTE: for all of these, current/ribbon image is a default...
|
||||
|
||||
// XXX add undo...
|
||||
setBaseRibbon: ['Edit|Ribbon/Set base ribbon', {
|
||||
journal: true,
|
||||
browseMode: function(target){
|
||||
return this.current_ribbon == this.base && 'disabled' }},
|
||||
function(target){ this.data.setBase(target) }],
|
||||
|
||||
// NOTE: resetting this option will clear the last direction...
|
||||
toggleShiftsAffectDirection: ['Interface/Shifts affect direction',
|
||||
core.makeConfigToggler('shifts-affect-direction',
|
||||
@ -761,7 +858,16 @@ actions.Actions({
|
||||
{undo: 'reverseRibbons'},
|
||||
function(){ this.data.reverseRibbons() }],
|
||||
|
||||
// XXX align to ribbon...
|
||||
// complex operations...
|
||||
// XXX need interactive mode for this...
|
||||
// - on init: select start/end/base
|
||||
// - allow user to reset/move
|
||||
// - on accept: run
|
||||
alignToRibbon: ['Ribbon|Edit/Align top ribbon to base',
|
||||
{journal: true},
|
||||
function(target, start, end){
|
||||
this.data = this.data.alignToRibbon(target, start, end) }],
|
||||
|
||||
|
||||
// basic image editing...
|
||||
//
|
||||
@ -841,37 +947,19 @@ actions.Actions({
|
||||
flipHorizontal: ['Image|Edit/Flip image horizontally',
|
||||
{undo: 'flipHorizontal'},
|
||||
function(target){ this.flip(target, 'horizontal') }],
|
||||
|
||||
|
||||
// complex operations...
|
||||
// XXX need interactive mode for this...
|
||||
// - on init: select start/end/base
|
||||
// - allow user to reset/move
|
||||
// - on accept: run
|
||||
alignToRibbon: ['Ribbon|Edit/Align top ribbon to base',
|
||||
{journal: true},
|
||||
function(target, start, end){
|
||||
this.data = this.data.alignToRibbon(target, start, end) }],
|
||||
})
|
||||
|
||||
|
||||
var Base =
|
||||
module.Base =
|
||||
var BaseEdit =
|
||||
module.BaseEdit =
|
||||
core.ImageGridFeatures.Feature({
|
||||
title: 'ImageGrid base',
|
||||
title: 'ImageGrid base editor',
|
||||
|
||||
tag: 'base',
|
||||
tag: 'base-edit',
|
||||
depends: [
|
||||
'changes',
|
||||
],
|
||||
suggested: [
|
||||
'base-edit',
|
||||
//'tags',
|
||||
//'sort',
|
||||
//'tasks',
|
||||
'base',
|
||||
],
|
||||
|
||||
actions: BaseActions,
|
||||
actions: BaseEditActions,
|
||||
|
||||
handlers: [
|
||||
[[
|
||||
@ -897,13 +985,6 @@ core.ImageGridFeatures.Feature({
|
||||
&& this.shiftImageOrder.apply(this, [].slice(arguments, 1)) } }],
|
||||
|
||||
// manage changes...
|
||||
// everything changed...
|
||||
[[
|
||||
'claer',
|
||||
'loadURLs',
|
||||
],
|
||||
function(){ this.markChanged('all') }],
|
||||
|
||||
// data...
|
||||
[[
|
||||
//'load',
|
||||
@ -933,94 +1014,11 @@ core.ImageGridFeatures.Feature({
|
||||
'flipVertical',
|
||||
],
|
||||
function(_, target){ this.markChanged('images', [this.data.getImage(target)]) }],
|
||||
|
||||
['prepareIndexForWrite',
|
||||
function(res){
|
||||
// we save .current unconditionally...
|
||||
res.index.current = res.raw.data.current
|
||||
|
||||
var changes = res.changes
|
||||
|
||||
// data...
|
||||
if(changes === true || changes.data){
|
||||
res.index.data = res.raw.data
|
||||
}
|
||||
|
||||
// images (full)...
|
||||
if(changes === true || changes.images === true){
|
||||
res.index.images = res.raw.images
|
||||
|
||||
// images-diff...
|
||||
} else if(changes && changes.images){
|
||||
var diff = res.index['images-diff'] = {}
|
||||
changes.images.forEach(function(gid){
|
||||
diff[gid] = res.raw.images[gid]
|
||||
})
|
||||
}
|
||||
}],
|
||||
['prepareJSONForLoad',
|
||||
function(res, json, base_path){
|
||||
// build data and images...
|
||||
// XXX do we actually need to build stuff here, shouldn't
|
||||
// .load(..) take care of this???
|
||||
//var d = json.data
|
||||
var d = data.Data.fromJSON(json.data)
|
||||
|
||||
d.current = json.current || d.current
|
||||
|
||||
var img = images.Images(json.images)
|
||||
|
||||
if(base_path){
|
||||
d.base_path = base_path
|
||||
// XXX STUB remove ASAP...
|
||||
// ...need a real way to handle base dir, possible
|
||||
// approaches:
|
||||
// 1) .base_path attr in image, set on load and
|
||||
// do not save (or ignore on load)...
|
||||
// if exists prepend to all paths...
|
||||
// - more to do in view-time
|
||||
// + more flexible
|
||||
// 2) add/remove on load/save (approach below)
|
||||
// + less to do in real time
|
||||
// - more processing on load/save
|
||||
img.forEach(function(_, img){ img.base_path = base_path })
|
||||
}
|
||||
|
||||
res.data = d
|
||||
res.images = img
|
||||
}],
|
||||
],
|
||||
})
|
||||
|
||||
|
||||
|
||||
//---------------------------------------------------------------------
|
||||
// Edit...
|
||||
|
||||
var BaseEditActions =
|
||||
module.BaseEditActions =
|
||||
actions.Actions({
|
||||
config: {
|
||||
},
|
||||
|
||||
// XXX
|
||||
})
|
||||
|
||||
var BaseEdit =
|
||||
module.BaseEdit =
|
||||
core.ImageGridFeatures.Feature({
|
||||
title: 'ImageGrid base editor',
|
||||
|
||||
tag: 'base-edit',
|
||||
depends: [
|
||||
'base',
|
||||
],
|
||||
|
||||
actions: BaseEditActions,
|
||||
})
|
||||
|
||||
|
||||
|
||||
//---------------------------------------------------------------------
|
||||
// Tags...
|
||||
|
||||
|
||||
@ -52,6 +52,21 @@ Object.keys(demo_data.ribbons).forEach(function(k){
|
||||
demo_data.order = demo_data.order.concat(demo_data.ribbons[k])
|
||||
})
|
||||
|
||||
var demo_images =
|
||||
module.demo_images = {
|
||||
a: {
|
||||
orientation: 90,
|
||||
},
|
||||
f: {
|
||||
orientation: 270,
|
||||
},
|
||||
2: {
|
||||
orientation: 270,
|
||||
},
|
||||
z: {
|
||||
flipped: ['horizontal'],
|
||||
},
|
||||
}
|
||||
|
||||
|
||||
/*********************************************************************/
|
||||
@ -71,7 +86,8 @@ module.Demo = core.ImageGridFeatures.Feature({
|
||||
function(){
|
||||
this.load({
|
||||
data: data.Data(demo_data),
|
||||
images: images.Images(),
|
||||
//images: images.Images(),
|
||||
images: images.Images(demo_images),
|
||||
})
|
||||
}],
|
||||
})
|
||||
|
||||
@ -64,14 +64,16 @@ core.ImageGridFeatures.Feature('viewer-testing', [
|
||||
|
||||
'ui-single-image',
|
||||
'ui-partial-ribbons',
|
||||
// XXX has bugs...
|
||||
//'ui-partial-ribbons-2',
|
||||
/*/ XXX has bugs...
|
||||
'ui-partial-ribbons-2',
|
||||
'-ui-partial-ribbons',
|
||||
//*/
|
||||
// XXX EXPERIMENTAL...
|
||||
'ui-partial-ribbons-vdom',
|
||||
'-ui-partial-ribbons',
|
||||
'-ui-partial-ribbons-2',
|
||||
// XXX this conflicts with ui-partial-ribbons-vdom...
|
||||
'-ui-current-image-indicator',
|
||||
//'-ui-current-image-indicator',
|
||||
//*/
|
||||
|
||||
'marks',
|
||||
|
||||
@ -179,11 +179,11 @@ var CurrentImageIndicatorActions = actions.Actions({
|
||||
// NOTE: cur may be unloaded...
|
||||
var ribbon = this.ribbons.getRibbon(cur.length > 0 ? target : this.current_ribbon)
|
||||
|
||||
var marker = ribbon.find('.current-marker')
|
||||
var marker = ribbon_set.find('.current-marker')
|
||||
|
||||
// remove marker if current image is not loaded...
|
||||
if(cur.length == 0){
|
||||
marker.remove()
|
||||
marker.hide()
|
||||
return
|
||||
}
|
||||
|
||||
@ -191,41 +191,6 @@ var CurrentImageIndicatorActions = actions.Actions({
|
||||
var border = this.config['current-image-border']
|
||||
var min_border = this.config['current-image-min-border']
|
||||
var border_timeout = this.config['current-image-border-timeout']
|
||||
var fadein = this.config['current-image-indicator-fadein']
|
||||
|
||||
// no marker found -- either in different ribbon or not created yet...
|
||||
if(marker.length == 0){
|
||||
// get marker globally...
|
||||
marker = this.ribbons.viewer.find('.current-marker')
|
||||
|
||||
// no marker exists -- create a marker...
|
||||
if(marker.length == 0){
|
||||
var marker = $('<div/>')
|
||||
.addClass('current-marker ui-current-image-indicator')
|
||||
.css({
|
||||
opacity: '0',
|
||||
// NOTE: these are not used for positioning
|
||||
// but are needed for correct absolute
|
||||
// placement...
|
||||
top: '0px',
|
||||
left: '0px',
|
||||
})
|
||||
.appendTo(ribbon)
|
||||
.animate({
|
||||
'opacity': 1
|
||||
}, fadein)
|
||||
this.ribbons.dom.setOffset(marker, 0, 0)
|
||||
|
||||
// add marker to current ribbon...
|
||||
} else {
|
||||
css.display = ''
|
||||
marker
|
||||
// NOTE: this will prevent animating the marker
|
||||
// in odd ways when switching ribbons...
|
||||
.css({ display: 'none' })
|
||||
.appendTo(ribbon)
|
||||
}
|
||||
}
|
||||
|
||||
var w = cur.outerWidth(true)
|
||||
var h = cur.outerHeight(true)
|
||||
@ -262,16 +227,6 @@ var CurrentImageIndicatorActions = actions.Actions({
|
||||
}
|
||||
}
|
||||
|
||||
/* // set absolute offset...
|
||||
this.ribbons.dom.setOffset(marker,
|
||||
cur[0].offsetLeft - (parseFloat(cur[0].style.marginLeft) || 0),
|
||||
0)
|
||||
*/
|
||||
// set relative offset...
|
||||
var W = Math.min(document.body.offsetWidth, document.body.offsetHeight)
|
||||
var x = ((cur[0].offsetLeft - (parseFloat(cur[0].style.marginLeft) || 0))/W)*100 + 'vmin'
|
||||
marker.transform({x: x, y: 0, z: 0})
|
||||
|
||||
marker.css(css)
|
||||
}],
|
||||
})
|
||||
@ -290,59 +245,23 @@ module.CurrentImageIndicator = core.ImageGridFeatures.Feature({
|
||||
actions: CurrentImageIndicatorActions,
|
||||
|
||||
handlers: [
|
||||
['load',
|
||||
function(){
|
||||
var fadein = this.config['current-image-indicator-fadein']
|
||||
this.ribbons.viewer.find('.current-marker')
|
||||
.css({
|
||||
display: 'block',
|
||||
opacity: 0,
|
||||
})
|
||||
.delay(100)
|
||||
.animate({
|
||||
opacity: 1
|
||||
}, fadein)
|
||||
}],
|
||||
|
||||
// move marker to current image...
|
||||
['focusImage.post',
|
||||
function(){ this.updateCurrentImageIndicator() }],
|
||||
// prevent animations when focusing ribbons...
|
||||
['focusRibbon.pre',
|
||||
function(){
|
||||
var m = this.ribbons.viewer.find('.current-marker')
|
||||
this.ribbons.preventTransitions(m)
|
||||
return function(){
|
||||
this.ribbons.restoreTransitions(m)
|
||||
}
|
||||
}],
|
||||
// this is here to compensate for position change on ribbon
|
||||
// resize...
|
||||
// NOTE: hide/show of indicator on resize appears to have solved
|
||||
// the jumpy animation issue.
|
||||
// this might cause some blinking on slow resizes (visible
|
||||
// only on next/prev screen)...
|
||||
// ...still not sure why .preventTransitions(m) did not
|
||||
// do the job.
|
||||
['resizeRibbon.pre',
|
||||
function(target){
|
||||
var m = this.ribbons.viewer.find('.current-marker')
|
||||
var c = this.current
|
||||
var r = this.current_ribbon
|
||||
|
||||
// only update if marker exists and we are in current ribbon...
|
||||
if(m.length != 0
|
||||
// XXX not sure if target handling here is the
|
||||
// right way to go -- we manually check things
|
||||
// when .data.getImage(..) nad friends to this
|
||||
// better and in one spot...
|
||||
// ...the down side is that they are slower...
|
||||
&& (target == 'current'
|
||||
|| target == c
|
||||
|| target == r
|
||||
// XXX this seems to be slow enough to push
|
||||
// the frame-rate down...
|
||||
|| this.data.getRibbon(target) == r
|
||||
|| target == null)){
|
||||
m.hide()
|
||||
|
||||
return function(){
|
||||
this.updateCurrentImageIndicator(target, false)
|
||||
m
|
||||
.show()
|
||||
// NOTE: keeping display in inline style will
|
||||
// prevent the element from being hidden
|
||||
// by css...
|
||||
.css({display: ''})
|
||||
}
|
||||
}
|
||||
}],
|
||||
|
||||
// Change border size in the appropriate spot in the animation:
|
||||
// - before animation when scaling up
|
||||
@ -364,25 +283,6 @@ module.CurrentImageIndicator = core.ImageGridFeatures.Feature({
|
||||
function(){
|
||||
this.updateCurrentImageIndicator(null, 'before') }],
|
||||
|
||||
['shiftImageLeft.pre shiftImageRight.pre',
|
||||
function(){
|
||||
this.ribbons.viewer.find('.current-marker').hide()
|
||||
if(this._current_image_indicator_timeout != null){
|
||||
clearTimeout(this._current_image_indicator_timeout)
|
||||
delete this._current_image_indicator_timeout
|
||||
}
|
||||
return function(){
|
||||
var ribbons = this.ribbons
|
||||
var fadein = this.config['current-image-indicator-fadein']
|
||||
this._current_image_indicator_timeout = setTimeout(function(){
|
||||
var m = ribbons.viewer.find('.current-marker')
|
||||
m.fadeIn(fadein, function(){
|
||||
m.css({display: ''})
|
||||
})
|
||||
}, this.config['current-image-shift-timeout'])
|
||||
}
|
||||
}],
|
||||
|
||||
// hide and remove current image indicator...
|
||||
// NOTE: it will be reconstructed on
|
||||
// next .focusImage(..)
|
||||
@ -392,21 +292,19 @@ module.CurrentImageIndicator = core.ImageGridFeatures.Feature({
|
||||
&& clearTimeout(this.__current_image_indicator_restore_timeout)
|
||||
delete this.__current_image_indicator_restore_timeout
|
||||
|
||||
var m = this.ribbons.viewer
|
||||
this.ribbons.viewer
|
||||
.find('.current-marker')
|
||||
.velocity({opacity: 0}, {
|
||||
duration: 100,
|
||||
complete: function(){
|
||||
m.remove()
|
||||
},
|
||||
})
|
||||
|
||||
.velocity({opacity: 0}, { duration: 100 })
|
||||
}],
|
||||
['ribbonPanning.post',
|
||||
function(){
|
||||
var that = this
|
||||
this.__current_image_indicator_restore_timeout = setTimeout(function(){
|
||||
that.updateCurrentImageIndicator()
|
||||
|
||||
that.ribbons.viewer
|
||||
.find('.current-marker')
|
||||
.velocity({opacity: 1}, { duration: 100 })
|
||||
}, this.config['current-image-indicator-restore-delay'] || 500)
|
||||
}],
|
||||
|
||||
@ -414,15 +312,13 @@ module.CurrentImageIndicator = core.ImageGridFeatures.Feature({
|
||||
['toggleSingleImage',
|
||||
function(){
|
||||
if(this.toggleSingleImage('?') == 'off'){
|
||||
var m = this.ribbons.viewer.find('.current-marker')
|
||||
m.hide()
|
||||
this.ribbons.viewer.find('.current-marker')
|
||||
.delay(150)
|
||||
.animate({opacity: 1}, 100)
|
||||
|
||||
this.updateCurrentImageIndicator()
|
||||
|
||||
m
|
||||
.delay(150)
|
||||
.fadeIn(200, function(){
|
||||
m.css({display: ''})})
|
||||
} else {
|
||||
this.ribbons.viewer.find('.current-marker')
|
||||
.css({ opacity: 0 })
|
||||
}
|
||||
}],
|
||||
],
|
||||
|
||||
@ -44,6 +44,100 @@ var core = require('features/core')
|
||||
window.vdom = vdom
|
||||
|
||||
|
||||
//---------------------------------------------------------------------
|
||||
|
||||
var Ribbons = {
|
||||
//dom: null,
|
||||
|
||||
// utils...
|
||||
px2v: null,
|
||||
px2vw: null,
|
||||
px2vh: null,
|
||||
px2vmin: null,
|
||||
px2vmax: null,
|
||||
preventTransitions: null,
|
||||
restoreTransitions: null,
|
||||
noTransitions: null,
|
||||
noTransitionsDeep: null,
|
||||
getElemGID: null,
|
||||
setElemGID: null,
|
||||
replaceGid: null,
|
||||
|
||||
makeShadow: null,
|
||||
|
||||
parent: null,
|
||||
images: null,
|
||||
|
||||
scale: null,
|
||||
rotate: null,
|
||||
|
||||
getVisibleImageSize: null,
|
||||
getScreenWidthImages: null,
|
||||
getScreenHeightRibbons: null,
|
||||
|
||||
// element getters...
|
||||
//getRibbonSet: null,
|
||||
//getRibbonLocator: null,
|
||||
//getImage: null,
|
||||
//getImageMarks: null,
|
||||
//getImageByPosition: null,
|
||||
//getRibbon: null,
|
||||
//getRibbonOrder: null,
|
||||
|
||||
// XXX
|
||||
addImageEventHandler: function(evt, handler){
|
||||
},
|
||||
addRibbonEventHandler: function(evt, handler){
|
||||
},
|
||||
|
||||
//placeRibbon: null,
|
||||
//placeImage: null,
|
||||
|
||||
updateImageIndicators: null,
|
||||
_loadImagePreviewURL: null,
|
||||
//load_img_sync: null,
|
||||
updateImage: null,
|
||||
|
||||
//updateRibbon: null,
|
||||
//updateRibbonInPlace: null,
|
||||
//resizeRibbon: null,
|
||||
|
||||
//updateData: null,
|
||||
|
||||
//clearEmptyRibbons: null,
|
||||
|
||||
//focusImage: null,
|
||||
|
||||
//setBaseRibbon: null,
|
||||
|
||||
//toggleImageMark: null,
|
||||
|
||||
//rotateImage: null,
|
||||
//getImageRotation: null,
|
||||
//rotateCW: null,
|
||||
//rotateCCW: null,
|
||||
//flipImage: null,
|
||||
//getImageFlip: null,
|
||||
//flipVertical: null,
|
||||
//flipHorizontal: null,
|
||||
|
||||
// XXX
|
||||
_calcImageProportions: null,
|
||||
correctImageProportionsForRotation: null,
|
||||
|
||||
centerRibbon: null,
|
||||
centerImage: null,
|
||||
|
||||
fitImage: null,
|
||||
fitRibbon: null,
|
||||
|
||||
clear: null,
|
||||
//clone: null,
|
||||
|
||||
__init__: null,
|
||||
}
|
||||
|
||||
|
||||
//---------------------------------------------------------------------
|
||||
|
||||
// hooks...
|
||||
@ -92,7 +186,6 @@ var VirtualDOMRibbonsPrototype = {
|
||||
state: null,
|
||||
|
||||
// constructors...
|
||||
// XXX calculate top...
|
||||
makeView: function(state){
|
||||
state = state || {}
|
||||
var that = this
|
||||
@ -105,10 +198,6 @@ var VirtualDOMRibbonsPrototype = {
|
||||
|| ig.screenwidth * (ig.config['ribbon-size-screens'] || 9)
|
||||
var s = state.scale = state.scale
|
||||
|| ig.scale
|
||||
var top = state.top = state.top
|
||||
|| this.state.top
|
||||
// XXX do a real calculation...
|
||||
|| ig.ribbons.getRibbonLocator().transform('y')
|
||||
|
||||
var data = ig.data
|
||||
var images = ig.images
|
||||
@ -117,21 +206,21 @@ var VirtualDOMRibbonsPrototype = {
|
||||
.map(function(gid){
|
||||
return that.makeRibbon(gid, target, count, state) })
|
||||
|
||||
return vdom.h('div.ribbon-set', {
|
||||
//key: 'ribbon-set',
|
||||
style: {
|
||||
transform: 'scale('+ s +', '+ s +')',
|
||||
}
|
||||
}, [
|
||||
vdom.h('div.ribbon-locator', {
|
||||
//key: 'ribbon-locator',
|
||||
return vdom.h('div.ribbon-set',
|
||||
{
|
||||
//key: 'ribbon-set',
|
||||
style: {
|
||||
// XXX should this be in vh???
|
||||
transform: 'translate3d(0px, '+ top +'px, 0px)',
|
||||
},
|
||||
},
|
||||
ribbons)
|
||||
])
|
||||
transform: 'scale('+ s +', '+ s +')',
|
||||
}
|
||||
}, [
|
||||
vdom.h('div.current-marker'),
|
||||
// ribbon locator...
|
||||
vdom.h('div.ribbon-locator',
|
||||
{
|
||||
//key: 'ribbon-locator',
|
||||
},
|
||||
ribbons),
|
||||
])
|
||||
},
|
||||
// XXX setup handlers (???)
|
||||
// XXX current image marker (???)
|
||||
@ -184,10 +273,6 @@ var VirtualDOMRibbonsPrototype = {
|
||||
.forEach(function(mark){ imgs.push(mark) })
|
||||
})
|
||||
|
||||
// continue offset calculation...
|
||||
var l = gids.indexOf(ref)
|
||||
var x = (-(l * vsize) - offset)
|
||||
|
||||
return vdom.h('div.ribbon'+base, {
|
||||
//key: 'ribbon-'+gid,
|
||||
|
||||
@ -197,20 +282,13 @@ var VirtualDOMRibbonsPrototype = {
|
||||
gid: JSON.stringify(gid)
|
||||
.replace(/^"(.*)"$/g, '$1'),
|
||||
},
|
||||
/*/ XXX
|
||||
style: {
|
||||
// XXX calling .centerImage(..) prevents this from updating...
|
||||
transform: 'translate3d('+ x +'vmin, 0px, 0px)',
|
||||
},
|
||||
//*/
|
||||
},
|
||||
imgs)
|
||||
},
|
||||
// XXX setup image handlers...
|
||||
// ...or move them up to viewer or some other spot (viewer?)...
|
||||
// XXX update image previews...
|
||||
// XXX update image proportions for rotation...
|
||||
makeImage: function(gid, size, state){
|
||||
// XXX update image proportions for rotated images... (???)
|
||||
makeImage: function(gid, size){
|
||||
var ig = this.imagegrid
|
||||
//size = this.state.tile_size = size
|
||||
size = size
|
||||
@ -220,6 +298,7 @@ var VirtualDOMRibbonsPrototype = {
|
||||
var images = this.imagegrid.images || {}
|
||||
var current = data.current == gid ? '.current' : ''
|
||||
|
||||
// resolve group preview cover...
|
||||
var image = images[gid] || {}
|
||||
var seen = []
|
||||
while(image.type == 'group'){
|
||||
@ -239,7 +318,7 @@ var VirtualDOMRibbonsPrototype = {
|
||||
// XXX BUG:
|
||||
// - setting this makes the images some times not change previews...
|
||||
// - removing this breaks .current class setting...
|
||||
//key: 'image-'+gid,
|
||||
key: 'image-'+gid,
|
||||
|
||||
attributes: {
|
||||
gid: JSON.stringify(gid)
|
||||
@ -247,19 +326,18 @@ var VirtualDOMRibbonsPrototype = {
|
||||
orientation: image.orientation,
|
||||
flipped: image.flipped,
|
||||
|
||||
//'preview-width': w,
|
||||
//'preview-height': h,
|
||||
// XXX preview size -- get this onload from image...
|
||||
//'preview-width': ..,
|
||||
//'preview-height': ..,
|
||||
},
|
||||
style: {
|
||||
//width: '',
|
||||
//height: '',
|
||||
//margin: '',
|
||||
|
||||
// XXX need to update this onload if changing preview
|
||||
// of same image...
|
||||
backgroundImage: 'url("'+ url +'")',
|
||||
}
|
||||
})
|
||||
},
|
||||
// XXX STUB: make marks handling more extensible... (???)
|
||||
// XXX STUB: make marks handling extensible... (???)
|
||||
makeImageMarks: function(gid){
|
||||
var that = this
|
||||
var marks = []
|
||||
@ -273,20 +351,67 @@ var VirtualDOMRibbonsPrototype = {
|
||||
|
||||
return marks
|
||||
.map(function(type){
|
||||
return that.makeImageMark(gid, type) })
|
||||
},
|
||||
makeImageMark: function(gid, type){
|
||||
return vdom.h('div.mark.'+(type || ''), {
|
||||
key: 'mark-'+type+'-'+gid,
|
||||
attributes: {
|
||||
gid: JSON.stringify(gid)
|
||||
.replace(/^"(.*)"$/g, '$1'),
|
||||
},
|
||||
})
|
||||
return vdom.h('div.mark.'+(type || ''), {
|
||||
key: 'mark-'+type+'-'+gid,
|
||||
attributes: {
|
||||
gid: JSON.stringify(gid)
|
||||
.replace(/^"(.*)"$/g, '$1'),
|
||||
},
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
// XXX add ability to hook in things like current image marker...
|
||||
|
||||
|
||||
// XXX these need .getImage(..) / .getRibbon(..) / .getRibbonLocator(..)
|
||||
centerRibbon: function(target){
|
||||
var ribbon = this.getRibbon(target)
|
||||
var locator = this.getRibbonLocator()
|
||||
|
||||
if(locator.length != 0 && ribbon.length != 0){
|
||||
var t = ribbon[0].offsetTop
|
||||
var h = ribbon[0].offsetHeight
|
||||
|
||||
locator.transform({ x: 0, y: this.px2vh(-(t + h/2)) + 'vh', z: 0 })
|
||||
}
|
||||
return this
|
||||
},
|
||||
centerImage: function(target, mode){
|
||||
target = this.getImage(target)
|
||||
var ribbon = this.getRibbon(target)
|
||||
|
||||
if(ribbon.length != 0){
|
||||
var l = target[0].offsetLeft
|
||||
var w = target[0].offsetWidth
|
||||
|
||||
var image_offset = mode == 'before' ? 0
|
||||
: mode == 'after' ? w
|
||||
: w/2
|
||||
|
||||
ribbon.transform({x: -this.px2vmin(l + image_offset) + 'vmin', y: 0, z: 0})
|
||||
}
|
||||
return this
|
||||
},
|
||||
|
||||
scale: function(scale){
|
||||
if(scale){
|
||||
this.state.scale = scale
|
||||
this.sync()
|
||||
|
||||
} else {
|
||||
return this.imagegrid.scale
|
||||
}
|
||||
},
|
||||
|
||||
// XXX not sure how to proceed with these...
|
||||
setImageHandler: function(evt, handler){
|
||||
},
|
||||
setRibbonHandler: function(evt, handler){
|
||||
},
|
||||
|
||||
|
||||
|
||||
clear: function(){
|
||||
delete this.state
|
||||
delete this.dom
|
||||
@ -349,6 +474,7 @@ object.makeConstructor('VirtualDOMRibbons',
|
||||
|
||||
/*********************************************************************/
|
||||
// XXX TODO:
|
||||
// - image size/proportions (single image view)
|
||||
// - shifting images/ribbons
|
||||
// - use .virtualdom.sync() + shadow animation instead of .ribbons.*
|
||||
// - would be nice to make this an alternative feature...
|
||||
@ -444,17 +570,25 @@ module.PartialRibbons = core.ImageGridFeatures.Feature({
|
||||
var img = this.ribbons.getImage(target)
|
||||
|
||||
// in-place update...
|
||||
// XXX this is very rigid, need to make this more
|
||||
// flexible and not hinder fast nav...
|
||||
if(img.length > 0){
|
||||
setTimeout((function(){
|
||||
this.ribbons.preventTransitions()
|
||||
this.updateRibbon(this.current)
|
||||
this.ribbons.restoreTransitions()
|
||||
}).bind(this), 200)
|
||||
// XXX need to account for running out of images and
|
||||
// not only on the current ribbon...
|
||||
if(!this.__partial_ribbon_update){
|
||||
this.__partial_ribbon_update = setTimeout((function(){
|
||||
delete this.__partial_ribbon_update
|
||||
this.ribbons.preventTransitions()
|
||||
this.updateRibbon(this.current)
|
||||
this.ribbons.restoreTransitions()
|
||||
}).bind(this), 150)
|
||||
}
|
||||
|
||||
// long-jump...
|
||||
} else {
|
||||
if(this.__partial_ribbon_update){
|
||||
clearTimeout(this.__partial_ribbon_update)
|
||||
delete this.__partial_ribbon_update
|
||||
}
|
||||
|
||||
this.updateRibbon(target)
|
||||
}
|
||||
}],
|
||||
|
||||
@ -491,12 +491,6 @@ module.ViewerActions = actions.Actions({
|
||||
'ribbon-image-separators',
|
||||
function(state){ this.config['ribbon-image-separators'] = state }) ],
|
||||
|
||||
/*
|
||||
setEmptyMsg: ['- Interface/Set message to be displayed when nothing is loaded.',
|
||||
function(msg, help){ this.ribbons
|
||||
&& this.ribbons.setEmptyMsg(msg, help) }],
|
||||
*/
|
||||
|
||||
|
||||
// align modes...
|
||||
// XXX these should also affect up/down navigation...
|
||||
@ -698,13 +692,13 @@ module.ViewerActions = actions.Actions({
|
||||
function(){
|
||||
// NOTE: the 0.2 is added to compensate for alignment/scaling
|
||||
// errors -- 2.99 images wide counts as 3 while 2.5 as 2.
|
||||
var w = Math.floor(this.ribbons.getScreenWidthImages() + 0.2)
|
||||
var w = Math.floor(this.screenwidth + 0.2)
|
||||
w += (w % 2) - 1
|
||||
this.prevImage(w)
|
||||
}],
|
||||
nextScreen: ['Navigate/Screen width forward',
|
||||
function(){
|
||||
var w = Math.floor(this.ribbons.getScreenWidthImages() + 0.2)
|
||||
var w = Math.floor(this.screenwidth + 0.2)
|
||||
w += (w % 2) - 1
|
||||
this.nextImage(w)
|
||||
}],
|
||||
|
||||
@ -287,7 +287,6 @@ var RibbonsClassPrototype = {
|
||||
return this.setElemGID($('<div class="mark">')
|
||||
.addClass(cls), gid)
|
||||
},
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -341,12 +340,10 @@ var RibbonsPrototype = {
|
||||
|
||||
|
||||
get parent(){
|
||||
return this.__parent
|
||||
},
|
||||
return this.__parent },
|
||||
// NOTE: this will reset locally referenced .images to .parent.images
|
||||
set parent(parent){
|
||||
this.__parent = parent
|
||||
|
||||
delete this.__images
|
||||
},
|
||||
|
||||
@ -355,8 +352,7 @@ var RibbonsPrototype = {
|
||||
// NOTE: images can be stored locally if no parent is set but will
|
||||
// get overridden as soon as .parent is set.
|
||||
get images(){
|
||||
return this.parent ? this.parent.images : this.__images
|
||||
},
|
||||
return this.parent ? this.parent.images : this.__images },
|
||||
set images(images){
|
||||
if(this.parent){
|
||||
this.parent.images = images
|
||||
@ -2564,13 +2560,7 @@ var RibbonsPrototype = {
|
||||
var t = ribbon[0].offsetTop
|
||||
var h = ribbon[0].offsetHeight
|
||||
|
||||
//locator.css('transform', 'translateY(-'+ (t + h/2) +'px)')
|
||||
//locator.transform({x: 0, y: -(t + h/2), z: 0})
|
||||
locator.transform({
|
||||
x: 0,
|
||||
y: this.px2vh(-(t + h/2)) + 'vh',
|
||||
z: 0,
|
||||
})
|
||||
locator.transform({ x: 0, y: this.px2vh(-(t + h/2)) + 'vh', z: 0 })
|
||||
|
||||
return this
|
||||
},
|
||||
@ -2601,21 +2591,12 @@ var RibbonsPrototype = {
|
||||
|
||||
var l = target[0].offsetLeft
|
||||
var w = target[0].offsetWidth
|
||||
//var w = this.getVisibleImageSize('width', 1, target)
|
||||
|
||||
|
||||
var image_offset = mode == 'before' ? 0
|
||||
: mode == 'after' ? w
|
||||
: w/2
|
||||
|
||||
// relative offset to vmin...
|
||||
var x = -this.px2vmin(l + image_offset) + 'vmin'
|
||||
|
||||
// absolute offset...
|
||||
//var x = -(l + image_offset)
|
||||
|
||||
//ribbon.css('transform', 'translateX(-'+ (l + image_offset) +'px)')
|
||||
ribbon.transform({x: x, y: 0, z: 0})
|
||||
ribbon.transform({x: -this.px2vmin(l + image_offset) + 'vmin', y: 0, z: 0})
|
||||
|
||||
return this
|
||||
},
|
||||
@ -2680,16 +2661,6 @@ var RibbonsPrototype = {
|
||||
|
||||
return this
|
||||
},
|
||||
|
||||
|
||||
// XXX
|
||||
setEmptyMsg: function(msg, help){
|
||||
this.getRibbonSet()
|
||||
.attr({
|
||||
'empty-msg': msg || '',
|
||||
'empty-help': help || '',
|
||||
})
|
||||
},
|
||||
}
|
||||
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user