User:Ctempich/common.js

/** * Make tables editable * * @source: www.mediawiki.org/wiki/Snippets/Load_JS_and_CSS_by_URL#Load_withJS_and_withCSS * @rev: 1 * @author: adapeted by Christoph */ /* withJS */

var ESCAPE = 27; var ENTER = 13; var TAB = 9;

function ediableTables{ var relevantElements = getRelevantElements; createEditors(relevantElements);

}

/* Scans for all cells which should be editable */

function getRelevantElements { var potentialElements =document.getElementsByTagName("span"); var relevantElements = new Array; for (var i =0; i< potentialElements.length; i++){ if (potentialElements[i].getAttribute("class",0) == "editable") relevantElements.push(potentialElements[i]); }   return relevantElements; }

/* Core Function to add Editors to table elements */

function createEditors(relevantElements){

for (var i =0; i< relevantElements.length; i++){ var viewParent = relevantElements[i]; //viewParent is the span containing the ediable material var view =viewParent.offsetParent; //view is the entire cell view.viewParent=viewParent; view.viewEditpart=viewParent.childNodes; //viewEditpart are the nodes which contain the SMW content view.Attribute = viewParent.getAttribute("title",0); //title is the name of the attribute which is going to be changed var editor = null; // editor is the input or textarea which represents the editable part if ( getCellContentAsText(view.viewEditpart).length > 50) editor= document.createElement("textarea"); else editor= document.createElement("input"); if (view.viewEditpart == null){ view.viewEditpart = viewParent; }        view.appendChild(editor); view.editor=editor; editor.style['display'] ="none"; editor.style['width'] = view.offsetWidth + "px"; editor.style['height'] = view.offsetHeight + "px"; addEvents(view); view.autoEditInput = identifyAutoEdit(view); //autoEditInput is the reference to the Semantic Forms autoedit part }

}

/* Searches the autoedit input field for a specific line in the table*/

function identifyAutoEdit(view){ var tableElements = view; var inputElement = null; while (tableElements != null) { if (tableElements.hasChildNodes){ inputElement = identifyAutoEdit(tableElements.firstChild); }           if ((tableElements.nodeType ==1)){ if (tableElements.getAttribute("name",0) == "query string") inputElement = tableElements; }          tableElements = tableElements.nextSibling; }   return inputElement; }

/* Changes the query string according to the input*/

function changeQueryValueAutoEdit(editValue, InputElement, AttributeValue){ var queryString =InputElement.getAttribute("value", 0); editValue = editValue.replace(/&/, " und "); var newQueryString = ""; var queryElements = queryString.split("&"); for (var i = 0; i < queryElements.length;i++){ if (queryElements[i].search(AttributeValue)>0){ // ist der Teil des QueryString der zu dem Attribut passt var changeValue = queryElements[i].split("=")[0]+"="; changeValue += editValue; queryElements[i] = changeValue; }           }        for (var i = 0; i<queryElements.length; i++){ newQueryString += queryElements[i]; if (i<queryElements.length -1) newQueryString+= "&"; }       InputElement.setAttribute("value",newQueryString, 0); return true;

}

/* Transforms HTML to pure text*/ function getCellContentAsText(nodeList){ var textValue= ""; for (var i = 0; i<nodeList.length; i++){ if (nodeList[i].nodeType ==1) textValue += nodeList[i].innerHTML; else if (nodeList[i].nodeType ==3) textValue += nodeList[i].nodeValue; }   return textValue; }

/* Adds event handling*/

function addEvents(view){ var showEditor = function(event) {

event = fixEvent(event); var view = this; var editor = view.editor; if (!editor) return true;

if (editor.currentView != null) { editor.blur; }		editor.currentView = view; editor.value = getCellContentAsText(view.viewEditpart); editor.style['display'] ="inline"; editor.style['width'] = view.offsetWidth + "px"; for (var i = 0; i<view.viewEditpart.length; i++){

if (view.viewEditpart[i].nodeType ==1) view.viewEditpart[i].style['display'] = 'none'; else if (view.viewEditpart[i].nodeType ==3){ var para = document.createElement("span"); para.appendChild(view.viewEditpart[i]); view.viewParent.insertBefore(para,view.viewEditpart[i]); para.style['display']= 'none'; }       }		editor.focus; return false; }	view.ondblclick = showEditor;

view.editor.onblur = function(event) { event = fixEvent(event);

var editor = event.target; var view = editor.currentView;

if (!editor.abandonChanges) { var para = document.createElement("span"); var editvalue = document.createTextNode(editor.value); para.appendChild(editvalue); var editValues = new Array(para); for (var i = 0; i<view.viewEditpart.length; i++){ view.viewParent.removeChild(view.viewEditpart[i]); }           view.viewParent.appendChild(para); view.viewEditpart = editValues; changeQueryValueAutoEdit(editor.value, view.autoEditInput, view.Attribute); }

editor.abandonChanges = false; editor.style['display'] = 'none'; editor.value = ''; // fixes firefox 1.0 bug for (var i = 0; i<view.viewEditpart.length; i++){ view.viewEditpart[i].style['display'] = 'inline'; }

editor.currentView = null;

return true; }	view.editor.onkeydown = function(event) { event = fixEvent(event); var editor = event.target; if (event.keyCode == TAB) { editor.blur; return false; } else if (event.keyCode == ENTER) { editor.blur; return false; }	}

view.editor.onkeyup = function(event) { event = fixEvent(event);

var editor = event.target; if (event.keyCode == ESCAPE) { editor.abandonChanges = true; editor.blur; return false; } else if (event.keyCode == TAB) { return false; } else if (event.keyCode == ENTER) { return false; } else { return true; }	}

// TODO: this method is duplicated elsewhere function fixEvent(event) { if (!event) event = window.event; if (event.target) { if (event.target.nodeType == 3) event.target = event.target.parentNode; } else if (event.srcElement) { event.target = event.srcElement; }

return event; }

}

addOnloadHook(ediableTables);