polivalente 0.6.2 → 0.7.0

data/app/assets/build/css/components/trix/_trix.scss

@@ -0,0 +1,181 @@
+/* Configuration and General Appearance */
+
+trix-toolbar {
+  .trix-button--icon {
+    @apply text-primary;
+    @apply bg-gray-100;
+  }
+
+  @apply py-2 px-2 rounded-sm rounded-b-none;
+}
+
+/* Editor */
+
+trix-editor {
+  @apply rounded shadow-sm;
+  @apply w-full overflow-x-auto overflow-y-scroll;
+  max-height: 500px;
+
+  code {
+    @apply dark:bg-gray-700 bg-gray-200;
+    @apply py-0.5 px-1 rounded-sm;
+  }
+
+  pre {
+    @apply border border-tertiary bg-tertiary;
+    @apply p-4 my-2 rounded;
+  }
+
+  figure {
+    all: initial;
+    line-height: 0;
+    color: inherit;
+    font-family: inherit;
+
+    .mention {
+      @apply text-white no-underline;
+      @apply inline-flex space-x-1 p-0.5 items-center rounded;
+      @apply bg-blue-600 hover:bg-blue-500;
+      @apply border border-blue-600 hover:border-blue-600;
+
+      & + figcaption, & .attachment__caption {
+        line-height: 0;
+        @apply hidden;
+      }
+
+      img {
+        @apply w-4 h-4 rounded-full border border-tertiary p-0 m-0;
+        line-height: 0;
+      }
+
+      p {
+        @apply p-0 m-0;
+        line-height: 0;
+      }
+    }
+  }
+
+  .attachment__caption-editor {
+    height: 20px !important;
+  }
+
+  /* file attachment previews */
+  .attachment-gallery {
+    @apply grid grid-cols-4 gap-3;
+
+    [data-trix-cursor-target] { display: none !important; }
+
+    figcaption.attachment__caption { @apply text-xs; }
+
+    .attachment--preview {
+      @apply border border-gray-50;
+      img { @apply rounded-md shadow; }
+    }
+  }
+}
+
+/* Content Viewer */
+
+.trix-content {
+  figure {
+    &.attachment.attachment--file {
+      @apply py-2 w-full border-none;
+    }
+  }
+
+  code {
+    @apply rounded bg-tertiary text-primary p-0.5 font-mono font-thin text-sm;
+  }
+
+  .tooltip {
+    @apply relative py-1 rounded-sm w-7 h-5 inline-block;
+
+    .tooltip-text {
+      @apply absolute;
+      @apply text-center font-mono text-sm;
+      @apply p-1 right-0 rounded-l rounded-tr;
+      visibility: hidden;
+      bottom: 90%;
+      margin-left: -60px;
+      z-index: 1;
+    }
+
+    /* Show the tooltip text when you mouse over the tooltip container */
+    &:hover {
+      .tooltip-text {
+        visibility: visible;
+      }
+    }
+  }
+
+  /* @mentions */
+  action-text-attachment {
+    all: initial;
+    font-family: inherit;
+
+    p, a, div, img {
+      line-height: 0;
+      padding: 0;
+      margin: 0;
+    }
+
+    .mention {
+      @apply text-white no-underline;
+      @apply inline-flex space-x-1 p-0.5 items-center rounded;
+      @apply bg-blue-600 hover:bg-blue-500;
+      @apply border border-blue-600 hover:border-blue-600;
+
+      img {
+        @apply w-4 h-4 rounded-full border border-tertiary;
+      }
+    }
+  }
+
+  /* file attachment previews */
+  .attachment-gallery {
+    all: initial;
+    color: inherit;
+    * {
+      all: initial;
+      color: inherit;
+      font-family: inherit;
+    }
+
+    @apply grid gap-4 grid-cols-3 py-8 m-0;
+
+    .attachment {
+      @apply border border-gray-50;
+
+      img {
+        @apply w-full h-auto rounded-md;
+        @apply hover:scale-105 transform transition shadow;
+      }
+    }
+  }
+
+  figure.attachment {
+    img {
+      @apply border border-tertiary rounded-md shadow object-cover;
+    }
+  }
+
+  .attachment--preview {
+    img { @apply w-full h-full !important; }
+  }
+}
+
+trix-editor, .trix-content {
+  /* Media: Audio and Video */
+  .plyr {
+    @apply rounded-md;
+  }
+
+  .attachment {
+    &--mp3, &--mp4 {
+      img { @apply hidden; }
+      .attachment__caption {
+        @apply bg-inverted text-inverted border border-primary rounded p-1.5;
+      }
+    }
+  }
+}

