mitchas · SvenMetzler · Apr 2, 2020 · Apr 3, 2020 · Apr 3, 2020 · Apr 3, 2020
diff --git a/.gitignore b/.gitignore
@@ -1 +1,3 @@
 node_modules
+/.idea/
+*.iml
diff --git a/index.html → index-toolbar.html b/index.html → index-toolbar.html
@@ -7,7 +7,7 @@
         <link href="styles/vendor/reset.css" rel="stylesheet">
         <link href="styles/app.css" rel="stylesheet">
         <script type="text/javascript" src="scripts/jquery.js"></script>
-        <script type="text/javascript" src="scripts/scripts.js"></script>
+        <script type="text/javascript" src="scripts/toolbar-script.js"></script>
 
     </head>
 <body>
@@ -20,7 +20,6 @@
             <div class="close" onclick="closeWindow()"><img src="assets/ui/close.png" /></div>
         </div>
     </div>
-
     <div class="app-controls">
         <form id="addressBar">
             <button onclick="browserBack()"><img src="assets/ui/back.png" /></button>
@@ -30,10 +29,6 @@
         <button onclick="enableClickThrough()" id="clickthroughButton"><img src="assets/ui/eye.png"/></button>
     </div>
 
-    <webview id="browserView" src="http://mitch.works/apps/glass/landing" style="display:inline-flex; width:100%;"></webview>
-
-
-
     <script>
         // You can also require other files to run in this process
         require('./renderer.js')

diff --git a/index-view.html b/index-view.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8">
+        <title>Glass Browser</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <link href="styles/vendor/reset.css" rel="stylesheet">
+        <link href="styles/app.css" rel="stylesheet">
+        <script type="text/javascript" src="scripts/jquery.js"></script>
+        <script type="text/javascript" src="scripts/view-script.js"></script>
+
+    </head>
+<body>
+
+    <webview id="browserView" src="http://mitch.works/apps/glass/landing" style="display:inline-flex; width:100%;"></webview>
+
+    <script>
+        // You can also require other files to run in this process
+        require('./renderer.js')
+    </script>
+</body>
+</html>
diff --git a/main.js b/main.js
@@ -4,53 +4,192 @@
 const electron = require('electron')
 // Module to control application life.
 const app = electron.app
+const ipcMain = electron.ipcMain
 // Module to create native browser window.
 const BrowserWindow = electron.BrowserWindow
 
 const path = require('path')
 const url = require('url')
+const initialHeight = 600
+const initialWidth = 900
+const toolbarHeight = 82
 
 // Keep a global reference of the window object, if you don't, the window will
 // be closed automatically when the JavaScript object is garbage collected.
-let mainWindow
+let mainWindowToolbar
+let mainWindowView
 
+function init(){
+  mainWindowToolbar = createToolbarWindow()
+}
 
