User:What cat?/userlabeller.js

//////////////////////////////////////////////////////////////////////////// // Enables user to set permanent labels and color backgrounds on accounts // //////////////////////////////////////////////////////////////////////////// // Based on User:Cumbril's IP labeler // This code is licensed under the CC BY-SA 3.0 License and the GFDL.

// WARNING! CODE IS TERRIBLE importStylesheet('User:What cat?/userlabeller.css');

// encapsulate (function{	// allow user to override colorCodes in common.js, make sure property '4' stays empty	if (!window.colorCodes) {		window.colorCodes = {			'Red':"#FC8888",	// red			'Yellow':"#ffe299",	// yellow			'Green':"#99FF33",	// green			'Blank':""			// white (must be empty)		};	} else {		window.colorCodes['Blank'] = "";	}

var messages = { errNoStorage: 'No storage available. Seems that either:\n \ a) your browser does not support local storage,\n \						b) local storage is turned off, or\n \ c) is full.',		formAddLabel: 'add label',		formChange : 'change',		formLabel   : 'Label',		formColor   : 'Color',		errNoName: 'Error: missing username!',		lblDeleted  : 'Label removed!',		lblMissing  : 'Missing label!',		lblChanged  : 'Label changed!',		lblAdded    : 'Label added!',		errAction   : 'Error: unrecognized action!'				}

preload([		'https://upload.wikimedia.org/wikipedia/commons/thumb/f/fb/Yes_check.svg/240px-Yes_check.svg.png',		'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a2/X_mark.svg/210px-X_mark.svg.png',		'https://upload.wikimedia.org/wikipedia/et/4/42/Ip_label_form_delete.png',		'https://upload.wikimedia.org/wikipedia/et/3/38/Ip_label_form_submit.png'	]);

window.userlabel = {get:getData, set:setData, del:deleteData}

// TODO: Make these obviously identifiable as callbacks (12/8/2016) window.userlabel.changecolor = function(e) { $('#ul-example').css({'background-color':e.target.value}); }	window.userlabel.changelabel = function(e) { $('#ul-example-label').text(e.target.value); }	// END TODO window.userlabel.reload = function { createLinks(true); createEvents; }	$(document).ready(function{		if(typeof(Storage) === "undefined") {			// if there is no local storage available, display message and do nothing			throw new Error( messages.errNoStorage );		} else {			if (typeof(localStorage['lbls']) === "undefined") { localStorage['lbls'] = "{}"; }			// define two custom methods for storing objects			Storage.prototype.setObject = function(key, value) {				this.setItem(key, JSON.stringify(value));			};			Storage.prototype.getObject = function(key) {				var value = this.getItem(key);				return value && JSON.parse(value);			};			createLinks (false);			createEvents ;		}	});

