Remove jquery from website 🍪

bustle · Feb 10, 2020 · 8cbf2aa · 8cbf2aa
1 parent 451bd47
commit 8cbf2aa
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 12,186 deletions.
diff --git a/assets/demo/demo.js b/assets/demo/demo.js
@@ -1,71 +1,77 @@
-import { Editor } from './mobiledoc.js';
+import { Editor } from '../../dist/index.js';
 
 function bootstrapSimpleDemo() {
-  let el = $('#editor-basic')[0];
-  let editor = new Editor({
+  const el = document.querySelector('#editor-basic');
+  const editor = new Editor({
     placeholder: 'Welcome to Mobiledoc'
   });
   editor.render(el);
 }
 
 function activateButtons(parentSelector, editor) {
-  $(`${parentSelector} button`).click(function () {
-    let button = $(this);
-    let action = button.data('action');
-    let args = button.data('args').split(',');
+  document.querySelectorAll(`${parentSelector} button`).forEach(button =>
+    button.addEventListener('click', () => {
+      const action = button.getAttribute('data-action');
+      const args = button.getAttribute('data-args').split(',');
 
-    editor[action](...args);
-  });
+      editor[action](...args);
+    })
+  );
 }
 
 function bootstrapEditor() {
-  let el = $('#editor')[0];
-  let editor = new Editor({
+  const el = document.querySelector('#editor');
+  const editor = new Editor({
     placeholder: 'Type here',
     autofocus: true
   });
   editor.render(el);
   activateButtons('#editor-wrapper', editor);
-  let displayMobiledoc = () => {
-    let mobiledoc = editor.serialize();
-    let html = mobiledocPrettyJSONRenderer(mobiledoc);
-    $('#editor-output').html(html);
+  const displayMobiledoc = () => {
+    const mobiledoc = editor.serialize();
+    // eslint-disable-next-line no-undef
+    const html = mobiledocPrettyJSONRenderer(mobiledoc);
+    document.querySelector('#editor-output').innerHTML = html;
   };
   editor.postDidChange(displayMobiledoc);
   displayMobiledoc();
 }
 
-let bootstrapToolbarEditor = () => {
-  let el = $('#editor-toolbar')[0];
-  let editor = new Editor({
+const bootstrapToolbarEditor = () => {
+  const el = document.querySelector('#editor-toolbar');
+  const editor = new Editor({
     placeholder: 'Editor with toolbar'
   });
   editor.render(el);
 
   activateButtons('#editor-toolbar-wrapper', editor);
 };
 
-let bootstrapCardEditor = () => {
-  let card = {
+const bootstrapCardEditor = () => {
+  const card = {
     name: 'kitten',
     type: 'dom',
     render() {
-      let el = $(`<figure><img src="http://placekitten.com/200/100">
-                 <figcaption>Image of a kitten</figcaption>
-                 </figure>`);
-      return el[0];
+      const el = document.createElement('figure');
+      el.innerHTML = `
+        <img src="http://placekitten.com/200/100">
+        <figcaption>Image of a kitten</figcaption>
+      `;
+      return el;
     }
   };
-  let atom = {
+  const atom = {
     name: 'mention',
     type: 'dom',
     render() {
-      let el = $(`<span style='background-color: #CCC;'>@hello</span>`);
-      return el[0];
+      const el = document.createElement('span');
+      el.setAttribute('style', 'background-color: #CCC;');
+      el.innerText = `@hello`;
+      return el;
     }
   };
-  let el = $('#editor-card')[0];
-  let editor = new Editor({
+  const el = document.querySelector('#editor-card');
+  const editor = new Editor({
     placeholder: 'Editor with card',
     cards: [card],
     atoms: [atom]
@@ -74,7 +80,7 @@ let bootstrapCardEditor = () => {
   activateButtons('#editor-card-wrapper', editor);
 };
 
-$(() => {
+document.addEventListener('DOMContentLoaded', () => {
   bootstrapEditor();
   bootstrapSimpleDemo();
   bootstrapToolbarEditor();

diff --git a/assets/demo/index.html b/assets/demo/index.html
@@ -5,10 +5,9 @@
   <title>Mobiledoc Kit Demo</title>
 </head>
 <body>
-  <script src="../tests/jquery/jquery.js"></script>
   <script src="./vendor/mobiledoc-pretty-json-renderer.js"></script>
   <script type="module" src="./demo.js"></script>
-  <link rel="stylesheet" href="../css/mobiledoc-kit.css">
+  <link rel="stylesheet" href="../../src/css/mobiledoc-kit.css">
   <link rel="stylesheet" href="./demo.css">
   <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.8.0/styles/default.min.css">
   <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.8.0/highlight.min.js"></script>
@@ -29,21 +28,19 @@
   </p>
 
   <p>
-    Publishers use the <a href='https://github.com/bustle/mobiledoc-kit'>Mobiledoc-Kit</a> library to
+    Publishers use the <a href='https://github.com/bustle/mobiledoc-kit' target='_blank'>Mobiledoc-Kit</a> library to
     build rich-content editors customized for their content. Posts are serialized to the
-    JSON-based <a href='https://github.com/bustle/mobiledoc-kit/blob/master/MOBILEDOC.md'>Mobiledoc format</a>, a
+    JSON-based <a href='https://github.com/bustle/mobiledoc-kit/blob/master/MOBILEDOC.md' target='_blank'>Mobiledoc format</a>, a
     structure designed to unambiguously represent the content and be simple to render
     in a variety of display contexts such as server-side HTML, in-browser DOM, and SEO-friendly text.
   </p>
 
   <p>
-  Mobiledoc supports rich, interactive content via <a href='https://github.com/bustle/mobiledoc-kit/blob/master/CARDS.md'>cards</a> and <a href='https://github.com/bustle/mobiledoc-kit/blob/master/ATOMS.md'>atoms</a>.
+  Mobiledoc supports rich, interactive content via <a href='https://github.com/bustle/mobiledoc-kit/blob/master/CARDS.md' target='_blank'>cards</a> and <a href='https://github.com/bustle/mobiledoc-kit/blob/master/ATOMS.md' target='_blank'>atoms</a>.
   </p>
 
   <p>
-    Development of Mobiledoc and the supporting libraries is generously funded by Bustle Labs.
-    Bustle Labs is the tech team behind the editorial staff at <a href='https://www.bustle.com'>Bustle</a> and <a href='https://www.romper.com'>Romper</a>,
-    fantastic and successful feminist and women’s interest sites based in NYC.
+    Development of Mobiledoc and the supporting libraries is generously funded by <a href='https://bustle.company/' target='_blank'>Bustle Digital Group</a>'s engineering team.
   </p>
 
   <div class="two-column">