diff --git a/ui (gen4)/features/filesystem.js b/ui (gen4)/features/filesystem.js index 58b80b42..5cae58d2 100755 --- a/ui (gen4)/features/filesystem.js +++ b/ui (gen4)/features/filesystem.js @@ -594,7 +594,7 @@ var FileSystemLoaderUIActions = actions.Actions({ } // indicate that we are working... - var spinner = make($('
')) + var spinner = make('...') // XXX we do not need to actually read anything.... //file.loadIndex(path, that.config['index-dir'], this.logger) @@ -868,7 +868,7 @@ var FileSystemSaveHistoryUIActions = actions.Actions({ } // indicate that we are working... - var spinner = make($('
')) + var spinner = make('...') that.loadSaveHistoryList() .catch(function(err){ diff --git a/ui (gen4)/features/metadata.js b/ui (gen4)/features/metadata.js index 0e45afd2..261d5634 100755 --- a/ui (gen4)/features/metadata.js +++ b/ui (gen4)/features/metadata.js @@ -564,7 +564,7 @@ module.MetadataFSUI = core.ImageGridFeatures.Feature({ // add a loading indicator... // NOTE: this will get overwritten when calling .updateMetadata() data.push('---') - data.push($('
')) + data.push('...') client.update() reader.then(function(data){ diff --git a/ui (gen4)/features/sharp.js b/ui (gen4)/features/sharp.js index b3185ae0..5cfc7fab 100755 --- a/ui (gen4)/features/sharp.js +++ b/ui (gen4)/features/sharp.js @@ -107,7 +107,7 @@ var SharpActions = actions.Actions({ sizes = (this.config['preview-normalized'] ? sizes .map(function(s){ - return cfg_sizes.filter(function(c){ return c > s }).pop() || s }) + return cfg_sizes.filter(function(c){ return c >= s }).pop() || s }) : sizes) .unique() diff --git a/ui (gen4)/features/ui-single-image.js b/ui (gen4)/features/ui-single-image.js index 138f0df2..1f4f8f72 100755 --- a/ui (gen4)/features/ui-single-image.js +++ b/ui (gen4)/features/ui-single-image.js @@ -17,8 +17,7 @@ var core = require('features/core') /*********************************************************************/ -// helper... - +// // Change image proportions depending on scale... // // A) Small image -- min(screenwidth, screenheight) > threshold @@ -75,125 +74,6 @@ var core = require('features/core') // // NOTE: this in part does the same job as .ribbons.correctImageProportionsForRotation(..) // -// XXX should this be an action??? -function updateImageProportions(){ - var that = this - var threshold = this.config['single-image-proportions-threshold'] - - if(!threshold || threshold == -1){ - return - } - - var viewer = this.ribbons.viewer - var img = this.ribbons.getImage() - - var w = img.outerWidth() - var h = img.outerHeight() - - // inner diameter - var di = Math.min(h, w) - // outer diameter -- (m)ax - var dm = Math.max(h, w) - - //var c = Math.min(this.screenwidth, this.screenheight) - var c = this.screenfit - - // change proportions... - if(c < threshold){ - var images = viewer.find('.ribbon .image') - - var W = viewer.width() - var H = viewer.height() - - // inner diameter - var Di = Math.min(W, H) - // outer diameter -- (m)ax - var Dm = Math.max(W, H) - - - // get dimensional scale.... - var s = Di / di - // image dimension delta... - var d = - // the maximum difference between image and screen proportions... - (Dm / s - di) - // coefficient: 0 : c == threshold -> 1 : c == 1 - * (threshold/c - 1) - // new size... - var n = di + d - - // the amount to compensate ribbon offset for per image... - var x = n - dm - - - if(n == dm){ - return - } - - getAnimationFrame(function(){ - that.ribbons.preventTransitions() - - // horizontal viewer... - if(Di == H){ - var a = 'width' - var b = 'height' - - // vertical viewer... - } else { - var a = 'height' - var b = 'width' - } - - images - .each(function(_, img){ - var o = img.getAttribute('orientation') - o = o == null ? 0 : o - - // rotated images... - if(o == 90 || o == 270){ - img.style[a] = '' - img.style[b] = n + 'px' - - img.style.margin = -(n - di)/2 +'px '+ (n - di)/2 +'px' - - } else { - img.style[a] = n + 'px' - img.style[b] = '' - - img.style.margin = '' - } - }) - - that.ribbons - .centerImage() - .restoreTransitions(true) - }) - - // reset proportions to square... - } else if(w != h) { - var images = viewer.find('.ribbon .image') - - getAnimationFrame(function(){ - that.ribbons.preventTransitions() - - images - .each(function(_, img){ - img.style.width = '' - img.style.height = '' - - img.style.margin = '' - }) - - that.ribbons - .centerImage() - .restoreTransitions(true) - }) - } -} - - - -//--------------------------------------------------------------------- var SingleImageActions = actions.Actions({ config: { @@ -223,6 +103,123 @@ var SingleImageActions = actions.Actions({ '-single-image-redraw-on-focus': true, }, + updateImageProportions: ['- Interface/', + function(){ + var that = this + var threshold = this.config['single-image-proportions-threshold'] + + if(!threshold || threshold == -1){ + return + } + + var viewer = this.ribbons.viewer + var img = this.ribbons.getImage() + + var w = img.outerWidth() + var h = img.outerHeight() + + // inner diameter + var di = Math.min(h, w) + // outer diameter -- (m)ax + var dm = Math.max(h, w) + + //var c = Math.min(this.screenwidth, this.screenheight) + var c = this.screenfit + + // change proportions... + if(c < threshold){ + var images = viewer.find('.ribbon .image') + + var W = viewer.width() + var H = viewer.height() + + // inner diameter + var Di = Math.min(W, H) + // outer diameter -- (m)ax + var Dm = Math.max(W, H) + + + // get dimensional scale.... + var s = Di / di + // image dimension delta... + var d = + // the maximum difference between image and screen proportions... + (Dm / s - di) + // coefficient: 0 : c == threshold -> 1 : c == 1 + * (threshold/c - 1) + // new size... + var n = di + d + + // the amount to compensate ribbon offset for per image... + var x = n - dm + + + if(n == dm){ + return + } + + getAnimationFrame(function(){ + that.ribbons.preventTransitions() + + // horizontal viewer... + if(Di == H){ + var a = 'width' + var b = 'height' + + // vertical viewer... + } else { + var a = 'height' + var b = 'width' + } + + images + .each(function(_, img){ + var o = img.getAttribute('orientation') + o = o == null ? 0 : o + + // rotated images... + if(o == 90 || o == 270){ + img.style[a] = '' + img.style[b] = n + 'px' + + img.style.margin = -(n - di)/2 +'px '+ (n - di)/2 +'px' + + } else { + img.style[a] = n + 'px' + img.style[b] = '' + + img.style.margin = '' + } + }) + + that.ribbons + .centerImage() + .restoreTransitions(true) + }) + + // reset proportions to square... + } else if(w != h) { + var images = viewer.find('.ribbon .image') + + getAnimationFrame(function(){ + that.ribbons.preventTransitions() + + images + .each(function(_, img){ + img.style.width = '' + img.style.height = '' + + img.style.margin = '' + }) + + that.ribbons + .centerImage() + .restoreTransitions(true) + }) + } + }], + + toggleSingleImage: ['Interface/Toggle single image view', toggler.CSSClassToggler( function(){ return this.ribbons.viewer }, @@ -278,7 +275,7 @@ module.SingleImageView = core.ImageGridFeatures.Feature({ // singe image mode -- set image proportions... if(this.toggleSingleImage('?') == 'on'){ - updateImageProportions.call(this) + this.updateImageProportions() this.config['single-image-scale'] = this[this.config['single-image-scale-unit']] @@ -292,7 +289,7 @@ module.SingleImageView = core.ImageGridFeatures.Feature({ ['resizeRibbon', function(){ if(this.toggleSingleImage('?') == 'on'){ - updateImageProportions.call(this) + this.updateImageProportions() } }], // NOTE: this is not part of the actual action above because we @@ -319,7 +316,7 @@ module.SingleImageView = core.ImageGridFeatures.Feature({ || this[this.config['single-image-scale-unit']] } - updateImageProportions.call(this) + this.updateImageProportions() // ribbon mode -- restore original image size... } else { diff --git a/ui (gen4)/lib/widget/browse.js b/ui (gen4)/lib/widget/browse.js index 03dc8f63..d164d88d 100755 --- a/ui (gen4)/lib/widget/browse.js +++ b/ui (gen4)/lib/widget/browse.js @@ -300,14 +300,32 @@ var BrowserPrototype = { 'close', ], - - // Separator element... - - // Element text as passed to make(..) to generate a separator - // element rather than a list element... + // Shorthand elements... // - // NOTE: if null text checking is disabled... - elementSeparatorText: null, + // Format: + // { + // : { + // class: , + // html: , + // }, + // ... + // } + // + // If make(..) gets passed it will construct and element + // via with an optional + // + // NOTE: .class is optional... + // NOTE: set this to null to disable shorthands... + elementShorthand: { + '---': { + 'class': 'separator', + 'html': '
' + }, + '...': { + 'class': 'separator', + 'html': '
', + }, + }, // Separator class... // @@ -315,11 +333,6 @@ var BrowserPrototype = { // be treated as a separator and not as a list element. // NOTE: to disable class checking set this to null elementSeparatorClass: 'separator', - - // Separator HTML code... - // - // NOTE: if this is null, then '
' is used. - elementSeparatorHTML: '
', }, // XXX TEST: this should prevent event propagation... @@ -873,15 +886,17 @@ var BrowserPrototype = { buttons = buttons || (that.options.itemButtons && that.options.itemButtons.slice()) - // special case separator... - if(p && (p == that.options.elementSeparatorText + // special case: shorthand... + if(p && (p in (that.options.elementShorthand || {}) || (p.hasClass - && that.options.elementSeparatorClass - && p.hasClass(that.options.elementSeparatorClass)))){ + && p in that.options.elementShorthand + && that.options.elementShorthand[p].class + && p.hasClass(that.options.elementShorthand[p].class)))){ var res = p + var shorthand = that.options.elementShorthand[p] if(typeof(res) == typeof('str')){ - res = $(that.options.elementSeparatorHTML || '
') - .addClass(that.options.elementSeparatorClass || '') + res = $(shorthand.html) + .addClass(shorthand.class || '') } res.appendTo(l) return res @@ -911,7 +926,7 @@ var BrowserPrototype = { // XXX is this the correct way to do this??? var txt = p.text() // XXX disable search??? - console.warn('jQuery objects as browse list elements not yet fully supported.') + //console.warn('jQuery objects as browse list elements not yet fully supported.') // str and other stuff... } else { @@ -2224,8 +2239,6 @@ ListerPrototype.options = { skipDisabledItems: false, // NOTE: to disable this set it to false or null disableItemPattern: '^- ', - - elementSeparatorText: '---', } // XXX should we inherit or copy options??? // ...inheriting might pose problems with deleting values reverting @@ -2287,8 +2300,6 @@ ListPrototype.options = { // NOTE: to disable this set it to false or null disableItemPattern: '^- ', - elementSeparatorText: '---', - list: function(path, make){ var that = this var data = this.options.data diff --git a/ui (gen4)/ribbons.js b/ui (gen4)/ribbons.js index d1174982..b3630d89 100755 --- a/ui (gen4)/ribbons.js +++ b/ui (gen4)/ribbons.js @@ -2238,8 +2238,10 @@ var RibbonsPrototype = { } else if((o == 0 || o == 180) && image_p != viewer_p){ image.css({ - width: h, - height: w, + //width: h, + //height: w, + width: '', + height: '', margin: '', }) @@ -2248,7 +2250,10 @@ var RibbonsPrototype = { // square image... } else { image.css({ - 'margin': '', + width: '', + height: '', + + margin: '', }) } })