mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-29 18:30:09 +00:00
added ribbon indicator to status bar (thanks to xyz for the hint)...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
2c954da342
commit
d90b167068
@ -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 {
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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...
|
||||
: $('<span>')
|
||||
.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 = $('<span>')
|
||||
.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
|
||||
|
||||
@ -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){
|
||||
|
||||
@ -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
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user