refactor: use babel and eslint for js

[skip ci]

.babelrc

@@ -0,0 +1,9 @@
+{
+  "presets": [
+    ["env", {
+      "targets": {
+        "browsers": ["defaults"]
+      }
+    }]
+  ]
+}

.eslintrc.js

@@ -0,0 +1,38 @@
+module.exports = {
+    "env": {
+        "browser": true,
+        "es6": true
+    },
+    "extends": "eslint:recommended",
+    "parserOptions": {
+        "ecmaVersion": 2018
+    },
+    "rules": {
+        "indent": [
+            "error",
+            2,
+            {
+                "SwitchCase": 1,
+            },
+        ],
+        "linebreak-style": ["error", "unix"],
+        "quotes": ["error", "single"],
+        "semi": ["error", "always"],
+        "eqeqeq": ["error", "always"],
+        "dot-location": ["error", "property"],
+        "dot-notation": ["warn"],
+        "no-else-return": ["warn"],
+        "no-var": ["error"],
+        "arrow-body-style": ["warn"],
+        "object-shorthand": ["warn"],
+        "prefer-arrow-callback": ["warn"],
+        "prefer-const": ["warn"],
+        "prefer-template": ["warn"],
+        "comma-dangle": ["error", "always-multiline"],
+        "array-bracket-newline": ["warn", "consistent"],
+        "array-bracket-spacing": ["warn", "never"],
+        "block-spacing": ["warn", "always"],
+        "brace-style": ["warn", "1tbs"],
+        "camelcase": ["warn"]
+    }
+};

.gitattributes

@@ -10,5 +10,8 @@ webserver/web/static/css/*/* linguist-vendored
 # vendored js files are in separate subdirectories
 webserver/web/static/js/*/* linguist-vendored
 
+# generated js files are in js root
+webserver/web/static/js/* linguist-generated
+
 # linguist detects these as RenderScript, but they're Rust
 webserver/src/models/id/*.rs linguist-language=Rust

.gitignore

@@ -1,6 +1,9 @@
 /target
 **/*.rs.bk
 
+/node_modules
+/package-lock.json
+
 /Rocket.toml
 /config.toml
 /.env

webserver/Cargo.toml

@@ -5,6 +5,14 @@ authors = ["Kyle Clemens <[email protected]>"]
 
 build = "build.rs"
 
+exclude = [
+  # pls
+  # "web/",
+  # "migrations/",
+  "web/**/*",
+  "migrations/**/*",
+]
+
 [badges]
 travis-ci = { repository = "jkcclemens/paste", branch = "master" }
 maintenance = { status = "actively-developed" }

webserver/web/src/js/editor.js

