mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-11-01 03:40:09 +00:00
added ribbon indicator + broken crop modes...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
02ae6904ea
commit
ab976b256c
@ -94,7 +94,7 @@ Roadmap
|
||||
|
||||
|
||||
[_] 28% Gen 3 current todo
|
||||
[_] 56% High priority
|
||||
[_] 57% High priority
|
||||
[_] 33% mormalize ribbons -- top-align sorted chunks
|
||||
[X] basic mechanics
|
||||
| splitData(...)
|
||||
@ -197,8 +197,6 @@ Roadmap
|
||||
| centerView() fixes this, but only for the current image...
|
||||
[_] BUG: sometimes images.json folder is created...
|
||||
| can't repeat this yet, and seen only once...
|
||||
[_] add indicator to ribbon up/down navigation in full screen...
|
||||
| this might be a number or some kind of animation...
|
||||
[_] rework the marks.js/modes.js to enable multi-level ribbon cropping...
|
||||
[_] 0% full archive index
|
||||
[_] segmented loading of images and data
|
||||
@ -324,6 +322,8 @@ Roadmap
|
||||
[_] remove extra and repetitive actions
|
||||
[_] caching config
|
||||
[_] side-by side view...
|
||||
[X] add indicator to ribbon up/down navigation in full screen...
|
||||
| this might be a number or some kind of animation...
|
||||
[X] BUG: scaling #2 in single image mode fits image to screen on wide screens
|
||||
[X] BUG: cropping in cropped mode will not save the whole data...
|
||||
[X] 100% BUG: sometimes the previews are not updated...
|
||||
|
||||
@ -765,7 +765,9 @@ function prevRibbon(){
|
||||
target = next.length > 0 ? next : target
|
||||
}
|
||||
}
|
||||
return centerView(focusImage(target))
|
||||
var res = centerView(focusImage(target))
|
||||
$('.viewer').trigger('focusedPrevRibbon', [getRibbonIndex()])
|
||||
return res
|
||||
}
|
||||
function nextRibbon(){
|
||||
var cur = getImage()
|
||||
@ -783,7 +785,9 @@ function nextRibbon(){
|
||||
}
|
||||
}
|
||||
|
||||
return centerView(focusImage(target))
|
||||
var res = centerView(focusImage(target))
|
||||
$('.viewer').trigger('focusedNextRibbon', [getRibbonIndex()])
|
||||
return res
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -982,6 +982,30 @@ button:hover {
|
||||
color: gray;
|
||||
display: inline-block;
|
||||
}
|
||||
.ribbon-indicator {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 15px;
|
||||
color: white;
|
||||
font-size: 42px;
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
text-shadow: black 0.1em 0.1em 0.6em;
|
||||
opacity: 0.1;
|
||||
}
|
||||
.flashing-ribbon-indicator {
|
||||
display: inline-block;
|
||||
}
|
||||
.single-image-mode.marks-visible.viewer .ribbon-indicator {
|
||||
display: inline-block;
|
||||
}
|
||||
.ribbon-indicator:hover:after {
|
||||
display: inline-block;
|
||||
content: "ribbon number";
|
||||
font-size: 14px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
/********************************************** Mode: single image ***/
|
||||
.single-image-mode.viewer .image {
|
||||
background-color: transparent;
|
||||
@ -1014,6 +1038,16 @@ button:hover {
|
||||
.light.viewer .ribbon-set:empty:after {
|
||||
color: gray;
|
||||
}
|
||||
.light.viewer .ribbon-indicator {
|
||||
color: silver;
|
||||
text-shadow: none;
|
||||
opacity: 0.3;
|
||||
}
|
||||
.light.viewer .ribbon-indicator:hover:after {
|
||||
color: gray;
|
||||
text-shadow: none;
|
||||
opacity: 0.8;
|
||||
}
|
||||
.gray.viewer,
|
||||
.gray.viewer .overlay-block .background {
|
||||
background: #333;
|
||||
@ -1021,7 +1055,7 @@ button:hover {
|
||||
.gray.viewer .overlay-block .dialog {
|
||||
background: #555;
|
||||
}
|
||||
.light.viewer .overlay-block:hover .background:after {
|
||||
.gray.viewer .overlay-block:hover .background:after {
|
||||
color: silver;
|
||||
opacity: 0.4;
|
||||
}
|
||||
@ -1032,10 +1066,16 @@ button:hover {
|
||||
.dark.viewer .overlay-block .dialog {
|
||||
background: #333;
|
||||
}
|
||||
.light.viewer .overlay-block:hover .background:after {
|
||||
.dark.viewer .overlay-block:hover .background:after {
|
||||
color: gray;
|
||||
opacity: 0.4;
|
||||
}
|
||||
.dark.viewer .ribbon-indicator {
|
||||
opacity: 0.2;
|
||||
}
|
||||
.dark.viewer .ribbon-indicator:hover:after {
|
||||
opacity: 0.8;
|
||||
}
|
||||
.large.viewer:not(.single-image-mode) .current.image {
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
@ -1004,6 +1004,35 @@ button:hover {
|
||||
}
|
||||
|
||||
|
||||
.ribbon-indicator {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 15px;
|
||||
|
||||
color: white;
|
||||
font-size: 42px;
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
text-shadow: black 0.1em 0.1em 0.6em;
|
||||
|
||||
opacity: 0.1;
|
||||
}
|
||||
.flashing-ribbon-indicator {
|
||||
display: inline-block;
|
||||
}
|
||||
.single-image-mode.marks-visible.viewer .ribbon-indicator {
|
||||
display: inline-block;
|
||||
}
|
||||
.ribbon-indicator:hover:after {
|
||||
display: inline-block;
|
||||
content: "ribbon number";
|
||||
font-size: 14px;
|
||||
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/********************************************** Mode: single image ***/
|
||||
|
||||
@ -1041,6 +1070,18 @@ button:hover {
|
||||
.light.viewer .ribbon-set:empty:after {
|
||||
color: gray;
|
||||
}
|
||||
.light.viewer .ribbon-indicator {
|
||||
color: silver;
|
||||
text-shadow: none;
|
||||
|
||||
opacity: 0.3;
|
||||
}
|
||||
.light.viewer .ribbon-indicator:hover:after {
|
||||
color: gray;
|
||||
text-shadow: none;
|
||||
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.gray.viewer,
|
||||
.gray.viewer .overlay-block .background {
|
||||
@ -1049,7 +1090,7 @@ button:hover {
|
||||
.gray.viewer .overlay-block .dialog {
|
||||
background: #555;
|
||||
}
|
||||
.light.viewer .overlay-block:hover .background:after {
|
||||
.gray.viewer .overlay-block:hover .background:after {
|
||||
color: silver;
|
||||
opacity: 0.4;
|
||||
}
|
||||
@ -1061,10 +1102,17 @@ button:hover {
|
||||
.dark.viewer .overlay-block .dialog {
|
||||
background: #333;
|
||||
}
|
||||
.light.viewer .overlay-block:hover .background:after {
|
||||
.dark.viewer .overlay-block:hover .background:after {
|
||||
color: gray;
|
||||
opacity: 0.4;
|
||||
}
|
||||
.dark.viewer .ribbon-indicator {
|
||||
opacity: 0.2;
|
||||
}
|
||||
.dark.viewer .ribbon-indicator:hover:after {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.large.viewer:not(.single-image-mode) .current.image {
|
||||
|
||||
13
ui/setup.js
13
ui/setup.js
@ -346,6 +346,19 @@ function setupDataBindings(viewer){
|
||||
})
|
||||
|
||||
// info...
|
||||
.on('focusingImage',
|
||||
function(){
|
||||
showRibbonIndicator()
|
||||
})
|
||||
.on([
|
||||
'focusedNextRibbon',
|
||||
'focusedPrevRibbon'
|
||||
].join(' '),
|
||||
function(){
|
||||
if(toggleSingleImageMode('?') == 'on'){
|
||||
flashRibbonIndicator()
|
||||
}
|
||||
})
|
||||
.on([
|
||||
'focusingImage',
|
||||
'togglingMark'
|
||||
|
||||
60
ui/ui.js
60
ui/ui.js
@ -115,6 +115,46 @@ function flashIndicator(direction){
|
||||
}
|
||||
|
||||
|
||||
function showRibbonIndicator(){
|
||||
var cls = '.ribbon-indicator'
|
||||
var indicator = $(cls)
|
||||
|
||||
if(indicator.length == 0){
|
||||
indicator = $('<div>')
|
||||
.addClass(cls.replace('.', ''))
|
||||
.appendTo($('.viewer'))
|
||||
}
|
||||
|
||||
var r = getRibbonIndex()
|
||||
|
||||
// get the base ribbon...
|
||||
// XXX add a real base ribbon index...
|
||||
var base = 0
|
||||
|
||||
var r = r == base ? r+'*' : r
|
||||
return indicator.text(r)
|
||||
}
|
||||
|
||||
function flashRibbonIndicator(){
|
||||
var indicator = showRibbonIndicator()
|
||||
var cls = '.flashing-ribbon-indicator'
|
||||
|
||||
var flashing_indicator = $(cls)
|
||||
|
||||
if(flashing_indicator.length == 0){
|
||||
flashing_indicator = indicator
|
||||
.clone()
|
||||
.addClass(cls.replace('.', ''))
|
||||
.appendTo($('.viewer'))
|
||||
}
|
||||
|
||||
return flashing_indicator
|
||||
.show()
|
||||
.delay(100)
|
||||
.fadeOut(300)
|
||||
}
|
||||
|
||||
|
||||
// Update an info element
|
||||
//
|
||||
// align can be:
|
||||
@ -775,7 +815,6 @@ function formDialog(root, message, config, btn, cls){
|
||||
var _alert = alert
|
||||
function alert(){
|
||||
var message = Array.apply(null, arguments).join(' ')
|
||||
//return formDialog(null, String(message), {}, 'OK', 'alert')
|
||||
return formDialog(null, String(message), {}, false, 'alert')
|
||||
}
|
||||
|
||||
@ -987,6 +1026,8 @@ function showImageInfo(){
|
||||
'<h2>"'+ name +'"</h2>'+
|
||||
|
||||
'<table>'+
|
||||
// basic info...
|
||||
'<tr><td colspan="2"><hr></td></tr>'+
|
||||
'<tr><td>GID: </td><td>'+ gid +'</td></tr>'+
|
||||
'<tr><td>Path: </td><td>"'+ data.path +'"</td></tr>'+
|
||||
'<tr><td>Orientation: </td><td>'+ orientation +'°'+flipped+'</td></tr>'+
|
||||
@ -1005,18 +1046,21 @@ function showImageInfo(){
|
||||
'</div>'),
|
||||
// NOTE: without a save button, there will be no way to accept the
|
||||
// form on a touch-only device...
|
||||
{}, 'Save', 'showImageInfoDialog')
|
||||
{}, 'OK', 'showImageInfoDialog')
|
||||
|
||||
// save the form data...
|
||||
.done(function(_, form){
|
||||
// comment...
|
||||
var comment = form.find('.comment').html().replace(/<br>/ig, '\n')
|
||||
if(comment.trim() == ''){
|
||||
delete data.comment
|
||||
} else {
|
||||
data.comment = comment
|
||||
var ncomment = form.find('.comment').html()
|
||||
if(ncomment != comment){
|
||||
ncomment = ncomment.replace(/<br>/ig, '\n')
|
||||
if(ncomment.trim() == ''){
|
||||
delete data.comment
|
||||
} else {
|
||||
data.comment = ncomment
|
||||
}
|
||||
IMAGES_UPDATED.push(gid)
|
||||
}
|
||||
IMAGES_UPDATED.push(gid)
|
||||
|
||||
// XXX tags...
|
||||
// XXX
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user