From 3508223ca0f554fbba4c2ee07579d3169a98fee1 Mon Sep 17 00:00:00 2001 From: void Date: Tue, 3 Nov 2020 18:16:59 -0300 Subject: [PATCH 01/38] agregar editor --- app/assets/javascripts/01-types.js | 182 +++++ app/assets/javascripts/02-editor.js | 422 +++++++++++ app/assets/javascripts/activestorage.js | 942 ++++++++++++++++++++++++ app/assets/stylesheets/editor.scss | 7 + app/views/application/markdown.haml | 111 +-- 5 files changed, 1591 insertions(+), 73 deletions(-) create mode 100644 app/assets/javascripts/01-types.js create mode 100644 app/assets/javascripts/02-editor.js create mode 100644 app/assets/javascripts/activestorage.js create mode 100644 app/assets/stylesheets/editor.scss diff --git a/app/assets/javascripts/01-types.js b/app/assets/javascripts/01-types.js new file mode 100644 index 0000000..45947f5 --- /dev/null +++ b/app/assets/javascripts/01-types.js @@ -0,0 +1,182 @@ +// TODO: minimizar complejidad utilizando selectores css/querySelector + +const marks = { + bold: { + checkFn: el => el.tagName === "STRONG", + createFn: () => document.createElement("STRONG"), + }, + italic: { + checkFn: el => el.tagName === "EM", + createFn: () => document.createElement("EM"), + }, + deleted: { + checkFn: el => el.tagName === "DEL", + createFn: () => document.createElement("DEL"), + }, + underline: { + checkFn: el => el.tagName === "U", + createFn: () => document.createElement("U"), + }, + mark: { + checkFn: el => el.tagName === "MARK", + createFn: () => document.createElement("MARK"), + }, +} + +const tagNameSetFn = tagName => el => { + const newEl = document.createElement(tagName) + moveChildren(el, newEl, null) + el.parentNode.insertBefore(newEl, el) + el.parentNode.removeChild(el) + window.getSelection().collapse(newEl, 0) +} + +const blocks = { + p: { + noButton: true, + checkFn: el => el.tagName == "P", + setFn: tagNameSetFn("P"), + }, + h1: { + checkFn: el => el.tagName == "H1", + setFn: tagNameSetFn("H1"), + }, + h2: { + checkFn: el => el.tagName == "H2", + setFn: tagNameSetFn("H2"), + }, + h3: { + checkFn: el => el.tagName == "H3", + setFn: tagNameSetFn("H3"), + }, + h4: { + checkFn: el => el.tagName == "H4", + setFn: tagNameSetFn("H4"), + }, + h5: { + checkFn: el => el.tagName == "H5", + setFn: tagNameSetFn("H5"), + }, + h6: { + checkFn: el => el.tagName == "H6", + setFn: tagNameSetFn("H6"), + }, + ul: { + checkFn: el => el.tagName == "UL", + setFn: tagNameSetFn("UL"), + }, + ol: { + checkFn: el => el.tagName == "OL", + setFn: tagNameSetFn("OL"), + }, + img: { + checkFn: el => el.tagName == "IMG", + createFn: editorEl => { + const imgEl = document.createElement("IMG") + imgEl.src = "https://radio.sutty.nl/public/placeholder_992x992.png" + imgEl.alt = "Un hermoso álbum" + return imgEl + }, + }, +} + +const divWithStyleCreateFn = styleFn => () => { + const el = document.createElement("DIV") + styleFn(el) + return el +} + +const parentBlocks = { + left: { + checkFn: el => el.tagName === "DIV" && el.dataset.align === "left", + createFn: divWithStyleCreateFn(el => el.dataset.align = "left"), + }, + center: { + checkFn: el => el.tagName === "DIV" && el.dataset.align === "center", + createFn: divWithStyleCreateFn(el => el.dataset.align = "center"), + }, + right: { + checkFn: el => el.tagName === "DIV" && el.dataset.align === "right", + createFn: divWithStyleCreateFn(el => el.dataset.align = "right"), + }, +} + +// https://stackoverflow.com/a/3627747 +// TODO: cambiar por una solución más copada +function rgb2hex(rgb) { + rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/); + function hex(x) { + return ("0" + parseInt(x).toString(16)).slice(-2); + } + return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]); +} + +// Encuentra lx primer hijx que esté en la selección que cumpla con checkFn +const findRecursiveChild = (checkFn, node) => { + if (checkFn(node) && window.getSelection().containsNode(node)) return node + for (const child of node.childNodes) { + const result = findRecursiveChild(checkFn, child) + if (result) return result + } +} + +const getSelected = contentEl => contentEl.querySelector(".selected") + +const typesWithProperties = { + mark: { + checkFn: marks.mark.checkFn, + updateInput (el, editorEl) { + const markColorInputEl = editorEl.querySelector("#mark-color") + markColorInputEl.disabled = false + markColorInputEl.value = el.style.backgroundColor ? rgb2hex(el.style.backgroundColor) : "#f206f9" + }, + disableInput (editorEl) { + const markColorInputEl = editorEl.querySelector("#mark-color") + markColorInputEl.disabled = true + markColorInputEl.value = "#000000" + }, + setupInput (editorEl, contentEl) { + const markColorInputEl = editorEl.querySelector("#mark-color") + markColorInputEl.addEventListener("change", event => { + const markEl = findRecursiveChild(marks.mark.checkFn, contentEl) + if (markEl) markEl.style.backgroundColor = markColorInputEl.value + }, false) + }, + }, + img: { + checkFn: blocks.img.checkFn, + updateInput (el, editorEl) { + const imgSrcEl = editorEl.querySelector("#img-src") + imgSrcEl.disabled = false + imgSrcEl.value = el.src + + const imgAltEl = editorEl.querySelector("#img-alt") + imgAltEl.disabled = false + imgAltEl.value = el.alt + }, + disableInput (editorEl) { + const imgSrcEl = editorEl.querySelector("#img-src") + imgSrcEl.disabled = true + imgSrcEl.value = "" + + const imgAltEl = editorEl.querySelector("#img-alt") + imgAltEl.disabled = true + imgAltEl.value = "" + }, + setupInput (editorEl, contentEl) { + const imgSrcEl = editorEl.querySelector("#img-src") + imgSrcEl.addEventListener("input", event => { + // const imgEl = findRecursiveChild(blocks.img.checkFn, contentEl) + const imgEl = getSelected(contentEl) + if (imgEl) imgEl.src = imgSrcEl.value + }, false) + + const imgAltEl = editorEl.querySelector("#img-alt") + imgAltEl.addEventListener("input", event => { + // const imgEl = findRecursiveChild(blocks.img.checkFn, contentEl) + const imgEl = getSelected(contentEl) + if (imgEl) imgEl.alt = imgAltEl.value + }, false) + }, + }, +} diff --git a/app/assets/javascripts/02-editor.js b/app/assets/javascripts/02-editor.js new file mode 100644 index 0000000..2ad524b --- /dev/null +++ b/app/assets/javascripts/02-editor.js @@ -0,0 +1,422 @@ +const origin = "http://panel.sutty.local:3000" || location.origin + +function uploadFile (file) { + return new Promise((resolve, reject) => { + const upload = new ActiveStorage.DirectUpload( + file, + origin + '/rails/active_storage/direct_uploads', + ) + + upload.create((error, blob) => { + if (error) { + reject(error) + } else { + const url = `${origin}/rails/active_storage/blobs/${blob.signed_id}/${blob.filename}` + resolve(url) + } + }) + }) +} + +function moveChildren (from, to, toRef) { + while (from.firstChild) to.insertBefore(from.firstChild, toRef); +} + +function isDirectChild (node, supposedChild) { + for (const child of node.childNodes) { + if (child == supposedChild) return true + } +} + +function isChildSelection (sel, el) { + return ( + (el.contains(sel.anchorNode) || el.contains(sel.focusNode)) + && !(sel.anchorNode == el || sel.focusNode == el) + ) +} + +function getElementParent (node) { + let parentEl = node + while (parentEl.nodeType != Node.ELEMENT_NODE) parentEl = parentEl.parentElement + return parentEl +} + +function splitNode (node, range) { + const [left, right] = [ + { range: document.createRange(), node: node.cloneNode(false) }, + { range: document.createRange(), node: node.cloneNode(false) }, + ] + + left.range.setStartBefore(node.firstChild) + left.range.setEnd(range.startContainer, range.startOffset) + left.range.surroundContents(left.node) + + right.range.setStart(range.endContainer, range.endOffset) + right.range.setEndAfter(node.lastChild) + right.range.surroundContents(right.node) + + //left.node.appendChild(left.range.extractContents()) + //left.range.insertNode(left.node) + + //right.node.appendChild(right.range.extractContents()) + //right.range.insertNode(right.node) + + moveChildren(node, node.parentNode, node) + node.parentNode.removeChild(node) + + return [left, right] +} + +/* Configura un botón que hace una acción inline (ej: negrita). + * Parametros: + * * button: el botón + * * mark: un objeto que representa el tipo de acción (ver types.js) + * * contentEl: el elemento de contenido del editor. + */ +function setupMarkButton (button, mark, contentEl) { + button.addEventListener("click", event => { + event.preventDefault() + + const sel = window.getSelection() + if (!isChildSelection(sel, contentEl)) return + + let parentEl = getElementParent(sel.anchorNode) + //if (sel.anchorNode == parentEl) parentEl = parentEl.firstChild + const parentChildren = Array.from(parentEl.childNodes) + + const range = sel.getRangeAt(0) + + if (mark.checkFn(parentEl)) { + const [left, right] = splitNode(parentEl, range) + right.range.insertNode(range.extractContents()) + + const selectionRange = document.createRange() + selectionRange.setStartAfter(left.node) + selectionRange.setEndBefore(right.node) + sel.removeAllRanges() + sel.addRange(selectionRange) + } else { + for (const child of parentChildren) { + if (mark.checkFn(child) && sel.containsNode(child)) { + moveChildren(child, parentEl, child) + parentEl.removeChild(child) + // TODO: agregar a selección + return + } + } + + const tagEl = mark.createFn() + + try { + range.surroundContents(tagEl) + } catch (error) { + // TODO: mostrar error + return console.error("No puedo marcar cosas a través de distintos bloques!") + } + + for (const child of tagEl.childNodes) { + if (mark.checkFn(child)) { + moveChildren(child, tagEl, child) + tagEl.removeChild(child) + } + } + + range.insertNode(tagEl) + range.selectNode(tagEl) + } + }) +} + +/* Igual que `setupMarkButton` pero para bloques. */ +function setupBlockButton (button, block, contentEl, editorEl) { + button.addEventListener("click", event => { + event.preventDefault() + + const sel = window.getSelection() + // TODO: mostrar error + if ( + !contentEl.contains(sel.anchorNode) + || !contentEl.contains(sel.focusNode) + || sel.anchorNode == contentEl + || sel.focusNode == contentEl + ) return + + const range = sel.getRangeAt(0) + + let parentEl = sel.anchorNode + while (!isDirectChild(contentEl, parentEl)) parentEl = parentEl.parentElement + + if (block.setFn) { + if (block.checkFn(parentEl)) { + tagNameSetFn("P")(parentEl) + } else { + block.setFn(parentEl) + } + } else if (block.createFn) { + const newEl = block.createFn(editorEl) + parentEl.parentElement.insertBefore(newEl, parentEl.nextSibling) + } + }) +} + +/* Igual que `setupBlockButton` pero para bloques parientes. */ +function setupParentBlockButton (button, parentBlock, contentEl) { + button.addEventListener("click", event => { + event.preventDefault() + + const sel = window.getSelection() + if ( + !contentEl.contains(sel.anchorNode) + || !contentEl.contains(sel.focusNode) + || sel.anchorNode == contentEl + || sel.focusNode == contentEl + ) return + + const range = sel.getRangeAt(0) + + let parentEl = sel.anchorNode + while (!isDirectChild(contentEl, parentEl)) parentEl = parentEl.parentElement + + if (parentBlock.checkFn(parentEl)) { + moveChildren(parentEl, parentEl.parentElement, parentEl) + parentEl.parentElement.removeChild(parentEl) + } else if (elementIsParentBlock(parentEl)) { + const el = parentBlock.createFn() + moveChildren(parentEl, el, null) + parentEl.parentElement.insertBefore(el, parentEl) + parentEl.parentElement.removeChild(parentEl) + } else { + const el = parentBlock.createFn() + parentEl.parentElement.insertBefore(el, parentEl) + el.appendChild(parentEl) + } + }) +} + +const elementIsTypes = types => element => { + for (const type of Object.values(types)) { + if (type.checkFn(element)) return true + } + return false +} +const elementIsBlock = elementIsTypes(blocks) +const elementIsParentBlock = elementIsTypes(parentBlocks) + +function hasContent (element) { + if (element.firstElementChild) return true + for (const child of element.childNodes) { + if (child.nodeType === Node.TEXT_NODE && child.data.length > 0) return true + else if (child.hasChildNodes() && hasContent(child)) return true + } + // TODO: verificar que la imágen tiene contenido + if (element.tagName === "IMG") return true + return false +} + +/* Limpia el elemento de contenido del editor + * Por ahora: + * * Cambia el tag de los bloques no reconocidos (ver `elementIsBlock`) + * * Hace lo que hace cleanNode + */ +function cleanContent (contentEl) { + const sel = window.getSelection() + + cleanNode(contentEl) + + for (const child of contentEl.childNodes) { + if (child.tagName) { + if (elementIsParentBlock(child)) { + cleanContent(child) + } else if (!elementIsBlock(child)) { + child.tagName = "P" + } + } + } +} + +/* Arregla cosas en el elemento de contendo del editor + * Por ahora: + * * Crea un p y inserta la selección si no hay elementos + * * Wrappea el contenido de un UL o OL en un LI si no lo está + */ +function fixContent (contentEl) { + if (!contentEl.firstChild) { + const newEl = document.createElement("p") + contentEl.appendChild(newEl) + window.getSelection().collapse(newEl) + } + + for (const child of contentEl.childNodes) { + if (child.tagName) { + if (elementIsParentBlock(child)) { + fixContent(child) + } else if (child.tagName === "UL" || child.tagName === "OL") { + let notItems = [] + for (const item of child.childNodes) { + if (item.tagName !== "LI") notItems.push(item) + } + if (notItems.length) { + const item = document.createElement("li") + item.append(...notItems) + child.appendChild(item) + } + } + } + } +} + +/* Recursivamente "limpia" los nodos a partir del llamado. + * Por ahora: + * * Junta nodos de texto que están al lado + * * Junta nodos de la misma "mark" que están al lado + * * Borra elementos sin contenido (ver `hasContent`) y no están seleccionados + */ +function cleanNode (node) { + for (const child of node.childNodes) { + if (child.nodeType === Node.TEXT_NODE) { + if (child.nextSibling && child.nextSibling.nodeType === Node.TEXT_NODE) { + // Juntar nodos + child.data += child.nextSibling.data + child.parentNode.removeChild(child.nextSibling) + } + } else if (child.nodeType === Node.ELEMENT_NODE) { + if (!hasContent(child) && !window.getSelection().getRangeAt(0).intersectsNode(child)) + child.parentNode.removeChild(child) + + for (const mark of Object.values(marks)) { + if (mark.checkFn(child) && child.nextSibling && mark.checkFn(child.nextSibling)) { + moveChildren(child.nextSibling, child, null) + child.nextSibling.parentNode.removeChild(child.nextSibling) + } + } + } + cleanNode(child) + } +} + +function setupEditor (editorEl) { + const contentEl = editorEl.querySelector(".editor-content") + + contentEl.addEventListener("keydown", event => { + if (event.keyCode === 13) { // Enter + event.preventDefault() + const sel = window.getSelection() + + let parentEl = sel.anchorNode + if (parentEl == contentEl) { + const newEl = document.createElement("p") + contentEl.appendChild(newEl) + sel.collapse(newEl) + } else if (contentEl.contains(parentEl)) { + while ((parentEl.nodeType == Node.TEXT_NODE || !elementIsBlock(parentEl)) && parentEl != contentEl) + parentEl = parentEl.parentElement + + if (parentEl == contentEl) parentEl = parentEl.firstChild + + console.log(parentEl) + + let newEl + switch (parentEl.tagName) { + case "UL": + case "OL": + newEl = document.createElement("li") + + let itemEl = sel.anchorNode + while (itemEl.tagName !== "LI" && parentEl.contains(itemEl)) itemEl = itemEl.parentElement + + parentEl.insertBefore(newEl, itemEl && parentEl.contains(itemEl) && itemEl.nextSibling || null) + break + default: + newEl = document.createElement("p") + contentEl.insertBefore(newEl, parentEl.nextSibling || null) + } + + sel.collapse(newEl) + } + } else if (event.keyCode === 32) { // Espacio + event.preventDefault() + const sel = window.getSelection() + const range = sel.getRangeAt(0) + range.insertNode(document.createTextNode("\xa0")) + cleanContent(contentEl) + range.collapse() + } + }) + document.addEventListener("selectionchange", event => { + cleanContent(contentEl) + + const sel = window.getSelection() + const range = sel.getRangeAt(0) + + for (const [name, type] of Object.entries(typesWithProperties)) { + const result = findRecursiveChild(type.checkFn, range.commonAncestorContainer) + if (result) { + type.updateInput(result, editorEl) + result.classList.add("selected") + } else { + if (!contentEl.contains(range.commonAncestorContainer)) return + type.disableInput(editorEl) + for (const el of contentEl.querySelectorAll(".selected")) { + el.classList.remove("selected") + } + } + } + }) + + const htmlEl = editorEl.querySelector("textarea") + const observer = new MutationObserver((mutationList, observer) => { + cleanContent(contentEl) + htmlEl.value = contentEl.innerHTML + fixContent(contentEl) + }) + observer.observe(contentEl, { + childList: true, + attributes: true, + subtree: true, + characterData: true, + }) + + const editorBtn = id => editorEl.querySelector(`#${id}-button`) + + const tagNameSetFn = tagName => el => { + const newEl = document.createElement(tagName) + moveChildren(el, newEl, null) + el.parentNode.insertBefore(newEl, el) + el.parentNode.removeChild(el) + window.getSelection().collapse(newEl, 0) + } + + // == SETUP BUTTONS == + for (const [name, mark] of Object.entries(marks)) { + setupMarkButton(editorBtn(name), mark, contentEl) + } + + for (const [name, block] of Object.entries(blocks)) { + if (block.noButton) continue + setupBlockButton(editorBtn(name), block, contentEl, editorEl) + } + + for (const [name, parentBlock] of Object.entries(parentBlocks)) { + if (parentBlock.noButton) continue + setupParentBlockButton(editorBtn(name), parentBlock, contentEl) + } + + for (const [name, type] of Object.entries(typesWithProperties)) { + type.setupInput(editorEl, contentEl) + } + + cleanContent(contentEl) + htmlEl.value = contentEl.innerHTML +} + +// TODO: por ahora confiamos, quizás queremos filtrar estilos? +function stringifyAllowedStyle (element) { + return element.style.cssText +} + +document.addEventListener("DOMContentLoaded", () => { + for (const editorEl of document.querySelectorAll(".editor")) { + setupEditor(editorEl) + } +}) + diff --git a/app/assets/javascripts/activestorage.js b/app/assets/javascripts/activestorage.js new file mode 100644 index 0000000..6061fb9 --- /dev/null +++ b/app/assets/javascripts/activestorage.js @@ -0,0 +1,942 @@ +(function(global, factory) { + typeof exports === "object" && typeof module !== "undefined" ? factory(exports) : typeof define === "function" && define.amd ? define([ "exports" ], factory) : factory(global.ActiveStorage = {}); +})(this, function(exports) { + "use strict"; + function createCommonjsModule(fn, module) { + return module = { + exports: {} + }, fn(module, module.exports), module.exports; + } + var sparkMd5 = createCommonjsModule(function(module, exports) { + (function(factory) { + { + module.exports = factory(); + } + })(function(undefined) { + var hex_chr = [ "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f" ]; + function md5cycle(x, k) { + var a = x[0], b = x[1], c = x[2], d = x[3]; + a += (b & c | ~b & d) + k[0] - 680876936 | 0; + a = (a << 7 | a >>> 25) + b | 0; + d += (a & b | ~a & c) + k[1] - 389564586 | 0; + d = (d << 12 | d >>> 20) + a | 0; + c += (d & a | ~d & b) + k[2] + 606105819 | 0; + c = (c << 17 | c >>> 15) + d | 0; + b += (c & d | ~c & a) + k[3] - 1044525330 | 0; + b = (b << 22 | b >>> 10) + c | 0; + a += (b & c | ~b & d) + k[4] - 176418897 | 0; + a = (a << 7 | a >>> 25) + b | 0; + d += (a & b | ~a & c) + k[5] + 1200080426 | 0; + d = (d << 12 | d >>> 20) + a | 0; + c += (d & a | ~d & b) + k[6] - 1473231341 | 0; + c = (c << 17 | c >>> 15) + d | 0; + b += (c & d | ~c & a) + k[7] - 45705983 | 0; + b = (b << 22 | b >>> 10) + c | 0; + a += (b & c | ~b & d) + k[8] + 1770035416 | 0; + a = (a << 7 | a >>> 25) + b | 0; + d += (a & b | ~a & c) + k[9] - 1958414417 | 0; + d = (d << 12 | d >>> 20) + a | 0; + c += (d & a | ~d & b) + k[10] - 42063 | 0; + c = (c << 17 | c >>> 15) + d | 0; + b += (c & d | ~c & a) + k[11] - 1990404162 | 0; + b = (b << 22 | b >>> 10) + c | 0; + a += (b & c | ~b & d) + k[12] + 1804603682 | 0; + a = (a << 7 | a >>> 25) + b | 0; + d += (a & b | ~a & c) + k[13] - 40341101 | 0; + d = (d << 12 | d >>> 20) + a | 0; + c += (d & a | ~d & b) + k[14] - 1502002290 | 0; + c = (c << 17 | c >>> 15) + d | 0; + b += (c & d | ~c & a) + k[15] + 1236535329 | 0; + b = (b << 22 | b >>> 10) + c | 0; + a += (b & d | c & ~d) + k[1] - 165796510 | 0; + a = (a << 5 | a >>> 27) + b | 0; + d += (a & c | b & ~c) + k[6] - 1069501632 | 0; + d = (d << 9 | d >>> 23) + a | 0; + c += (d & b | a & ~b) + k[11] + 643717713 | 0; + c = (c << 14 | c >>> 18) + d | 0; + b += (c & a | d & ~a) + k[0] - 373897302 | 0; + b = (b << 20 | b >>> 12) + c | 0; + a += (b & d | c & ~d) + k[5] - 701558691 | 0; + a = (a << 5 | a >>> 27) + b | 0; + d += (a & c | b & ~c) + k[10] + 38016083 | 0; + d = (d << 9 | d >>> 23) + a | 0; + c += (d & b | a & ~b) + k[15] - 660478335 | 0; + c = (c << 14 | c >>> 18) + d | 0; + b += (c & a | d & ~a) + k[4] - 405537848 | 0; + b = (b << 20 | b >>> 12) + c | 0; + a += (b & d | c & ~d) + k[9] + 568446438 | 0; + a = (a << 5 | a >>> 27) + b | 0; + d += (a & c | b & ~c) + k[14] - 1019803690 | 0; + d = (d << 9 | d >>> 23) + a | 0; + c += (d & b | a & ~b) + k[3] - 187363961 | 0; + c = (c << 14 | c >>> 18) + d | 0; + b += (c & a | d & ~a) + k[8] + 1163531501 | 0; + b = (b << 20 | b >>> 12) + c | 0; + a += (b & d | c & ~d) + k[13] - 1444681467 | 0; + a = (a << 5 | a >>> 27) + b | 0; + d += (a & c | b & ~c) + k[2] - 51403784 | 0; + d = (d << 9 | d >>> 23) + a | 0; + c += (d & b | a & ~b) + k[7] + 1735328473 | 0; + c = (c << 14 | c >>> 18) + d | 0; + b += (c & a | d & ~a) + k[12] - 1926607734 | 0; + b = (b << 20 | b >>> 12) + c | 0; + a += (b ^ c ^ d) + k[5] - 378558 | 0; + a = (a << 4 | a >>> 28) + b | 0; + d += (a ^ b ^ c) + k[8] - 2022574463 | 0; + d = (d << 11 | d >>> 21) + a | 0; + c += (d ^ a ^ b) + k[11] + 1839030562 | 0; + c = (c << 16 | c >>> 16) + d | 0; + b += (c ^ d ^ a) + k[14] - 35309556 | 0; + b = (b << 23 | b >>> 9) + c | 0; + a += (b ^ c ^ d) + k[1] - 1530992060 | 0; + a = (a << 4 | a >>> 28) + b | 0; + d += (a ^ b ^ c) + k[4] + 1272893353 | 0; + d = (d << 11 | d >>> 21) + a | 0; + c += (d ^ a ^ b) + k[7] - 155497632 | 0; + c = (c << 16 | c >>> 16) + d | 0; + b += (c ^ d ^ a) + k[10] - 1094730640 | 0; + b = (b << 23 | b >>> 9) + c | 0; + a += (b ^ c ^ d) + k[13] + 681279174 | 0; + a = (a << 4 | a >>> 28) + b | 0; + d += (a ^ b ^ c) + k[0] - 358537222 | 0; + d = (d << 11 | d >>> 21) + a | 0; + c += (d ^ a ^ b) + k[3] - 722521979 | 0; + c = (c << 16 | c >>> 16) + d | 0; + b += (c ^ d ^ a) + k[6] + 76029189 | 0; + b = (b << 23 | b >>> 9) + c | 0; + a += (b ^ c ^ d) + k[9] - 640364487 | 0; + a = (a << 4 | a >>> 28) + b | 0; + d += (a ^ b ^ c) + k[12] - 421815835 | 0; + d = (d << 11 | d >>> 21) + a | 0; + c += (d ^ a ^ b) + k[15] + 530742520 | 0; + c = (c << 16 | c >>> 16) + d | 0; + b += (c ^ d ^ a) + k[2] - 995338651 | 0; + b = (b << 23 | b >>> 9) + c | 0; + a += (c ^ (b | ~d)) + k[0] - 198630844 | 0; + a = (a << 6 | a >>> 26) + b | 0; + d += (b ^ (a | ~c)) + k[7] + 1126891415 | 0; + d = (d << 10 | d >>> 22) + a | 0; + c += (a ^ (d | ~b)) + k[14] - 1416354905 | 0; + c = (c << 15 | c >>> 17) + d | 0; + b += (d ^ (c | ~a)) + k[5] - 57434055 | 0; + b = (b << 21 | b >>> 11) + c | 0; + a += (c ^ (b | ~d)) + k[12] + 1700485571 | 0; + a = (a << 6 | a >>> 26) + b | 0; + d += (b ^ (a | ~c)) + k[3] - 1894986606 | 0; + d = (d << 10 | d >>> 22) + a | 0; + c += (a ^ (d | ~b)) + k[10] - 1051523 | 0; + c = (c << 15 | c >>> 17) + d | 0; + b += (d ^ (c | ~a)) + k[1] - 2054922799 | 0; + b = (b << 21 | b >>> 11) + c | 0; + a += (c ^ (b | ~d)) + k[8] + 1873313359 | 0; + a = (a << 6 | a >>> 26) + b | 0; + d += (b ^ (a | ~c)) + k[15] - 30611744 | 0; + d = (d << 10 | d >>> 22) + a | 0; + c += (a ^ (d | ~b)) + k[6] - 1560198380 | 0; + c = (c << 15 | c >>> 17) + d | 0; + b += (d ^ (c | ~a)) + k[13] + 1309151649 | 0; + b = (b << 21 | b >>> 11) + c | 0; + a += (c ^ (b | ~d)) + k[4] - 145523070 | 0; + a = (a << 6 | a >>> 26) + b | 0; + d += (b ^ (a | ~c)) + k[11] - 1120210379 | 0; + d = (d << 10 | d >>> 22) + a | 0; + c += (a ^ (d | ~b)) + k[2] + 718787259 | 0; + c = (c << 15 | c >>> 17) + d | 0; + b += (d ^ (c | ~a)) + k[9] - 343485551 | 0; + b = (b << 21 | b >>> 11) + c | 0; + x[0] = a + x[0] | 0; + x[1] = b + x[1] | 0; + x[2] = c + x[2] | 0; + x[3] = d + x[3] | 0; + } + function md5blk(s) { + var md5blks = [], i; + for (i = 0; i < 64; i += 4) { + md5blks[i >> 2] = s.charCodeAt(i) + (s.charCodeAt(i + 1) << 8) + (s.charCodeAt(i + 2) << 16) + (s.charCodeAt(i + 3) << 24); + } + return md5blks; + } + function md5blk_array(a) { + var md5blks = [], i; + for (i = 0; i < 64; i += 4) { + md5blks[i >> 2] = a[i] + (a[i + 1] << 8) + (a[i + 2] << 16) + (a[i + 3] << 24); + } + return md5blks; + } + function md51(s) { + var n = s.length, state = [ 1732584193, -271733879, -1732584194, 271733878 ], i, length, tail, tmp, lo, hi; + for (i = 64; i <= n; i += 64) { + md5cycle(state, md5blk(s.substring(i - 64, i))); + } + s = s.substring(i - 64); + length = s.length; + tail = [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ]; + for (i = 0; i < length; i += 1) { + tail[i >> 2] |= s.charCodeAt(i) << (i % 4 << 3); + } + tail[i >> 2] |= 128 << (i % 4 << 3); + if (i > 55) { + md5cycle(state, tail); + for (i = 0; i < 16; i += 1) { + tail[i] = 0; + } + } + tmp = n * 8; + tmp = tmp.toString(16).match(/(.*?)(.{0,8})$/); + lo = parseInt(tmp[2], 16); + hi = parseInt(tmp[1], 16) || 0; + tail[14] = lo; + tail[15] = hi; + md5cycle(state, tail); + return state; + } + function md51_array(a) { + var n = a.length, state = [ 1732584193, -271733879, -1732584194, 271733878 ], i, length, tail, tmp, lo, hi; + for (i = 64; i <= n; i += 64) { + md5cycle(state, md5blk_array(a.subarray(i - 64, i))); + } + a = i - 64 < n ? a.subarray(i - 64) : new Uint8Array(0); + length = a.length; + tail = [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ]; + for (i = 0; i < length; i += 1) { + tail[i >> 2] |= a[i] << (i % 4 << 3); + } + tail[i >> 2] |= 128 << (i % 4 << 3); + if (i > 55) { + md5cycle(state, tail); + for (i = 0; i < 16; i += 1) { + tail[i] = 0; + } + } + tmp = n * 8; + tmp = tmp.toString(16).match(/(.*?)(.{0,8})$/); + lo = parseInt(tmp[2], 16); + hi = parseInt(tmp[1], 16) || 0; + tail[14] = lo; + tail[15] = hi; + md5cycle(state, tail); + return state; + } + function rhex(n) { + var s = "", j; + for (j = 0; j < 4; j += 1) { + s += hex_chr[n >> j * 8 + 4 & 15] + hex_chr[n >> j * 8 & 15]; + } + return s; + } + function hex(x) { + var i; + for (i = 0; i < x.length; i += 1) { + x[i] = rhex(x[i]); + } + return x.join(""); + } + if (hex(md51("hello")) !== "5d41402abc4b2a76b9719d911017c592") ; + if (typeof ArrayBuffer !== "undefined" && !ArrayBuffer.prototype.slice) { + (function() { + function clamp(val, length) { + val = val | 0 || 0; + if (val < 0) { + return Math.max(val + length, 0); + } + return Math.min(val, length); + } + ArrayBuffer.prototype.slice = function(from, to) { + var length = this.byteLength, begin = clamp(from, length), end = length, num, target, targetArray, sourceArray; + if (to !== undefined) { + end = clamp(to, length); + } + if (begin > end) { + return new ArrayBuffer(0); + } + num = end - begin; + target = new ArrayBuffer(num); + targetArray = new Uint8Array(target); + sourceArray = new Uint8Array(this, begin, num); + targetArray.set(sourceArray); + return target; + }; + })(); + } + function toUtf8(str) { + if (/[\u0080-\uFFFF]/.test(str)) { + str = unescape(encodeURIComponent(str)); + } + return str; + } + function utf8Str2ArrayBuffer(str, returnUInt8Array) { + var length = str.length, buff = new ArrayBuffer(length), arr = new Uint8Array(buff), i; + for (i = 0; i < length; i += 1) { + arr[i] = str.charCodeAt(i); + } + return returnUInt8Array ? arr : buff; + } + function arrayBuffer2Utf8Str(buff) { + return String.fromCharCode.apply(null, new Uint8Array(buff)); + } + function concatenateArrayBuffers(first, second, returnUInt8Array) { + var result = new Uint8Array(first.byteLength + second.byteLength); + result.set(new Uint8Array(first)); + result.set(new Uint8Array(second), first.byteLength); + return returnUInt8Array ? result : result.buffer; + } + function hexToBinaryString(hex) { + var bytes = [], length = hex.length, x; + for (x = 0; x < length - 1; x += 2) { + bytes.push(parseInt(hex.substr(x, 2), 16)); + } + return String.fromCharCode.apply(String, bytes); + } + function SparkMD5() { + this.reset(); + } + SparkMD5.prototype.append = function(str) { + this.appendBinary(toUtf8(str)); + return this; + }; + SparkMD5.prototype.appendBinary = function(contents) { + this._buff += contents; + this._length += contents.length; + var length = this._buff.length, i; + for (i = 64; i <= length; i += 64) { + md5cycle(this._hash, md5blk(this._buff.substring(i - 64, i))); + } + this._buff = this._buff.substring(i - 64); + return this; + }; + SparkMD5.prototype.end = function(raw) { + var buff = this._buff, length = buff.length, i, tail = [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ], ret; + for (i = 0; i < length; i += 1) { + tail[i >> 2] |= buff.charCodeAt(i) << (i % 4 << 3); + } + this._finish(tail, length); + ret = hex(this._hash); + if (raw) { + ret = hexToBinaryString(ret); + } + this.reset(); + return ret; + }; + SparkMD5.prototype.reset = function() { + this._buff = ""; + this._length = 0; + this._hash = [ 1732584193, -271733879, -1732584194, 271733878 ]; + return this; + }; + SparkMD5.prototype.getState = function() { + return { + buff: this._buff, + length: this._length, + hash: this._hash + }; + }; + SparkMD5.prototype.setState = function(state) { + this._buff = state.buff; + this._length = state.length; + this._hash = state.hash; + return this; + }; + SparkMD5.prototype.destroy = function() { + delete this._hash; + delete this._buff; + delete this._length; + }; + SparkMD5.prototype._finish = function(tail, length) { + var i = length, tmp, lo, hi; + tail[i >> 2] |= 128 << (i % 4 << 3); + if (i > 55) { + md5cycle(this._hash, tail); + for (i = 0; i < 16; i += 1) { + tail[i] = 0; + } + } + tmp = this._length * 8; + tmp = tmp.toString(16).match(/(.*?)(.{0,8})$/); + lo = parseInt(tmp[2], 16); + hi = parseInt(tmp[1], 16) || 0; + tail[14] = lo; + tail[15] = hi; + md5cycle(this._hash, tail); + }; + SparkMD5.hash = function(str, raw) { + return SparkMD5.hashBinary(toUtf8(str), raw); + }; + SparkMD5.hashBinary = function(content, raw) { + var hash = md51(content), ret = hex(hash); + return raw ? hexToBinaryString(ret) : ret; + }; + SparkMD5.ArrayBuffer = function() { + this.reset(); + }; + SparkMD5.ArrayBuffer.prototype.append = function(arr) { + var buff = concatenateArrayBuffers(this._buff.buffer, arr, true), length = buff.length, i; + this._length += arr.byteLength; + for (i = 64; i <= length; i += 64) { + md5cycle(this._hash, md5blk_array(buff.subarray(i - 64, i))); + } + this._buff = i - 64 < length ? new Uint8Array(buff.buffer.slice(i - 64)) : new Uint8Array(0); + return this; + }; + SparkMD5.ArrayBuffer.prototype.end = function(raw) { + var buff = this._buff, length = buff.length, tail = [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ], i, ret; + for (i = 0; i < length; i += 1) { + tail[i >> 2] |= buff[i] << (i % 4 << 3); + } + this._finish(tail, length); + ret = hex(this._hash); + if (raw) { + ret = hexToBinaryString(ret); + } + this.reset(); + return ret; + }; + SparkMD5.ArrayBuffer.prototype.reset = function() { + this._buff = new Uint8Array(0); + this._length = 0; + this._hash = [ 1732584193, -271733879, -1732584194, 271733878 ]; + return this; + }; + SparkMD5.ArrayBuffer.prototype.getState = function() { + var state = SparkMD5.prototype.getState.call(this); + state.buff = arrayBuffer2Utf8Str(state.buff); + return state; + }; + SparkMD5.ArrayBuffer.prototype.setState = function(state) { + state.buff = utf8Str2ArrayBuffer(state.buff, true); + return SparkMD5.prototype.setState.call(this, state); + }; + SparkMD5.ArrayBuffer.prototype.destroy = SparkMD5.prototype.destroy; + SparkMD5.ArrayBuffer.prototype._finish = SparkMD5.prototype._finish; + SparkMD5.ArrayBuffer.hash = function(arr, raw) { + var hash = md51_array(new Uint8Array(arr)), ret = hex(hash); + return raw ? hexToBinaryString(ret) : ret; + }; + return SparkMD5; + }); + }); + var classCallCheck = function(instance, Constructor) { + if (!(instance instanceof Constructor)) { + throw new TypeError("Cannot call a class as a function"); + } + }; + var createClass = function() { + function defineProperties(target, props) { + for (var i = 0; i < props.length; i++) { + var descriptor = props[i]; + descriptor.enumerable = descriptor.enumerable || false; + descriptor.configurable = true; + if ("value" in descriptor) descriptor.writable = true; + Object.defineProperty(target, descriptor.key, descriptor); + } + } + return function(Constructor, protoProps, staticProps) { + if (protoProps) defineProperties(Constructor.prototype, protoProps); + if (staticProps) defineProperties(Constructor, staticProps); + return Constructor; + }; + }(); + var fileSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice; + var FileChecksum = function() { + createClass(FileChecksum, null, [ { + key: "create", + value: function create(file, callback) { + var instance = new FileChecksum(file); + instance.create(callback); + } + } ]); + function FileChecksum(file) { + classCallCheck(this, FileChecksum); + this.file = file; + this.chunkSize = 2097152; + this.chunkCount = Math.ceil(this.file.size / this.chunkSize); + this.chunkIndex = 0; + } + createClass(FileChecksum, [ { + key: "create", + value: function create(callback) { + var _this = this; + this.callback = callback; + this.md5Buffer = new sparkMd5.ArrayBuffer(); + this.fileReader = new FileReader(); + this.fileReader.addEventListener("load", function(event) { + return _this.fileReaderDidLoad(event); + }); + this.fileReader.addEventListener("error", function(event) { + return _this.fileReaderDidError(event); + }); + this.readNextChunk(); + } + }, { + key: "fileReaderDidLoad", + value: function fileReaderDidLoad(event) { + this.md5Buffer.append(event.target.result); + if (!this.readNextChunk()) { + var binaryDigest = this.md5Buffer.end(true); + var base64digest = btoa(binaryDigest); + this.callback(null, base64digest); + } + } + }, { + key: "fileReaderDidError", + value: function fileReaderDidError(event) { + this.callback("Error reading " + this.file.name); + } + }, { + key: "readNextChunk", + value: function readNextChunk() { + if (this.chunkIndex < this.chunkCount || this.chunkIndex == 0 && this.chunkCount == 0) { + var start = this.chunkIndex * this.chunkSize; + var end = Math.min(start + this.chunkSize, this.file.size); + var bytes = fileSlice.call(this.file, start, end); + this.fileReader.readAsArrayBuffer(bytes); + this.chunkIndex++; + return true; + } else { + return false; + } + } + } ]); + return FileChecksum; + }(); + function getMetaValue(name) { + var element = findElement(document.head, 'meta[name="' + name + '"]'); + if (element) { + return element.getAttribute("content"); + } + } + function findElements(root, selector) { + if (typeof root == "string") { + selector = root; + root = document; + } + var elements = root.querySelectorAll(selector); + return toArray$1(elements); + } + function findElement(root, selector) { + if (typeof root == "string") { + selector = root; + root = document; + } + return root.querySelector(selector); + } + function dispatchEvent(element, type) { + var eventInit = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {}; + var disabled = element.disabled; + var bubbles = eventInit.bubbles, cancelable = eventInit.cancelable, detail = eventInit.detail; + var event = document.createEvent("Event"); + event.initEvent(type, bubbles || true, cancelable || true); + event.detail = detail || {}; + try { + element.disabled = false; + element.dispatchEvent(event); + } finally { + element.disabled = disabled; + } + return event; + } + function toArray$1(value) { + if (Array.isArray(value)) { + return value; + } else if (Array.from) { + return Array.from(value); + } else { + return [].slice.call(value); + } + } + var BlobRecord = function() { + function BlobRecord(file, checksum, url) { + var _this = this; + classCallCheck(this, BlobRecord); + this.file = file; + this.attributes = { + filename: file.name, + content_type: file.type || "application/octet-stream", + byte_size: file.size, + checksum: checksum + }; + this.xhr = new XMLHttpRequest(); + this.xhr.open("POST", url, true); + this.xhr.responseType = "json"; + this.xhr.setRequestHeader("Content-Type", "application/json"); + this.xhr.setRequestHeader("Accept", "application/json"); + this.xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest"); + var csrfToken = getMetaValue("csrf-token"); + if (csrfToken != undefined) { + this.xhr.setRequestHeader("X-CSRF-Token", csrfToken); + } + this.xhr.addEventListener("load", function(event) { + return _this.requestDidLoad(event); + }); + this.xhr.addEventListener("error", function(event) { + return _this.requestDidError(event); + }); + } + createClass(BlobRecord, [ { + key: "create", + value: function create(callback) { + this.callback = callback; + this.xhr.send(JSON.stringify({ + blob: this.attributes + })); + } + }, { + key: "requestDidLoad", + value: function requestDidLoad(event) { + if (this.status >= 200 && this.status < 300) { + var response = this.response; + var direct_upload = response.direct_upload; + delete response.direct_upload; + this.attributes = response; + this.directUploadData = direct_upload; + this.callback(null, this.toJSON()); + } else { + this.requestDidError(event); + } + } + }, { + key: "requestDidError", + value: function requestDidError(event) { + this.callback('Error creating Blob for "' + this.file.name + '". Status: ' + this.status); + } + }, { + key: "toJSON", + value: function toJSON() { + var result = {}; + for (var key in this.attributes) { + result[key] = this.attributes[key]; + } + return result; + } + }, { + key: "status", + get: function get$$1() { + return this.xhr.status; + } + }, { + key: "response", + get: function get$$1() { + var _xhr = this.xhr, responseType = _xhr.responseType, response = _xhr.response; + if (responseType == "json") { + return response; + } else { + return JSON.parse(response); + } + } + } ]); + return BlobRecord; + }(); + var BlobUpload = function() { + function BlobUpload(blob) { + var _this = this; + classCallCheck(this, BlobUpload); + this.blob = blob; + this.file = blob.file; + var _blob$directUploadDat = blob.directUploadData, url = _blob$directUploadDat.url, headers = _blob$directUploadDat.headers; + this.xhr = new XMLHttpRequest(); + this.xhr.open("PUT", url, true); + this.xhr.responseType = "text"; + for (var key in headers) { + this.xhr.setRequestHeader(key, headers[key]); + } + this.xhr.addEventListener("load", function(event) { + return _this.requestDidLoad(event); + }); + this.xhr.addEventListener("error", function(event) { + return _this.requestDidError(event); + }); + } + createClass(BlobUpload, [ { + key: "create", + value: function create(callback) { + this.callback = callback; + this.xhr.send(this.file.slice()); + } + }, { + key: "requestDidLoad", + value: function requestDidLoad(event) { + var _xhr = this.xhr, status = _xhr.status, response = _xhr.response; + if (status >= 200 && status < 300) { + this.callback(null, response); + } else { + this.requestDidError(event); + } + } + }, { + key: "requestDidError", + value: function requestDidError(event) { + this.callback('Error storing "' + this.file.name + '". Status: ' + this.xhr.status); + } + } ]); + return BlobUpload; + }(); + var id = 0; + var DirectUpload = function() { + function DirectUpload(file, url, delegate) { + classCallCheck(this, DirectUpload); + this.id = ++id; + this.file = file; + this.url = url; + this.delegate = delegate; + } + createClass(DirectUpload, [ { + key: "create", + value: function create(callback) { + var _this = this; + FileChecksum.create(this.file, function(error, checksum) { + if (error) { + callback(error); + return; + } + var blob = new BlobRecord(_this.file, checksum, _this.url); + notify(_this.delegate, "directUploadWillCreateBlobWithXHR", blob.xhr); + blob.create(function(error) { + if (error) { + callback(error); + } else { + var upload = new BlobUpload(blob); + notify(_this.delegate, "directUploadWillStoreFileWithXHR", upload.xhr); + upload.create(function(error) { + if (error) { + callback(error); + } else { + callback(null, blob.toJSON()); + } + }); + } + }); + }); + } + } ]); + return DirectUpload; + }(); + function notify(object, methodName) { + if (object && typeof object[methodName] == "function") { + for (var _len = arguments.length, messages = Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) { + messages[_key - 2] = arguments[_key]; + } + return object[methodName].apply(object, messages); + } + } + var DirectUploadController = function() { + function DirectUploadController(input, file) { + classCallCheck(this, DirectUploadController); + this.input = input; + this.file = file; + this.directUpload = new DirectUpload(this.file, this.url, this); + this.dispatch("initialize"); + } + createClass(DirectUploadController, [ { + key: "start", + value: function start(callback) { + var _this = this; + var hiddenInput = document.createElement("input"); + hiddenInput.type = "hidden"; + hiddenInput.name = this.input.name; + this.input.insertAdjacentElement("beforebegin", hiddenInput); + this.dispatch("start"); + this.directUpload.create(function(error, attributes) { + if (error) { + hiddenInput.parentNode.removeChild(hiddenInput); + _this.dispatchError(error); + } else { + hiddenInput.value = attributes.signed_id; + } + _this.dispatch("end"); + callback(error); + }); + } + }, { + key: "uploadRequestDidProgress", + value: function uploadRequestDidProgress(event) { + var progress = event.loaded / event.total * 100; + if (progress) { + this.dispatch("progress", { + progress: progress + }); + } + } + }, { + key: "dispatch", + value: function dispatch(name) { + var detail = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; + detail.file = this.file; + detail.id = this.directUpload.id; + return dispatchEvent(this.input, "direct-upload:" + name, { + detail: detail + }); + } + }, { + key: "dispatchError", + value: function dispatchError(error) { + var event = this.dispatch("error", { + error: error + }); + if (!event.defaultPrevented) { + alert(error); + } + } + }, { + key: "directUploadWillCreateBlobWithXHR", + value: function directUploadWillCreateBlobWithXHR(xhr) { + this.dispatch("before-blob-request", { + xhr: xhr + }); + } + }, { + key: "directUploadWillStoreFileWithXHR", + value: function directUploadWillStoreFileWithXHR(xhr) { + var _this2 = this; + this.dispatch("before-storage-request", { + xhr: xhr + }); + xhr.upload.addEventListener("progress", function(event) { + return _this2.uploadRequestDidProgress(event); + }); + } + }, { + key: "url", + get: function get$$1() { + return this.input.getAttribute("data-direct-upload-url"); + } + } ]); + return DirectUploadController; + }(); + var inputSelector = "input[type=file][data-direct-upload-url]:not([disabled])"; + var DirectUploadsController = function() { + function DirectUploadsController(form) { + classCallCheck(this, DirectUploadsController); + this.form = form; + this.inputs = findElements(form, inputSelector).filter(function(input) { + return input.files.length; + }); + } + createClass(DirectUploadsController, [ { + key: "start", + value: function start(callback) { + var _this = this; + var controllers = this.createDirectUploadControllers(); + var startNextController = function startNextController() { + var controller = controllers.shift(); + if (controller) { + controller.start(function(error) { + if (error) { + callback(error); + _this.dispatch("end"); + } else { + startNextController(); + } + }); + } else { + callback(); + _this.dispatch("end"); + } + }; + this.dispatch("start"); + startNextController(); + } + }, { + key: "createDirectUploadControllers", + value: function createDirectUploadControllers() { + var controllers = []; + this.inputs.forEach(function(input) { + toArray$1(input.files).forEach(function(file) { + var controller = new DirectUploadController(input, file); + controllers.push(controller); + }); + }); + return controllers; + } + }, { + key: "dispatch", + value: function dispatch(name) { + var detail = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; + return dispatchEvent(this.form, "direct-uploads:" + name, { + detail: detail + }); + } + } ]); + return DirectUploadsController; + }(); + var processingAttribute = "data-direct-uploads-processing"; + var submitButtonsByForm = new WeakMap(); + var started = false; + function start() { + if (!started) { + started = true; + document.addEventListener("click", didClick, true); + document.addEventListener("submit", didSubmitForm); + document.addEventListener("ajax:before", didSubmitRemoteElement); + } + } + function didClick(event) { + var target = event.target; + if ((target.tagName == "INPUT" || target.tagName == "BUTTON") && target.type == "submit" && target.form) { + submitButtonsByForm.set(target.form, target); + } + } + function didSubmitForm(event) { + handleFormSubmissionEvent(event); + } + function didSubmitRemoteElement(event) { + if (event.target.tagName == "FORM") { + handleFormSubmissionEvent(event); + } + } + function handleFormSubmissionEvent(event) { + var form = event.target; + if (form.hasAttribute(processingAttribute)) { + event.preventDefault(); + return; + } + var controller = new DirectUploadsController(form); + var inputs = controller.inputs; + if (inputs.length) { + event.preventDefault(); + form.setAttribute(processingAttribute, ""); + inputs.forEach(disable); + controller.start(function(error) { + form.removeAttribute(processingAttribute); + if (error) { + inputs.forEach(enable); + } else { + submitForm(form); + } + }); + } + } + function submitForm(form) { + var button = submitButtonsByForm.get(form) || findElement(form, "input[type=submit], button[type=submit]"); + if (button) { + var _button = button, disabled = _button.disabled; + button.disabled = false; + button.focus(); + button.click(); + button.disabled = disabled; + } else { + button = document.createElement("input"); + button.type = "submit"; + button.style.display = "none"; + form.appendChild(button); + button.click(); + form.removeChild(button); + } + submitButtonsByForm.delete(form); + } + function disable(input) { + input.disabled = true; + } + function enable(input) { + input.disabled = false; + } + function autostart() { + if (window.ActiveStorage) { + start(); + } + } + setTimeout(autostart, 1); + exports.start = start; + exports.DirectUpload = DirectUpload; + Object.defineProperty(exports, "__esModule", { + value: true + }); +}); diff --git a/app/assets/stylesheets/editor.scss b/app/assets/stylesheets/editor.scss new file mode 100644 index 0000000..07e9dd8 --- /dev/null +++ b/app/assets/stylesheets/editor.scss @@ -0,0 +1,7 @@ +.editor { + .editor-content { + div[data-align="left"] { text-align: left; } + div[data-align="center"] { text-align: center; } + div[data-align="right"] { text-align: right; } + } +} diff --git a/app/views/application/markdown.haml b/app/views/application/markdown.haml index 7496f06..7c31b45 100644 --- a/app/views/application/markdown.haml +++ b/app/views/application/markdown.haml @@ -1,74 +1,39 @@ -- if request.referer - = render 'layouts/breadcrumb', crumbs: [ link_to(t('help.markdown.back'), request.referer) ] += form_with do + .editor + %button#bold-button Bold + %button#italic-button Italic + %button#deleted-button Deleted + %button#underline-button Underline + %button#mark-button Mark + %button#h1-button H1 + %button#h2-button H2 + %button#h3-button H3 + %button#h4-button H4 + %button#h5-button H5 + %button#h6-button H6 + %button#ul-button Lista desordenada + %button#ol-button Lista ordenada + %button#left-button Left + %button#center-button Center + %button#right-button Right + %br/ + %label{:for => "mark-color"} Color de resaltado: + %input#mark-color{:type => "color"}/ + %br/ + %label{:for => "img-src"} URL de imágen: + %input#img-src{:placeholder => "https://radio.sutty.nl/public/placeholder_992x992.png", :type => "url"}/ + %label{:for => "img-alt"} Descripción de imágen: + %input#img-alt{:placeholder => "Un álbum", :type => "text"}/ + %button#img-button Insertar imágen + %br/ + %label{:for => "link-href"} URL de link: + %input#link-href{:type => "url"}/ + .editor-content{:contenteditable => "true"} + %h1 + Hola + %em mundo + %p Como te va? + %div{:data => {:align => "right"}} + %p Esto está a la derecha + %textarea{:cols => "80", :disabled => "disabled", :rows => "15"} -.row - .col - %table.table.table-responsive-md - %thead - %tr - %th= t('help.markdown.input') - %th= t('help.markdown.output') - %tbody - %tr - %td - %code= "**#{t('help.markdown.bold')}**" - %td - %strong= t('help.markdown.bold') - %tr - %td - %code= "_#{t('help.markdown.italic')}_" - %td - %em= t('help.markdown.italic') - - 7.times do |i| - - next if i == 0 - %tr - %td - %code= "#{'#' * i} #{t('help.markdown.heading')} #{i}" - %td= raw "#{t('help.markdown.heading')} #{i}" - %tr - %td - %code= "[#{t('help.markdown.link.text')}](#{t('help.markdown.link.url')})" - %td= link_to t('help.markdown.link.text'), t('help.markdown.link.url') - %tr - %td - %code= "> #{t('help.markdown.quote')}" - %td - %blockquote.blockquote= t('help.markdown.quote') - %tr - %td - %code - - 3.times do - = "* #{t('help.markdown.ul')}" - %br - %td - %ul - - 3.times do - %li= t('help.markdown.ul') - %tr - %td - %code - - 3.times do |i| - = "#{i}. #{t('help.markdown.ol')}" - %br - %td - %ol - - 3.times do - %li= t('help.markdown.ol') - %tr - %td{colspan: 2}= t('help.markdown.dir') - %tr - %td - %code= "[#{t('help.markdown.ltr')}]{dir=ltr lang=es}" - %td - %span{dir: 'ltr', lang: 'es'}= t('help.markdown.ltr') - %tr - %td - %code= "[#{t('help.markdown.rtl')}]{dir=rtl lang=es}" - %td - %span{dir: 'rtl', lang: 'es'}= t('help.markdown.rtl') - - %tr - %td - %code= "![#{t('help.markdown.img.text')}](#{t('help.markdown.img.url')})" - %td - %img{alt: t('help.markdown.img.text'), src: t('help.markdown.img.url')} From 9f366362271590a2d08ac50ea73865ff321e6dd9 Mon Sep 17 00:00:00 2001 From: void Date: Tue, 3 Nov 2020 18:29:47 -0300 Subject: [PATCH 02/38] usar data- para botones/inputs + css --- app/assets/javascripts/01-types.js | 18 ++++++------- app/assets/javascripts/02-editor.js | 2 +- app/assets/stylesheets/editor.scss | 26 ++++++++++++++++++ app/views/application/markdown.haml | 42 ++++++++++++++--------------- 4 files changed, 57 insertions(+), 31 deletions(-) diff --git a/app/assets/javascripts/01-types.js b/app/assets/javascripts/01-types.js index 45947f5..ba053de 100644 --- a/app/assets/javascripts/01-types.js +++ b/app/assets/javascripts/01-types.js @@ -126,17 +126,17 @@ const typesWithProperties = { mark: { checkFn: marks.mark.checkFn, updateInput (el, editorEl) { - const markColorInputEl = editorEl.querySelector("#mark-color") + const markColorInputEl = editorEl.querySelector("*[data-prop=\"mark-color\"]") markColorInputEl.disabled = false markColorInputEl.value = el.style.backgroundColor ? rgb2hex(el.style.backgroundColor) : "#f206f9" }, disableInput (editorEl) { - const markColorInputEl = editorEl.querySelector("#mark-color") + const markColorInputEl = editorEl.querySelector("*[data-prop=\"mark-color\"]") markColorInputEl.disabled = true markColorInputEl.value = "#000000" }, setupInput (editorEl, contentEl) { - const markColorInputEl = editorEl.querySelector("#mark-color") + const markColorInputEl = editorEl.querySelector("*[data-prop=\"mark-color\"]") markColorInputEl.addEventListener("change", event => { const markEl = findRecursiveChild(marks.mark.checkFn, contentEl) if (markEl) markEl.style.backgroundColor = markColorInputEl.value @@ -146,32 +146,32 @@ const typesWithProperties = { img: { checkFn: blocks.img.checkFn, updateInput (el, editorEl) { - const imgSrcEl = editorEl.querySelector("#img-src") + const imgSrcEl = editorEl.querySelector("*[data-prop=\"img-src\"]") imgSrcEl.disabled = false imgSrcEl.value = el.src - const imgAltEl = editorEl.querySelector("#img-alt") + const imgAltEl = editorEl.querySelector("*[data-prop=\"img-alt\"]") imgAltEl.disabled = false imgAltEl.value = el.alt }, disableInput (editorEl) { - const imgSrcEl = editorEl.querySelector("#img-src") + const imgSrcEl = editorEl.querySelector("*[data-prop=\"img-src\"]") imgSrcEl.disabled = true imgSrcEl.value = "" - const imgAltEl = editorEl.querySelector("#img-alt") + const imgAltEl = editorEl.querySelector("*[data-prop=\"img-alt\"]") imgAltEl.disabled = true imgAltEl.value = "" }, setupInput (editorEl, contentEl) { - const imgSrcEl = editorEl.querySelector("#img-src") + const imgSrcEl = editorEl.querySelector("*[data-prop=\"img-src\"]") imgSrcEl.addEventListener("input", event => { // const imgEl = findRecursiveChild(blocks.img.checkFn, contentEl) const imgEl = getSelected(contentEl) if (imgEl) imgEl.src = imgSrcEl.value }, false) - const imgAltEl = editorEl.querySelector("#img-alt") + const imgAltEl = editorEl.querySelector("*[data-prop=\"img-alt\"]") imgAltEl.addEventListener("input", event => { // const imgEl = findRecursiveChild(blocks.img.checkFn, contentEl) const imgEl = getSelected(contentEl) diff --git a/app/assets/javascripts/02-editor.js b/app/assets/javascripts/02-editor.js index 2ad524b..92eef32 100644 --- a/app/assets/javascripts/02-editor.js +++ b/app/assets/javascripts/02-editor.js @@ -376,7 +376,7 @@ function setupEditor (editorEl) { characterData: true, }) - const editorBtn = id => editorEl.querySelector(`#${id}-button`) + const editorBtn = id => editorEl.querySelector(`*[data-button="${id}"]`) const tagNameSetFn = tagName => el => { const newEl = document.createElement(tagName) diff --git a/app/assets/stylesheets/editor.scss b/app/assets/stylesheets/editor.scss index 07e9dd8..27d0b8c 100644 --- a/app/assets/stylesheets/editor.scss +++ b/app/assets/stylesheets/editor.scss @@ -1,4 +1,30 @@ .editor { + box-sizing: border-box; + *, *::before, *::after { box-sizing: inherit; } + + h1, h2, h3, h4, h5, h6, p { + min-height: 1.4em; + line-height: 1.4; + margin: 0; + } + + mark { + background: #f206f9; + padding: 0; + } + + .selected { + outline: #f206f9 solid medium; + outline-offset: 1pt; + } + + img { + width: 100%; + max-width: 600px; + display: block; + margin: 0 auto; + } + .editor-content { div[data-align="left"] { text-align: left; } div[data-align="center"] { text-align: center; } diff --git a/app/views/application/markdown.haml b/app/views/application/markdown.haml index 7c31b45..3f499ea 100644 --- a/app/views/application/markdown.haml +++ b/app/views/application/markdown.haml @@ -1,33 +1,33 @@ = form_with do .editor - %button#bold-button Bold - %button#italic-button Italic - %button#deleted-button Deleted - %button#underline-button Underline - %button#mark-button Mark - %button#h1-button H1 - %button#h2-button H2 - %button#h3-button H3 - %button#h4-button H4 - %button#h5-button H5 - %button#h6-button H6 - %button#ul-button Lista desordenada - %button#ol-button Lista ordenada - %button#left-button Left - %button#center-button Center - %button#right-button Right + %button{:data => {:button => "bold"}} Bold + %button{:data => {:button => "italic"}} Italic + %button{:data => {:button => "deleted"}} Deleted + %button{:data => {:button => "underline"}} Underline + %button{:data => {:button => "mark"}} Mark + %button{:data => {:button => "h1"}} H1 + %button{:data => {:button => "h2"}} H2 + %button{:data => {:button => "h3"}} H3 + %button{:data => {:button => "h4"}} H4 + %button{:data => {:button => "h5"}} H5 + %button{:data => {:button => "h6"}} H6 + %button{:data => {:button => "ul"}} Lista desordenada + %button{:data => {:button => "ol"}} Lista ordenada + %button{:data => {:button => "left"}} Left + %button{:data => {:button => "center"}} Center + %button{:data => {:button => "right"}} Right %br/ %label{:for => "mark-color"} Color de resaltado: - %input#mark-color{:type => "color"}/ + %input{:type => "color", :data => {:prop => "mark-color"}}/ %br/ %label{:for => "img-src"} URL de imágen: - %input#img-src{:placeholder => "https://radio.sutty.nl/public/placeholder_992x992.png", :type => "url"}/ + %input{:placeholder => "https://radio.sutty.nl/public/placeholder_992x992.png", :type => "url", :data => {:prop => "img-src"}}/ %label{:for => "img-alt"} Descripción de imágen: - %input#img-alt{:placeholder => "Un álbum", :type => "text"}/ - %button#img-button Insertar imágen + %input{:placeholder => "Un álbum", :type => "text", :data => {:prop => "img-alt"}}/ + %button{:data => {:button => "img"}} Insertar imágen %br/ %label{:for => "link-href"} URL de link: - %input#link-href{:type => "url"}/ + %input{:type => "url", :data => {:prop => "link-href"}}/ .editor-content{:contenteditable => "true"} %h1 Hola From fdb8584dcb1c8763807ebbda91286b357040e302 Mon Sep 17 00:00:00 2001 From: void Date: Thu, 5 Nov 2020 19:19:02 -0300 Subject: [PATCH 03/38] =?UTF-8?q?subida=20de=20im=C3=A1genes;=20limpiar=20?= =?UTF-8?q?un=20poco?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/assets/javascripts/01-types.js | 41 +++++++++++++------ app/assets/stylesheets/editor.scss | 7 ++++ app/views/application/markdown.haml | 8 +++- .../initializers/content_security_policy.rb | 2 +- 4 files changed, 43 insertions(+), 15 deletions(-) diff --git a/app/assets/javascripts/01-types.js b/app/assets/javascripts/01-types.js index ba053de..8a23a46 100644 --- a/app/assets/javascripts/01-types.js +++ b/app/assets/javascripts/01-types.js @@ -146,32 +146,49 @@ const typesWithProperties = { img: { checkFn: blocks.img.checkFn, updateInput (el, editorEl) { - const imgSrcEl = editorEl.querySelector("*[data-prop=\"img-src\"]") - imgSrcEl.disabled = false - imgSrcEl.value = el.src + const imgFileEl = editorEl.querySelector(`*[data-prop="img-file"]`) + imgFileEl.disabled = false + // XXX: No se puede cambiar el texto, ¡esto puede ser confuso! - const imgAltEl = editorEl.querySelector("*[data-prop=\"img-alt\"]") + const imgAltEl = editorEl.querySelector(`*[data-prop="img-alt"]`) imgAltEl.disabled = false imgAltEl.value = el.alt }, disableInput (editorEl) { - const imgSrcEl = editorEl.querySelector("*[data-prop=\"img-src\"]") - imgSrcEl.disabled = true - imgSrcEl.value = "" + const imgFileEl = editorEl.querySelector(`*[data-prop="img-file"]`) + imgFileEl.disabled = true - const imgAltEl = editorEl.querySelector("*[data-prop=\"img-alt\"]") + const imgAltEl = editorEl.querySelector(`*[data-prop="img-alt"]`) imgAltEl.disabled = true imgAltEl.value = "" }, setupInput (editorEl, contentEl) { - const imgSrcEl = editorEl.querySelector("*[data-prop=\"img-src\"]") - imgSrcEl.addEventListener("input", event => { + const imgFileEl = editorEl.querySelector(`*[data-prop="img-file"]`) + imgFileEl.addEventListener("input", event => { // const imgEl = findRecursiveChild(blocks.img.checkFn, contentEl) const imgEl = getSelected(contentEl) - if (imgEl) imgEl.src = imgSrcEl.value + if (!imgEl) return + + const file = imgFileEl.files[0] + + imgEl.src = URL.createObjectURL(file) + imgEl.dataset.editorLoading = true + uploadFile(file) + .then(url => { + imgEl.src = url + delete imgEl.dataset.editorError + }) + .catch(err => { + // TODO: mostrar error + console.error(err) + imgEl.dataset.editorError = true + }) + .finally(() => { + delete imgEl.dataset.editorLoading + }) }, false) - const imgAltEl = editorEl.querySelector("*[data-prop=\"img-alt\"]") + const imgAltEl = editorEl.querySelector(`*[data-prop="img-alt"]`) imgAltEl.addEventListener("input", event => { // const imgEl = findRecursiveChild(blocks.img.checkFn, contentEl) const imgEl = getSelected(contentEl) diff --git a/app/assets/stylesheets/editor.scss b/app/assets/stylesheets/editor.scss index 27d0b8c..1692237 100644 --- a/app/assets/stylesheets/editor.scss +++ b/app/assets/stylesheets/editor.scss @@ -30,4 +30,11 @@ div[data-align="center"] { text-align: center; } div[data-align="right"] { text-align: right; } } + + *[data-editor-loading] { + opacity: 0.5; + } + *[data-editor-error] { + filter: grayscale(100%); + } } diff --git a/app/views/application/markdown.haml b/app/views/application/markdown.haml index 3f499ea..71a1336 100644 --- a/app/views/application/markdown.haml +++ b/app/views/application/markdown.haml @@ -17,17 +17,21 @@ %button{:data => {:button => "center"}} Center %button{:data => {:button => "right"}} Right %br/ + // TODO: generar IDs para labels + %label{:for => "mark-color"} Color de resaltado: %input{:type => "color", :data => {:prop => "mark-color"}}/ %br/ - %label{:for => "img-src"} URL de imágen: - %input{:placeholder => "https://radio.sutty.nl/public/placeholder_992x992.png", :type => "url", :data => {:prop => "img-src"}}/ + + %label{:for => "img-file"} Archivo de la imágen: + %input{:type => "file", :data => {:prop => "img-file"}}/ %label{:for => "img-alt"} Descripción de imágen: %input{:placeholder => "Un álbum", :type => "text", :data => {:prop => "img-alt"}}/ %button{:data => {:button => "img"}} Insertar imágen %br/ %label{:for => "link-href"} URL de link: %input{:type => "url", :data => {:prop => "link-href"}}/ + .editor-content{:contenteditable => "true"} %h1 Hola diff --git a/config/initializers/content_security_policy.rb b/config/initializers/content_security_policy.rb index 05997dd..ec2c50c 100644 --- a/config/initializers/content_security_policy.rb +++ b/config/initializers/content_security_policy.rb @@ -14,7 +14,7 @@ Rails.application.config.content_security_policy do |policy| policy.script_src :self policy.font_src :self # XXX: Los íconos de Trix se cargan vía data: - policy.img_src :self, :data, :https + policy.img_src :self, :data, :https, :blob # Ya no usamos applets! policy.object_src :none if Rails.env.development? From 0382be3351c5af6524407020edc911d631339771 Mon Sep 17 00:00:00 2001 From: void Date: Thu, 5 Nov 2020 19:19:37 -0300 Subject: [PATCH 04/38] subida de PDFs, videos y audios y limpieza --- app/assets/javascripts/01-types.js | 149 ++++++++++++++++++++++++++-- app/assets/javascripts/02-editor.js | 7 +- app/assets/stylesheets/editor.scss | 2 +- app/views/application/markdown.haml | 16 +++ 4 files changed, 164 insertions(+), 10 deletions(-) diff --git a/app/assets/javascripts/01-types.js b/app/assets/javascripts/01-types.js index 8a23a46..660529f 100644 --- a/app/assets/javascripts/01-types.js +++ b/app/assets/javascripts/01-types.js @@ -72,10 +72,34 @@ const blocks = { img: { checkFn: el => el.tagName == "IMG", createFn: editorEl => { - const imgEl = document.createElement("IMG") - imgEl.src = "https://radio.sutty.nl/public/placeholder_992x992.png" - imgEl.alt = "Un hermoso álbum" - return imgEl + const el = document.createElement("IMG") + el.src = "https://radio.sutty.nl/public/placeholder_992x992.png" + el.alt = "Un hermoso álbum" + return el + }, + }, + audio: { + checkFn: el => el.tagName == "AUDIO", + createFn: editorEl => { + const el = document.createElement("AUDIO") + el.controls = true + return el + }, + }, + video: { + checkFn: el => el.tagName == "VIDEO", + createFn: editorEl => { + const el = document.createElement("VIDEO") + el.controls = true + return el + }, + }, + // PDF + pdf: { + checkFn: el => el.tagName == "IFRAME", + createFn: editorEl => { + const el = document.createElement("IFRAME") + return el }, }, } @@ -126,17 +150,17 @@ const typesWithProperties = { mark: { checkFn: marks.mark.checkFn, updateInput (el, editorEl) { - const markColorInputEl = editorEl.querySelector("*[data-prop=\"mark-color\"]") + const markColorInputEl = editorEl.querySelector(`*[data-prop="mark-color"]`) markColorInputEl.disabled = false markColorInputEl.value = el.style.backgroundColor ? rgb2hex(el.style.backgroundColor) : "#f206f9" }, disableInput (editorEl) { - const markColorInputEl = editorEl.querySelector("*[data-prop=\"mark-color\"]") + const markColorInputEl = editorEl.querySelector(`*[data-prop="mark-color"]`) markColorInputEl.disabled = true markColorInputEl.value = "#000000" }, setupInput (editorEl, contentEl) { - const markColorInputEl = editorEl.querySelector("*[data-prop=\"mark-color\"]") + const markColorInputEl = editorEl.querySelector(`*[data-prop="mark-color"]`) markColorInputEl.addEventListener("change", event => { const markEl = findRecursiveChild(marks.mark.checkFn, contentEl) if (markEl) markEl.style.backgroundColor = markColorInputEl.value @@ -196,4 +220,115 @@ const typesWithProperties = { }, false) }, }, + audio: { + checkFn: blocks.audio.checkFn, + updateInput (el, editorEl) { + const audioFileEl = editorEl.querySelector(`*[data-prop="audio-file"]`) + audioFileEl.disabled = false + // XXX: No se puede cambiar el texto, ¡esto puede ser confuso! + }, + disableInput (editorEl) { + const audioFileEl = editorEl.querySelector(`*[data-prop="audio-file"]`) + audioFileEl.disabled = true + }, + setupInput (editorEl, contentEl) { + const audioFileEl = editorEl.querySelector(`*[data-prop="audio-file"]`) + audioFileEl.addEventListener("input", event => { + const audioEl = getSelected(contentEl) + if (!audioEl) return + + const file = audioFileEl.files[0] + + audioEl.src = URL.createObjectURL(file) + audioEl.dataset.editorLoading = true + uploadFile(file) + .then(url => { + audioEl.src = url + delete audioEl.dataset.editorError + }) + .catch(err => { + // TODO: mostrar error + console.error(err) + audioEl.dataset.editorError = true + }) + .finally(() => { + delete audioEl.dataset.editorLoading + }) + }, false) + }, + }, + video: { + checkFn: blocks.video.checkFn, + updateInput (el, editorEl) { + const videoFileEl = editorEl.querySelector(`*[data-prop="video-file"]`) + videoFileEl.disabled = false + // XXX: No se puede cambiar el texto, ¡esto puede ser confuso! + }, + disableInput (editorEl) { + const videoFileEl = editorEl.querySelector(`*[data-prop="video-file"]`) + videoFileEl.disabled = true + }, + setupInput (editorEl, contentEl) { + const videoFileEl = editorEl.querySelector(`*[data-prop="video-file"]`) + videoFileEl.addEventListener("input", event => { + const videoEl = getSelected(contentEl) + if (!videoEl) return + + const file = videoFileEl.files[0] + + videoEl.src = URL.createObjectURL(file) + videoEl.dataset.editorLoading = true + uploadFile(file) + .then(url => { + videoEl.src = url + delete videoEl.dataset.editorError + }) + .catch(err => { + // TODO: mostrar error + console.error(err) + videoEl.dataset.editorError = true + }) + .finally(() => { + delete videoEl.dataset.editorLoading + }) + }, false) + }, + }, + pdf: { + checkFn: blocks.pdf.checkFn, + updateInput (el, editorEl) { + const pdfFileEl = editorEl.querySelector(`*[data-prop="pdf-file"]`) + pdfFileEl.disabled = false + // XXX: No se puede cambiar el texto, ¡esto puede ser confuso! + }, + disableInput (editorEl) { + const pdfFileEl = editorEl.querySelector(`*[data-prop="pdf-file"]`) + pdfFileEl.disabled = true + }, + setupInput (editorEl, contentEl) { + const pdfFileEl = editorEl.querySelector(`*[data-prop="pdf-file"]`) + pdfFileEl.addEventListener("input", event => { + const pdfEl = getSelected(contentEl) + if (!pdfEl) return + + const file = pdfFileEl.files[0] + + pdfEl.src = URL.createObjectURL(file) + pdfEl.dataset.editorLoading = true + uploadFile(file) + .then(url => { + pdfEl.src = url + delete pdfEl.dataset.editorError + }) + .catch(err => { + // TODO: mostrar error + console.error(err) + pdfEl.dataset.editorError = true + }) + .finally(() => { + delete pdfEl.dataset.editorLoading + }) + }, false) + }, + }, } diff --git a/app/assets/javascripts/02-editor.js b/app/assets/javascripts/02-editor.js index 92eef32..2fd0563 100644 --- a/app/assets/javascripts/02-editor.js +++ b/app/assets/javascripts/02-editor.js @@ -208,8 +208,11 @@ function hasContent (element) { if (child.nodeType === Node.TEXT_NODE && child.data.length > 0) return true else if (child.hasChildNodes() && hasContent(child)) return true } - // TODO: verificar que la imágen tiene contenido - if (element.tagName === "IMG") return true + // TODO: verificar que los elementos tiene contenido + if (element.tagName === "IMG" + || element.tagName === "AUDIO" + || element.tagName === "VIDEO" + || element.tagName === "IFRAME") return true return false } diff --git a/app/assets/stylesheets/editor.scss b/app/assets/stylesheets/editor.scss index 1692237..cc96492 100644 --- a/app/assets/stylesheets/editor.scss +++ b/app/assets/stylesheets/editor.scss @@ -18,7 +18,7 @@ outline-offset: 1pt; } - img { + img, video, iframe { width: 100%; max-width: 600px; display: block; diff --git a/app/views/application/markdown.haml b/app/views/application/markdown.haml index 71a1336..ff78986 100644 --- a/app/views/application/markdown.haml +++ b/app/views/application/markdown.haml @@ -29,6 +29,22 @@ %input{:placeholder => "Un álbum", :type => "text", :data => {:prop => "img-alt"}}/ %button{:data => {:button => "img"}} Insertar imágen %br/ + + %label{:for => "audio-file"} Archivo de la audio: + %input{:type => "file", :data => {:prop => "audio-file"}}/ + %button{:data => {:button => "audio"}} Insertar audio + %br/ + + %label{:for => "video-file"} Archivo de la video: + %input{:type => "file", :data => {:prop => "video-file"}}/ + %button{:data => {:button => "video"}} Insertar video + %br/ + + %label{:for => "pdf-file"} Archivo de la PDF: + %input{:type => "file", :data => {:prop => "pdf-file"}}/ + %button{:data => {:button => "pdf"}} Insertar PDF + %br/ + %label{:for => "link-href"} URL de link: %input{:type => "url", :data => {:prop => "link-href"}}/ From d6141ddee6e57975a130ce1b1f0ea162e1501aa0 Mon Sep 17 00:00:00 2001 From: void Date: Thu, 5 Nov 2020 19:20:05 -0300 Subject: [PATCH 05/38] arreglar bug con shadow DOM de