polivalente 0.6.2 → 0.7.0

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

@@ -0,0 +1,55 @@
+import {Controller} from "@hotwired/stimulus"
+import highlightJs from 'highlight.js'
+
+
+// Connects to data-controller="trix-highlight"
+export default class extends Controller {
+	connect() {
+		console.log("trix-highlight")
+
+		highlightJs.configure({
+		    languages: [
+		        'applescript',
+		        'bash',
+		        'css',
+		        'erb',
+		        'html',
+		        'javascript',
+		        'php',
+		        'python',
+		        'ruby',
+		        'swift',
+		        'typescript',
+		    ]
+		})
+
+		highlightJs.highlightAll()
+
+		const formatBlocks = () => {
+		    document.querySelectorAll('pre')
+		        .forEach((block) => highlightJs.highlightElement(block))
+		}
+
+		const createClipboardCopyButton = () => {
+		    document.querySelectorAll('article')
+		        .forEach((article) => {
+		            article.querySelectorAll('pre')
+		                .forEach((block) => {
+		                    if (block.previousSibling.tagName === 'BUTTON') return;
+
+		                    const sample = document.createElement('div')
+		                    sample.classList.add('code-sample', 'my-3')
+		                    sample.insertAdjacentHTML('afterbegin', '<button class="copy z-4"></button>')
+
+		                    block.replaceWith(sample)
+
+		                    sample.insertAdjacentElement('beforeend', block)
+		                })
+		        })
+		}
+
+		// 
+		formatBlocks()
+		createClipboardCopyButton()
+	}
+}

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

@@ -0,0 +1,86 @@
+import {Controller} from "@hotwired/stimulus"
+import Plyr from "plyr"
+import Trix from "trix"
+
+// Connects to data-controller="trix-plyr"
+export default class extends Controller {
+    static targets = ['editor']
+
+    get validContent() {
+        return ['audio', 'video']
+    }
+
+    get options() {
+        return {
+            autopause: true,
+            controls: [
+                'play-large',
+                'play',
+                'progress',
+                'current-time',
+                'mute',
+                'volume',
+                'captions',
+                'settings',
+                'pip',
+                'airplay',
+                'fullscreen'
+            ],
+            settings: ['captions', 'quality', 'speed', 'loop'],
+            captions: {active: true, language: 'auto'},
+            fullscreen: {enabled: true, fallback: true, iosNative: false, container: null},
+        }
+    }
+
+    get container() {
+        return this['hasEditorTarget']
+            ? this['editorTarget']
+            : document.querySelector('.trix-content')
+    }
+
+    connect() {
+        let isEditor = !!(this.container.attributes.contentEditable)
+
+        // if (isEditor)
+        //     this.parsePlayerInEditor()
+        // else
+        //     this.createPlayers()
+    }
+
+    createPlayers() {
+        window.players = Array
+            .from(document.querySelectorAll('audio, video'))
+            .map(player => new Plyr(player, this.options))
+    }
+
+    parsePlayerInEditor() {
+        window.attachments = []
+        window.originalAttachments = []
+
+        this.container.editor
+            .getDocument()
+            .getAttachments()
+            .filter(attachment => this.validContent.includes(attachment.getContentType().split('/')[0]))
+            .forEach(attachment => {
+                let range = this.container.editor.getDocument().getRangeOfAttachment(attachment)
+                let src = attachment.getAttributes().url
+                let tag = attachment.getContentType().split('/')[0]
+
+                let content = `<${tag} src="${src}" controls="true"></${tag}>`
+
+                // Add Plyr attachment for preview purposes only
+                this.container.editor.setSelectedRange([range[0] + 1, range[1] + 1])
+
+                let newAttachment = new Trix.Attachment({
+                    content,
+                    contentType: 'plyr',
+                    serialize: false,
+                    trixSerialize: false
+                })
+                this.container.editor.insertAttachment(newAttachment)
+
+                // window.attachments.push(newAttachment)
+                // window.originalAttachments.push(attachment)
+            })
+    }
+}

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

@@ -0,0 +1,48 @@
+import {Controller} from "@hotwired/stimulus"
+import Trix from "trix"
+
+const {lang} = Trix.config;
+
+// Connects to data-controller="trix-toolbar"
+export default class extends Controller {
+	connect() {
+		console.log("trix-toolbar")
+
+		// /* What the newly created button does */
+		// Trix.config.textAttributes.red = {
+		//     style: { color: "red" },
+		//     parser: (element) => element.style.color === "red",
+		//     inheritable: true
+		// }
+
+		// /* Insert the button visual in the default toolbar */
+		// addEventListener("trix-initialize", function(event) {
+		//     var buttonHTML = '<button type="button" class="trix-button" data-trix-attribute="red">RED</button>'
+
+		//     event.target.toolbarElement.
+		//     	querySelector(".trix-button-group").
+		//     	insertAdjacentHTML("beforeend", buttonHTML)
+		// })
+
+		// ===============
+
+		// Grab a reference to the toolbar(s) on the page.
+        const toolbar = this.element.previousSibling
+
+        // HTML for our buttons
+        const h2ButtonHTML = '<button type="button" class="trix-button" data-trix-attribute="heading" title="Subheading">H2</button>'
+        const h3ButtonHTML = '<button type="button" class="trix-button" data-trix-attribute="subHeading" title="Subheading">H3</button>'
+
+        // Only apply event listeners once to the toolbars
+        addEventListener("trix-initialize", (event) => {
+            const sibling1 = toolbar.querySelector(".trix-button--icon-increase-nesting-level")
+            sibling1.insertAdjacentHTML("afterend", h2ButtonHTML)
+            const sibling2 = toolbar.querySelector("[data-trix-attribute='heading']")
+            sibling2.insertAdjacentHTML("afterend", h3ButtonHTML)
+        }/*, {once: true}*/)
+
+        console.log("trix-toolbar-post")
+	}
+
+	disconnect () {}
+}

data/app/assets/config/polivalente_manifest.js

@@ -1 +1,2 @@
 //= link_directory ../stylesheets/polivalente .css
+//= link_directory ../javascripts .js