Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Core viewing window #4

Merged
merged 2 commits into from
Feb 7, 2021
Merged

Core viewing window #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
67f53c5
Editable core
Feb 6, 2021
86b2643
View HTML core
Feb 7, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 11 additions & 3 deletions src/js/templates/core-tpl.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,16 @@
import * as Handlebars from 'handlebars';

let core_tpl = `
<h4 id="ViewCoreLabel">View Core</h4>
<button type="button" class="btn btn-sm btn-primary" id="cb-vc-download"><i class="fa fa-download"></i> Download Core</button>
<div id="coreEntries"></div>
<div id="coreHeader">
<div id="coreSubHeader">
<h4 id="ViewCoreLabel">View Core</h4>
<button type="button" class="btn btn-sm btn-primary" id="cb-vc-download"><i class="fa fa-download"></i> Download Core</button>
</div>
<button type="button" class="btn btn-secondary" id="toggling">
<i class="fa fa-code"></i>
<span>HTML</span>
</button>
</div>
<div class="cb-XMLFile"></div>
`
export default Handlebars.compile(core_tpl);
35 changes: 16 additions & 19 deletions src/js/templates/coreXML-tpl.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,24 +5,21 @@ let coreXML_tpl = `<?xml version="1.0" encoding="UTF-8"?>
<?xml-model href="http://www.tei-c.org/release/xml/tei/custom/schema/relaxng/tei_all.rng" type="application/xml"
schematypens="http://purl.oclc.org/dsdl/schematron"?>
<TEI xmlns="http://www.tei-c.org/ns/1.0">
<teiHeader>
<fileDesc>
<titleStmt>
<title>Title</title>
</titleStmt>
<publicationStmt>
<p>Publication Information</p>
</publicationStmt>
<sourceDesc>
<p>Information about the source</p>
</sourceDesc>
</fileDesc>
</teiHeader>
<standoff>
{{{this}}}
</standoff>
</TEI>

`
<teiHeader>
<fileDesc>
<titleStmt>
<title>Title</title>
</titleStmt>
<publicationStmt>
<p>Publication Information</p>
</publicationStmt>
<sourceDesc>
<p>Information about the source</p>
</sourceDesc>
</fileDesc>
</teiHeader>
<standoff>
</standoff>
</TEI>`

export default Handlebars.compile(coreXML_tpl);
10 changes: 0 additions & 10 deletions src/js/templates/coreentries-tpl.js
View file
Open in desktop

This file was deleted.

30 changes: 16 additions & 14 deletions src/js/templates/xmlfile-tpl.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,23 @@
import * as Handlebars from 'handlebars';

let xmlfile_tpl = `
<div class="cb-xf-title row">
<div class="col-xs-6">{{filename}}</div>
<div class="btn-group btn-group-sm cb-ce-entry-ctrls cb-xf-controls" role="group">
<button type="button" class="btn btn-secondary-outline cb-xf-xpointer" data-toggle="button"><i class="fa fa-hand-o-down"></i> <span>XPointer</span></button>
<button type="button" class="btn btn-secondary-outline cb-xf-empty" data-toggle="button"><strong>Ø</strong> <span>Add Empty</span></button>
<button type="button" class="btn btn-secondary-outline cb-xf-close"><i class="fa fa-times"></i> <span>Close</span></button>
{{#if this}}
<div class="cb-xf-title row">
<div class="col-xs-6">{{filename}}</div>
<div class="btn-group btn-group-sm cb-ce-entry-ctrls cb-xf-controls" role="group">
<button type="button" class="btn btn-secondary-outline cb-xf-xpointer" data-toggle="button"><i class="fa fa-hand-o-down"></i> <span>XPointer</span></button>
<button type="button" class="btn btn-secondary-outline cb-xf-empty" data-toggle="button"><strong>Ø</strong> <span>Add Empty</span></button>
<button type="button" class="btn btn-secondary-outline cb-xf-close"><i class="fa fa-times"></i> <span>Close</span></button>
</div>
<div class="cb-xf-xp-drawer">
<span class="cb-xf-xp-msg">Make a selection</span>
<span class="cb-xf-xp-d-ctrls">
<a href="#" class="cb-xf-xp-d-b cb-xf-xp-cancel"><i class="fa fa-times"></i></a>
<a href="#" class="cb-xf-xp-d-b cb-xf-xp-ok"><i class="fa fa-check"></i></a>
</div>
</div>
</div>
<div class="cb-xf-xp-drawer">
<span class="cb-xf-xp-msg">Make a selection</span>
<span class="cb-xf-xp-d-ctrls">
<a href="#" class="cb-xf-xp-d-b cb-xf-xp-cancel"><i class="fa fa-times"></i></a>
<a href="#" class="cb-xf-xp-d-b cb-xf-xp-ok"><i class="fa fa-check"></i></a>
</div>
</div>
</div>
{{/if}}
<div class="cb-ace"></div>
`

Expand Down
171 changes: 134 additions & 37 deletions src/js/views/Core-view.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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');
Expand All @@ -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 += "<p><table style='background-color: #FFFF00;'><tr><td>" + childNode2.nodeName

for (let attribute of childNode2.attributes)
if (attribute.name == "type") {
childNodes2 += ' "' + attribute.value + '"'
}

childNodes2 += "</td></tr><tr><td>"

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 += "<p><table style='background-color: #CCFFCC;'><tr><td>" + childNode3.nodeName

Prism.highlightAll()
for (let attribute of childNode3.attributes)
if (attribute.name == "type") {
childNodes3 += ' "' + attribute.value + '"'
}

childNodes3 += "</td></tr><tr><td>"

if (!childNode3.children[0].children.length)
childNodes3 += '"' + childNode3.children[0].attributes[0].value + '"'

childNodes3 += "</td></tr></table></p>"
}

childNodes2 += childNodes3
}

childNodes2 += "</td></tr></table></p>"
}
this.$el.find("#core #HTML").append("<p><table style='background-color: #99CC00;'><tr><td>" + childNode1.nodeName + childNodes2 + "</td></tr></table></p>")
}
})
}
});
});
}

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($("<div>").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("</standoff>")) {
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("</standoff>"), row: i }, XML + '\t');
break
}
});
});

Prism.highlightAll();
this.showHTML()
}
}

}
Expand Down
35 changes: 32 additions & 3 deletions src/js/views/XMLFiles-view.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {

Expand All @@ -22,7 +25,7 @@ class XMLFilesView extends Backbone.View {
this.arrange();
}

arrange(cols) {
arrange(cols, XML) {
if (!cols) {
if (this.cols) {
cols = this.cols;
Expand Down Expand Up @@ -52,12 +55,38 @@ class XMLFilesView extends Backbone.View {
for (let row of rows) {
let div = $('<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($("<div>").attr("id", "filesCore").append(divFiles).append($("<div>").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())
}
}

Expand Down
Loading