From efed9cb99130c9da983e5f9156ed208d7cd8acf1 Mon Sep 17 00:00:00 2001 From: overflowerror Date: Mon, 19 Dec 2016 00:52:24 +0100 Subject: [PATCH] first commit --- site.html | 20 +++++++ telescope.js | 149 +++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 169 insertions(+) create mode 100644 site.html create mode 100644 telescope.js diff --git a/site.html b/site.html new file mode 100644 index 0000000..92c6f6d --- /dev/null +++ b/site.html @@ -0,0 +1,20 @@ + + + + + + + + +
+ + diff --git a/telescope.js b/telescope.js new file mode 100644 index 0000000..a15f62d --- /dev/null +++ b/telescope.js @@ -0,0 +1,149 @@ +var Telescope = function(obj) { + if (!obj.element) + throw "No target element given!"; + this.element = obj.element; + if (!obj.text) + throw "No text given."; + this.text = this.parseText(obj.text); + if (obj.style) + this.style = obj.style; + + if (obj.flags) { + this.useStyles = obj.flags & Telescope.USE_STYLES; + } +} +Telescope.prototype.style = { + "triggers": { + "cursor": "pointer", + "backgroundColor": "#ddd" + }, + "text": { + "fontSize": "30px", + "fontFamily": "Arial" + } +} +Telescope.USE_STYLES = 1 << 1; +Telescope.prototype.useStyles = false; +Telescope.prototype.text = undefined; +Telescope.prototype.element = undefined; +Telescope.prototype.parseText = function(string) { + var scope = []; + + var tmpObj = {}; + + var index = string.indexOf("["); + while (index >= 0) { + scope.push(string.substring(0, index)); + string = string.substring(index + 1); + + tmpObj = { + "trigger": "", + "sub": [] + } + + index = string.indexOf("]"); + + if (index < 0) + throw "Syntax Error: ']' expected"; + + tmpObj.trigger = string.substring(0, index); + + string = string.substring(index + 1); + + var layer = getFirstLayer(string, "{", "}"); + + if (!layer) + throw "Syntax Error: '{' expected"; + + scope.push(string.substring(0, layer[0])); + + var sub = string.substring(layer[0] + 1, layer[1]); + string = string.substring(layer[1] + 1); + + tmpObj.sub = this.parseText(sub); + + scope.push(tmpObj); + + index = string.indexOf("["); + } + scope.push(string); + + return scope; +} +Telescope.prototype.display = function() { + this.element.appendChild(this.generate(this.text, true)); +}; + +Telescope._id = 0; +Telescope.getId = function() { + return "telescope_id_" + Telescope._id++; +} + +Telescope.prototype.generate = function(text, show) { + var obj = document.createElement("span"); + obj.className = "TelescopeText"; + if (this.useStyles) { + for (var attr in this.style.text) { + obj.style[attr] = this.style.text[attr]; + } + } + if (!show) + obj.style.display = "none"; + for (var i = 0; i < text.length; i++) { + if ((typeof text[i]) == "string") + obj.appendChild(document.createTextNode(text[i])); + else { + var id = Telescope.getId(); + var trigger = document.createElement("span"); + if (this.useStyles) { + for (var attr in this.style.triggers) { + trigger.style[attr] = this.style.triggers[attr]; + } + } + trigger.className = "TelescopeTrigger"; + trigger.appendChild(document.createTextNode(text[i].trigger)); + trigger.id = id + "_trigger"; + trigger.onclick = function() { + Telescope.show(this.id.substring(0, this.id.indexOf("_trigger"))); + }; + obj.appendChild(trigger); + var sub = this.generate(text[i].sub); + sub.id = id; + obj.appendChild(sub); + } + } + + return obj; +} + +Telescope.show = function(id) { + document.getElementById(id + "_trigger").style.display = "none"; + document.getElementById(id).style.display = "inline"; +} + +var getFirstLayer = function(string, s, e) { + var first = -1; + + var ignore = 0; + + for (var i = 0; i < string.length; i++) { + if (first < 0) { + if (string.charAt(i) == e) + throw "Syntax Error: Unexpected '" + e + "'"; + else if (string.charAt(i) == s) + first = i; + } else { + if (string.charAt(i) == s) + ignore++; + else if (string.charAt(i) == e) + ignore--; + if (ignore < 0) + return [first, i]; + } + } + if (first < 0) + return undefined; + + throw "Syntax Error: '" + e + "' expected"; +} +