yarii-editor 0.4.0

data/app/javascript/controllers/commit_modal_controller.js

@@ -0,0 +1,55 @@
+import { Controller } from "stimulus"
+import axios from "axios"
+import { axiosPostable } from "../lib/utils"
+
+export default class extends Controller {
+  static targets = [ "status" ]
+  
+  initialize() {
+    this.axios = axiosPostable(axios)
+  }
+
+  connect() {
+    // We'll handle saving ourselves. Disable normal form operation
+    this.element.querySelector('.modal-card-body > form').addEventListener('submit', event => {
+      event.preventDefault()
+    })
+  }
+  async commit() {
+    const form = this.element.querySelector('.modal-card-body > form');
+    const data = new FormData(form);
+
+    this.element.querySelector('.modal-card-body > form').classList.add('dimmed')
+    this.element.querySelector('button[data-action="commit-modal#commit"]').classList.add('is-loading')
+    this.statusTarget.classList.add('in-progress')
+    this.statusTarget.innerHTML = "Pushing Updates…"
+
+    try {
+      let response = null
+      response = await this.axios.post(this.data.get('path'), data)
+      this.refreshPublishingMenu()
+      this.closeModal()
+    } catch (error) {
+      alert("I'm sorry, I ran into trouble communicating with the server. Try pushing again in a moment.")
+      console.log(error)
+    }
+  }
+
+  cancel() {
+    this.closeModal()
+  }
+
+  closeModal() {
+    this.element.remove()
+  }
+
+  async refreshPublishingMenu() {
+    try {
+      let response = null
+      response = await this.axios.get(this.data.get('publishing-menu-path'))
+      document.getElementById('publishing-menu').innerHTML = response.data
+    } catch (error) {
+      console.log(error)
+    }
+  }
+}

data/app/javascript/controllers/editor_modal_controller.js

@@ -0,0 +1,76 @@
+import { Controller } from "stimulus"
+import axios from "axios"
+import { axiosPostable } from "../lib/utils"
+
+export default class extends Controller {
+  static targets = [ "additionalFields", "status" ]
+  
+  initialize() {
+    this.axios = axiosPostable(axios)
+  }
+
+  connect() {
+    // We'll handle saving ourselves. Disable normal form operation
+    this.element.querySelector('.modal-card-body > form').addEventListener('submit', event => {
+      event.preventDefault()
+    })
+  }
+  async save() {
+    const form = this.element.querySelector('.modal-card-body > form');
+    const data = new FormData(form);
+
+    const savePath = this.data.get('path')
+    const httpMethod = this.data.get('http-method')
+
+    this.element.querySelector('.modal-card-body > form').classList.add('dimmed')
+    this.element.querySelector('button[data-action="editor-modal#save"]').classList.add('is-loading')
+    this.statusTarget.classList.add('in-progress')
+    this.statusTarget.innerHTML = "Generating Preview…"
+
+    try {
+      let response = null
+      if (httpMethod == 'post') {
+        response = await this.axios.post(savePath, data)
+        const newCard = document.createElement('template')
+        newCard.innerHTML = response.data.document_html
+        const list = document.getElementById('list-' + this.data.get('content-model'))
+        list.prepend(newCard.content.cloneNode(true))
+      } else if (httpMethod == 'put') {
+        response = await this.axios.put(savePath, data)
+        const updatedCard = response.data.document_html
+        document.getElementById(this.data.get('content-model') + '-' + this.data.get('model-id')).outerHTML = updatedCard
+      }
+      this.refreshPublishingMenu()
+      this.closeModal()
+    } catch (error) {
+      this.element.querySelector('.modal-card-body > form').classList.remove('dimmed')
+      this.element.querySelector('button[data-action="editor-modal#save"]').classList.remove('is-loading')
+      this.statusTarget.classList.remove('in-progress')
+      this.statusTarget.innerHTML = ""
+      alert("I'm sorry, I ran into trouble communicating with the server. Please copy your content to another text editor to preserve your work if this problem persists.")
+      console.error(error)
+    }
+  }
+
+  cancel() {
+    this.closeModal()
+  }
+
+  closeModal() {
+    this.element.remove()
+  }
+  
+  showAdditionalFields() {
+    this.additionalFieldsTarget.classList.remove('is-hidden')
+  }
+
+  async refreshPublishingMenu() {
+    try {
+      let response = null
+      response = await this.axios.get(this.data.get('publishing-menu-path'))
+      document.getElementById('publishing-menu').innerHTML = response.data
+    } catch (error) {
+      console.log(error)
+    }
+  }
+}

data/app/javascript/controllers/index.js

