~dricottone/noticable

69444f9aa63311a90c5f89338a8bd2d52c6db7d4 — Dominic Ricottone 3 years ago 4d60328
reorganized js
3 files changed, 80 insertions(+), 82 deletions(-)

M index.html
M main.js
A renderer.js
M index.html => index.html +1 -57
@@ 51,63 51,7 @@ body {
    <div class="container markdown-body" id="container-results"></div>
    <script src="node_modules/jquery/dist/jquery.min.js"></script>
    <script src="node_modules/monaco-editor/min/vs/loader.js"></script>
    <script>
// initialize monaco editor
require.config({ paths: { vs: 'node_modules/monaco-editor/min/vs' } });
require(['vs/editor/editor.main'], function () {
  window.editor = monaco.editor.create(document.getElementById('container-editor'), {
    language: 'markdown',
    minimap: {
      enabled: false
    },
    value: ''
  });
});

function requestPostFile(filename) {
  console.log("[renderer] triggering 'request-post-file' on '" + filename + "'...");
  window.postMessage({ type: "request-post-file", text: filename }, "*");
}
function sortFileNames(a, b) {
  return ($(b).text()) < ($(a).text());
}
function buildFileName(filename) {
  var el = document.createElement("li");
  el.innerHTML = filename;
  el.addEventListener("click", () => { requestPostFile(filename); });
  return el
}

// listen to preload
window.addEventListener("message", (event) => {
  if (event.source != window) return;
  if (event.data.type && (event.data.type == "request-post-markdown")) {
    console.log("[renderer] caught 'request-post-markdown'!");
    console.log("[renderer] sending 'post-markdown'...");
    window.postMessage({ type: "post-markdown", text: window.editor.getValue() }, "*");
  };
  if (event.data.type && (event.data.type == "request-insert-filename")) {
    console.log("[renderer] caught 'request-insert-filename'!");
    $("#list-filenames").append(buildFileName(event.data.text));
    $("#list-filenames li").sort(sortFileNames).appendTo("#list-filenames");
  };
  if (event.data.type && (event.data.type == "request-insert-html")) {
    console.log("[renderer] caught 'request-insert-html'!");
    $("#container-results").html(event.data.text);
    $(".container").toggleClass("focused");
  };
  if (event.data.type && (event.data.type == "request-toggle-editor")) {
    console.log("[renderer] caught 'request-toggle-editor'!");
    $(".container").toggleClass("focused");
  };
  if (event.data.type && (event.data.type == "post-file")) {
    console.log("[renderer] caught 'post-file'!");
    console.log(event.data.text)
    window.editor.setValue(event.data.text);
  };
}, false);

    </script>
    <script src="renderer.js"></script>
  </body>
</html>


M main.js => main.js +19 -25
@@ 1,47 1,41 @@
const { app, BrowserWindow } = require('electron');
const shortcut = require('electron-localshortcut');
const path = require('path');
const { app, BrowserWindow } = require("electron");
const shortcut = require("electron-localshortcut");
const path = require("path");

// initialize renderer
let win;
const createWindow = () => {
function createWindow() {
  win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      contextIsolation: true,
      nodeIntegration: false,
      preload: path.join(__dirname, 'preload.js')
      preload: path.join(__dirname, "preload.js")
    }
  });

  win.loadFile(path.join(__dirname, 'index.html'));

  shortcut.register(win, 'CmdOrCtrl+S', () => {
    console.log("[main] triggering 'request-render-markdown'...")
    win.webContents.send('request-render-markdown', '');
  win.loadFile(path.join(__dirname, "index.html"));
  shortcut.register(win, "CmdOrCtrl+S", () => {
    console.log("[main] triggering 'request-focus-editor'...");
    win.webContents.send("request-focus-editor", "");
  });
  shortcut.register(win, 'CmdOrCtrl+E', () => {
    console.log("[main] triggering 'request-focus-editor'...")
    win.webContents.send('request-focus-editor', '');
  shortcut.register(win, "CmdOrCtrl+E", () => {
    console.log("[main] triggering 'request-render-markdown'...");
    win.webContents.send("request-render-markdown", "");
  });

  win.on('closed', () => {
  win.on("closed", () => {
    win = null;
  });
};
app.on("ready", createWindow);

// initialize
app.on('ready', createWindow);

// macOS convention is to keep process alive (accessible via the dock) until
// explicitly quit; must handle re-initialization
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
// macOS best practices
app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit();
  }
});

app.on('activate', () => {
app.on("activate", () => {
  if (win === null) {
    createWindow();
  }

A renderer.js => renderer.js +60 -0
@@ 0,0 1,60 @@
// initialize monaco editor
require.config({ paths: { vs: 'node_modules/monaco-editor/min/vs' } });
require(['vs/editor/editor.main'], function () {
  window.editor = monaco.editor.create(document.getElementById('container-editor'), {
    language: 'markdown',
    minimap: {
      enabled: false
    },
    value: ''
  });
});

// messaging
function postMarkdown(markdown) {
  console.log("[renderer] sending 'post-markdown'...");
  window.postMessage({ type: "post-markdown", text: markdown }, "*");
}
function requestPostFile(filename) {
  console.log("[renderer] triggering 'request-post-file' on '" + filename + "'...");
  window.postMessage({ type: "request-post-file", text: filename }, "*");
}

// utilities
function buildFileName(filename) {
  var el = document.createElement("li");
  el.innerHTML = filename;
  el.addEventListener("click", () => { requestPostFile(filename); });
  return el
}
function sortFileNames(a, b) {
  return ($(b).text()) < ($(a).text());
}

// listen to preload
window.addEventListener("message", (event) => {
  if (event.source != window) return;
  if (event.data.type && (event.data.type == "request-post-markdown")) {
    console.log("[renderer] caught 'request-post-markdown'!");
    postMarkdown(window.editor.getValue());
  };
  if (event.data.type && (event.data.type == "request-insert-filename")) {
    console.log("[renderer] caught 'request-insert-filename'!");
    $("#list-filenames").append(buildFileName(event.data.text));
    $("#list-filenames li").sort(sortFileNames).appendTo("#list-filenames");
  };
  if (event.data.type && (event.data.type == "request-insert-html")) {
    console.log("[renderer] caught 'request-insert-html'!");
    $("#container-results").html(event.data.text);
    $(".container").toggleClass("focused");
  };
  if (event.data.type && (event.data.type == "request-toggle-editor")) {
    console.log("[renderer] caught 'request-toggle-editor'!");
    $(".container").toggleClass("focused");
  };
  if (event.data.type && (event.data.type == "post-file")) {
    console.log("[renderer] caught 'post-file'!");
    window.editor.setValue(event.data.text);
  };
}, false);