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
|
||||
[_] 60% Preview II
|
||||
[_] 66% 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
|
||||
[_] 25% cleanup UI
|
||||
[_] 25% UI
|
||||
[_] fix single image mode
|
||||
| need to center the image correctly...
|
||||
[_] 55% add screen buttons for all actions...
|
||||
@ -99,12 +99,15 @@ Priority work
|
||||
[X] navigation
|
||||
[_] 0% actions
|
||||
[_] bug: shifting up to new ribbon pushes the current row down...
|
||||
[_] 12% optional features...
|
||||
[_] 25% drag/move action...
|
||||
[_] basic infrastructure
|
||||
[_] 40% optional features...
|
||||
[_] 80% drag/move action...
|
||||
[X] basic infrastructure
|
||||
[X] action: center current image
|
||||
[_] while zoomed more than the screen
|
||||
[_] while zoomed out (ribbon view)
|
||||
[X] while zoomed more than the screen
|
||||
[X] while zoomed out (ribbon view)
|
||||
[_] 0% cleanup...
|
||||
[_] disable click events while dragging
|
||||
[_] check compatibility with gestures
|
||||
[_] 0% native client
|
||||
[_] android
|
||||
[_] 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