mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-31 03:10:07 +00:00
added status bar toggler and modes + some styling...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
ec78b20e13
commit
625e6a5537
@ -162,7 +162,7 @@ button:hover {
|
|||||||
-webkit-app-region: no-drag;
|
-webkit-app-region: no-drag;
|
||||||
}
|
}
|
||||||
.title-bar .button:hover {
|
.title-bar .button:hover {
|
||||||
cursor: hand;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.title-bar .close:hover {
|
.title-bar .close:hover {
|
||||||
color: red;
|
color: red;
|
||||||
@ -234,7 +234,7 @@ button:hover {
|
|||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: silver;
|
color: silver;
|
||||||
opacity: 0.9;
|
opacity: 0.9;
|
||||||
cursor: hand;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.viewer:empty:after,
|
.viewer:empty:after,
|
||||||
.ribbon-set:empty:after {
|
.ribbon-set:empty:after {
|
||||||
@ -1186,6 +1186,80 @@ stretching in width... */
|
|||||||
color: white;
|
color: white;
|
||||||
background: red;
|
background: red;
|
||||||
}
|
}
|
||||||
|
.overlay-info.full,
|
||||||
|
.overlay-info.minimal {
|
||||||
|
display: block;
|
||||||
|
/* XXX is this correct??? */
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
.overlay-info.minimal {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
.overlay-info.minimal .full-only {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
/* XXX REUSE: this is the same as selected/bookmarked image markers... */
|
||||||
|
.overlay-info .marked,
|
||||||
|
.overlay-info .marked:after,
|
||||||
|
.overlay-info .marked:before,
|
||||||
|
.overlay-info .bookmarked:after {
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
content: "";
|
||||||
|
font-size: 0pt;
|
||||||
|
border: none;
|
||||||
|
margin: 4px;
|
||||||
|
margin-left: 6px;
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
box-shadow: 2px 2px 20px -2px rgba(0, 0, 0, 0.7);
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: blue;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
/* tick... */
|
||||||
|
.overlay-info .marked {
|
||||||
|
background: transparent;
|
||||||
|
margin-left: 6px;
|
||||||
|
}
|
||||||
|
.overlay-info .marked:before,
|
||||||
|
.overlay-info .marked:after {
|
||||||
|
position: absolute;
|
||||||
|
bottom: auto;
|
||||||
|
border-radius: 3px;
|
||||||
|
-webkit-transform: rotate(-45deg) scaleY(1) scaleX(1);
|
||||||
|
-moz-transform: rotate(-45deg) scaleY(1) scaleX(1);
|
||||||
|
-o-transform: rotate(-45deg) scaleY(1) scaleX(1);
|
||||||
|
-ms-transform: rotate(-45deg) scaleY(1) scaleX(1);
|
||||||
|
transform: rotate(-45deg) scaleY(1) scaleX(1);
|
||||||
|
/* This prevents elements from aligning to sub-pixels...*/
|
||||||
|
/*
|
||||||
|
-webkit-transform-style: preserve-3d;
|
||||||
|
-moz-transform-style: preserve-3d;
|
||||||
|
transform-style: preserve-3d;
|
||||||
|
*/
|
||||||
|
}
|
||||||
|
.overlay-info .marked:before {
|
||||||
|
width: 3px;
|
||||||
|
height: 6px;
|
||||||
|
}
|
||||||
|
.overlay-info .marked:after {
|
||||||
|
width: 12px;
|
||||||
|
height: 3px;
|
||||||
|
}
|
||||||
|
.overlay-info .bookmarked:after {
|
||||||
|
background: yellow;
|
||||||
|
}
|
||||||
|
.overlay-info .marked:not(.on),
|
||||||
|
.overlay-info .bookmarked:not(.on) {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
.overlay-info .marked:not(.on):before,
|
||||||
|
.overlay-info .marked:not(.on):after,
|
||||||
|
.overlay-info .bookmarked:not(.on):after {
|
||||||
|
background: gray;
|
||||||
|
}
|
||||||
/*************************************************** Global status ***/
|
/*************************************************** Global status ***/
|
||||||
.global-status {
|
.global-status {
|
||||||
display: block;
|
display: block;
|
||||||
@ -1208,7 +1282,7 @@ stretching in width... */
|
|||||||
width: 100px;
|
width: 100px;
|
||||||
margin-left: -50px;
|
margin-left: -50px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
cursor: hand;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.up-indicator:after,
|
.up-indicator:after,
|
||||||
.down-indicator:after {
|
.down-indicator:after {
|
||||||
@ -1340,12 +1414,12 @@ stretching in width... */
|
|||||||
.global-mode-indicators .marks-visible,
|
.global-mode-indicators .marks-visible,
|
||||||
.context-mode-indicators .current-image-marked {
|
.context-mode-indicators .current-image-marked {
|
||||||
color: blue;
|
color: blue;
|
||||||
cursor: hand;
|
cursor: pointer;
|
||||||
text-shadow: rgba(0, 0, 0, 0.5) 0.1em 0.1em 0.4em, rgba(0, 0, 0, 0.5) 0.1em 0.1em;
|
text-shadow: rgba(0, 0, 0, 0.5) 0.1em 0.1em 0.4em, rgba(0, 0, 0, 0.5) 0.1em 0.1em;
|
||||||
}
|
}
|
||||||
.context-mode-indicators .current-image-bookmarked {
|
.context-mode-indicators .current-image-bookmarked {
|
||||||
color: yellow;
|
color: yellow;
|
||||||
cursor: hand;
|
cursor: pointer;
|
||||||
text-shadow: rgba(0, 0, 0, 0.5) 0.1em 0.1em 0.4em, rgba(0, 0, 0, 0.5) 0.1em 0.1em;
|
text-shadow: rgba(0, 0, 0, 0.5) 0.1em 0.1em 0.4em, rgba(0, 0, 0, 0.5) 0.1em 0.1em;
|
||||||
}
|
}
|
||||||
.global-mode-indicators .marked-only-visible .shown,
|
.global-mode-indicators .marked-only-visible .shown,
|
||||||
@ -1517,7 +1591,7 @@ progress:not(value)::-webkit-progress-bar {
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
color: red;
|
color: red;
|
||||||
cursor: hand;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.progress-bar progress {
|
.progress-bar progress {
|
||||||
display: block;
|
display: block;
|
||||||
|
|||||||
@ -269,7 +269,7 @@ button:hover {
|
|||||||
-webkit-app-region: no-drag;
|
-webkit-app-region: no-drag;
|
||||||
}
|
}
|
||||||
.title-bar .button:hover {
|
.title-bar .button:hover {
|
||||||
cursor: hand;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title-bar .close:hover {
|
.title-bar .close:hover {
|
||||||
@ -357,7 +357,7 @@ button:hover {
|
|||||||
color: silver;
|
color: silver;
|
||||||
opacity: 0.9;
|
opacity: 0.9;
|
||||||
|
|
||||||
cursor: hand;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.viewer:empty:after,
|
.viewer:empty:after,
|
||||||
.ribbon-set:empty:after {
|
.ribbon-set:empty:after {
|
||||||
@ -1048,6 +1048,85 @@ stretching in width... */
|
|||||||
background: red;
|
background: red;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.overlay-info.full,
|
||||||
|
.overlay-info.minimal {
|
||||||
|
display: block;
|
||||||
|
/* XXX is this correct??? */
|
||||||
|
z-index: 1000,
|
||||||
|
}
|
||||||
|
|
||||||
|
.overlay-info.minimal {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
.overlay-info.minimal .full-only {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* XXX REUSE: this is the same as selected/bookmarked image markers... */
|
||||||
|
.overlay-info .marked,
|
||||||
|
.overlay-info .marked:after,
|
||||||
|
.overlay-info .marked:before,
|
||||||
|
.overlay-info .bookmarked:after {
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
content: "";
|
||||||
|
font-size: 0pt;
|
||||||
|
border: none;
|
||||||
|
|
||||||
|
margin: 4px;
|
||||||
|
margin-left: 6px;
|
||||||
|
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
|
||||||
|
box-shadow: 2px 2px 20px -2px rgba(0,0,0,0.7);
|
||||||
|
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-radius: 50%;
|
||||||
|
|
||||||
|
background: blue;
|
||||||
|
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* tick... */
|
||||||
|
.overlay-info .marked {
|
||||||
|
background: transparent;
|
||||||
|
margin-left: 6px;
|
||||||
|
}
|
||||||
|
.overlay-info .marked:before,
|
||||||
|
.overlay-info .marked:after {
|
||||||
|
position: absolute;
|
||||||
|
bottom: auto;
|
||||||
|
|
||||||
|
border-radius: 3px;
|
||||||
|
|
||||||
|
.rotate(-45deg);
|
||||||
|
}
|
||||||
|
.overlay-info .marked:before {
|
||||||
|
width: 3px;
|
||||||
|
height: 6px;
|
||||||
|
}
|
||||||
|
.overlay-info .marked:after {
|
||||||
|
width: 12px;
|
||||||
|
height: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.overlay-info .bookmarked:after {
|
||||||
|
background: yellow;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overlay-info .marked:not(.on),
|
||||||
|
.overlay-info .bookmarked:not(.on) {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
.overlay-info .marked:not(.on):before,
|
||||||
|
.overlay-info .marked:not(.on):after,
|
||||||
|
.overlay-info .bookmarked:not(.on):after {
|
||||||
|
background: gray;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*************************************************** Global status ***/
|
/*************************************************** Global status ***/
|
||||||
@ -1078,7 +1157,7 @@ stretching in width... */
|
|||||||
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
cursor: hand;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.up-indicator:after,
|
.up-indicator:after,
|
||||||
.down-indicator:after {
|
.down-indicator:after {
|
||||||
@ -1217,13 +1296,13 @@ stretching in width... */
|
|||||||
.global-mode-indicators .marks-visible,
|
.global-mode-indicators .marks-visible,
|
||||||
.context-mode-indicators .current-image-marked {
|
.context-mode-indicators .current-image-marked {
|
||||||
color: blue;
|
color: blue;
|
||||||
cursor: hand;
|
cursor: pointer;
|
||||||
text-shadow: rgba(0,0,0,0.5) 0.1em 0.1em 0.4em,
|
text-shadow: rgba(0,0,0,0.5) 0.1em 0.1em 0.4em,
|
||||||
rgba(0,0,0,0.5) 0.1em 0.1em;
|
rgba(0,0,0,0.5) 0.1em 0.1em;
|
||||||
}
|
}
|
||||||
.context-mode-indicators .current-image-bookmarked {
|
.context-mode-indicators .current-image-bookmarked {
|
||||||
color: yellow;
|
color: yellow;
|
||||||
cursor: hand;
|
cursor: pointer;
|
||||||
text-shadow: rgba(0,0,0,0.5) 0.1em 0.1em 0.4em,
|
text-shadow: rgba(0,0,0,0.5) 0.1em 0.1em 0.4em,
|
||||||
rgba(0,0,0,0.5) 0.1em 0.1em;
|
rgba(0,0,0,0.5) 0.1em 0.1em;
|
||||||
}
|
}
|
||||||
@ -1422,7 +1501,7 @@ progress:not(value)::-webkit-progress-bar {
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
color: red;
|
color: red;
|
||||||
cursor: hand;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.progress-bar progress {
|
.progress-bar progress {
|
||||||
display: block;
|
display: block;
|
||||||
|
|||||||
@ -2505,36 +2505,130 @@ var makeStateIndicatorItem = function(container, type, text){
|
|||||||
// XXX should we use this or makeStateIndicatorItem(..)???
|
// XXX should we use this or makeStateIndicatorItem(..)???
|
||||||
// ...investigate the features of the above...
|
// ...investigate the features of the above...
|
||||||
// - .attr('text')???
|
// - .attr('text')???
|
||||||
var makeExpandingInfoItem = function(container, cls, align){
|
var makeExpandingInfoItem = function(container, cls, align, full_only){
|
||||||
var e = $('<span>')
|
var e = $('<span>')
|
||||||
.addClass(cls + ' expanding-text ' + align)
|
.addClass(cls + ' expanding-text ' + align +' '+ (full_only && 'full-only'))
|
||||||
.append($('<span class="shown">'))
|
.append($('<span class="shown">'))
|
||||||
.append($('<span class="hidden">'))
|
.append($('<span class="hidden">'))
|
||||||
container.append(e)
|
container.append(e)
|
||||||
return e
|
return e
|
||||||
}
|
}
|
||||||
var makeInfoItem = function(container, cls, align){
|
var makeInfoItem = function(container, cls, align, full_only){
|
||||||
var e = $('<span>')
|
var e = $('<span>')
|
||||||
.addClass(cls +' '+ align)
|
.addClass(cls +' '+ align +' '+ (full_only && 'full_only'))
|
||||||
container.append(e)
|
container.append(e)
|
||||||
return e
|
return e
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Format:
|
var ImageStateIndicatorActions = actions.Actions({
|
||||||
// full:
|
updateStateIndicators: ['- Interface/',
|
||||||
// [ (12/123) DSC_1234.jpg GID:a1b2c3 T:2016-01-28 08:37:50 B M C ]
|
function(gid){
|
||||||
// or
|
gid = gid || this.current
|
||||||
// [ DSC_1234.jpg GID:a1b2c3 T:2016-01-28 08:37:50 B M C (12/123) ]
|
|
||||||
//
|
var that = this
|
||||||
// minimal (no background):
|
|
||||||
// [ (12/123) B M C ]
|
// make/get indicator containers...
|
||||||
// or
|
/*
|
||||||
// [ B M C (12/123) ]
|
var image = this.ribbons.viewer.find('.state-indicator-container.image-info')
|
||||||
//
|
if(image.length == 0){
|
||||||
// hidden:
|
image = makeStateIndicator('image-info')
|
||||||
// [ ]
|
.appendTo(this.ribbons.viewer)
|
||||||
//
|
}
|
||||||
|
*/
|
||||||
|
|
||||||
|
var global = this.ribbons.viewer.find('.state-indicator-container.global-info')
|
||||||
|
if(global.length == 0){
|
||||||
|
//global = makeStateIndicator('global-info')
|
||||||
|
global = makeStateIndicator('global-info overlay-info')
|
||||||
|
|
||||||
|
var align = ''
|
||||||
|
var order = this.config['global-state-indicator-elements'].slice()
|
||||||
|
|
||||||
|
var i = order.indexOf('---')
|
||||||
|
// rearrange the tail section...
|
||||||
|
// NOTE: this is here as we need to push the floated
|
||||||
|
// right items in reverse order...
|
||||||
|
if(i >= 0){
|
||||||
|
order = order.concat(order.splice(i+1, order.length).reverse())
|
||||||
|
}
|
||||||
|
|
||||||
|
order.forEach(function(elem){
|
||||||
|
var full_only = that.config['global-state-indicator-elements-full-only'].indexOf(elem) >= 0
|
||||||
|
// spacer...
|
||||||
|
if(elem == '---'){
|
||||||
|
align = 'float-right'
|
||||||
|
|
||||||
|
// expanding indicators...
|
||||||
|
} else if(elem == 'gid' || elem == 'path'){
|
||||||
|
makeExpandingInfoItem(global, elem, align, full_only)
|
||||||
|
|
||||||
|
// simple indicators...
|
||||||
|
} else if(elem == 'index'){
|
||||||
|
makeInfoItem(global, elem, align, full_only)
|
||||||
|
|
||||||
|
// toggler indicators...
|
||||||
|
} else if(elem == 'bookmark' || elem == 'mark'){
|
||||||
|
makeInfoItem(global, elem+'ed', align, full_only)
|
||||||
|
.click(function(){
|
||||||
|
that['toggle'+elem.capitalize()]()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
global.appendTo(this.ribbons.viewer)
|
||||||
|
}
|
||||||
|
|
||||||
|
if(!gid){
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// populate the info...
|
||||||
|
|
||||||
|
var img = this.images && gid in this.images && this.images[gid]
|
||||||
|
|
||||||
|
// gid..
|
||||||
|
global.find('.gid .shown').text(gid.slice(-6))
|
||||||
|
global.find('.gid .hidden').text(gid)
|
||||||
|
|
||||||
|
// path...
|
||||||
|
global.find('.path .shown').text(img && img.path || '---')
|
||||||
|
global.find('.path .hidden').text(img && img.path || '---')
|
||||||
|
|
||||||
|
// pos...
|
||||||
|
global.find('.index')
|
||||||
|
.text(
|
||||||
|
(this.data.getImageOrder('ribbon', gid)+1)
|
||||||
|
+'/'+
|
||||||
|
this.data.getImages(gid).len)
|
||||||
|
|
||||||
|
// NOTE: we are not using .toggleMark('?') and friends
|
||||||
|
// here to avoid recursion as we might be handling
|
||||||
|
// them here...
|
||||||
|
// ...this also simpler than handling '?' and other
|
||||||
|
// special toggler args in the handler...
|
||||||
|
var tags = this.data.getTags(gid)
|
||||||
|
|
||||||
|
// marks...
|
||||||
|
global.find('.marked')[
|
||||||
|
tags.indexOf('selected') < 0 ?
|
||||||
|
'removeClass'
|
||||||
|
: 'addClass']('on')
|
||||||
|
global.find('.bookmarked')[
|
||||||
|
tags.indexOf('bookmark') < 0 ?
|
||||||
|
'removeClass'
|
||||||
|
: 'addClass']('on')
|
||||||
|
}],
|
||||||
|
toggleStateIndicator: ['Interface/Toggle state indicator modes',
|
||||||
|
toggler.CSSClassToggler(
|
||||||
|
function(){
|
||||||
|
return this.ribbons.viewer.find('.state-indicator-container.global-info') },
|
||||||
|
function(){ return this.config['global-state-indicator-modes'] },
|
||||||
|
function(state){ this.config['global-state-indicator-mode'] = state }) ],
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
// XXX an alternative approach:
|
// XXX an alternative approach:
|
||||||
// - global status area
|
// - global status area
|
||||||
// - status bar for local status
|
// - status bar for local status
|
||||||
@ -2552,7 +2646,11 @@ var makeInfoItem = function(container, cls, align){
|
|||||||
//
|
//
|
||||||
// XXX Q: can title bar be used instead of global state indication???
|
// XXX Q: can title bar be used instead of global state indication???
|
||||||
// ...especially if we are indicating only crop...
|
// ...especially if we are indicating only crop...
|
||||||
// XXX
|
// XXX add styling:
|
||||||
|
// - element spacing
|
||||||
|
// - tip text
|
||||||
|
// - avoid multi-line -- scroll???
|
||||||
|
// XXX rename to status bar???
|
||||||
var ImageStateIndicator =
|
var ImageStateIndicator =
|
||||||
module.ImageStateIndicator = core.ImageGridFeatures.Feature({
|
module.ImageStateIndicator = core.ImageGridFeatures.Feature({
|
||||||
title: '',
|
title: '',
|
||||||
@ -2565,126 +2663,39 @@ module.ImageStateIndicator = core.ImageGridFeatures.Feature({
|
|||||||
],
|
],
|
||||||
|
|
||||||
config: {
|
config: {
|
||||||
'global-info-elements': [
|
'global-state-indicator-elements': [
|
||||||
'path',
|
// XXX should index be here or to the right???
|
||||||
'gid',
|
|
||||||
'---',
|
|
||||||
'index',
|
'index',
|
||||||
|
//'path',
|
||||||
|
'gid',
|
||||||
|
|
||||||
|
'---',
|
||||||
|
|
||||||
'mark',
|
'mark',
|
||||||
'bookmark',
|
'bookmark',
|
||||||
],
|
],
|
||||||
|
|
||||||
|
'global-state-indicator-elements-full-only': [
|
||||||
|
'gid',
|
||||||
|
],
|
||||||
|
|
||||||
|
'global-state-indicator-modes': [
|
||||||
|
'none',
|
||||||
|
'minimal',
|
||||||
|
'full',
|
||||||
|
],
|
||||||
|
'global-state-indicator-mode': null,
|
||||||
},
|
},
|
||||||
|
|
||||||
actions: actions.Actions({
|
actions: ImageStateIndicatorActions,
|
||||||
// XXX for some reason mark indicator clicking does not work in
|
|
||||||
// single image mode...
|
|
||||||
updateStateIndicators: ['- Interface/',
|
|
||||||
function(gid){
|
|
||||||
gid = gid || this.current
|
|
||||||
|
|
||||||
var that = this
|
|
||||||
|
|
||||||
// make/get indicator containers...
|
|
||||||
var image = this.ribbons.viewer.find('.state-indicator-container.image-info')
|
|
||||||
if(image.length == 0){
|
|
||||||
image = makeStateIndicator('image-info')
|
|
||||||
.appendTo(this.ribbons.viewer)
|
|
||||||
}
|
|
||||||
|
|
||||||
var global = this.ribbons.viewer.find('.state-indicator-container.global-info')
|
|
||||||
if(global.length == 0){
|
|
||||||
//global = makeStateIndicator('global-info')
|
|
||||||
global = makeStateIndicator('global-info overlay-info')
|
|
||||||
|
|
||||||
var align = ''
|
|
||||||
var order = this.config['global-info-elements'].slice()
|
|
||||||
|
|
||||||
var i = order.indexOf('---')
|
|
||||||
// rearrange the tail section...
|
|
||||||
// NOTE: this is here as we need to push the floated
|
|
||||||
// right items in reverse order...
|
|
||||||
if(i >= 0){
|
|
||||||
order = order.concat(order.splice(i+1, order.length).reverse())
|
|
||||||
}
|
|
||||||
|
|
||||||
order.forEach(function(elem){
|
|
||||||
// spacer...
|
|
||||||
if(elem == '---'){
|
|
||||||
align = 'float-right'
|
|
||||||
|
|
||||||
// expanding indicators...
|
|
||||||
} else if(elem == 'gid' || elem == 'path'){
|
|
||||||
makeExpandingInfoItem(global, elem, align)
|
|
||||||
|
|
||||||
// simple indicators...
|
|
||||||
} else if(elem == 'index'){
|
|
||||||
makeInfoItem(global, elem, align)
|
|
||||||
|
|
||||||
// toggler indicators...
|
|
||||||
} else if(elem == 'bookmark' || elem == 'mark'){
|
|
||||||
makeInfoItem(global, elem+'ed', align)
|
|
||||||
.click(function(){
|
|
||||||
that['toggle'+elem.capitalize()]()
|
|
||||||
})
|
|
||||||
// XXX use CSS for this...
|
|
||||||
.text(elem[0].toUpperCase())
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
global.appendTo(this.ribbons.viewer)
|
|
||||||
}
|
|
||||||
|
|
||||||
if(!gid){
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// populate the info...
|
|
||||||
|
|
||||||
var img = this.images && gid in this.images && this.images[gid]
|
|
||||||
|
|
||||||
// gid..
|
|
||||||
global.find('.gid .shown').text(gid.slice(-6))
|
|
||||||
global.find('.gid .hidden').text(gid)
|
|
||||||
|
|
||||||
// path...
|
|
||||||
global.find('.path .shown').text(img && img.path || '---')
|
|
||||||
global.find('.path .hidden').text(img && img.path || '---')
|
|
||||||
|
|
||||||
// pos...
|
|
||||||
global.find('.index')
|
|
||||||
.text(
|
|
||||||
(this.data.getImageOrder('ribbon', gid)+1)
|
|
||||||
+'/'+
|
|
||||||
this.data.getImages(gid).len)
|
|
||||||
|
|
||||||
// NOTE: we are not using .toggleMark('?') and friends
|
|
||||||
// here to avoid recursion as we might be handling
|
|
||||||
// them here...
|
|
||||||
// ...this also simpler than handling '?' and other
|
|
||||||
// special toggler args in the handler...
|
|
||||||
var tags = this.data.getTags(gid)
|
|
||||||
|
|
||||||
// marks...
|
|
||||||
global.find('.marked')
|
|
||||||
[tags.indexOf('selected') < 0 ? 'removeClass' : 'addClass']('on')
|
|
||||||
// XXX STUB: add a css rule for visualising the above...
|
|
||||||
.css({
|
|
||||||
opacity: tags.indexOf('selected') < 0 ? '0.5' : '1',
|
|
||||||
})
|
|
||||||
global.find('.bookmarked')
|
|
||||||
[tags.indexOf('bookmark') < 0 ? 'removeClass' : 'addClass']('on')
|
|
||||||
// XXX STUB: add a css rule for visualising the above...
|
|
||||||
.css({
|
|
||||||
opacity: tags.indexOf('bookmark') < 0 ? '0.5' : '1',
|
|
||||||
})
|
|
||||||
}],
|
|
||||||
|
|
||||||
// XXX add toggler to toggle global image indicator (status bar) modes...
|
|
||||||
// XXX
|
|
||||||
}),
|
|
||||||
|
|
||||||
handlers: [
|
handlers: [
|
||||||
|
['start',
|
||||||
|
function(){
|
||||||
|
if(this.config['global-state-indicator-mode']){
|
||||||
|
this.toggleStateIndicator(this.config['global-state-indicator-mode'])
|
||||||
|
}
|
||||||
|
}],
|
||||||
[[
|
[[
|
||||||
'focusImage',
|
'focusImage',
|
||||||
'toggleBookmark',
|
'toggleBookmark',
|
||||||
|
|||||||
@ -219,9 +219,10 @@ module.GLOBAL_KEYBOARD = {
|
|||||||
},
|
},
|
||||||
I: {
|
I: {
|
||||||
default: 'showMetadata',
|
default: 'showMetadata',
|
||||||
shift: 'showMetadata: "current" "full"',
|
shift: 'toggleStateIndicator',
|
||||||
|
|
||||||
ctrl: 'toggleMark!: "ribbon"',
|
ctrl: 'toggleMark!: "ribbon"',
|
||||||
|
'ctrl+shift': 'showMetadata: "current" "full"',
|
||||||
|
|
||||||
'meta+alt': 'showDevTools',
|
'meta+alt': 'showDevTools',
|
||||||
},
|
},
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user