User:Gryllida/js/onScreenEditWithLocalStorage.js
Jump to navigation
Jump to search
Note: After saving, you may have to bypass your browser's cache to see the changes. Mozilla / Firefox / Safari: hold down Shift while clicking Reload, or press Ctrl-Shift-R (Cmd-Shift-R on Apple Mac); IE: hold Ctrl while clicking Refresh, or press Ctrl-F5; Konqueror: simply click the Reload button, or press F5; Opera users may need to completely clear their cache in Tools→Preferences. — More skins
// todo
// - do not use page name as unique identifier (loses information on rename)
// - add button to remove highlight
//
// (C) Svetlana Tkachenko <svetlana@members.fsf.org>
// Original Authors: He7d3r, Bawolff, Pi zero
// Derivative work from
// https://en.wikinews.org/w/index.php?title=MediaWiki:Gadget-onScreenEdit.js&oldid=4384416
//
//created by bawolff. IF you have comments/questions/concerns/etc please talk to me
//Allows people to edit the page itself in a WYSIWYG way (but no save)
//intended for people reviewing, to enable them to go over page, and cross out stuff as they check it (based on comments by Pi Zero
//if anyone wants undo/redo let me know. its really easy to add.
//not extensively tested. should work in modern browsers + MSIE 5.5 and greater.
//
// Changes:
// - attempt to use LocalStorage
// - follows the tip from
// https://www.ibm.com/developerworks/community/blogs/bobleah/entry/html5_code_example_of_contenteditable_and_localstorage_create_a_web_sticky_note?lang=en
// - UI: added a 'save' and 'restore' buttons to the On Screen Edit toolbar.
// TODO:
// Handle QUOTA_EXCEEDED_ERR
// See also <https://en.wikinews.org/wiki/User:Gryllida/Tasks>.
try { // containerize gadget, to protect other gadgets if this one goes wrong
window.onScreenEditInit = function () {
var cl = document.getElementsByTagName('html')[0].className;
if (cl.indexOf('firefox2') !== -1) {
document.designMode = 'on';
}
document.getElementById('bodyContent').contentEditable = true;
function btn (img, cmd, tooltip) {
var foo = document.createElement('img');
foo.src = img;
foo.alt = tooltip;
foo.title = tooltip;
foo.border = 0;
foo.style.cursor = 'pointer';
foo.onclick = cmd;
return foo;
}
var hl;
try {
hl = document.queryCommandSupported('hilitecolor') ? 'hilitecolor' : 'backcolor';
}
catch (e) {
hl = 'hilitecolor'; //firefox supports, but doesn't support the check for support
}
// create the toolbar
var toolbar = document.createElement('div');
// add bold, strike through buttons
toolbar.appendChild(btn('//upload.wikimedia.org/wikipedia/commons/6/6f/Bold_icon.png', function () {document.execCommand('bold', false, null)}, 'Bold'));
toolbar.appendChild(btn('//upload.wikimedia.org/wikipedia/commons/3/30/Btn_toolbar_rayer.png', function () {document.execCommand('strikethrough', false, null)}, 'Cross out'));
// add button to highlight with a custom color
var hilightLastColor = 'orange';
toolbar.appendChild(btn('//upload.wikimedia.org/wikipedia/commons/7/76/Button_atelier_graphique.PNG', function () {
hilightLastColor = prompt('Color name (or hex value). For example grey, or #aaaaaa',hilightLastColor);
document.execCommand(hl, false, hilightLastColor)}, 'Highlight'));
// add a few more highlight buttons
toolbar.appendChild(btn('//upload.wikimedia.org/wikipedia/commons/thumb/b/b0/ButtonYellow.svg/22px-ButtonYellow.svg.png', function () {document.execCommand(hl, false, 'yellow')}, 'Highlight yellow'));
toolbar.appendChild(btn('//upload.wikimedia.org/wikipedia/commons/thumb/9/97/ButtonRed.svg/22px-ButtonRed.svg.png', function () {document.execCommand(hl, false, 'red')}, 'Highlight red'));
toolbar.appendChild(btn('//upload.wikimedia.org/wikipedia/commons/thumb/3/3c/ButtonGreen.svg/22px-ButtonGreen.svg.png', function () {document.execCommand(hl, false, 'lightgreen')}, 'Highlight green'));
toolbar.appendChild(btn('//upload.wikimedia.org/wikipedia/commons/thumb/c/c1/ButtonBlue.svg/22px-ButtonBlue.svg.png', function () {document.execCommand(hl, false, 'aqua')}, 'Highlight blue'));
// add save, restore buttons
toolbar.appendChild(btn('//upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Toicon-icon-hatch-save.svg/22px-Toicon-icon-hatch-save.svg.png', window.onScreenEditInit.set, 'Save'));
toolbar.appendChild(btn('//upload.wikimedia.org/wikipedia/commons/thumb/0/0e/Huggle-icon-open-in-browser.svg/22px-Huggle-icon-open-in-browser.svg.png', window.onScreenEditInit.get, 'Restore'));
// add the toolbar where needed
var msg = document.getElementById('firstHeading');
msg.parentNode.insertBefore(toolbar, msg);
};
var storageName = 'onScreenEditWithLocalStorage-' + mw.config.get( 'wgPageName' );
window.onScreenEditInit.set = function (){
var scribble = document.getElementById('bodyContent').innerHTML;
localStorage.setItem(storageName,scribble);
}
window.onScreenEditInit.get = function (){
if ( localStorage.getItem(storageName)) {
var scribble = localStorage.getItem(storageName);
document.getElementById('bodyContent').innerHTML = scribble;
}
//else {
// var scribble = 'You can scribble directly on this sticky... and I will also remember your message the next time you visit my blog!';
//}
//document.getElementById('bodyContent').innerHTML = scribble;
}
//window.onScreenEditInit.clear = function (){
// clear: localStorage.clear();
// return false;
//}
// called onload
window.onScreenEditInit.setup = function () {
//if (mw.config.get('wgAction') === 'view') { //allowed on normal view + preview
mw.util.addPortletLink('p-tb', 'javascript:onScreenEditInit();void%200', 'On screen edit');
//} // xxx restore this later
};
// add link to sidebar
$(window.onScreenEditInit.setup);
} catch (e) { // containerize gadget, to protect other gadgets if this one goes wrong
// ignore
}