Difference between revisions of "MediaWiki/Slideshow"
(adds indentation to make the script more readable) |
|||
(3 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
If you're using MediaWiki, then you are accustomed to being able to quickly and efficiently organize your thoughts. It's a natural extension then to want to use those same "notes" in a presentation. There are many ways to achieve such a result. | If you're using MediaWiki, then you are accustomed to being able to quickly and efficiently organize your thoughts. It's a natural extension then to want to use those same "notes" in a presentation. There are many ways to achieve such a result. | ||
− | One method is to simply parse the wiki markup itself and turn that into slides by effectively walking through the structure of the page (one slide for each section, and stepping through the bullets). For this approach, a Greasemonkey script will do. | + | One method is to simply parse the wiki markup itself and turn that into slides by effectively walking through the structure of the page (one slide for each section, and stepping through the bullets). For this approach, a Greasemonkey script will do. The downside of the Greasemonkey script is that it doesn't offer the nice visual presentation aspects that most users would expect. |
− | [http://phiffer.org Dan Phiffer] | + | Another approach that is more visually rich is to combine [[Presentation|Eric Meyer's S5 system]] with MediaWiki. |
+ | In fact, somebody already has done that at http://meta.wikimedia.org/wiki/User:BR/S5_slide_for_mediawiki_documentation/en | ||
+ | |||
+ | == Greasemonkey script == | ||
+ | [http://phiffer.org Dan Phiffer] created the following Greasemonkey script (which I found courtesy of [http://www.darcynorman.net/2007/05/02/mediawiki-as-a-presentation-application/ D'Arcy Norman]) that [http://userscripts.org/scripts/show/6372 turns any MediaWiki article into a slide presentation]. The [[CSS]] was changed just a bit by Greg Rundlett to ensure compatibility with projectors. | ||
<source lang="javascript"> | <source lang="javascript"> | ||
// ==UserScript== | // ==UserScript== | ||
Line 12: | Line 16: | ||
var wikipedia_presentation = { | 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 = '← 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 →'; | |
− | + | 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.background = 'red'; | |
− | + | 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'; | |
− | + | } | |
− | + | ||
− | + | } | |
}; | }; | ||
Line 149: | Line 153: | ||
</source> | </source> | ||
+ | |||
+ | == Bookmarklet == | ||
+ | http://w3l.sourceforge.net/w2s5poc/wiki2s5poc.html is a js implementation circa 2005 that seems well done, but largely ignored or unknown | ||
+ | |||
+ | [[Category:Wiki]] | ||
+ | [[Category:Howto]] | ||
+ | [[Category:Presentations]] |
Latest revision as of 10:01, 9 December 2008
If you're using MediaWiki, then you are accustomed to being able to quickly and efficiently organize your thoughts. It's a natural extension then to want to use those same "notes" in a presentation. There are many ways to achieve such a result.
One method is to simply parse the wiki markup itself and turn that into slides by effectively walking through the structure of the page (one slide for each section, and stepping through the bullets). For this approach, a Greasemonkey script will do. The downside of the Greasemonkey script is that it doesn't offer the nice visual presentation aspects that most users would expect.
Another approach that is more visually rich is to combine Eric Meyer's S5 system with MediaWiki. In fact, somebody already has done that at http://meta.wikimedia.org/wiki/User:BR/S5_slide_for_mediawiki_documentation/en
Greasemonkey script[edit | edit source]
Dan Phiffer created the following Greasemonkey script (which I found courtesy of D'Arcy Norman) that turns any MediaWiki article into a slide presentation. The CSS was changed just a bit by Greg Rundlett to ensure compatibility with projectors.
// ==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 = '← 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 →';
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.background = 'red';
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();
Bookmarklet[edit | edit source]
http://w3l.sourceforge.net/w2s5poc/wiki2s5poc.html is a js implementation circa 2005 that seems well done, but largely ignored or unknown