mirror of
				https://github.com/flynx/ImageGrid.git
				synced 2025-11-03 21:00:14 +00:00 
			
		
		
		
	more cleanup...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
		
							parent
							
								
									130dcc363a
								
							
						
					
					
						commit
						9e9198fb72
					
				@ -141,7 +141,7 @@ Roadmap
 | 
			
		||||
		[_] ASAP: test on Android...
 | 
			
		||||
		[_] 0% Tablet UI
 | 
			
		||||
			[_] screen buttons
 | 
			
		||||
		[_] empty view (no data) usable...
 | 
			
		||||
		[_] usable empty view -- w.o. data...
 | 
			
		||||
		[_] proper system init (start w.o. any data)
 | 
			
		||||
		[_] 75% image sorting (date/name/...)
 | 
			
		||||
			[X] 100% sort by:
 | 
			
		||||
 | 
			
		||||
							
								
								
									
										42
									
								
								ui/data.js
									
									
									
									
									
								
							
							
						
						
									
										42
									
								
								ui/data.js
									
									
									
									
									
								
							@ -18,38 +18,68 @@ var CACHE_DIR = '.ImageGridCache'
 | 
			
		||||
 | 
			
		||||
// A stub image, also here for documentation...
 | 
			
		||||
var STUB_IMAGE_DATA = {
 | 
			
		||||
	// Entity GID...
 | 
			
		||||
	id: 'SIZE',
 | 
			
		||||
	// entity type, can be 'image', 'group'
 | 
			
		||||
 | 
			
		||||
	// Entity type
 | 
			
		||||
	// can be:
 | 
			
		||||
	// 	- 'image'
 | 
			
		||||
	// 	- 'group'
 | 
			
		||||
	type: 'image',
 | 
			
		||||
	// entity state, can be 'single', 'grouped', 'hidden', ...
 | 
			
		||||
 | 
			
		||||
	// Entity state
 | 
			
		||||
	// can be:
 | 
			
		||||
	// 	- 'single'
 | 
			
		||||
	// 	- 'grouped'
 | 
			
		||||
	// 	- 'hidden'
 | 
			
		||||
	// 	- ...
 | 
			
		||||
	state: 'single',
 | 
			
		||||
 | 
			
		||||
	// Creation time...
 | 
			
		||||
	ctime: 0,
 | 
			
		||||
 | 
			
		||||
	// Original path...
 | 
			
		||||
	path: './images/sizes/900px/SIZE.jpg',
 | 
			
		||||
 | 
			
		||||
	// Previews...
 | 
			
		||||
	// NOTE: the actual values depend on specific image and can be
 | 
			
		||||
	// 		any size...
 | 
			
		||||
	preview: {
 | 
			
		||||
		'150px': './images/sizes/150px/SIZE.jpg',
 | 
			
		||||
		'350px': './images/sizes/350px/SIZE.jpg',
 | 
			
		||||
		'900px': './images/sizes/900px/SIZE.jpg',
 | 
			
		||||
	},
 | 
			
		||||
 | 
			
		||||
	// Classes
 | 
			
		||||
	// XXX currently unused...
 | 
			
		||||
	classes: '',
 | 
			
		||||
 | 
			
		||||
	// Image orientation
 | 
			
		||||
	// can be:
 | 
			
		||||
	// 	- 0 (default)	- load as-is
 | 
			
		||||
	// 	- 90			- rotate 90deg CW
 | 
			
		||||
	// 	- 180			- rotate 180deg CW
 | 
			
		||||
	// 	- 270			- rotate 270deg CW (90deg CCW)
 | 
			
		||||
	orientation: 0,
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
// Data format...
 | 
			
		||||
var DATA = {
 | 
			
		||||
	// Format version...
 | 
			
		||||
	version: '2.0',
 | 
			
		||||
 | 
			
		||||
	// current position, GID...
 | 
			
		||||
	// Current position, GID...
 | 
			
		||||
	current: null,
 | 
			
		||||
 | 
			
		||||
	// the ribbon cache...
 | 
			
		||||
	// The ribbon cache...
 | 
			
		||||
	// in the simplest form this is a list of lists of GIDs
 | 
			
		||||
	ribbons: [],
 | 
			
		||||
 | 
			
		||||
	// flat ordered list of images in current context...
 | 
			
		||||
	// Flat ordered list of images in current context...
 | 
			
		||||
	// in the simplest form this is a list of GIDs.
 | 
			
		||||
	order: [],
 | 
			
		||||
 | 
			
		||||
	// this can be used to store the filename/path of the file containing 
 | 
			
		||||
	// This can be used to store the filename/path of the file containing 
 | 
			
		||||
	// image data...
 | 
			
		||||
	image_file: null
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@ -51,6 +51,8 @@ $(function(){
 | 
			
		||||
		//.dblclick(dblClickHandler)
 | 
			
		||||
 | 
			
		||||
	$(window)
 | 
			
		||||
		// XXX in single image mode this still causes problems...
 | 
			
		||||
		//		this can be resolved by cycling to ribbon mode and back...
 | 
			
		||||
		.resize(function() {
 | 
			
		||||
			correctImageProportionsForRotation('.images')
 | 
			
		||||
			centerView()
 | 
			
		||||
 | 
			
		||||
@ -48,7 +48,7 @@ var KEYBOARD_CONFIG = {
 | 
			
		||||
		title: 'Info overlay',
 | 
			
		||||
		doc: 'Displayed on bottom of the screen if enabled (toggle with '+
 | 
			
		||||
			'<b>I</b>) and/or inline, at bottom of and image when cursor '+
 | 
			
		||||
			'is over it (only in ribbon mode, toggle with <b>alt-I</b>)<p>'+
 | 
			
		||||
			'is over it (only in ribbon mode, toggle with <b>alt-I</b>)'+
 | 
			
		||||
 | 
			
		||||
			'<p>NOTE: when the cursor is over the info overlay one can use '+
 | 
			
		||||
			'Ctrl-A and Ctrl-D for info text selection, without affecting '+
 | 
			
		||||
@ -165,6 +165,7 @@ var KEYBOARD_CONFIG = {
 | 
			
		||||
	'.viewer:not(.overlay)': {
 | 
			
		||||
		title: 'Global',
 | 
			
		||||
		doc: 'These key bindings work in most other modes.'+
 | 
			
		||||
 | 
			
		||||
			'<p>NOTE: shifting markid images from different ribbons will '+
 | 
			
		||||
			'perform the operations on ALL marked images but relative '+
 | 
			
		||||
			'the the current ribbon. i.e. some images might get promoted,'+
 | 
			
		||||
 | 
			
		||||
							
								
								
									
										11
									
								
								ui/marks.js
									
									
									
									
									
								
							
							
						
						
									
										11
									
								
								ui/marks.js
									
									
									
									
									
								
							@ -67,7 +67,8 @@ function loadAllImages(){
 | 
			
		||||
* Modes
 | 
			
		||||
*/
 | 
			
		||||
 | 
			
		||||
var toggleMarkedOnlyView = createCSSClassToggler('.viewer', 
 | 
			
		||||
var toggleMarkedOnlyView = createCSSClassToggler(
 | 
			
		||||
		'.viewer', 
 | 
			
		||||
		'marked-only-view',
 | 
			
		||||
		function(action){
 | 
			
		||||
			if(action == 'on'){
 | 
			
		||||
@ -79,7 +80,9 @@ var toggleMarkedOnlyView = createCSSClassToggler('.viewer',
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
// XXX shifting images and unmarking in this mode do not work correctly...
 | 
			
		||||
var toggleMarkesView = createCSSClassToggler('.viewer', 'marks-visible',
 | 
			
		||||
var toggleMarkesView = createCSSClassToggler(
 | 
			
		||||
	'.viewer', 
 | 
			
		||||
	'marks-visible',
 | 
			
		||||
	function(){
 | 
			
		||||
		var cur = getImage()
 | 
			
		||||
		// current is marked...
 | 
			
		||||
@ -107,7 +110,9 @@ var toggleMarkesView = createCSSClassToggler('.viewer', 'marks-visible',
 | 
			
		||||
* Actions
 | 
			
		||||
*/
 | 
			
		||||
 | 
			
		||||
var toggleImageMark = createCSSClassToggler('.current.image', 'marked',
 | 
			
		||||
var toggleImageMark = createCSSClassToggler(
 | 
			
		||||
	'.current.image', 
 | 
			
		||||
	'marked',
 | 
			
		||||
	function(action){
 | 
			
		||||
		toggleMarkesView('on')
 | 
			
		||||
		$('.viewer').trigger('togglingMark', [getImage(), action])
 | 
			
		||||
 | 
			
		||||
							
								
								
									
										29
									
								
								ui/modes.js
									
									
									
									
									
								
							
							
						
						
									
										29
									
								
								ui/modes.js
									
									
									
									
									
								
							@ -6,6 +6,9 @@
 | 
			
		||||
 | 
			
		||||
//var DEBUG = DEBUG != null ? DEBUG : true
 | 
			
		||||
 | 
			
		||||
var SLIDESHOW_INTERVAL = 3000
 | 
			
		||||
var SLIDESHOW_LOOP = true
 | 
			
		||||
var SLIDESHOW_DIRECTION = 'next'
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
@ -17,7 +20,9 @@
 | 
			
		||||
//function makeDrawerToggler(contentRenderer, root, element_class, mode_class){
 | 
			
		||||
function makeDrawerToggler(contentRenderer, root){
 | 
			
		||||
	var element_class = '.drawer-block'
 | 
			
		||||
	var toggler = createCSSClassToggler(root, 'drawer-mode overlay',
 | 
			
		||||
	var toggler = createCSSClassToggler(
 | 
			
		||||
			root, 
 | 
			
		||||
			'drawer-mode overlay',
 | 
			
		||||
			function(action){
 | 
			
		||||
				// XXX
 | 
			
		||||
				var body = $(document.body)
 | 
			
		||||
@ -111,7 +116,8 @@ function makeDrawerToggler(contentRenderer, root){
 | 
			
		||||
*/
 | 
			
		||||
 | 
			
		||||
// XXX make this save and restore settings...
 | 
			
		||||
var toggleSingleImageMode = createCSSClassToggler('.viewer', 
 | 
			
		||||
var toggleSingleImageMode = createCSSClassToggler(
 | 
			
		||||
		'.viewer', 
 | 
			
		||||
		'single-image-mode',
 | 
			
		||||
		function(action){
 | 
			
		||||
			// prevent reiniting...
 | 
			
		||||
@ -162,13 +168,10 @@ var toggleSingleImageMode = createCSSClassToggler('.viewer',
 | 
			
		||||
		})
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
var SLIDESHOW_INTERVAL = 3000
 | 
			
		||||
var SLIDESHOW_LOOP = true
 | 
			
		||||
var SLIDESHOW_DIRECTION = 'next'
 | 
			
		||||
 | 
			
		||||
// TODO transitions...
 | 
			
		||||
// TODO a real setup UI (instead of prompt)
 | 
			
		||||
var toggleSlideShowMode = createCSSClassToggler('.viewer', 
 | 
			
		||||
var toggleSlideShowMode = createCSSClassToggler(
 | 
			
		||||
		'.viewer', 
 | 
			
		||||
		'.slideshow-mode',
 | 
			
		||||
		function(action){
 | 
			
		||||
			if(action == 'on'){
 | 
			
		||||
@ -216,7 +219,8 @@ var toggleSlideShowMode = createCSSClassToggler('.viewer',
 | 
			
		||||
		})
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
var toggleTheme = createCSSClassToggler('.viewer',
 | 
			
		||||
var toggleTheme = createCSSClassToggler(
 | 
			
		||||
		'.viewer',
 | 
			
		||||
		[
 | 
			
		||||
			'gray',
 | 
			
		||||
			'dark',
 | 
			
		||||
@ -228,7 +232,8 @@ var toggleTheme = createCSSClassToggler('.viewer',
 | 
			
		||||
		})
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
var toggleImageInfo = createCSSClassToggler('.viewer',
 | 
			
		||||
var toggleImageInfo = createCSSClassToggler(
 | 
			
		||||
		'.viewer',
 | 
			
		||||
		'.image-info-visible',
 | 
			
		||||
		function(action){
 | 
			
		||||
			if(toggleSingleImageMode('?') == 'off'){
 | 
			
		||||
@ -237,7 +242,8 @@ var toggleImageInfo = createCSSClassToggler('.viewer',
 | 
			
		||||
		})
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
var toggleInlineImageInfo = createCSSClassToggler('.viewer', 
 | 
			
		||||
var toggleInlineImageInfo = createCSSClassToggler(
 | 
			
		||||
		'.viewer', 
 | 
			
		||||
		'.image-info-inline-visible',
 | 
			
		||||
		function(action){
 | 
			
		||||
			if(action == 'on'){
 | 
			
		||||
@ -251,7 +257,8 @@ var toggleInlineImageInfo = createCSSClassToggler('.viewer',
 | 
			
		||||
		})
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
var toggleImageProportions = createCSSClassToggler('.viewer',
 | 
			
		||||
var toggleImageProportions = createCSSClassToggler(
 | 
			
		||||
		'.viewer',
 | 
			
		||||
		[
 | 
			
		||||
			'fit-square',
 | 
			
		||||
			'fit-viewer'
 | 
			
		||||
 | 
			
		||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user