+function createToolbarWindow(){
+  // Create the browser window.
+  mainWindowToolbar = new BrowserWindow({ titleBarStyle: 'hidden', frame: false, width: initialWidth, height: toolbarHeight, transparent: true }); //900x600 was initial parameter
+  mainWindowToolbar.setMaximumSize(mainWindowToolbar.getMaximumSize()[0], mainWindowToolbar.getBounds().height)
+  mainWindowToolbar.setMinimumSize(mainWindowToolbar.getMinimumSize()[0], mainWindowToolbar.getBounds().height)
 
-function createWindow () {
-    // Create the browser window.
-    mainWindow = new BrowserWindow({ titleBarStyle: 'hidden', frame: false, width: 900, height: 600, transparent: true });
+  mainWindowToolbar.setPosition(mainWindowToolbar.getBounds().x, mainWindowToolbar.getBounds().y - (600/2))
+  mainWindowToolbar.__id = 'mainWindowToolbar'
 
-    // and load the index.html of the app.
-    mainWindow.loadURL(url.format({
-        pathname: path.join(__dirname, 'index.html'),
-        protocol: 'file:',
-        slashes: true
-    }))
 
-    mainWindow.setAlwaysOnTop(true);
-    // mainWindow.setIgnoreMouseEvents(true);
+  // and load the index.html of the app.
+  mainWindowToolbar.loadURL(url.format({
+    pathname: path.join(__dirname, 'index-toolbar.html'),
+    protocol: 'file:',
+    slashes: true
+  }))
+
+  mainWindowToolbar.setAlwaysOnTop(true)
+
+
+  // Open the DevTools.
+  // mainWindowToolbar.webContents.openDevTools()
+
+  mainWindowToolbar.on('close', function () {
+    clearTimeout(positioningTimeout)
+    app.quit()
+  })
 
 
-    // Open the DevTools.
-    // mainWindow.webContents.openDevTools()
+  mainWindowView = createViewWindow(initialHeight - toolbarHeight)
+}
+
+function createViewWindow(height){
+  mainWindowView = new BrowserWindow({ titleBarStyle: 'hidden', frame: false, width: initialWidth, height: height, transparent: true });
+
+  // and load the index.html of the app.
+  mainWindowView.loadURL(url.format({
+    pathname: path.join(__dirname, 'index-view.html'),
+    protocol: 'file:',
+    slashes: true
+  }))
+
+  mainWindowView.setAlwaysOnTop(true)
+  mainWindowView.__id = 'mainWindowView'
+  lastHeight = mainWindowView.getBounds().height
+  // mainWindowView.setSkipTaskbar(skipTaskbar)
+  // mainWindowView.setIgnoreMouseEvents(true);
+
+
+  // Open the DevTools. Warning, if dev tools are open, than the transparent window is disabled.
+  // mainWindowView.webContents.openDevTools()
+
+  // Emitted when the window is closed.
+  mainWindowView.on('closed', function () {
+    app.quit()
+  })
+
+  try {
+    addListener(mainWindowView, 'resize')
+    addListener(mainWindowView, 'move')
+    addListener(mainWindowToolbar, 'resize')
+    addListener(mainWindowToolbar, 'move')
+  } catch(e){
+    console.log(e)
+  }
+}
 
-    // Emitted when the window is closed.
-    mainWindow.on('closed', function () {
-        mainWindow = null
-    })
+function addListener(brWindow, name){
+  if(name === 'resize'){
+    brWindow.on(name, handleResizeEvent)
+  } else if(name === 'move'){
+    brWindow.on(name, handleMoveEvent)
+  }
+}
+
+function removeListener(brWindow, name){
+  if(name === 'resize'){
+    brWindow.removeListener(name, handleResizeEvent)
+  } else if(name === 'move'){
+    brWindow.removeListener(name, handleMoveEvent)
+  }
+}
 
+let lastHeight = 0
 
-    mainWindow.on('minimize',function(event){
-        console.log("Clickthrough disabled");
-        mainWindow.setIgnoreMouseEvents(false);
-    });
+function handleResizeEvent(event){
+  let name = 'resize'
+  let focusedWindow = BrowserWindow.getFocusedWindow();
+  let eventBounds = focusedWindow.getBounds()
+  let notFocusedWindow = getNotFocusedWindow()
+  removeListener(notFocusedWindow, name)
+
+  try {
+    // and load the index.html of the app.
+    const {height} = notFocusedWindow.getBounds()
+    if (height- 3 > lastHeight || height + 3 < lastHeight) {
+      notFocusedWindow.setSize(eventBounds.width, notFocusedWindow.getBounds().height)
+      lastHeight = notFocusedWindow.getBounds().height
+    } else {
+      notFocusedWindow.setSize(eventBounds.width, lastHeight)
+    }
+    executePositioning(focusedWindow, eventBounds, notFocusedWindow)
+    addListener(notFocusedWindow, name)
+  } catch (e) {
+    console.log("Error " + e.message);
+  }
+}
+
+let moveTimeout = null
+
+function handleMoveEvent(event){
+  let name = 'move'
+  let focusedWindow = BrowserWindow.getFocusedWindow();
+  let eventBounds = focusedWindow.getBounds()
+  let notFocusedWindow = getNotFocusedWindow();
+  clearTimeout(moveTimeout)
+  removeListener(notFocusedWindow, name)
+
+  try {
+    executePositioning(focusedWindow, eventBounds, notFocusedWindow)
+    moveTimeout = setTimeout(() => addListener(notFocusedWindow, name), 10)
+  } catch (e) {
+    console.log("Error " + e.message);
+  }
+}
+
+let positioningTimeout = null
+
+function executePositioning(focusedWindow, eventBounds, notFocusedWindow){
+  clearTimeout(positioningTimeout)
+  notFocusedWindow.webContents.send('css', {key: 'display', value: 'none'});
+  let notFocusedWindowBounds = getNotFocusedWindow().getBounds()
+  let newY
+  if(isToolbar(focusedWindow)){
+    newY = eventBounds.y + eventBounds.height
+  } else {
+    newY = notFocusedWindowBounds.y
+  }
+  positioningTimeout = setTimeout(() => {
+    notFocusedWindow.setPosition(eventBounds.x, newY)
+    notFocusedWindow.webContents.send('css', {key: 'display', value: ''});
+  }, 150);
+}
+
+function getNotFocusedWindow() {
+  let actualWindows = electron.BrowserWindow.getAllWindows();
+  if(actualWindows.length !== 2) {
+    console.warn("This method only supports only two opened windows.");
+    return undefined;
+  }
+  for (let win in actualWindows){
+    if(actualWindows[win] !== electron.BrowserWindow.getFocusedWindow()){
+      return actualWindows[win];
+    }
+  }
+  console.warn("Duplicated elements on the window stack.");
+  return undefined;
+}
 
+function isToolbar(browserWindow){
+  return browserWindow.__id === 'mainWindowToolbar'
 }
 
 // This method will be called when Electron has finished
 // initialization and is ready to create browser windows.
 // Some APIs can only be used after this event occurs.
-app.on('ready', createWindow)
+app.on('ready', init)
 
 // Quit when all windows are closed.
 app.on('window-all-closed', function () {
@@ -64,8 +203,8 @@ app.on('window-all-closed', function () {
 app.on('activate', function () {
     // On OS X it's common to re-create a window in the app when the
     // dock icon is clicked and there are no other windows open.
-    if (mainWindow === null) {
-        createWindow()
+    if (mainWindowView === null || mainWindowToolbar === null) {
+        init()
     }
 })