mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-11-01 11:50: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 ***/
|
||||||
.viewer {
|
.viewer {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100vw;
|
||||||
height: 100%;
|
height: 100vh;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
/*border: solid blue 1px;*/
|
/*border: solid blue 1px;*/
|
||||||
|
|
||||||
@ -756,14 +756,14 @@ button:hover {
|
|||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: blue;
|
background: blue;
|
||||||
left: -25;
|
left: -25px;
|
||||||
}
|
}
|
||||||
.marks-visible.single-image-mode.viewer .mark:after {
|
.marks-visible.single-image-mode.viewer .mark:after {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
.mark.bookmark:after {
|
.mark.bookmark:after {
|
||||||
background: yellow;
|
background: yellow;
|
||||||
left: -15;
|
left: -15px;
|
||||||
}
|
}
|
||||||
/****************************************************** Image info ***/
|
/****************************************************** Image info ***/
|
||||||
.inline-image-info {
|
.inline-image-info {
|
||||||
|
|||||||
@ -277,8 +277,8 @@ button:hover {
|
|||||||
/********************************************************** Viewer ***/
|
/********************************************************** Viewer ***/
|
||||||
.viewer {
|
.viewer {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100vw;
|
||||||
height: 100%;
|
height: 100vh;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
/*border: solid blue 1px;*/
|
/*border: solid blue 1px;*/
|
||||||
@ -716,7 +716,7 @@ button:hover {
|
|||||||
|
|
||||||
|
|
||||||
background: blue;
|
background: blue;
|
||||||
left: -25;
|
left: -25px;
|
||||||
}
|
}
|
||||||
.marks-visible.single-image-mode.viewer .mark:after {
|
.marks-visible.single-image-mode.viewer .mark:after {
|
||||||
display: none;
|
display: none;
|
||||||
@ -724,7 +724,7 @@ button:hover {
|
|||||||
|
|
||||||
.mark.bookmark:after {
|
.mark.bookmark:after {
|
||||||
background: yellow;
|
background: yellow;
|
||||||
left: -15;
|
left: -15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -6,51 +6,132 @@
|
|||||||
<link rel="stylesheet" href="css/editor.css">
|
<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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<!-- This is the basic viewer structure...
|
<!-- for viewer structure doc see: ribbons.js... -->
|
||||||
|
|
||||||
Unpopulated
|
<div class="viewer dark">
|
||||||
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>
|
<div class="ribbon-set"></div>
|
||||||
|
|
||||||
|
|
||||||
<!-- XXX should these be here??? -->
|
<!-- XXX should these be here???
|
||||||
<div class="overlay-block">
|
<div class="overlay-block">
|
||||||
<div class="background"></div>
|
<div class="background"></div>
|
||||||
<div class="content"></div>
|
<div class="content"></div>
|
||||||
</div>
|
</div>
|
||||||
|
-->
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@ -8,9 +8,60 @@
|
|||||||
//var DEBUG = DEBUG != null ? DEBUG : true
|
//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 = {
|
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))
|
||||||
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -21,6 +72,11 @@ var RibbonsPrototype = {
|
|||||||
// .viewer (jQuery object)
|
// .viewer (jQuery object)
|
||||||
//
|
//
|
||||||
|
|
||||||
|
// Constructors...
|
||||||
|
createViewer: RibbonsClassPrototype.createViewer,
|
||||||
|
createRibbon: RibbonsClassPrototype.createRibbon,
|
||||||
|
createImage: RibbonsClassPrototype.createImage,
|
||||||
|
|
||||||
// NOTE: these accept gids or jQuery objects...
|
// NOTE: these accept gids or jQuery objects...
|
||||||
getRibbon: function(target){
|
getRibbon: function(target){
|
||||||
if(target == null) {
|
if(target == null) {
|
||||||
@ -41,18 +97,6 @@ var RibbonsPrototype = {
|
|||||||
return $(target).filter('.image')
|
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()
|
// NOTE: to remove a ribbon or an image just use .getRibbon(..).remove()
|
||||||
// and .getImage(...).remove() respectivly.
|
// and .getImage(...).remove() respectivly.
|
||||||
@ -83,8 +127,12 @@ var RibbonsPrototype = {
|
|||||||
position = position < 0 ? 0 : position
|
position = position < 0 ? 0 : position
|
||||||
|
|
||||||
// place the ribbon...
|
// 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)
|
ribbons.last().after(ribbon)
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
ribbons.eq(position).before(ribbon)
|
ribbons.eq(position).before(ribbon)
|
||||||
}
|
}
|
||||||
@ -134,8 +182,9 @@ var RibbonsPrototype = {
|
|||||||
position = position < 0 ? 0 : position
|
position = position < 0 ? 0 : position
|
||||||
|
|
||||||
// place the image...
|
// place the image...
|
||||||
if(images.length <= position){
|
if(images.length == 0 || images.length <= position){
|
||||||
ribbon.append(image)
|
ribbon.append(image)
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
images.eq(position).before(image)
|
images.eq(position).before(image)
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user