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