@@ -0,0 +1,85 @@
+// Load all the controllers within this directory and all subdirectories. 
+// Controller files must be named *_controller.js.
+
+import { Application } from "stimulus"
+import { definitionsFromContext } from "stimulus/webpack-helpers"
+
+const application = Application.start()
+const context = require.context("controllers", true, /_controller\.js$/)
+application.load(definitionsFromContext(context))
+
+
+document.addEventListener('DOMContentLoaded', () => {
+  // Fixes body scrolling issues on iPad
+  setInterval(() => {
+    if (document.querySelector('.modal.is-active') == null && document.querySelector('html').scrollTop > 0) {
+
+      // scroll it!
+      scrollToY(0)
+//      document.querySelector('html').scrollTop = 0
+    }
+  }, 1000)
+})
+
+// first add raf shim
+// http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
+window.requestAnimFrame = (function(){
+  return  window.requestAnimationFrame       ||
+          window.webkitRequestAnimationFrame ||
+          window.mozRequestAnimationFrame    ||
+          function( callback ){
+            window.setTimeout(callback, 1000 / 60);
+          };
+})();
+
+// main function
+function scrollToY(scrollTargetY, speed, easing) {
+    // scrollTargetY: the target scrollY property of the window
+    // speed: time in pixels per second
+    // easing: easing equation to use
+
+    var scrollY = window.scrollY || document.documentElement.scrollTop,
+        scrollTargetY = scrollTargetY || 0,
+        speed = speed || 2000,
+        easing = easing || 'easeOutSine',
+        currentTime = 0;
+
+    // min time .1, max time .8 seconds
+    var time = Math.max(.1, Math.min(Math.abs(scrollY - scrollTargetY) / speed, .8));
+
+    // easing equations from https://github.com/danro/easing-js/blob/master/easing.js
+    var easingEquations = {
+            easeOutSine: function (pos) {
+                return Math.sin(pos * (Math.PI / 2));
+            },
+            easeInOutSine: function (pos) {
+                return (-0.5 * (Math.cos(Math.PI * pos) - 1));
+            },
+            easeInOutQuint: function (pos) {
+                if ((pos /= 0.5) < 1) {
+                    return 0.5 * Math.pow(pos, 5);
+                }
+                return 0.5 * (Math.pow((pos - 2), 5) + 2);
+            }
+        };
+
+    // add animation loop
+    function tick() {
+        currentTime += 1 / 60;
+
+        var p = currentTime / time;
+        var t = easingEquations[easing](p);
+
+        if (p < 1) {
+            requestAnimFrame(tick);
+
+            window.scrollTo(0, scrollY + ((scrollTargetY - scrollY) * t));
+        } else {
+            console.log('scroll done');
+            window.scrollTo(0, scrollTargetY);
+        }
+    }
+
+    // call it once to get started
+    tick();
+}

data/app/javascript/controllers/list_loading_controller.js

@@ -0,0 +1,33 @@
+import { Controller } from "stimulus"
+import axios from "axios"
+
+export default class extends Controller {
+  async more(event) {
+    event.preventDefault()
+    const button = event.currentTarget
+    const path = event.currentTarget.href
+    button.classList.add('is-loading')
+
+    try {
+      const response = await axios.get(path)
+      const listContents = document.createElement('template')
+      listContents.innerHTML = response.data
+      const listId = this.element.id.split('-')[1]
+      const list = document.getElementById('list-' + listId)
+      console.log(list, this.element, listContents)
+      list.insertBefore(listContents.content.cloneNode(true), this.element)
+      
+      let nextPage = path.match(/page=(\d+)/)[1]
+      nextPage = parseInt(nextPage, 10) + 1
+      button.href = button.href.replace(/page=(\d+)/, "page=" + nextPage)
+      button.classList.remove('is-loading')
+
+      if (response.data.includes("data-list-done=\"true\"")) {
+        button.remove()
+      }
+    } catch (error) {
+      button.classList.remove('is-loading')
+      console.error(error)
+    }
+  }
+}

data/app/javascript/controllers/markdown_editor_controller.js

