Difference between revisions of "JavaScript"

From Freephile Wiki
Jump to navigation Jump to search
(New page: * MediaWiki/js * User Scripts ala Grease Monkey or Userscripts.org [http://phiffer.org Dan Phiffer] wrote this little greasemonkey script that turns any mediawiki article into a sl...)
 
(modified layout of the slides)
Line 10: Line 10:
  
 
var wikipedia_presentation = {
 
var wikipedia_presentation = {
    setup: function() {
+
setup: function() {
       
+
 
        this.sections = [];
+
this.sections = [];
        this.pos = 0;
+
this.pos = 0;
       
+
 
        var body = document.getElementsByTagName('body')[0];
+
var body = document.getElementsByTagName('body')[0];
        this.orig_markup = body.innerHTML;
+
this.orig_markup = body.innerHTML;
        var markup = body.innerHTML;
+
var markup = body.innerHTML;
        var start = 0;
+
var start = 0;
        var end = markup.indexOf('<span class="editsection"');
+
var end = markup.indexOf('<span class="editsection"');
        while (end != -1) {
+
while (end != -1) {
            start = markup.indexOf('</span>', end);
+
start = markup.indexOf('</span>', end);
            end = markup.indexOf('<span class="editsection"', start);
+
end = markup.indexOf('<span class="editsection"', start);
            if (end == -1) {
+
if (end == -1) {
                end = markup.indexOf('<div class="printfooter">', start);
+
end = markup.indexOf('<div class="printfooter">', start);
                this.sections.push(markup.substr(start, end - start));
+
this.sections.push(markup.substr(start, end - start));
                end = -1;
+
end = -1;
            }
+
}
            this.sections.push(markup.substr(start, end - start));
+
this.sections.push(markup.substr(start, end - start));
        }
+
}
        if (this.sections.length > 0) {
+
if (this.sections.length > 0) {
            var div = document.getElementById('bodyContent');
+
var div = document.getElementById('bodyContent');
            var link = div.insertBefore(document.createElement('a'), div.firstChild);
+
var link = div.insertBefore(document.createElement('a'), div.firstChild);
            link.innerHTML = 'Start presentation';
+
link.innerHTML = 'Start presentation';
            link.setAttribute('href', '#presentation');
+
link.setAttribute('href', '#presentation');
            link.addEventListener('click', this.start, false);
+
link.addEventListener('click', this.start, false);
        }
+
}
    },
+
},
   
+
 
    start: function() {
+
start: function() {
        var body = document.getElementsByTagName('body')[0];
+
var body = document.getElementsByTagName('body')[0];
        body.innerHTML = '';
+
body.innerHTML = '';
        body.style.textAlign = 'center';
+
body.style.textAlign = 'center';
       
+
 
        var prev = body.appendChild(document.createElement('a'));
+
var prev = body.appendChild(document.createElement('a'));
        prev.innerHTML = '&larr; Prev';
+
prev.innerHTML = '&larr; Prev';
        prev.setAttribute('href', '#prev');
+
prev.setAttribute('href', '#prev');
        prev.style.font = '11px verdana, sans-serif';
+
prev.style.font = '11px verdana, sans-serif';
        prev.addEventListener('click', function() {
+
prev.addEventListener('click', function() {
          wikipedia_presentation.prev();
+
wikipedia_presentation.prev();
        }, false);
+
}, false);
       
+
 
        body.appendChild(document.createTextNode(' / '));
+
body.appendChild(document.createTextNode(' / '));
       
+
 
        var stop = body.appendChild(document.createElement('a'));
+
var stop = body.appendChild(document.createElement('a'));
        stop.innerHTML = 'Exit';
+
stop.innerHTML = 'Exit';
        stop.setAttribute('href', '#exit');
+
stop.setAttribute('href', '#exit');
        stop.style.font = '11px verdana, sans-serif';
+
stop.style.font = '11px verdana, sans-serif';
        stop.addEventListener('click', function() {
+
stop.addEventListener('click', function() {
          wikipedia_presentation.stop();
+
wikipedia_presentation.stop();
        }, false);
+
}, false);
       
+
 
        body.appendChild(document.createTextNode(' / '));
+
body.appendChild(document.createTextNode(' / '));
       
+
 
        var next = body.appendChild(document.createElement('a'));
+
var next = body.appendChild(document.createElement('a'));
        next.innerHTML = 'Next &rarr;';
+
next.innerHTML = 'Next &rarr;';
        next.setAttribute('href', '#next');
+
next.setAttribute('href', '#next');
        next.style.font = '11px verdana, sans-serif';
+
next.style.font = '11px verdana, sans-serif';
        next.addEventListener('click', function() {
+
next.addEventListener('click', function() {
          wikipedia_presentation.next();
+
wikipedia_presentation.next();
        }, false);
+
}, false);
       
+
 
        var slide = body.appendChild(document.createElement('div'));
+
var slide = body.appendChild(document.createElement('div'));
        slide.setAttribute('id', 'wikipedia_presentation');
+
slide.setAttribute('id', 'wikipedia_presentation');
        slide.style.width = '500px';
+
slide.style.width = '780px';
        slide.style.margin = '100px auto';
+
slide.style.margin = '10px 10px 10px 20px';
        slide.style.textAlign = 'left';
+
slide.style.textAlign = 'left';
        slide.style.font = '2em verdana, sans-serif';
+
slide.style.font = '2em verdana, sans-serif';
       
+
 
        slide.innerHTML = wikipedia_presentation.sections[0];
+
slide.innerHTML = wikipedia_presentation.sections[0];
        var items = slide.getElementsByTagName('li');
+
var items = slide.getElementsByTagName('li');
        for (var i = 1; i < items.length; i++) {
+
for (var i = 1; i < items.length; i++) {
            items[i].style.display = 'none';
+
items[i].style.display = 'none';
        }
+
}
       
+
 
        document.addEventListener('keypress', wikipedia_presentation.keypress, false);
+
document.addEventListener('keypress', wikipedia_presentation.keypress, false);
    },
+
},
   
+
 
    stop: function() {
+
stop: function() {
        var body = document.getElementsByTagName('body')[0];
+
var body = document.getElementsByTagName('body')[0];
        body.innerHTML = wikipedia_presentation.orig_markup;
+
body.innerHTML = wikipedia_presentation.orig_markup;
        body.style.textAlign = 'left';
+
body.style.textAlign = 'left';
        wikipedia_presentation.setup();
+
wikipedia_presentation.setup();
        document.removeEventListener('keypress', wikipedia_presentation.keypress, false);
+
document.removeEventListener('keypress', wikipedia_presentation.keypress, false);
    },
+
},
   
+
 
    keypress: function(event) {
+
keypress: function(event) {
        if (event.keyCode == 39) {
+
if (event.keyCode == 39) {
            wikipedia_presentation.next();
+
wikipedia_presentation.next();
        } else if (event.keyCode == 37) {
+
} else if (event.keyCode == 37) {
            wikipedia_presentation.prev();
+
wikipedia_presentation.prev();
        }
+
}
    },
+
},
   
+
 
    prev: function() {
+
prev: function() {
        this.pos--;
+
this.pos--;
        if (this.pos == -1) {
+
if (this.pos == -1) {
            this.pos = this.sections.length - 1;
+
this.pos = this.sections.length - 1;
        }
+
}
        var slide = document.getElementById('wikipedia_presentation');
+
var slide = document.getElementById('wikipedia_presentation');
        slide.innerHTML = wikipedia_presentation.sections[this.pos];
+
slide.innerHTML = wikipedia_presentation.sections[this.pos];
    },
+
},
   
+
 
    next: function() {
+
next: function() {
       
+
 
        var slide = document.getElementById('wikipedia_presentation');
+
var slide = document.getElementById('wikipedia_presentation');
        var items = slide.getElementsByTagName('li');
+
var items = slide.getElementsByTagName('li');
       
+
 
        var hidden = 0;
+
var hidden = 0;
        for (var i = 0; i < items.length; i++) {
+
for (var i = 0; i < items.length; i++) {
            if (items[i].style.display == 'none') {
+
if (items[i].style.display == 'none') {
                hidden++;
+
hidden++;
            }
+
}
        }
+
}
       
+
 
        if (hidden > 0) {
+
if (hidden > 0) {
            items[items.length - hidden].style.display = 'list-item';
+
items[items.length - hidden].style.display = 'list-item';
            return;
+
return;
        }
+
}
       
+
 
        this.pos++;
+
this.pos++;
        if (this.pos == this.sections.length) {
+
if (this.pos == this.sections.length) {
            this.pos = 0;
+
this.pos = 0;
        }
+
}
        slide.innerHTML = wikipedia_presentation.sections[this.pos];
+
slide.innerHTML = wikipedia_presentation.sections[this.pos];
        var items = slide.getElementsByTagName('li');
+
var items = slide.getElementsByTagName('li');
        for (var i = 1; i < items.length; i++) {
+
for (var i = 1; i < items.length; i++) {
            items[i].style.display = 'none';
+
items[i].style.display = 'none';
        }
+
}
       
+
 
    }
+
}
 
};
 
};
  

Revision as of 13:31, 5 December 2008

Dan Phiffer wrote this little greasemonkey script that turns any mediawiki article into a slide presentation

// ==UserScript==
// @name           Wikipedia Presentation
// @namespace      http://phiffer.org/
// @description    Turn a Wikipedia article into a presentation
// ==/UserScript==

var wikipedia_presentation = {
setup: function() {

this.sections = [];
this.pos = 0;

var body = document.getElementsByTagName('body')[0];
this.orig_markup = body.innerHTML;
var markup = body.innerHTML;
var start = 0;
var end = markup.indexOf('<span class="editsection"');
while (end != -1) {
start = markup.indexOf('</span>', end);
end = markup.indexOf('<span class="editsection"', start);
if (end == -1) {
end = markup.indexOf('<div class="printfooter">', start);
this.sections.push(markup.substr(start, end - start));
end = -1;
}
this.sections.push(markup.substr(start, end - start));
}
if (this.sections.length > 0) {
var div = document.getElementById('bodyContent');
var link = div.insertBefore(document.createElement('a'), div.firstChild);
link.innerHTML = 'Start presentation';
link.setAttribute('href', '#presentation');
link.addEventListener('click', this.start, false);
}
},

start: function() {
var body = document.getElementsByTagName('body')[0];
body.innerHTML = '';
body.style.textAlign = 'center';

var prev = body.appendChild(document.createElement('a'));
prev.innerHTML = '&larr; Prev';
prev.setAttribute('href', '#prev');
prev.style.font = '11px verdana, sans-serif';
prev.addEventListener('click', function() {
wikipedia_presentation.prev();
}, false);

body.appendChild(document.createTextNode(' / '));

var stop = body.appendChild(document.createElement('a'));
stop.innerHTML = 'Exit';
stop.setAttribute('href', '#exit');
stop.style.font = '11px verdana, sans-serif';
stop.addEventListener('click', function() {
wikipedia_presentation.stop();
}, false);

body.appendChild(document.createTextNode(' / '));

var next = body.appendChild(document.createElement('a'));
next.innerHTML = 'Next &rarr;';
next.setAttribute('href', '#next');
next.style.font = '11px verdana, sans-serif';
next.addEventListener('click', function() {
wikipedia_presentation.next();
}, false);

var slide = body.appendChild(document.createElement('div'));
slide.setAttribute('id', 'wikipedia_presentation');
slide.style.width = '780px';
slide.style.margin = '10px 10px 10px 20px';
slide.style.textAlign = 'left';
slide.style.font = '2em verdana, sans-serif';

slide.innerHTML = wikipedia_presentation.sections[0];
var items = slide.getElementsByTagName('li');
for (var i = 1; i < items.length; i++) {
items[i].style.display = 'none';
}

document.addEventListener('keypress', wikipedia_presentation.keypress, false);
},

stop: function() {
var body = document.getElementsByTagName('body')[0];
body.innerHTML = wikipedia_presentation.orig_markup;
body.style.textAlign = 'left';
wikipedia_presentation.setup();
document.removeEventListener('keypress', wikipedia_presentation.keypress, false);
},

keypress: function(event) {
if (event.keyCode == 39) {
wikipedia_presentation.next();
} else if (event.keyCode == 37) {
wikipedia_presentation.prev();
}
},

prev: function() {
this.pos--;
if (this.pos == -1) {
this.pos = this.sections.length - 1;
}
var slide = document.getElementById('wikipedia_presentation');
slide.innerHTML = wikipedia_presentation.sections[this.pos];
},

next: function() {

var slide = document.getElementById('wikipedia_presentation');
var items = slide.getElementsByTagName('li');

var hidden = 0;
for (var i = 0; i < items.length; i++) {
if (items[i].style.display == 'none') {
hidden++;
}
}

if (hidden > 0) {
items[items.length - hidden].style.display = 'list-item';
return;
}

this.pos++;
if (this.pos == this.sections.length) {
this.pos = 0;
}
slide.innerHTML = wikipedia_presentation.sections[this.pos];
var items = slide.getElementsByTagName('li');
for (var i = 1; i < items.length; i++) {
items[i].style.display = 'none';
}

}
};

wikipedia_presentation.setup();