User:Gryllida/js/onScreenEditWithLocalStorage.js

// todo // - do not use page name as unique identifier (loses information on rename) // - add button to remove highlight // // (C) Svetlana Tkachenko  // 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 .

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 }