Freephile Wiki

MediaWiki/Slideshow: Difference between revisions

Browse history interactively
← Older editNewer edit →
VisualWikitext
adds indentation to make the script more readable
link to where I found the script
Line 3: Line 3:
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.


[http://phiffer.org Dan Phiffer] wrote the following Greasemonkey script 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.
[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 12:


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 = '780px';
slide.style.width = '780px';
        // slide.style.background = 'red';
// slide.style.background = 'red';
        slide.style.margin = '10px 10px 10px 20px';
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';
        }
}
       
 
    }
}
};
};


Retrieved from "https://wiki.freephile.org/wiki/MediaWiki/Slideshow"