data/app/assets/build/css/index.css

@@ -0,0 +1,19 @@
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
+
+/*! purgecss start ignore */
+@import "./components/_themes.scss";
+@import "./components/_tribute.scss";
+
+@import "./components/trix/_clipboard.scss";
+@import "./components/trix/_trix.scss";
+
+@import "./components/_player.scss";
+@import "./components/_pagination.scss";
+@import "./components/_forms.scss";
+@import "./components/_colors.scss";
+@import "./components/_tags.scss";
+
+@import "./components/plyr.css";
+/*! purgecss end ignore */

data/app/assets/build/js/application.js

@@ -0,0 +1,2 @@
+import "@rails/actiontext"
+import "./controllers"

data/app/assets/build/js/controllers/accordion_controller.js

@@ -0,0 +1,21 @@
+import { Controller } from '@hotwired/stimulus'
+
+// Connects to data-controller="accordion"
+export default class extends Controller {
+  static targets = []
+  
+  toggle(event) {
+    let accordion = event.currentTarget.parentNode
+    let body = accordion.querySelectorAll('[data-role=description]')[0]
+    let icons = accordion.querySelectorAll('[data-role=icon]')
+
+    // Toggle body
+    body.classList.toggle('hidden')
+
+    // Toggle Icon
+    icons.forEach(icon => icon.classList.toggle('hidden'))
+
+    // Highlight
+    accordion.classList.toggle('border-l-2')
+  }
+}

data/app/assets/build/js/controllers/dynamic_select_controller.js

@@ -0,0 +1,22 @@
+import { Controller } from "@hotwired/stimulus"
+import { get as request } from "@rails/request.js"
+
+// Connects to data-controller="dynamic-select"
+export default class extends Controller {
+    static targets = ['select']
+
+    static values = {
+        url: String,
+        param: String
+    }
+
+    change(event) {
+        let params = new URLSearchParams()
+        params.append(this.paramValue, event.target.selectedOptions[0].value)
+        params.append('target', this.selectTarget.id)
+
+        request(`${this.urlValue}?${params}`, {
+            responseKind: 'turbo-stream'
+        })
+    }
+}

data/app/assets/build/js/controllers/index.js

@@ -0,0 +1,33 @@
+import { Application } from "@hotwired/stimulus"
+window.Stimulus = Application.start()
+
+// Application
+import AccordionController from "./accordion_controller"
+import DynamicSelectController from "./dynamic_select_controller"
+import OfflineController from "./offline_controller"
+import ReactiveTextController from "./reactive_text_controller"
+import TextCounterController from "./text_counter_controller"
+import ThemeController from "./theme_controller"
+
+// Trix Text Editor (ActionText)
+import TrixAttachmentBlockerController from "./trix_attachment_blocker_controller"
+import TrixAutocompleteController from "./trix_autocomplete_controller"
+import TrixBlockcodeController from "./trix_blockcode_controller"
+import TrixClipboardController from "./trix_clipboard_controller"
+import TrixColorController from "./trix_color_controller"
+import TrixHighlightController from "./trix_highlight_controller"
+
+Stimulus.register("accordion", AccordionController)
+Stimulus.register("dynamic-select", DynamicSelectController)
+Stimulus.register("offline", OfflineController)
+Stimulus.register("reactive-text", ReactiveTextController)
+Stimulus.register("text-counter", TextCounterController)
+Stimulus.register("theme", ThemeController)
+
+// Trix configuration and behavior
+Stimulus.register("trix-attachment-blocker", TrixAttachmentBlockerController)
+Stimulus.register("trix-autocomplete", TrixAutocompleteController)
+Stimulus.register("trix-blockcode", TrixBlockcodeController)
+Stimulus.register("trix-clipboard", TrixClipboardController)
+Stimulus.register("trix-color", TrixColorController)
+Stimulus.register("trix-highlight", TrixHighlightController)

