mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-31 11:20:09 +00:00
now viewer should not err when empty + cleanup + some refactoring...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
04eb7ba591
commit
52d9564345
@ -156,11 +156,11 @@ require('nw.gui').Window.get().showDevTools()
|
||||
|
||||
<div class="viewer gray marks-visible">
|
||||
|
||||
<div class="ribbon-set">
|
||||
<!--div class="ribbon-set"-->
|
||||
<!-- DEBUG: remove when not needed... -->
|
||||
<div class="point" title="current origin point"> </div>
|
||||
<!--div class="point" title="current origin point"> </div-->
|
||||
<!-- DEBUG: end -->
|
||||
</div>
|
||||
<!--/div-->
|
||||
|
||||
|
||||
<!-- XXX should these be here???
|
||||
@ -171,7 +171,7 @@ require('nw.gui').Window.get().showDevTools()
|
||||
-->
|
||||
|
||||
<!-- DEBUG: remove when not needed... -->
|
||||
<div class="container-center"> </div>
|
||||
<!--div class="container-center"> </div-->
|
||||
<!-- DEBUG: end -->
|
||||
|
||||
</div>
|
||||
|
||||
@ -72,8 +72,8 @@ module.RibbonsClassPrototype = {
|
||||
createViewer: function(){
|
||||
return $('<div>')
|
||||
.addClass('viewer')
|
||||
.append($('<div>')
|
||||
.addClass('ribbon-set'))
|
||||
//.append($('<div>')
|
||||
// .addClass('ribbon-set'))
|
||||
},
|
||||
// XXX NOTE: quots removal might render this incompatible with older data formats...
|
||||
createRibbon: function(gids){
|
||||
@ -135,6 +135,9 @@ module.RibbonsPrototype = {
|
||||
// XXX need a better way of doing this...
|
||||
preventTransitions: function(target){
|
||||
target = target || this.viewer
|
||||
if(target.length == 0){
|
||||
return this
|
||||
}
|
||||
target.addClass('no-transitions')
|
||||
var t = target[0]
|
||||
getComputedStyle(t).webkitTransition
|
||||
@ -152,6 +155,9 @@ module.RibbonsPrototype = {
|
||||
} else {
|
||||
target = target || this.viewer
|
||||
}
|
||||
if(target.length == 0){
|
||||
return this
|
||||
}
|
||||
// sync...
|
||||
if(now){
|
||||
target.removeClass('no-transitions')
|
||||
@ -237,7 +243,7 @@ module.RibbonsPrototype = {
|
||||
// Get ribbon set scale...
|
||||
//
|
||||
getScale: function(){
|
||||
return getElementScale(this.viewer.find('.ribbon-set'))
|
||||
return getElementScale(this.getRibbonSet())
|
||||
},
|
||||
|
||||
// Set ribbon set scale...
|
||||
@ -251,7 +257,11 @@ module.RibbonsPrototype = {
|
||||
//
|
||||
// XXX if chrome 38 renders images blurry uncomment the fix...
|
||||
setScale: function(scale, t, l){
|
||||
var ribbon_set = this.viewer.find('.ribbon-set')
|
||||
var ribbon_set = this.getRibbonSet()
|
||||
|
||||
if(ribbon_set.length == 0){
|
||||
return this
|
||||
}
|
||||
|
||||
if(t != null && l != null){
|
||||
this.setOrigin(t, l)
|
||||
@ -280,7 +290,7 @@ module.RibbonsPrototype = {
|
||||
// Get current ribbon-set origin...
|
||||
//
|
||||
getOrigin: function(){
|
||||
return getElementOrigin(this.viewer.find('.ribbon-set'))
|
||||
return getElementOrigin(this.getRibbonSet())
|
||||
},
|
||||
|
||||
// Set ribbon set origin...
|
||||
@ -301,7 +311,12 @@ module.RibbonsPrototype = {
|
||||
//
|
||||
// XXX DEBUG: remove point updating when not needed...
|
||||
setOrigin: function(a, b){
|
||||
var ribbon_set = this.viewer.find('.ribbon-set')
|
||||
var ribbon_set = this.getRibbonSet()
|
||||
|
||||
if(ribbon_set.length == 0){
|
||||
return this
|
||||
}
|
||||
|
||||
var ro = ribbon_set.offset()
|
||||
var s = this.getScale()
|
||||
|
||||
@ -378,9 +393,17 @@ module.RibbonsPrototype = {
|
||||
// NOTE: the .shadow element is essentially a ribbon.
|
||||
//
|
||||
// XXX should we also have a ribbon shadow???
|
||||
// XXX when this cant find a target it will return an empty function,
|
||||
// not sure if this is correct...
|
||||
makeShadow: function(target, animate, delay){
|
||||
delay = delay || 200
|
||||
var img = this.getImage(target)
|
||||
|
||||
if(img.length == 0){
|
||||
// XXX is this correct???
|
||||
return function(){}
|
||||
}
|
||||
|
||||
var gid = this.getElemGID(img)
|
||||
var s = this.getScale()
|
||||
var vo = this.viewer.offset()
|
||||
@ -470,6 +493,26 @@ module.RibbonsPrototype = {
|
||||
|
||||
// Contextual getters...
|
||||
|
||||
// Get ribbon-set...
|
||||
//
|
||||
// Get ribbon set if it exists
|
||||
// .getRibbonSet()
|
||||
// -> ribbon-set
|
||||
//
|
||||
// Get ribbon set if it exists or create it if not
|
||||
// .getRibbonSet(true)
|
||||
// -> ribbon-set
|
||||
//
|
||||
getRibbonSet: function(create){
|
||||
var ribbon_set = this.viewer.find('.ribbon-set')
|
||||
if(ribbon_set.length == 0 && create){
|
||||
ribbon_set = $('<div/>')
|
||||
.addClass('ribbon-set')
|
||||
.appendTo(this.viewer)
|
||||
}
|
||||
return ribbon_set
|
||||
},
|
||||
|
||||
// Get image...
|
||||
//
|
||||
// Get current image:
|
||||
@ -676,6 +719,7 @@ module.RibbonsPrototype = {
|
||||
var ribbon = this.getRibbon(target)
|
||||
var i = this.getRibbonOrder(ribbon)
|
||||
ribbon = ribbon.length == 0 ? this.createRibbon(target) : ribbon
|
||||
var ribbon_set = this.getRibbonSet(true)
|
||||
|
||||
var ribbons = this.viewer.find('.ribbon')
|
||||
|
||||
@ -694,7 +738,7 @@ module.RibbonsPrototype = {
|
||||
|
||||
// place the ribbon...
|
||||
if(ribbons.length == 0 || ribbons.length <= position){
|
||||
this.viewer.find('.ribbon-set').append(ribbon)
|
||||
ribbon_set.append(ribbon)
|
||||
|
||||
} else if(i == -1 || i > position) {
|
||||
ribbons.eq(position).before(ribbon)
|
||||
@ -735,6 +779,10 @@ module.RibbonsPrototype = {
|
||||
placeImage: function(target, to, mode){
|
||||
mode = mode == null ? 'before' : mode
|
||||
|
||||
if(this.getRibbonSet().length == 0){
|
||||
return
|
||||
}
|
||||
|
||||
target = target == null || target.constructor !== Array ? [target] : target
|
||||
|
||||
// get or make images...
|
||||
@ -1193,11 +1241,7 @@ module.RibbonsPrototype = {
|
||||
clear: function(gids){
|
||||
// clear all...
|
||||
if(gids == null || gids == '*'){
|
||||
this.viewer.find('.ribbon').remove()
|
||||
// reset offsets...
|
||||
this.viewer.find('.ribbon-set').css({
|
||||
top: '',
|
||||
})
|
||||
this.getRibbonSet().remove()
|
||||
|
||||
// clear one or more gids...
|
||||
} else {
|
||||
@ -1543,7 +1587,11 @@ module.RibbonsPrototype = {
|
||||
// XXX custom align point woud also be nice...
|
||||
// (top, bottom, center, %, px)
|
||||
centerRibbon: function(target, offset, scale){
|
||||
var ribbon_set = this.viewer.find('.ribbon-set')
|
||||
var ribbon_set = this.getRibbonSet()
|
||||
|
||||
if(ribbon_set.length == 0){
|
||||
return this
|
||||
}
|
||||
|
||||
//this.setOrigin(target)
|
||||
|
||||
@ -1575,9 +1623,13 @@ module.RibbonsPrototype = {
|
||||
scale = scale || this.getScale()
|
||||
var ribbon = this.getRibbon(target)
|
||||
|
||||
if(ribbon.length == 0){
|
||||
return this
|
||||
}
|
||||
|
||||
var rl = ribbon.offset().left
|
||||
var il = target.offset().left
|
||||
//var rsl = this.viewer.find('.ribbon-set').offset().left
|
||||
//var rsl = this.getRibbonSet().offset().left
|
||||
var W = this.viewer.width() * scale
|
||||
var w = target.width() * scale
|
||||
|
||||
|
||||
@ -179,24 +179,6 @@ $(function(){
|
||||
// XXX
|
||||
window.a = testing.setupActions()
|
||||
|
||||
// setup features...
|
||||
/*
|
||||
// XXX I do not fully understand it yet, but PartialRibbons must be
|
||||
// setup BEFORE AlignRibbonsTo*, otherwise the later will break
|
||||
// on shifting an image to a new ribbon...
|
||||
// To reproduce:
|
||||
// - setupe RibbonAlignToFirst first
|
||||
// - go to top ribbon
|
||||
// - shift image up
|
||||
viewer.PartialRibbons.setup(a)
|
||||
viewer.AlignRibbonsToImageOrder.setup(a)
|
||||
//viewer.AlignRibbonsToFirstImage.setup(a)
|
||||
viewer.SingleImageView.setup(a)
|
||||
viewer.ShiftAnimation.setup(a)
|
||||
viewer.BoundsIndicators.setup(a)
|
||||
viewer.CurrentImageIndicator.setup(a)
|
||||
*/
|
||||
|
||||
viewer.Features.setup(a, [
|
||||
// XXX I do not fully understand it yet, but PartialRibbons must be
|
||||
// setup BEFORE AlignRibbonsTo*, otherwise the later will break
|
||||
|
||||
@ -36,6 +36,10 @@ function reloadAfter(transitions){
|
||||
var updateImagePosition =
|
||||
module.updateImagePosition =
|
||||
function updateImagePosition(actions, target){
|
||||
if(actions.ribbons.getRibbonSet().length == 0){
|
||||
return
|
||||
}
|
||||
|
||||
target = target || actions.current
|
||||
target = target instanceof jQuery
|
||||
? actions.ribbons.getElemGID(target)
|
||||
@ -890,9 +894,6 @@ actions.Actions(Client, {
|
||||
|
||||
|
||||
/*********************************************************************/
|
||||
// XXX do a simple feature framework...
|
||||
// ...need something like:
|
||||
// Features(['feature_a', 'feature_b'], action).setup()
|
||||
|
||||
var FeatureProto =
|
||||
module.FeatureProto = {
|
||||
@ -1018,9 +1019,7 @@ module.Features = Object.create(FeatureSet)
|
||||
//---------------------------------------------------------------------
|
||||
// NOTE: this is split out to an action so as to enable ui elements to
|
||||
// adapt to ribbon size changes...
|
||||
var PartialRibbonsActions =
|
||||
module.PartialRibbonsActions =
|
||||
actions.Actions({
|
||||
var PartialRibbonsActions = actions.Actions({
|
||||
updateRibbon: ['Update partial ribbon size',
|
||||
function(target, w, size, threshold){
|
||||
target = target instanceof jQuery
|
||||
@ -1145,9 +1144,7 @@ module.PartialRibbons = Feature({
|
||||
|
||||
|
||||
//---------------------------------------------------------------------
|
||||
var SingleImageActions =
|
||||
module.SingleImageActions =
|
||||
actions.Actions({
|
||||
var SingleImageActions = actions.Actions({
|
||||
toggleSingleImage: ['Toggle single image view',
|
||||
// XXX this is wrong!!!
|
||||
CSSClassToggler(
|
||||
@ -1155,6 +1152,7 @@ actions.Actions({
|
||||
'single-image-mode') ],
|
||||
})
|
||||
|
||||
// helper...
|
||||
// XXX should this be an action???
|
||||
function updateImageProportions(){
|
||||
// XXX
|
||||
@ -1228,6 +1226,9 @@ function updateImageProportions(){
|
||||
//
|
||||
var SingleImageView =
|
||||
module.SingleImageView = Feature({
|
||||
title: '',
|
||||
doc: '',
|
||||
|
||||
tag: 'ui-single-image-view',
|
||||
|
||||
actions: SingleImageActions,
|
||||
@ -1266,6 +1267,9 @@ module.SingleImageView = Feature({
|
||||
// as it is now???
|
||||
var AlignRibbonsToImageOrder =
|
||||
module.AlignRibbonsToImageOrder = Feature({
|
||||
title: '',
|
||||
doc: '',
|
||||
|
||||
tag: 'ui-ribbon-align-to-order',
|
||||
|
||||
handlers: [
|
||||
@ -1278,6 +1282,9 @@ module.AlignRibbonsToImageOrder = Feature({
|
||||
//---------------------------------------------------------------------
|
||||
var AlignRibbonsToFirstImage =
|
||||
module.AlignRibbonsToFirstImage = Feature({
|
||||
title: '',
|
||||
doc: '',
|
||||
|
||||
tag: 'ui-ribbon-align-to-first',
|
||||
|
||||
handlers: [
|
||||
@ -1291,6 +1298,9 @@ module.AlignRibbonsToFirstImage = Feature({
|
||||
// XXX at this point this does not support target lists...
|
||||
var ShiftAnimation =
|
||||
module.ShiftAnimation = Feature({
|
||||
title: '',
|
||||
doc: '',
|
||||
|
||||
tag: 'ui-animation',
|
||||
|
||||
handlers: [
|
||||
@ -1320,11 +1330,12 @@ module.ShiftAnimation = Feature({
|
||||
|
||||
|
||||
//---------------------------------------------------------------------
|
||||
var BoundsIndicatorsActions =
|
||||
module.BoundsIndicatorsActions =
|
||||
actions.Actions({
|
||||
var BoundsIndicatorsActions = actions.Actions({
|
||||
flashIndicator: ['Flash an indicator',
|
||||
function(direction){
|
||||
if(this.ribbons.getRibbonSet().length == 0){
|
||||
return
|
||||
}
|
||||
var cls = {
|
||||
// shift up/down...
|
||||
up: '.up-indicator',
|
||||
@ -1353,6 +1364,7 @@ actions.Actions({
|
||||
}],
|
||||
})
|
||||
|
||||
// helper...
|
||||
function didAdvance(indicator){
|
||||
return function(){
|
||||
var img = this.data.current
|
||||
@ -1366,6 +1378,9 @@ function didAdvance(indicator){
|
||||
|
||||
var BoundsIndicators =
|
||||
module.BoundsIndicators = Feature({
|
||||
title: '',
|
||||
doc: '',
|
||||
|
||||
tag: 'ui-bounds-indicators',
|
||||
|
||||
actions: BoundsIndicatorsActions,
|
||||
@ -1436,15 +1451,18 @@ module.BoundsIndicators = Feature({
|
||||
|
||||
|
||||
//---------------------------------------------------------------------
|
||||
var CurrentImageIndicatorActions =
|
||||
module.CurrentImageIndicatorActions =
|
||||
actions.Actions({
|
||||
var CurrentImageIndicatorActions = actions.Actions({
|
||||
updateCurrentImageIndicator: ['Update current image indicator',
|
||||
function(target, update_border){
|
||||
var ribbon_set = this.ribbons.getRibbonSet()
|
||||
|
||||
if(ribbon_set.length == 0){
|
||||
return this
|
||||
}
|
||||
|
||||
var scale = this.ribbons.getScale()
|
||||
var cur = this.ribbons.getImage(target)
|
||||
var ribbon = this.ribbons.getRibbon(target)
|
||||
var ribbon_set = this.ribbons.viewer.find('.ribbon-set')
|
||||
|
||||
var marker = ribbon.find('.current-marker')
|
||||
|
||||
@ -1515,9 +1533,10 @@ actions.Actions({
|
||||
|
||||
var CurrentImageIndicator =
|
||||
module.CurrentImageIndicator = Feature({
|
||||
tag: 'ui-current-image-indicator',
|
||||
title: '',
|
||||
doc: '',
|
||||
|
||||
actions: CurrentImageIndicatorActions,
|
||||
tag: 'ui-current-image-indicator',
|
||||
|
||||
config: {
|
||||
'current-image-border': 3,
|
||||
@ -1529,6 +1548,8 @@ module.CurrentImageIndicator = Feature({
|
||||
'current-image-indicator-fadein': 500,
|
||||
},
|
||||
|
||||
actions: CurrentImageIndicatorActions,
|
||||
|
||||
handlers: [
|
||||
// move marker to current image...
|
||||
[ 'focusImage.post',
|
||||
@ -1589,6 +1610,9 @@ module.CurrentImageIndicator = Feature({
|
||||
// XXX
|
||||
var ImageStateIndicator =
|
||||
module.ImageStateIndicator = Feature({
|
||||
title: '',
|
||||
doc: '',
|
||||
|
||||
tag: 'ui-image-state-indicator',
|
||||
})
|
||||
|
||||
@ -1598,6 +1622,9 @@ module.ImageStateIndicator = Feature({
|
||||
// XXX
|
||||
var GlobalStateIndicator =
|
||||
module.GlobalStateIndicator = Feature({
|
||||
title: '',
|
||||
doc: '',
|
||||
|
||||
tag: 'ui-global-state-indicator',
|
||||
})
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user