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 <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
}