data/app/assets/build/js/controllers/offline_controller.js

@@ -0,0 +1,19 @@
+import { Controller } from '@hotwired/stimulus'
+
+// Connects to data-controller="offline"
+export default class extends Controller {
+  static targets = ['indicator']
+  
+  connect() {
+    // This forces an offline message even if the browser does not fire an event.
+    // Like when the page is loaded from cache, for example.
+    this.setNetworkStatus()
+
+    window.addEventListener('offline', () => this.setNetworkStatus())
+    window.addEventListener('online', () => this.setNetworkStatus())
+  }
+
+  setNetworkStatus() {
+    this.indicatorTarget.classList.toggle('hidden', navigator.onLine)
+  }
+}

data/app/assets/build/js/controllers/reactive_text_controller.js

@@ -0,0 +1,15 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="reactive-text"
+export default class extends Controller {
+    static targets = ["source", "output"]
+
+    connect() {
+        this.sourceTarget.addEventListener('input', this.sync.bind(this))
+        this.outputTargets.forEach(t => t.textContent = this.sourceTarget.value)
+    }
+
+    sync(event) {
+        this.outputTargets.forEach(t => t.textContent = event.target.value)
+    }
+}

data/app/assets/build/js/controllers/text_counter_controller.js

@@ -0,0 +1,38 @@
+import {Controller} from "@hotwired/stimulus";
+
+// Connects to data-controller="text-counter"
+export default class extends Controller {
+    static targets = ["source", "output"]
+    static classes = ["error"]
+    static values = {
+        limit: Number,
+        wordMode: Boolean
+    }
+
+    connect() {
+        this.sourceTarget.addEventListener('input', this.sync.bind(this))
+        this.sync()
+    }
+
+    _contentLength(content, wordMode) {
+        if (wordMode) content = content.split(" ")
+
+        if (typeof content === "object" && content.length === 1 && content[0] === "")
+            return 0
+
+        return content.length
+    }
+
+    sync(_) {
+        this.outputTargets.forEach(t => {
+            let length = this._contentLength(this.sourceTarget.value, this.wordModeValue)
+            t.textContent = `${length} ${this.wordModeValue ? "words" : "characters"}`
+
+            if (this.limitValue)
+                if (length > this.limitValue)
+                    t.classList.add(...this.errorClasses)
+                else
+                    t.classList.remove(...this.errorClasses)
+        })
+    }
+}

data/app/assets/build/js/controllers/theme_controller.js

@@ -0,0 +1,36 @@
+import {Controller} from '@hotwired/stimulus'
+
+export default class extends Controller {
+    static targets = ["theme", "toggle"]
+
+    get shouldEnable() {
+        if (!this['hasToggleTarget']) {
+            console.debug('No toggle component found for theme controller');
+            return false;
+        }
+
+        return true;
+    }
+
+    connect() {
+        this.loadTheme();
+
+        if (!this.shouldEnable) return;
+
+        this.theme = localStorage.theme;
+        this['themeTarget'].classList = [this.theme];
+    }
+
+    toggleTheme(event) {
+        this.theme = event.target.value;
+        localStorage.theme = this.theme;
+        this['themeTarget'].classList = [this.theme];
+    }
+
+    loadTheme() {
+        this.theme = localStorage.theme;
+        this['themeTarget'].classList = [this.theme];
+
+        if (this['hasToggleTarget']) this['toggleTarget'].value = this.theme;
+    }
+}

