Index: lams_tool_sbmt/web/author_page/css/aqua.css =================================================================== diff -u --- lams_tool_sbmt/web/author_page/css/aqua.css (revision 0) +++ lams_tool_sbmt/web/author_page/css/aqua.css (revision 2f61fa68260f5a373da73a24d89be23655d94531) @@ -0,0 +1,142 @@ +/*This is a theme CSS file. Which one will be loaded into the JSP depends on a variable passed in from FLASH.*/ + +body { + font-family: Verdana, Arial, Helvetica, sans-serif; + background-color: #A2BCF9; + +} + +h1 { + font-size: large; + background-color: #B4C8FE; + border-top-width: 1px; + border-top-style: solid; + border-top-color: #999999; + border-left-width: 1px; + border-left-style: solid; + border-left-color: #999999; +} +h2 { + font-size: small; + border-bottom-style: solid; + border-bottom-width: 1px; + border-bottom-color: #666666; + margin-bottom: 1px; + + +} + +th { + font-size: small; + color: #FFFFFF; + background-color: #075A8B; + text-align: left; +} + +.formtablecontainer{ + text-align:center; +} + +.datatablecontainer{ + width:100%; +} + +.buttoncontainer { + +} + + +input, select, textarea { + font-family: 'Verdana', 'Arial', 'Helvetica', sans-serif; + font-size: small; +} + +.forms { + border: 1px solid #999999; + font-size: small; + font-style: normal; + width: 100%; +} + +.formlabel { + font-size: small; + font-style: normal; + text-align: right; + width: 20%; +} + +.formcontrol { + font-size: small; + font-style: normal; + text-align: left; +} + +/********* tab styles **********/ +/** Tab layout **/ +.tabmenu ul{ + list-style: none; + padding: 0px; + margin: 0px; +} + +.tabmenu li{ + float: left; + margin: 0px 0px; + padding: 0px; + text-align: center +} + +/** Non Selected tab style **/ +.tabitem .tableft{ + background: url(../images/aqua_tab_left.gif) no-repeat top left; +} +.tabitem .tabright{ + background: url(../images/aqua_tab_right.gif) no-repeat top right; +} +.tabitem a, .tabitem a:hover, .tabitem a:active, .tabitem a:visited{ + background: url(../images/aqua_tab_centre.gif) 0 0 repeat-x; + margin:0px 8px; + font-size: 11px; + padding: 4px 10px 1px 10px; + color: #000000; + text-decoration:none; +} + +/** Selected tab style **/ +.tabitem_selected .tableft{ + background: url(../images/aqua_tab_s_left.gif) no-repeat top left; +} +.tabitem_selected .tabright{ + background: url(../images/aqua_tab_s_right.gif) no-repeat top right; +} +.tabitem_selected a, .tabitem_selected a:hover, .tabitem_selected a:active, .tabitem_selected a:visited{ + background: url(../images/aqua_tab_s_centre.gif) 0 0 repeat-x; + margin:0px 8px; + font-size: 11px; + padding: 4px 10px 1px 10px; + color: #000000; + text-decoration:none; +} + + +/*Tab content containers*/ +.tabbody{ + width: 98%; + + background-color : #D9E8FF; + float:left; + + margin : 0px 0px 0px 0px; + border-right-width: 1px; + border-left-width: 1px; + border-right-style: solid; + border-left-style: solid; + border-right-color: #0D3F59; + border-left-color: #0D3F59; + + border-bottom-width: 1px; + border-bottom-style: solid; + border-bottom-color: #0D3F59; + padding:5px; + +} \ No newline at end of file Index: lams_tool_sbmt/web/author_page/css/base.css =================================================================== diff -u --- lams_tool_sbmt/web/author_page/css/base.css (revision 0) +++ lams_tool_sbmt/web/author_page/css/base.css (revision 2f61fa68260f5a373da73a24d89be23655d94531) @@ -0,0 +1,3 @@ +/* +This is the Base CSS, it will define the location of images etc and other core, non user configurable items. (Admin configurable) +*/ \ No newline at end of file Index: lams_tool_sbmt/web/author_page/css/fckeditor_style.css =================================================================== diff -u --- lams_tool_sbmt/web/author_page/css/fckeditor_style.css (revision 0) +++ lams_tool_sbmt/web/author_page/css/fckeditor_style.css (revision 2f61fa68260f5a373da73a24d89be23655d94531) @@ -0,0 +1,55 @@ +.previewPanel{ + width: 700px; + height: 220px; + border-style: none; + border-width: 1px; + padding: 5px; + + overflow: auto; +} + +.textareaPanel{ + width: 700px; + height: 220px; +} + + +.smallPreviewPanel{ + width: 700px; + height: 120px; + border-style: none; + border-width: 1px; + padding: 5px; +} + +.smallTextareaPanel{ + width: 700px; + height: 120px; +} + +#wyswygEditor{ + /*position the wyswygEditor in the centre*/ + position: absolute; + /*top: 15%; + left: 50%; + margin-left: -400px; + margin-top: -260px;*/ + + width: 100%; + height: 100%; + + + /*border-style: solid; + border-width: 3px;*/ +} + +#wyswygEditorScreen{ + position: absolute; + + width: 700px; + height: 220px; + + padding: 0px; + margin: 0px; +} + Index: lams_tool_sbmt/web/author_page/css/tool_custom.css =================================================================== diff -u --- lams_tool_sbmt/web/author_page/css/tool_custom.css (revision 0) +++ lams_tool_sbmt/web/author_page/css/tool_custom.css (revision 2f61fa68260f5a373da73a24d89be23655d94531) @@ -0,0 +1,59 @@ +.button{ + float:right; + font-size: 12px; + color: #000000; + text-decoration:none; + text-align: center; + background-color:#B4C8FE; + margin: 2px 5px 2px 5px; + padding:3px; + width: 80px; + border-top-width: 1px; + border-right-width: 1px; + border-bottom-width: 1px; + border-left-width: 1px; + border-top-style: solid; + border-right-style: solid; + border-bottom-style: solid; + border-left-style: solid; + border-top-color: #FFFFFF; + border-right-color: #0D3F59; + border-bottom-color: #0D3F59; + border-left-color: #FFFFFF; +} + +.button:link{ + color: #000000; + text-decoration:none; + background-color:#B4C8FE; +} + +.button:visited{ + color: #000000; + text-decoration:none; + background-color:#B4C8FE; +} + + + +.button:hover{ + text-decoration:none; + background-color:#FFFFFF; +} + +.button:active{ + text-decoration:none; + background-color:#CCCCCC; + border-top-width: 1px; + border-right-width: 1px; + border-bottom-width: 1px; + border-left-width: 1px; + border-top-style: solid; + border-right-style: solid; + border-bottom-style: solid; + border-left-style: solid; + border-bottom-color: #FFFFFF; + border-left-color: #0D3F59; + border-top-color: #0D3F59; + border-right-color: #FFFFFF; +} \ No newline at end of file Index: lams_tool_sbmt/web/author_page/css/xp.css =================================================================== diff -u --- lams_tool_sbmt/web/author_page/css/xp.css (revision 0) +++ lams_tool_sbmt/web/author_page/css/xp.css (revision 2f61fa68260f5a373da73a24d89be23655d94531) @@ -0,0 +1,3 @@ +/* +Another theme CSS, would have diufferent colours and layout techniques +*/ \ No newline at end of file Index: lams_tool_sbmt/web/author_page/images/aqua_tab_centre.gif =================================================================== diff -u Binary files differ Index: lams_tool_sbmt/web/author_page/images/aqua_tab_left.gif =================================================================== diff -u Binary files differ Index: lams_tool_sbmt/web/author_page/images/aqua_tab_right.gif =================================================================== diff -u Binary files differ Index: lams_tool_sbmt/web/author_page/images/aqua_tab_s_centre.gif =================================================================== diff -u Binary files differ Index: lams_tool_sbmt/web/author_page/images/aqua_tab_s_left.gif =================================================================== diff -u Binary files differ Index: lams_tool_sbmt/web/author_page/images/aqua_tab_s_right.gif =================================================================== diff -u Binary files differ Index: lams_tool_sbmt/web/author_page/js/fckcontroller.js =================================================================== diff -u --- lams_tool_sbmt/web/author_page/js/fckcontroller.js (revision 0) +++ lams_tool_sbmt/web/author_page/js/fckcontroller.js (revision 2f61fa68260f5a373da73a24d89be23655d94531) @@ -0,0 +1,212 @@ +var activeEditorIndex = 0; +var oFCKeditor; + +//whether to initialise the editor in textarea mode or preview mode +function initEditor(index){ + var textareaElement = document.getElementById("tx" + index + ".textarea") + if(textareaElement == null) + return; + var text = textareaElement.value; + + if(containsHTML(text)){ + var previewTextElement = document.getElementById("preview" + index + ".text"); + var previewText = document.getElementById("tx" + index + ".textarea").value; + previewTextElement.innerHTML = previewText; + + hideElementById("tx"+index); + showElementById("preview"+index); + } + else{ + hideElementById("preview"+index); + showElementById("tx"+index); + } +} + +// FCKeditor_OnComplete is a special function that is called when an editor +// instance is loaded ad available to the API. It must be named exactly in +// this way. +function FCKeditor_OnComplete( editorInstance ) +{ + //hideElementById("wyswygEditorScreen"); +} + + +function SetContents(content) +{ + // Get the editor instance that we want to interact with. + var oEditor = FCKeditorAPI.GetInstance('FCKeditor1') ; + + // Set the editor contents (replace the actual one). + oEditor.SetHTML(content) ; +} + + +function doWYSWYGEdit(index, size){ + + var oEditor; + try { + oEditor = FCKeditorAPI.GetInstance('FCKeditor1') ; + } + catch(error) { + //browsers like opera can't resolve the FCKeditorAPI classes + alert("The browser you are using doesn't support Rich Text Editor, Please use a supported browser instead."); + return; + } + + if(activeEditorIndex != index && activeEditorIndex != 0){ + saveWYSWYGEdittedText(activeEditorIndex); //save the existing content + doPreview(activeEditorIndex); //update preview panel + } + + activeEditorIndex = index; + + //hide html editor + doPreview(index); + + var previewElement = document.getElementById("preview" + index + ".text"); + var posX = findPosX(previewElement); + var posY = findPosY(previewElement); + + var text = document.getElementById("tx" + index + ".textarea").value; + + oEditor.SetHTML(text) ; + + wyswygEditorScreenElement = document.getElementById("wyswygEditorScreen"); + wyswygEditorScreenElement.style.top = posY + "px"; + wyswygEditorScreenElement.style.left = posX + "px"; + + //resize the fck editor + fckFrameElement = document.getElementById("FCKeditor1___Frame"); + if (size == "small") { + fckFrameElement.style.height = "100px"; + wyswygEditorScreenElement.style.height = "120px"; + } else { + fckFrameElement.style.height = "200px"; + wyswygEditorScreenElement.style.height = "220px"; + } + + showElementById("wyswygEditorScreen"); + + + showElementById("wyswygEditorScreen"); +} + +//convert the text to HTML first, +function doTextToHTML(index){ + var textareaElement = document.getElementById("tx" + index + ".textarea"); + var text = covertTextToHTML(textareaElement.value); + textareaElement.value = text; +} + +function saveWYSWYGEdittedText(index){ + var oEditor = FCKeditorAPI.GetInstance('FCKeditor1') ; + var text = oEditor.GetXHTML( true ) + + + var htmlEditorElement = document.getElementById("tx" + index + ".textarea"); + htmlEditorElement.value = text; + +} + +function doEdit(index){ + hideElementById("wyswygEditorScreen"); + hideElementById("preview"+index); + showElementById("tx"+index); +} + +function doPreview(index){ + var previewTextElement = document.getElementById("preview" + index + ".text"); + var previewText = document.getElementById("tx" + index + ".textarea").value; + previewTextElement.innerHTML = previewText; + + hideElementById("wyswygEditorScreen"); + hideElementById("tx"+index); + showElementById("preview"+index); +} + + +/*** show/hide Elements ***/ +function showElement(element) { + element.style.visibility = 'visible'; + element.style.display = "block"; +} +function hideElement(element) { + element.style.visibility = 'hidden'; + element.style.display = "none"; +} + +function showElementById(id) { + var element = document.getElementById(id); + showElement(element); +} + +function hideElementById(id) { + var element = document.getElementById(id); + hideElement(element); +} + + +/*** findPosX and findPoxY functions are use to locate the x,y location of an element ***/ +function findPosX(obj) { + var curleft = 0; + if(obj.offsetParent) + while(1) + { + curleft += obj.offsetLeft; + if(!obj.offsetParent) + break; + obj = obj.offsetParent; + } + else if(obj.x) + curleft += obj.x; + return curleft; +} + +function findPosY(obj) { + var curtop = 0; + if(obj.offsetParent) + while(1) + { + curtop += obj.offsetTop; + if(!obj.offsetParent) + break; + obj = obj.offsetParent; + } + else if(obj.y) + curtop += obj.y; + return curtop; +} + +/**** Using the regular expressions defined below to convert Text to HTML ****/ +var NEWLINE = "
"; +var GREATER = ">"; +var LESSER = "<"; +//var SPACE = " "; + +var RE_ESCAPE_NEWLINE = new RegExp("\n", "g"); +var RE_ESCAPE_GREATER = new RegExp(">", "g"); +var RE_ESCAPE_LESSER = new RegExp("<", "g"); +//var RE_ESCAPE_SPACE = new RegExp(" ", "g"); + +var RE_HTML_TAG = new RegExp("<.*>|" + LESSER + "|" + GREATER); + +function covertTextToHTML(str){ + return str.replace(RE_ESCAPE_GREATER, GREATER) + .replace(RE_ESCAPE_LESSER, LESSER) + .replace(RE_ESCAPE_NEWLINE, NEWLINE); + + //.replace(RE_ESCAPE_SPACE, SPACE) +} + +/**** Detect whether HTML was used */ +function containsHTML(str){ + return (str.match(RE_HTML_TAG) != null)? true:false; +} + + + +/*** implement the event onSelectTab() which gets trigger when tabs is changed ***/ +function onSelectTab(tabID){ + //hide all active editors + doPreview(activeEditorIndex); +} \ No newline at end of file Index: lams_tool_sbmt/web/author_page/js/tabcontroller.js =================================================================== diff -u --- lams_tool_sbmt/web/author_page/js/tabcontroller.js (revision 0) +++ lams_tool_sbmt/web/author_page/js/tabcontroller.js (revision 2f61fa68260f5a373da73a24d89be23655d94531) @@ -0,0 +1,39 @@ +var tabSize = 0; +var selectedTabID = 0; + +/* Initialise the number of tabs in the page */ +function initTabSize(size){ + tabSize = size; +} + +function selectTab(tabID) { + + if(selectedTabID == tabID) + return; + + if(selectedTabID == 0) + selectedTabID = tabID; + + //change the old tab's class + document.getElementById("tab" + selectedTabID).className = "tabitem"; + + //change the new tab's class + document.getElementById("tab" + tabID).className = "tabitem_selected"; + + //save tabID as selectedTabID + selectedTabID = tabID; + + //switch the the selected tab on + for(i = 1; i <= tabSize; i++) { + document.getElementById("tabbody" + i).style.display = (i == tabID) ? 'block':'none'; + } + + + try{ + //trigger the custom event listener onSelectTab() + onSelectTab(tabID); + } + catch (error){ + //catch reference error when onSelectTab() is not defined + } +} \ No newline at end of file