User:Kaniivel/IPLabeller.js

 /////////////////////////////////////////////////////////////////////////////////////////
 // Enables user to set permanent labels and color backgrounds to anonymous IP accounts //
 /////////////////////////////////////////////////////////////////////////////////////////

 importStylesheet('User:Kaniivel/IPLabeller.css');

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

 varmessages={
 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',
 errMissingIP:'Error: missing IP address!',
 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'
 ]);

 $(document).ready(function(){
 if(typeof(Storage)==="undefined"){
 // if there is no local storage available, display message and do nothing
 thrownewError(messages.errNoStorage);
 }else{
 // define two custom methods for storing objects
 Storage.prototype.setObject=function(key,value){
 this.setItem(key,JSON.stringify(value));
 };
 Storage.prototype.getObject=function(key){
 varvalue=this.getItem(key);
 returnvalue&&JSON.parse(value);
 };
 createLinks(false);
 createEvents();
 }
 });

 $(document).mouseup(function(e){
 varcontainer=$("div.ip-label-popup");
 varlink=$("a.mw-anonuserlink");
 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"});
 }
 varfbcontainer=$("div.ip-label-feedback");
 if(!fbcontainer.is(e.target)
 &&fbcontainer.has(e.target).length===0)
 {
 fbcontainer.hide();
 }
 });

 functioncreateLinks(refresh){
 varspacer=" ";

 if(refresh){
 $("div.ip-label-container").remove();
 $("a.mw-anonuserlink").css("background-color","");
 }

 $("a.mw-anonuserlink").each(function(){
 // create link after every IP; add the IP into the link html code
 varip=$(this).text();
 varlinkText=messages.formAddLabel;

 vardataResult=getData(ip);
 varkeyExists=dataResult.keyExists;
 vardataObj=dataResult.dataObj;

 if(keyExists){
 if(dataObj.label){
 linkText=dataObj.label;
 }elseif(dataObj.color){
 linkText=messages.formChange;
 }
 if(dataObj.color){
 $(this).css("background-color",colorCodes[dataObj.color])
 }
 }
 varlink=$("<div class='ip-label-container'></div>").html("<a href='#' class='ip-label-link' _ip='"+ip+"'>"+linkText+"</a>");
 $(this).after(spacer,link);
 });
 }

 functioncreateEvents(){
 $("a.ip-label-link").click(function(event){
 // if the link was clicked ...
 event.preventDefault();

 varip=$(this).attr("_ip");

 vardataResult=getData(ip);
 varkeyExists=dataResult.keyExists;
 vardataObj=dataResult.dataObj;

 // ... make the IP address go bold ...
 variplink=$(this).parent().prev();
 iplink.css({"font-weight":"bold"});

 // ... create div with input form ...
 $(this).after("<div class='ip-label-popup'>"+messages.formLabel+": <form action='' class='ip-label-popup-form'><input type='hidden' name='ip_address' value='"+ip+"'><input type='text' name='label' autocomplete='off' size='60' value='"+((keyExists&&dataObj.label)?dataObj.label:"")+"' maxlength='60' class='ip-label-popup-input'><div class='ip-label-popup-bottom'>"+messages.formColor+":<input type='radio' name='color' value=1"+(keyExists&&dataObj.color==1?" checked":"")+"><div class='ip-label-popup-bottom-red'></div><input type='radio' name='color' value=2"+(keyExists&&dataObj.color==2?" checked":"")+"><div class='ip-label-popup-bottom-yellow'></div><input type='radio' name='color' value=3"+(keyExists&&dataObj.color==3?" checked":"")+"><div class='ip-label-popup-bottom-green'></div><input type='radio' name='color' value=4"+(keyExists&&dataObj.color==4?" checked":"")+"><div class='ip-label-popup-bottom-white'></div><div class='ip-label-submit-buttons'><div class='ip-label-form-delete'></div> <div class='ip-label-form-submit'></div></div></div></form></div>");

 // this is the div created in the previous statement 
 varpopUpDiv=$(this).next();

 // set focus on input field
 $(popUpDiv).find("input.ip-label-popup-input").focus();

 // set up submit event for the form (we can have more than one way to submit the form) 
 $(popUpDiv).find("form.ip-label-popup-form").submit(function(event){
 event.preventDefault();
 vardata=$(this).serializeArray();
 varformObj={};
 $.each(data,function(i,val){
 formObj[val.name]=val.value;
 });
 // pass container div along with the object holding form data to the processor function 
 processForm(popUpDiv,formObj);
 });

 // set up click event for the form + button
 $(popUpDiv).find(".ip-label-form-submit").on("click",function(){
 varform=$(this).closest("form.ip-label-popup-form");
 varinput=$("<input>").attr("type","hidden").attr("name","action").val("add");
 $(form).append($(input));
 $(form).submit();
 iplink.css({"font-weight":"normal"});
 });

 // set up click event for the form - button
 $(popUpDiv).find(".ip-label-form-delete").on("click",function(){
 varform=$(this).closest("form.ip-label-popup-form");
 varinput=$("<input>").attr("type","hidden").attr("name","action").val("del");
 $(form).append($(input));
 $(form).submit();
 iplink.css({"font-weight":"normal"});
 });
 });
 }

 functionprocessForm(popUpDiv,formObj){
 varfb_msg,isOK;

 if(!formObj.ip_address){
 // if somehow there is no IP address, call showError function
 showError(popUpDiv,messages.errMissingIP);
 }

 // the key for storage is IP address
 varip=formObj.ip_address;

 // check if the key already exists in storage to set up flag for later use

 vardataResult=getData(ip);
 varkeyExists=dataResult.keyExists;

 if(formObj.action=="add"){
 if(isBlank(formObj.label)&&(isEmpty(formObj.color)||formObj.color==4)){
 // if ip label is empty or whitespace and color is undefined or white then delete the entry
 deleteData(ip);
 if(keyExists){
 varfb_msg=messages.lblDeleted;
 varisOK=true;
 }else{
 varfb_msg=messages.lblMissing;
 varisOK=false;
 }
 showMessage(popUpDiv,fb_msg,isOK);
 }else{
 // the form has data to save
 if(isEmpty(formObj.color))
 {
 formObj.color=4;
 }
 varnewLabel={
 label:$.trim(formObj.label),
 color:formObj.color
 };
 setData(ip,newLabel);
 if(keyExists){
 varfb_msg=messages.lblChanged;
 varisOK=true;
 }else{
 varfb_msg=messages.lblAdded;
 varisOK=true;
 }
 showMessage(popUpDiv,fb_msg,isOK);
 }
 }elseif(formObj.action=="del"){
 // delete was clicked, do delete
 deleteData(ip);
 if(keyExists){
 varfb_msg=messages.lblDeleted;
 varisOK=true;
 }else{
 varfb_msg=messages.lblMissing;
 varisOK=false;
 }
 showMessage(popUpDiv,fb_msg,isOK);
 }else{
 showError(popUpDiv,messages.errAction);
 }

 popUpDiv.remove();
 }

 functionshowError(div,errormsg){
 // show error message, destroy popup div and exit
 thrownewError(errormsg);
 $(div).remove();
 }

 functionshowMessage(div,fb_msg,isOK){
 // show feedback message and hide/destroy popup divs
 // call refresh list function afterwards

 $(div).hide();

 varimg_Y='https://upload.wikimedia.org/wikipedia/commons/thumb/f/fb/Yes_check.svg/240px-Yes_check.svg.png';
 varimg_X='https://upload.wikimedia.org/wikipedia/commons/thumb/a/a2/X_mark.svg/210px-X_mark.svg.png';

 // create div box for the message
 varmsg_div=$("<div class='ip-label-feedback'><div class='ip-label-feedback-inner'><img src='"+(isOK?img_Y:img_X)+"'><div class='ip-label-feedback-inner-message'>"+fb_msg+"</div></div></div>");

 $(div).after(msg_div);

 msg_div.delay(1100).fadeOut(1000,function(){
 msg_div.remove();
 $(div).remove();
 createLinks(true);
 createEvents();
 });
 }

 functiongetData(key){
 key="lbl_"+key;
 varlabelObj=localStorage.getObject(key);
 varkeyExists=((typeoflabelObj===undefined||labelObj===null)?false:true);

 vardataObj;
 if(keyExists){
 vardataObj={
 label:labelObj.l,
 color:labelObj.c
 };
 }
 return{
 keyExists:keyExists,
 dataObj:dataObj
 };
 }

 functiondeleteData(key){
 key="lbl_"+key;
 localStorage.removeItem(key);
 }

 functionsetData(key,dataObj){
 key="lbl_"+key;
 varlabelObject={l:dataObj.label,c:dataObj.color};
 localStorage.setObject(key,labelObject);
 }

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

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

 functionpreload(arrayOfImages){
 $(arrayOfImages).each(function(){
 $('<img/>')[0].src=this;
 });
 }