data/app/assets/build/js/controllers/trix_attachment_blocker_controller.js

@@ -0,0 +1,15 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="trix-attachment-blocker"
+export default class extends Controller {
+  static targets = []
+
+  connect() {
+    console.log("trix-attachment-blocker")
+
+    window.addEventListener('trix-file-accept', (event) => {
+      event.preventDefault()
+      alert("File attachments are not supported at this time.")
+    })
+  }
+}

data/app/assets/build/js/controllers/trix_autocomplete_controller.js

@@ -0,0 +1,86 @@
+import { Controller } from "@hotwired/stimulus"
+import Tribute from "tributejs"
+import Trix from "trix"
+
+// Connects to data-controller="trix-autocomplete"
+export default class extends Controller {
+    static values = {
+        url: String,
+        searchKey: String,
+        mode: String,
+        trigger: String,
+        auto: Boolean
+    }
+
+    connect() {
+        console.debug("trix-autocomplete")
+
+        if (!this.searchKeyValue)
+            this.searchKeyValue = 'query'
+
+        if (!this.modeValue)
+            this.modeValue = this.element.editor ? 'trix' : 'input'
+
+        if (!this.urlValue) {
+            console.debug("Autocomplete needs both URL value (i.e. 'https://autocomplete.com')")
+            return this.disconnect()
+        }
+
+        this.initializeTribute()
+        this.listen()
+    }
+
+    disconnect() {
+        this.tribute.detach(this.element)
+    }
+
+    initializeTribute() {
+        this.tribute = new Tribute({
+            trigger: this.triggerValue || '@',
+            allowSpaces: true,
+            lookup: "name",
+            fillAttr: this.modeValue === 'trix' ? 'value' : 'name',
+            autocompleteMode: this.autoValue,
+            replaceTextSuffix: ', ',
+            values: this._fetch.bind(this)
+        })
+        this.tribute.attach((this.element))
+        this.tribute.range.pasteHtml = this._pasteHTML.bind(this)
+    }
+
+    listen() {
+        this.element.addEventListener("tribute-replaced", (event) => {
+            let completion = event.detail.item.original
+
+            if (this.modeValue === 'trix')
+                this._insertTrixAttachment(completion)
+        })
+    }
+
+    _fetch(value, callback) {
+        let params = new URLSearchParams()
+        params.append(this.searchKeyValue, value)
+
+        fetch(`${this.urlValue}?${params}`)
+            .then(response => response.json())
+            .then(data => callback(data))
+            .catch(callback([]))
+    }
+
+    _insertTrixAttachment(completion) {
+        let attachment = new Trix.Attachment({
+            sgid: completion.sgid,
+            content: completion.content
+        })
+        this.element.editor.insertAttachment(attachment)
+        this.element.editor.insertString("")
+    }
+
+    _pasteHTML(_, start, end) {
+        let range = this.element.editor.getSelectedRange()
+        let position = range[0]
+        let length = end - start
+        this.element.editor.setSelectedRange([position - length, position])
+        this.element.editor.deleteInDirection('backward')
+    }
+}

data/app/assets/build/js/controllers/trix_blockcode_controller.js

@@ -0,0 +1,41 @@
+import { Controller } from "@hotwired/stimulus"
+import Trix from "trix"
+
+// Connects to data-controller="trix-blockcode"
+export default class extends Controller {
+	connect() {
+		Trix.config.textAttributes.inlineCode = {
+		  tagName: "code",
+		  inheritable: true
+		}
+
+		window.addEventListener("trix-initialize", event => {
+		  const element = event.target
+		  const { toolbarElement, editor } = element
+
+		  const blockCodeButton = toolbarElement.querySelector("[data-trix-attribute=code]")
+		  const inlineCodeButton = blockCodeButton.cloneNode(true)
+
+		  inlineCodeButton.hidden = true
+		  inlineCodeButton.dataset.trixAttribute = "inlineCode"
+		  blockCodeButton.insertAdjacentElement("afterend", inlineCodeButton)
+
+		  element.addEventListener("trix-selection-change", _ => {
+		    const type = getCodeFormattingType()
+		    blockCodeButton.hidden = type == "inline"
+		    inlineCodeButton.hidden = type == "block"
+		  })
+
+		  const getCodeFormattingType = () => {
+		    if (editor.attributeIsActive("code")) return "block"
+		    if (editor.attributeIsActive("inlineCode")) return "inline"
+
+		    const range = editor.getSelectedRange()
+		    if (range[0] == range[1]) return "block"
+
+		    const text = editor.getSelectedDocument().toString().trim()
+		    return /\n/.test(text) ? "block" : "inline"
+		  }
+		})
+	}
+}