$(document).mouseup(function (e) {		var container = $("div.ul-popup");		var link = $("a.mw-userlink");		if (!container.is(e.target) // if the target of the click isn't the container... && container.has(e.target).length === 0) // ... nor a descendant of the container		{			container.hide;			$(link).css({"font-weight": "normal"});		}		var fbcontainer = $("div.ul-feedback");		if (!fbcontainer.is(e.target) && fbcontainer.has(e.target).length === 0)		{			fbcontainer.hide;		}		});

function createLinks( refresh ) { var spacer = " "; if (refresh) { $("span.ul-container").remove; $("a.mw-userlink").css("background-color",""); }		$("a.mw-userlink").each(function {			// create link after every name; add the name into the link html code			var username = $(this).text;			var linkText = messages.formAddLabel;			var dataResult = getData( username );			var keyExists = dataResult.exists;			var dataObj = dataResult.obj;			console.log(username,dataResult);			if ( keyExists ) {				if (dataObj.label) {					linkText = dataObj.label;				} else if (dataObj.color) {					linkText = messages.formChange;				}				if (dataObj.color) {					$(this).css("background-color", dataObj.color);				}			}			var link = $(" ").html(""+ linkText + "");			$(this).after(spacer, link);		}); }

function createEvents { $("a.ul-link").click(function(event) {			// if the link was clicked ...			event.preventDefault;			var name = $(this).data("name");			var data = getData( name );			// legacy variables just in case I miss one			var username = name; var dataResult = data; 			var keyExists = dataResult.exists;			var dataObj = dataResult.obj;			// ... make the username bold ...			var userlink = $(this).parent.prev;			userlink.css({"font-weight": "bold"});			if(typeof(dataObj)!=="undefined"){				dlabel = dataObj.label;				dcolor = dataObj.color;			} else {				dcolor = "";				dlabel = "";			}			var Window = new Morebits.simpleWindow( 600, 400 );			Window.setScriptName("User label");			Window.setTitle("Add/edit label for "+name);			var form = new Morebits.quickForm( function(e){ if(e.target.label === "" && e.target.color === "") {deleteData(name)} else{ setData(name,{label:e.target.label.value,color:e.target.getChecked('color')[0]}); Window.close; createLinks(true); createEvents; }			} );//window.userlabel.processForm

var nameexample = form.append({type: 'div', label: "If you're seeing this, something has gone wrong", id:'ul-example-container'}); // unless you're reading the source code, then it's fine

var colorlist = form.append( { type:'field', label:'Colors' } );

colorlist.append({type: 'radio', name:'color', list: colorsToList(window.colorCodes,dcolor),					event: function( e ) {						window.userlabel.changecolor( e );						e.stopPropagation;					}				}			);

form.append({type: 'input', name:'label', label:'Label text: ', value: dlabel,					event: function( e ) {						window.userlabel.changelabel( e );						e.stopPropagation;					}				}			); form.append( { type:'submit', label:"Set label" } ); var result = form.render;

// this is pretty much the only real way to do this seamlessly before showing the form result.querySelector('#ul-example-container').innerHTML = $(" "+																			" "+name+" "+																			" "+																				""+ "Add label" + ""+																			" "+																		" ").html;

Window.setContent( result ); Window.display;

});	}	function colorsToList(colors,select) {		var list = [];		// awful terrible hacky for-loop; k is key, v is value, i is iterator value		for (var i=0;i<Object.keys(window.colorCodes).length;i++){var k=Object.keys(window.colorCodes)[i];var v=window.colorCodes[k];			list.push({label:k,value:v,style:'background-color:'+v,checked:(v==select)}) // the fact that this actually works is great		}		return list	}	function getData ( key ) {		var labelListObj = localStorage.getObject("lbls");		var labelObj = labelListObj[key]		var keyExists = ( (typeof labelObj === "undefined" || labelObj === null) ? false : true );

var dataObj; if (keyExists) { if(typeof(labelObj.label)==='undefined') { var dataObj = { label:labelObj.l,					color:labelObj.c				}; } else { var dataObj = { label:labelObj.label, color:labelObj.color };			}		}			return { exists: keyExists, obj: dataObj }; 		}

function deleteData ( key ) { var labelObj = localStorage.getObject("lbls") delete labelObj[key]; localStorage.setObject("lbls", labelObj); }

function setData( key, dataObj ) { var labelObj = localStorage.getObject("lbls") var p = { l: dataObj.label, c: dataObj.color }	// the p stands for parsed if((p.l === "" || typeof(p.l) !== "string") && (p.c === "" || typeof(p.c) !== "string")) { deleteData(key) }		labelObj[key] = p;		localStorage.setObject("lbls", labelObj); }

function isBlank (str) { return (!str || /^\s*$/.test(str)); }

function isEmpty(str) { return (!str || 0 === str.length); }

function preload( arrayOfImages ) { $(arrayOfImages).each(function{			$(' ')[0].src = this;		}); }	function colorsToList(colors, color) { var list = []; // awful terrible hacky for-loop; k is key, v is value, i is iterator value for (var i=0;i<Object.keys(window.colorCodes).length;i++){var k=Object.keys(window.colorCodes)[i];var v=window.colorCodes[k]; list.push({label:k,value:v,style:'background-color:'+v,checked:(v===color)}) // i'm surprised this works }		return list } })