diff --git a/src/js/templates/core-tpl.js b/src/js/templates/core-tpl.js index e7f5642..c91a956 100644 --- a/src/js/templates/core-tpl.js +++ b/src/js/templates/core-tpl.js @@ -1,8 +1,16 @@ import * as Handlebars from 'handlebars'; let core_tpl = ` -

View Core

- -
+
+
+

View Core

+ +
+ +
+
` export default Handlebars.compile(core_tpl); \ No newline at end of file diff --git a/src/js/templates/coreXML-tpl.js b/src/js/templates/coreXML-tpl.js index 67ea44a..6b1d2d5 100644 --- a/src/js/templates/coreXML-tpl.js +++ b/src/js/templates/coreXML-tpl.js @@ -5,24 +5,21 @@ let coreXML_tpl = ` - - - - Title - - -

Publication Information

- - -

Information about the source

- - - - - {{{this}}} - - - -` + + + + Title + + +

Publication Information

+ + +

Information about the source

+ + + + + +` export default Handlebars.compile(coreXML_tpl); \ No newline at end of file diff --git a/src/js/templates/coreentries-tpl.js b/src/js/templates/coreentries-tpl.js deleted file mode 100644 index 1ee8415..0000000 --- a/src/js/templates/coreentries-tpl.js +++ /dev/null @@ -1,10 +0,0 @@ -import * as Handlebars from 'handlebars'; - -let coreentries_tpl = ` -{{#each this}} -
- 
{{this.xml}}
-
-{{/each}} -` -export default Handlebars.compile(coreentries_tpl); \ No newline at end of file diff --git a/src/js/templates/xmlfile-tpl.js b/src/js/templates/xmlfile-tpl.js index b2c1837..e43c0d8 100644 --- a/src/js/templates/xmlfile-tpl.js +++ b/src/js/templates/xmlfile-tpl.js @@ -1,21 +1,23 @@ import * as Handlebars from 'handlebars'; let xmlfile_tpl = ` -
-
{{filename}}
-
- - - +{{#if this}} +
+
{{filename}}
+
+ + + +
+
+ Make a selection + + + +
+
-
- Make a selection - - - -
-
- +{{/if}}
` diff --git a/src/js/views/Core-view.js b/src/js/views/Core-view.js index 20b658f..922933a 100644 --- a/src/js/views/Core-view.js +++ b/src/js/views/Core-view.js @@ -1,8 +1,6 @@ import * as Backbone from 'backbone'; -import coreentries_tpl from '../templates/coreentries-tpl'; -import coreXML_tpl from '../templates/coreXML-tpl'; -import Prism from 'prismjs'; import saveAs from 'save-as'; +import loadScript from "../utils/load-script" // Sadly Bootstrap js is not ES6 ready yet. var $ = global.jQuery = require('jquery'); @@ -16,57 +14,156 @@ class CoreView extends Backbone.View { events() { return { - "click .cb-vc-remove": "removeOne", - "click #cb-vc-download": "download" + "click #cb-vc-download": "download", + "click #toggling": "toggle" } } - removeOne(e) { - let m_id = this.$(e.target).closest("div").data("entry"); - this.collection.remove(m_id); - this.renderEntries(); - } - download() { + const edCnt = this.$el.find("#core .cb-ace").get(0); - let xml_string = ""; + loadScript("dist/js/libs/ace/ace.js", { scriptTag: true }).then(() => { + var editor; + ace.require(['ace/ace'], (loadedAce) => { + editor = loadedAce.edit(edCnt); - this.collection.each((entry, i) => { - if (entry.get("saved")) { - xml_string += entry.get("xml"); - } + let XML = "" + for (let i = 0; i < editor.getSession().getLength(); i++) + XML += editor.getSession().getLine(i) + '\n' + + saveAs(new Blob([XML], { "type": "text\/xml" }), 'core.xml'); + }); }); + } - xml_string = coreXML_tpl(xml_string); + showHTML() { + this.$el.find("#core #HTML").html("") - let bb = new Blob([xml_string], { "type": "text\/xml" }); - saveAs(bb, 'core.xml'); - } + const edCnt = this.$el.find("#core .cb-ace").get(0); - renderLastEntry() { - if (this.collection.models.length > 1) - this.$el.find("#coreEntries").append(coreentries_tpl([{ id: this.collection.models[this.collection.models.length - 2].cid, xml: this.collection.toJSON()[this.collection.toJSON().length - 2].xml }])) + loadScript("dist/js/libs/ace/ace.js", { scriptTag: true }).then(() => { + var editor; + ace.require(['ace/ace'], (loadedAce) => { + editor = loadedAce.edit(edCnt); + + let XML = "" + for (let i = 0; i < editor.getSession().getLength(); i++) + XML += editor.getSession().getLine(i) + + let childNodes1 = (new DOMParser).parseFromString(XML, "application/xml").querySelectorAll("standoff")[0].childNodes + let elementNode = false + + childNodes1.forEach(childNode1 => { + if (childNode1.nodeType == Node.ELEMENT_NODE) + elementNode = true + }) + + if (elementNode) { + childNodes1.forEach(childNode1 => { + if (childNode1.nodeType == Node.ELEMENT_NODE) { + let childNodes2 = "" + + for (let childNode2 of childNode1.children) { + childNodes2 += "

" + childNode2.nodeName + + for (let attribute of childNode2.attributes) + if (attribute.name == "type") { + childNodes2 += ' "' + attribute.value + '"' + } + + childNodes2 += "
" + + if (childNode1.nodeName != "app") + childNodes2 += '"' + childNode2.attributes[0].value + '"' + else if (!childNode2.children[0].children.length) + childNodes2 += '"' + childNode2.children[0].attributes[0].value + '"' + else { + let childNodes3 = "" + + for (let childNode3 of childNode2.children) { + childNodes3 += "

" + childNode3.nodeName - Prism.highlightAll() + for (let attribute of childNode3.attributes) + if (attribute.name == "type") { + childNodes3 += ' "' + attribute.value + '"' + } + + childNodes3 += "
" + + if (!childNode3.children[0].children.length) + childNodes3 += '"' + childNode3.children[0].attributes[0].value + '"' + + childNodes3 += "

" + } + + childNodes2 += childNodes3 + } + + childNodes2 += "

" + } + this.$el.find("#core #HTML").append("

" + childNode1.nodeName + childNodes2 + "

") + } + }) + } + }); + }); } - renderEntries() { - let coreData = [] + toggle() { + if (this.$el.find("#toggling span").text() == "XML") { + this.$el.find("#toggling span").text("HTML") + this.$el.find("#core .cb-XMLFile").show() + this.$el.find("#core #HTML").hide() + + const edCnt = this.$el.find("#core .cb-ace").get(0); + + loadScript("dist/js/libs/ace/ace.js", { scriptTag: true }).then(() => { + var editor; + ace.require(['ace/ace'], (loadedAce) => { + editor = loadedAce.edit(edCnt); - this.collection.each((entry, i) => { - // skip last entry (considered "not saved") - // and any other leaked unsaved entries... TODO (fix this) - if (entry.get("saved")) { - coreData.push({ - "id": entry.cid, - "xml": entry.get("xml") + editor.moveCursorTo({ column: 0, row: 0 }); }); - } - }); + }); + } + else { + this.$el.find("#toggling span").text("XML") + this.$el.find("#core .cb-XMLFile").hide() + if (!this.$el.find("#core")[0].children[2]) + this.$el.find("#core").append($("
").attr("id", "HTML")) + this.$el.find("#core #HTML").show() + + this.showHTML() + } + } - this.$el.find("#coreEntries").html(coreentries_tpl(coreData)); + renderLastEntry() { + if (this.collection.toJSON()[this.collection.toJSON().length - 2]) { + const edCnt = this.$el.find("#core .cb-ace").get(0); + + loadScript("dist/js/libs/ace/ace.js", { scriptTag: true }).then(() => { + var editor; + ace.require(['ace/ace'], (loadedAce) => { + editor = loadedAce.edit(edCnt); + + for (let i = 0; i < editor.getSession().getLength(); i++) + if (editor.getSession().getLine(i).includes("")) { + let splitedXML = this.collection.toJSON()[this.collection.toJSON().length - 2].xml.split('\n'), XML = "" + for (let j = 0; j < splitedXML.length; j++) { + XML += '\t' + if (j) + XML += '\t' + XML += splitedXML[j] + '\n' + } + + editor.getSession().insert({ column: editor.getSession().getLine(i).indexOf(""), row: i }, XML + '\t'); + break + } + }); + }); - Prism.highlightAll(); + this.showHTML() + } } } diff --git a/src/js/views/XMLFiles-view.js b/src/js/views/XMLFiles-view.js index 50c003d..fe3638b 100644 --- a/src/js/views/XMLFiles-view.js +++ b/src/js/views/XMLFiles-view.js @@ -3,6 +3,9 @@ import * as Backbone from 'backbone'; import XMLFileView from './XMLFile-view.js'; import Events from '../utils/backbone-events.js'; import core_tpl from "../templates/core-tpl" +import xmlfile_tpl from "../templates/xmlfile-tpl" +import loadScript from "../utils/load-script" +import coreXML_tpl from "../templates/coreXML-tpl" class XMLFilesView extends Backbone.View { @@ -22,7 +25,7 @@ class XMLFilesView extends Backbone.View { this.arrange(); } - arrange(cols) { + arrange(cols, XML) { if (!cols) { if (this.cols) { cols = this.cols; @@ -52,12 +55,38 @@ class XMLFilesView extends Backbone.View { for (let row of rows) { let div = $('
').addClass("row"); for (let xfile of row) { - div.append(xfile); + if (xfile.classList[1]) + div.append(xfile); } - divFiles.append(div) + if (div[0].innerHTML) + divFiles.append(div) } this.$el.append($("
").attr("id", "filesCore").append(divFiles).append($("
").attr("id", "core").html(core_tpl()))) + this.$el.find("#core .cb-XMLFile").html(xmlfile_tpl()) + + const edCnt = this.$el.find("#core .cb-ace").get(0); + + loadScript("dist/js/libs/ace/ace.js", { scriptTag: true }).then(() => { + var editor; + ace.require(['ace/ace'], (loadedAce) => { + editor = loadedAce.edit(edCnt); + + editor.setTheme("ace/theme/chrome"); + editor.setShowPrintMargin(false); + editor.getSession().setMode("ace/mode/xml"); + editor.$blockScrolling = Infinity; + editor.$enableBlockSelect = false; + editor.$enableMultiselect = false; + if (XML == undefined) + editor.getSession().insert({ column: 0, row: 0 }, coreXML_tpl()) + else + editor.getSession().insert({ column: 0, row: 0 }, XML) + editor.moveCursorTo({ column: 0, row: 0 }); + }); + }); + + this.$el.find("#core .cb-ace").height(this.$el.find("#files").height() - this.$el.find("#coreHeader").height()) } } diff --git a/src/js/views/app-view.js b/src/js/views/app-view.js index d556c79..f59c440 100644 --- a/src/js/views/app-view.js +++ b/src/js/views/app-view.js @@ -8,6 +8,7 @@ import ElementSet from '../data/model-ElementSet'; import FileUploadComponent from '../components/fileupload'; import SetElementsComponent from '../components/setelements'; import Events from '../utils/backbone-events.js'; +import loadScript from "../utils/load-script" // Sadly Bootstrap js is not ES6 ready yet. var $ = global.jQuery = require('jquery'); @@ -105,8 +106,21 @@ class CoreBuilder extends Backbone.View { arrange(e) { e.preventDefault(); let pos = 6 - $(e.target).index(); - this.xmlFilesView.arrange(pos); - this.coreView.renderEntries() + + const edCnt = this.$el.find("#core .cb-ace").get(0); + + loadScript("dist/js/libs/ace/ace.js", { scriptTag: true }).then(() => { + var editor; + ace.require(['ace/ace'], (loadedAce) => { + editor = loadedAce.edit(edCnt); + + let XML = "" + for (let i = 0; i < editor.getSession().getLength(); i++) + XML += editor.getSession().getLine(i) + '\n' + + this.xmlFilesView.arrange(pos, XML) + }); + }); } } diff --git a/src/scss/workspace.scss b/src/scss/workspace.scss index 648a87e..0fc93b8 100644 --- a/src/scss/workspace.scss +++ b/src/scss/workspace.scss @@ -37,75 +37,84 @@ .row { margin: 0; - .cb-XMLFile { - background: Grey; - border: 1px solid White; - min-height: 20em; - padding: 2px; - - .cb-xf-title { - min-height: 2em; + .cb-ace { + min-height: inherit; + } + } + } + + .cb-XMLFile { + background: Grey; + border: 1px solid White; + min-height: 20em; + padding: 2px; + + .cb-xf-title { + min-height: 2em; + color: white; + font-weight: bold; + + .cb-xf-controls { + float: right; + + a:link, + a:hover, + a:active, + a:visited { color: white; - font-weight: bold; - - .cb-xf-controls { - float: right; - - a:link, - a:hover, - a:active, - a:visited { - color: white; - text-decoration: none; - } - - button span { - display: none; - } - } + text-decoration: none; + } - .cb-xf-xp-drawer { - color: black; - width: 250px; - background-color: $logo-secondary; - height: 35px; - margin: auto; - position: absolute; - top: 36px; - left: 0; - right: 0; - z-index: 999 !important; - text-align: center; - border-radius: 5px; - display: none; - - span { - display: inline-block; - margin-top: 5px; - } - - span.cb-xf-xp-d-ctrls { - display: inline-block; - float: right; - margin: 5px 10px 0 0; - - a.cb-xf-xp-d-b { - } - } - } + button span { + display: none; + } + } - .cb-xf-xp-drawer.cb-xp-ok { - background-color: green; - } - .cb-xf-xp-drawer.cb-xp-fail { - background-color: red; - } + .cb-xf-xp-drawer { + color: black; + width: 250px; + background-color: $logo-secondary; + height: 35px; + margin: auto; + position: absolute; + top: 36px; + left: 0; + right: 0; + z-index: 999 !important; + text-align: center; + border-radius: 5px; + display: none; + + span { + display: inline-block; + margin-top: 5px; } - .cb-ace { - min-height: inherit; + span.cb-xf-xp-d-ctrls { + display: inline-block; + float: right; + margin: 5px 10px 0 0; + + a.cb-xf-xp-d-b { + } } } + + .cb-xf-xp-drawer.cb-xp-ok { + background-color: green; + } + .cb-xf-xp-drawer.cb-xp-fail { + background-color: red; + } + } + } + + #core { + width: 100%; + + #coreSubHeader { + display: flex; + justify-content: space-between; } } }