')
+ // .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 = $('
')
+ .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
diff --git a/ui (gen4)/ui.js b/ui (gen4)/ui.js
index ef832523..552ed79c 100755
--- a/ui (gen4)/ui.js
+++ b/ui (gen4)/ui.js
@@ -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
diff --git a/ui (gen4)/viewer.js b/ui (gen4)/viewer.js
index 0e660ffe..71051ee0 100755
--- a/ui (gen4)/viewer.js
+++ b/ui (gen4)/viewer.js
@@ -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',
})