From d90b16706868d401c731f635bdfcb70aec2f2fdd Mon Sep 17 00:00:00 2001 From: "Alex A. Naanou" Date: Tue, 7 Jun 2016 04:03:56 +0300 Subject: [PATCH] added ribbon indicator to status bar (thanks to xyz for the hint)... Signed-off-by: Alex A. Naanou --- ui (gen4)/css/layout.less | 17 ++++++ ui (gen4)/features/filesystem.js | 1 + ui (gen4)/features/ui-status.js | 33 +++++++++- ui (gen4)/features/ui-widgets.js | 6 +- ui (gen4)/lib/util.js | 102 ++++++++++++++++++++----------- 5 files changed, 121 insertions(+), 38 deletions(-) diff --git a/ui (gen4)/css/layout.less b/ui (gen4)/css/layout.less index bfc3f62f..adbd7427 100755 --- a/ui (gen4)/css/layout.less +++ b/ui (gen4)/css/layout.less @@ -1262,9 +1262,26 @@ stretching in width... */ font-size: small; } +/* .overlay-info .index.global:hover:after { content: "Global"; } +*/ + +/* ribbon */ +.overlay-info .ribbon-number { + opacity: 0.7; +} +.overlay-info .ribbon-number:before { + content: "R:"; + opacity: 0.6; +} +/* XXX not sure if we need to expand this +.overlay-info .ribbon-number:hover:before { + content: "Ribbon: "; + opacity: 0.6; +} +*/ /* gid */ .overlay-info .gid { diff --git a/ui (gen4)/features/filesystem.js b/ui (gen4)/features/filesystem.js index 3fb7363a..482680ab 100755 --- a/ui (gen4)/features/filesystem.js +++ b/ui (gen4)/features/filesystem.js @@ -1873,6 +1873,7 @@ var FileSystemWriterUIActions = actions.Actions({ // XXX need to add options to size: 'none', // XXX use closest preview instead of hi-res when // this is set... + // XXX need to add option to save full index... //'size_limit', // XXX might be a good idea to include source data links //'include_source_url', // bool diff --git a/ui (gen4)/features/ui-status.js b/ui (gen4)/features/ui-status.js index 2904b293..4942f8bd 100755 --- a/ui (gen4)/features/ui-status.js +++ b/ui (gen4)/features/ui-status.js @@ -51,8 +51,11 @@ var StatusBarActions = actions.Actions({ 'minimal', 'full', ], + // XXX make different configurations for different modes instead + // of hiding some items... (???) 'status-bar-items': [ 'index', + 'ribbon', 'gid', 'path', @@ -84,6 +87,7 @@ var StatusBarActions = actions.Actions({ }, __statusbar_elements__: { + // XXX use .makeEditable(..) index: function(item, gid, img){ var that = this gid = gid || this.current @@ -106,7 +110,7 @@ var StatusBarActions = actions.Actions({ // editable... : $('') .addClass('position editable') - .attr('info', 'Image position (click to edit image position)') + .attr('info', 'Image position (click to edit)') .prop('contenteditable', true) .keydown(function(){ // keep this from affecting the viewer... @@ -197,7 +201,33 @@ var StatusBarActions = actions.Actions({ return item }, + ribbon: function(item, gid, img){ + var that = this + var n = this.data ? this.data.getRibbonOrder(gid || this.current) : '-' + // make an element... + if(typeof(item) == typeof('str')){ + item = $('') + .addClass('ribbon-number') + .attr('info', 'Current ribbon (click to edit)') + .click(function(){ + $(this) + .makeEditable({ + clear_on_edit: false + }) + .on('edit-done', function(_, text){ + that.focusRibbon(text == '*' ? that.base : parseInt(text)) + }) + }) + .blur(function(){ + that.updateStatusBar() + }) + } + + item.text(n + ((this.data && this.data.getRibbon(gid) == this.base) ? '*' : '')) + + return item + }, // XXX handle path correctly... gid: function(item, gid, img){ var that = this @@ -248,7 +278,6 @@ var StatusBarActions = actions.Actions({ return item }, path: 'gid', - // XXX show menu in the appropriate corner... mark: function(item, gid, img){ gid = gid || this.current diff --git a/ui (gen4)/features/ui-widgets.js b/ui (gen4)/features/ui-widgets.js index c8eb0b5d..ce44adeb 100755 --- a/ui (gen4)/features/ui-widgets.js +++ b/ui (gen4)/features/ui-widgets.js @@ -92,8 +92,12 @@ function(actions, list_key, options){ var _makeEditable = function(elem){ return $(elem).find('.text') - .makeEditable() + .makeEditable({ + blur_on_abort: false, + blur_on_commit: false, + }) .on('edit-aborted', function(){ + list.select(null) list.update() }) .on('edit-done', function(evt, text){ diff --git a/ui (gen4)/lib/util.js b/ui (gen4)/lib/util.js index 85b456df..32cae8af 100755 --- a/ui (gen4)/lib/util.js +++ b/ui (gen4)/lib/util.js @@ -370,6 +370,13 @@ if(typeof(jQuery) != typeof(undefined)){ // multiline: false, // // reset_on_abort: true, + // + // blur_on_abort: false, + // blur_on_commit: false, + // + // clear_selection_on_abort: true, + // clear_selection_on_commit: true, + // // clear_on_edit: true, // // abort_keys: [ @@ -392,6 +399,13 @@ if(typeof(jQuery) != typeof(undefined)){ // XXX should this reset field to it's original state after // commit/abort??? jQuery.fn.makeEditable = function(options){ + if(options == false){ + this + .prop('contenteditable', false) + + return this + } + options = options || {} var that = this @@ -403,51 +417,69 @@ if(typeof(jQuery) != typeof(undefined)){ this .prop('contenteditable', true) - // make the element focusable and selectable... - .attr('tabindex', '0') - .addClass('editable-field') // NOTE: this will also focus the element... .selectText() - .keydown(function(){ - if(!that.prop('contenteditable')){ - return - } - event.stopPropagation() + // do not setup handlers more than once... + if(!this.hasClass('editable-field')){ + this + // make the element focusable and selectable... + .attr('tabindex', '0') + .addClass('editable-field') + .keydown(function(){ + if(!that.prop('contenteditable')){ + return + } - var n = keyboard.toKeyName(event.keyCode) + event.stopPropagation() - // abort... - if((options.abort_keys || ['Esc']).indexOf(n) >= 0){ - // reset original value... - (options.reset_on_abort == null || options.reset_on_abort) - && that.text(original) + var n = keyboard.toKeyName(event.keyCode) - that.trigger('abort') + // abort... + if((options.abort_keys || ['Esc']).indexOf(n) >= 0){ + // reset original value... + (options.reset_on_abort == null || options.reset_on_abort) + && that.text(original) - // done -- single line... - } else if(n == 'Enter' - && !options.multiline){ - event.preventDefault() + that.trigger('abort') - that.trigger('commit') + // done -- single line... + } else if(n == 'Enter' + && !options.multiline){ + event.preventDefault() - // done -- multiline... - } else if(n == 'Enter' - && (event.ctrlKey || event.metaKey) - && options.multiline){ - event.preventDefault() + that.trigger('commit') - that.trigger('commit') - } - }) - // user triggerable events... - .on('abort', function(){ - that.trigger('edit-aborted', original) - }) - .on('commit', function(){ - that.trigger('edit-done', that.text()) - }) + // done -- multiline... + } else if(n == 'Enter' + && (event.ctrlKey || event.metaKey) + && options.multiline){ + event.preventDefault() + + that.trigger('commit') + } + }) + .on('blur', function(){ + window.getSelection().removeAllRanges() + }) + // user triggerable events... + .on('abort', function(){ + that.trigger('edit-aborted', original) + + options.clear_selection_on_abort !== false + && window.getSelection().removeAllRanges() + + options.blur_on_abort !== false && this.blur() + }) + .on('commit', function(){ + that.trigger('edit-done', that.text()) + + options.clear_selection_on_commit !== false + && window.getSelection().removeAllRanges() + + options.blur_on_commit !== false && this.blur() + }) + } return this }