started work on Electron runtime...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2017-10-04 17:07:22 +03:00
parent 6b16ce2cc3
commit 70b65d034f
3 changed files with 207 additions and 75 deletions

View File

@ -22,7 +22,17 @@ var win
function createWindow() { function createWindow() {
// Create the browser window. // Create the browser window.
win = new BrowserWindow({width: 800, height: 600}) win = new BrowserWindow({
// XXX get from config...
width: 800,
height: 600,
fullscreenable: true,
//backgroundColor: XXX,
// XXX remove...
autoHideMenuBar: true,
})
// and load the index.html of the app. // and load the index.html of the app.
win.loadURL(url.format({ win.loadURL(url.format({

View File

@ -22,6 +22,188 @@ var base = require('features/base')
/*********************************************************************/ /*********************************************************************/
var NWHostActions = actions.Actions({
get title(){
return nw.Window.get().title },
set title(value){
nw.Window.get().title = value },
minimize: ['Window/Minimize',
function(){
nw.Window.get().minimize() }],
toggleFullScreen: ['Window/Full screen mode',
toggler.CSSClassToggler(
function(){ return document.body },
'.full-screen-mode',
function(action){
var that = this
var w = nw.Window.get()
// change the state only if the target state is not the same
// as the current state...
if((w.isFullscreen ? 'on' : 'off') != action){
this.ribbons.preventTransitions()
// hide the viewer to hide any animation crimes...
this.dom[0].style.visibility = 'hidden'
// XXX async...
// ...this complicates things as we need to do the next
// bit AFTER the resize is done...
w.toggleFullscreen()
setTimeout(function(){
that
.centerViewer()
.focusImage()
.ribbons
.restoreTransitions()
that.dom[0].style.visibility = ''
}, 100)
}
// NOTE: we delay this to account for window animation...
setTimeout(function(){
that.storeWindowGeometry()
}, 500)
})],
// XXX add ability to use devtools on background page (node context)...
showDevTools: ['Interface|Development/Show Dev Tools',
function(){
nw.Window.get().showDevTools &&
nw.Window.get().showDevTools()
}],
// XXX should this be here???
showInFolder: ['File|Image/Show in $folder',
function(image){
image = this.images[this.data.getImage(image)]
var base = image.base_path || this.location.path
var filename = image.path
var path = pathlib.normalize(base + '/' + filename)
nw.Shell.showItemInFolder(path)
}],
})
var NWHost =
module.NWHost = core.ImageGridFeatures.Feature({
title: '',
doc: '',
tag: 'ui-nw-host',
exclusive: 'ui-host',
depends: [],
actions: NWHostActions,
isApplicable: function(){ return this.runtime.nw },
})
//---------------------------------------------------------------------
var ElectronHostActions = actions.Actions({
get title(){
},
set title(value){
},
minimize: ['Window/Minimize',
function(){
// XXX
}],
showDevTools: ['Interface|Development/Show Dev Tools',
function(){
// XXX
}],
showInFolder: ['File|Image/Show in $folder',
function(image){
// XXX
}],
// XXX this is almost generic, but it is not usable unless within
// a user event handler...
// ...can we use this on electron???
toggleFullScreen: ['Window/Full screen mode',
toggler.CSSClassToggler(
function(){ return document.body },
'.full-screen-mode',
function(action){
var that = this
var state = (document.fullScreenElement
&& document.fullScreenElement !== null) ?
'on'
: 'off'
// change the state only if the target state is not the same
// as the current state...
if(state != action){
this.ribbons.preventTransitions()
// hide the viewer to hide any animation crimes...
this.dom[0].style.visibility = 'hidden'
// XXX async...
// ...this complicates things as we need to do the next
// bit AFTER the resize is done...
if(action == 'on'){
var d = document.documentElement
;(d.requestFullscreen
|| d.webkitRequestFullscreen
|| d.msRequestFullscreen
|| d.mozRequestFullscreen)()
} else {
;(document.exitFullscreen
|| document.webkitExitFullscreen
|| document.msExitFullscreen
|| document.mozExitFullscreen)()
}
setTimeout(function(){
that
.centerViewer()
.focusImage()
.ribbons
.restoreTransitions()
that.dom[0].style.visibility = ''
}, 100)
}
// NOTE: we delay this to account for window animation...
setTimeout(function(){
that.storeWindowGeometry()
}, 500)
})],
})
var ElectronHost =
module.ElectronHost = core.ImageGridFeatures.Feature({
title: '',
doc: '',
tag: 'ui-electron-host',
exclusive: 'ui-host',
depends: [],
actions: ElectronHostActions,
isApplicable: function(){ return this.runtime.electron },
})
//---------------------------------------------------------------------
var AppControlActions = actions.Actions({ var AppControlActions = actions.Actions({
config: { config: {
//'window-title': 'ImageGrid.Viewer (${VERSION}): ${FILENAME}', //'window-title': 'ImageGrid.Viewer (${VERSION}): ${FILENAME}',
@ -33,6 +215,7 @@ var AppControlActions = actions.Actions({
// XXX revise these... // XXX revise these...
close: ['File|Window/Close viewer', close: ['File|Window/Close viewer',
function(){ window.close() }], function(){ window.close() }],
// XXX make these generic -- use host API...
storeWindowGeometry: ['- Window/Store window state', storeWindowGeometry: ['- Window/Store window state',
function(){ function(){
// store window parameters (size, state)... // store window parameters (size, state)...
@ -114,66 +297,6 @@ var AppControlActions = actions.Actions({
}, this.config['window-delay-initial-display'] || 0) }, this.config['window-delay-initial-display'] || 0)
}], }],
minimize: ['Window/Minimize',
function(){
nw.Window.get().minimize()
}],
toggleFullScreen: ['Window/Full screen mode',
toggler.CSSClassToggler(
function(){ return document.body },
'.full-screen-mode',
function(action){
var that = this
var w = nw.Window.get()
// change the state only if the target state is not the same
// as the current state...
if((w.isFullscreen ? 'on' : 'off') != action){
this.ribbons.preventTransitions()
// hide the viewer to hide any animation crimes...
this.dom[0].style.visibility = 'hidden'
// XXX async...
// ...this complicates things as we need to do the next
// bit AFTER the resize is done...
w.toggleFullscreen()
setTimeout(function(){
that
.centerViewer()
.focusImage()
.ribbons
.restoreTransitions()
that.dom[0].style.visibility = ''
}, 100)
}
// NOTE: we delay this to account for window animation...
setTimeout(function(){
that.storeWindowGeometry()
}, 500)
})],
// XXX add ability to use devtools on background page (node context)...
showDevTools: ['Interface|Development/Show Dev Tools',
function(){
nw.Window.get().showDevTools &&
nw.Window.get().showDevTools()
}],
// XXX should this be here???
showInFolder: ['File|Image/Show in $folder',
function(image){
image = this.images[this.data.getImage(image)]
var base = image.base_path || this.location.path
var filename = image.path
var path = pathlib.normalize(base + '/' + filename)
nw.Shell.showItemInFolder(path)
}],
}) })
@ -181,6 +304,7 @@ var AppControlActions = actions.Actions({
// XXX store/load window state... // XXX store/load window state...
// - size // - size
// - state (fullscreen/normal) // - state (fullscreen/normal)
// XXX for some magical reason this gets disabled on electron....
var AppControl = var AppControl =
module.AppControl = core.ImageGridFeatures.Feature({ module.AppControl = core.ImageGridFeatures.Feature({
title: '', title: '',
@ -189,15 +313,13 @@ module.AppControl = core.ImageGridFeatures.Feature({
tag: 'ui-app-control', tag: 'ui-app-control',
depends: [ depends: [
'ui', 'ui',
'ui-host',
], ],
actions: AppControlActions, actions: AppControlActions,
// XXX test if in: //isApplicable: function(){ return this.runtime.desktop },
// - chrome app isApplicable: function(){ return this.runtime.desktop && !this.runtime.electron },
// - nw
// - mobile
isApplicable: function(){ return this.runtime.nw },
// XXX show main window... // XXX show main window...
handlers: [ handlers: [
@ -215,13 +337,14 @@ module.AppControl = core.ImageGridFeatures.Feature({
'toggleFullScreen', 'toggleFullScreen',
], ],
function(){ this.storeWindowGeometry() }], function(){ this.storeWindowGeometry() }],
// update window title...
// XXX make this generic...
['focusImage', ['focusImage',
function(){ function(){
var win = nw.Window.get()
if(this.images){ if(this.images){
var img = this.images[this.current] var img = this.images[this.current]
win.title = (this.config['window-title'] this.title = (this.config['window-title']
|| 'ImageGrid.Viewer (${VERSION}): ${FILENAME}') || 'ImageGrid.Viewer (${VERSION}): ${FILENAME}')
// XXX get this from the viewer... // XXX get this from the viewer...
.replace('${VERSION}', this.version || 'gen4') .replace('${VERSION}', this.version || 'gen4')
@ -240,7 +363,6 @@ module.AppControl = core.ImageGridFeatures.Feature({
+'/'+ img.path.replace(/\.[\\\/]/, ''))) +'/'+ img.path.replace(/\.[\\\/]/, '')))
*/ */
// XXX add ... // XXX add ...
} }
}], }],
], ],

View File

@ -18,18 +18,18 @@
"app-module-path": "^1.0.6", "app-module-path": "^1.0.6",
"commander": "^2.11.0", "commander": "^2.11.0",
"exiftool": "^0.0.3", "exiftool": "^0.0.3",
"fs-extra": "^4.0.1", "fs-extra": "^4.0.2",
"fs-walk": "^0.0.1", "fs-walk": "^0.0.1",
"glob": "^4.0.6", "glob": "^4.0.6",
"guarantee-events": "^1.0.0", "guarantee-events": "^1.0.0",
"ig-actions": "^3.8.0", "ig-actions": "^3.8.0",
"ig-features": "^3.2.7", "ig-features": "^3.3.1",
"ig-object": "^1.0.2", "ig-object": "^1.0.2",
"openseadragon": "^2.3.0", "openseadragon": "^2.3.1",
"pica": "^3.0.6", "pica": "^3.0.6",
"preact": "^8.2.5", "preact": "^8.2.5",
"react": "^15.6.1", "react": "^15.6.2",
"react-dom": "^15.6.1", "react-dom": "^15.6.2",
"requirejs": "^2.3.5", "requirejs": "^2.3.5",
"requirejs-plugins": "^1.0.2", "requirejs-plugins": "^1.0.2",
"sharp": "^0.17.3", "sharp": "^0.17.3",