{"id":26,"date":"2009-11-13T12:00:54","date_gmt":"2009-11-13T20:00:54","guid":{"rendered":"https:\/\/blogs.ubc.ca\/henrylo\/?p=26"},"modified":"2009-11-13T15:43:22","modified_gmt":"2009-11-13T23:43:22","slug":"customize-vista-edit","status":"publish","type":"post","link":"https:\/\/blogs.ubc.ca\/henrylo\/2009\/11\/13\/customize-vista-edit\/","title":{"rendered":"Customize Vista Edit"},"content":{"rendered":"

Customize Vista Edit<\/a><\/p>\n

Customize Vista Edit<\/strong><\/p>\n

\n

\n

\n

\n

\"Title<\/p>\n

\n

Prepared By:<\/p>\n

Henry Lo<\/p>\n


\n<\/strong><\/p>\n

ABSTRACT<\/h1>\n

The Customize Vista Edit is a script that adds to the features found when editing a course in the Build mode of UBC Vista courses. When installed onto Greasemonkey, the Customize Vista Edit allows course builders to: quick or full preview their HTML code, revert to previous code, and expand the textbox for better viewing. This report is focused on the design and development of the Customize Vista Edit script, and will elaborate on its included features.<\/p>\n

Table of Contents<\/strong><\/p>\n

ABSTRACT. 2<\/p>\n

1.0 INTRODUCTION.. 5<\/p>\n

2.0 BACKGROUND.. 6<\/p>\n

3.0 CODING.. 7<\/p>\n

3.1 FormParams. 7<\/p>\n

3.2 Quick Preview.. 8<\/p>\n

3.3 Save Code. 9<\/p>\n

3.4 Revert 10<\/p>\n

3.5 Resize. 10<\/p>\n

3.6 Full Preview.. 13<\/p>\n

3.7 Layout 13<\/p>\n

4.0 CONCLUSION.. 15<\/p>\n

APPENDIX I 16<\/p>\n

Table of Figures<\/strong><\/p>\n

Figure 1. Greasemonkey – Manage Script 5<\/p>\n

Figure 2. Customize Vista Edit layout 5<\/p>\n

Figure 3. Quick Preview.. 8<\/p>\n

Figure 4. Save Buttons. 9<\/p>\n

Figure 5. Revert Prompt 10<\/p>\n

Figure 6. Revert Button. 10<\/p>\n

Figure 7. Textbox: Expand. 12<\/p>\n

Figure 8. Textbox: Reset 12<\/p>\n

Figure 9. Layout 14<\/p>\n

1.0\u00a0 INTRODUCTION<\/h1>\n

The Customize Vista Edit script is an intuitive addition to the course editor found in the build mode of UBC Vista. To use it, the user must have the Mozilla Firefox add-on Greasemonkey already running on their browser. Greasemonkey is a program that allows users to install scripts that make on-the-fly changes to HTML webpage content on the DOMContentLoaded event, which happens immediately after it is loaded in the browser. For example, downloading a text area size adjuster onto Greasemonkey will allow users to adjust any textboxes found in any website.<\/p>\n

To download the Customize Vista Edit, use the following link:<\/p>\n

http:\/\/oltubc.com\/customizevistaedit.user.js<\/a><\/p>\n

\"Greasemonkey<\/p>\n

\n

Figure 1. Greasemonkey – Manage Script<\/p>\n

After completing the installation, enabling the script will activate it. From now on, whenever the user enters the build mode and edits a course report, for example, the Customize Vista Edit toolbar will appear with new options for the user that will allow for more convenient editing.<\/p>\n

\"Customize<\/p>\n

\n

Figure 2. Customize Vista Edit layout<\/p>\n

2.0\u00a0 BACKGROUND<\/h1>\n

The Customize Vista Edit script is mostly developing with JavaScript coding.<\/p>\n

JavaScript is an object-oriented<\/a> <\/sup>scripting language<\/a> used to enable programmatic<\/a> access to objects within both the client application<\/a> and other applications<\/a>. It is primarily used as an integrated component of the web browser<\/a>, allowing the development of enhanced user interfaces<\/a> and dynamic websites<\/a>.<\/p>\n

3.0\u00a0 CODING<\/h1>\n

This section of the report will begin discussing the development of the Customize Vista Edit script. Each section will focus on the features added by Customize Vista Edit and will take an in-depth analysis and explain how each feature was developed and help you better understand the code behind it. (Refer to Appendix I)<\/p>\n

3.1 FormParams<\/h2>\n

The FormParams function is developed to take a form and translates the elements into an AJAX ready sequence of parameters. The reason for implementing this function is to allow the save function, discussed later, to save changes without having to exit the page every time. This would allow the user to make quick changes and preview the code and make changes conveniently.\u00a0 The inputs that the FormParams function scans are separated into two types, regular form inputs (title), and text areas (HTML textbox). The code for retrieving the inputs are as follows:<\/p>\n

\/\/ Get all Inputs<\/p>\n

var finputs = form.getElementsByTagName(‘input’);<\/p>\n

var farray = new Array();<\/p>\n

for(var i = 0; i < finputs.length; i++){<\/p>\n

if(finputs[i].name.length > 0){<\/p>\n

farray[i] = finputs[i].name + “=” + encodeURI(finputs[i].value);<\/p>\n

}<\/p>\n

}<\/p>\n

The function first assigns the input tag to the variable finputs. Then, it will enter a \u2018for\u2019 loop in which it will scan each character of the input and translates the elements into AJAX. Scanning the text areas is the same.<\/p>\n

\/\/ Get all Textareas<\/p>\n

var farray2 = new Array();<\/p>\n

var ftextarea = form.getElementsByTagName(‘textarea’);<\/p>\n

for(var i = 0; i < ftextarea.length; i++){<\/p>\n

if(ftextarea[i].name.length > 0){<\/p>\n

farray2[i] = ftextarea[i].name + “=” + encodeURIComponent(ftextarea[i].value);<\/p>\n

}<\/p>\n

}<\/p>\n

3.2 Quick Preview<\/h2>\n

The preview button found on the Customize Vista Edit layout is used to generate a demo page. This allows users to quickly view their current page and make changes. The function starts out by scanning the HTML textbox using the method getElementById(). This method returns a reference to the first object with the specified ID, which in this case is \u2018htmlText\u2019. Next, it takes the values inside the textbox using textarea.value and stores it, as values, into ttransfer.<\/p>\n

\/\/ Get the html source from textarea<\/p>\n

var textarea = document.getElementById(‘htmlText’);<\/p>\n

var semiwrap = document.createElement(‘div’);<\/p>\n

var ttransfer = textarea.value;<\/p>\n

Then it transfers the values in ttransfer and\u00a0sets the HTML syntax describing the element’s descendants into the variable semiwrap using .innerHTML. This method takes the text and converts it into HTML format:<\/p>\n

semiwrap.innerHTML = ttransfer;<\/p>\n

document.getElementById(‘wrap’).innerHTML = semiwrap.innerHTML;<\/p>\n

\"Quick<\/p>\n

Figure 3. Quick Preview<\/p>\n

Due to the nature of Vista’s addressing issues, much of the source code from the textbox is different; therefore some measures have been taken to fix links and images before preview. The below code implements this:<\/p>\n

\/\/ Replace image and link paths for local view<\/p>\n

ttransfer = ttransfer.replace(\/(src=(\\”|\\’))(\\.\\.\\\/)?([0-9a-zA-Z\\\/_?+-.]+)(\\”|\\’)\/g, “$1” + newroot + folder + “\/$3$4$5”);<\/p>\n

ttransfer = ttransfer.replace(\/(href=(\\”|\\’))(\\.\\.\\\/)?([0-9a-zA-Z\\\/_?+-.]+)(\\”|\\’)\/g, “$1” + newroot + folder + “\/$3$4$5”);<\/p>\n

3.3 Save Code<\/h2>\n

The save code function is a simple algorithm that allows the user to save their current source code by means of AJAX http protocols. By using AJAX, preventions allow Vista from redirecting back to the item menu allowing further changes if the last edits were not satisfactory. The code start by requesting the http protocol:<\/p>\n

var http = new XMLHttpRequest();<\/p>\n

if(http.overrideMimeType)<\/p>\n

{<\/p>\n

http.overrideMimeType(‘text\/html’);<\/p>\n

}<\/p>\n

Next, it retrieves the parameters and initializes the header utilizing the formparams function discussed earlier. Now space has been created to save the current code. The following code sends the header information and waits for the http to respond, letting the user know that their code has been successfully saved.<\/p>\n

\/\/ Get form parameters and action<\/p>\n

var params = unsafeWindow.formparams(document.forms[0]);<\/p>\n

var url = unsafeWindow.formaction(document.forms[0]);<\/p>\n

\/\/ Initialize a header<\/p>\n

http.open(“POST”, root + url, true);<\/p>\n

\/\/ Send Header Information<\/p>\n

http.setRequestHeader(“Content-type”, “application\/x-www-form-urlencoded”);<\/p>\n

http.setRequestHeader(“Content-length”, params.length);<\/p>\n

http.setRequestHeader(“User-Agent”, “Mozilla\/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.11) Gecko\/20071127 Firefox\/2.0.0.11”);<\/p>\n

http.setRequestHeader(“Accept-Charset”, “ISO-8859-1,utf-8;q=0.7,*;q=0.7”);<\/p>\n

http.setRequestHeader(“Keep-Alive”, “300”);<\/p>\n

http.setRequestHeader(“Connection”, “close”);<\/p>\n

\/\/ Wait for a http response<\/p>\n

http.onreadystatechange = function() {\/\/Call a function when the state changes.<\/p>\n

if(http.readyState == 4 && http.status == 200) {<\/p>\n

alert(“Changes Saved”);<\/p>\n

}<\/p>\n

}<\/p>\n

\/\/ end onreadystatechange<\/p>\n

http.send(params);<\/p>\n

\"Save<\/p>\n

\n

Figure 4. Save Buttons<\/p>\n

3.4 Revert<\/h2>\n

The \u201cRevert\u201d button is to allow users that have made a mistake when writing the HTML source code to go back to the version of the source code that first appeared in the current session. The code is very simple for the implementation of this feature. First, the function scans the HTML textbox using the method getElementById(). This method returns a reference to the first object with the specified ID, which in this case is \u2018htmlText\u2019.<\/p>\n

\/\/ oCode = Original Code<\/p>\n

var rtextarea = document.getElementById(‘htmlText’);<\/p>\n

Then it prompts a warning message asking “Are you sure you want to revert the document”, if the user clicks yes, the code will return to the code present at the start of the current session, where oCode is the original source code.<\/p>\n

\"Revert<\/p>\n

\n

Figure 5. Revert Prompt<\/p>\n

\/\/ Make sure the user really wants to undo ALL the modifications<\/p>\n

var answer = confirm(“Are you sure you want to revert the document?”, 2, 2);<\/p>\n

\/\/ I think the answer comes in binary \/ bool<\/p>\n

if(answer){<\/p>\n

rtextarea.value = oCode; }<\/p>\n

\"Revert<\/p>\n

\n

Figure 6. Revert Button<\/p>\n

3.5 Resize<\/h2>\n

The resize function is a more complex algorithm as it utilizes both javascript and CSS coding in the expansion of the HTML textbox. CSS, Cascading Style Sheets, is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the colors<\/a>, fonts<\/a>, and layout<\/a>. This separation can improve content accessibility<\/a> and provide more flexibility and control. The reason for using CSS is to improve the layout. When using JavaScript coding for the expansion of the textbox, the box collides with other items on the page, causing unwanted obstructions. As CSS is designed for improving page layout, its usefulness in this case is unquestionable. First, initialization of CSS to be used within Greasemonkey is required, this is demonstrated by the below code:<\/p>\n

\/\/ inserts the ability to use CSS stylex<\/p>\n

\/\/ =====================================<\/p>\n

function addGlobalStyle(css) {<\/p>\n

var head, style;<\/p>\n

head = document.getElementsByTagName(‘head’)[0];<\/p>\n

if(!head) {return;}<\/p>\n

style = document.createElement(‘style’);<\/p>\n

style.type = ‘text\/css’;<\/p>\n

style.innerHTML = css;<\/p>\n

head.appendChild(style);\u00a0 }<\/p>\n

This code allows the use of CSS styles within the script. Next we can adjust the height and width of the textbox by first specifying its class and then adjust the size accordingly.<\/p>\n

unsafeWindow.resizefcn = function (){<\/p>\n

\/\/ Inserts the ability to edit the style of the page with CSS<\/p>\n

addGlobalStyle(‘.descForm {height: 500px; width: 700px;}’);<\/p>\n

}<\/p>\n

In addition, the feature to change back to the original size was implemented. After the user resizes the textbox, the button will change from Textbox: Expand to Textbox: Reset. This is accomplished by including the following code in the resize function:<\/p>\n

resize.value = “Textbox: Reset”;<\/p>\n

resize.setAttribute(“onClick”, “resetfcn()”);<\/p>\n

thediv.appendChild(reset);<\/p>\n

And the following code in the reset function, which resets the textbox size back to the original:
\n\/\/ Inserts the ability to edit the style of the page with CSS<\/p>\n

addGlobalStyle(‘.descForm {height: 120px; width: 400px;}’);<\/p>\n

resize.value = “Textbox: Expand”;<\/p>\n

resize.setAttribute(“onClick”, “resizefcn()”);<\/p>\n

thediv.appendChild(resize);<\/p>\n

\"Textbox\"Textbox<\/p>\n

\n

\n

\n

\n

Figure 7. Textbox: Expand<\/p>\n

\"Textbox<\/p>\n

\n

Figure 8. Textbox: Reset<\/p>\n

3.6 Full Preview<\/h2>\n

This function generates a full popup window preview of the current page. This function first grabs the current page ID and then gets the page address along with its parameters followed by opening the popup window. These steps are implemented by the following code:<\/p>\n

\/\/ Grab the current page ID<\/p>\n

var pageid = document.getElementsByName(‘pageID’)[0].value;<\/p>\n

var page = document.getElementsByName(‘linkedToFilePath’)[0];<\/p>\n

\/\/ Get the page link along with it’s parameters<\/p>\n

var viewer = “https:\/\/www.vista.ubc.ca\/webct\/ContentPageServerServlet\/” + page.value + “?pageID=” + pageid;<\/p>\n

\/\/ Open the popup window<\/p>\n

window.open(viewer,’popup_preview’,’width=800,height=640,menubar=1,toolbar=1,scrollbars=1,status=1,location=1,resizable=1′)<\/p>\n

3.7 Layout<\/h2>\n

Now, we need buttons for the features we implemented above. To create these buttons using JavaScript, we first start by initializing variables and values according to each button.<\/p>\n

var preview = cancel.cloneNode(true);<\/p>\n

preview.value = “Full Preview”;<\/p>\n

var save = cancel.cloneNode(true);<\/p>\n

save.value = “Save Changes”;<\/p>\n

var revert = cancel.cloneNode(true);<\/p>\n

revert.value = “Revert”;<\/p>\n

var resize = cancel.cloneNode(true);<\/p>\n

resize.value = “Textbox: Expand”;<\/p>\n

Next, we assign the functions to their respective buttons:<\/p>\n

preview.setAttribute(“onClick”, “fullPreview()”);<\/p>\n

save.setAttribute(“onClick”, “saveCode()”);<\/p>\n

revert.setAttribute(“onClick”, “revert(originalCode)”);<\/p>\n

resize.setAttribute(“onClick”, “resizefcn(originalCode)”);<\/p>\n

With the buttons created, we now create the layout. To have spaces between each button, we use the following code:<\/p>\n

\/\/ aspan is just a little gap I use to separate<\/p>\n

\/\/ the custom buttons I created<\/p>\n

for(var i = 0; i < 2; i++){<\/p>\n

aspan = aspan.cloneNode(true);<\/p>\n

thediv.appendChild(aspan);}<\/p>\n

The final product is:<\/p>\n

\"Customize<\/p>\n

\n

Figure 9. Layout<\/p>\n

\n

4.0\u00a0 CONCLUSION<\/h1>\n

The Customize Vista Edit script is an intuitive and convenient addition to the course editor in UBC Vista. With its addition, users can quick preview their source code, save their current code without needing to exit the page, resize and rest the textbox,\u00a0\u00a0 and revert to the original source code. The development of the script utilized both JavaScript and CSS languages to implement the features of the Customize Vista Edit. The Customize Vista Edit script is aimed to convenient web designer in UBC Vista, and additional features are being considered to allow users a more streamline experience during web development.<\/p>\n

APPENDIX I<\/h2>\n

\/\/ ==UserScript==<\/p>\n

\/\/ @name\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Customize Vista Edit<\/p>\n

\/\/ @namespace\u00a0\u00a0\u00a0\u00a0\u00a0 Customize Vista Edit<\/p>\n

\/\/ @include\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 https:\/\/www.*.ubc.ca\/webct*editOrganizerResource.dowebct?*selectedResourceType=PAGE_TYPE*<\/p>\n

\/\/ @include\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 https:\/\/www.*.ubc.ca\/webct*viewCourseMapItemDispatcher.dowebct?*&tab=build&targetFrame=RIGHTTOOLFRAME*<\/p>\n

\/\/ @include\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0 https:\/\/www.*.ubc.ca\/webct*linkedToResource.dowebct?*&selectedResourceType=PAGE_TYPE&selectedResourceID=*<\/p>\n

\/\/ ==\/UserScript==<\/p>\n

\/\/ Last Edit: April 28th, 2008<\/p>\n

\/\/ ===========================<\/p>\n

\/\/ Thoughts…<\/p>\n

\/\/ :: Some possible functions to implement – Detect when target site doesn’t really save any changes to document<\/p>\n

\/\/ :: Modify to use AJAX frameworks (eg, jQuery) for easy upgrade<\/p>\n

\/\/ :: Port this code to a Safari\/Greasekit for the stupid Macs, main modifictions would be to change unsafeWindow element<\/p>\n

\/\/\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0 to GreaseKit compliant object<\/p>\n

\/\/ Active Editing<\/p>\n

\/\/ ==============<\/p>\n

\/\/ If turned onto true, quick preview changes will be updated<\/p>\n

\/\/ in real time, however, it’s fairly slow. Turned off for efficiency<\/p>\n

var active = false;<\/p>\n

var h = 500 + “px”;<\/p>\n

var w = 500 + “px”;<\/p>\n

var count=0;<\/p>\n

\/\/ Vista Server<\/p>\n

var root = “https:\/\/www.vista.ubc.ca”;<\/p>\n

\/\/ File Root Folder Declaration<\/p>\n

var folder = document.getElementById(‘folderPath’).value.split(“\/”)[1];<\/p>\n

\/\/ Create an invisible DIV Wrapper for easy js access later<\/p>\n

var wrap = document.createElement(“div”);<\/p>\n

wrap.setAttribute(“id”, “wrap”);<\/p>\n

\/\/ inserts the ability to use CSS styles<\/p>\n

\/\/ =====================================<\/p>\n

function addGlobalStyle(css) {<\/p>\n

var head, style;<\/p>\n

head = document.getElementsByTagName(‘head’)[0];<\/p>\n

if(!head) {return;}<\/p>\n

style = document.createElement(‘style’);<\/p>\n

style.type = ‘text\/css’;<\/p>\n

style.innerHTML = css;<\/p>\n

head.appendChild(style);<\/p>\n

}<\/p>\n

\/*<\/p>\n

\/\/ Custom Function getElementsByClassName<\/p>\n

\/\/ ======================================<\/p>\n

\/\/ – This should’ve been prototyped for elements but<\/p>\n

\/\/ for the purposes, this should be okay<\/p>\n

\/\/ Takes in the name from the “class=” attribute<\/p>\n

document.getElementsByClassName = function(clsName){<\/p>\n

var retVal = new Array();<\/p>\n

var elements = document.getElementsByTagName(“*”);<\/p>\n

for(var i = 0;i < elements.length;i++){<\/p>\n

if(elements[i].className.indexOf(” “) >= 0){<\/p>\n

var classes = elements[i].className.split(” “);<\/p>\n

for(var j = 0;j < classes.length;j++){<\/p>\n

if(classes[j] == clsName)<\/p>\n

retVal.push(elements[i]);<\/p>\n

}<\/p>\n

}<\/p>\n

else if(elements[i].className == clsName)<\/p>\n

retVal.push(elements[i]);<\/p>\n

}<\/p>\n

return retVal;<\/p>\n

}<\/p>\n

*\/<\/p>\n

\/\/ unsafeWindow :: FormParams<\/p>\n

\/\/ ==========================<\/p>\n

\/\/ Takes a form and translates the elements into a AJAX<\/p>\n

\/\/ ready sequence of parameters (eg, name=jack&age=18&comment=…)<\/p>\n

\/\/ Separated into two types, regular form inputs and textareas<\/p>\n

\/\/ Class unsafeWindow due to user-action property<\/p>\n

unsafeWindow.formparams = function(form){<\/p>\n

\/\/ Get all Inputs<\/p>\n

var finputs = form.getElementsByTagName(‘input’);<\/p>\n

var farray = new Array();<\/p>\n

for(var i = 0; i < finputs.length; i++){<\/p>\n

if(finputs[i].name.length > 0){<\/p>\n

farray[i] = finputs[i].name + “=” + encodeURI(finputs[i].value);<\/p>\n

}<\/p>\n

}<\/p>\n

\/\/ Get all Textareas<\/p>\n

var farray2 = new Array();<\/p>\n

var ftextarea = form.getElementsByTagName(‘textarea’);<\/p>\n

for(var i = 0; i < ftextarea.length; i++){<\/p>\n

if(ftextarea[i].name.length > 0){<\/p>\n

farray2[i] = ftextarea[i].name + “=” + encodeURIComponent(ftextarea[i].value);<\/p>\n

}<\/p>\n

}<\/p>\n

return farray.join(“&”) + “&” + farray2.join(“&”);;<\/p>\n

}<\/p>\n

\/\/ unsafeWindow :: FormAction<\/p>\n

\/\/ ==========================<\/p>\n

\/\/ Takes a form and retrieves the “action=” parameter<\/p>\n

\/\/ Once again, it’s for AJAX calls later<\/p>\n

\/\/ Class unsafeWindow due to user-action property<\/p>\n

unsafeWindow.formaction = function(form){<\/p>\n

return form.getAttribute(“action”);<\/p>\n

}<\/p>\n

\/\/ unsafeWindow :: PreviewCode<\/p>\n

\/\/ ===========================<\/p>\n

\/\/ Function called by preview code button to generate a demo page<\/p>\n

\/\/ Due to the nature of Vista’s addressing issues, much of the source<\/p>\n

\/\/ code from textarea is different, therefore some measures have been<\/p>\n

\/\/ taken place to fix these links before previewed (src for images,<\/p>\n

\/\/ href for links and frames, etc)<\/p>\n

\/\/ Class unsafeWindow due to user-action property<\/p>\n

unsafeWindow.previewCode = function (){<\/p>\n

\/\/ Get the html source from textarea<\/p>\n

var textarea = document.getElementById(‘htmlText’);<\/p>\n

var semiwrap = document.createElement(‘div’);<\/p>\n

var ttransfer = textarea.value;<\/p>\n

\/\/ Make a local root to avoid auto path prefix from browser<\/p>\n

var newroot = “https:\/\/www.vista.ubc.ca\/webct\/RelativeResourceManager\/Template\/”;<\/p>\n

\/\/ Replace image and link paths for local view<\/p>\n

ttransfer = ttransfer.replace(\/(src=(\\”|\\’))(\\.\\.\\\/)?([0-9a-zA-Z\\\/_?+-.]+)(\\”|\\’)\/g, “$1” + newroot + folder + “\/$3$4$5”);<\/p>\n

ttransfer = ttransfer.replace(\/(href=(\\”|\\’))(\\.\\.\\\/)?([0-9a-zA-Z\\\/_?+-.]+)(\\”|\\’)\/g, “$1” + newroot + folder + “\/$3$4$5”);<\/p>\n

semiwrap.innerHTML = ttransfer;<\/p>\n

document.getElementById(‘wrap’).innerHTML = semiwrap.innerHTML;<\/p>\n

}<\/p>\n

\/\/ unsafeWindow :: saveCode<\/p>\n

\/\/ Save the source code by means of AJAX http protocols<\/p>\n

\/\/ This prevents Vista from redirecting back to the item menu<\/p>\n

\/\/ allowing further changes if the last edits were not satisfactory<\/p>\n

\/\/ ** Important :: If for some peculiar reason the file is not saved<\/p>\n

\/\/ it will still say “Changes Saved”, one way to fix this is to<\/p>\n

\/\/ to scan the http.responseText for any error messages<\/p>\n

\/\/ Class unsafeWindow due to user-action property<\/p>\n

unsafeWindow.saveCode = function (){<\/p>\n

var http = new XMLHttpRequest();<\/p>\n

if(http.overrideMimeType){<\/p>\n

http.overrideMimeType(‘text\/html’);<\/p>\n

}<\/p>\n

\/\/ Get form parameters and action<\/p>\n

var params = unsafeWindow.formparams(document.forms[0]);<\/p>\n

var url = unsafeWindow.formaction(document.forms[0]);<\/p>\n

\/\/ Initialize a header<\/p>\n

http.open(“POST”, root + url, true);<\/p>\n

\/\/ Send Header Information<\/p>\n

http.setRequestHeader(“Content-type”, “application\/x-www-form-urlencoded”);<\/p>\n

http.setRequestHeader(“Content-length”, params.length);<\/p>\n

http.setRequestHeader(“User-Agent”, “Mozilla\/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.11) Gecko\/20071127 Firefox\/2.0.0.11”);<\/p>\n

http.setRequestHeader(“Accept-Charset”, “ISO-8859-1,utf-8;q=0.7,*;q=0.7”);<\/p>\n

http.setRequestHeader(“Keep-Alive”, “300”);<\/p>\n

http.setRequestHeader(“Connection”, “close”);<\/p>\n

\/\/ Wait for a http response<\/p>\n

http.onreadystatechange = function() {\/\/Call a function when the state changes.<\/p>\n

if(http.readyState == 4 && http.status == 200) {<\/p>\n

alert(“Changes Saved”);<\/p>\n

}<\/p>\n

}<\/p>\n

\/\/ end onreadystatechange<\/p>\n

http.send(params);<\/p>\n

}<\/p>\n

\/\/ unsafeWindow :: Revert<\/p>\n

\/\/ ======================<\/p>\n

\/\/ Session based revert function. This reverts any changes to the original<\/p>\n

\/\/ source code that was first opened in the current session. This does Not<\/p>\n

\/\/ revert to the last “working” save”.<\/p>\n

\/\/ Class unsafeWindow due to user-action property<\/p>\n

unsafeWindow.revert = function (oCode){<\/p>\n

\/\/ oCode = Original Code<\/p>\n

var rtextarea = document.getElementById(‘htmlText’);<\/p>\n

\/\/ Make sure the user really wants to undo ALL the modifications<\/p>\n

var answer = confirm(“Are you sure you want to revert the document?”, 2, 2);<\/p>\n

\/\/ I think the answer comes in binary \/ bool<\/p>\n

if(answer){<\/p>\n

rtextarea.value = oCode;<\/p>\n

}<\/p>\n

}<\/p>\n

\/\/ unsafeWindow :: Resize<\/p>\n

\/\/ ======================<\/p>\n

\/\/ Expands the textarea<\/p>\n

\/\/ Class unsafeWindow due to user-action property<\/p>\n

unsafeWindow.resizefcn = function (){<\/p>\n

\/\/ Inserts the ability to edit the style of the page with CSS<\/p>\n

addGlobalStyle(‘.descForm {height: 500px; width: 700px;}’);<\/p>\n

resize.value = “Textbox: Reset”;<\/p>\n

resize.setAttribute(“onClick”, “resetfcn()”);<\/p>\n

thediv.appendChild(reset);<\/p>\n

}<\/p>\n

\/\/ unsafeWindow :: Reset<\/p>\n

\/\/ ======================<\/p>\n

\/\/ Resets the textarea<\/p>\n

\/\/ Class unsafeWindow due to user-action property<\/p>\n

unsafeWindow.resetfcn = function (){<\/p>\n

\/\/ Inserts the ability to edit the style of the page with CSS<\/p>\n

addGlobalStyle(‘.descForm {height: 120px; width: 400px;}’);<\/p>\n

resize.value = “Textbox: Expand”;<\/p>\n

resize.setAttribute(“onClick”, “resizefcn()”);<\/p>\n

thediv.appendChild(resize);<\/p>\n

}<\/p>\n

\/\/ unsafeWindow :: FullPreview<\/p>\n

\/\/ ===========================<\/p>\n

\/\/ This function generates a full (popup) preview of the current<\/p>\n

\/\/ page as if the user were to click on action menu -> preview page<\/p>\n

\/\/ Class unsafeWindow due to user-action property<\/p>\n

\/\/ User Prompted Action, must be of class unsafeWindow<\/p>\n

unsafeWindow.fullPreview = function (){<\/p>\n

\/\/ Grab the current page ID<\/p>\n

var pageid = document.getElementsByName(‘pageID’)[0].value;<\/p>\n

var page = document.getElementsByName(‘linkedToFilePath’)[0];<\/p>\n

\/\/ Get the page link along with it’s parameters<\/p>\n

var viewer = “https:\/\/www.vista.ubc.ca\/webct\/ContentPageServerServlet\/” + page.value + “?pageID=” + pageid;<\/p>\n

\/\/ Open the popup window<\/p>\n

window.open(viewer,’popup_preview’,’width=800,height=640,menubar=1,toolbar=1,scrollbars=1,status=1,location=1,resizable=1′)<\/p>\n

}<\/p>\n

\/\/\u00a0 ==================================================================================<\/p>\n

\/\/ Figure out where we are and what we need<\/p>\n

\/\/ Get the current address (to get the ID of the current page<\/p>\n

var address = document.location.toString();<\/p>\n

var rawid;<\/p>\n

\/\/ Check which page we are in and get rawID<\/p>\n

if(address.indexOf(“viewCourseMapItemDispatcher.dowebct”)!=-1){<\/p>\n

rawid = address.split(“componentId=”)[1];}<\/p>\n

else{<\/p>\n

rawid = address.split(“selectedResourceID=”)[1];}<\/p>\n

\/\/ … get rawID<\/p>\n

var id = rawid.split(“&”)[0];<\/p>\n

\/\/ For Active Editing Only<\/p>\n

var textarea = document.getElementById(‘htmlText’);<\/p>\n

\/\/ Activate real-time preview<\/p>\n

\/\/ Warning :: Slow<\/p>\n

if(active){<\/p>\n

textarea.setAttribute(“onKeyUp”, “previewCode()”);}<\/p>\n

\/\/ Adjust the differences between the annoying MAC<\/p>\n

\/\/ and the awesome PC. For some reason, Vista renders<\/p>\n

\/\/ differently on a MAC and PC<\/p>\n

var div_size = 350;<\/p>\n

var tdiv;<\/p>\n

\/\/ Fix the Textarea Size;<\/p>\n

if(navigator.appVersion.indexOf(“Win”)!=-1){<\/p>\n

tdiv = document.getElementById(‘formTag’);<\/p>\n

tdiv.style.height = div_size + “px !important”;<\/p>\n

}<\/p>\n

textarea.style.height = (div_size-15) + “px !important”;<\/p>\n

textarea.style.width = “800px !important”;<\/p>\n

\/\/ Expand the textarea to a bigger size for better editing<\/p>\n

document.forms.namedItem(“editPageForm”).elements.namedItem(“htmlText”).setAttribute(‘rows’, 50);<\/p>\n

\/\/ Fix the Page Squeeze Problem<\/p>\n

mystyle = document.styleSheets[0];<\/p>\n

\/\/ Save a copy of the original code before any modifications<\/p>\n

unsafeWindow.originalCode = textarea.value;<\/p>\n

\/\/ Create a break and insert our Quick Preview<\/p>\n

document.body.appendChild(document.createElement(“br”));<\/p>\n

document.body.appendChild(wrap);<\/p>\n

\/\/ Start adding buttons from previous buttons<\/p>\n

\/\/ supplied by Vista.<\/p>\n

\/\/ Create & insert Exit button, this button does not<\/p>\n

\/\/ save any changes.<\/p>\n

var theform = document.forms[0];<\/p>\n

var inputs = document.getElementsByTagName(‘input’);<\/p>\n

var cancel = inputs[inputs.length-1];<\/p>\n

cancel.value = “Exit”;<\/p>\n

\/\/ Create & insert our Save button<\/p>\n

\/\/ Rename our save and exit button<\/p>\n

var oSave = inputs[inputs.length-2];<\/p>\n

oSave.value = “Save and Exit”;<\/p>\n

var preview = cancel.cloneNode(true);<\/p>\n

var save = cancel.cloneNode(true);<\/p>\n

var revert = cancel.cloneNode(true);<\/p>\n

var thediv = cancel.parentNode;<\/p>\n

\/\/ Create & insert our FullPreview button<\/p>\n

preview.value = “Full Preview”;<\/p>\n

save.value = “Save Changes”;<\/p>\n

revert.value = “Revert”;<\/p>\n

var aspan = document.createElement(“span”);<\/p>\n

aspan.innerHTML = “&nbsp;”;<\/p>\n

\/\/ Assign the buttons their functions<\/p>\n

preview.setAttribute(“onClick”, “fullPreview()”);<\/p>\n

save.setAttribute(“onClick”, “saveCode()”);<\/p>\n

revert.setAttribute(“onClick”, “revert(originalCode)”);<\/p>\n

\/\/ aspan is just a little gap I use to separate<\/p>\n

\/\/ the custom buttons I created<\/p>\n

for(var i = 0; i < 2; i++){<\/p>\n

aspan = aspan.cloneNode(true);<\/p>\n

thediv.appendChild(aspan);<\/p>\n

}<\/p>\n

thediv.appendChild(save);<\/p>\n

\/\/ Add the Quick Preview Button<\/p>\n

if(!active){<\/p>\n

var quickpreview = cancel.cloneNode(true);<\/p>\n

quickpreview.value = “Quick Preview”;<\/p>\n

quickpreview.setAttribute(“onClick”, “previewCode()”);<\/p>\n

for(var i = 0; i < 2; i++){<\/p>\n

aspan = aspan.cloneNode(true);<\/p>\n

thediv.appendChild(aspan);<\/p>\n

}<\/p>\n

thediv.appendChild(quickpreview);<\/p>\n

}<\/p>\n

\/\/ Add some Spaces<\/p>\n

for(var i = 0; i < 2; i++){<\/p>\n

aspan = aspan.cloneNode(true);<\/p>\n

thediv.appendChild(aspan);<\/p>\n

}<\/p>\n

\/\/ Add the Full Preview Button<\/p>\n

thediv.appendChild(preview);<\/p>\n

\/\/ Add some extra Spaces<\/p>\n

for(var i = 0; i < 2; i++){<\/p>\n

aspan = aspan.cloneNode(true);<\/p>\n

thediv.appendChild(aspan);<\/p>\n

}<\/p>\n

\/\/ Add the Revert Button<\/p>\n

thediv.appendChild(revert);<\/p>\n

\/\/ Add some extra Spaces<\/p>\n

for(var i = 0; i < 2; i++){<\/p>\n

aspan = aspan.cloneNode(true);<\/p>\n

thediv.appendChild(aspan);<\/p>\n

}<\/p>\n

var resize = cancel.cloneNode(true);<\/p>\n

resize.value = “Textbox: Expand”;<\/p>\n

resize.setAttribute(“onClick”, “resizefcn()”);<\/p>\n

thediv.appendChild(resize);<\/p>\n

\/\/ Initialize a first Preview Code<\/p>\n

unsafeWindow.previewCode();<\/p>\n","protected":false},"excerpt":{"rendered":"

The Customize Vista Edit is a script that adds to the features found when editing a course in the Build mode of UBC Vista courses. When installed onto Greasemonkey, the Customize Vista Edit allows course builders to: quick or full preview their HTML code, revert to previous code, and expand the textbox for better viewing. This report is focused on the design and development of the Customize Vista Edit script, and will elaborate on its included features.<\/p>\n","protected":false},"author":1449,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6433],"tags":[],"class_list":["post-26","post","type-post","status-publish","format-standard","hentry","category-customize-vista-edit"],"_links":{"self":[{"href":"https:\/\/blogs.ubc.ca\/henrylo\/wp-json\/wp\/v2\/posts\/26","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.ubc.ca\/henrylo\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.ubc.ca\/henrylo\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.ubc.ca\/henrylo\/wp-json\/wp\/v2\/users\/1449"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.ubc.ca\/henrylo\/wp-json\/wp\/v2\/comments?post=26"}],"version-history":[{"count":11,"href":"https:\/\/blogs.ubc.ca\/henrylo\/wp-json\/wp\/v2\/posts\/26\/revisions"}],"predecessor-version":[{"id":105,"href":"https:\/\/blogs.ubc.ca\/henrylo\/wp-json\/wp\/v2\/posts\/26\/revisions\/105"}],"wp:attachment":[{"href":"https:\/\/blogs.ubc.ca\/henrylo\/wp-json\/wp\/v2\/media?parent=26"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.ubc.ca\/henrylo\/wp-json\/wp\/v2\/categories?post=26"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.ubc.ca\/henrylo\/wp-json\/wp\/v2\/tags?post=26"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}