diff --git a/ui (gen4)/data.js b/ui (gen4)/data.js index 4c73bad6..62ff8c8a 100755 --- a/ui (gen4)/data.js +++ b/ui (gen4)/data.js @@ -247,12 +247,9 @@ module.DataPrototype = { prefix = prefix == null ? 'G' : prefix var gid = prefix + Date.now() while(this.ribbon_order.indexOf(gid) >= 0 - || this.order.indexOf(gid) >= 0 - || this._gid_cache.indexOf(gid) >= 0){ + || this.order.indexOf(gid) >= 0){ gid = prefix + Date.now() } - // XXX not sure if this is a good idea... - this._gid_cache.push(gid) return gid }, @@ -1019,28 +1016,42 @@ module.DataPrototype = { // // NOTE: shiftImageUp/shiftImageDown will create new ribbons when // shifting from first/last ribbons respectively. + // NOTE: shiftImageUp/shiftImageUp will remove an empty ribbon after + // shifting the last image out... // NOTE: none of these change .current // // XXX should these be here?? shiftImageLeft: function(gid){ return this.shiftImage(gid, -1, 'offset') }, // Gen2 shiftImageRight: function(gid){ return this.shiftImage(gid, 1, 'offset') }, // Gen2 - // XXX test... shiftImageUp: function(gid){ var g = gid.constructor.name == 'Array' ? gid[0] : gid + var r = this.getRibbonOrder(g) // check if we need to create a ribbon here... - if(this.getRibbonOrder(g) == 0){ + if(r == 0){ this.newRibbon(g) } - return this.shiftImage(gid, this.getRibbonOrder(g)-1) + var res = this.shiftImage(gid, r-1) + // clear empty ribbon... + if(this.ribbons[this.ribbon_order[r]].len() == 0){ + r = this.ribbon_order.splice(r, 1)[0] + delete this.ribbons[r] + } + return res }, - // XXX test... shiftImageDown: function(gid){ var g = gid.constructor.name == 'Array' ? gid[0] : gid + var r = this.getRibbonOrder(g) // check if we need to create a ribbon here... - if(this.getRibbonOrder(g) == this.ribbon_order.length-1){ + if(r == this.ribbon_order.length-1){ this.newRibbon(g, 'below') } - return this.shiftImage(gid, this.getRibbonOrder(g)+1) + var res = this.shiftImage(gid, r+1) + // clear empty ribbon... + if(this.ribbons[this.ribbon_order[r]].len() == 0){ + r = this.ribbon_order.splice(r, 1)[0] + delete this.ribbons[r] + } + return res }, // Shift ribbon vertically... @@ -1458,8 +1469,6 @@ module.DataPrototype = { this.ribbon_order = [] this.ribbons = {} - this._gid_cache = [] - return this }, diff --git a/ui (gen4)/ribbons.js b/ui (gen4)/ribbons.js index ba3b34a2..07d48740 100755 --- a/ui (gen4)/ribbons.js +++ b/ui (gen4)/ribbons.js @@ -448,7 +448,13 @@ module.RibbonsPrototype = { // .placeImage(target, image, 'after') // -> image // - // NOTE: mode is defaults to 'before'. + // Place target at ribbon start/end: + // .placeImage(target, ribbon) + // .placeImage(target, ribbon, 'before') + // .placeImage(target, ribbon, 'after') + // -> image + // + // NOTE: mode defaults to 'before'. // NOTE: if image gid does not exist it will be created. // // XXX interaction animation... @@ -458,6 +464,7 @@ module.RibbonsPrototype = { mode = mode == null ? 'before' : mode var img = this.getImage(target) img = img.length == 0 ? this.createImage(target) : img + var r = this.getRibbon(to) // offset on same ribbon... if(typeof(to) == typeof(123)){ @@ -470,6 +477,19 @@ module.RibbonsPrototype = { to = images.length > 0 ? images.eq(Math.min(Math.abs(i), images.length)-1) : img + if(to === img){ + return to + } + + // append/prepend to ribbon... + } else if(r.length > 0 && r.hasClass('ribbon')){ + if(mode == 'before'){ + r.append(img) + } else { + r.prepend(img) + } + return this.updateImage(img) + // relative to image... } else { var i = mode == 'before' ? -1 : 1 diff --git a/ui (gen4)/ui.js b/ui (gen4)/ui.js index af844c22..635a103e 100755 --- a/ui (gen4)/ui.js +++ b/ui (gen4)/ui.js @@ -102,6 +102,21 @@ module.GLOBAL_KEYBOARD = { F: { ctrl: 'F11', }, + + // XXX testing... + Home: doc('', function(){ a.firstImage() }), + End: doc('', function(){ a.lastImage() }), + Left: doc('', function(){ a.prevImage() }), + Right: doc('', function(){ a.nextImage() }), + Up: { + default: doc('', function(){ a.prevRibbon() }), + shift: doc('', function(){ a.shiftImageUp() }), + }, + Down: { + default: doc('', function(){ a.nextRibbon() }), + shift: doc('', function(){ a.shiftImageDown() }), + } + }, } diff --git a/ui (gen4)/viewer.js b/ui (gen4)/viewer.js index e8d245ae..2e59d8ed 100755 --- a/ui (gen4)/viewer.js +++ b/ui (gen4)/viewer.js @@ -165,13 +165,15 @@ actions.Actions({ lastRibbon: ['Focus next ribbon', function(){ this.focusRibbon('last') }], + // XXX check that going up/down must be stable and not drift to + // adjacent images... prevRibbon: ['Focus previous ribbon', function(){ this.focusRibbon('before') }], nextRibbon: ['Focus next ribbon', function(){ this.focusRibbon('after') }], - // basic editing... + // basic ribbon editing... // // NOTE: for all of these, current/ribbon image is a default... // @@ -187,6 +189,9 @@ actions.Actions({ var cur = this.data.getImage() var next = this.data.getImage(direction) + next = next == null + ? this.data.getImage(direction == 'next' ? 'prev' : 'next') + : next this.data.shiftImageUp(cur) this.focusImage(next) @@ -207,6 +212,9 @@ actions.Actions({ var cur = this.data.getImage() var next = this.data.getImage(direction) + next = next == null + ? this.data.getImage(direction == 'next' ? 'prev' : 'next') + : next this.data.shiftImageDown(cur) this.focusImage(next) @@ -216,49 +224,70 @@ actions.Actions({ this.data.shiftImageDown(target) } }], - shiftImageUpNewRibbon: ['', + shiftImageUpNewRibbon: ['Shift image up to a new empty ribbon', function(target){ this.data.newRibbon(target) this.shiftImageUp(target) }], - shiftImageDownNewRibbon: ['', + shiftImageDownNewRibbon: ['Shift image down to a new empty ribbon', function(target){ this.data.newRibbon(target, 'below') this.shiftImageUp(target) }], // XXX is tracking direction here correct??? - shiftImageLeft: ['', + shiftImageLeft: ['Shift image left', function(target){ if(target == null){ this.direction = 'left' } this.data.shiftImageLeft(target) - // XXX is this the right way to go/??? this.focusImage() }], // XXX is tracking direction here correct??? - shiftImageRight: ['', + shiftImageRight: ['Shift image right', function(target){ if(target == null){ this.direction = 'right' } - this.data.shiftImageLeft(target) - // XXX is this the right way to go/??? + this.data.shiftImageRight(target) this.focusImage() }], - shiftRibbonUp: ['', + shiftRibbonUp: ['Shift ribbon up', function(target){ this.data.shiftRibbonUp(target) // XXX is this the right way to go/??? this.focusImage() }], - shiftRibbonDown: ['', + shiftRibbonDown: ['Shift ribbon down', function(target){ this.data.shiftRibbonDown(target) // XXX is this the right way to go/??? this.focusImage() }], + + // XXX + sortImages: [ + function(){ }], + // XXX + reverseImages: [ + function(){ }], + + + // basic image editing... + // + // XXX + rotateCW: [ + function(){ }], + rotateCCW: [ + function(){ }], + flipVertical: [ + function(){ }], + flipHorizontal: [ + function(){ }], + + + // crop... }) @@ -355,12 +384,12 @@ actions.Actions(Client, { this.ribbons.setBaseRibbon(r) }], - // XXX + // XXX need screen width in images... prevScreen: ['Focus previous image one screen width away', function(){ // XXX }], - // XXX + // XXX need screen width in images... nextScreen: ['Focus next image one screen width away', function(){ // XXX @@ -369,36 +398,44 @@ actions.Actions(Client, { // XXX shiftImageUp: [ - function(){ - // XXX + function(target){ + return function(){ + // XXX this is cheating... + this.ribbons.updateData(this.data) + this.focusImage() + } }], shiftImageDown: [ - function(){ - // XXX + function(target){ + return function(){ + // XXX this is cheating... + this.ribbons.updateData(this.data) + this.focusImage() + } }], shiftImageUpNewRibbon: [ - function(){ - // XXX + function(target){ + // XXX only create a new ribbon... }], shiftImageDownNewRibbon: [ - function(){ - // XXX + function(target){ + // XXX only create a new ribbon... }], shiftImageLeft: [ - function(){ - // XXX + function(target){ + this.ribbons.placeImage(target, -1) }], shiftImageRight: [ - function(){ - // XXX + function(target){ + this.ribbons.placeImage(target, 1) }], shiftRibbonUp: [ - function(){ + function(target){ // XXX }], shiftRibbonDown: [ - function(){ + function(target){ // XXX }], })