mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-31 11:20:09 +00:00
compleated bookmark indicators, more refactoring...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
2bd9c98011
commit
7f681d264a
@ -648,7 +648,7 @@ var KEYBOARD_CONFIG = {
|
||||
// XXX should this toggle or set mark to on?
|
||||
default: doc('Mark current image and advance',
|
||||
function(){
|
||||
toggleImageMark('on')
|
||||
toggleMark('on')
|
||||
directionImage()
|
||||
// XXX do we need this???
|
||||
//if(getImage().filter(':visible').length == 0){
|
||||
@ -659,7 +659,7 @@ var KEYBOARD_CONFIG = {
|
||||
// same as default but in reverse direction...
|
||||
shift: doc('Mark current image and return',
|
||||
function(){
|
||||
toggleImageMark('on')
|
||||
toggleMark('on')
|
||||
directionImage(true)
|
||||
// XXX do we need this???
|
||||
//if(getImage().filter(':visible').length == 0){
|
||||
@ -669,13 +669,13 @@ var KEYBOARD_CONFIG = {
|
||||
}),
|
||||
ctrl: doc('Show mark dialog', function(){ markImagesDialog() }),
|
||||
},
|
||||
Ins: doc('Toggle mark on current image', function(){ toggleImageMark() }),
|
||||
Ins: doc('Toggle mark on current image', function(){ toggleMark() }),
|
||||
'invert-marks': doc('Invert image marks',
|
||||
function(){ invertImageMarks() }),
|
||||
A: {
|
||||
// XXX does not yet work with DATA (???)
|
||||
//shift: doc('Toggle marks in current contagious block',
|
||||
// function(){ toggleImageMarkBlock() }),
|
||||
// function(){ toggleMarkBlock() }),
|
||||
|
||||
ctrl: doc('Mark current ribbon',
|
||||
function(){
|
||||
@ -699,7 +699,7 @@ var KEYBOARD_CONFIG = {
|
||||
},
|
||||
U: {
|
||||
default: doc('Unmark current image',
|
||||
function(){ toggleImageMark('off') }),
|
||||
function(){ toggleMark('off') }),
|
||||
ctrl: doc('Unmark current ribbon',
|
||||
function(){ removeImageMarks('ribbon') }),
|
||||
shift: doc('Unamrk all',
|
||||
|
||||
@ -1039,13 +1039,18 @@ button:hover {
|
||||
.context-mode-indicators .current-image-marked {
|
||||
color: blue;
|
||||
}
|
||||
.context-mode-indicators .current-image-bookmarked {
|
||||
color: yellow;
|
||||
}
|
||||
.global-mode-indicators .marked-only-visible .shown,
|
||||
.global-mode-indicators .marks-visible .shown,
|
||||
.context-mode-indicators .current-image-bookmarked .shown,
|
||||
.context-mode-indicators .current-image-marked .shown {
|
||||
display: none;
|
||||
}
|
||||
.global-mode-indicators .marked-only-visible:after,
|
||||
.global-mode-indicators .marks-visible:after,
|
||||
.context-mode-indicators .current-image-bookmarked:after,
|
||||
.context-mode-indicators .current-image-marked:after {
|
||||
display: inline-block;
|
||||
width: 6px;
|
||||
@ -1063,6 +1068,11 @@ button:hover {
|
||||
.context-mode-indicators .current-image-marked:after {
|
||||
color: blue;
|
||||
}
|
||||
.context-mode-indicators .current-image-bookmarked:after {
|
||||
color: yellow;
|
||||
background-color: yellow;
|
||||
border: solid 2px yellow;
|
||||
}
|
||||
.marks-visible.viewer .global-mode-indicators .marks-visible {
|
||||
display: inline-block;
|
||||
}
|
||||
@ -1076,10 +1086,11 @@ button:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
/* image mark in single image mode... */
|
||||
.context-mode-indicators .current-image-bookmarked,
|
||||
.context-mode-indicators .current-image-marked {
|
||||
display: none;
|
||||
color: blue;
|
||||
}
|
||||
.single-image-mode.marks-visible.viewer .context-mode-indicators .current-image-bookmarked.shown,
|
||||
.single-image-mode.marks-visible.viewer .context-mode-indicators .current-image-marked.shown {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@ -1068,13 +1068,18 @@ button:hover {
|
||||
.context-mode-indicators .current-image-marked {
|
||||
color: blue;
|
||||
}
|
||||
.context-mode-indicators .current-image-bookmarked {
|
||||
color: yellow;
|
||||
}
|
||||
.global-mode-indicators .marked-only-visible .shown,
|
||||
.global-mode-indicators .marks-visible .shown,
|
||||
.context-mode-indicators .current-image-bookmarked .shown,
|
||||
.context-mode-indicators .current-image-marked .shown {
|
||||
display: none;
|
||||
}
|
||||
.global-mode-indicators .marked-only-visible:after,
|
||||
.global-mode-indicators .marks-visible:after,
|
||||
.context-mode-indicators .current-image-bookmarked:after,
|
||||
.context-mode-indicators .current-image-marked:after {
|
||||
display: inline-block;
|
||||
width: 6px;
|
||||
@ -1093,6 +1098,11 @@ button:hover {
|
||||
.context-mode-indicators .current-image-marked:after {
|
||||
color: blue;
|
||||
}
|
||||
.context-mode-indicators .current-image-bookmarked:after {
|
||||
color: yellow;
|
||||
background-color: yellow;
|
||||
border: solid 2px yellow;
|
||||
}
|
||||
.marks-visible.viewer .global-mode-indicators .marks-visible {
|
||||
display: inline-block;
|
||||
}
|
||||
@ -1106,10 +1116,11 @@ button:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
/* image mark in single image mode... */
|
||||
.context-mode-indicators .current-image-bookmarked,
|
||||
.context-mode-indicators .current-image-marked {
|
||||
display: none;
|
||||
color: blue;
|
||||
}
|
||||
.single-image-mode.marks-visible.viewer .context-mode-indicators .current-image-bookmarked.shown,
|
||||
.single-image-mode.marks-visible.viewer .context-mode-indicators .current-image-marked.shown {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
26
ui/marks.js
26
ui/marks.js
@ -204,7 +204,7 @@ var toggleMarkesView = createCSSClassToggler(
|
||||
*/
|
||||
|
||||
|
||||
var toggleImageMark = makeMarkToggler('marked', 'selected', 'togglingMark')
|
||||
var toggleMark = makeMarkToggler('marked', 'selected', 'togglingMark')
|
||||
|
||||
|
||||
// mode can be:
|
||||
@ -217,7 +217,7 @@ function removeImageMarks(mode){
|
||||
var res = ribbon
|
||||
.find('.marked')
|
||||
.each(function(){
|
||||
toggleImageMark(this, 'off')
|
||||
toggleMark(this, 'off')
|
||||
})
|
||||
$('.viewer').trigger('removeingRibbonMarks', [ribbon])
|
||||
|
||||
@ -225,7 +225,7 @@ function removeImageMarks(mode){
|
||||
} else if(mode == 'all'){
|
||||
var res = $('.marked')
|
||||
.each(function(){
|
||||
toggleImageMark(this, 'off')
|
||||
toggleMark(this, 'off')
|
||||
})
|
||||
$('.viewer').trigger('removeingAllMarks')
|
||||
}
|
||||
@ -240,7 +240,7 @@ function markAll(mode){
|
||||
var res = ribbon
|
||||
.find('.image:not(.marked)')
|
||||
.each(function(){
|
||||
toggleImageMark(this, 'on')
|
||||
toggleMark(this, 'on')
|
||||
})
|
||||
$('.viewer').trigger('markingRibbon', [ribbon])
|
||||
|
||||
@ -248,7 +248,7 @@ function markAll(mode){
|
||||
} else if(mode == 'all'){
|
||||
var res = $('.image:not(.marked)')
|
||||
.each(function(){
|
||||
toggleImageMark(this, 'on')
|
||||
toggleMark(this, 'on')
|
||||
})
|
||||
$('.viewer').trigger('markingAll')
|
||||
}
|
||||
@ -262,7 +262,7 @@ function invertImageMarks(){
|
||||
var res = ribbon
|
||||
.find('.image')
|
||||
.each(function(){
|
||||
toggleImageMark(this, 'next')
|
||||
toggleMark(this, 'next')
|
||||
})
|
||||
$('.viewer').trigger('invertingMarks', [ribbon])
|
||||
return res
|
||||
@ -273,16 +273,16 @@ function invertImageMarks(){
|
||||
// images...
|
||||
// XXX need to make this dynamic data compatible...
|
||||
// XXX this will mark the block ONLY IF it is loaded!!!
|
||||
function toggleImageMarkBlock(image){
|
||||
function toggleMarkBlock(image){
|
||||
if(image == null){
|
||||
image = getImage()
|
||||
}
|
||||
var found = [false, false]
|
||||
// we need to invert this...
|
||||
var state = toggleImageMark()
|
||||
var state = toggleMark()
|
||||
var _convert = function(i){
|
||||
return function(){
|
||||
if(toggleImageMark(this, '?') == state){
|
||||
if(toggleMark(this, '?') == state){
|
||||
// we found the end...
|
||||
// NOTE: this will not be set if we reached the end of
|
||||
// the ribbon or the end of the loaded images...
|
||||
@ -290,7 +290,7 @@ function toggleImageMarkBlock(image){
|
||||
// stop the iteration...
|
||||
return false
|
||||
}
|
||||
toggleImageMark(this, state)
|
||||
toggleMark(this, state)
|
||||
}
|
||||
}
|
||||
image.nextAll('.image').each(_convert(1))
|
||||
@ -387,7 +387,7 @@ function markImagesDialog(){
|
||||
|
||||
var alg = 'Mark images:'
|
||||
|
||||
var cur = toggleImageMark('?') == 'on' ? 'Unmark' : 'Mark'
|
||||
var cur = toggleMark('?') == 'on' ? 'Unmark' : 'Mark'
|
||||
|
||||
cfg = {}
|
||||
cfg[alg] = [
|
||||
@ -411,11 +411,11 @@ function markImagesDialog(){
|
||||
|
||||
// NOTE: these must be in order of least-specific last...
|
||||
if(/current image/.test(res)){
|
||||
toggleImageMark()
|
||||
toggleMark()
|
||||
var msg = (cur + ' image').toLowerCase()
|
||||
|
||||
} else if(/current block/.test(res)){
|
||||
toggleImageMarkBlock()
|
||||
toggleMarkBlock()
|
||||
var msg = 'toggled block marks'
|
||||
|
||||
} else if(/Invert/.test(res)){
|
||||
|
||||
16
ui/setup.js
16
ui/setup.js
@ -32,11 +32,17 @@ function setupIndicators(){
|
||||
.css('cursor', 'hand')
|
||||
.click(function(){ toggleMarkedOnlyView() })
|
||||
|
||||
showContextIndicator(
|
||||
'current-image-bookmarked',
|
||||
'Image is bookmarked (ctrl-B)')
|
||||
.css('cursor', 'hand')
|
||||
.click(function(){ toggleBookmark() })
|
||||
|
||||
showContextIndicator(
|
||||
'current-image-marked',
|
||||
'Image is marked (Ins)')
|
||||
.css('cursor', 'hand')
|
||||
.click(function(){ toggleImageMark() })
|
||||
.click(function(){ toggleMark() })
|
||||
}
|
||||
|
||||
|
||||
@ -50,6 +56,13 @@ function updateContextIndicators(image){
|
||||
} else {
|
||||
indicator.removeClass('shown')
|
||||
}
|
||||
|
||||
indicator = $('.context-mode-indicators .current-image-bookmarked')
|
||||
if(image.hasClass('bookmarked')){
|
||||
indicator.addClass('shown')
|
||||
} else {
|
||||
indicator.removeClass('shown')
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -360,6 +373,7 @@ function setupDataBindings(viewer){
|
||||
.on([
|
||||
'focusingImage',
|
||||
'togglingMark',
|
||||
'togglingBookmark',
|
||||
'removeingAllMarks',
|
||||
'removeingRibbonMarks',
|
||||
'markingAll',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user