MediaWiki:Common.js
Aus GIB - Glossar der Bildphilosophie
/*
Animated Tagcloud -- based on JS-Cumulus - WP-Cumulus in JavaScript (codenamed jscumulus)
Based on Stratus plugin by Dawid Fatyga (fatyga@student.agh.edu.pl)
Based on WP-Cumulus by Roy Tanck (http://www.roytanck.com)
@author Jeroen van Warmerdam (aka jerone or jeronevw) (http://www.jeroenvanwarmerdam.nl)
@date 24-05-2012 02:15
@version 0.2.5
Copyright 2010 - 2012, Jeroen van Warmerdam
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
This variant by JRJS 2023
*/
(function(_win, _doc, undefined){
// Activate ECMAScript 5 Strict Mode;
"use strict";
/* Defaults */
var Defaults = {
ID : "tagCloud", // String => Tagcloud id;
Class : "tagCloud", // String => Tagcloud class;
Width : 400, // Integer => Tagcloud width in pixels;
Heigth : 400, // Integer => Tagcloud height in pixels;
Consistent : true, // Boolean => Devide tags evenly;
Rank : 30, // Integer 0-100 => Tag importance in procents;
Url : "#", // String URL => Tag url;
OpenInNewWindow: false, // Boolean => Open tag url in new window or tab;
FontMin : 10, // Float => Font size for smallest tag in pixels;
FontMax : 24, // Float => Font size for biggest tag in pixels;
Depth : 150, // Integer => Perspective depth;
AnimationTime : 1, // Integer => Animation time and interval, the less it is, the faster the animation is;
HoverStop : 15, // Integer 0-100 => Percent of decrease in animation speed when cursor is removed out of the tagcloud;
HoverTagStop : 95, // Integer 0-100 => Percent of decrease in animation speed when tag is hovered;
OverWrite : false // Boolean => Override any existing HTML in the tagcloud element;
};
/* Variables */
var _TagCloud = _win.TagCloud,
_Tag = _win.Tag,
_Vector = _win.Vector,
_Surface = _win.Surface,
_TagID = 1,
_obj = Object.prototype.toString,
_objObj = "[object Object]",
isObject = function(arg) { return _obj.call(arg) === _objObj; },
isElement = function(arg) { return !!arg.nodeType; },
Radian = Math.PI / 180,
sine = [], cosine = [],
Sine = (function(){
var i = 0, total = 3600;
while(i < total){
sine[i] = Math.sin(i / 10 * Radian);
i++;
}
return function Sine(angle){
while(angle < 0){
angle += 360;
}
return sine[Math.round(angle * 10) % total];
};
})(),
Cosine = (function(){
var i = 0, total = 3600;
while(i < total){
cosine[i] = Math.cos(i / 10 * Radian);
i++;
}
return function Cosine(angle){
return cosine[Math.round(Math.abs(angle) * 10) % total];
};
})(),
Event = {
Add : (function(){
if(_doc.addEventListener){
return function(obj, type, fn){
fn = Event.Fix.call(this, type === "mouseenter" || type === "mouseleave" ? Event.mouseEnter(fn) : fn);
type = type === "mouseenter" && "mouseover" || type === "mouseleave" && "mouseout" || type;
obj.addEventListener(type, fn, false);
return function Add(){
obj.removeEventListener(type, fn, false);
return true;
};
};
} else if(_doc.attachEvent){
return function(obj, type, fn){
fn = Event.Fix.call(this, fn);
obj.attachEvent("on" + type, fn);
return function Add(){
obj.detachEvent("on" + type, fn);
return true;
};
};
}
return function Add(){
};
})(),
Fix : function(fn){
return function(event){
if(!event.target){
event.target = event.srcElement || _doc;
}
if(event.target.nodeType === 3){
event.target = event.target.parentNode;
}
if(!event.relatedTarget && event.fromElement){
event.relatedTarget = event.fromElement === event.target ? event.toElement : event.fromElement;
}
if(event.pageX === null && event.clientX !== null){
var docE = _doc.documentElement, body = _doc.body;
event.pageX = event.clientX + (docE && docE.scrollLeft || body && body.scrollLeft || 0) - (docE && docE.clientLeft || body && body.clientLeft || 0);
event.pageY = event.clientY + (docE && docE.scrollTop || body && body.scrollTop || 0) - (docE && docE.clientTop || body && body.clientTop || 0);
}
fn.call(this, event);
};
},
mouseEnter : function(fn){
var isAChildOf = function(parent, child){
if(parent === child){
return false;
}
while(child && child !== parent){
child = child.parentNode;
}
return child === parent;
};
return function mouseEnter(event){
var relTarget = event.relatedTarget;
if(this === relTarget || isAChildOf(this, relTarget)){
return;
}
fn.call(this, event);
};
}
};
/** Vector Class **/
var Vector = function(x, y, z){
this.set = function(x, y, z){
this.x = x || 0;
this.y = y || 0;
this.z = z || 0;
};
if(x !== undefined && isObject(x)){
this.set(x.x, x.y, x.z);
} else{
this.set(x, y, z);
}
this.Multiply = function(factor){
this.x *= factor;
this.y *= factor;
this.z *= factor;
return this;
};
this.Done = function(){
return Math.abs(this.x) > 0.01 || Math.abs(this.y) > 0.01 || Math.abs(this.z) > 0.01;
};
};
/** Surface Class **/
var Surface = function(width, height){
this.set = function(width, height){
this.width = width || 0;
this.height = height || 0;
};
if(width !== undefined && isObject(width)){
this.set(width.width, width.height);
} else{
this.set(width, height);
}
};
/** Mouse Attractor Class **/
var Attractor = function(parent, id, className){
this.id = id;
this.className = className;
this.active = false;
this.activeTag = false;
this.mouse = new Vector();
this.position = new Vector();
this.size = new Surface({
width : parent.size.width || Defaults.Width / 2,
height : parent.size.height || Defaults.Heigth / 2
});
this.element = _doc.createElement("div");
this.element.setAttribute("id", this.id);
this.element.setAttribute("class", this.className);
this.element.style.width = this.size.width + "px";
this.element.style.height = this.size.height + "px";
this.element.style.display = "block";
this.Activate = function(){
var self = this;
Event.Add(this.element, "mousemove", function(event){
return function(event){
if(!parent.active){
parent.Animate();
}
if(this.active && !this.activeTag){
this.Update();
this.mouse.set(
((-event.pageY + this.position.y) * 2 / this.size.height + 1) * 1.8,
((event.pageX - this.position.x) * 2 / this.size.width - 1) * 1.8
);
}
}.call(self, event);
});
Event.Add(this.element, "mouseenter", function(){
self.active = true;
});
Event.Add(this.element, "mouseleave", function(){
self.active = false;
});
return this;
};
this.Update = function(){ // Attractor's position can be moved, so position needs to be updated;
this.position = new Vector({
x : this.element.offsetLeft,
y : this.element.offsetTop
});
return this;
};
};
/** Tag Class **/
var Tag = function(title, rank, url, openInNewWindow, styles){
this.id = _TagID++;
this.title = title;
this.rank = ((!isNaN(rank) && rank >= 0 && rank <= 100) ? rank : Defaults.Rank) / 100;
this.url = url || (isNaN(rank) ? rank : false) || Defaults.Url;
this.position = new Vector();
openInNewWindow = arguments[4] && openInNewWindow || (openInNewWindow===true ? true : false) || (arguments[2]===true ? true : false) || Defaults.OpenInNewWindow;
styles = styles || isObject(arguments[3]) && arguments[3] || isObject(arguments[2]) && arguments[2] || isObject(arguments[1]) && arguments[1] || {};
var aa = _doc.createElement("a");
aa.setAttribute("id", "jsCumulus" + this.id);
aa.setAttribute("href", this.url);
if(openInNewWindow){
aa.setAttribute("target", "_blank");
}
aa.innerHTML = this.title;
for(var style in styles){
aa.style[style] = styles[style];
}
var li = _doc.createElement("li");
li.setAttribute("class", "tagClass");
li.style.position = "absolute";
li.appendChild(aa);
this.element = li;
this.Activate = function(attractor){
Event.Add(this.element, "mouseenter", function(){
attractor.active = false;
attractor.activeTag = true;
});
Event.Add(this.element, "mouseleave", function(){
attractor.active = true;
attractor.activeTag = false;
});
return this;
};
this.Update = function(delta, offset, fontMin, fontMax){
delta = delta || new Vector();
offset = offset || new Vector();
var pos = this.position,
deltA = delta.x || 0, deltB = delta.y || 0,
sinA = Sine(deltA), cosA = Cosine(deltA),
sinB = Sine(deltB), cosB = Cosine(deltB),
xz = pos.y * sinA + pos.z * cosA,
x = pos.x * cosB + xz * sinB,
y = pos.y * cosA + pos.z * (-sinA),
z = pos.x * (-sinB) + xz * cosB,
per = Defaults.Depth / (Defaults.Depth + z),
fontRange = fontMax - fontMin;
pos.set(x, y, z);
aa.style.opacity = Math.max(per - 0.7, 0) / 0.5 + 0.2;
aa.style.fontSize = this.rank * per * fontRange + fontMin + "px";
li.style.left = (offset.x + x * per) - (li.clientWidth / 2) + "px";
li.style.top = (offset.y + y * per) - (li.clientHeight / 2) + "px";
pos = deltA = deltB = sinA = cosA = sinB = cosB = xz = x = y = z = per = fontRange = null;
return this;
};
};
/** TagCloud Class **/
var TagCloud = function(/* element, */tags, width, height, options){
if(isElement(arguments[0])){
this.element = arguments[0];
tags = arguments[1];
width = arguments[2];
height = arguments[3];
options = arguments[4];
}
options = options || isObject(height) && height || isObject(width) && width || { };
this.fps = {
timer : null,
elm : null,
i : 0
};
this.active = false;
this.delta = new Vector(-2, -2);
this.size = new Surface({
width : parseFloat(!!parseFloat(width) && width || !!parseFloat(options.width) && options.width || Defaults.Width),
height : parseFloat(!!parseFloat(height) && height || !!parseFloat(options.height) && options.height || width || Defaults.Height)
});
this.font = {
min : parseFloat(options.fontMin) || Defaults.FontMin,
max : parseFloat(options.fontMax) || Defaults.FontMax
};
this.radius = options.radius || Math.min(this.size.width, this.size.height) / 4;
this.consistent = options.consistent !== undefined ? !!options.consistent : Defaults.Consistent;
this.overwrite = options.overwrite !== undefined ? !!options.overwrite : Defaults.OverWrite;
this.items = tags && tags.length && tags.slice(0) || (function(){ // slice(0) to clone the tags;
var i = 50, ii = 0, plusTags = [];
for(; i >= ii; --i){
plusTags[i] = new plusTags("+", 100);
}
return plusTags;
})();
this.attractor = new Attractor(
this,
options.id || Defaults.ID + Math.floor(Math.random() * 10000 + 1),
options.className || Defaults.Class
);
options = null;
this.Distribute = function(element){
element = element || this.element || _doc.body;
var container = _doc.createElement("ul"),
i = this.items.length - 1, l = 0, item;
if(this.overwrite){
while(element.firstChild){
element.removeChild(element.firstChild);
}
}
for(; i >= l; --i){
item = this.items[i];
if(item instanceof Tag && item.title){ // only Tag class allowed with at least titles;
container.appendChild(item.element);
item.Activate(this.attractor); // only activate after appended to DOM;
} else{
this.items.splice(i, 1);
}
}
this.attractor.element.appendChild(container);
element.appendChild(this.attractor.element);
this.attractor.Activate(); // only activate after appended to DOM;
container = i = l = null;
var p, t,
ii = 0, ll = this.items.length,
radius = this.radius;
for(; ii < ll; ii++){
p = this.consistent ? Math.acos(-1 + (2 * ii) / ll) : Math.random() * (Math.PI);
t = this.consistent ? Math.sqrt(ll * Math.PI) * p : Math.random() * (2 * Math.PI);
this.items[ii].position.set(
radius * Math.sin(p) * Math.cos(t),
radius * Math.sin(p) * Math.sin(t),
radius * Math.cos(p)
);
}
p = t = ii = ll = radius = null;
this.fps.elm = _doc.getElementById(this.attractor.id + "_fps");
this.Update();
return this;
};
this.Update = function(delta){
this.fps.timer = new Date() * 1;
delta = delta || new Vector();
var attractor = this.attractor.Update(),
i = 0, l = this.items.length;
this.position = new Vector({
x : this.size.width / 2 + attractor.position.x,
y : this.size.height / 2 + attractor.position.y
});
for(; i < l; i++){
this.items[i].Update(delta, this.position, this.font.min, this.font.max);
}
delta = attractor = i = l = null;
if(this.fps.elm){
this.fps.elm.innerHTML = parseInt(++this.fps.i / ((new Date() * 1) - this.fps.timer), 10) + " fps";
}
return this;
};
this.Pause = function(){
if(this.animation){
this.active = false;
_win.clearInterval(this.animation);
this.animation = null;
this.fps.timer = null;
this.fps.i = 0;
if(this.fps.elm){
this.fps.elm.innerHTML = "# fps";
}
}
return this;
};
this.Stop = function(){
this.delta = new Vector(); // reset the delta to 0, 0;
this.Pause(); // same effect;
return this;
};
this.Animate = function(delta){
if(delta){
this.Stop();
} // if delta exist a new animation is created and the old one should be stopped;
this.active = true;
this.delta = delta || this.delta || new Vector();
var self = this;
this.animation = _win.setInterval(function(){
return function animation(){
if(this.attractor.active){
this.delta = this.attractor.mouse;
} else{
this.delta.Multiply(((100 - Math.min(this.attractor.activeTag ? Defaults.HoverTagStop : Defaults.HoverStop, 99)) / 10 + 90) / 100);
}
if(this.delta.Done()){
this.Update(this.delta);
} else{
this.Stop();
}
}.call(self);
}, Defaults.AnimationTime);
return this;
};
if(this.element){
this.Distribute(this.element);
}
};
_win.TagCloud = TagCloud;
_win.Tag = Tag;
_win.Vector = Vector;
_win.Surface = Surface;
_win.JSCumulus = {
TagCloud : TagCloud,
Tag : Tag,
Vector : Vector,
Surface : Surface,
noConflict : function(){
_win.TagCloud = _TagCloud;
_win.Tag = _Tag;
_win.Vector = _Vector;
_win.Surface = _Surface;
return {
TagCloud : TagCloud,
Tag : Tag,
Vector : Vector,
Surface : Surface
};
}
};
})(window, window.document);
//JSCumulus.noConflict();
/* DEBUG */ window.console && console.time && console.time("TagCloud1");
/* TagCloud 1 */
var pfad = "./" //für online
//für localhost "../"
var tags = [
new Tag("Bildphilosophie", 100),
new Tag("Glossar", 80),
new Tag("Bild und Sprache",60, pfad + "index.php?title=Bild und Sprache"),
new Tag("Bild und Wahrnehmung", 60, pfad + "index.php?title=Bild und Wahrnehmung"),
new Tag("Bilder als Medien", 60, pfad + "index.php?title=Bilder als Medien"),
new Tag("Bilder als Zeichen", 60, pfad + "index.php?title=Bilder als Zeichen"),
new Tag("<center>Bildlichkeit:<br>Bedingungen und Folgen</center>", 60, pfad + "index.php?title=Bildlichkeit: Bedingungen und Folgen"),
new Tag("<center>Bildtheorie<br>Bildwissenschaft<br>Bildkritik</center>", 60, pfad + "index.php?title=Bildtheorie/Bildwissenschaft/Bildkritik"),
new Tag("Auswirkungen der Bildlichkeit", 20, pfad + "index.php?title=Auswirkungen der Bildlichkeit"),
new Tag("Bild und rhetorische Figur", 20, pfad + "index.php?title=Bild und rhetorische Figur"),
new Tag("Bildbewusstsein und Einbildungskraft", 20, pfad + "index.php?title=Bildbewusstsein und Einbildungskraft"),
new Tag("Bildmedien", 20, pfad + "index.php?title=Bildmedien"),
new Tag("Bildpragmatik", 20, pfad + "index.php?title=Bildpragmatik"),
new Tag("Bildsemantik", 20, pfad + "index.php?title=Bildsemantik"),
new Tag("Bildsyntax", 20, pfad + "index.php?title=Bildsyntax"),
new Tag("Bildtermini anderer Sprachen", 20, pfad + "index.php?title=Bildtermini anderer Sprachen"),
new Tag("Bildtheoretische Ansätze", 20, pfad + "index.php?title=Bildtheoretische Ansätze"),
new Tag("Bildverwendungstypen", 20, pfad + "index.php?title=Bildverwendungstypen"),
new Tag("Bildwahrnehmung", 20, pfad + "index.php?title=Bildwahrnehmung"),
new Tag("Bildwissenschaftliche Abgrenzungen", 20, pfad + "index.php?title=Bildwissenschaftliche Abgrenzungen"),
new Tag("Grundbegriffe der Bildlichkeit", 20, pfad + "index.php?title=Grundbegriffe der Bildlichkeit"),
new Tag("Historische Bildbegriffe", 20, pfad + "index.php?title=Historische Bildbegriffe"),
new Tag("Medientheorien: Übersicht", 20, pfad + "index.php?title=Medientheorien: Übersicht"),
new Tag("Schriftbildlichkeit", 20, pfad + "index.php?title=Schriftbildlichkeit"),
new Tag("Sprach-Bild-Bezüge", 20, pfad + "index.php?title=Sprach-Bild-Bezüge"),
new Tag("Sprechen über Bilder", 20, pfad + "index.php?title=Sprechen über Bilder"),
new Tag("Wahrnehmungstheorien: Übersicht", 20, pfad + "index.php?title=Wahrnehmungstheorien: Übersicht"),
new Tag("Zeichentheorien: Übersicht", 20, pfad + "index.php?title=Zeichentheorien: Übersicht")
];
var tags2 = [
new Tag("Bildphilosophie", 100),
new Tag("Glossar", 80),
new Tag("Bild und Sprache",60, pfad + "index.php?title=Bild und Sprache", {color: "white"}),
new Tag("Bild und Wahrnehmung", 60, pfad + "index.php?title=Bild und Wahrnehmung", {color: "white"}),
new Tag("Bilder als Medien", 60, pfad + "index.php?title=Bilder als Medien", {color: "white"}),
new Tag("Bilder als Zeichen", 60, pfad + "index.php?title=Bilder als Zeichen", {color: "white"}),
new Tag("<center>Bildlichkeit:<br>Bedingungen und Folgen</center>", 60, pfad + "index.php?title=Bildlichkeit: Bedingungen und Folgen", {color: "white"}),
new Tag("<center>Bildtheorie<br>Bildwissenschaft<br>Bildkritik</center>", 60, pfad + "index.php?title=Bildtheorie/Bildwissenschaft/Bildkritik", {color: "white"}),
new Tag("Auswirkungen der Bildlichkeit", 20, pfad + "index.php?title=Auswirkungen der Bildlichkeit", {color: "white"}),
new Tag("Bild und rhetorische Figur", 20, pfad + "index.php?title=Bild und rhetorische Figur", {color: "white"}),
new Tag("Bildbewusstsein und Einbildungskraft", 20, pfad + "index.php?title=Bildbewusstsein und Einbildungskraft", {color: "white"}),
new Tag("Bildmedien", 20, pfad + "index.php?title=Bildmedien", {color: "white"}),
new Tag("Bildpragmatik", 20, pfad + "index.php?title=Bildpragmatik", {color: "white"}),
new Tag("Bildsemantik", 20, pfad + "index.php?title=Bildsemantik", {color: "white"}),
new Tag("Bildsyntax", 20, pfad + "index.php?title=Bildsyntax", {color: "white"}),
new Tag("Bildtermini anderer Sprachen", 20, pfad + "index.php?title=Bildtermini anderer Sprachen", {color: "white"}),
new Tag("Bildtheoretische Ansätze", 20, pfad + "index.php?title=Bildtheoretische Ansätze", {color: "white"}),
new Tag("Bildverwendungstypen", 20, pfad + "index.php?title=Bildverwendungstypen", {color: "white"}),
new Tag("Bildwahrnehmung", 20, pfad + "index.php?title=Bildwahrnehmung", {color: "white"}),
new Tag("Bildwissenschaftliche Abgrenzungen", 20, pfad + "index.php?title=Bildwissenschaftliche Abgrenzungen"),
new Tag("Grundbegriffe der Bildlichkeit", 20, pfad + "index.php?title=Grundbegriffe der Bildlichkeit", {color: "white"}),
new Tag("Historische Bildbegriffe", 20, pfad + "index.php?title=Historische Bildbegriffe", {color: "white"}),
new Tag("Medientheorien: Übersicht", 20, pfad + "index.php?title=Medientheorien: Übersicht", {color: "white"}),
new Tag("Schriftbildlichkeit", 20, pfad + "index.php?title=Schriftbildlichkeit", {color: "white"}),
new Tag("Sprach-Bild-Bezüge", 20, pfad + "index.php?title=Sprach-Bild-Bezüge", {color: "white"}),
new Tag("Sprechen über Bilder", 20, pfad + "index.php?title=Sprechen über Bilder", {color: "white"}),
new Tag("Wahrnehmungstheorien: Übersicht", 20, pfad + "index.php?title=Wahrnehmungstheorien: Übersicht", {color: "white"}),
new Tag("Zeichentheorien: Übersicht", 20, pfad + "index.php?title=Zeichentheorien: Übersicht", {color: "white"})
];
//////////////////////////////
(function () {
var myElement = document.getElementById('GlossarCumulusDiv');
if (myElement != null)
{var GlossarCumulusNode = new TagCloud(tags, 800, 400);
GlossarCumulusNode.Distribute(myElement).Animate();
};
var myElementKlein = document.getElementById('GlossarCloudKlein');
if (myElementKlein != null)
{var GlossarCumulusNode = new TagCloud(tags2,
parseFloat((myElementKlein.clientWidth) - 20.0),
parseFloat(myElementKlein.clientWidth),
{fontMin: 5, fontMax: 10,
id: "TagCloud2X", overwrite: true });
GlossarCumulusNode.Distribute(myElementKlein).Animate(new Vector(2, -10, 0));
/* buttons */
document.getElementById("btn_tagcloud_reset").onclick = function() {
GlossarCumulusNode.Distribute(myElementKlein);
};
document.getElementById("btn_tagcloud_update").onclick = function() {
GlossarCumulusNode.Animate(new Vector(-20, 100, 0));
};
var x = 0;
document.getElementById("btn_tagcloud_pause").onclick = function() {
var running = x++ % 2;
GlossarCumulusNode[running ? "Animate" : "Pause"]();
this.value = running ? "Pause" : "Resume";
};
document.getElementById("btn_tagcloud_stop").onclick = function() {
GlossarCumulusNode.Stop();
};
};
}());
