now viewer should not err when empty + cleanup + some refactoring...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>

ui (gen4)/index.html

@@ -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>

ui (gen4)/ribbons.js

@@ -72,8 +72,8 @@ module.RibbonsClassPrototype = {
 	createViewer: function(){
 		return $('<div>')
 			.addClass('viewer')
-			.append($('<div>')
+			//.append($('<div>')
-				.addClass('ribbon-set'))
+			//	.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()
+			this.getRibbonSet().remove()
-			// reset offsets...
-			this.viewer.find('.ribbon-set').css({
-				top: '',
-			})
 
 		// 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
 

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

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 = 
+var PartialRibbonsActions = actions.Actions({
-module.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 =
+var SingleImageActions = actions.Actions({
-module.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 =
+var BoundsIndicatorsActions = actions.Actions({
-module.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 =
+var CurrentImageIndicatorActions = actions.Actions({
-module.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',
 })