6 files changed, 204 insertions, 0 deletions

diff --git a/src/webview/ime.js b/src/webview/ime.js
new file mode 100644
index 000000000..43df6267c
--- /dev/null
+++ b/src/webview/ime.js
@@ -0,0 +1,10 @@
+const { ipcRenderer } = require('electron');
+const { claimDocumentFocus } = require('../helpers/webview-ime-focus-helpers');
+
+ipcRenderer.on('claim-document-focus', claimDocumentFocus);
+
+window.addEventListener('DOMContentLoaded', () => {
+  if (document.querySelector('[autofocus]')) {
+    ipcRenderer.sendToHost('autofocus');
+  }
+});
diff --git a/src/webview/lib/RecipeWebview.js b/src/webview/lib/RecipeWebview.js
new file mode 100644
index 000000000..1787f85e2
--- /dev/null
+++ b/src/webview/lib/RecipeWebview.js
@@ -0,0 +1,74 @@
+// @flow
+const { ipcRenderer } = require('electron');
+const fs = require('fs-extra');
+
+class RecipeWebview {
+  constructor() {
+    this.countCache = {
+      direct: 0,
+      indirect: 0,
+    };
+
+    ipcRenderer.on('poll', () => {
+      this.loopFunc();
+    });
+  }
+
+  loopFunc = () => null;
+
+  /**
+   * Initialize the loop
+   *
+   * @param {Function}        Function that will be executed
+   */
+  loop(fn) {
+    this.loopFunc = fn;
+  }
+
+  /**
+   * Set the unread message badge
+   *
+   * @param {int} direct      Set the count of direct messages
+   *                          eg. Slack direct mentions, or a
+   *                          message to @channel
+   * @param {int} indirect    Set a badge that defines there are
+   *                          new messages but they do not involve
+   *                          me directly to me eg. in a channel
+   */
+  setBadge(direct = 0, indirect = 0) {
+    if (this.countCache.direct === direct
+      && this.countCache.indirect === indirect) return;
+
+    const count = {
+      direct,
+      indirect,
+    };
+
+    ipcRenderer.sendToHost('messages', count);
+    Object.assign(this.countCache, count);
+  }
+
+  /**
+   * Injects the contents of a CSS file into the current webview
+   *
+   * @param {Array} files     CSS files that should be injected. This must
+   *                          be an absolute path to the file
+   */
+  injectCSS(...files) {
+    files.forEach((file) => {
+      const data = fs.readFileSync(file);
+      const styles = document.createElement('style');
+      styles.innerHTML = data.toString();
+
+      document.querySelector('head').appendChild(styles);
+    });
+  }
+
+  initialize(fn) {
+    if (typeof fn === 'function') {
+      fn();
+    }
+  }
+}
+
+module.exports = RecipeWebview;
diff --git a/src/webview/notifications.js b/src/webview/notifications.js
new file mode 100644
index 000000000..97ce9d69b
--- /dev/null
+++ b/src/webview/notifications.js
@@ -0,0 +1,45 @@
+const { ipcRenderer } = require('electron');
+const uuidV1 = require('uuid/v1');
+// const FranzNotificationStore = [];
+
+class Notification {
+  constructor(title = '', options = {}) {
+    this.title = title;
+    this.options = options;
+    this.notificationId = uuidV1();
+    this.onclick = () => {};
+
+    ipcRenderer.sendToHost('notification', {
+      notificationId: this.notificationId,
+      title,
+      options,
+    });
+
+    ipcRenderer.on(`notification-onclick:${this.notificationId}`, () => {
+      this.onclick();
+    });
+  }
+}
+
+Notification.permission = 'granted';
+
+Notification.requestPermission = (cb = null) => {
+  console.log(this);
+  if (!cb) {
+    return new Promise((resolve) => {
+      resolve(Notification.permission);
+    });
+  }
+
+  if (typeof (cb) === 'function') {
+    return cb(Notification.permission);
+  }
+
+  return Notification.permission;
+};
+
+Notification.close = () => {
+  // no implementation yet
+};
+
+window.Notification = Notification;
diff --git a/src/webview/plugin.js b/src/webview/plugin.js
new file mode 100644
index 000000000..ffc9084e4
--- /dev/null
+++ b/src/webview/plugin.js
@@ -0,0 +1,24 @@
+const { ipcRenderer } = require('electron');
+const path = require('path');
+
+const RecipeWebview = require('./lib/RecipeWebview');
+
+require('./notifications.js');
+require('./spellchecker.js');
+require('./ime.js');
+
+ipcRenderer.on('initializeRecipe', (e, data) => {
+  const modulePath = path.join(data.recipe.path, 'webview.js');
+  // Delete module from cache
+  delete require.cache[require.resolve(modulePath)];
+  try {
+    // eslint-disable-next-line
+    require(modulePath)(new RecipeWebview(), data);
+  } catch (err) {
+    console.error(err);
+  }
+});
+
+document.addEventListener('DOMContentLoaded', () => {
+  ipcRenderer.sendToHost('hello');
+}, false);
diff --git a/src/webview/spellchecker.js b/src/webview/spellchecker.js
new file mode 100644
index 000000000..ec8807874
--- /dev/null
+++ b/src/webview/spellchecker.js
@@ -0,0 +1,14 @@
+import { SpellCheckHandler, ContextMenuListener, ContextMenuBuilder } from 'electron-spellchecker';
+
+window.spellCheckHandler = new SpellCheckHandler();
+setTimeout(() => {
+  window.spellCheckHandler.attachToInput();
+}, 1000);
+
+// TODO: should we set the language to user settings?
+// window.spellCheckHandler.switchLanguage('en-US');
+
+const contextMenuBuilder = new ContextMenuBuilder(window.spellCheckHandler);
+const contextMenuListener = new ContextMenuListener((info) => { // eslint-disable-line
+  contextMenuBuilder.showPopupMenu(info);
+});
diff --git a/src/webview/zoom.js b/src/webview/zoom.js
new file mode 100644
index 000000000..99c647036
--- /dev/null
+++ b/src/webview/zoom.js
@@ -0,0 +1,37 @@
+const electron = require('electron');
+
+const { ipcRenderer, webFrame } = electron;
+
+const maxZoomLevel = 9;
+const minZoomLevel = -8;
+let zoomLevel = 0;
+
+ipcRenderer.on('zoomIn', () => {
+  if (maxZoomLevel > zoomLevel) {
+    zoomLevel += 1;
+  }
+  webFrame.setZoomLevel(zoomLevel);
+
+  ipcRenderer.sendToHost('zoomLevel', { zoom: zoomLevel });
+});
+
+ipcRenderer.on('zoomOut', () => {
+  if (minZoomLevel < zoomLevel) {
+    zoomLevel -= 1;
+  }
+  webFrame.setZoomLevel(zoomLevel);
+
+  ipcRenderer.sendToHost('zoomLevel', { zoom: zoomLevel });
+});
+
+ipcRenderer.on('zoomReset', () => {
+  zoomLevel = 0;
+  webFrame.setZoomLevel(zoomLevel);
+
+  ipcRenderer.sendToHost('zoomLevel', { zoom: zoomLevel });
+});
+
+ipcRenderer.on('setZoom', (e, arg) => {
+  zoomLevel = arg;
+  webFrame.setZoomLevel(zoomLevel);
+});