flynx/ImageGrid
1
1
Fork 0
mirror of https://github.com/flynx/ImageGrid.git synced 2025-10-29 18:30:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

added different indicator modes...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2012-08-22 19:39:20 +04:00
parent e9de6b4fb7
commit 54a4998378
7 changed files with 104 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
ui/TODO.otl
View File

@ -1,5 +1,5 @@
Priority work Priority work
[_] 87% Preview II [_] 89% Preview II
[_] 49% native client [_] 49% native client
[_] 33% Windows (CEF / CEFPython) [_] 33% Windows (CEF / CEFPython)
[X] basic test [X] basic test
@ -11,12 +11,12 @@ Priority work
[X] disable transitions... [X] disable transitions...
[_] basic wrapper [_] basic wrapper
| hook-in os-specific API | hook-in os-specific API
[_] 88% UI [X] 100% UI
[_] 0% disable opacity for current ribbon [X] 100% disable opacity for current ribbon
[_] 0% opacity for current ribbon mode [X] 1.0 opacity for current ribbon mode
| automatically turned on for magnifications over 2 images | automatically turned on for magnifications over 2 images
| per screen.... | per screen....
[_] current image indicator [X] current image indicator
| this can be: | this can be:
| - rectangle (not border) | - rectangle (not border)
| - underline | - underline
@ -123,8 +123,8 @@ Priority work
[X] 100% actions [X] 100% actions
[X] bug: shifting up to new ribbon pushes the current row down... [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... | before starting on a fix, need to cleanup the code from old hacks and workarounds...
[_] 26% Preview II (optional features) [_] 24% Preview II (optional features)
[_] % PhoneGap + Android Issues: [_] 0% PhoneGap + Android Issues:
[_] half the keyboard is not working... [_] half the keyboard is not working...
[_] screen buttons are very laggy [_] screen buttons are very laggy
| while swipe works super fast... | while swipe works super fast...

11
ui/fullscreen.html
View File

@ -88,6 +88,8 @@ $(document).ready(setup);
</head> </head>
<body> <body>
<div class="viewer no-single-image-transitions"> <div class="viewer no-single-image-transitions">
<!-- Splash screen -->
<div class="splash"> <div class="splash">
<!-- XXX replace this with a background-image logo... --> <!-- XXX replace this with a background-image logo... -->
<table width="100%" height="100%"><tr><td align="center" valign="middle"> <table width="100%" height="100%"><tr><td align="center" valign="middle">
@ -95,12 +97,16 @@ $(document).ready(setup);
<small><i>loading...</i></small> <small><i>loading...</i></small>
</td></tr></table> </td></tr></table>
</div> </div>
<!-- overlay -->
<div class="overlay"> <div class="overlay">
<div class="background"> <div class="background">
</div> </div>
<div class="content"> <div class="content">
</div> </div>
</div> </div>
<!-- button bars -->
<div class="controller-mini left"> <div class="controller-mini left">
<div class="screen-button show-controls">*</div> <div class="screen-button show-controls">*</div>
<div class="screen-button"></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 fit-three">ooo</div>
<div class="screen-button settings">?</div> <div class="screen-button settings">?</div>
</div> </div>
<!-- image container -->
<div class="container"> <div class="container">
<div class="field"> <div class="field">
<div class="current-indicator">
<div></div>
</div>
<div class="ribbon"> <div class="ribbon">
</div> </div>
</div> </div>

30
ui/gallery-prototype.js
View File

@ -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(){ function centerSquare(){
$('.field').css({ $('.field').css({
'margin-top': getCurrentVerticalOffset() 'margin-top': getCurrentVerticalOffset()
@ -973,7 +985,7 @@ function loadJSON(data, set_order){
var field = $('.field') var field = $('.field')
// drop all old content... // drop all old content...
field.children().remove() field.children('.ribbon').remove()
for(var i=0; i < ribbons.length; i++){ for(var i=0; i < ribbons.length; i++){
var images = ribbons[i] var images = ribbons[i]
@ -1005,6 +1017,7 @@ function handleImageClick(){
.addClass('current') .addClass('current')
// position the field and ribbons... // position the field and ribbons...
centerSquare() centerSquare()
centerIndicator()
alignRibbons() alignRibbons()
} }
@ -1297,6 +1310,21 @@ ImageGrid.GROUP('Mode: Ribbon',
type: 'toggle', type: 'toggle',
}, },
createCSSClassToggler('.viewer', 'single-ribbon-mode')), 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: // XXX this can be done in two ways:
// - keep all images when promoting, just add a class to them that // - keep all images when promoting, just add a class to them that

47
ui/gallery.css
View File

@ -102,11 +102,13 @@
} }
.image { .image, .current-indicator {
float: left;
width: 350px; width: 350px;
height: 350px; height: 350px;
}
.image {
float: left;
background: no-repeat 50% black; background: no-repeat 50% black;
background-size: contain; background-size: contain;
@ -116,6 +118,45 @@
cursor: hand; 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 { .mock-image {
background: blue; background: blue;

3
ui/gallery.html
View File

@ -110,6 +110,9 @@ $(document).ready(setup);
</div> </div>
<div class="container"> <div class="container">
<div class="field"> <div class="field">
<div class="current-indicator">
<div></div>
</div>
<div class="ribbon"> <div class="ribbon">
<!--div class="image mock-image"></div> <!--div class="image mock-image"></div>
<div class="image mock-image"></div> <div class="image mock-image"></div>

3
ui/keybindings.js
View File

@ -13,6 +13,7 @@ var keybindings = {
65: ImageGrid.toggleTransitions, // a 65: ImageGrid.toggleTransitions, // a
9: ImageGrid.toggleControls, // tab 9: ImageGrid.toggleControls, // tab
66: ImageGrid.toggleBackgroundModes, // b 66: ImageGrid.toggleBackgroundModes, // b
73: ImageGrid.toggleCurrentRibbonOpacity, // i
77: toggleMarkers, // m 77: toggleMarkers, // m
@ -25,7 +26,7 @@ var keybindings = {
48: { 48: {
'default': ImageGrid.fitImage, // 0 'default': ImageGrid.fitImage, // 0
// XXX make this into a real action... // XXX make this into a real action...
'ctrl': function(){setContainerScale(1)}, // ctrl+0 'ctrl': function(){ImageGrid.setContainerScale(1)}, // ctrl+0
}, },
49: ImageGrid.fitImage, // 1 49: ImageGrid.fitImage, // 1
50: ImageGrid.fitTwoImages, // 2 50: ImageGrid.fitTwoImages, // 2

11
ui/single-image-mode.css
View File

@ -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; opacity: 0.0;
background-color: transparent; background-color: transparent;
} }
.single-image-mode .image:hover { .single-image-mode .image:hover {
} }
@ -29,7 +30,8 @@
.single-image-mode .current.image:hover, .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; opacity: 1.0;
} }
@ -45,3 +47,6 @@
transition: none; transition: none;
} }
.single-image-mode.opaque-current-ribbon .current-indicator {
display: none
}