/** * WW Wizard Mode (un)obtrusive javascript library * * @copyright Implix 2004 * @author Michal Jaskolski */ // handling adding many functions to onclick event without advanced JS methods var logoEditor = false; function addClickEvent(obj, func) { var oldonclick = obj.onclick; if( typeof obj.onclick != 'function') { obj.onclick = func; } else { obj.onclick = function() { oldonclick(); func(); } } } // handling adding many functions to onchange event function addChangeEvent(obj, func) { var oldonchange = obj.onchange; if( typeof obj.onchange != 'function') { obj.onchange = func; } else { obj.onchange = function() { oldonchange(); func(); } } } // wizard autoloader, autoloads certain function depending on function wizardAutoloader() { if(!document.getElementsByTagName('body')[0]) return false; var pageId = document.getElementsByTagName('body')[0].getAttribute('id'); var functionName = 'prepare' + pageId; var functionLoader = new Function(functionName + '()'); functionLoader(); addAutosubmit(); } // autostarts the function above, please make sure not to overwrite it by external scripts window.onload = wizardAutoloader; // showing accesskey (shortcut key) in label title function showAccesskeyInLabelTitles() { var labels = document.getElementsByTagName('label'); for(var i = 0; i < labels.length; i++) { if(labels[i].getAttribute('accesskey')) { var labelTitle = labels[i].getAttribute('title'); labels[i].setAttribute('title', labelTitle + ' (Alt+' + labels[i].getAttribute('accesskey').toUpperCase() + ')'); } } } // adding autosubmit to top menu links function addAutosubmit() { var pageId = document.getElementsByTagName('body')[0].getAttribute('id'); if (pageId =='SitePreview') { return; } var header = document.getElementById('Header'); var links = header.getElementsByTagName('a'); for (var i = 0; i < links.length; i++) { links[i].onclick = function() { document.getElementById('target_url').value = this.getAttribute('href'); document.forms[0].submit(); } } } // adding onclick event responsible for marking labels of selected radios function addSelectRadioEvent() { var inputs = document.getElementsByTagName('input'); for(var i = 0; i < inputs.length; i++) { if(inputs[i].getAttribute('type') == 'radio') { addClickEvent(inputs[i], markLabels); } } markLabels(); } function prepareMainMenu() { addSelectRadioEvent(); showAccesskeyInLabelTitles(); } // get target by event function getTargetByEvent(e) { var targ; if(!e) var e = window.event; if(e.target) targ = e.target; else if(e.srcElement) targ = e.srcElement; { if(targ.nodeType == 3) // defeat Safari bug targ = targ.parentNode; } return targ; } function dumpProps(obj, parent) { // Go through all the properties of the passed-in object for(var i in obj) { // if a parent (2nd parameter) was passed in, then use that to // build the message. Message includes i (the object's property name) // then the object's property value on a new line if(parent && obj[i]) { var msg = parent + "." + i + "\n" + obj[i]; } else { var msg = i + "\n" + obj[i]; } // Display the message. If the user clicks "OK", then continue. If they // click "CANCEL" then quit this level of recursion if(!confirm(msg)) { return; } // If this property (i) is an object, then recursively process the object if( typeof obj[i] == "object") { if(parent) { dumpProps(obj[i], parent + "." + i); } else { dumpProps(obj[i], i); } } } } // marking selected labels function markLabels() { var inputs = document.getElementsByTagName('input'); var radioNames = []; for(var i = 0; i < inputs.length; i++) { if(inputs[i].getAttribute('type') == 'radio') { if(inputs[i].checked) { radioNames[inputs[i].name + '_' + inputs[i].value] = true; } } } var labels = document.getElementsByTagName('label'); for(var i = 0; i < labels.length; i++) { if(radioNames[labels[i].htmlFor]) { labels[i].className = "Selected"; } else { labels[i].className = ""; } } } // preparing theme changer, adding proper events to radios var designsList = new Array(); function prepareSiteThemes() { document.forms[0].theme[0].checked = true; document.forms[0].design[0].selected = true; var themeRadios = document.getElementById('Themes').getElementsByTagName('input'); for(var i = 0; i < themeRadios.length; i++) { themeRadios[i].onclick = handleThemeChange; } var designsSelect = document.getElementById('Designs').getElementsByTagName('select'); // loading entire select object into global variable var designsAvailable = designsSelect[0].options; for (var i=0; i < designsAvailable.length; i++) { var designOption = new Object(); designOption.id = designsAvailable[i].getAttribute('id'); designOption.value = designsAvailable[i].getAttribute('value'); designOption.bg = designsAvailable[i].style.backgroundColor; designOption.text = designsAvailable[i].text; designsList[i] = designOption; } // adding change event designsSelect[0].onchange = handleDesignChange; // first run handleThemeChange(); handleDesignChange(); addSelectRadioEvent(); if(document.forms[0].design_saved.value) { var themeId = 'theme_' + document.forms[0].theme_saved.value; var designValue = document.forms[0].design_saved.value; document.getElementById(themeId).click(); document.getElementById('DesignSelector').value = designValue; } } // handler for changing themes at step 1 function handleThemeChange() { var theme = getRadioValue(document.forms[0].theme); var designsWrapper = document.getElementById("Designs"); var designsSelect = designsWrapper.getElementsByTagName('select')[0]; var designsOptions = designsWrapper.getElementsByTagName('option'); var designSelected = false; // remove all designs designsSelect.options.length = 0; var j=0; for(var i = 0; i < designsList.length; i++) { var designId = designsList[i].id; if(designId.indexOf(theme) > - 1) { designsSelect.options[j] = new Option(designsList[i].text, designsList[i].value, false, false); designsSelect.options[j].style.backgroundColor = designsList[i].bg; if((designsSelect.options[j].value) && (designSelected == false)) { designsSelect.options[j].selected = true; designSelected = true; } j++; } } /* for(var i = 0; i < designsOptions.length; i++) { var designId = designsOptions[i].id; if(designId.indexOf(theme) > - 1) { if((designsOptions[i].value) && (designSelected == false)) { designsSelect.options[i].selected = true; designSelected = true; } } } */ handleDesignChange(document.forms[0].design.value); } // handler for changing design at step 1 - shows thumbnail function handleDesignChange() { document.body.style.cursor='wait'; var designId = document.forms[0].design.value; var joinPos = designId.indexOf('_'); var schemeNo = designId.slice(0, joinPos); var styleId = designId.substring(joinPos + 1); joinPos = styleId.indexOf('_'); if(joinPos != - 1) { var styleNo = styleId.slice(0, joinPos); var imageId = styleId.substring(joinPos + 1); var previewSrc = schemeNo + '/colorscheme-' + styleNo + '-' + imageId + '.png'; } else { var styleNo = styleId; var imageId = ''; var previewSrc = schemeNo + '/colorscheme-' + styleNo + '.png'; } thumbnail = document.getElementById('PreviewDesignImage'); thumbnail.src = 'img/schemes/' + previewSrc; document.body.style.cursor='default'; } // checks which radio is selected function getRadioValue(radioGroup) { // check count if (radioGroup.value) { if (radioGroup.checked) { return radioGroup.value; } else { return -1; } } // Run through the group for(counter = 0; counter < radioGroup.length; counter++) { // When we find the activated button, return the index if(radioGroup[counter].checked) { return radioGroup[counter].value } } // If no button is activated, return -1 return -1; } // prepares logo page function prepareSiteLogo() { document.getElementById('logo_create').onclick = handleSiteLogo; document.getElementById('logo_upload').onclick = handleSiteLogo; document.getElementById('logo_skip').onclick = handleSiteLogo; if(document.getElementById('logo_keep')) { document.getElementById('logo_keep').onclick = handleSiteLogo; document.getElementById('logo_keep').click(); } else { document.getElementById('logo_skip').click(); } handleSiteLogo(); addSelectRadioEvent(); } // handles logo actions function handleSiteLogo() { var action = getRadioValue(document.forms[0].logo); if(action == 'upload') { document.getElementById("LogoUploader").style.display = 'block'; } else { document.getElementById("LogoUploader").style.display = 'none'; } if(action == 'create') { document.getElementById("LogoCreator").style.display = 'block'; if (false == logoEditor) { document.getElementById("LogoCreatorFrame").src = 'ModLogo/LogoEditor'; logoEditor = true; } } else { document.getElementById("LogoCreator").style.display = 'none'; } if(document.getElementById("LogoExisting")) { if(action == 'keep') { document.getElementById("LogoExisting").style.display = 'block'; } else { document.getElementById("LogoExisting").style.display = 'none'; } } } function handleLogoEditorClose() { alert('zamkni�te'); window.location.reload(); } // prepares site type editor function prepareSitePages() { document.getElementById('site_simple').onclick = handleSitePages; document.getElementById('site_multiple').onclick = handleSitePages; document.getElementById('add_page_button').onclick = addNewPage; addSiteRowsEvents(); handleSitePages(); stylePageLinks(); addSelectRadioEvent(); var pageTable = document.getElementById("PageTable"); var pageRows = pageTable.getElementsByTagName('tr'); if(pageRows.length == 2) { document.getElementById('site_simple').click(); } else { document.getElementById('site_multiple').click(); } } // adds onclick events for up/down/remove links in certain tr (by row id) function addSiteRowsEvents() { var pageTable = document.getElementById("PageTable"); var pageRows = pageTable.getElementsByTagName('tr'); for(var i = 0; i < pageRows.length; i++) { addSiteRowEvents(pageRows[i].id); } } // takes care of up/down link function stylePageLinks() { var pageTable = document.getElementById("PageTable"); var pageRows = pageTable.getElementsByTagName('tr'); for(var i = 0; i < pageRows.length; i++) { var j = pageRows[i].id.substring(5); if(j) { if(i == 1) { document.getElementById('action_up_' + j).className = 'MoveUp Disabled'; } else { document.getElementById('action_up_' + j).className = 'MoveUp'; } if(i ==(pageRows.length - 1)) { document.getElementById('action_down_' + j).className = 'MoveDown Disabled'; } else { document.getElementById('action_down_' + j).className = 'MoveDown'; } if(pageRows.length == 2) { document.getElementById('action_remove_' + j).className = 'Remove Disabled'; } else { document.getElementById('action_remove_' + j).className = 'Remove'; } } } stripeTableById('PageTable', '#fff', '#edf3fe'); } // adds onclick events for selected up/down/remove link by tr row id function addSiteRowEvents(rowId) { var i = rowId.substring(5); if(i) { document.getElementById('action_up_' + i).onclick = pageAction; document.getElementById('action_down_' + i).onclick = pageAction; document.getElementById('action_remove_' + i).onclick = pageAction; } } // handles site type editor function handleSitePages() { var action = getRadioValue(document.forms[0].site); if(action == 'multiple') { document.getElementById("MultiplePageSiteEditor").style.display = 'block'; // TODO: focus on text field } else { document.getElementById("MultiplePageSiteEditor").style.display = 'none'; } } // handles page removal from sitemap function pageAction(e) { var target = getTargetByEvent(e); var linkId = target.id; var linkIdCut = linkId.replace('action_', ''); var action = linkIdCut.slice(0, linkIdCut.indexOf('_')); var rowId = linkId.replace('action_' + action, 'page'); var n = document.getElementById(rowId).sectionRowIndex; var pageTable = document.getElementById("PageTable"); var pageRows = pageTable.getElementsByTagName('tr'); if(action == 'remove') { if (pageRows.length != 2) { var confirmation = window.confirm('Are you sure to delete this page?'); if(confirmation == true) { pageTable.tBodies[0].deleteRow(n); } } } var pageCount = pageTable.tBodies[0].rows.length - 1; var tableBody = pageTable.tBodies[0]; var tableRows = tableBody.getElementsByTagName("tr"); if(action == 'up') { if(n != 0) { var tmp = tableRows[n - 1].cloneNode(true); tableBody.removeChild(tableRows[n - 1]); if(n != pageCount) { tableBody.insertBefore(tmp, tableRows[n]); } else { tableBody.appendChild(tmp); } addSiteRowEvents(tmp.id); // adding onclick events to links } } if(action == 'down') { if(n != pageCount) { var tmp = tableRows[n + 1].cloneNode(true); tableBody.removeChild(tableRows[n + 1]); tableBody.insertBefore(tmp, tableRows[n]); addSiteRowEvents(tmp.id); // adding onclick events to links } } stylePageLinks(); return false; } // checking if page exists function doesPageExist(pageTitle) { var pageRows = document.getElementById('PageTable').tBodies[0].rows; var pageExists = false; pageTitle = pageTitle.trim(); for(i = 0; i < pageRows.length; i++) { var currentTitle = pageRows[i].cells[0].firstChild.data.toUpperCase(); if(pageTitle.toUpperCase() == currentTitle.trim()) { pageExists = true; } } return pageExists; } // adding new page function addNewPage() { var pageTitle = document.forms[0].title.value; pageTitle = pageTitle.trim(); if(doesPageExist(pageTitle)) { window.alert('Page "' + pageTitle + '" already exists. Every page should have a different title.'); return false; } if (pageTitle == '') { window.alert('Page title cannot be empty.'); return false; } pRegExp = /^[_a-zA-Z0-9-\s]{1,32}$/ if (false == pRegExp.test(pageTitle)) { window.alert('Page title contains characters that are not allowed. Please use only letters and digits.'); return false; } var pageTable = document.getElementById("PageTable"); var pageRow = document.createElement('tr'); var pageTitleCell = document.createElement('td'); var pageActionsCell = document.createElement('td'); var pageCount = pageTable.tBodies[0].rows.length; var pageId = pageCount + 1; pageRow.setAttribute('id', 'page_' + pageId); var pageTitleNode = document.createTextNode(pageTitle); pageTitleCell.setAttribute('class', 'PageTitle'); pageTitleCell.appendChild(pageTitleNode); pageActionsCell.setAttribute('class', 'Actions'); // TODO: remove innerHTML, replace DHTML by JS DOM functions pageActionsCell.innerHTML = 'Move up Move down Remove'; pageRow.appendChild(pageTitleCell); pageRow.appendChild(pageActionsCell); pageTable.tBodies[0].appendChild(pageRow); addSiteRowEvents(pageRow.id); stylePageLinks(); return false; } // preparing page editor function prepareSitePageEditor() { document.getElementById('WysiwygEditor').style.display = 'none'; document.getElementById('edit_page_button').onclick = handlePageEdit; document.getElementById('save_page_button').onclick = handlePageSave; addSelectRadioEvent(); var pageSelector = document.getElementById('PageSelector'); var pageList = pageSelector.getElementsByTagName('input'); pageList[0].click(); document.forms[0].onsubmit = function() { var pageSelected = getRadioValue(document.forms[0].page); if (document.getElementById('WysiwygEditor').style.display == 'block') { if (confirm('Do you want to save the ' + document.getElementById('EditedPageTitle').innerHTML + ' page?')) { setPageContentByHttp('wizard_save_content.html/' + document.getElementById('current').value, content_edit.ktml_textarea.getContent()); } } return true; } } // handling page editor function handlePageEdit(e) { // TODO: replace DHTML by JS DOM var pageSelected = getRadioValue(document.forms[0].page); if (document.getElementById('current').value && pageSelected != document.getElementById('current').value && document.getElementById('WysiwygEditor').style.display == 'block') { if (confirm('Do you want to save the ' + document.getElementById('EditedPageTitle').innerHTML + ' page?')) { setPageContentByHttp('wizard_save_content.html/' + document.getElementById('current').value, content_edit.ktml_textarea.getContent()); } } document.getElementById('WysiwygEditor').style.display = 'block'; var frameSource = '/components/editor/ktml.php?name=textarea&shortid=1&KT_display=Bold,Italic,Underline,Undo,Redo,Align Left,Align Center,Align Right,Background Color,Foreground Color,Heading List,Font Type,Font Size,Insert Link,Insert Image,Insert Table,Toggle WYSIWYG'; content_edit.location.href = encodeURI(frameSource); if (pageSelected != 0) { var labelId = 'page_label_' + pageSelected; if (document.getElementById(labelId)){ document.getElementById('EditedPageTitle').innerHTML = document.getElementById(labelId).lastChild.data; } document.getElementById('current').value = pageSelected; } getPageContentByHttp('wizard_load_content.html/' + pageSelected); return false; } // handling page save function handlePageSave() { var pageSelected = getRadioValue(document.forms[0].page); setPageContentByHttp('wizard_save_content.html/' + pageSelected, content_edit.ktml_textarea.getContent('stripped')); document.getElementById('WysiwygEditor').style.display = 'none'; return false; } // preparing meta actions function prepareSiteMetaTags() { document.getElementById('properties_configure').onclick = handleSiteMetaTags; document.getElementById('properties_skip').onclick = handleSiteMetaTags; addSelectRadioEvent(); handleSiteMetaTags(); if (document.getElementById('properties_saved').value) { document.getElementById('properties_configure').click(); window.scroll(0,0); } } function handleSiteMetaTags() { var metaAction = getRadioValue(document.forms[0].properties); if(metaAction == 'configure') { document.getElementById('MetaConfigure').style.display = 'block'; } else { document.getElementById('MetaConfigure').style.display = 'none'; } if (metaAction == '-1') { document.getElementById('properties_skip').click(); window.scroll(0,0); } } function prepareSitePreview() { } // trimming empty spaces, from http://js-x.com/javascript/?view=932 String.prototype.trim = function() { // skip leading and trailing whitespace // and return everything in between var x = this; x = x.replace(/^\s*(.*)/, "$1"); x = x.replace(/(.*?)\s*$/, "$1"); return x; } // this function is need to work around // a bug in IE related to element attributes function hasClass(obj) { var result = false; if(obj.getAttributeNode("class") != null) { result = obj.getAttributeNode("class").value; } return result; } // clones selected object function cloneObject(what) { for (i in what) { if (typeof what[i] == 'object') { this[i] = new cloneObject(what[i]); } else this[i] = what[i]; } } // gets page content and sets it as field value function getPageContentByHttp(url) { var xmlhttp; document.body.style.cursor='wait'; document.getElementById('edit_page_button').disabled=true; if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); } else if (window.ActiveXObject) { xmlhttp = new ActiveXObject('Msxml2.XMLHTTP'); } xmlhttp.open("GET", url,true); xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4) { var content=unescape(xmlhttp.responseText); document.getElementById('textarea').value = content; document.body.style.cursor='default'; document.getElementById('edit_page_button').disabled=false; } } xmlhttp.send(null) } function setPageContentByHttp(url, content) { var xmlhttp; document.body.style.cursor='wait'; document.getElementById('save_page_button').disabled=true; content = escape(content); if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); } else if (window.ActiveXObject) { xmlhttp = new ActiveXObject('Msxml2.XMLHTTP'); } xmlhttp.open("POST", url,true); xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4) { document.body.style.cursor='default'; document.getElementById('save_page_button').disabled=false; } } xmlhttp.send('content='+content); // alert('save: '+content); } function stripeTableById(id) { // the flag we'll use to keep track of // whether the current row is odd or even var even = false; // if arguments are provided to specify the colours // of the even & odd rows, then use the them; // otherwise use the following defaults: var evenColor = arguments[1] ? arguments[1] : "#fff"; var oddColor = arguments[2] ? arguments[2] : "#eee"; // obtain a reference to the desired table // if no such table exists, abort var table = document.getElementById(id); if(!table) { return; } // by definition, tables can have more than one tbody // element, so we'll have to get the list of child // <tbody>s var tbodies = table.getElementsByTagName("tbody"); // and iterate through them... for(var h = 0; h < tbodies.length; h++) { // find all the <tr> elements... var trs = tbodies[h].getElementsByTagName("tr"); // ... and iterate through them for(var i = 0; i < trs.length; i++) { // avoid rows that have a class attribute // or backgroundColor style // get all the cells in this row... var tds = trs[i].getElementsByTagName("td"); // and iterate through them... for(var j = 0; j < tds.length; j++) { var mytd = tds[j]; mytd.style.backgroundColor = even ? evenColor : oddColor; } // flip from odd to even, or vice-versa even = !even; } } }