mirror of
https://github.com/sigmasternchen/telescope
synced 2025-03-15 08:08:59 +00:00
first commit
This commit is contained in:
overflowerror
commit
efed9cb991
2 changed files with 169 additions and 0 deletions
20
site.html
Normal file
20
site.html
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||||
|
<script src="telescope.js"></script>
|
||||||
|
<script>
|
||||||
|
window.onload = function() {
|
||||||
|
var telescope = new Telescope({
|
||||||
|
"element": document.getElementById("tele"),
|
||||||
|
"text": "[Hi]{Hello [friends]{friends and followers}}. [This]{This [website]{[small web page]{static web page, that is [rather small]{only 10 lines of [code]{code (if you exclude [javascript]{javascript - Which is a scripting language [for websites]{[designed]{designed (but often abused for [other]{[partly]{at least partly} bad} [things]{things, as for example identifying [users]{the browsers of users}})} for dynamic [content]{content - like telescope-texts -} on the client side}.})}}},}} [is]{is actually} a [demo]{[demonstration]{nice demonstration} of the [telescope module]{telescope module, I wrote [some time ago]{on [the 16th]{Sunday, the 16th} of October [2016]{[2016]{2016 (the year Donald Trump got elected as the new US president)}, for [a friend]{Adrian, a friend} of [mine]{mine. He was [fascinated]{absolutely fascinated} by that [website]{[website]{website (http://www.telescopictext.org/text/KPx0nlXlKTciC)} that shows you a [telescope-text]{text which you can [expand]{[expand]{expand [nearly]{nearly (okay, [not really]{not really, but you get the idea})} [endlessly]{endlessly to get more and more information}} by clicking on highlighted word}. That was really [cool]{cool, so I decided to make [that]{this telescope-text-thingamajig} [myself]{[myself]{myself (I accidentally wrote [mysql here.]{mysql here. Yes, I am a nerd. ^^})}. That was [fun]{fun but [lots of]{lots of hard} [work]{work because I wanted for [it]{the program} [to be intuitive]{that the creation of texts is [intuitive]{intuitive. The [user]{user of this module} [has]{only has} to specify the [text]{plain [text]{text, of what the user wishes to [display]{display as triggers and [what]{which text} to substitute it [with]{which. Check out the [source code]{source code (You can also check out the [module]{modules source [code]{file telescope.js}}.)} of [the demo]{this [small]{small ([Okay]{Okay, okay}, it's [not]{not really} [small]{small at [all]{all, I admit it}}.)} [demo]{[demonstration]{demonstration web page}}} to get [a idea]{the idea on how this [works]{works. What you think about this? [Tell me]{Tell me by commenting the code on [github]{github (you can also [fork]{fork it and send pull [requests]{requests (to make it better)} for} [it]{it if you like to})}}}}}}}}}}}}}}}}}}}}.}",
|
||||||
|
"flags": Telescope.USE_STYLES
|
||||||
|
});
|
||||||
|
telescope.display();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="tele"></div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
149
telescope.js
Normal file
149
telescope.js
Normal file
|
|
@ -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";
|
||||||
|
}
|
||||||
|
|
||||||
Loading…
Reference in a new issue