ImageGrid/ui/index.html

<html>
<head>
<title>ImageGrid.Viewer</title>


<link rel="stylesheet" href="layout.css">
<link rel="stylesheet" href="css/editor.css">
<!-- use only for devel... -->
<!--link rel="stylesheet/less" href="layout.less"-->

<style>

</style>

<script src="ext-lib/jquery.js"></script>
<script src="ext-lib/jquery-ui.js"></script>

<script src="lib/jli.js"></script>
<script src="lib/keyboard.js"></script>
<script src="lib/scroller.js"></script>
<script src="lib/dialogs.js"></script>
<script src="lib/panels.js"></script>
<script src="lib/editor.js"></script>

<script src="compatibility.js"></script>

<!-- keep this the first thing to load -->
<script src="setup.js"></script>

<script src="ribbons.js"></script>
<script src="image.js"></script>
<script src="data.js"></script>
<script src="data4.js"></script>
<script src="formats.js"></script>
<!--script src="cache.js"></script-->
<script src="files.js"></script>
<script src="urlhistory.js"></script>
<script src="crop.js"></script>
<script src="sort.js"></script>
<script src="workers.js"></script>
<script src="modes.js"></script>
<script src="marks.js"></script>
<script src="bookmarks.js"></script>
<script src="localstorage.js"></script>
<script src="info.js"></script>
<script src="ui.js"></script>
<script src="editor.js"></script>
<script src="tags.js"></script>
<script src="keybindings.js"></script>

<!-- XXX STUB -->
<!--script src="images.js"></script-->


<script>


//DEBUG = true

var SCROLLER_ENABLED = true
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'

// setup...
$(function(){
	// NOTE: keep this as early as possible...
	$(document)
		.keydown(makeKeyboardHandler(
			KEYBOARD_CONFIG,
			function(k){
				window.DEBUG && console.log(k)
			}))

	// defaults...
	toggleTheme('gray')
	toggleImageInfo('on')
	autoHideCursor($('.viewer'))


	if(SCROLLER_ENABLED){
		SCROLLER = makeScrollHandler($('.viewer'), {
				// 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...
				scrollDisabled: true,

				//enableMultiClicks: true,
				// XXX does not seem to work...
				//multiClickTimeout: 100,

				// it's either this or disable the jQuery animation...
				// ...have to benchmark to see which is better...
				// 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,
				transitionEasing: 'liner',

				// keep selectable elements selectable...
				ignoreElements: '.noScroll, '+
					'.image .inline-image-info, '+
					'.overlay-info, '+
					'.overlay, '+
					'',
			})

		$('.viewer')
			.on('shortClick', function(){ clickHandler(event) })
			// XXX for some reason this is broken...
			//.on('doubleClick', dblClickHandler)
			.on('longClick', dblClickHandler)

			.on('swipeLeft', function(){
				updateDirection('prev')
				prevImage() 
				centerRibbons()
			})
			.on('swipeRight', function(){
				updateDirection('next')
				nextImage() 
				centerRibbons()
			})
			.on('swipeUp', function(){
				//prevRibbon() 
				shiftImageDown(null, DIRECTION) 
				centerRibbons()
			})
			.on('swipeDown', function(){
				//nextRibbon() 
				shiftImageUp(null, DIRECTION) 
				centerRibbons()
			})


	} 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)
	}

	$(window)
		.resize(function() {
			toggleImageProportions('!')
			centerView()
		})
		
	setupBaseURLHistory()
	setupDataBindings()

	// XXX do we need drag'n'drop here???

	var data_attr = CONFIG.data_attr

	// we have an image.json file...
	if((data_attr + '_BASE_URL') in localStorage
			&& !/^\.[\/\\]*/.test(localStorage[data_attr + '_BASE_URL'])){

		loadLocalStorageBaseURLHistory(data_attr)

		BASE_URL = localStorage[data_attr + '_BASE_URL']

		//var loading = statusNotify(loadDir(BASE_URL))

		//var loading = statusProgress('Loading', statusNotify(loadDir(BASE_URL)))

		var loading = statusNotify(loadDir(BASE_URL))

	} else {
		// everything is in localStorage...
		if('DATA' in localStorage){
			loadLocalStorage()

		/* XXX do we need this anymore???
		// legacy default data...
		} else {
			DATA = convertDataGen1(image_list)
			IMAGES = DATA.images
			DATA = DATA.data
			reloadViewer()
		*/
		}
		var loading = $.Deferred().resolve()
	}

	loading
		.done(function(){
			showStatus('Loading settings...')
			data_attr + '_SETTINGS' in localStorage && loadLocalStorageSettings()

			/* XXX do we need this???
			// XXX this will reload everything...
			MARKED.length == 0 
				&& data_attr + '_MARKED' in localStorage 
				&& loadLocalStorageMarks()
			*/

			updateImages()
			toggleMarksView('on')

			SCROLLER.start()

		})

})


</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="mark selected"></div>
			<div class="image"></div>
			...
		</div>
		...
	</div>
</div>
-->

<div class="viewer">

	<div class="ribbon-set"></div>


	<!-- XXX should these be here??? -->
	<div class="overlay-block">
		<div class="background"></div>
		<div class="content"></div>
	</div>

</div>


<!-- vim:set ts=4 sw=4 spell : -->
</body>
</html>