mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-31 19:30:07 +00:00
some tweaking of gen4 ui, still thinking on a minimal module strategy to use...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
3f264e6491
commit
b53429319f
8
ui (gen4)/css/layout.css
Normal file → Executable file
8
ui (gen4)/css/layout.css
Normal file → Executable file
@ -177,8 +177,8 @@ button:hover {
|
||||
/********************************************************** Viewer ***/
|
||||
.viewer {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
/*border: solid blue 1px;*/
|
||||
|
||||
@ -756,14 +756,14 @@ button:hover {
|
||||
box-sizing: border-box;
|
||||
border-radius: 50%;
|
||||
background: blue;
|
||||
left: -25;
|
||||
left: -25px;
|
||||
}
|
||||
.marks-visible.single-image-mode.viewer .mark:after {
|
||||
display: none;
|
||||
}
|
||||
.mark.bookmark:after {
|
||||
background: yellow;
|
||||
left: -15;
|
||||
left: -15px;
|
||||
}
|
||||
/****************************************************** Image info ***/
|
||||
.inline-image-info {
|
||||
|
||||
@ -277,8 +277,8 @@ button:hover {
|
||||
/********************************************************** Viewer ***/
|
||||
.viewer {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
|
||||
/*border: solid blue 1px;*/
|
||||
@ -716,7 +716,7 @@ button:hover {
|
||||
|
||||
|
||||
background: blue;
|
||||
left: -25;
|
||||
left: -25px;
|
||||
}
|
||||
.marks-visible.single-image-mode.viewer .mark:after {
|
||||
display: none;
|
||||
@ -724,7 +724,7 @@ button:hover {
|
||||
|
||||
.mark.bookmark:after {
|
||||
background: yellow;
|
||||
left: -15;
|
||||
left: -15px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -6,51 +6,132 @@
|
||||
<link rel="stylesheet" href="css/editor.css">
|
||||
|
||||
|
||||
<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="actions.js"></script>
|
||||
<!--script src="interaction.js"></script-->
|
||||
<script src="data.js"></script>
|
||||
<script src="viewer.js"></script>
|
||||
<script src="ribbons.js"></script>
|
||||
<script src="images.js"></script>
|
||||
<script src="image.js"></script>
|
||||
<script src="loader.js"></script>
|
||||
|
||||
<script>
|
||||
|
||||
var gui = require('nw.gui')
|
||||
|
||||
window.toggleFullscreenMode = createCSSClassToggler(
|
||||
document.body,
|
||||
'.full-screen-mode',
|
||||
function(action){
|
||||
gui.Window.get().toggleFullscreen()
|
||||
})
|
||||
window.closeWindow = function(){
|
||||
gui.Window.get().close()
|
||||
}
|
||||
window.showDevTools = function(){
|
||||
gui.Window.get().showDevTools()
|
||||
}
|
||||
window.reload = function(){
|
||||
gui.Window.get().reload()
|
||||
}
|
||||
window.setWindowTitle = function(text){
|
||||
var title = text +' - '+ CONFIG.app_name
|
||||
gui.Window.get().title = title
|
||||
$('.title-bar .title').text(title)
|
||||
}
|
||||
|
||||
var GLOBAL_KEYBOARD = {
|
||||
'Global bindings': {
|
||||
doc: 'NOTE: binding priority is the same as the order of sections '+
|
||||
'on this page.',
|
||||
pattern: '*',
|
||||
|
||||
F4: {
|
||||
alt: doc('Close viewer',
|
||||
function(){
|
||||
closeWindow()
|
||||
return false
|
||||
}),
|
||||
},
|
||||
F5: doc('Full reload viewer',
|
||||
function(){
|
||||
/*
|
||||
killAllWorkers()
|
||||
.done(function(){
|
||||
reload()
|
||||
})
|
||||
*/
|
||||
reload()
|
||||
return false
|
||||
}),
|
||||
F12: doc('Show devTools',
|
||||
function(){
|
||||
showDevTools()
|
||||
return false
|
||||
}),
|
||||
// NOTE: these are for systems where F** keys are not available
|
||||
// or do other stuff...
|
||||
R: {
|
||||
/*
|
||||
'ctrl+alt': doc('Reload viewer',
|
||||
function(){
|
||||
reloadViewer()
|
||||
return false
|
||||
}),
|
||||
*/
|
||||
'ctrl+shift': 'F5',
|
||||
},
|
||||
P: {
|
||||
'ctrl+shift': 'F12',
|
||||
},
|
||||
|
||||
// NOTE: this is handled by the wrapper at this point, so we do
|
||||
// not have to do anything here...
|
||||
F11: doc('Toggle full screen view', function(){
|
||||
toggleFullscreenMode()
|
||||
return false
|
||||
}),
|
||||
F: {
|
||||
ctrl: 'F11',
|
||||
},
|
||||
|
||||
},
|
||||
}
|
||||
|
||||
|
||||
$(function(){
|
||||
$(document)
|
||||
.keydown(makeKeyboardHandler(
|
||||
GLOBAL_KEYBOARD,
|
||||
function(k){
|
||||
window.DEBUG && console.log(k)
|
||||
}))
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- This is the basic viewer structure...
|
||||
<!-- for viewer structure doc see: ribbons.js... -->
|
||||
|
||||
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="viewer dark">
|
||||
|
||||
<div class="ribbon-set"></div>
|
||||
|
||||
|
||||
<!-- XXX should these be here??? -->
|
||||
<!-- XXX should these be here???
|
||||
<div class="overlay-block">
|
||||
<div class="background"></div>
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
-->
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
@ -8,9 +8,60 @@
|
||||
//var DEBUG = DEBUG != null ? DEBUG : true
|
||||
|
||||
|
||||
/*********************************************************************/
|
||||
//
|
||||
// This xpects the folowing HTML 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>
|
||||
//
|
||||
//
|
||||
/*********************************************************************/
|
||||
|
||||
var RibbonsClassPrototype = {
|
||||
// NOTE: these will return unattached objects...
|
||||
createViewer: function(){
|
||||
return $('<div>')
|
||||
.addClass('viewer')
|
||||
.append($('<div>')
|
||||
.addClass('ribbon-set'))
|
||||
},
|
||||
createRibbon: function(gid){
|
||||
return $('<div>')
|
||||
.addClass('ribbon')
|
||||
.setAttribute('gid', JSON.stringify(gid))
|
||||
},
|
||||
createImage: function(gid){
|
||||
return $('<div>')
|
||||
.addClass('image')
|
||||
.setAttribute('gid', JSON.stringify(gid))
|
||||
},
|
||||
}
|
||||
|
||||
|
||||
@ -20,6 +71,11 @@ var RibbonsPrototype = {
|
||||
//
|
||||
// .viewer (jQuery object)
|
||||
//
|
||||
|
||||
// Constructors...
|
||||
createViewer: RibbonsClassPrototype.createViewer,
|
||||
createRibbon: RibbonsClassPrototype.createRibbon,
|
||||
createImage: RibbonsClassPrototype.createImage,
|
||||
|
||||
// NOTE: these accept gids or jQuery objects...
|
||||
getRibbon: function(target){
|
||||
@ -41,18 +97,6 @@ var RibbonsPrototype = {
|
||||
return $(target).filter('.image')
|
||||
},
|
||||
|
||||
// NOTE: these will return unattached objects...
|
||||
createRibbon: function(gid){
|
||||
return $('<div>')
|
||||
.addClass('ribbon')
|
||||
.setAttribute('gid', JSON.stringify(gid))
|
||||
},
|
||||
createImage: function(gid){
|
||||
return $('<div>')
|
||||
.addClass('image')
|
||||
.setAttribute('gid', JSON.stringify(gid))
|
||||
},
|
||||
|
||||
|
||||
// NOTE: to remove a ribbon or an image just use .getRibbon(..).remove()
|
||||
// and .getImage(...).remove() respectivly.
|
||||
@ -83,8 +127,12 @@ var RibbonsPrototype = {
|
||||
position = position < 0 ? 0 : position
|
||||
|
||||
// place the ribbon...
|
||||
if(ribbons.length <= position){
|
||||
if(ribbons.length == 0){
|
||||
this.viewer.find('ribbon-set').append(ribbon)
|
||||
|
||||
} else if(ribbons.length <= position){
|
||||
ribbons.last().after(ribbon)
|
||||
|
||||
} else {
|
||||
ribbons.eq(position).before(ribbon)
|
||||
}
|
||||
@ -134,8 +182,9 @@ var RibbonsPrototype = {
|
||||
position = position < 0 ? 0 : position
|
||||
|
||||
// place the image...
|
||||
if(images.length <= position){
|
||||
if(images.length == 0 || images.length <= position){
|
||||
ribbon.append(image)
|
||||
|
||||
} else {
|
||||
images.eq(position).before(image)
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user