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

UI cleanup + added buttons... need to make the layout relative

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2012-06-08 15:17:48 +04:00
parent 8e9e048c00
commit 29f0e7d3f8
1 changed files with 141 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

195
ui/gallery.html
View File

@ -47,7 +47,7 @@ ISSUES:
<!-- script src="jquery.wipetouch.js"></script--> <!-- script src="jquery.wipetouch.js"></script-->
<!-- XXX this does not work on android... --> <!-- XXX this does not work on android... -->
<!-- script src="jquery.gestures.js"></script--> <script src="jquery.gestures.js"></script>
<!-- XXX need to figure out how to disable all the bling --> <!-- XXX need to figure out how to disable all the bling -->
<!-- script src="jquery.mobile.js"></script--> <!-- script src="jquery.mobile.js"></script-->
@ -65,6 +65,7 @@ $(document).ready(function() {
// setup event handlers... // setup event handlers...
$(document) $(document)
.keydown(handleKeys) .keydown(handleKeys)
$('.viewer')
// XXX this is flaky and breaks some of my code... // XXX this is flaky and breaks some of my code...
/*.wipetouch({ /*.wipetouch({
wipeLeft: nextImage, wipeLeft: nextImage,
@ -75,7 +76,7 @@ $(document).ready(function() {
tapToClick: true tapToClick: true
})*/ })*/
// XXX does not work on android... // XXX does not work on android...
//.gestures({eventHandler: handleGestures}) .gestures({eventHandler: handleGestures})
/* XXX jquery.mobile handlers... (with this I'm getting way too much bling) /* XXX jquery.mobile handlers... (with this I'm getting way too much bling)
.bind('swipeleft', function(e){ .bind('swipeleft', function(e){
nextImage() nextImage()
@ -90,6 +91,13 @@ $(document).ready(function() {
*/ */
$(".image").click(handleClick) $(".image").click(handleClick)
$('.next-image').click(nextImage)
$('.prev-image').click(prevImage)
$('.demote').click(demoteImage)
$('.promote').click(promoteImage)
$('.toggle-wide').click(toggleWideView)
$('.toggle-single').click(toggleRibbonView)
// set the default position... // set the default position...
$('.current-image').click() $('.current-image').click()
}); });
@ -155,6 +163,7 @@ var keys = {
previousKeys: [37, 80], previousKeys: [37, 80],
nextKeys: [39, 78], nextKeys: [39, 78],
promoteKeys: [40], promoteKeys: [40],
// XXX add del (46) to demote...
demoteKeys: [38], demoteKeys: [38],
ignoreKeys: [16, 17, 18], ignoreKeys: [16, 17, 18],
@ -406,7 +415,68 @@ function demoteImage(){
background: blue; background: blue;
} }
.demo-buttons {
margin: 15px
border: groove 2px;
opacity: 0.2;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.demo-buttons:hover {
opacity: 1;
}
.viewer {
width: 900px;
height: 500px;
border: solid blue 5px;
margin: 20px;
}
.controller {
height: 500px;
width: 50px;
background: silver;
float: left;
}
.promote, .next-image, .prev-image, .demote, .toggle-wide, .toggle-single {
text-align: center;
vertical-align: middle;
width: 100%;
height: 150px;
background: gray;
-moz-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
-ms-user-select: none;
user-select: none;
}
.next-image, .prev-image, .toggle-wide, .toggle-single {
background: silver;
}
.toggle-wide, .toggle-single {
height:50px
}
.promote {
}
.next-image {
}
.prev-image {
}
.demote {
}
.toggle-wide {
}
.toggle-single {
}
.container { .container {
float: left;
overflow: hidden; overflow: hidden;
width: 800px; width: 800px;
height: 500px; height: 500px;
@ -516,74 +586,91 @@ function demoteImage(){
</style> </style>
<div class="container"> <div class="viewer">
<div class="field"> <div class="controller">
<div class="ribbon"> <div class="demote">^</div>
<div class="image mock-image"></div> <div class="prev-image">&lt;</div>
<div class="image mock-image"></div> <div class="promote">v</div>
<div class="image mock-image"></div> <div class="toggle-single">[ ]</div>
<div class="image mock-image"></div> </div>
<div class="image mock-image"></div> <div class="container">
<div class="image mock-image"></div> <div class="field">
<div class="image mock-image"></div> <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>
<div class="image mock-image"></div> <div class="image mock-image"></div>
<div class="image mock-image"></div> <div class="image mock-image"></div>
<div class="image mock-image"></div> <div class="image mock-image"></div>
<div class="image mock-image"></div> <div class="image mock-image"></div>
<div class="image mock-image"></div> <div class="image mock-image"></div>
<div class="image mock-image"></div> <div class="image mock-image"></div>
<div class="image mock-image"></div> <div class="image mock-image"></div>
<div class="image mock-image"></div> <div class="image mock-image"></div>
<div class="image mock-image"></div> <div class="image mock-image"></div>
<div class="image mock-image"></div> <div class="image mock-image"></div>
<div class="image mock-image"></div> <div class="image mock-image"></div>
<div class="image mock-image"></div> <div class="image mock-image"></div>
<div class="image mock-image"></div> <div class="image mock-image"></div>
<div class="image mock-image"></div> <div class="image mock-image"></div>
<div class="image mock-image"></div> <div class="image mock-image"></div>
<div class="image mock-image"></div> <div class="image mock-image"></div>
<div class="image mock-image"></div> <div class="image mock-image"></div>
<div class="image mock-image"></div>
<div class="image mock-image"></div>
<div class="image mock-image"></div>
<div class="image mock-image"></div>
<div class="image mock-image"></div>
<div class="image mock-image"></div>
<div class="image mock-image"></div>
</div>
</div> </div>
</div> </div>
<div class="controller">
<div class="demote">^</div>
<div class="next-image">&gt;</div>
<div class="promote">v</div>
<div class="toggle-wide">+/-</div>
</div>
</div> </div>
<button onclick="firstImage()">first (home)</button> <div class="demo-buttons">
<button onclick="prevImage()">prev (left)</button>
<button onclick="nextImage()">next (right)</button>
<button onclick="lastImage()">last (end)</button>
<br><br> <button onclick="firstImage()">first (home)</button>
<button onclick="prevImage()">prev (left)</button>
<button onclick="nextImage()">next (right)</button>
<button onclick="lastImage()">last (end)</button>
<button onclick="showSingle()">single</button> <br><br>
<button onclick="showRibbon()">ribbon</button>
<button onclick="toggleRibbonView()">toggle ribbon view (space)</button>
<br><br> <button onclick="showSingle()">single</button>
<button onclick="showRibbon()">ribbon</button>
<button onclick="toggleRibbonView()">toggle ribbon view (space)</button>
<button onclick="toggleWideView()">toggle wide view</button> <br><br>
<br><br> <button onclick="toggleWideView()">toggle wide view</button>
<button onclick="createRibbonAbove()" disabled>create ribbon above (helper)</button><br> <br><br>
<button onclick="createRibbonBelow()" disabled>create ribbon below (helper)</button>
<br><br> <button onclick="createRibbonAbove()" disabled>create ribbon above (helper)</button><br>
<button onclick="createRibbonBelow()" disabled>create ribbon below (helper)</button>
<button onclick="mergeRibbonsUp()">merge ribbons up</button><br> <br><br>
<button onclick="mergeRibbonsDown()">merge ribbons down</button>
<br><br> <button onclick="mergeRibbonsUp()">merge ribbons up</button><br>
<button onclick="mergeRibbonsDown()">merge ribbons down</button>
<button onclick="demoteImage()">demote image (shift-up)</button><br> <br><br>
<button onclick="promoteImage()">promote image (shift-down)</button><br>
NOTE: ctrl-shift-up / ctrl-shift-down will demote / promote an image to a new empty ribbon (the default if no ribbon exists)
<br><br> <button onclick="demoteImage()">demote image (shift-up)</button><br>
<button onclick="promoteImage()">promote image (shift-down)</button><br>
NOTE: ctrl-shift-up / ctrl-shift-down will demote / promote an image to a new empty ribbon (the default if no ribbon exists)
<button onclick="focusAboveRibbon()">focus above ribbon (up)</button><br> <br><br>
<button onclick="focusBelowRibbon()">focus below ribbon (down)</button>
<button onclick="focusAboveRibbon()">focus above ribbon (up)</button><br>
<button onclick="focusBelowRibbon()">focus below ribbon (down)</button>
</div>
<!-- vim:set ts=4 sw=4 nowrap : --> <!-- vim:set ts=4 sw=4 nowrap : -->