mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-28 18:00:09 +00:00
added top/bottom indicators...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
783f0b7e2e
commit
f2e27bc471
28
ui/base.js
28
ui/base.js
@ -753,20 +753,19 @@ function lastImage(mode){
|
||||
|
||||
// NOTE: if moving is 'next' these will chose the image after the current's order.
|
||||
// NOTE: if an image with the same order is found, moving argument has no effect.
|
||||
// XXX these sometimes behave wrong at the start of the ribbon depending
|
||||
// on direction...
|
||||
function prevRibbon(mode){
|
||||
mode = mode == null ? NAV_DEFAULT : mode
|
||||
var cur = getImage()
|
||||
var target = getImageBefore(cur,
|
||||
getRibbon(cur).prevAll('.ribbon' + NAV_RIBBON_DEFAULT).first())
|
||||
var target_ribbon = getRibbon(cur).prevAll('.ribbon' + NAV_RIBBON_DEFAULT).first()
|
||||
var target = getImageBefore(cur, target_ribbon)
|
||||
|
||||
if(target_ribbon.length == 0){
|
||||
flashIndicator('top')
|
||||
}
|
||||
|
||||
// first image...
|
||||
if(target.length == 0){
|
||||
// XXX too complex???
|
||||
target = getRibbon(cur)
|
||||
.prevAll('.ribbon' + NAV_RIBBON_DEFAULT).first()
|
||||
.find('.image' + mode).first()
|
||||
target = target_ribbon.find('.image' + mode).first()
|
||||
|
||||
} else {
|
||||
var next = target.nextAll('.image' + mode).first()
|
||||
@ -777,15 +776,16 @@ function prevRibbon(mode){
|
||||
function nextRibbon(mode){
|
||||
mode = mode == null ? NAV_DEFAULT : mode
|
||||
var cur = getImage()
|
||||
var target = getImageBefore(cur,
|
||||
getRibbon(cur).nextAll('.ribbon' + NAV_RIBBON_DEFAULT).first())
|
||||
var target_ribbon = getRibbon(cur).nextAll('.ribbon' + NAV_RIBBON_DEFAULT).first()
|
||||
var target = getImageBefore(cur, target_ribbon)
|
||||
|
||||
if(target_ribbon.length == 0){
|
||||
flashIndicator('bottom')
|
||||
}
|
||||
|
||||
// first image...
|
||||
if(target.length == 0){
|
||||
// XXX too complex???
|
||||
target = getRibbon(cur)
|
||||
.nextAll('.ribbon' + NAV_RIBBON_DEFAULT).first()
|
||||
.find('.image' + mode).first()
|
||||
target = target_ribbon.find('.image' + mode).first()
|
||||
}
|
||||
return centerView(focusImage(target))
|
||||
}
|
||||
|
||||
@ -83,9 +83,9 @@ $(function(){
|
||||
toggleImageInfo('on')
|
||||
|
||||
setupIndicators()
|
||||
|
||||
autoHideCursor($('.viewer'))
|
||||
|
||||
|
||||
if(SCROLLER_ENABLED){
|
||||
var scroller = makeScrollHandler($('.viewer'), {
|
||||
// XXX after click and initial move the screen jumps
|
||||
|
||||
@ -579,7 +579,9 @@ body {
|
||||
.up-indicator,
|
||||
.down-indicator,
|
||||
.start-indicator,
|
||||
.end-indicator {
|
||||
.end-indicator,
|
||||
.top-indicator,
|
||||
.bottom-indicator {
|
||||
display: block;
|
||||
position: absolute;
|
||||
content: "";
|
||||
@ -627,11 +629,25 @@ body {
|
||||
left: auto;
|
||||
right: 0px;
|
||||
}
|
||||
.top-indicator,
|
||||
.bottom-indicator {
|
||||
left: 0px;
|
||||
height: 10px;
|
||||
width: 100%;
|
||||
margin: 0px;
|
||||
background: yellow;
|
||||
}
|
||||
.bottom-indicator {
|
||||
top: auto;
|
||||
bottom: 0px;
|
||||
}
|
||||
/* default state */
|
||||
.up-indicator,
|
||||
.down-indicator,
|
||||
.start-indicator,
|
||||
.end-indicator {
|
||||
.end-indicator,
|
||||
.top-indicator,
|
||||
.bottom-indicator {
|
||||
display: none;
|
||||
}
|
||||
/* these are generic containers for indicators */
|
||||
@ -645,25 +661,28 @@ body {
|
||||
color: transparent;
|
||||
}
|
||||
.global-mode-indicators {
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
}
|
||||
.context-mode-indicators {
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
}
|
||||
.global-mode-indicators .mode-tip,
|
||||
.context-mode-indicators .mode-tip {
|
||||
display: none;
|
||||
opacity: 0.5;
|
||||
}
|
||||
.global-mode-indicators:hover,
|
||||
.context-mode-indicators:hover {
|
||||
color: silver;
|
||||
font-weight: bold;
|
||||
font-size: large;
|
||||
color: gray;
|
||||
}
|
||||
.global-mode-indicators:hover .mode-tip,
|
||||
.context-mode-indicators:hover .mode-tip {
|
||||
display: inline-block;
|
||||
}
|
||||
.global-mode-indicators > *,
|
||||
.context-mode-indicators > * {
|
||||
font-size: small;
|
||||
vertical-align: center;
|
||||
}
|
||||
.global-mode-indicators > * {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.global-mode-indicators .circle,
|
||||
@ -686,14 +705,6 @@ body {
|
||||
.single-image-mode.viewer .global-mode-indicators:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
/* context indicators */
|
||||
.context-mode-indicators {
|
||||
right: 15px;
|
||||
bottom: 15px;
|
||||
}
|
||||
.context-mode-indicators > * {
|
||||
margin-left: 10px;
|
||||
}
|
||||
/* actual indicators */
|
||||
/* marks... */
|
||||
.global-mode-indicators .marked-only-visible,
|
||||
|
||||
@ -528,7 +528,10 @@ body {
|
||||
.up-indicator,
|
||||
.down-indicator,
|
||||
.start-indicator,
|
||||
.end-indicator {
|
||||
.end-indicator,
|
||||
.top-indicator,
|
||||
.bottom-indicator
|
||||
{
|
||||
display: block;
|
||||
position: absolute;
|
||||
content: "";
|
||||
@ -578,11 +581,28 @@ body {
|
||||
left: auto;
|
||||
right: 0px;
|
||||
}
|
||||
.top-indicator,
|
||||
.bottom-indicator {
|
||||
left: 0px;
|
||||
height: 10px;
|
||||
width: 100%;
|
||||
margin: 0px;
|
||||
|
||||
background: yellow;
|
||||
}
|
||||
.bottom-indicator {
|
||||
top: auto;
|
||||
bottom: 0px;
|
||||
}
|
||||
|
||||
/* default state */
|
||||
.up-indicator,
|
||||
.down-indicator,
|
||||
.start-indicator,
|
||||
.end-indicator {
|
||||
.end-indicator,
|
||||
.top-indicator,
|
||||
.bottom-indicator
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -600,30 +620,33 @@ body {
|
||||
}
|
||||
|
||||
.global-mode-indicators {
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
}
|
||||
.context-mode-indicators {
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
}
|
||||
|
||||
.global-mode-indicators .mode-tip,
|
||||
.context-mode-indicators .mode-tip {
|
||||
display: none;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.global-mode-indicators:hover,
|
||||
.context-mode-indicators:hover {
|
||||
color: gray;
|
||||
font-weight: bold;
|
||||
color: gray;
|
||||
}
|
||||
.global-mode-indicators:hover .mode-tip,
|
||||
.context-mode-indicators:hover .mode-tip {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.global-mode-indicators > *,
|
||||
.context-mode-indicators > * {
|
||||
font-size: small;
|
||||
vertical-align: center;
|
||||
}
|
||||
|
||||
.global-mode-indicators>* {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.global-mode-indicators .circle,
|
||||
.context-mode-indicators .circle {
|
||||
display: inline-block;
|
||||
@ -646,16 +669,6 @@ body {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* context indicators */
|
||||
.context-mode-indicators {
|
||||
right: 15px;
|
||||
bottom: 15px;
|
||||
|
||||
}
|
||||
.context-mode-indicators>* {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
|
||||
/* actual indicators */
|
||||
/* marks... */
|
||||
|
||||
10
ui/ui.js
10
ui/ui.js
@ -72,10 +72,14 @@ function autoHideCursor(elem){
|
||||
|
||||
function flashIndicator(direction){
|
||||
var cls = {
|
||||
// shift up/down...
|
||||
prev: '.up-indicator',
|
||||
next: '.down-indicator',
|
||||
// hit start/end/top/bottom...
|
||||
start: '.start-indicator',
|
||||
end: '.end-indicator',
|
||||
top: '.top-indicator',
|
||||
bottom: '.bottom-indicator',
|
||||
}[direction]
|
||||
|
||||
var indicator = $(cls)
|
||||
@ -263,7 +267,7 @@ function getStatus(){
|
||||
|
||||
// XXX move to ui.js?
|
||||
function makeIndicator(text){
|
||||
return $('<span class="expanding-text">'+
|
||||
return $('<span class="indicator expanding-text">'+
|
||||
'<span class="hidden">'+ text +'</span>'+
|
||||
'<span class="shown">'+ text[0] +'</span>'+
|
||||
'</span>')
|
||||
@ -274,7 +278,7 @@ function showGlobalIndicator(cls, text){
|
||||
if(c.length == 0){
|
||||
c = $('<div>')
|
||||
.addClass('global-mode-indicators')
|
||||
.append('<span class="mode-tip">Global status:</span>')
|
||||
.append('<span class="mode-tip">Global status</span>')
|
||||
.appendTo($('.viewer'))
|
||||
}
|
||||
return makeIndicator(text)
|
||||
@ -286,7 +290,7 @@ function showContextIndicator(cls, text){
|
||||
if(c.length == 0){
|
||||
c = $('<div>')
|
||||
.addClass('context-mode-indicators')
|
||||
.append('<span class="mode-tip">Context status:</span>')
|
||||
.append('<span class="mode-tip">Context status</span>')
|
||||
.appendTo($('.viewer'))
|
||||
}
|
||||
return makeIndicator(text)
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user