mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-31 11:20:09 +00:00
refactored the setup process to the new system...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
e9370e7bdd
commit
a42049de9e
85
ui/cache.js
Executable file
85
ui/cache.js
Executable file
@ -0,0 +1,85 @@
|
|||||||
|
/**********************************************************************
|
||||||
|
*
|
||||||
|
*
|
||||||
|
*
|
||||||
|
**********************************************************************/
|
||||||
|
|
||||||
|
//var DEBUG = DEBUG != null ? DEBUG : true
|
||||||
|
//
|
||||||
|
var IMAGE_CACHE = []
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/*********************************************************************/
|
||||||
|
|
||||||
|
// TODO add global cache...
|
||||||
|
// - manage cache by number and preview size...
|
||||||
|
// - keep in biggish...
|
||||||
|
|
||||||
|
|
||||||
|
// NOTE: this will always overwrite the previous cache set for a ribbon...
|
||||||
|
// NOTE: it appears that sorting images by priority before loading them
|
||||||
|
// to cache has little or no effect on the order they are
|
||||||
|
// loaded/rendered...
|
||||||
|
// NOTE: this is not meant to be a real cache, rather a que for the OS and
|
||||||
|
// backend/webkit on what's next...
|
||||||
|
//
|
||||||
|
// XXX this appears to actually make things slow and laggy...
|
||||||
|
function preCacheRibbonImages(ribbon){
|
||||||
|
var deferred = $.Deferred()
|
||||||
|
setTimeout(function(){
|
||||||
|
var i = getRibbonIndex(ribbon)
|
||||||
|
var size = getVisibleImageSize('max')
|
||||||
|
var screen_size = getScreenWidthInImages(getVisibleImageSize())
|
||||||
|
// XXX needs tuning...
|
||||||
|
var cache_frame_size = (screen_size * LOAD_SCREENS)
|
||||||
|
var images = ribbon.find('.image')
|
||||||
|
var first = getImageGID(images.first())
|
||||||
|
var last = getImageGID(images.last())
|
||||||
|
|
||||||
|
var gids = getGIDsAfter(-cache_frame_size, first, i)
|
||||||
|
.concat(getGIDsAfter(cache_frame_size, last, i))
|
||||||
|
|
||||||
|
var cache = []
|
||||||
|
IMAGE_CACHE[i] = cache
|
||||||
|
$.each(gids, function(i, e){
|
||||||
|
var img = new Image()
|
||||||
|
img.src = getBestPreview(e, size).url
|
||||||
|
cache.push(img)
|
||||||
|
})
|
||||||
|
|
||||||
|
deferred.resolve(cache)
|
||||||
|
}, 0)
|
||||||
|
return deferred
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function preCacheAllRibbons(){
|
||||||
|
$('.ribbon').each(function(){
|
||||||
|
preCacheRibbonImages($(this))
|
||||||
|
})
|
||||||
|
return IMAGE_CACHE
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/*********************************************************************/
|
||||||
|
|
||||||
|
function setupImageCache(viewer){
|
||||||
|
console.log('Image cache: setup...')
|
||||||
|
|
||||||
|
return viewer
|
||||||
|
.on('reloadedRibbon updatedRibbon', function(evt, ribbon){
|
||||||
|
|
||||||
|
window.DEBUG
|
||||||
|
&& console.log('>>> (ribbon:', getRibbonIndex(ribbon), ') Updating cache...')
|
||||||
|
|
||||||
|
preCacheRibbonImages(ribbon)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
SETUP_BINDINGS.push(setupImageCache)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/**********************************************************************
|
||||||
|
* vim:set ts=4 sw=4 : */
|
||||||
311
ui/data.js
311
ui/data.js
@ -138,8 +138,6 @@ var SETTINGS = {
|
|||||||
|
|
||||||
var BASE_URL = '.'
|
var BASE_URL = '.'
|
||||||
|
|
||||||
var IMAGE_CACHE = []
|
|
||||||
|
|
||||||
// XXX make these usable for both saving and loading...
|
// XXX make these usable for both saving and loading...
|
||||||
// XXX get these from config...
|
// XXX get these from config...
|
||||||
var IMAGES_FILE_DEFAULT = 'images.json'
|
var IMAGES_FILE_DEFAULT = 'images.json'
|
||||||
@ -160,13 +158,6 @@ var UPDATE_SYNC = false
|
|||||||
var SYNC_IMG_LOADER = false
|
var SYNC_IMG_LOADER = false
|
||||||
|
|
||||||
|
|
||||||
// list of functions to setup different bindings
|
|
||||||
//
|
|
||||||
// each function must be of the form:
|
|
||||||
// setupBinding(viewer) -> viewer
|
|
||||||
//
|
|
||||||
var SETUP_BINDINGS = []
|
|
||||||
|
|
||||||
// list of function that update image state...
|
// list of function that update image state...
|
||||||
//
|
//
|
||||||
// each function must be of the form:
|
// each function must be of the form:
|
||||||
@ -1778,61 +1769,6 @@ function loadSettings(){
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
/**********************************************************************
|
|
||||||
* Image caching...
|
|
||||||
*/
|
|
||||||
|
|
||||||
// TODO add global cache...
|
|
||||||
// - manage cache by number and preview size...
|
|
||||||
// - keep in biggish...
|
|
||||||
|
|
||||||
|
|
||||||
// NOTE: this will always overwrite the previous cache set for a ribbon...
|
|
||||||
// NOTE: it appears that sorting images by priority before loading them
|
|
||||||
// to cache has little or no effect on the order they are
|
|
||||||
// loaded/rendered...
|
|
||||||
// NOTE: this is not meant to be a real cache, rather a que for the OS and
|
|
||||||
// backend/webkit on what's next...
|
|
||||||
//
|
|
||||||
// XXX this appears to actually make things slower and laggy...
|
|
||||||
function preCacheRibbonImages(ribbon){
|
|
||||||
var deferred = $.Deferred()
|
|
||||||
setTimeout(function(){
|
|
||||||
var i = getRibbonIndex(ribbon)
|
|
||||||
var size = getVisibleImageSize('max')
|
|
||||||
var screen_size = getScreenWidthInImages(getVisibleImageSize())
|
|
||||||
// XXX needs tuning...
|
|
||||||
var cache_frame_size = (screen_size * LOAD_SCREENS)
|
|
||||||
var images = ribbon.find('.image')
|
|
||||||
var first = getImageGID(images.first())
|
|
||||||
var last = getImageGID(images.last())
|
|
||||||
|
|
||||||
var gids = getGIDsAfter(-cache_frame_size, first, i)
|
|
||||||
.concat(getGIDsAfter(cache_frame_size, last, i))
|
|
||||||
|
|
||||||
var cache = []
|
|
||||||
IMAGE_CACHE[i] = cache
|
|
||||||
$.each(gids, function(i, e){
|
|
||||||
var img = new Image()
|
|
||||||
img.src = getBestPreview(e, size).url
|
|
||||||
cache.push(img)
|
|
||||||
})
|
|
||||||
|
|
||||||
deferred.resolve(cache)
|
|
||||||
}, 0)
|
|
||||||
return deferred
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
function preCacheAllRibbons(){
|
|
||||||
$('.ribbon').each(function(){
|
|
||||||
preCacheRibbonImages($(this))
|
|
||||||
})
|
|
||||||
return IMAGE_CACHE
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/**********************************************************************
|
/**********************************************************************
|
||||||
* Actions...
|
* Actions...
|
||||||
*/
|
*/
|
||||||
@ -1964,5 +1900,252 @@ function loadRibbonsFromPath(path, cmp, reverse, dir_name){
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/*********************************************************************/
|
||||||
|
|
||||||
|
function setupData(viewer){
|
||||||
|
console.log('Data: setup...')
|
||||||
|
|
||||||
|
return viewer
|
||||||
|
// NOTE: we do not need to worry about explicit centering the ribbon
|
||||||
|
// here, just ball-park-load the correct batch...
|
||||||
|
// NOTE: if we decide to hide ribbons, uncomment the visibility
|
||||||
|
// test down in the code...
|
||||||
|
.on('preCenteringRibbon', function(evt, ribbon, image){
|
||||||
|
var r = getRibbonIndex(ribbon)
|
||||||
|
|
||||||
|
// skip all but the curent ribbon in single image view...
|
||||||
|
if(toggleSingleImageMode('?') == 'on' && r != getRibbonIndex()){
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// prepare for loading...
|
||||||
|
var gid = getImageGID(image)
|
||||||
|
var gr = DATA.ribbons[r]
|
||||||
|
|
||||||
|
// NOTE: this can return null in certain cases (see docs)
|
||||||
|
var gid_before = getGIDBefore(gid, r)
|
||||||
|
// we'll set the image to the first if the align target is
|
||||||
|
// before it (i.e. gid_before is null)...
|
||||||
|
var img_before = gid_before == null
|
||||||
|
? ribbon.find('.image').first()
|
||||||
|
: getImageBefore(image, ribbon)
|
||||||
|
gid_before = gid_before == null ? gr[0] : gid_before
|
||||||
|
|
||||||
|
var screen_size = getScreenWidthInImages()
|
||||||
|
screen_size = screen_size < 1 ? 1 : screen_size
|
||||||
|
var load_frame_size = Math.round(screen_size * LOAD_SCREENS)
|
||||||
|
|
||||||
|
// target image is loaded...
|
||||||
|
if(gid_before == getImageGID(img_before)){
|
||||||
|
var roll_frame_size = Math.ceil(load_frame_size * ROLL_FRAME)
|
||||||
|
var threshold = Math.floor(load_frame_size * LOAD_THRESHOLD)
|
||||||
|
threshold = threshold < 1 ? 1 : threshold
|
||||||
|
|
||||||
|
var head = img_before.prevAll('.image').length
|
||||||
|
var tail = img_before.nextAll('.image').length
|
||||||
|
var l = ribbon.find('.image').length
|
||||||
|
var index = gr.indexOf(gid_before)
|
||||||
|
var at_start = index < threshold
|
||||||
|
var at_end = (gr.length-1 - index) < threshold
|
||||||
|
|
||||||
|
// less images than expected - extend ribbon...
|
||||||
|
if(l < load_frame_size){
|
||||||
|
// NOTE: we are forcing the count of images...
|
||||||
|
loadImagesAround(load_frame_size, gid, ribbon, null, true)
|
||||||
|
|
||||||
|
// tail at threshold - roll ->
|
||||||
|
} else if(!at_end && tail < threshold){
|
||||||
|
var rolled = rollImages(roll_frame_size, ribbon)
|
||||||
|
|
||||||
|
// head at threshold - roll <-
|
||||||
|
} else if(!at_start && head < threshold){
|
||||||
|
var rolled = rollImages(-roll_frame_size, ribbon)
|
||||||
|
|
||||||
|
//} else {
|
||||||
|
// console.log('>>> skipping:', r)
|
||||||
|
}
|
||||||
|
|
||||||
|
// we jumped, load new set...
|
||||||
|
} else {
|
||||||
|
// NOTE: we are forcing the count of images...
|
||||||
|
loadImagesAround(load_frame_size, gid, ribbon, null, true)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
.on('shiftedImage', function(evt, image, from, to){
|
||||||
|
from = getRibbonIndex(from)
|
||||||
|
//var ribbon = to
|
||||||
|
to = getRibbonIndex(to)
|
||||||
|
|
||||||
|
var gid = getImageGID(image)
|
||||||
|
var after = getGIDBefore(gid, to)
|
||||||
|
|
||||||
|
// remove the elem from the from ribbon...
|
||||||
|
var index = DATA.ribbons[from].indexOf(gid)
|
||||||
|
var img = DATA.ribbons[from].splice(index, 1)
|
||||||
|
|
||||||
|
// put the elem in the to ribbon...
|
||||||
|
index = after == null ? 0 : DATA.ribbons[to].indexOf(after) + 1
|
||||||
|
DATA.ribbons[to].splice(index, 0, gid)
|
||||||
|
|
||||||
|
// indicators...
|
||||||
|
flashIndicator(from < to ? 'next' : 'prev')
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
.on('createdRibbon', function(evt, index){
|
||||||
|
index = getRibbonIndex(index)
|
||||||
|
DATA.ribbons.splice(index, 0, [])
|
||||||
|
})
|
||||||
|
.on('removedRibbon', function(evt, index){
|
||||||
|
DATA.ribbons.splice(index, 1)
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
.on('requestedFirstImage', function(evt, ribbon){
|
||||||
|
var r = getRibbonIndex(ribbon)
|
||||||
|
var gr = DATA.ribbons[r]
|
||||||
|
rollImages(-gr.length, ribbon)
|
||||||
|
})
|
||||||
|
.on('requestedLastImage', function(evt, ribbon){
|
||||||
|
var r = getRibbonIndex(ribbon)
|
||||||
|
var gr = DATA.ribbons[r]
|
||||||
|
rollImages(gr.length, ribbon)
|
||||||
|
})
|
||||||
|
|
||||||
|
.on('fittingImages', function(evt, n){
|
||||||
|
//console.log('!!!! fittingImages')
|
||||||
|
// load correct amount of images in each ribbon!!!
|
||||||
|
var screen_size = getScreenWidthInImages()
|
||||||
|
var gid = getImageGID()
|
||||||
|
|
||||||
|
/* XXX used to skip ribbons that are not visible... (see bellow)
|
||||||
|
var viewer = $('.viewer')
|
||||||
|
var H = viewer.height()
|
||||||
|
var h = getImage().height()
|
||||||
|
*/
|
||||||
|
|
||||||
|
// update and align ribbons...
|
||||||
|
$('.ribbon').each(function(){
|
||||||
|
var r = $(this)
|
||||||
|
/* XXX skip ribbons that are not visible...
|
||||||
|
* causes misaligns and misloads on zoom-in...
|
||||||
|
// NOTE: we factor in the scale difference to predict
|
||||||
|
// ribbon position in the new view...
|
||||||
|
var t = getRelativeVisualPosition(viewer, r).top * (n/screen_size)
|
||||||
|
if( t+h <= 0 || t >= H ){
|
||||||
|
console.log('#### skipping align of ribbon:', getRibbonIndex(r))
|
||||||
|
return
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
loadImagesAround(Math.round(screen_size * LOAD_SCREENS), gid, r, null, true)
|
||||||
|
})
|
||||||
|
|
||||||
|
centerView(null, 'css')
|
||||||
|
|
||||||
|
// update settings...
|
||||||
|
if(toggleSingleImageMode('?') == 'on'){
|
||||||
|
SETTINGS['single-image-mode-screen-images'] = n
|
||||||
|
} else {
|
||||||
|
SETTINGS['ribbon-mode-screen-images'] = n
|
||||||
|
}
|
||||||
|
|
||||||
|
// update proportions...
|
||||||
|
if(window.PROPORTIONS_RATIO_THRESHOLD != null
|
||||||
|
&& toggleSingleImageMode('?') == 'on'){
|
||||||
|
|
||||||
|
var h = getVisibleImageSize('height')
|
||||||
|
var w = getVisibleImageSize('width')
|
||||||
|
var H = $('.viewer').innerHeight()
|
||||||
|
var W = $('.viewer').innerWidth()
|
||||||
|
|
||||||
|
var m = Math.min(W/w, H/h)
|
||||||
|
|
||||||
|
if(m < PROPORTIONS_RATIO_THRESHOLD){
|
||||||
|
toggleImageProportions('fit-viewer')
|
||||||
|
} else {
|
||||||
|
toggleImageProportions('none')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// update size classes...
|
||||||
|
// XXX make thresholds global...
|
||||||
|
if(n <= 2.5){
|
||||||
|
$('.viewer')
|
||||||
|
.removeClass('small')
|
||||||
|
.addClass('large')
|
||||||
|
} else if (n >= 6) {
|
||||||
|
$('.viewer')
|
||||||
|
.addClass('small')
|
||||||
|
.removeClass('large')
|
||||||
|
} else {
|
||||||
|
$('.viewer')
|
||||||
|
.removeClass('small')
|
||||||
|
.removeClass('large')
|
||||||
|
}
|
||||||
|
|
||||||
|
// update previews...
|
||||||
|
updateImages()
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
.on('focusingImage', function(evt, image){
|
||||||
|
image = $(image)
|
||||||
|
DATA.current = getImageGID(image)
|
||||||
|
|
||||||
|
if(window.setWindowTitle != null){
|
||||||
|
// XXX do we need to hide the extension...
|
||||||
|
setWindowTitle(getImageFileName())
|
||||||
|
//.split(/\.(jpg|jpeg|png|gif)$/)[0])
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
// basic image manipulation...
|
||||||
|
.on('rotatingLeft rotatingRight', function(evt, image){
|
||||||
|
$(image).each(function(i, e){
|
||||||
|
var img = $(this)
|
||||||
|
var gid = getImageGID(img)
|
||||||
|
var orientation = img.attr('orientation')
|
||||||
|
|
||||||
|
// change the image orientation status and add to
|
||||||
|
// updated list...
|
||||||
|
IMAGES[gid].orientation = orientation
|
||||||
|
imageUpdated(gid)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
.on('flippingVertical flippingHorizontal', function(evt, image){
|
||||||
|
$(image).each(function(i, e){
|
||||||
|
var img = $(this)
|
||||||
|
var gid = getImageGID(img)
|
||||||
|
var flip = getImageFlipState(img)
|
||||||
|
|
||||||
|
IMAGES[gid].flipped = flip
|
||||||
|
imageUpdated(gid)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
.on('resetToOriginalImage', function(evt, image){
|
||||||
|
$(image).each(function(i, e){
|
||||||
|
var img = $(this)
|
||||||
|
var gid = getImageGID(img)
|
||||||
|
|
||||||
|
IMAGES[gid].flipped = null
|
||||||
|
IMAGES[gid].orientation = 0
|
||||||
|
|
||||||
|
imageUpdated(gid)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
.on('baseURLChanged', function(evt, url){
|
||||||
|
saveLocalStorageBaseURL()
|
||||||
|
saveLocalStorageBaseURLHistory()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
SETUP_BINDINGS.push(setupData)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/**********************************************************************
|
/**********************************************************************
|
||||||
* vim:set ts=4 sw=4 spell : */
|
* vim:set ts=4 sw=4 spell : */
|
||||||
|
|||||||
@ -25,8 +25,12 @@
|
|||||||
|
|
||||||
<script src="compatibility.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="ribbons.js"></script>
|
||||||
<script src="data.js"></script>
|
<script src="data.js"></script>
|
||||||
|
<!--script src="cache.js"></script-->
|
||||||
<script src="files.js"></script>
|
<script src="files.js"></script>
|
||||||
<script src="urlhistory.js"></script>
|
<script src="urlhistory.js"></script>
|
||||||
<script src="crop.js"></script>
|
<script src="crop.js"></script>
|
||||||
@ -38,12 +42,10 @@
|
|||||||
<script src="localstorage.js"></script>
|
<script src="localstorage.js"></script>
|
||||||
<script src="info.js"></script>
|
<script src="info.js"></script>
|
||||||
<script src="ui.js"></script>
|
<script src="ui.js"></script>
|
||||||
<script src="setup.js"></script>
|
|
||||||
<script src="editor.js"></script>
|
<script src="editor.js"></script>
|
||||||
<script src="tags.js"></script>
|
<script src="tags.js"></script>
|
||||||
<script src="keybindings.js"></script>
|
<script src="keybindings.js"></script>
|
||||||
|
|
||||||
|
|
||||||
<!-- XXX STUB -->
|
<!-- XXX STUB -->
|
||||||
<!--script src="images.js"></script-->
|
<!--script src="images.js"></script-->
|
||||||
|
|
||||||
|
|||||||
48
ui/info.js
48
ui/info.js
@ -165,5 +165,53 @@ function inlineImageInfoHoverHandler(evt){
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/*********************************************************************/
|
||||||
|
function setupInfo(viewer){
|
||||||
|
console.log('Info: setup...')
|
||||||
|
|
||||||
|
return viewer
|
||||||
|
// info...
|
||||||
|
.on('focusingImage',
|
||||||
|
function(){
|
||||||
|
showRibbonIndicator()
|
||||||
|
})
|
||||||
|
.on([
|
||||||
|
'focusedNextRibbon',
|
||||||
|
'focusedPrevRibbon'
|
||||||
|
].join(' '),
|
||||||
|
function(){
|
||||||
|
if(toggleSingleImageMode('?') == 'on'){
|
||||||
|
flashRibbonIndicator()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.on([
|
||||||
|
'rotatingLeft',
|
||||||
|
'rotateingRight',
|
||||||
|
'flippingVertical',
|
||||||
|
'flippingHorizontal'
|
||||||
|
].join(' '),
|
||||||
|
function(evt, image){
|
||||||
|
updateGlobalImageInfo($(image))
|
||||||
|
})
|
||||||
|
.on([
|
||||||
|
'focusingImage',
|
||||||
|
'togglingMark',
|
||||||
|
'togglingBookmark',
|
||||||
|
'removeingAllMarks',
|
||||||
|
'removeingRibbonMarks',
|
||||||
|
'markingAll',
|
||||||
|
'markingRibbon',
|
||||||
|
'invertingMarks'
|
||||||
|
].join(' '),
|
||||||
|
function(){
|
||||||
|
updateGlobalImageInfo()
|
||||||
|
updateContextIndicators()
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
SETUP_BINDINGS.push(setupInfo)
|
||||||
|
|
||||||
|
|
||||||
/**********************************************************************
|
/**********************************************************************
|
||||||
* vim:set ts=4 sw=4 spell nowrap : */
|
* vim:set ts=4 sw=4 spell nowrap : */
|
||||||
|
|||||||
308
ui/setup.js
308
ui/setup.js
@ -11,6 +11,14 @@ var PROPORTIONS_RATIO_THRESHOLD = 1.5
|
|||||||
|
|
||||||
var CONTEXT_INDICATOR_UPDATERS = []
|
var CONTEXT_INDICATOR_UPDATERS = []
|
||||||
|
|
||||||
|
// list of functions to setup different bindings
|
||||||
|
//
|
||||||
|
// each function must be of the form:
|
||||||
|
// setupBinding(viewer) -> viewer
|
||||||
|
//
|
||||||
|
var SETUP_BINDINGS = []
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/**********************************************************************
|
/**********************************************************************
|
||||||
* Setup
|
* Setup
|
||||||
@ -69,306 +77,6 @@ function setupDataBindings(viewer){
|
|||||||
setup(viewer)
|
setup(viewer)
|
||||||
})
|
})
|
||||||
|
|
||||||
viewer
|
|
||||||
.click(function(){
|
|
||||||
if($('.ribbon').length == 0){
|
|
||||||
loadDirectoryDialog()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
.on([
|
|
||||||
'focusingImage',
|
|
||||||
'fittingImages'
|
|
||||||
].join(' '),
|
|
||||||
function(){
|
|
||||||
updateCurrentMarker()
|
|
||||||
})
|
|
||||||
|
|
||||||
// NOTE: we do not need to worry about explicit centering the ribbon
|
|
||||||
// here, just ball-park-load the correct batch...
|
|
||||||
// NOTE: if we decide to hide ribbons, uncomment the visibility
|
|
||||||
// test down in the code...
|
|
||||||
.on('preCenteringRibbon', function(evt, ribbon, image){
|
|
||||||
var r = getRibbonIndex(ribbon)
|
|
||||||
|
|
||||||
// skip all but the curent ribbon in single image view...
|
|
||||||
if(toggleSingleImageMode('?') == 'on' && r != getRibbonIndex()){
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
// prepare for loading...
|
|
||||||
var gid = getImageGID(image)
|
|
||||||
var gr = DATA.ribbons[r]
|
|
||||||
|
|
||||||
// NOTE: this can return null in certain cases (see docs)
|
|
||||||
var gid_before = getGIDBefore(gid, r)
|
|
||||||
// we'll set the image to the first if the align target is
|
|
||||||
// before it (i.e. gid_before is null)...
|
|
||||||
var img_before = gid_before == null
|
|
||||||
? ribbon.find('.image').first()
|
|
||||||
: getImageBefore(image, ribbon)
|
|
||||||
gid_before = gid_before == null ? gr[0] : gid_before
|
|
||||||
|
|
||||||
var screen_size = getScreenWidthInImages()
|
|
||||||
screen_size = screen_size < 1 ? 1 : screen_size
|
|
||||||
var load_frame_size = Math.round(screen_size * LOAD_SCREENS)
|
|
||||||
|
|
||||||
// target image is loaded...
|
|
||||||
if(gid_before == getImageGID(img_before)){
|
|
||||||
var roll_frame_size = Math.ceil(load_frame_size * ROLL_FRAME)
|
|
||||||
var threshold = Math.floor(load_frame_size * LOAD_THRESHOLD)
|
|
||||||
threshold = threshold < 1 ? 1 : threshold
|
|
||||||
|
|
||||||
var head = img_before.prevAll('.image').length
|
|
||||||
var tail = img_before.nextAll('.image').length
|
|
||||||
var l = ribbon.find('.image').length
|
|
||||||
var index = gr.indexOf(gid_before)
|
|
||||||
var at_start = index < threshold
|
|
||||||
var at_end = (gr.length-1 - index) < threshold
|
|
||||||
|
|
||||||
// less images than expected - extend ribbon...
|
|
||||||
if(l < load_frame_size){
|
|
||||||
// NOTE: we are forcing the count of images...
|
|
||||||
loadImagesAround(load_frame_size, gid, ribbon, null, true)
|
|
||||||
|
|
||||||
// tail at threshold - roll ->
|
|
||||||
} else if(!at_end && tail < threshold){
|
|
||||||
var rolled = rollImages(roll_frame_size, ribbon)
|
|
||||||
|
|
||||||
// head at threshold - roll <-
|
|
||||||
} else if(!at_start && head < threshold){
|
|
||||||
var rolled = rollImages(-roll_frame_size, ribbon)
|
|
||||||
|
|
||||||
//} else {
|
|
||||||
// console.log('>>> skipping:', r)
|
|
||||||
}
|
|
||||||
|
|
||||||
// we jumped, load new set...
|
|
||||||
} else {
|
|
||||||
// NOTE: we are forcing the count of images...
|
|
||||||
loadImagesAround(load_frame_size, gid, ribbon, null, true)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
|
|
||||||
.on('shiftedImage', function(evt, image, from, to){
|
|
||||||
from = getRibbonIndex(from)
|
|
||||||
//var ribbon = to
|
|
||||||
to = getRibbonIndex(to)
|
|
||||||
|
|
||||||
var gid = getImageGID(image)
|
|
||||||
var after = getGIDBefore(gid, to)
|
|
||||||
|
|
||||||
// remove the elem from the from ribbon...
|
|
||||||
var index = DATA.ribbons[from].indexOf(gid)
|
|
||||||
var img = DATA.ribbons[from].splice(index, 1)
|
|
||||||
|
|
||||||
// put the elem in the to ribbon...
|
|
||||||
index = after == null ? 0 : DATA.ribbons[to].indexOf(after) + 1
|
|
||||||
DATA.ribbons[to].splice(index, 0, gid)
|
|
||||||
|
|
||||||
// indicators...
|
|
||||||
flashIndicator(from < to ? 'next' : 'prev')
|
|
||||||
})
|
|
||||||
|
|
||||||
|
|
||||||
.on('createdRibbon', function(evt, index){
|
|
||||||
index = getRibbonIndex(index)
|
|
||||||
DATA.ribbons.splice(index, 0, [])
|
|
||||||
})
|
|
||||||
.on('removedRibbon', function(evt, index){
|
|
||||||
DATA.ribbons.splice(index, 1)
|
|
||||||
})
|
|
||||||
|
|
||||||
|
|
||||||
.on('requestedFirstImage', function(evt, ribbon){
|
|
||||||
var r = getRibbonIndex(ribbon)
|
|
||||||
var gr = DATA.ribbons[r]
|
|
||||||
rollImages(-gr.length, ribbon)
|
|
||||||
})
|
|
||||||
.on('requestedLastImage', function(evt, ribbon){
|
|
||||||
var r = getRibbonIndex(ribbon)
|
|
||||||
var gr = DATA.ribbons[r]
|
|
||||||
rollImages(gr.length, ribbon)
|
|
||||||
})
|
|
||||||
|
|
||||||
.on('fittingImages', function(evt, n){
|
|
||||||
//console.log('!!!! fittingImages')
|
|
||||||
// load correct amount of images in each ribbon!!!
|
|
||||||
var screen_size = getScreenWidthInImages()
|
|
||||||
var gid = getImageGID()
|
|
||||||
|
|
||||||
/* XXX used to skip ribbons that are not visible... (see bellow)
|
|
||||||
var viewer = $('.viewer')
|
|
||||||
var H = viewer.height()
|
|
||||||
var h = getImage().height()
|
|
||||||
*/
|
|
||||||
|
|
||||||
// update and align ribbons...
|
|
||||||
$('.ribbon').each(function(){
|
|
||||||
var r = $(this)
|
|
||||||
/* XXX skip ribbons that are not visible...
|
|
||||||
* causes misaligns and misloads on zoom-in...
|
|
||||||
// NOTE: we factor in the scale difference to predict
|
|
||||||
// ribbon position in the new view...
|
|
||||||
var t = getRelativeVisualPosition(viewer, r).top * (n/screen_size)
|
|
||||||
if( t+h <= 0 || t >= H ){
|
|
||||||
console.log('#### skipping align of ribbon:', getRibbonIndex(r))
|
|
||||||
return
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
loadImagesAround(Math.round(screen_size * LOAD_SCREENS), gid, r, null, true)
|
|
||||||
})
|
|
||||||
|
|
||||||
centerView(null, 'css')
|
|
||||||
|
|
||||||
// update settings...
|
|
||||||
if(toggleSingleImageMode('?') == 'on'){
|
|
||||||
SETTINGS['single-image-mode-screen-images'] = n
|
|
||||||
} else {
|
|
||||||
SETTINGS['ribbon-mode-screen-images'] = n
|
|
||||||
}
|
|
||||||
|
|
||||||
// update proportions...
|
|
||||||
if(window.PROPORTIONS_RATIO_THRESHOLD != null
|
|
||||||
&& toggleSingleImageMode('?') == 'on'){
|
|
||||||
|
|
||||||
var h = getVisibleImageSize('height')
|
|
||||||
var w = getVisibleImageSize('width')
|
|
||||||
var H = $('.viewer').innerHeight()
|
|
||||||
var W = $('.viewer').innerWidth()
|
|
||||||
|
|
||||||
var m = Math.min(W/w, H/h)
|
|
||||||
|
|
||||||
if(m < PROPORTIONS_RATIO_THRESHOLD){
|
|
||||||
toggleImageProportions('fit-viewer')
|
|
||||||
} else {
|
|
||||||
toggleImageProportions('none')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// update size classes...
|
|
||||||
// XXX make thresholds global...
|
|
||||||
if(n <= 2.5){
|
|
||||||
$('.viewer')
|
|
||||||
.removeClass('small')
|
|
||||||
.addClass('large')
|
|
||||||
} else if (n >= 6) {
|
|
||||||
$('.viewer')
|
|
||||||
.addClass('small')
|
|
||||||
.removeClass('large')
|
|
||||||
} else {
|
|
||||||
$('.viewer')
|
|
||||||
.removeClass('small')
|
|
||||||
.removeClass('large')
|
|
||||||
}
|
|
||||||
|
|
||||||
// update previews...
|
|
||||||
updateImages()
|
|
||||||
})
|
|
||||||
|
|
||||||
|
|
||||||
.on('focusingImage', function(evt, image){
|
|
||||||
image = $(image)
|
|
||||||
DATA.current = getImageGID(image)
|
|
||||||
|
|
||||||
if(window.setWindowTitle != null){
|
|
||||||
// XXX do we need to hide the extension...
|
|
||||||
setWindowTitle(getImageFileName())
|
|
||||||
//.split(/\.(jpg|jpeg|png|gif)$/)[0])
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
|
|
||||||
// basic image manipulation...
|
|
||||||
.on('rotatingLeft rotatingRight', function(evt, image){
|
|
||||||
$(image).each(function(i, e){
|
|
||||||
var img = $(this)
|
|
||||||
var gid = getImageGID(img)
|
|
||||||
var orientation = img.attr('orientation')
|
|
||||||
|
|
||||||
// change the image orientation status and add to
|
|
||||||
// updated list...
|
|
||||||
IMAGES[gid].orientation = orientation
|
|
||||||
imageUpdated(gid)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
.on('flippingVertical flippingHorizontal', function(evt, image){
|
|
||||||
$(image).each(function(i, e){
|
|
||||||
var img = $(this)
|
|
||||||
var gid = getImageGID(img)
|
|
||||||
var flip = getImageFlipState(img)
|
|
||||||
|
|
||||||
IMAGES[gid].flipped = flip
|
|
||||||
imageUpdated(gid)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
.on('resetToOriginalImage', function(evt, image){
|
|
||||||
$(image).each(function(i, e){
|
|
||||||
var img = $(this)
|
|
||||||
var gid = getImageGID(img)
|
|
||||||
|
|
||||||
IMAGES[gid].flipped = null
|
|
||||||
IMAGES[gid].orientation = 0
|
|
||||||
|
|
||||||
imageUpdated(gid)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
|
|
||||||
// caching...
|
|
||||||
/* XXX this appears to actually make things slower...
|
|
||||||
.on('reloadedRibbon updatedRibbon', function(evt, ribbon){
|
|
||||||
|
|
||||||
window.DEBUG && console.log('>>> (ribbon:', getRibbonIndex(ribbon), ') Updating cache...')
|
|
||||||
|
|
||||||
preCacheRibbonImages(ribbon)
|
|
||||||
})
|
|
||||||
*/
|
|
||||||
|
|
||||||
// info...
|
|
||||||
.on('focusingImage',
|
|
||||||
function(){
|
|
||||||
showRibbonIndicator()
|
|
||||||
})
|
|
||||||
.on([
|
|
||||||
'focusedNextRibbon',
|
|
||||||
'focusedPrevRibbon'
|
|
||||||
].join(' '),
|
|
||||||
function(){
|
|
||||||
if(toggleSingleImageMode('?') == 'on'){
|
|
||||||
flashRibbonIndicator()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.on([
|
|
||||||
'rotatingLeft',
|
|
||||||
'rotateingRight',
|
|
||||||
'flippingVertical',
|
|
||||||
'flippingHorizontal'
|
|
||||||
].join(' '),
|
|
||||||
function(evt, image){
|
|
||||||
updateGlobalImageInfo($(image))
|
|
||||||
})
|
|
||||||
.on([
|
|
||||||
'focusingImage',
|
|
||||||
'togglingMark',
|
|
||||||
'togglingBookmark',
|
|
||||||
'removeingAllMarks',
|
|
||||||
'removeingRibbonMarks',
|
|
||||||
'markingAll',
|
|
||||||
'markingRibbon',
|
|
||||||
'invertingMarks'
|
|
||||||
].join(' '),
|
|
||||||
function(){
|
|
||||||
updateGlobalImageInfo()
|
|
||||||
updateContextIndicators()
|
|
||||||
})
|
|
||||||
|
|
||||||
|
|
||||||
.on('baseURLChanged', function(evt, url){
|
|
||||||
saveLocalStorageBaseURL()
|
|
||||||
saveLocalStorageBaseURLHistory()
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
24
ui/ui.js
24
ui/ui.js
@ -1261,5 +1261,29 @@ function showImageInfo(){
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/*********************************************************************/
|
||||||
|
|
||||||
|
function setupUI(viewer){
|
||||||
|
console.log('UI: setup...')
|
||||||
|
|
||||||
|
return viewer
|
||||||
|
.click(function(){
|
||||||
|
if($('.ribbon').length == 0){
|
||||||
|
loadDirectoryDialog()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.on([
|
||||||
|
'focusingImage',
|
||||||
|
'fittingImages'
|
||||||
|
].join(' '),
|
||||||
|
function(){
|
||||||
|
updateCurrentMarker()
|
||||||
|
})
|
||||||
|
|
||||||
|
}
|
||||||
|
SETUP_BINDINGS.push(setupUI)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/**********************************************************************
|
/**********************************************************************
|
||||||
* vim:set ts=4 sw=4 nowrap : */
|
* vim:set ts=4 sw=4 nowrap : */
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user