mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-29 18:30:09 +00:00
added different indicator modes...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
e9de6b4fb7
commit
54a4998378
14
ui/TODO.otl
14
ui/TODO.otl
@ -1,5 +1,5 @@
|
||||
Priority work
|
||||
[_] 87% Preview II
|
||||
[_] 89% Preview II
|
||||
[_] 49% native client
|
||||
[_] 33% Windows (CEF / CEFPython)
|
||||
[X] basic test
|
||||
@ -11,12 +11,12 @@ Priority work
|
||||
[X] disable transitions...
|
||||
[_] basic wrapper
|
||||
| hook-in os-specific API
|
||||
[_] 88% UI
|
||||
[_] 0% disable opacity for current ribbon
|
||||
[_] 0% opacity for current ribbon mode
|
||||
[X] 100% UI
|
||||
[X] 100% disable opacity for current ribbon
|
||||
[X] 1.0 opacity for current ribbon mode
|
||||
| automatically turned on for magnifications over 2 images
|
||||
| per screen....
|
||||
[_] current image indicator
|
||||
[X] current image indicator
|
||||
| this can be:
|
||||
| - rectangle (not border)
|
||||
| - underline
|
||||
@ -123,8 +123,8 @@ Priority work
|
||||
[X] 100% actions
|
||||
[X] bug: shifting up to new ribbon pushes the current row down...
|
||||
| before starting on a fix, need to cleanup the code from old hacks and workarounds...
|
||||
[_] 26% Preview II (optional features)
|
||||
[_] % PhoneGap + Android Issues:
|
||||
[_] 24% Preview II (optional features)
|
||||
[_] 0% PhoneGap + Android Issues:
|
||||
[_] half the keyboard is not working...
|
||||
[_] screen buttons are very laggy
|
||||
| while swipe works super fast...
|
||||
|
||||
@ -88,6 +88,8 @@ $(document).ready(setup);
|
||||
</head>
|
||||
<body>
|
||||
<div class="viewer no-single-image-transitions">
|
||||
|
||||
<!-- Splash screen -->
|
||||
<div class="splash">
|
||||
<!-- XXX replace this with a background-image logo... -->
|
||||
<table width="100%" height="100%"><tr><td align="center" valign="middle">
|
||||
@ -95,12 +97,16 @@ $(document).ready(setup);
|
||||
<small><i>loading...</i></small>
|
||||
</td></tr></table>
|
||||
</div>
|
||||
|
||||
<!-- overlay -->
|
||||
<div class="overlay">
|
||||
<div class="background">
|
||||
</div>
|
||||
<div class="content">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- button bars -->
|
||||
<div class="controller-mini left">
|
||||
<div class="screen-button show-controls">*</div>
|
||||
<div class="screen-button"></div>
|
||||
@ -113,8 +119,13 @@ $(document).ready(setup);
|
||||
<div class="screen-button fit-three">ooo</div>
|
||||
<div class="screen-button settings">?</div>
|
||||
</div>
|
||||
|
||||
<!-- image container -->
|
||||
<div class="container">
|
||||
<div class="field">
|
||||
<div class="current-indicator">
|
||||
<div></div>
|
||||
</div>
|
||||
<div class="ribbon">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -738,6 +738,18 @@ function getCurrentHorizontalOffset(image){
|
||||
|
||||
|
||||
|
||||
// XXX some minor inacuracies...
|
||||
function centerIndicator(){
|
||||
// XXX something odd going on with the border here...
|
||||
var i_border = Math.abs($('.current-indicator').outerHeight() - $('.current-indicator').height())/2
|
||||
$('.current-indicator').css({
|
||||
'top': ($('.ribbon').index($('.current.ribbon'))) * $('.ribbon').outerHeight() - i_border,
|
||||
'left': ($('.viewer').outerWidth() - $('.current-indicator').outerWidth())/2,
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
function centerSquare(){
|
||||
$('.field').css({
|
||||
'margin-top': getCurrentVerticalOffset()
|
||||
@ -973,7 +985,7 @@ function loadJSON(data, set_order){
|
||||
var field = $('.field')
|
||||
|
||||
// drop all old content...
|
||||
field.children().remove()
|
||||
field.children('.ribbon').remove()
|
||||
|
||||
for(var i=0; i < ribbons.length; i++){
|
||||
var images = ribbons[i]
|
||||
@ -1005,6 +1017,7 @@ function handleImageClick(){
|
||||
.addClass('current')
|
||||
// position the field and ribbons...
|
||||
centerSquare()
|
||||
centerIndicator()
|
||||
alignRibbons()
|
||||
}
|
||||
|
||||
@ -1297,6 +1310,21 @@ ImageGrid.GROUP('Mode: Ribbon',
|
||||
type: 'toggle',
|
||||
},
|
||||
createCSSClassToggler('.viewer', 'single-ribbon-mode')),
|
||||
ImageGrid.ACTION({
|
||||
id: 'toggleCurrentRibbonOpacity',
|
||||
title: 'Current ribbon opacity',
|
||||
doc: 'Toggle other image transparancy/opacity in current ribbon.',
|
||||
type: 'toggle',
|
||||
},
|
||||
createCSSClassToggler('.viewer', 'opaque-current-ribbon')),
|
||||
ImageGrid.ACTION({
|
||||
id: 'toggleIndicatorDot',
|
||||
title: 'Dot indicator',
|
||||
doc: 'Toggle indicator between dot and frame modes.\n\n'+
|
||||
'NOTE: this is visible only when the indicator is visible.',
|
||||
type: 'toggle',
|
||||
},
|
||||
createCSSClassToggler('.viewer', 'dot-indicator')),
|
||||
|
||||
// XXX this can be done in two ways:
|
||||
// - keep all images when promoting, just add a class to them that
|
||||
|
||||
@ -102,11 +102,13 @@
|
||||
}
|
||||
|
||||
|
||||
.image {
|
||||
float: left;
|
||||
|
||||
.image, .current-indicator {
|
||||
width: 350px;
|
||||
height: 350px;
|
||||
}
|
||||
|
||||
.image {
|
||||
float: left;
|
||||
|
||||
background: no-repeat 50% black;
|
||||
background-size: contain;
|
||||
@ -116,6 +118,45 @@
|
||||
cursor: hand;
|
||||
}
|
||||
|
||||
.current-indicator {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
.opaque-current-ribbon .current-indicator {
|
||||
display: block;
|
||||
position: absolute;
|
||||
}
|
||||
.opaque-current-ribbon .current-indicator div {
|
||||
position: relative;
|
||||
border: solid gray 4px;
|
||||
|
||||
margin-top: -2px;
|
||||
margin-left: -4px;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.opaque-current-ribbon.dot-indicator .current-indicator {
|
||||
display: block;
|
||||
position: absolute;
|
||||
}
|
||||
.opaque-current-ribbon.dot-indicator .current-indicator div {
|
||||
position: absolute;
|
||||
border: solid silver 5px;
|
||||
|
||||
bottom: 5px;
|
||||
right: 5px;
|
||||
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
.opaque-current-ribbon .current.ribbon .image {
|
||||
opacity: 1.0;
|
||||
}
|
||||
|
||||
|
||||
.mock-image {
|
||||
background: blue;
|
||||
|
||||
@ -110,6 +110,9 @@ $(document).ready(setup);
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="field">
|
||||
<div class="current-indicator">
|
||||
<div></div>
|
||||
</div>
|
||||
<div class="ribbon">
|
||||
<!--div class="image mock-image"></div>
|
||||
<div class="image mock-image"></div>
|
||||
|
||||
@ -13,6 +13,7 @@ var keybindings = {
|
||||
65: ImageGrid.toggleTransitions, // a
|
||||
9: ImageGrid.toggleControls, // tab
|
||||
66: ImageGrid.toggleBackgroundModes, // b
|
||||
73: ImageGrid.toggleCurrentRibbonOpacity, // i
|
||||
77: toggleMarkers, // m
|
||||
|
||||
|
||||
@ -25,7 +26,7 @@ var keybindings = {
|
||||
48: {
|
||||
'default': ImageGrid.fitImage, // 0
|
||||
// XXX make this into a real action...
|
||||
'ctrl': function(){setContainerScale(1)}, // ctrl+0
|
||||
'ctrl': function(){ImageGrid.setContainerScale(1)}, // ctrl+0
|
||||
},
|
||||
49: ImageGrid.fitImage, // 1
|
||||
50: ImageGrid.fitTwoImages, // 2
|
||||
|
||||
@ -14,12 +14,13 @@
|
||||
}
|
||||
|
||||
|
||||
.single-image-mode .image {
|
||||
.single-image-mode .image,
|
||||
.single-image-mode.opaque-current-ribbon .image,
|
||||
.single-image-mode.opaque-current-ribbon .current.ribbon .image {
|
||||
opacity: 0.0;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
|
||||
.single-image-mode .image:hover {
|
||||
}
|
||||
|
||||
@ -29,7 +30,8 @@
|
||||
|
||||
|
||||
.single-image-mode .current.image:hover,
|
||||
.single-image-mode .current.image {
|
||||
.single-image-mode .current.image,
|
||||
.single-image-mode.opaque-current-ribbon .current.ribbon .current.image {
|
||||
opacity: 1.0;
|
||||
}
|
||||
|
||||
@ -45,3 +47,6 @@
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.single-image-mode.opaque-current-ribbon .current-indicator {
|
||||
display: none
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user