data/app/assets/build/js/controllers/trix_clipboard_controller.js

@@ -0,0 +1,50 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="trix-clipboard"
+export default class extends Controller {
+    static targets = ['code']
+
+    get defaults() {
+        return {
+            actionElements: ['BUTTON'],
+            codeElements: ['PRE'],
+            codeClasses: ['hljs']
+        }
+    }
+
+    get trix() {
+        return this.element.children[0];
+    }
+
+    connect() {
+        if (document.queryCommandSupported("copy")) {
+            this.element.classList.add("clipboard--supported")
+
+            this.element.addEventListener('click', (event) => {
+                const {target} = event
+
+                if (this._isActionTarget(target)) {
+                    const code = this._getCodeSibling(target)
+                    if (code) this.copy(code)
+                }
+            })
+        }
+    }
+
+    _isActionTarget(element) {
+        return this.defaults.actionElements.includes(element.tagName)
+    }
+
+    _getCodeSibling(element) {
+        const snippet = element.nextSibling
+        const isCode = this.defaults.codeElements.includes(snippet.tagName)
+        const isHljs = snippet.classList.contains(this.defaults.codeClasses)
+
+        return (isCode && isHljs) ? snippet.innerText : false
+    }
+
+    copy(code) {
+        navigator.clipboard.writeText(code)
+            .then(() => { console.log('Copied code snippet!') })
+    }
+}

data/app/assets/build/js/controllers/trix_color_controller.js

@@ -0,0 +1,49 @@
+import {Controller} from '@hotwired/stimulus'
+import { ntc as nameThatColor } from '@cosmicice/namethatcolor'
+
+// Connects to data-controller="trix-color"
+export default class extends Controller {
+    get trix() {
+        return this.element.children[0]
+    }
+
+    get colorTest() {
+        return /color#[0-9a-f]{3,6}/gi
+    }
+
+    connect() {
+        let content = this.trix.innerHTML
+        this.trix.innerHTML = content.replace(this.colorTest, this._color)
+    }
+
+    _color(value, position, offset) {
+        // Drop the color prefix
+        const backgroundColor = value.replace('color', '')
+        let c = backgroundColor.replace('#', '')
+
+        if (c.length === 3) {
+            // Support shorthand notation. i.e #c0f
+            // c0f => cc00ff;
+            c = `${c[0]}${c[0]}${c[1]}${c[1]}${c[2]}${c[2]}`
+        }
+
+        // YIQ color contrast calculation:
+        // https://24ways.org/2010/calculating-color-contrast
+        // https://gorails.com/episodes/contrasting-colors-with-yiq
+        const r = parseInt(c.substr(0,2),16)
+        const g = parseInt(c.substr(2,2),16)
+        const b = parseInt(c.substr(4,2),16)
+        const yiq = ((r*299) + (g*587) + (b*114)) / 1000
+        const foregroundColor = (yiq >= 128) ? 'black' : 'white'
+
+        const colorName = nameThatColor.name(backgroundColor).name
+
+        return `
+    <span class="tooltip border" style="background: ${backgroundColor} !important;">
+        <span sr-only="${colorName}" class="tooltip-text" style="background: ${backgroundColor} !important; color: ${foregroundColor} !important;">
+            ${backgroundColor} (${colorName})
+        </span>
+    </span>
+    `
+    }
+}