diff --git a/src/dom_components/model/ComponentScript.js b/src/dom_components/model/ComponentScript.js index 8ff2b7b48..8eb17b238 100644 --- a/src/dom_components/model/ComponentScript.js +++ b/src/dom_components/model/ComponentScript.js @@ -1,10 +1,13 @@ import Component from './Component'; +const type = 'script'; + export default Component.extend( { defaults: { ...Component.prototype.defaults, - type: 'script', + type, + tagName: type, droppable: false, draggable: false, layerable: false @@ -13,7 +16,7 @@ export default Component.extend( { isComponent(el) { if (el.tagName == 'SCRIPT') { - var result = { type: 'script' }; + const result = { type }; if (el.src) { result.src = el.src; diff --git a/src/dom_components/view/ComponentScriptView.js b/src/dom_components/view/ComponentScriptView.js index e5ffba980..b044bca6e 100644 --- a/src/dom_components/view/ComponentScriptView.js +++ b/src/dom_components/view/ComponentScriptView.js @@ -1,4 +1,3 @@ -import Backbone from 'backbone'; import ComponentView from './ComponentImageView'; export default ComponentView.extend({ @@ -7,43 +6,31 @@ export default ComponentView.extend({ events: {}, render() { - var model = this.model; - var src = model.get('src'); - var em = this.em; - var scriptCount = em && em.get('scriptCount') ? em.get('scriptCount') : 0; - var content = ''; + const { model, em } = this; + const src = model.get('src'); + const scrCnt = em && em.get('scriptCount'); + const scriptCount = scrCnt ? scrCnt : 0; + let content = ''; // If it's an external script if (src) { - var onload = model.get('onload'); - var svar = 'script' + scriptCount; - var svarNext = 'script' + (scriptCount + 1); - content = - 'var ' + - svar + - " = document.createElement('script');\n" + - svar + - '.onload = function(){\n' + - (onload ? onload + '();\n' : '') + - 'typeof ' + - svarNext + - "Start == 'function' && " + - svarNext + - 'Start();\n' + - '};\n' + - svar + - ".src = '" + - src + - "';\n" + - 'function ' + - svar + - 'Start() { document.body.appendChild(' + - svar + - '); };\n' + - (!scriptCount ? svar + 'Start();' : ''); - if (em) { - em.set('scriptCount', scriptCount + 1); - } + const onload = model.get('onload'); + const svar = `script${scriptCount}`; + const svarNext = `script${scriptCount + 1}`; + const svarFn = `${svar}Start`; + const svarNextFn = `${svarNext}Start`; + // Load multiple external scripts in the correct order + content = ` + var ${svar} = document.createElement('script'); + ${svar}.onload = function() { + ${onload ? `${onload}();\n` : ''} + typeof ${svarNextFn} == 'function' && ${svarNextFn}(); + }; + ${svar}.src = '${src}'; + function ${svarFn}() { document.body.appendChild(${svar}); }; + ${!scriptCount ? `${svarFn}();` : ''} + `; + em && em.set('scriptCount', scriptCount + 1); } else { content = model.get('content'); }