mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-29 02:10:08 +00:00
227 lines
4.6 KiB
HTML
Executable File
227 lines
4.6 KiB
HTML
Executable File
<html>
|
|
<head>
|
|
<title>ImageGrid.Viewer</title>
|
|
|
|
|
|
<link rel="stylesheet" href="layout.css">
|
|
|
|
<style>
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|
|
<script src="ext-lib/jquery.js"></script>
|
|
|
|
<script src="lib/jli.js"></script>
|
|
<script src="lib/keyboard.js"></script>
|
|
|
|
<script src="base.js"></script>
|
|
<script src="modes.js"></script>
|
|
<script src="marks.js"></script>
|
|
<script src="data.js"></script>
|
|
<script src="ui.js"></script>
|
|
<script src="keybindings.js"></script>
|
|
|
|
|
|
<!-- XXX STUB -->
|
|
<script src="images.js"></script>
|
|
|
|
|
|
<script>
|
|
|
|
//DEBUG = true
|
|
|
|
var CURSOR_SHOW_THRESHOLD = 10
|
|
var CURSOR_HIDE_TIMEOUT = 2000
|
|
|
|
|
|
// setup...
|
|
$(function(){
|
|
|
|
toggleTheme('gray')
|
|
|
|
// NOTE: this is global so as to not to add any extra complexity to
|
|
// the internal workings...
|
|
$('.viewer')
|
|
.click(clickHandler)
|
|
// XXX for some reason this messes up alignment on initial view...
|
|
//.dblclick(dblClickHandler)
|
|
|
|
// hide cursor...
|
|
.on('mousemove', function(evt){
|
|
_cursor_pos = window._cursor_pos == null || $('.viewer').css('cursor') == 'auto' ?
|
|
[evt.clientX, evt.clientY]
|
|
: _cursor_pos
|
|
|
|
if(Math.abs(evt.clientX - _cursor_pos[0]) > CURSOR_SHOW_THRESHOLD
|
|
|| Math.abs(evt.clientY - _cursor_pos[1]) > CURSOR_SHOW_THRESHOLD){
|
|
|
|
if(window._cursor_timeout != null){
|
|
clearTimeout(_cursor_timeout)
|
|
}
|
|
|
|
$('.viewer').css('cursor', '')
|
|
|
|
} else {
|
|
_cursor_timeout = setTimeout(function(){
|
|
if(Math.abs(evt.clientX - _cursor_pos[0]) < CURSOR_SHOW_THRESHOLD
|
|
|| Math.abs(evt.clientY - _cursor_pos[1]) < CURSOR_SHOW_THRESHOLD){
|
|
$('.viewer').css('cursor', 'none')
|
|
}
|
|
}, CURSOR_HIDE_TIMEOUT)
|
|
}
|
|
})
|
|
|
|
$(window)
|
|
.resize(function() {
|
|
// XXX should this be animated or not?
|
|
centerView()
|
|
})
|
|
|
|
$(document)
|
|
.keydown(makeKeyboardHandler(
|
|
KEYBOARD_CONFIG,
|
|
function(k){
|
|
window.DEBUG && console.log(k)
|
|
}))
|
|
|
|
setupDataBindings()
|
|
|
|
|
|
/* XXX drag/drop
|
|
$(document)
|
|
.bind('dragover', function(e){
|
|
e.stopPropagation()
|
|
e.preventDefault()
|
|
// XXX is there a jQuery way out of this??
|
|
e.originalEvent.dataTransfer.dropEffect = 'copy' // Explicitly show this is a copy.
|
|
})
|
|
.bind('drop', function(e){
|
|
e.stopPropagation()
|
|
e.preventDefault()
|
|
|
|
// XXX is there a jQuery way out of this??
|
|
var files = e.originalEvent.dataTransfer.files
|
|
|
|
// XXX should we be using the loadJSON here???
|
|
// XXX desperatly need image caching and preview generation...
|
|
|
|
for (var i = 0, f; f = files[i]; i++) {
|
|
|
|
if (!f.type.match('image.*')) {
|
|
continue
|
|
}
|
|
console.log('FILE:', f)
|
|
|
|
var reader = new FileReader()
|
|
reader.onload = function(i){
|
|
return function(e){
|
|
// XXX need to avoid data URLs here and use plain old paths...
|
|
//ribbon.append(makeImage(e.target.result, i))
|
|
console.log('DROPPED')//, e.target.result)
|
|
}
|
|
}(i)
|
|
|
|
reader.readAsDataURL(f)
|
|
//reader.readAsText(f)
|
|
}
|
|
|
|
})
|
|
*/
|
|
|
|
//setElementOrigin($('.ribbon-set'), 'top', 'left')
|
|
|
|
|
|
// we have an image file...
|
|
if((DATA_ATTR + '_BASE_URL') in localStorage){
|
|
BASE_URL = localStorage[DATA_ATTR + '_BASE_URL']
|
|
|
|
var loading = loadDir(BASE_URL)
|
|
|
|
} else {
|
|
// everything is in localStorage...
|
|
if('DATA' in localStorage){
|
|
loadLocalStorage()
|
|
|
|
// legacy default data...
|
|
} else {
|
|
DATA = convertDataGen1(image_list)
|
|
DATA = DATA.data
|
|
IMAGES = DATA.images
|
|
loadData()
|
|
}
|
|
var loading = $.Deferred().resolve()
|
|
}
|
|
|
|
loading
|
|
.done(function(){
|
|
console.log('Loading settings...')
|
|
loadLocalStorageSettings()
|
|
|
|
// XXX this will reload everything...
|
|
if('MARKED' in localStorage){
|
|
loadLocalStorageMarks()
|
|
}
|
|
|
|
updateImages()
|
|
})
|
|
|
|
})
|
|
|
|
|
|
</script>
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<!-- This is the basic viewer structure...
|
|
|
|
Unpopulated
|
|
NOTE: there can be only .ribbon-set element.
|
|
|
|
<div class="viewer">
|
|
<div class="ribbon-set"></div>
|
|
</div>
|
|
|
|
|
|
Populated
|
|
|
|
<div class="viewer">
|
|
<div class="ribbon-set">
|
|
<div class="ribbon">
|
|
<div class="image"></div>
|
|
<div class="image"></div>
|
|
</div>
|
|
<div class="ribbon">
|
|
<div class="image"></div>
|
|
<div class="current image"></div>
|
|
<div class="image"></div>
|
|
<div class="image"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
-->
|
|
|
|
<div class="viewer">
|
|
|
|
<div class="ribbon-set"></div>
|
|
|
|
|
|
<!-- XXX should these be here??? -->
|
|
<div class="up-indicator"></div>
|
|
<div class="down-indicator"></div>
|
|
<div class="start-indicator"></div>
|
|
<div class="end-indicator"></div>
|
|
<div class="overlay-block">
|
|
<div class="background"></div>
|
|
<div class="content"></div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- vim:set ts=4 sw=4 spell : -->
|
|
</body>
|
|
</html>
|