@@ -0,0 +1,191 @@
+/* global hljs:false, CodeSass:false */
+
+let pasteNum = 0;
+const pasteEditors = {};
+
+(function() {
+  /**
+   * Create the upload array for handling multiple files.
+   */
+  function createUpload() {
+    function getLanguage(parent) {
+      const lang = parent.querySelector('select[name=file_language]').value;
+      if (lang === '') {
+        return null;
+      }
+      return lang;
+    }
+
+    const files = [];
+    for (const editor of Object.values(pasteEditors)) {
+      const parent = editor.editorRoot.parentElement.parentElement.parentElement;
+      const file = {
+        'name': parent.querySelector('input[name=file_name]').value,
+        'language': getLanguage(parent),
+        'content': editor.getCode(),
+      };
+      const id = editor.editorRoot.parentElement.parentElement.parentElement.querySelector('input[name=id]');
+      if (id !== null) {
+        file.id = id.value;
+      }
+      files.push(file);
+    }
+    return files;
+  }
+
+  function codeFlaskSucksHighlight(editor) {
+    hljs.highlightBlock(editor.elCode);
+    // remove the extra classes hljs adds without asking
+    for (const clazz of editor.elCode.classList) {
+      if (clazz !== 'hljs' && clazz !== 'codeflask__code' && !clazz.startsWith('language-')) {
+        editor.elCode.classList.remove(clazz);
+      }
+    }
+  }
+
+  /**
+   * Create an editor.
+   *
+   * @param {HTMLElement} parent The file container.
+   * @param {HTMLElement} el The element to convert into an editor.
+   */
+  function setUpEditor(parent, el) {
+    const div = document.createElement('div');
+
+    div.style.height = '400px';
+
+    const editor = new CodeSass(div, {
+      defaultTheme: false,
+      lineNumbers: true,
+      language: 'plaintext',
+    });
+
+    const hidden = document.createElement('input');
+    hidden.type = 'hidden';
+    hidden.name = 'file_content';
+    hidden.id = 'hidden_content';
+    editor.editorRoot.insertAdjacentElement('afterend', hidden);
+
+    editor.elCode.style.background = 'none';
+    editor.elCode.style.padding = '0';
+
+    editor.setHighlightCallback(codeFlaskSucksHighlight);
+
+    const nameInput = parent.querySelector('input[name=file_name]');
+    const langInput = parent.querySelector('select[name=file_language]');
+
+    function updateLanguage() {
+      let suffix;
+      if (langInput.value !== '') {
+        suffix = langInput.value;
+      } else if (nameInput.value !== '') {
+        suffix = nameInput.value.split('.').pop();
+      }
+      const lang = hljs.getLanguage(suffix) !== undefined ? suffix : 'plaintext';
+      editor.updateLanguage(lang);
+      editor.updateCode(editor.code);
+    }
+
+    nameInput.addEventListener('input', updateLanguage);
+    langInput.addEventListener('change', updateLanguage);
+
+    updateLanguage();
+    editor.updateCode(el.value);
+    editor.createLineNumbers(); // TODO: fix this in codesass
+
+    const toDelete = pasteNum;
+    parent
+      .querySelector('button[name=delete_button]')
+      .addEventListener('click', () => removeFile(toDelete));
+
+    pasteEditors[pasteNum] = editor;
+
+    el.insertAdjacentElement('beforebegin', div);
+    el.remove();
+  }
+
+  function addFile() {
+    // get the base file for cloning (should be invisible if JS is running)
+    const base = document.getElementById('base_file');
+
+    // deep clone the base
+    const clone = base.cloneNode(true);
+
+    // show the editor by removing the requires-no-js class that was on the base
+    clone.classList.remove('requires-no-js');
+
+    pasteNum += 1;
+    clone.id = `file${pasteNum}`;
+
+    // set up an editor for each textarea in the base (should only be one)
+    for (const ta of clone.getElementsByTagName('textarea')) {
+      setUpEditor(clone, ta);
+    }
+
+    // add the editor to the dom
+    document.getElementById('end_of_files').insertAdjacentElement('beforebegin', clone);
+
+    updateButtons();
+  }
+
+  /**
+   * Remove a file. Will never remove the last file.
+   *
+   * @param {Number} num The number of the file to remove.
+   */
+  function removeFile(num) {
+    if (Object.keys(pasteEditors).length === 1) {
+      return;
+    }
+
+    const file = document.getElementById(`file${num}`);
+
+    if (file === null) {
+      return;
+    }
+
+    delete pasteEditors[num];
+
+    file.remove();
+
+    updateButtons();
+  }
+
+  function updateButtons() {
+    const enabled = Object.keys(pasteEditors).length > 1;
+    for (const button of document.getElementsByName('delete_button')) {
+      if (enabled) {
+        button.disabled = false;
+      } else {
+        button.disabled = true;
+      }
+    }
+  }
+
+  function createEditors() {
+    for (const editor of document.querySelectorAll('textarea.editor')) {
+      pasteNum += 1;
+      setUpEditor(editor.parentElement.parentElement.parentElement, editor);
+    }
+    updateButtons();
+  }
+
+  document.getElementById('add_file').addEventListener('click', addFile);
+
+  document.getElementById('paste_upload').addEventListener('submit', e => {
+    const input = document.createElement('input');
+    input.type = 'hidden';
+    input.value = JSON.stringify(createUpload());
+    input.name = 'upload_json';
+
+    e.target.appendChild(input);
+  });
+
+  // create any initial editors
+  createEditors();
+
+  // add an initial file if necessary
+  if (Object.keys(pasteEditors).length === 0) {
+    addFile();
+  }
+})();

webserver/web/src/js/highlight.js

@@ -0,0 +1,45 @@
+/* global hljs */
+
+(function() {
+  for (const pre of document.getElementsByTagName('pre')) {
+    (function() {
+      if (pre.id === '') {
+        return;
+      }
+      const title = document.getElementById(`${pre.id}-title`);
+      if (title === null) {
+        return;
+      }
+      let suffix;
+      if (pre.lang) {
+        suffix = pre.lang;
+      } else {
+        suffix = title.innerText.trim().split('.').pop();
+      }
+      const classes = [];
+      if (hljs.getLanguage(suffix) === undefined) {
+        classes.push('no-highlight');
+        classes.push('hljs');
+      } else {
+        classes.push(`language-${suffix}`);
+      }
+      for (const clazz of classes) {
+        pre.classList.add(clazz);
+      }
+    })();
+
+    const cont = [...pre.classList].some(e => e === 'hljs' || e.startsWith('language-'));
+
+    if (!cont) {
+      continue;
+    }
+
+    hljs.highlightBlock(pre);
+
+    if (pre.classList.contains('file-source')) {
+      hljs.lineNumbersBlock(pre, {
+        singleLine: true,
+      });
+    }
+  }
+})();

webserver/web/src/js/navbar.js

@@ -0,0 +1,22 @@
+(function() {
+  document.addEventListener('DOMContentLoaded', () => {
+    // Get all "navbar-burger" elements
+    const navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
+
+    // Check if there are any navbar burgers
+    if (navbarBurgers.length > 0) {
+      // Add a click event on each of them
+      navbarBurgers.forEach(el => {
+        el.addEventListener('click', () => {
+          // Get the target from the "data-target" attribute
+          const targetId = el.dataset.target;
+          const target = document.getElementById(targetId);
+
+          // Toggle the class on both the "navbar-burger" and the "navbar-menu"
+          el.classList.toggle('is-active');
+          target.classList.toggle('is-active');
+        });
+      });
+    }
+  });
+})();

webserver/web/src/js/notifications.js

@@ -0,0 +1,8 @@
+(function() {
+  for (const button of document.querySelectorAll('.message > .message-header > .delete')) {
+    button.addEventListener('click', () => this.parentElement.parentElement.remove());
+  }
+  for (const button of document.querySelectorAll('.notification > .delete')) {
+    button.addEventListener('click', () => this.parentElement.remove());
+  }
+})();