2013-04-26 05:30:56 +04:00
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<title>ImageGrid.Viewer</title>
|
|
|
|
|
|
|
|
|
|
|
2013-05-31 00:23:45 +04:00
|
|
|
<link rel="stylesheet" href="layout.css">
|
2013-06-04 16:32:33 +04:00
|
|
|
<!-- use only for devel... -->
|
2013-06-04 21:47:17 +04:00
|
|
|
<!--link rel="stylesheet/less" href="layout.less"-->
|
2013-05-17 04:52:43 +04:00
|
|
|
|
2013-05-31 00:23:45 +04:00
|
|
|
<style>
|
2013-05-30 19:15:38 +04:00
|
|
|
|
2013-05-30 07:29:07 +04:00
|
|
|
|
|
|
|
|
|
2013-04-26 05:30:56 +04:00
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
|
2013-06-04 21:47:17 +04:00
|
|
|
<!--
|
2013-06-04 16:32:33 +04:00
|
|
|
<script>
|
|
|
|
|
less = {
|
|
|
|
|
// or "production"
|
|
|
|
|
env: "development",
|
|
|
|
|
|
|
|
|
|
// load imports async
|
|
|
|
|
async: false,
|
|
|
|
|
|
|
|
|
|
// load imports async when in a page under
|
|
|
|
|
// a file protocol
|
|
|
|
|
fileAsync: false,
|
|
|
|
|
|
|
|
|
|
// when in watch mode, time in ms between polls
|
|
|
|
|
//poll: 1000,
|
|
|
|
|
|
|
|
|
|
// user functions, keyed by name
|
|
|
|
|
//functions: {},
|
|
|
|
|
|
|
|
|
|
// or "mediaQuery" or "all"
|
|
|
|
|
//dumpLineNumbers: "comments",
|
|
|
|
|
|
|
|
|
|
// whether to adjust url's to be relative
|
|
|
|
|
// if false, url's are already relative to the
|
|
|
|
|
// entry less file
|
|
|
|
|
//relativeUrls: false,
|
|
|
|
|
|
|
|
|
|
// a path to add on to the start of every url
|
|
|
|
|
//resource
|
|
|
|
|
//rootpath: ":/a.com/"
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
<script src="ext-lib/less.js"></script>
|
2013-06-04 21:47:17 +04:00
|
|
|
-->
|
2013-05-28 15:22:05 +04:00
|
|
|
<script src="ext-lib/jquery.js"></script>
|
2013-04-26 05:30:56 +04:00
|
|
|
|
2013-04-26 23:07:07 +04:00
|
|
|
<script src="lib/jli.js"></script>
|
|
|
|
|
<script src="lib/keyboard.js"></script>
|
2013-06-07 01:36:49 +04:00
|
|
|
<script src="lib/scroller.js"></script>
|
2013-04-26 23:07:07 +04:00
|
|
|
|
2013-06-08 05:46:57 +04:00
|
|
|
<script src="compatibility.js"></script>
|
|
|
|
|
|
2013-05-14 17:42:17 +04:00
|
|
|
<script src="base.js"></script>
|
2013-05-17 15:34:45 +04:00
|
|
|
<script src="modes.js"></script>
|
2013-05-17 06:57:35 +04:00
|
|
|
<script src="marks.js"></script>
|
2013-05-14 17:42:17 +04:00
|
|
|
<script src="data.js"></script>
|
2013-06-07 00:56:43 +04:00
|
|
|
<script src="files.js"></script>
|
|
|
|
|
<script src="localstorage.js"></script>
|
2013-06-02 20:14:39 +04:00
|
|
|
<script src="info.js"></script>
|
2013-05-14 17:42:17 +04:00
|
|
|
<script src="ui.js"></script>
|
2013-06-02 20:14:39 +04:00
|
|
|
<script src="setup.js"></script>
|
2013-05-28 15:22:05 +04:00
|
|
|
<script src="keybindings.js"></script>
|
2013-04-29 02:31:01 +04:00
|
|
|
|
2013-05-14 21:49:05 +04:00
|
|
|
|
|
|
|
|
<!-- XXX STUB -->
|
|
|
|
|
<script src="images.js"></script>
|
|
|
|
|
|
|
|
|
|
|
2013-05-02 19:47:04 +04:00
|
|
|
<script>
|
2013-04-29 02:31:01 +04:00
|
|
|
|
2013-05-17 18:20:38 +04:00
|
|
|
//DEBUG = true
|
2013-05-14 21:49:05 +04:00
|
|
|
|
2013-06-07 01:55:29 +04:00
|
|
|
var SCROLLER_ENABLED = true
|
2013-06-10 16:10:16 +04:00
|
|
|
var SCROLLER_ANIMATE_DURATION = 100
|
|
|
|
|
// XXX scroller transitions not yet ready...
|
|
|
|
|
// ...need to disable transitions on some actions (where we
|
|
|
|
|
// explicitly say 'css')
|
|
|
|
|
//var TRANSITION_MODE_DEFAULT = 'css'
|
2013-06-07 01:36:49 +04:00
|
|
|
|
2013-04-26 05:30:56 +04:00
|
|
|
// setup...
|
|
|
|
|
$(function(){
|
2013-06-08 15:10:58 +04:00
|
|
|
// NOTE: keep this as early as possible...
|
|
|
|
|
$(document)
|
|
|
|
|
.keydown(makeKeyboardHandler(
|
|
|
|
|
KEYBOARD_CONFIG,
|
|
|
|
|
function(k){
|
|
|
|
|
window.DEBUG && console.log(k)
|
|
|
|
|
}))
|
|
|
|
|
|
2013-06-01 18:43:14 +04:00
|
|
|
// defaults...
|
2013-05-18 01:16:56 +04:00
|
|
|
toggleTheme('gray')
|
2013-06-01 18:43:14 +04:00
|
|
|
toggleImageInfo('on')
|
2013-06-08 15:10:58 +04:00
|
|
|
// XXX this needs at least an image loaded...
|
|
|
|
|
//toggleImageProportions('fit-viewer')
|
2013-06-01 18:43:14 +04:00
|
|
|
|
2013-06-04 09:00:59 +04:00
|
|
|
setupIndicators()
|
2013-06-01 18:43:14 +04:00
|
|
|
autoHideCursor($('.viewer'))
|
2013-05-17 17:58:23 +04:00
|
|
|
|
2013-06-08 02:29:14 +04:00
|
|
|
|
2013-06-07 01:36:49 +04:00
|
|
|
if(SCROLLER_ENABLED){
|
2013-06-10 16:10:16 +04:00
|
|
|
SCROLLER = makeScrollHandler($('.viewer'), {
|
2013-06-07 04:27:49 +04:00
|
|
|
// XXX after click and initial move the screen jumps
|
|
|
|
|
// (both x and y), margins, left vs. translate?
|
|
|
|
|
//
|
|
|
|
|
// the problem is in centerView(...), seems scroller.js
|
|
|
|
|
// seems to not know where the element is after it does
|
|
|
|
|
// it's job, so the jump is scroller resetting the
|
|
|
|
|
// position...
|
2013-06-07 01:36:49 +04:00
|
|
|
scrollDisabled: true,
|
|
|
|
|
|
|
|
|
|
//enableMultiClicks: true,
|
|
|
|
|
// XXX does not seem to work...
|
|
|
|
|
//multiClickTimeout: 100,
|
|
|
|
|
|
2013-06-07 04:27:49 +04:00
|
|
|
// it's either this or disable the jQuery animation...
|
|
|
|
|
// ...have to benchmark to see which is better...
|
2013-06-10 16:10:16 +04:00
|
|
|
// XXX BUG: if transition is set to non-0 then it initializes
|
|
|
|
|
// only after an action, e.g. a click...
|
|
|
|
|
transitionDuration: TRANSITION_MODE_DEFAULT == 'animate' ? 0 : SCROLLER_ANIMATE_DURATION,
|
2013-06-07 01:36:49 +04:00
|
|
|
transitionEasing: 'liner',
|
2013-06-08 15:10:58 +04:00
|
|
|
|
|
|
|
|
// keep selectable elements selectable...
|
|
|
|
|
ignoreElements: '.noScroll, '+
|
|
|
|
|
'.image .inline-image-info, '+
|
|
|
|
|
'.overlay-info, '+
|
2013-06-10 17:28:32 +04:00
|
|
|
'.overlay, '+
|
2013-06-08 15:10:58 +04:00
|
|
|
'',
|
2013-06-07 01:36:49 +04:00
|
|
|
})
|
|
|
|
|
|
|
|
|
|
$('.viewer')
|
|
|
|
|
.on('shortClick', function(){ clickHandler(event) })
|
2013-06-07 04:27:49 +04:00
|
|
|
// XXX for some reason this is broken...
|
2013-06-07 01:36:49 +04:00
|
|
|
//.on('doubleClick', dblClickHandler)
|
|
|
|
|
.on('longClick', dblClickHandler)
|
|
|
|
|
|
2013-06-07 01:55:29 +04:00
|
|
|
.on('swipeLeft', function(){
|
|
|
|
|
updateDirection('prev')
|
|
|
|
|
prevImage()
|
|
|
|
|
centerRibbons()
|
|
|
|
|
})
|
|
|
|
|
.on('swipeRight', function(){
|
|
|
|
|
updateDirection('next')
|
|
|
|
|
nextImage()
|
|
|
|
|
centerRibbons()
|
|
|
|
|
})
|
|
|
|
|
.on('swipeUp', function(){
|
2013-06-16 02:57:17 +04:00
|
|
|
//prevRibbon()
|
|
|
|
|
shiftImageDown(null, DIRECTION)
|
2013-06-07 01:55:29 +04:00
|
|
|
centerRibbons()
|
|
|
|
|
})
|
|
|
|
|
.on('swipeDown', function(){
|
2013-06-16 02:57:17 +04:00
|
|
|
//nextRibbon()
|
|
|
|
|
shiftImageUp(null, DIRECTION)
|
2013-06-07 01:55:29 +04:00
|
|
|
centerRibbons()
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
2013-06-07 01:36:49 +04:00
|
|
|
} else {
|
|
|
|
|
// NOTE: this is global so as to not to add any extra complexity to
|
|
|
|
|
// the internal workings...
|
|
|
|
|
$('.viewer')
|
|
|
|
|
// XXX this messes things up...
|
|
|
|
|
//.dblclick(dblClickHandler)
|
|
|
|
|
.click(clickHandler)
|
|
|
|
|
}
|
2013-05-17 15:34:45 +04:00
|
|
|
|
|
|
|
|
$(window)
|
|
|
|
|
.resize(function() {
|
2013-06-03 22:45:01 +04:00
|
|
|
toggleImageProportions('!')
|
2013-05-17 15:34:45 +04:00
|
|
|
centerView()
|
|
|
|
|
})
|
|
|
|
|
|
2013-06-08 18:28:10 +04:00
|
|
|
setupBaseURLHistory()
|
2013-05-13 02:24:36 +04:00
|
|
|
setupDataBindings()
|
2013-05-03 17:08:59 +04:00
|
|
|
|
2013-05-22 03:00:38 +04:00
|
|
|
|
2013-05-28 19:25:13 +04:00
|
|
|
/* 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)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
})
|
2013-06-08 05:46:57 +04:00
|
|
|
*/
|
2013-05-28 19:25:13 +04:00
|
|
|
|
2013-05-22 03:00:38 +04:00
|
|
|
// we have an image file...
|
2013-06-11 03:10:01 +04:00
|
|
|
if((DATA_ATTR + '_BASE_URL') in localStorage
|
2013-06-11 04:46:45 +04:00
|
|
|
&& !/^\.[\/\\]*/.test(localStorage[DATA_ATTR + '_BASE_URL'])){
|
|
|
|
|
|
2013-05-28 02:17:24 +04:00
|
|
|
BASE_URL = localStorage[DATA_ATTR + '_BASE_URL']
|
2013-05-28 04:41:16 +04:00
|
|
|
|
2013-06-06 23:26:45 +04:00
|
|
|
var loading = statusNotify(loadDir(BASE_URL))
|
2013-05-22 03:00:38 +04:00
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
// everything is in localStorage...
|
|
|
|
|
if('DATA' in localStorage){
|
|
|
|
|
loadLocalStorage()
|
|
|
|
|
|
|
|
|
|
// legacy default data...
|
|
|
|
|
} else {
|
|
|
|
|
DATA = convertDataGen1(image_list)
|
|
|
|
|
IMAGES = DATA.images
|
2013-06-15 20:08:23 +04:00
|
|
|
DATA = DATA.data
|
2013-06-02 20:14:39 +04:00
|
|
|
reloadViewer()
|
2013-05-22 03:00:38 +04:00
|
|
|
}
|
2013-05-22 03:41:51 +04:00
|
|
|
var loading = $.Deferred().resolve()
|
|
|
|
|
}
|
2013-05-22 03:00:38 +04:00
|
|
|
|
2013-05-22 03:41:51 +04:00
|
|
|
loading
|
|
|
|
|
.done(function(){
|
2013-06-01 21:44:49 +04:00
|
|
|
showStatus('Loading settings...')
|
2013-06-16 02:57:17 +04:00
|
|
|
DATA_ATTR + '_SETTINGS' in localStorage && loadLocalStorageSettings()
|
2013-05-28 04:41:16 +04:00
|
|
|
|
2013-05-22 03:41:51 +04:00
|
|
|
// XXX this will reload everything...
|
2013-06-21 22:57:16 +04:00
|
|
|
(MARKED.length == 0
|
|
|
|
|
&& DATA_ATTR + '_MARKED' in localStorage
|
|
|
|
|
&& loadLocalStorageMarks())
|
2013-05-22 03:00:38 +04:00
|
|
|
|
2013-05-22 03:41:51 +04:00
|
|
|
updateImages()
|
2013-06-10 16:10:16 +04:00
|
|
|
|
|
|
|
|
SCROLLER.start()
|
2013-05-22 03:41:51 +04:00
|
|
|
})
|
2013-05-22 03:00:38 +04:00
|
|
|
|
2013-04-26 05:30:56 +04:00
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</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">
|
2013-04-30 00:54:32 +04:00
|
|
|
|
2013-04-26 05:30:56 +04:00
|
|
|
<div class="ribbon-set"></div>
|
2013-04-30 00:54:32 +04:00
|
|
|
|
|
|
|
|
|
2013-04-30 01:34:26 +04:00
|
|
|
<!-- XXX should these be here??? -->
|
2013-05-23 15:22:38 +04:00
|
|
|
<div class="overlay-block">
|
|
|
|
|
<div class="background"></div>
|
|
|
|
|
<div class="content"></div>
|
|
|
|
|
</div>
|
2013-06-08 05:46:57 +04:00
|
|
|
|
2013-04-26 05:30:56 +04:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- vim:set ts=4 sw=4 spell : -->
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