@@ -0,0 +1,157 @@
+import EasyMDE from "easymde"
+import { replaceEditorSelection } from "../lib/utils.js"
+
+import { Controller } from "stimulus"
+
+export default class extends Controller {
+  static targets = [ "editor" ]
+
+  yariiCustomImage(editor) {
+    var cm = editor.codemirror
+
+    // TODO: figure out how to hook Cloudinary into this custom action
+    /*
+    document.querySelector('#imagemodal').classList.add('is-active')
+    document.querySelector('#imagemodal button.button').addEventListener('click', () => {
+      document.querySelector('#imagemodal').classList.remove('is-active')
+      replaceEditorSelection(cm, null, ["{% 'foobar' | cloudinary_image:'q_50' %}", ''])
+    })
+    */
+  }
+
+  connect() {
+    this.easyMDE = new EasyMDE({
+      autoDownloadFontAwesome: false,
+      spellChecker: false,
+      forceSync: true,
+      element: this.editorTarget,
+      toolbar: [
+        {
+            name: 'bold',
+            action: EasyMDE.toggleBold,
+            className: 'fa fa-bold',
+            title: 'Bold',
+        },
+        {
+            name: 'italic',
+            action: EasyMDE.toggleItalic,
+            className: 'fa fa-italic',
+            title: 'Italic',
+        },
+        {
+            name: 'strikethrough',
+            action: EasyMDE.toggleStrikethrough,
+            className: 'fa fa-strikethrough',
+            title: 'Strikethrough',
+        },
+        {
+            name: 'heading-1',
+            action: EasyMDE.toggleHeading1,
+            className: 'fa fa-header fa-heading header-1',
+            title: 'Big Heading',
+        },
+        {
+            name: 'heading-2',
+            action: EasyMDE.toggleHeading2,
+            className: 'fa fa-header fa-heading header-2',
+            title: 'Medium Heading',
+        },
+        {
+            name: 'heading-3',
+            action: EasyMDE.toggleHeading3,
+            className: 'fa fa-header fa-heading header-3',
+            title: 'Small Heading',
+        },
+        '|',
+        {
+            name: 'code',
+            action: EasyMDE.toggleCodeBlock,
+            className: 'fa fa-code',
+            title: 'Code',
+        },
+        {
+            name: 'quote',
+            action: EasyMDE.toggleBlockquote,
+            className: 'fa fa-quote-left',
+            title: 'Quote'
+        },
+        {
+            name: 'unordered-list',
+            action: EasyMDE.toggleUnorderedList,
+            className: 'fa fa-list-ul',
+            title: 'Generic List'
+        },
+        {
+            name: 'ordered-list',
+            action: EasyMDE.toggleOrderedList,
+            className: 'fa fa-list-ol',
+            title: 'Numbered List'
+        },
+        {
+            name: 'clean-block',
+            action: EasyMDE.cleanBlock,
+            className: 'fa fa-eraser',
+            title: 'Clean block',
+        },
+        '|',
+        {
+            name: 'link',
+            action: EasyMDE.drawLink,
+            className: 'fa fa-link',
+            title: 'Create Link'
+        },
+        {
+          name: 'yarii-custom-image',
+          action: (editor) => {this.yariiCustomImage(editor)},
+          className: 'fa fa-image',
+          title: 'Insert Image'
+        },
+        {
+            name: 'horizontal-rule',
+            action: EasyMDE.drawHorizontalRule,
+            className: 'fa fa-minus',
+            title: 'Insert Horizontal Line',
+        },
+        '|',
+        {
+            name: 'preview',
+            action: EasyMDE.togglePreview,
+            className: 'fa fa-eye',
+            noDisable: true,
+            title: 'Toggle Preview'
+        },
+        {
+            name: 'side-by-side',
+            action: EasyMDE.toggleSideBySide,
+            className: 'fa fa-columns',
+            noDisable: true,
+            noMobile: true,
+            title: 'Toggle Side by Side'
+        },
+        {
+            name: 'fullscreen',
+            action: EasyMDE.toggleFullScreen,
+            className: 'fa fa-arrows-alt',
+            noDisable: true,
+            noMobile: true,
+            title: 'Toggle Fullscreen'
+        },
+        '|',
+        {
+            name: 'undo',
+            action: EasyMDE.undo,
+            className: 'fa fa-undo',
+            noDisable: true,
+            title: 'Undo',
+        },
+        {
+            name: 'redo',
+            action: EasyMDE.redo,
+            className: 'fa fa-repeat fa-redo',
+            noDisable: true,
+            title: 'Redo',
+        },
+      ]
+    });
+  }
+}

data/app/javascript/controllers/new_document_controller.js

@@ -0,0 +1,16 @@
+import { Controller } from "stimulus"
+import axios from "axios"
+
+export default class extends Controller {
+  async open() {
+    const newPath = this.data.get('path')
+
+    try {
+      const response = await axios.get(newPath)
+      document.querySelector('#editor-modal-wrapper').innerHTML = response.data
+      document.querySelector('#editor-modal input').focus()
+    } catch (error) {
+      console.log(error)
+    }
+  }
+}

data/app/javascript/controllers/push_to_public_controller.js

@@ -0,0 +1,17 @@
+import { Controller } from "stimulus"
+import axios from "axios"
+
+export default class extends Controller {
+  async open(event) {
+    event.preventDefault()
+    const path = this.element.href
+
+    try {
+      const response = await axios.get(path)
+      document.querySelector('#commit-modal-wrapper').innerHTML = response.data
+      document.querySelector('#commit-modal input').focus()
+    } catch (error) {
+      console.error(error)
+    }
+  }
+}