Commit b34b71dd authored by akiraohgaki's avatar akiraohgaki

Replace web view with BrowserView

parent cd2fe2f2
......@@ -141,13 +141,13 @@ function createView() {
mainWindow.setBrowserView(mainView);
const offsetY = 340;
const toolbarHeight = 40;
const windowBounds = mainWindow.getBounds();
mainView.setBounds({
x: 0,
y: offsetY,
y: toolbarHeight,
width: windowBounds.width,
height: windowBounds.height - offsetY
height: windowBounds.height - toolbarHeight
});
mainView.setAutoResize({
......@@ -175,7 +175,7 @@ function createView() {
mainView.webContents.openDevTools({mode: 'detach'});
}
mainView.webContents.send('ipc-message');
mainView.webContents.send('ipcMessage');
});
mainView.webContents.on('new-window', (event, url) => {
......@@ -231,9 +231,12 @@ function createView() {
event.returnValue = undefined;
});
//ipcMain.on('ipc-message', (event) => {});
//ipcMain.on('ipcMessage', (event) => {});
mainView.webContents.loadURL('https://www.opendesktop.org/');
const appConfigStore = new ElectronStore({name: appConfigStoreStorage});
const startPage = appConfigStore.get('startPage');
mainView.webContents.loadURL(startPage);
}
function isFile(path) {
......
......@@ -87,7 +87,7 @@ export default class AboutdialogComponent extends BaseComponent {
_handleClick(event) {
if (event.target.closest('a')) {
event.preventDefault();
this.dispatch('webview_loadUrl', {url: event.target.closest('a').href});
this.dispatch('browserView_loadUrl', {url: event.target.closest('a').href});
this.close();
}
}
......
......@@ -15,24 +15,24 @@ export default class OmniboxComponent extends BaseComponent {
this.contentRoot.addEventListener('click', this._handleClick.bind(this));
this._viewHandler_webview_loading = this._viewHandler_webview_loading.bind(this);
this._viewHandler_webview_page = this._viewHandler_webview_page.bind(this);
this._viewHandler_browserView_loading = this._viewHandler_browserView_loading.bind(this);
this._viewHandler_browserView_page = this._viewHandler_browserView_page.bind(this);
this._viewHandler_ocsManager_updateAvailableItems = this._viewHandler_ocsManager_updateAvailableItems.bind(this);
this._viewHandler_ocsManager_metadataSet = this._viewHandler_ocsManager_metadataSet.bind(this);
}
componentConnectedCallback() {
this.getStateManager().viewHandler
.add('webview_loading', this._viewHandler_webview_loading)
.add('webview_page', this._viewHandler_webview_page)
.add('browserView_loading', this._viewHandler_browserView_loading)
.add('browserView_page', this._viewHandler_browserView_page)
.add('ocsManager_updateAvailableItems', this._viewHandler_ocsManager_updateAvailableItems)
.add('ocsManager_metadataSet', this._viewHandler_ocsManager_metadataSet);
}
componentDisconnectedCallback() {
this.getStateManager().viewHandler
.remove('webview_loading', this._viewHandler_webview_loading)
.remove('webview_page', this._viewHandler_webview_page)
.remove('browserView_loading', this._viewHandler_browserView_loading)
.remove('browserView_page', this._viewHandler_browserView_page)
.remove('ocsManager_updateAvailableItems', this._viewHandler_ocsManager_updateAvailableItems)
.remove('ocsManager_metadataSet', this._viewHandler_ocsManager_metadataSet);
}
......@@ -231,12 +231,12 @@ export default class OmniboxComponent extends BaseComponent {
<h4><i class="material-icons md-small">home</i> Choose Startpage</h4>
<nav>
<ul>
<li><app-button data-action="webview_startPage" data-url="https://www.opendesktop.org/">opendesktop.org</app-button></li>
<li><app-button data-action="webview_startPage" data-url="https://www.opendesktop.org/s/Gnome">gnome-look.org</app-button></li>
<li><app-button data-action="webview_startPage" data-url="https://store.kde.org/">store.kde.org</app-button></li>
<li><app-button data-action="webview_startPage" data-url="https://www.opendesktop.org/s/XFCE">xfce-look.org</app-button></li>
<li><app-button data-action="webview_startPage" data-url="https://www.opendesktop.org/s/Window-Managers">box-look.org</app-button></li>
<li><app-button data-action="webview_startPage" data-url="https://www.opendesktop.org/s/Enlightenment">enlightenment-themes.org</app-button></li>
<li><app-button data-action="browserView_startPage" data-url="https://www.opendesktop.org/">opendesktop.org</app-button></li>
<li><app-button data-action="browserView_startPage" data-url="https://www.opendesktop.org/s/Gnome">gnome-look.org</app-button></li>
<li><app-button data-action="browserView_startPage" data-url="https://store.kde.org/">store.kde.org</app-button></li>
<li><app-button data-action="browserView_startPage" data-url="https://www.opendesktop.org/s/XFCE">xfce-look.org</app-button></li>
<li><app-button data-action="browserView_startPage" data-url="https://www.opendesktop.org/s/Window-Managers">box-look.org</app-button></li>
<li><app-button data-action="browserView_startPage" data-url="https://www.opendesktop.org/s/Enlightenment">enlightenment-themes.org</app-button></li>
</ul>
</nav>
</div>
......@@ -247,12 +247,12 @@ export default class OmniboxComponent extends BaseComponent {
}
componentUpdatedCallback() {
if (this.contentRoot.querySelector('app-button[data-action="webview_startPage"][data-checked]')) {
this.contentRoot.querySelector('app-button[data-action="webview_startPage"][data-checked]').removeAttribute('data-checked');
if (this.contentRoot.querySelector('app-button[data-action="browserView_startPage"][data-checked]')) {
this.contentRoot.querySelector('app-button[data-action="browserView_startPage"][data-checked]').removeAttribute('data-checked');
}
if (this.contentRoot.querySelector(`app-button[data-action="webview_startPage"][data-url="${this.state.startPage}"]`)) {
this.contentRoot.querySelector(`app-button[data-action="webview_startPage"][data-url="${this.state.startPage}"]`).setAttribute('data-checked', 'data-checked');
if (this.contentRoot.querySelector(`app-button[data-action="browserView_startPage"][data-url="${this.state.startPage}"]`)) {
this.contentRoot.querySelector(`app-button[data-action="browserView_startPage"][data-url="${this.state.startPage}"]`).setAttribute('data-checked', 'data-checked');
}
}
......@@ -300,8 +300,8 @@ export default class OmniboxComponent extends BaseComponent {
this.dispatch('ocsManager_openUrl', {url: target.getAttribute('data-url')});
break;
}
case 'webview_startPage': {
this.dispatch('webview_startPage', {url: target.getAttribute('data-url')});
case 'browserView_startPage': {
this.dispatch('browserView_startPage', {url: target.getAttribute('data-url')});
this.close();
break;
}
......@@ -313,12 +313,12 @@ export default class OmniboxComponent extends BaseComponent {
}
}
_viewHandler_webview_loading(state) {
_viewHandler_browserView_loading(state) {
const indicator = this.contentRoot.querySelector('div[data-omnibox] app-indicator');
state.isLoading ? indicator.start() : indicator.stop();
}
_viewHandler_webview_page(state) {
_viewHandler_browserView_page(state) {
this.update({...this.state, ...state});
}
......
......@@ -5,7 +5,8 @@ import Chirit from '../../libs/chirit/Chirit.js';
import OcsManagerApi from '../api/OcsManagerApi.js';
import GeneralHandler from '../handlers/GeneralHandler.js';
import WebviewHandler from '../handlers/WebviewHandler.js';
//import WebviewHandler from '../handlers/WebviewHandler.js';
import BrowserViewHandler from '../handlers/BrowserViewHandler.js';
import OcsManagerHandler from '../handlers/OcsManagerHandler.js';
import BaseComponent from './common/BaseComponent.js';
......@@ -20,7 +21,8 @@ export default class RootComponent extends BaseComponent {
const ocsManagerApi = new OcsManagerApi(ipcRenderer.sendSync('ocs-manager', 'url'));
new GeneralHandler(this._stateManager, ipcRenderer);
new WebviewHandler(this._stateManager, ipcRenderer);
//new WebviewHandler(this._stateManager, ipcRenderer);
new BrowserViewHandler(this._stateManager, ipcRenderer);
new OcsManagerHandler(this._stateManager, ipcRenderer, ocsManagerApi);
}
......@@ -39,7 +41,7 @@ export default class RootComponent extends BaseComponent {
<app-page id="browser">
<app-toolbar slot="header"></app-toolbar>
<app-webview slot="content"></app-webview>
<!--<app-webview slot="content"></app-webview>-->
</app-page>
<app-collectiondialog></app-collectiondialog>
......
......@@ -3,17 +3,17 @@ import BaseComponent from './common/BaseComponent.js';
export default class SplashscreenComponent extends BaseComponent {
init() {
this._viewHandler_webview_loading = this._viewHandler_webview_loading.bind(this);
this._viewHandler_browserView_loading = this._viewHandler_browserView_loading.bind(this);
}
componentConnectedCallback() {
this.getStateManager().viewHandler
.add('webview_loading', this._viewHandler_webview_loading);
.add('browserView_loading', this._viewHandler_browserView_loading);
}
componentDisconnectedCallback() {
this.getStateManager().viewHandler
.remove('webview_loading', this._viewHandler_webview_loading);
.remove('browserView_loading', this._viewHandler_browserView_loading);
}
render() {
......@@ -55,7 +55,7 @@ export default class SplashscreenComponent extends BaseComponent {
`;
}
_viewHandler_webview_loading(state) {
_viewHandler_browserView_loading(state) {
if (!state.isLoading) {
this.contentRoot.querySelector('app-dialog').close();
// Splash screen only shows when app launch, so remove it
......
......@@ -5,24 +5,24 @@ export default class ToolbarComponent extends BaseComponent {
init() {
this.contentRoot.addEventListener('click', this._handleClick.bind(this));
this._viewHandler_webview_loading = this._viewHandler_webview_loading.bind(this);
this._viewHandler_webview_page = this._viewHandler_webview_page.bind(this);
this._viewHandler_browserView_loading = this._viewHandler_browserView_loading.bind(this);
this._viewHandler_browserView_page = this._viewHandler_browserView_page.bind(this);
this._viewHandler_ocsManager_updateAvailableItems = this._viewHandler_ocsManager_updateAvailableItems.bind(this);
this._viewHandler_ocsManager_metadataSet = this._viewHandler_ocsManager_metadataSet.bind(this);
}
componentConnectedCallback() {
this.getStateManager().viewHandler
.add('webview_loading', this._viewHandler_webview_loading)
.add('webview_page', this._viewHandler_webview_page)
.add('browserView_loading', this._viewHandler_browserView_loading)
.add('browserView_page', this._viewHandler_browserView_page)
.add('ocsManager_updateAvailableItems', this._viewHandler_ocsManager_updateAvailableItems)
.add('ocsManager_metadataSet', this._viewHandler_ocsManager_metadataSet);
}
componentDisconnectedCallback() {
this.getStateManager().viewHandler
.remove('webview_loading', this._viewHandler_webview_loading)
.remove('webview_page', this._viewHandler_webview_page)
.remove('browserView_loading', this._viewHandler_browserView_loading)
.remove('browserView_page', this._viewHandler_browserView_page)
.remove('ocsManager_updateAvailableItems', this._viewHandler_ocsManager_updateAvailableItems)
.remove('ocsManager_metadataSet', this._viewHandler_ocsManager_metadataSet);
}
......@@ -67,10 +67,10 @@ export default class ToolbarComponent extends BaseComponent {
}
}
app-iconbutton[data-action="webview_reload"][data-state="inactive"] {
app-iconbutton[data-action="browserView_reload"][data-state="inactive"] {
display: none;
}
app-iconbutton[data-action="webview_stop"][data-state="inactive"] {
app-iconbutton[data-action="browserView_stop"][data-state="inactive"] {
display: none;
}
......@@ -99,21 +99,21 @@ export default class ToolbarComponent extends BaseComponent {
<nav data-toolbar>
<ul>
<li>
<app-iconbutton data-action="webview_goBack"
<app-iconbutton data-action="browserView_goBack"
data-title="Back" data-icon="arrow_back" data-state="inactive"></app-iconbutton>
</li>
<li>
<app-iconbutton data-action="webview_goForward"
<app-iconbutton data-action="browserView_goForward"
data-title="Forward" data-icon="arrow_forward" data-state="inactive"></app-iconbutton>
</li>
<li>
<app-iconbutton data-action="webview_reload"
<app-iconbutton data-action="browserView_reload"
data-title="Reload" data-icon="refresh" data-state="active"></app-iconbutton>
<app-iconbutton data-action="webview_stop"
<app-iconbutton data-action="browserView_stop"
data-title="Stop" data-icon="close" data-state="inactive"></app-iconbutton>
</li>
<li>
<app-iconbutton data-action="webview_startPage"
<app-iconbutton data-action="browserView_startPage"
data-title="Startpage" data-icon="home"></app-iconbutton>
</li>
<li>
......@@ -127,7 +127,7 @@ export default class ToolbarComponent extends BaseComponent {
<app-iconbutton data-action="menu_open"
data-title="Other Operations..." data-icon="more_vert"></app-iconbutton><br>
<app-menu data-width="250px" data-offset-x="-220px">
<a slot="menuitem" href="#" data-action="webview_appBugsPage">Report a Bug</a>
<a slot="menuitem" href="#" data-action="browserView_appBugsPage">Report a Bug</a>
<a slot="menuitem" href="#" data-action="general_about">About This App</a>
</app-menu>
</li>
......@@ -150,24 +150,24 @@ export default class ToolbarComponent extends BaseComponent {
}
switch (target.getAttribute('data-action')) {
case 'webview_goBack': {
this.dispatch('webview_goBack', {});
case 'browserView_goBack': {
this.dispatch('browserView_goBack', {});
break;
}
case 'webview_goForward': {
this.dispatch('webview_goForward', {});
case 'browserView_goForward': {
this.dispatch('browserView_goForward', {});
break;
}
case 'webview_reload': {
this.dispatch('webview_reload', {});
case 'browserView_reload': {
this.dispatch('browserView_reload', {});
break;
}
case 'webview_stop': {
this.dispatch('webview_stop', {});
case 'browserView_stop': {
this.dispatch('browserView_stop', {});
break;
}
case 'webview_startPage': {
this.dispatch('webview_startPage', {});
case 'browserView_startPage': {
this.dispatch('browserView_startPage', {});
break;
}
case 'ocsManager_collection': {
......@@ -178,8 +178,8 @@ export default class ToolbarComponent extends BaseComponent {
this.contentRoot.querySelector('app-menu').open();
break;
}
case 'webview_appBugsPage': {
this.dispatch('webview_appBugsPage', {});
case 'browserView_appBugsPage': {
this.dispatch('browserView_appBugsPage', {});
this.contentRoot.querySelector('app-menu').close();
break;
}
......@@ -191,17 +191,17 @@ export default class ToolbarComponent extends BaseComponent {
}
}
_viewHandler_webview_loading(state) {
this.contentRoot.querySelector('app-iconbutton[data-action="webview_reload"]')
_viewHandler_browserView_loading(state) {
this.contentRoot.querySelector('app-iconbutton[data-action="browserView_reload"]')
.setAttribute('data-state', state.isLoading ? 'inactive' : 'active');
this.contentRoot.querySelector('app-iconbutton[data-action="webview_stop"]')
this.contentRoot.querySelector('app-iconbutton[data-action="browserView_stop"]')
.setAttribute('data-state', state.isLoading ? 'active' : 'inactive');
}
_viewHandler_webview_page(state) {
this.contentRoot.querySelector('app-iconbutton[data-action="webview_goBack"]')
_viewHandler_browserView_page(state) {
this.contentRoot.querySelector('app-iconbutton[data-action="browserView_goBack"]')
.setAttribute('data-state', state.canGoBack ? 'active' : 'inactive');
this.contentRoot.querySelector('app-iconbutton[data-action="webview_goForward"]')
this.contentRoot.querySelector('app-iconbutton[data-action="browserView_goForward"]')
.setAttribute('data-state', state.canGoForward ? 'active' : 'inactive');
}
......
......@@ -31,8 +31,8 @@ ToolbarComponent.define('app-toolbar');
import OmniboxComponent from './OmniboxComponent.js';
OmniboxComponent.define('app-omnibox');
import WebviewComponent from './WebviewComponent.js';
WebviewComponent.define('app-webview');
//import WebviewComponent from './WebviewComponent.js';
//WebviewComponent.define('app-webview');
import CollectiondialogComponent from './CollectiondialogComponent.js';
CollectiondialogComponent.define('app-collectiondialog');
......
......@@ -8,7 +8,7 @@ export default class OcsManagerHandler {
this._previewpicDirectory = this._ipcRenderer.sendSync('previewpic', 'directory');
this._installTypes = {};
this._webviewComponent = null;
//this._webviewComponent = null;
this._collectiondialogComponent = null;
this._subscribe();
......@@ -16,11 +16,19 @@ export default class OcsManagerHandler {
}
_subscribe() {
this._ipcRenderer.on('ocsManager_openUrl', (event, data) => {
this._stateManager.dispatch('ocsManager_openUrl', data);
});
this._ipcRenderer.on('ocsManager_getItemByOcsUrl', (event, data) => {
this._stateManager.dispatch('ocsManager_getItemByOcsUrl', data);
});
this._stateManager.actionHandler
.add('webview_activate', (data) => {
/*.add('webview_activate', (data) => {
this._webviewComponent = data.component;
return {isActivated: true};
})
})*/
.add('ocsManager_activate', (data) => {
this._collectiondialogComponent = data.component;
return {isActivated: true};
......@@ -178,6 +186,7 @@ export default class OcsManagerHandler {
// Download preview picture
const selector = 'meta[property="og:image"]';
// TODO: make download method inside main process
this._webviewComponent.executeJavaScript(
`document.querySelector('${selector}').content`,
false,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment