mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-29 02:10:08 +00:00
added a second set of controllers (mini), to be used as the main mode for desktop...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
d232176b67
commit
2131ce0330
10
ui/TODO.otl
10
ui/TODO.otl
@ -1,5 +1,5 @@
|
||||
Priority work
|
||||
[_] 73% Preview II
|
||||
[_] 74% Preview II
|
||||
[X] 100% sorted images in ribbons
|
||||
[X] 100% stage I: position the promoted/demoted image correctly
|
||||
| and correct positioning on promote/demote
|
||||
@ -58,7 +58,7 @@ Priority work
|
||||
[X] one (with zooming)
|
||||
[X] single image mode with zooming
|
||||
| ribbons are hidden
|
||||
[_] 69% UI
|
||||
[_] 72% UI
|
||||
[X] fix single image mode
|
||||
| need to center the image correctly...
|
||||
[X] 100% add screen buttons for all actions...
|
||||
@ -73,7 +73,7 @@ Priority work
|
||||
[X] 100% control single-image mode animations
|
||||
[X] scroll
|
||||
[X] switch (no transition)
|
||||
[_] 16% layout
|
||||
[_] 33% layout
|
||||
[_] 50% tablet
|
||||
[_] stretch to full screen
|
||||
| NOTE: viewer 0% sizes may break things...
|
||||
@ -82,9 +82,9 @@ Priority work
|
||||
| just like single image mode...
|
||||
[X] make bg color switching in all modes
|
||||
| black, white, gray
|
||||
[_] 0% PC
|
||||
[_] 50% PC
|
||||
[_] stretch to full screen
|
||||
[_] hide buttons for keyboard actions
|
||||
[X] hide buttons for keyboard actions
|
||||
[_] web
|
||||
| is this is the same as the above two? (with auto-select)
|
||||
[_] 0% settings/help screen
|
||||
|
||||
@ -8,6 +8,7 @@ var keys = {
|
||||
toggleSingleImageMode: [70, 13], // ???, Enter
|
||||
toggleSingleImageModeTransitions: [84], // t
|
||||
toggleBackgroundModes: [66], // b
|
||||
toggleControls: [9], // tab
|
||||
close: [27, 88, 67], // ???
|
||||
|
||||
// zooming...
|
||||
@ -116,6 +117,8 @@ function setupControlElements(){
|
||||
|
||||
$('.screen-button.fit-three').click(fitThreeImages)
|
||||
|
||||
$('.screen-button.show-controls').click(showControls)
|
||||
|
||||
$('.screen-button.settings').click(function(){alert('not implemented yet...')})
|
||||
}
|
||||
|
||||
@ -251,6 +254,7 @@ function handleKeys(event){
|
||||
: (fn(code, keys.toggleSingleImageModeTransitions) >= 0) ? toggleSingleImageModeTransitions()
|
||||
|
||||
: (fn(code, keys.toggleBackgroundModes) >= 0) ? toggleBackgroundModes()
|
||||
: (fn(code, keys.toggleControls) >= 0) ? toggleControls()
|
||||
|
||||
// debug...
|
||||
: (fn(code, keys.toggleMarkers) >= 0) ? toggleMarkers()
|
||||
@ -384,31 +388,38 @@ function setBackgroundMode(mode){
|
||||
|
||||
// this will toggle through background theems: none -> dark -> black
|
||||
function toggleBackgroundModes(){
|
||||
var mode = null
|
||||
|
||||
// find a mode to set...
|
||||
for(var i = 0; i < BACKGROUND_MODES.length-1; i++){
|
||||
// we found our mode...
|
||||
if( $('.' + BACKGROUND_MODES[i]).length > 0 ){
|
||||
// set the next mode in list...
|
||||
mode = BACKGROUND_MODES[i+1]
|
||||
$('.viewer').addClass(mode)
|
||||
break
|
||||
}
|
||||
}
|
||||
// if no set modes are found, set the default...
|
||||
if($('.' + BACKGROUND_MODES[BACKGROUND_MODES.length-1]).length == 0){
|
||||
$('.viewer').addClass(BACKGROUND_MODES[0])
|
||||
// remove all other modes...
|
||||
var mode = getBackgroundMode()
|
||||
// default -> first
|
||||
if(mode == null){
|
||||
setBackgroundMode(BACKGROUND_MODES[0])
|
||||
// last -> default...
|
||||
} else if(mode == BACKGROUND_MODES[BACKGROUND_MODES.length-1]){
|
||||
setBackgroundMode()
|
||||
// next...
|
||||
} else {
|
||||
var cur = BACKGROUND_MODES.indexOf(mode)
|
||||
for(var i = 0; i < BACKGROUND_MODES.length; i++){
|
||||
if( i == cur ){
|
||||
continue
|
||||
}
|
||||
mode = BACKGROUND_MODES[i]
|
||||
$('.' + mode).removeClass(mode)
|
||||
}
|
||||
setBackgroundMode(BACKGROUND_MODES[BACKGROUND_MODES.indexOf(mode)+1])
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
function showControls(){
|
||||
$('.hidden-controls').removeClass('hidden-controls')
|
||||
}
|
||||
|
||||
|
||||
|
||||
function hideControls(){
|
||||
$('.viewer').addClass('hidden-controls')
|
||||
}
|
||||
|
||||
|
||||
|
||||
function toggleControls(){
|
||||
if( $('.hidden-controls').length > 0 ){
|
||||
showControls()
|
||||
} else {
|
||||
hideControls()
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -98,12 +98,14 @@
|
||||
}
|
||||
|
||||
|
||||
.controller {
|
||||
.controller, .controller-mini {
|
||||
position: absolute;
|
||||
|
||||
height: 500px;
|
||||
overflow: hidden;
|
||||
width: 50px;
|
||||
|
||||
height: 500px;
|
||||
|
||||
/* keep these on top of the normal elements but below the high
|
||||
* visibility 9000+ crowd...
|
||||
*/
|
||||
@ -118,6 +120,15 @@
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.controller-mini {
|
||||
width: 0px;
|
||||
}
|
||||
|
||||
.hidden-controls .controller-mini {
|
||||
width: 25px;
|
||||
}
|
||||
|
||||
|
||||
.controller.left {
|
||||
left: 0px;
|
||||
}
|
||||
@ -125,6 +136,20 @@
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
.hidden-controls .controller.left {
|
||||
width: 0px;
|
||||
}
|
||||
.hidden-controls .controller.right {
|
||||
width: 0px;
|
||||
}
|
||||
|
||||
.controller-mini.left {
|
||||
left: 0px;
|
||||
}
|
||||
.controller-mini.right {
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
|
||||
.screen-button {
|
||||
text-align: center;
|
||||
@ -141,7 +166,8 @@
|
||||
}
|
||||
|
||||
|
||||
.next-image, .prev-image, .toggle-wide, .toggle-single, .zoom-in, .settings, .toggle-wide {
|
||||
.controller-mini .screen-button {
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
|
||||
@ -150,6 +176,7 @@
|
||||
height: 10%;
|
||||
}
|
||||
|
||||
|
||||
.toggle-single, .fit-three, .zoom-in, .zoom-out {
|
||||
height: 10%;
|
||||
}
|
||||
@ -159,39 +186,6 @@
|
||||
height: 5%;
|
||||
}
|
||||
|
||||
.promote {
|
||||
}
|
||||
|
||||
|
||||
.next-image {
|
||||
}
|
||||
|
||||
|
||||
.prev-image {
|
||||
}
|
||||
|
||||
|
||||
.demote {
|
||||
}
|
||||
|
||||
|
||||
.toggle-wide {
|
||||
}
|
||||
|
||||
|
||||
.toggle-single {
|
||||
}
|
||||
|
||||
|
||||
.zoom-in {
|
||||
}
|
||||
|
||||
|
||||
.zoom-out {
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
|
||||
@ -76,6 +76,10 @@ $(document).ready(setup);
|
||||
<small><i>loading...</i></small>
|
||||
</td></tr></table>
|
||||
</div>
|
||||
<div class="controller-mini left">
|
||||
<div class="screen-button show-controls">*</div>
|
||||
<div class="screen-button"></div>
|
||||
</div>
|
||||
<div class="controller left">
|
||||
<div class="screen-button demote">^</div>
|
||||
<div class="screen-button prev-image"><</div>
|
||||
@ -95,7 +99,10 @@ $(document).ready(setup);
|
||||
<div class="h-marker"></div>
|
||||
<div class="v-marker"></div>
|
||||
</div>
|
||||
<!-- need to keep these after -->
|
||||
<div class="controller-mini right">
|
||||
<div class="screen-button settings">?</div>
|
||||
<div class="screen-button"></div>
|
||||
</div>
|
||||
<div class="controller right">
|
||||
<div class="screen-button demote">^</div>
|
||||
<div class="screen-button next-image">></div>
|
||||
@ -108,7 +115,8 @@ $(document).ready(setup);
|
||||
|
||||
<div class="demo-buttons">
|
||||
<button onclick="toggleMarkers()">Toggle Markers (m)</button>
|
||||
<button onclick="toggleBackgroundModes()">toggle background mode (b)</button>
|
||||
<button onclick="toggleBackgroundModes()">toggle background modes (b)</button>
|
||||
<button onclick="toggleControls()">toggle screen controls (tab)</button>
|
||||
|
||||
<br><br>
|
||||
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
}
|
||||
|
||||
|
||||
.single-image-mode .controller {
|
||||
.single-image-mode .controller, .single-image-mode .controller-mini {
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user