mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-31 03:10:07 +00:00
added value selection to browse item + basic editing...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
3c6729c867
commit
029a2f2280
@ -18,10 +18,13 @@ define(function(require){ var module = {}
|
||||
|
||||
//var DEBUG = DEBUG != null ? DEBUG : true
|
||||
|
||||
var util = require('lib/util')
|
||||
var toggler = require('lib/toggler')
|
||||
var tasks = require('lib/tasks')
|
||||
|
||||
var actions = require('lib/actions')
|
||||
var core = require('features/core')
|
||||
var base = require('features/base')
|
||||
|
||||
var browse = require('lib/widget/browse')
|
||||
var overlay = require('lib/widget/overlay')
|
||||
@ -243,6 +246,18 @@ module.MetadataReader = core.ImageGridFeatures.Feature({
|
||||
// - ...
|
||||
var MetadataUIActions = actions.Actions({
|
||||
config: {
|
||||
'metadata-auto-select-modes': [
|
||||
'none',
|
||||
'on select',
|
||||
'on open',
|
||||
],
|
||||
'metadata-auto-select-mode': 'on select',
|
||||
|
||||
'metadata-editable-fields': [
|
||||
'Artist',
|
||||
'Copyright',
|
||||
'Comment',
|
||||
],
|
||||
'metadata-field-order': [
|
||||
// metadata...
|
||||
'Make', 'Camera Model Name', 'Lens ID', 'Lens', 'Lens Profile Name', 'Focal Length',
|
||||
@ -258,10 +273,15 @@ var MetadataUIActions = actions.Actions({
|
||||
],
|
||||
},
|
||||
|
||||
toggleMetadataAutoSelect: ['Interface/Toggle metadata value auto-select',
|
||||
base.makeConfigToggler('metadata-auto-select-mode',
|
||||
function(){ return this.config['metadata-auto-select-modes'] })],
|
||||
|
||||
// XXX should we replace 'mode' with nested set of metadata???
|
||||
// XXX make this support multiple images...
|
||||
showMetadata: ['Image/Show metadata',
|
||||
function(image, mode){
|
||||
var that = this
|
||||
image = this.data.getImage(image)
|
||||
mode = mode || 'disabled'
|
||||
|
||||
@ -305,6 +325,7 @@ var MetadataUIActions = actions.Actions({
|
||||
])
|
||||
}
|
||||
|
||||
|
||||
// build fields...
|
||||
var fields = []
|
||||
Object.keys(metadata).forEach(function(k){
|
||||
@ -339,6 +360,14 @@ var MetadataUIActions = actions.Actions({
|
||||
// add separator to base...
|
||||
fields.length > 0 && base.push('---')
|
||||
|
||||
var selectElemText = function(elem){
|
||||
var range = document.createRange()
|
||||
range.selectNodeContents(elem)
|
||||
var sel = window.getSelection()
|
||||
sel.removeAllRanges()
|
||||
sel.addRange(range)
|
||||
}
|
||||
|
||||
var o = overlay.Overlay(this.ribbons.viewer,
|
||||
browse.makeList(
|
||||
null,
|
||||
@ -346,15 +375,36 @@ var MetadataUIActions = actions.Actions({
|
||||
{
|
||||
showDisabled: false,
|
||||
})
|
||||
// select value of current item...
|
||||
.on('select', function(evt, elem){
|
||||
if(that.config['metadata-auto-select-mode'] == 'on select'){
|
||||
selectElemText($(elem).find('.text').last()[0])
|
||||
}
|
||||
})
|
||||
// path selected...
|
||||
.open(function(evt, path){
|
||||
// edit field...
|
||||
/* XXX need keyboard bindings setup for this to work...
|
||||
o.client.filter().find('.text')
|
||||
.last()
|
||||
.prop('contenteditable', true)
|
||||
.focus()
|
||||
*/
|
||||
var editable = RegExp(that.config['metadata-editable-fields']
|
||||
.map(function(f){ return util.quoteRegExp(f) })
|
||||
.join('|'))
|
||||
|
||||
var elem = o.client.filter(path).find('.text').last()
|
||||
|
||||
if(that.config['metadata-auto-select-mode'] == 'on open'){
|
||||
selectElemText(elem[0])
|
||||
}
|
||||
|
||||
// skip non-editable fields...
|
||||
if(editable.test(path)){
|
||||
elem
|
||||
.prop('contenteditable', true)
|
||||
.focus()
|
||||
/*
|
||||
.one('blur', function(){
|
||||
$(this)
|
||||
.prop('contenteditable', false)
|
||||
})
|
||||
*/
|
||||
}
|
||||
}))
|
||||
.close(function(){
|
||||
// XXX
|
||||
|
||||
@ -13,11 +13,187 @@
|
||||
<!-- XXX remove before use... -->
|
||||
<style>
|
||||
|
||||
/* Open Sans
|
||||
* - line spacing a bit too large...
|
||||
*/
|
||||
@font-face {
|
||||
font-family: OpenSans;
|
||||
src: url(fonts/Open_Sans/OpenSans-Regular.ttf)
|
||||
}
|
||||
@font-face {
|
||||
font-family: OpenSans;
|
||||
src: url(fonts/Open_Sans/OpenSans-Bold.ttf)
|
||||
font-weight: bold;
|
||||
}
|
||||
@font-face {
|
||||
font-family: OpenSans;
|
||||
src: url(fonts/Open_Sans/OpenSans-Italic.ttf)
|
||||
font-style: italic;
|
||||
}
|
||||
@font-face {
|
||||
font-family: OpenSans;
|
||||
src: url(fonts/Open_Sans/OpenSans-BoldItalic.ttf)
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
}
|
||||
@font-face {
|
||||
font-family: OpenSans;
|
||||
src: url(fonts/Open_Sans/OpenSans-ExtraBold.ttf)
|
||||
font-weight: bolder;
|
||||
}
|
||||
@font-face {
|
||||
font-family: OpenSans;
|
||||
src: url(fonts/Open_Sans/OpenSans-ExtraBoldItalic.ttf)
|
||||
font-weight: bolder;
|
||||
font-style: italic;
|
||||
}
|
||||
@font-face {
|
||||
font-family: OpenSans;
|
||||
src: url(fonts/Open_Sans/OpenSans-Light.ttf)
|
||||
font-weight: lighter;
|
||||
}
|
||||
@font-face {
|
||||
font-family: OpenSans;
|
||||
src: url(fonts/Open_Sans/OpenSans-LightItalic.ttf)
|
||||
font-weight: lighter;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Source Sans Pro */
|
||||
/*
|
||||
@font-face {
|
||||
font-family: SourceSansPro;
|
||||
src: url(fonts/Source_Sans_Pro/SourceSansPro-Regular.ttf)
|
||||
}
|
||||
@font-face {
|
||||
font-family: SourceSansPro;
|
||||
src: url(fonts/Source_Sans_Pro/SourceSansPro-Bold.ttf)
|
||||
font-weight: bold;
|
||||
}
|
||||
@font-face {
|
||||
font-family: SourceSansPro;
|
||||
src: url(fonts/Source_Sans_Pro/SourceSansPro-Italic.ttf)
|
||||
font-style: italic;
|
||||
}
|
||||
@font-face {
|
||||
font-family: SourceSansPro;
|
||||
src: url(fonts/Source_Sans_Pro/SourceSansPro-BoldItalic.ttf)
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
}
|
||||
@font-face {
|
||||
font-family: SourceSansPro;
|
||||
src: url(fonts/Source_Sans_Pro/SourceSansPro-ExtraBold.ttf)
|
||||
font-weight: bolder;
|
||||
}
|
||||
@font-face {
|
||||
font-family: SourceSansPro;
|
||||
src: url(fonts/Source_Sans_Pro/SourceSansPro-ExtraBoldItalic.ttf)
|
||||
font-weight: bolder;
|
||||
font-style: italic;
|
||||
}
|
||||
@font-face {
|
||||
font-family: SourceSansPro;
|
||||
src: url(fonts/Source_Sans_Pro/SourceSansPro-Light.ttf)
|
||||
font-weight: lighter;
|
||||
}
|
||||
@font-face {
|
||||
font-family: SourceSansPro;
|
||||
src: url(fonts/Source_Sans_Pro/SourceSansPro-LightItalic.ttf)
|
||||
font-weight: lighter;
|
||||
font-style: italic;
|
||||
}
|
||||
*/
|
||||
|
||||
|
||||
|
||||
/* Arimo
|
||||
* - bold face a bit too narrow
|
||||
*/
|
||||
/*
|
||||
@font-face {
|
||||
font-family: Arimo;
|
||||
src: url(fonts/Arimo/Arimo-Regular.ttf)
|
||||
}
|
||||
@font-face {
|
||||
font-family: Arimo;
|
||||
src: url(fonts/Arimo/Arimo-Bold.ttf)
|
||||
font-weight: bold;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Arimo;
|
||||
src: url(fonts/Arimo/Arimo-Italic.ttf)
|
||||
font-style: italic;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Arimo;
|
||||
src: url(fonts/Arimo/Arimo-BoldItalic.ttf)
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
}
|
||||
*/
|
||||
|
||||
|
||||
|
||||
/* Roboto */
|
||||
/*
|
||||
@font-face {
|
||||
font-family: Roboto;
|
||||
src: url(fonts/Roboto/Roboto-Regular.ttf)
|
||||
}
|
||||
@font-face {
|
||||
font-family: Roboto;
|
||||
src: url(fonts/Roboto/Roboto-Bold.ttf)
|
||||
font-weight: bold;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Roboto;
|
||||
src: url(fonts/Roboto/Roboto-Italic.ttf)
|
||||
font-style: italic;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Roboto;
|
||||
src: url(fonts/Roboto/Roboto-BoldItalic.ttf)
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Roboto;
|
||||
src: url(fonts/Roboto/Roboto-ExtraBold.ttf)
|
||||
font-weight: bolder;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Roboto;
|
||||
src: url(fonts/Roboto/Roboto-ExtraBoldItalic.ttf)
|
||||
font-weight: bolder;
|
||||
font-style: italic;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Roboto;
|
||||
src: url(fonts/Roboto/Roboto-Light.ttf)
|
||||
font-weight: lighter;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Roboto;
|
||||
src: url(fonts/Roboto/Roboto-LightItalic.ttf)
|
||||
font-weight: lighter;
|
||||
font-style: italic;
|
||||
}
|
||||
*/
|
||||
|
||||
|
||||
|
||||
/*********************************************************************/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
/* this will prevent odd blur effects when blurring out specific
|
||||
elements... */
|
||||
background: black;
|
||||
|
||||
/*font: OpenSans, sans-serif;*/
|
||||
}
|
||||
|
||||
/* show image gid... */
|
||||
@ -130,6 +306,14 @@ body {
|
||||
}
|
||||
.browse-widget.metadata-view .list>div .text:nth-child(2) {
|
||||
font-style: italic;
|
||||
|
||||
-moz-user-select: auto;
|
||||
-webkit-user-select: auto;
|
||||
-o-user-select: auto;
|
||||
-ms-user-select: auto;
|
||||
user-select: auto;
|
||||
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -325,7 +325,8 @@ var BrowserPrototype = {
|
||||
// in filter mode???
|
||||
keyboard: {
|
||||
FullPathEdit: {
|
||||
pattern: '.browse-widget .path[contenteditable]',
|
||||
//pattern: '.browse-widget .path[contenteditable]',
|
||||
pattern: '.browse-widget [contenteditable]',
|
||||
|
||||
// keep text editing action from affecting the selection...
|
||||
ignore: [
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user