mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-30 19:00:09 +00:00
started work on dragging...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
1dcfb6d59e
commit
dd686a7724
17
ui/TODO.otl
17
ui/TODO.otl
@ -1,5 +1,5 @@
|
|||||||
Priority work
|
Priority work
|
||||||
[_] 60% Preview II
|
[_] 66% Preview II
|
||||||
[X] 100% sorted images in ribbons
|
[X] 100% sorted images in ribbons
|
||||||
[X] 100% stage I: position the promoted/demoted image correctly
|
[X] 100% stage I: position the promoted/demoted image correctly
|
||||||
| and correct positioning on promote/demote
|
| and correct positioning on promote/demote
|
||||||
@ -58,7 +58,7 @@ Priority work
|
|||||||
[X] one (with zooming)
|
[X] one (with zooming)
|
||||||
[X] single image mode with zooming
|
[X] single image mode with zooming
|
||||||
| ribbons are hidden
|
| ribbons are hidden
|
||||||
[_] 25% cleanup UI
|
[_] 25% UI
|
||||||
[_] fix single image mode
|
[_] fix single image mode
|
||||||
| need to center the image correctly...
|
| need to center the image correctly...
|
||||||
[_] 55% add screen buttons for all actions...
|
[_] 55% add screen buttons for all actions...
|
||||||
@ -99,12 +99,15 @@ Priority work
|
|||||||
[X] navigation
|
[X] navigation
|
||||||
[_] 0% actions
|
[_] 0% actions
|
||||||
[_] bug: shifting up to new ribbon pushes the current row down...
|
[_] bug: shifting up to new ribbon pushes the current row down...
|
||||||
[_] 12% optional features...
|
[_] 40% optional features...
|
||||||
[_] 25% drag/move action...
|
[_] 80% drag/move action...
|
||||||
[_] basic infrastructure
|
[X] basic infrastructure
|
||||||
[X] action: center current image
|
[X] action: center current image
|
||||||
[_] while zoomed more than the screen
|
[X] while zoomed more than the screen
|
||||||
[_] while zoomed out (ribbon view)
|
[X] while zoomed out (ribbon view)
|
||||||
|
[_] 0% cleanup...
|
||||||
|
[_] disable click events while dragging
|
||||||
|
[_] check compatibility with gestures
|
||||||
[_] 0% native client
|
[_] 0% native client
|
||||||
[_] android
|
[_] android
|
||||||
[_] 0% misc
|
[_] 0% misc
|
||||||
|
|||||||
264
ui/experiment-ribbon-navigation-n-zoom-drag.html
Executable file
264
ui/experiment-ribbon-navigation-n-zoom-drag.html
Executable file
@ -0,0 +1,264 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<!--
|
||||||
|
|
||||||
|
Goals:
|
||||||
|
- design a simple navigation system and structure
|
||||||
|
- make it animate correctly only via CSS
|
||||||
|
|
||||||
|
XXX zoom animation is odd...
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="markers.css">
|
||||||
|
|
||||||
|
<script src="jquery.js"></script>
|
||||||
|
<script src="jquery-ui-1.8.22.custom.min.js"></script>
|
||||||
|
<script src="markers.js"></script>
|
||||||
|
<script src="ui.js"></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
$(document).ready(function(){
|
||||||
|
$('.image').click(imageClick)
|
||||||
|
|
||||||
|
fieldSize(300, 200)
|
||||||
|
|
||||||
|
// XXX this is working but need to cancep clicks when this is going...
|
||||||
|
// XXX check how this interacts with guestures...
|
||||||
|
$('.field').draggable()
|
||||||
|
|
||||||
|
$('.current.image').click()
|
||||||
|
})
|
||||||
|
|
||||||
|
function imageClick(){
|
||||||
|
// set classes...
|
||||||
|
$('.current').removeClass('current')
|
||||||
|
$(this)
|
||||||
|
.addClass('current')
|
||||||
|
.parents('.ribbon')
|
||||||
|
.addClass('current')
|
||||||
|
|
||||||
|
// position the field and ribbons...
|
||||||
|
centerSquare()
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.animated {
|
||||||
|
-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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.origin-marker {
|
||||||
|
position: absolute;
|
||||||
|
top: 0px;
|
||||||
|
left: 0px;
|
||||||
|
width: 5px;
|
||||||
|
height: 5px;
|
||||||
|
|
||||||
|
border-top: solid blue 1px;
|
||||||
|
border-left: solid blue 1px;
|
||||||
|
|
||||||
|
z-index: 9999;
|
||||||
|
}
|
||||||
|
.origin-marker-2 {
|
||||||
|
position: relative;
|
||||||
|
top: -7px;
|
||||||
|
left: -7px;
|
||||||
|
width: 5px;
|
||||||
|
height: 5px;
|
||||||
|
|
||||||
|
border-bottom: solid blue 1px;
|
||||||
|
border-right: solid blue 1px;
|
||||||
|
|
||||||
|
z-index: 9999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
position: relative;
|
||||||
|
border: solid gray 5px;
|
||||||
|
width: 300px;
|
||||||
|
height: 200px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.field {
|
||||||
|
position: relative;
|
||||||
|
top: 0px;
|
||||||
|
left: 0px;
|
||||||
|
/* set this to adjust the vertical position of the view... */
|
||||||
|
margin-top: 0px;
|
||||||
|
|
||||||
|
/* animate */
|
||||||
|
-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;
|
||||||
|
|
||||||
|
-webkit-transform: scale(1, 1);
|
||||||
|
-moz-transform: scale(1, 1);
|
||||||
|
-o-transform: scale(1, 1);
|
||||||
|
-ms-transform: scale(1, 1);
|
||||||
|
transform: scale(1, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ribbon {
|
||||||
|
height: 50px;
|
||||||
|
/* HACK: need to figure out a way to avoid setting the width here... */
|
||||||
|
width: 1000px;
|
||||||
|
margin-top: 5px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
|
||||||
|
/* animate */
|
||||||
|
-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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
background: silver;
|
||||||
|
color: white;
|
||||||
|
float: left;
|
||||||
|
|
||||||
|
/* animate */
|
||||||
|
-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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pic {
|
||||||
|
background: no-repeat 50% black;
|
||||||
|
background-size: contain;
|
||||||
|
background-image: url(images/350px/DSC_3501.jpg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.current.image {
|
||||||
|
background-color: gray;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
Guides:
|
||||||
|
<button onclick="toggleMarkers()">Toggle Guides</button>
|
||||||
|
<br>
|
||||||
|
|
||||||
|
Zoom:
|
||||||
|
<button onclick="zoomContainerBy(2)">+</button>
|
||||||
|
<button onclick="zoomContainerBy(0.5)">-</button>
|
||||||
|
<button onclick="setContainerZoom(1)">Original</button>
|
||||||
|
<button onclick="fitImage()">Image</button>
|
||||||
|
<button onclick="fitThreeImages()">Three</button>
|
||||||
|
<br>
|
||||||
|
|
||||||
|
Size:
|
||||||
|
<button onclick="fieldSize($('.container').width()*1.5, $('.container').height()*1.5)">+</button>
|
||||||
|
<button onclick="fieldSize($('.container').width()*0.75, $('.container').height()*0.75)">-</button>
|
||||||
|
<button onclick="fieldSize(300, 200)">300x200</button>
|
||||||
|
<button onclick="fieldSize(600, 400)">600x400</button>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<button onclick="centerCurrentImage()">center current</button>
|
||||||
|
<button onclick="centerOrigin()">center origin</button>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<div class="container animated">
|
||||||
|
<div class="field">
|
||||||
|
<div class="origin-marker animated">
|
||||||
|
<div class="origin-marker-2">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ribbon">
|
||||||
|
<div class="image">1</div>
|
||||||
|
<div class="image">2</div>
|
||||||
|
<div class="image">3</div>
|
||||||
|
<div class="image">4</div>
|
||||||
|
<div class="image">5</div>
|
||||||
|
<div class="image">6</div>
|
||||||
|
<div class="image">7</div>
|
||||||
|
</div>
|
||||||
|
<div class="ribbon" style="margin-left: 40px;">
|
||||||
|
<div class="image">1</div>
|
||||||
|
<div class="image">2</div>
|
||||||
|
<div class="image">3</div>
|
||||||
|
<div class="image">4</div>
|
||||||
|
<div class="image">5</div>
|
||||||
|
<div class="image">6</div>
|
||||||
|
<div class="image">7</div>
|
||||||
|
</div>
|
||||||
|
<div class="ribbon current">
|
||||||
|
<div class="image">1</div>
|
||||||
|
<div class="image">2</div>
|
||||||
|
<div class="image current">3</div>
|
||||||
|
<div class="image">4</div>
|
||||||
|
<div class="image">5</div>
|
||||||
|
<div class="image">6</div>
|
||||||
|
<div class="image">7</div>
|
||||||
|
</div>
|
||||||
|
<div class="ribbon" style="margin-left: -100px;">
|
||||||
|
<div class="image">1</div>
|
||||||
|
<div class="image">2</div>
|
||||||
|
<div class="image">3</div>
|
||||||
|
<div class="image">4</div>
|
||||||
|
<div class="image pic">5</div>
|
||||||
|
<div class="image">6</div>
|
||||||
|
<div class="image">7</div>
|
||||||
|
</div>
|
||||||
|
<div class="ribbon">
|
||||||
|
<div class="image">1</div>
|
||||||
|
<div class="image">2</div>
|
||||||
|
<div class="image">3</div>
|
||||||
|
<div class="image">4</div>
|
||||||
|
<div class="image">5</div>
|
||||||
|
<div class="image">6</div>
|
||||||
|
<div class="image">7</div>
|
||||||
|
</div>
|
||||||
|
<div class="ribbon">
|
||||||
|
<div class="image">1</div>
|
||||||
|
<div class="image">2</div>
|
||||||
|
<div class="image">3</div>
|
||||||
|
<div class="image">4</div>
|
||||||
|
<div class="image">5</div>
|
||||||
|
<div class="image">6</div>
|
||||||
|
<div class="image">7</div>
|
||||||
|
</div>
|
||||||
|
<div class="ribbon">
|
||||||
|
<div class="image">1</div>
|
||||||
|
<div class="image">2</div>
|
||||||
|
<div class="image">3</div>
|
||||||
|
<div class="image">4</div>
|
||||||
|
<div class="image">5</div>
|
||||||
|
<div class="image">6</div>
|
||||||
|
<div class="image">7</div>
|
||||||
|
</div>
|
||||||
|
<div class="ribbon">
|
||||||
|
<div class="image">1</div>
|
||||||
|
<div class="image">2</div>
|
||||||
|
<div class="image">3</div>
|
||||||
|
<div class="image">4</div>
|
||||||
|
<div class="image">5</div>
|
||||||
|
<div class="image">6</div>
|
||||||
|
<div class="image">7</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="h-marker"></div>
|
||||||
|
<div class="v-marker"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
x
Reference in New Issue
Block a user