1 line
28 KiB
JavaScript
1 line
28 KiB
JavaScript
!function (a, b) { "object" == typeof exports && "undefined" != typeof module ? module.exports = b() : "function" == typeof define && define.amd ? define(b) : a.Jotted = b() }(this, function () { "use strict"; function a() { var a = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {}, b = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : {}, c = {}; return Object.keys(a).forEach(function (b) { c[b] = a[b] }), Object.keys(b).forEach(function (d) { "undefined" != typeof c[d] ? c[d] = a[d] : c[d] = b[d] }), c } function b(a, b) { var c = new window.XMLHttpRequest; c.open("GET", a), c.responseType = "text", c.onload = function () { 200 === c.status ? b(null, c.responseText) : b(a, c) }, c.onerror = function (a) { b(a) }, c.send() } function c(a, b, c, e, f) { return function (b, g) { b && e.push(b), a++, a < c.length ? d(a, g, c, e, f) : f(e, g) } } function d(a, b, d, e, f) { d[a](b, c.apply(this, arguments)) } function e(a, b) { var c = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : function () { }, e = []; return a.length ? void d(0, b, a, e, c) : c(e, b) } function f(a, b) { var c = null, d = null; return function () { var e = this, f = arguments; c ? d = !0 : a.apply(this, arguments), clearTimeout(c), c = setTimeout(function () { d && a.apply(e, f), c = null, d = null }, b) } } function g(a, b) { if (!a.className) return !1; var c = " " + a.className + " "; return b = " " + b + " ", c.indexOf(b) !== -1 } function h(a, b) { return g(a, b) ? a.className : (a.className && (b = " " + b), a.className += b, a.className) } function i(a, b) { var c = " " + b, d = b + " "; return a.className.indexOf(c) !== -1 ? a.className = a.className.replace(c, "") : a.className.indexOf(d) !== -1 ? a.className = a.className.replace(d, "") : a.className = a.className.replace(b, ""), a.className } function j(a, b) { return a.getAttribute("data-" + b) } function k() { var b = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : "", c = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : "", d = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : {}, e = a(d, B); for (var f in e) { var g = f.length; if (c.slice(-g++) === "." + f) return e[f] } for (var h in e) if (b === h) return e[h]; return b } function l() { return '\n <ul class="jotted-nav">\n <li class="jotted-nav-item jotted-nav-item-result">\n <a href="#" data-jotted-type="result">\n Result\n </a>\n </li>\n <li class="jotted-nav-item jotted-nav-item-html">\n <a href="#" data-jotted-type="html">\n HTML\n </a>\n </li>\n <li class="jotted-nav-item jotted-nav-item-css">\n <a href="#" data-jotted-type="css">\n CSS\n </a>\n </li>\n <li class="jotted-nav-item jotted-nav-item-js">\n <a href="#" data-jotted-type="js">\n JavaScript\n </a>\n </li>\n </ul>\n <div class="jotted-pane jotted-pane-result"><iframe></iframe></div>\n <div class="jotted-pane jotted-pane-html"></div>\n <div class="jotted-pane jotted-pane-css"></div>\n <div class="jotted-pane jotted-pane-js"></div>\n ' } function m(a) { return "jotted-pane-active-" + a } function n() { return "jotted" } function o(a) { return "jotted-has-" + a } function p(a) { return "jotted-editor jotted-editor-" + a } function q(a) { var b = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : ""; return '\n <textarea data-jotted-type="' + a + '" data-jotted-file="' + b + '"></textarea>\n <div class="jotted-status"></div>\n ' } function r(a) { return "\n <p>" + a + "</p>\n " } function s(a) { return "jotted-status-" + a } function t(a) { return "jotted-status-active-" + a } function u(a) { return "jotted-plugin-" + a } function v(a) { return "Loading <strong>" + a + "</strong>.." } function w(a) { return "There was an error loading <strong>" + a + "</strong>." } function x(a) { for (var b in F) { var c = F[b]; if (c._id === a) return c } throw new Error("Plugin " + a + " is not registered.") } function y(a, b) { b._id = a, F.push(b) } function z() { var a = this; this._get("options").plugins.forEach(function (b) { var c = void 0, d = void 0, e = {}; "string" == typeof b ? d = b : "object" === ("undefined" == typeof b ? "undefined" : C(b)) && (d = b.name, e = b.options || {}), c = x(d), a._get("plugins")[b] = new c(a, e), h(a._get("$container"), u(d)) }) } function A(a) { a.plugin("render", H), a.plugin("scriptless", I), a.plugin("ace", J), a.plugin("codemirror", K), a.plugin("less", L), a.plugin("coffeescript", M), a.plugin("stylus", N), a.plugin("babel", O), a.plugin("markdown", P), a.plugin("console", Q), a.plugin("play", R), a.plugin("pen", S) } var B = { html: "html", css: "css", js: "javascript", less: "less", styl: "stylus", coffee: "coffeescript" }, C = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (a) { return typeof a } : function (a) { return a && "function" == typeof Symbol && a.constructor === Symbol && a !== Symbol.prototype ? "symbol" : typeof a }, D = (function () { function a(a) { this.value = a } function b(b) { function c(a, b) { return new Promise(function (c, e) { var h = { key: a, arg: b, resolve: c, reject: e, next: null }; g ? g = g.next = h : (f = g = h, d(a, b)) }) } function d(c, f) { try { var g = b[c](f), h = g.value; h instanceof a ? Promise.resolve(h.value).then(function (a) { d("next", a) }, function (a) { d("throw", a) }) : e(g.done ? "return" : "normal", g.value) } catch (a) { e("throw", a) } } function e(a, b) { switch (a) { case "return": f.resolve({ value: b, done: !0 }); break; case "throw": f.reject(b); break; default: f.resolve({ value: b, done: !1 }) }f = f.next, f ? d(f.key, f.arg) : g = null } var f, g; this._invoke = c, "function" != typeof b.return && (this.return = void 0) } return "function" == typeof Symbol && Symbol.asyncIterator && (b.prototype[Symbol.asyncIterator] = function () { return this }), b.prototype.next = function (a) { return this._invoke("next", a) }, b.prototype.throw = function (a) { return this._invoke("throw", a) }, b.prototype.return = function (a) { return this._invoke("return", a) }, { wrap: function (a) { return function () { return new b(a.apply(this, arguments)) } }, await: function (b) { return new a(b) } } }(), function (a, b) { if (!(a instanceof b)) throw new TypeError("Cannot call a class as a function") }), E = function () { function a(a, b) { for (var c = 0; c < b.length; c++) { var d = b[c]; d.enumerable = d.enumerable || !1, d.configurable = !0, "value" in d && (d.writable = !0), Object.defineProperty(a, d.key, d) } } return function (b, c, d) { return c && a(b.prototype, c), d && a(b, d), b } }(), F = [], G = function () { function a() { D(this, a), this.topics = {}, this.callbacks = {} } return E(a, [{ key: "find", value: function (a) { return this.topics[a] = this.topics[a] || [], this.topics[a] } }, { key: "subscribe", value: function (a, b) { var c = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : 90, d = this.find(a); b._priority = c, d.push(b), d.sort(function (a, b) { return a._priority > b._priority ? 1 : b._priority > a._priority ? -1 : 0 }) } }, { key: "remover", value: function (a, b) { a.forEach(function () { if (!b) return void (a.length = 0); var c = [].indexOf.call(a, b); c !== -1 && a.splice(c, 1) }) } }, { key: "unsubscribe", value: function (a, b) { var c = this.find(a); this.remover(c, b), this.callbacks[a] = this.callbacks[a] || [], this.remover(this.callbacks[a], b) } }, { key: "publish", value: function (a) { var b = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : {}, c = this.find(a), d = []; c.forEach(function (a) { d.push(a) }), e(d, b, this.runCallbacks(a)) } }, { key: "runCallbacks", value: function (a) { var b = this; return function (c, d) { b.callbacks[a] = b.callbacks[a] || [], b.callbacks[a].forEach(function (a) { a(c, d) }) } } }, { key: "done", value: function (a) { var b = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : function () { }; this.callbacks[a] = this.callbacks[a] || [], this.callbacks[a].push(b) } }]), a }(), H = function () { function b(c, d) { D(this, b), d = a(d, {}); var e = !!("srcdoc" in document.createElement("iframe")), f = c.$container.querySelector(".jotted-pane-result iframe"), g = "", h = { html: "", css: "", js: "" }; window.addEventListener("message", this.domready.bind(this)), c.on("change", this.change.bind(this), 100), this.supportSrcdoc = e, this.content = h, this.frameContent = g, this.$resultFrame = f, this.callbacks = [], this.index = 0, this.lastCallback = function () { } } return E(b, [{ key: "template", value: function () { var a = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : "", b = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : "", c = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : ""; return "\n <!doctype html>\n <html>\n <head>\n <script>\n (function () {\n window.addEventListener('DOMContentLoaded', function () {\n window.parent.postMessage(JSON.stringify({\n type: 'jotted-dom-ready'\n }), '*')\n })\n }())\n </script>\n\n <style>" + a + "</style>\n </head>\n <body>\n " + b + "\n\n <!--\n Jotted:\n Empty script tag prevents malformed HTML from breaking the next script.\n -->\n <script></script>\n <script>" + c + "</script>\n </body>\n </html>\n " } }, { key: "change", value: function (a, b) { var c = this; this.content[a.type] = a.content; var d = this.frameContent; if (this.frameContent = this.template(this.content.css, this.content.html, this.content.js), this.lastCallback = function () { c.lastCallback = function () { }, b(null, a) }, a.forceRender !== !0 && this.frameContent === d) return void b(null, a); if (this.supportSrcdoc) { var e = document.createElement("iframe"); this.$resultFrame.parentNode.replaceChild(e, this.$resultFrame), this.$resultFrame = e, this.$resultFrame.contentWindow.document.open(), this.$resultFrame.contentWindow.document.write(this.frameContent), this.$resultFrame.contentWindow.document.close() } else { this.$resultFrame.setAttribute("data-srcdoc", this.frameContent); var f = 'javascript:window.frameElement.getAttribute("data-srcdoc");'; this.$resultFrame.setAttribute("src", f), this.$resultFrame.contentWindow && (this.$resultFrame.contentWindow.location = f) } } }, { key: "domready", value: function (a) { if (a.source === this.$resultFrame.contentWindow) { var b = {}; try { b = JSON.parse(a.data) } catch (a) { } "jotted-dom-ready" === b.type && this.lastCallback() } } }]), b }(), I = function () { function b(c, d) { D(this, b), d = a(d, {}); var e = ["application/javascript", "application/ecmascript", "application/x-ecmascript", "application/x-javascript", "text/ecmascript", "text/javascript", "text/javascript1.0", "text/javascript1.1", "text/javascript1.2", "text/javascript1.3", "text/javascript1.4", "text/javascript1.5", "text/jscript", "text/livescript", "text/x-ecmascript", "text/x-javascript"]; c.on("change", this.change.bind(this)), this.runScriptTypes = e } return E(b, [{ key: "change", value: function (a, b) { if ("html" !== a.type) return b(null, a); var c = document.createElement("div"); c.innerHTML = a.content; for (var d = null, e = c.querySelectorAll("script"), f = 0; f < e.length; f++)d = e[f].getAttribute("type"), d && this.runScriptTypes.indexOf(d) === -1 || e[f].parentNode.removeChild(e[f]); a.content = c.innerHTML, b(null, a) } }]), b }(), J = function () { function b(c, d) { D(this, b); var e, f = 1; if (this.editor = {}, this.jotted = c, d = a(d, {}), "undefined" != typeof window.ace) { var g = c.$container.querySelectorAll(".jotted-editor"); for (e = 0; e < g.length; e++) { var h = g[e].querySelector("textarea"), i = j(h, "jotted-type"), l = j(h, "jotted-file"), m = document.createElement("div"); g[e].appendChild(m), this.editor[i] = window.ace.edit(m); var n = this.editor[i], o = a(d); n.getSession().setMode("ace/mode/" + k(i, l)), n.getSession().setOptions(o), n.$blockScrolling = 1 / 0 } c.on("change", this.change.bind(this), f) } } return E(b, [{ key: "editorChange", value: function (a) { var b = this; return function () { b.jotted.trigger("change", a) } } }, { key: "change", value: function (a, b) { var c = this.editor[a.type]; a.aceEditor || (c.getSession().setValue(a.content), a.aceEditor = c, c.on("change", this.editorChange(a))), a.content = c.getValue(), b(null, a) } }]), b }(), K = function () { function b(c, d) { D(this, b); var e, f = 1; this.editor = {}, this.jotted = c; var g = { html: "htmlmixed" }; if (d = a(d, { lineNumbers: !0 }), "undefined" != typeof window.CodeMirror) { var h = c.$container.querySelectorAll(".jotted-editor"); for (e = 0; e < h.length; e++) { var i = h[e].querySelector("textarea"), l = j(i, "jotted-type"), m = j(i, "jotted-file"); this.editor[l] = window.CodeMirror.fromTextArea(i, d), this.editor[l].setOption("mode", k(l, m, g)) } c.on("change", this.change.bind(this), f) } } return E(b, [{ key: "editorChange", value: function (a) { var b = this; return function () { b.jotted.trigger("change", a) } } }, { key: "change", value: function (a, b) { var c = this.editor[a.type]; a.cmEditor || (c.setValue(a.content), a.cmEditor = c, c.on("change", this.editorChange(a))), a.content = c.getValue(), b(null, a) } }]), b }(), L = function () { function b(c, d) { D(this, b); var e = 20; d = a(d, {}), "undefined" != typeof window.less && (c.$container.querySelector('a[data-jotted-type="css"]').innerHTML = "Less", c.on("change", this.change.bind(this), e)) } return E(b, [{ key: "isLess", value: function (a) { return "css" === a.type && (a.file.indexOf(".less") !== -1 || "" === a.file) } }, { key: "change", value: function (a, b) { this.isLess(a) ? window.less.render(a.content, this.options, function (c, d) { return c ? b(c, a) : (a.content = d.css, void b(null, a)) }) : b(null, a) } }]), b }(), M = function () { function b(c, d) { D(this, b); var e = 20; d = a(d, {}), "undefined" != typeof window.CoffeeScript && (c.$container.querySelector('a[data-jotted-type="js"]').innerHTML = "CoffeeScript", c.on("change", this.change.bind(this), e)) } return E(b, [{ key: "isCoffee", value: function (a) { return "js" === a.type && (a.file.indexOf(".coffee") !== -1 || "" === a.file) } }, { key: "change", value: function (a, b) { if (this.isCoffee(a)) try { a.content = window.CoffeeScript.compile(a.content) } catch (c) { return b(c, a) } b(null, a) } }]), b }(), N = function () { function b(c, d) { D(this, b); var e = 20; d = a(d, {}), "undefined" != typeof window.stylus && (c.$container.querySelector('a[data-jotted-type="css"]').innerHTML = "Stylus", c.on("change", this.change.bind(this), e)) } return E(b, [{ key: "isStylus", value: function (a) { return "css" === a.type && (a.file.indexOf(".styl") !== -1 || "" === a.file) } }, { key: "change", value: function (a, b) { this.isStylus(a) ? window.stylus(a.content, this.options).render(function (c, d) { return c ? b(c, a) : (a.content = d, void b(null, a)) }) : b(null, a) } }]), b }(), O = function () { function b(c, d) { D(this, b); var e = 20; if (this.options = a(d, {}), "undefined" != typeof window.Babel) this.babel = window.Babel; else { if ("undefined" == typeof window.babel) return; this.babel = { transform: window.babel } } c.$container.querySelector('a[data-jotted-type="js"]').innerHTML = "ES2015", c.on("change", this.change.bind(this), e) } return E(b, [{ key: "change", value: function (a, b) { if ("js" === a.type) { try { a.content = this.babel.transform(a.content, this.options).code } catch (c) { return b(c, a) } b(null, a) } else b(null, a) } }]), b }(), P = function () { function b(c, d) { D(this, b); var e = 20; this.options = a(d, {}), "undefined" != typeof window.marked && (window.marked.setOptions(d), c.$container.querySelector('a[data-jotted-type="html"]').innerHTML = "Markdown", c.on("change", this.change.bind(this), e)) } return E(b, [{ key: "change", value: function (a, b) { if ("html" === a.type) { try { a.content = window.marked(a.content) } catch (c) { return b(c, a) } b(null, a) } else b(null, a) } }]), b }(), Q = function () { function b(c, d) { D(this, b), d = a(d, { autoClear: !1 }); var e = 30, f = [], g = 0, i = "(" + this.capture.toString() + ")();", j = { html: "", css: "", js: "" }, k = document.createElement("li"); h(k, "jotted-nav-item jotted-nav-item-console"), k.innerHTML = '<a href="#" data-jotted-type="console">JS Console</a>'; var l = document.createElement("div"); h(l, "jotted-pane jotted-pane-console"), l.innerHTML = '\n <div class="jotted-console-container">\n <ul class="jotted-console-output"></ul>\n <form class="jotted-console-input">\n <input type="text">\n </form>\n </div>\n <button class="jotted-button jotted-console-clear">Clear</button>\n ', c.$container.appendChild(l), c.$container.querySelector(".jotted-nav").appendChild(k); var m = c.$container.querySelector(".jotted-console-container"), n = c.$container.querySelector(".jotted-console-output"), o = c.$container.querySelector(".jotted-console-input input"), p = c.$container.querySelector(".jotted-console-input"), q = c.$container.querySelector(".jotted-console-clear"); p.addEventListener("submit", this.submit.bind(this)), o.addEventListener("keydown", this.history.bind(this)), q.addEventListener("click", this.clear.bind(this)), d.autoClear === !0 && c.on("change", this.autoClear.bind(this), e - 1), c.on("change", this.change.bind(this), e), window.addEventListener("message", this.getMessage.bind(this)), this.$jottedContainer = c.$container, this.$container = m, this.$input = o, this.$output = n, this.history = f, this.historyIndex = g, this.logCaptureSnippet = i, this.contentCache = j, this.getIframe = this.getIframe.bind(this) } return E(b, [{ key: "getIframe", value: function () { return this.$jottedContainer.querySelector(".jotted-pane-result iframe") } }, { key: "getMessage", value: function (a) { if (a.source === this.getIframe().contentWindow) { var b = {}; try { b = JSON.parse(a.data) } catch (a) { } "jotted-console-log" === b.type && this.log(b.message) } } }, { key: "autoClear", value: function (a, b) { var c = a.content; "js" === a.type && (c = c.replace(this.logCaptureSnippet, "")), a.forceRender !== !0 && this.contentCache[a.type] === c || this.clear(), this.contentCache[a.type] = c, b(null, a) } }, { key: "change", value: function (a, b) { return "js" !== a.type ? b(null, a) : (a.content.indexOf(this.logCaptureSnippet) === -1 && (a.content = "" + this.logCaptureSnippet + a.content), void b(null, a)) } }, { key: "capture", value: function () { "undefined" != typeof window.console && "undefined" != typeof window.console.log || (window.console = { log: function () { } }); var a = Function.prototype.bind.call(window.console.log, window.console); window.console.log = function () { [].slice.call(arguments).forEach(function (a) { window.parent.postMessage(JSON.stringify({ type: "jotted-console-log", message: a }), "*") }), a.apply(a, arguments) } } }, { key: "log", value: function () { var a = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : "", b = arguments[1], c = document.createElement("li"); h(c, "jotted-console-log"), "undefined" != typeof b && h(c, "jotted-console-log-" + b), c.innerHTML = a, this.$output.appendChild(c) } }, { key: "submit", value: function (a) { var b = this.$input.value.trim(); if ("" === b) return a.preventDefault(); this.history.push(b), this.historyIndex = this.history.length, this.log(b, "history"), 0 !== b.indexOf("return") && (b = "return " + b); try { var c = this.getIframe().contentWindow.eval("(function() {" + b + "})()"); this.log(c) } catch (a) { this.log(a, "error") } this.$input.value = "", this.$container.scrollTop = this.$container.scrollHeight, a.preventDefault() } }, { key: "clear", value: function () { this.$output.innerHTML = "" } }, { key: "history", value: function (a) { var b = 38, c = 40, d = !1, e = this.$input.selectionStart; a.keyCode === b && 0 !== this.historyIndex && 0 === e && (this.historyIndex--, d = !0), a.keyCode === c && this.historyIndex !== this.history.length - 1 && e === this.$input.value.length && (this.historyIndex++, d = !0), d && (this.$input.value = this.history[this.historyIndex]) } }]), b }(), R = function () { function b(c, d) { D(this, b), d = a(d, { firstRun: !0 }); var e = 10, f = {}, g = {}; d.firstRun === !1 && (f = { html: { type: "html", content: "" }, css: { type: "css", content: "" }, js: { type: "js", content: "" } }); var h = document.createElement("button"); h.className = "jotted-button jotted-button-play", h.innerHTML = "Run", c.$container.appendChild(h), h.addEventListener("click", this.run.bind(this)), c.on("change", this.change.bind(this), e), this.cache = f, this.code = g, this.jotted = c } return E(b, [{ key: "change", value: function (b, c) { this.code[b.type] = a(b), "undefined" != typeof this.cache[b.type] ? (c(null, this.cache[b.type]), this.cache[b.type].forceRender = null) : (this.cache[b.type] = a(b), c(null, b)) } }, { key: "run", value: function () { for (var b in this.code) this.cache[b] = a(this.code[b], { forceRender: !0 }), this.jotted.trigger("change", this.cache[b]) } }]), b }(), S = function () { function a(b, c) { D(this, a); var d = { html: { title: "HTML", classChecker: "jotted-has-html" }, css: { title: "CSS", classChecker: "jotted-has-css" }, js: { title: "JavaScript", classChecker: "jotted-has-js" }, console: { title: "Console", classChecker: "jotted-plugin-console" } }, e = []; for (var f in d) b.$container.classList.contains(d[f].classChecker) && e.push(b.$container.querySelector(".jotted-pane-" + f)); this.resizablePanes = []; for (var g = 0; g < e.length; g++) { for (var h = void 0, i = 0; i < e[g].classList.length; i++)if (e[g].classList[i].indexOf("jotted-pane-") !== -1) { h = e[g].classList[i].replace("jotted-pane-", ""); break } if (h) { var j = { container: e[g], expander: void 0 }; this.resizablePanes.push(j); var k = document.createElement("div"); k.classList.add("jotted-pane-title"), k.innerHTML = d[h].title || h; var l = e[g].firstElementChild; l.insertBefore(k, l.firstChild), g > 0 && (j.expander = document.createElement("div"), j.expander.classList.add("jotted-plugin-pen-expander"), j.expander.addEventListener("mousedown", this.startExpand.bind(this, b)), l.insertBefore(j.expander, k)) } } } return E(a, [{ key: "startExpand", value: function (a, b) { var c = this.resizablePanes.filter(function (a) { return a.expander === b.target }).shift(), d = this.resizablePanes[this.resizablePanes.indexOf(c) - 1], e = 100 / parseInt(window.getComputedStyle(c.container.parentNode).width, 10); c.container.parentNode.style.display = "none", c.startX = b.clientX, c.startWidth = parseFloat(window.getComputedStyle(c.container).width, 10), d.startWidth = parseFloat(window.getComputedStyle(d.container).width, 10), c.container.parentNode.style.display = "", c.mousemove = this.doDrag.bind(this, c, d, e), c.mouseup = this.stopDrag.bind(this, c), document.addEventListener("mousemove", c.mousemove, !1), document.addEventListener("mouseup", c.mouseup, !1) } }, { key: "doDrag", value: function (a, b, c, d) { var e = b.startWidth + (d.clientX - a.startX) * c, f = a.startWidth - (d.clientX - a.startX) * c, g = 10; e >= g && f >= g && (a.container.style.maxWidth = "none", b.container.style.maxWidth = "none", b.container.style.width = e + "%", a.container.style.width = f + "%") } }, { key: "stopDrag", value: function (a, b) { document.removeEventListener("mousemove", a.mousemove, !1), document.removeEventListener("mouseup", a.mouseup, !1) } }]), a }(), T = function () { function c(b, d) { if (D(this, c), !b) throw new Error("Can't find Jotted container."); var e = {}; this._get = function (a) { return e[a] }, this._set = function (a, b) { return e[a] = b, e[a] }; var g = this._set("options", a(d, { files: [], showBlank: !1, runScripts: !0, pane: "result", debounce: 250, plugins: [] })); g.plugins.push("render"), g.runScripts === !1 && g.plugins.push("scriptless"), this._set("cachedContent", { html: null, css: null, js: null }); var i = this._set("pubsoup", new G); this._set("trigger", this.trigger()), this._set("on", function () { i.subscribe.apply(i, arguments) }), this._set("off", function () { i.unsubscribe.apply(i, arguments) }); var j = this._set("done", function () { i.done.apply(i, arguments) }); j("change", this.errors.bind(this)); var k = this._set("$container", b); k.innerHTML = l(), h(k, n()); var p = this._set("paneActive", g.pane); h(k, m(p)), this._set("$status", {}); for (var q = ["html", "css", "js"], r = 0; r < q.length; r++) { var s = q[r]; this.markup(s) } k.addEventListener("keyup", f(this.change.bind(this), g.debounce)), k.addEventListener("change", f(this.change.bind(this), g.debounce)), k.addEventListener("click", this.pane.bind(this)), this.$container = this._get("$container"), this.on = this._get("on"), this.off = this._get("off"), this.done = this._get("done"), this.trigger = this._get("trigger"), this.paneActive = this._get("paneActive"), this._set("plugins", {}), z.call(this); for (var t = ["html", "css", "js"], u = 0; u < t.length; u++) { var v = t[u]; this.load(v) } if (g.showBlank) for (var w = ["html", "css", "js"], x = 0; x < w.length; x++) { var y = w[x]; h(k, o(y)) } } return E(c, [{ key: "findFile", value: function (a) { var b = {}, c = this._get("options"); for (var d in c.files) { var e = c.files[d]; if (e.type === a) return e } return b } }, { key: "markup", value: function (a) { var b = this._get("$container"), c = b.querySelector(".jotted-pane-" + a), d = this.findFile(a), e = document.createElement("div"); e.innerHTML = q(a, d.url), e.className = p(a), c.appendChild(e), this._get("$status")[a] = c.querySelector(".jotted-status"), "undefined" == typeof d.url && "undefined" == typeof d.content || h(b, o(a)) } }, { key: "load", value: function (a) { var c = this, d = this.findFile(a), e = this._get("$container").querySelector(".jotted-pane-" + a + " textarea"); "undefined" != typeof d.content ? this.setValue(e, d.content) : "undefined" != typeof d.url ? (this.status("loading", [v(d.url)], { type: a, file: d }), b(d.url, function (b, d) { return b ? void c.status("error", [w(b)], { type: a }) : (c.clearStatus("loading", { type: a }), void c.setValue(e, d)) })) : this.setValue(e, "") } }, { key: "setValue", value: function (a, b) { a.value = b, this.change({ target: a }) } }, { key: "change", value: function (a) { var b = j(a.target, "jotted-type"); if (b) { var c = this._get("cachedContent"); c[b] !== a.target.value && (c[b] = a.target.value, this.trigger("change", { type: b, file: j(a.target, "jotted-file"), content: c[b] })) } } }, { key: "errors", value: function (a, b) { this.status("error", a, b) } }, { key: "pane", value: function (a) { if (j(a.target, "jotted-type")) { var b = this._get("$container"), c = this._get("paneActive"); i(b, m(c)), c = this._set("paneActive", j(a.target, "jotted-type")), h(b, m(c)), a.preventDefault() } } }, { key: "status", value: function () { var a = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : "error", b = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : [], c = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : {}; if (!b.length) return this.clearStatus(a, c); var d = this._get("$status"); h(d[c.type], s(a)), h(this._get("$container"), t(c.type)); var e = ""; b.forEach(function (a) { e += r(a) }), d[c.type].innerHTML = e } }, { key: "clearStatus", value: function (a, b) { var c = this._get("$status"); i(c[b.type], s(a)), i(this._get("$container"), t(b.type)), c[b.type].innerHTML = "" } }, { key: "trigger", value: function () { var a = this._get("options"), b = this._get("pubsoup"); if (a.debounce === !1) return function () { b.publish.apply(b, arguments) }; var c = {}, d = {}; return function (e) { var f = arguments, g = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : {}, h = g.type, i = void 0 === h ? "default" : h; c[i] ? d[i] = !0 : b.publish.apply(b, arguments), clearTimeout(c[i]), c[i] = setTimeout(function () { d[i] && b.publish.apply(b, f), d[i] = null, c[i] = null }, a.debounce) } } }]), c }(); return T.plugin = function () { return y.apply(this, arguments) }, A(T), T }); |