Customize Vista Edit

Customize Vista Edit

Prepared By:

Henry Lo

ABSTRACT

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.

Table of Contents

ABSTRACT. 2

1.0 INTRODUCTION.. 5

2.0 BACKGROUND.. 6

3.0 CODING.. 7

3.1 FormParams. 7

3.2 Quick Preview.. 8

3.3 Save Code. 9

3.4 Revert 10

3.5 Resize. 10

3.6 Full Preview.. 13

3.7 Layout 13

4.0 CONCLUSION.. 15

APPENDIX I 16

Table of Figures

Figure 1. Greasemonkey – Manage Script 5

Figure 2. Customize Vista Edit layout 5

Figure 3. Quick Preview.. 8

Figure 4. Save Buttons. 9

Figure 5. Revert Prompt 10

Figure 6. Revert Button. 10

Figure 7. Textbox: Expand. 12

Figure 8. Textbox: Reset 12

Figure 9. Layout 14

1.0  INTRODUCTION

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.

To download the Customize Vista Edit, use the following link:

http://oltubc.com/customizevistaedit.user.js

Figure 1. Greasemonkey – Manage Script

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.

Figure 2. Customize Vista Edit layout

2.0  BACKGROUND

The Customize Vista Edit script is mostly developing with JavaScript coding.

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

3.0  CODING

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)

3.1 FormParams

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.  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:

// Get all Inputs

var finputs = form.getElementsByTagName(‘input’);

var farray = new Array();

for(var i = 0; i < finputs.length; i++){

if(finputs[i].name.length > 0){

farray[i] = finputs[i].name + “=” + encodeURI(finputs[i].value);

}

}

The function first assigns the input tag to the variable finputs. Then, it will enter a ‘for’ loop in which it will scan each character of the input and translates the elements into AJAX. Scanning the text areas is the same.

// Get all Textareas

var farray2 = new Array();

var ftextarea = form.getElementsByTagName(‘textarea’);

for(var i = 0; i < ftextarea.length; i++){

if(ftextarea[i].name.length > 0){

farray2[i] = ftextarea[i].name + “=” + encodeURIComponent(ftextarea[i].value);

}

}

3.2 Quick Preview

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 ‘htmlText’. Next, it takes the values inside the textbox using textarea.value and stores it, as values, into ttransfer.

// Get the html source from textarea

var textarea = document.getElementById(‘htmlText’);

var semiwrap = document.createElement(‘div’);

var ttransfer = textarea.value;

Then it transfers the values in ttransfer and sets 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:

semiwrap.innerHTML = ttransfer;

document.getElementById(‘wrap’).innerHTML = semiwrap.innerHTML;

Figure 3. Quick Preview

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:

// Replace image and link paths for local view

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

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

3.3 Save Code

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:

var http = new XMLHttpRequest();

if(http.overrideMimeType)

{

http.overrideMimeType(‘text/html’);

}

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.

// Get form parameters and action

var params = unsafeWindow.formparams(document.forms[0]);

var url = unsafeWindow.formaction(document.forms[0]);

// Initialize a header

http.open(“POST”, root + url, true);

// Send Header Information

http.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”);

http.setRequestHeader(“Content-length”, params.length);

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”);

http.setRequestHeader(“Accept-Charset”, “ISO-8859-1,utf-8;q=0.7,*;q=0.7”);

http.setRequestHeader(“Keep-Alive”, “300”);

http.setRequestHeader(“Connection”, “close”);

// Wait for a http response

http.onreadystatechange = function() {//Call a function when the state changes.

if(http.readyState == 4 && http.status == 200) {

alert(“Changes Saved”);

}

}

// end onreadystatechange

http.send(params);

Figure 4. Save Buttons

3.4 Revert

The “Revert” 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 ‘htmlText’.

// oCode = Original Code

var rtextarea = document.getElementById(‘htmlText’);

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.

Figure 5. Revert Prompt

// Make sure the user really wants to undo ALL the modifications

var answer = confirm(“Are you sure you want to revert the document?”, 2, 2);

// I think the answer comes in binary / bool

if(answer){

rtextarea.value = oCode; }

Figure 6. Revert Button

3.5 Resize

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, fonts, and layout. This separation can improve content accessibility 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:

// inserts the ability to use CSS stylex

// =====================================

function addGlobalStyle(css) {

var head, style;

head = document.getElementsByTagName(‘head’)[0];

if(!head) {return;}

style = document.createElement(‘style’);

style.type = ‘text/css’;

style.innerHTML = css;

head.appendChild(style);  }

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.

unsafeWindow.resizefcn = function (){

// Inserts the ability to edit the style of the page with CSS

addGlobalStyle(‘.descForm {height: 500px; width: 700px;}’);

}

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:

resize.value = “Textbox: Reset”;

resize.setAttribute(“onClick”, “resetfcn()”);

thediv.appendChild(reset);

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

addGlobalStyle(‘.descForm {height: 120px; width: 400px;}’);

resize.value = “Textbox: Expand”;

resize.setAttribute(“onClick”, “resizefcn()”);

thediv.appendChild(resize);

Figure 7. Textbox: Expand

Figure 8. Textbox: Reset

3.6 Full Preview

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:

// Grab the current page ID

var pageid = document.getElementsByName(‘pageID’)[0].value;

var page = document.getElementsByName(‘linkedToFilePath’)[0];

// Get the page link along with it’s parameters

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

// Open the popup window

window.open(viewer,’popup_preview’,’width=800,height=640,menubar=1,toolbar=1,scrollbars=1,status=1,location=1,resizable=1′)

3.7 Layout

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.

var preview = cancel.cloneNode(true);

preview.value = “Full Preview”;

var save = cancel.cloneNode(true);

save.value = “Save Changes”;

var revert = cancel.cloneNode(true);

revert.value = “Revert”;

var resize = cancel.cloneNode(true);

resize.value = “Textbox: Expand”;

Next, we assign the functions to their respective buttons:

preview.setAttribute(“onClick”, “fullPreview()”);

save.setAttribute(“onClick”, “saveCode()”);

revert.setAttribute(“onClick”, “revert(originalCode)”);

resize.setAttribute(“onClick”, “resizefcn(originalCode)”);

With the buttons created, we now create the layout. To have spaces between each button, we use the following code:

// aspan is just a little gap I use to separate

// the custom buttons I created

for(var i = 0; i < 2; i++){

aspan = aspan.cloneNode(true);

thediv.appendChild(aspan);}

The final product is:

Figure 9. Layout

4.0  CONCLUSION

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,   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.

APPENDIX I

// ==UserScript==

// @name           Customize Vista Edit

// @namespace      Customize Vista Edit

// @include        https://www.*.ubc.ca/webct*editOrganizerResource.dowebct?*selectedResourceType=PAGE_TYPE*

// @include        https://www.*.ubc.ca/webct*viewCourseMapItemDispatcher.dowebct?*&tab=build&targetFrame=RIGHTTOOLFRAME*

// @include                                 https://www.*.ubc.ca/webct*linkedToResource.dowebct?*&selectedResourceType=PAGE_TYPE&selectedResourceID=*

// ==/UserScript==

// Last Edit: April 28th, 2008

// ===========================

// Thoughts…

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

// :: Modify to use AJAX frameworks (eg, jQuery) for easy upgrade

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

//                to GreaseKit compliant object

// Active Editing

// ==============

// If turned onto true, quick preview changes will be updated

// in real time, however, it’s fairly slow. Turned off for efficiency

var active = false;

var h = 500 + “px”;

var w = 500 + “px”;

var count=0;

// Vista Server

var root = “https://www.vista.ubc.ca”;

// File Root Folder Declaration

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

// Create an invisible DIV Wrapper for easy js access later

var wrap = document.createElement(“div”);

wrap.setAttribute(“id”, “wrap”);

// inserts the ability to use CSS styles

// =====================================

function addGlobalStyle(css) {

var head, style;

head = document.getElementsByTagName(‘head’)[0];

if(!head) {return;}

style = document.createElement(‘style’);

style.type = ‘text/css’;

style.innerHTML = css;

head.appendChild(style);

}

/*

// Custom Function getElementsByClassName

// ======================================

// – This should’ve been prototyped for elements but

// for the purposes, this should be okay

// Takes in the name from the “class=” attribute

document.getElementsByClassName = function(clsName){

var retVal = new Array();

var elements = document.getElementsByTagName(“*”);

for(var i = 0;i < elements.length;i++){

if(elements[i].className.indexOf(” “) >= 0){

var classes = elements[i].className.split(” “);

for(var j = 0;j < classes.length;j++){

if(classes[j] == clsName)

retVal.push(elements[i]);

}

}

else if(elements[i].className == clsName)

retVal.push(elements[i]);

}

return retVal;

}

*/

// unsafeWindow :: FormParams

// ==========================

// Takes a form and translates the elements into a AJAX

// ready sequence of parameters (eg, name=jack&age=18&comment=…)

// Separated into two types, regular form inputs and textareas

// Class unsafeWindow due to user-action property

unsafeWindow.formparams = function(form){

// Get all Inputs

var finputs = form.getElementsByTagName(‘input’);

var farray = new Array();

for(var i = 0; i < finputs.length; i++){

if(finputs[i].name.length > 0){

farray[i] = finputs[i].name + “=” + encodeURI(finputs[i].value);

}

}

// Get all Textareas

var farray2 = new Array();

var ftextarea = form.getElementsByTagName(‘textarea’);

for(var i = 0; i < ftextarea.length; i++){

if(ftextarea[i].name.length > 0){

farray2[i] = ftextarea[i].name + “=” + encodeURIComponent(ftextarea[i].value);

}

}

return farray.join(“&”) + “&” + farray2.join(“&”);;

}

// unsafeWindow :: FormAction

// ==========================

// Takes a form and retrieves the “action=” parameter

// Once again, it’s for AJAX calls later

// Class unsafeWindow due to user-action property

unsafeWindow.formaction = function(form){

return form.getAttribute(“action”);

}

// unsafeWindow :: PreviewCode

// ===========================

// Function called by preview code button to generate a demo page

// Due to the nature of Vista’s addressing issues, much of the source

// code from textarea is different, therefore some measures have been

// taken place to fix these links before previewed (src for images,

// href for links and frames, etc)

// Class unsafeWindow due to user-action property

unsafeWindow.previewCode = function (){

// Get the html source from textarea

var textarea = document.getElementById(‘htmlText’);

var semiwrap = document.createElement(‘div’);

var ttransfer = textarea.value;

// Make a local root to avoid auto path prefix from browser

var newroot = “https://www.vista.ubc.ca/webct/RelativeResourceManager/Template/”;

// Replace image and link paths for local view

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

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

semiwrap.innerHTML = ttransfer;

document.getElementById(‘wrap’).innerHTML = semiwrap.innerHTML;

}

// unsafeWindow :: saveCode

// Save the source code by means of AJAX http protocols

// This prevents Vista from redirecting back to the item menu

// allowing further changes if the last edits were not satisfactory

// ** Important :: If for some peculiar reason the file is not saved

// it will still say “Changes Saved”, one way to fix this is to

// to scan the http.responseText for any error messages

// Class unsafeWindow due to user-action property

unsafeWindow.saveCode = function (){

var http = new XMLHttpRequest();

if(http.overrideMimeType){

http.overrideMimeType(‘text/html’);

}

// Get form parameters and action

var params = unsafeWindow.formparams(document.forms[0]);

var url = unsafeWindow.formaction(document.forms[0]);

// Initialize a header

http.open(“POST”, root + url, true);

// Send Header Information

http.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”);

http.setRequestHeader(“Content-length”, params.length);

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”);

http.setRequestHeader(“Accept-Charset”, “ISO-8859-1,utf-8;q=0.7,*;q=0.7”);

http.setRequestHeader(“Keep-Alive”, “300”);

http.setRequestHeader(“Connection”, “close”);

// Wait for a http response

http.onreadystatechange = function() {//Call a function when the state changes.

if(http.readyState == 4 && http.status == 200) {

alert(“Changes Saved”);

}

}

// end onreadystatechange

http.send(params);

}

// unsafeWindow :: Revert

// ======================

// Session based revert function. This reverts any changes to the original

// source code that was first opened in the current session. This does Not

// revert to the last “working” save”.

// Class unsafeWindow due to user-action property

unsafeWindow.revert = function (oCode){

// oCode = Original Code

var rtextarea = document.getElementById(‘htmlText’);

// Make sure the user really wants to undo ALL the modifications

var answer = confirm(“Are you sure you want to revert the document?”, 2, 2);

// I think the answer comes in binary / bool

if(answer){

rtextarea.value = oCode;

}

}

// unsafeWindow :: Resize

// ======================

// Expands the textarea

// Class unsafeWindow due to user-action property

unsafeWindow.resizefcn = function (){

// Inserts the ability to edit the style of the page with CSS

addGlobalStyle(‘.descForm {height: 500px; width: 700px;}’);

resize.value = “Textbox: Reset”;

resize.setAttribute(“onClick”, “resetfcn()”);

thediv.appendChild(reset);

}

// unsafeWindow :: Reset

// ======================

// Resets the textarea

// Class unsafeWindow due to user-action property

unsafeWindow.resetfcn = function (){

// Inserts the ability to edit the style of the page with CSS

addGlobalStyle(‘.descForm {height: 120px; width: 400px;}’);

resize.value = “Textbox: Expand”;

resize.setAttribute(“onClick”, “resizefcn()”);

thediv.appendChild(resize);

}

// unsafeWindow :: FullPreview

// ===========================

// This function generates a full (popup) preview of the current

// page as if the user were to click on action menu -> preview page

// Class unsafeWindow due to user-action property

// User Prompted Action, must be of class unsafeWindow

unsafeWindow.fullPreview = function (){

// Grab the current page ID

var pageid = document.getElementsByName(‘pageID’)[0].value;

var page = document.getElementsByName(‘linkedToFilePath’)[0];

// Get the page link along with it’s parameters

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

// Open the popup window

window.open(viewer,’popup_preview’,’width=800,height=640,menubar=1,toolbar=1,scrollbars=1,status=1,location=1,resizable=1′)

}

//  ==================================================================================

// Figure out where we are and what we need

// Get the current address (to get the ID of the current page

var address = document.location.toString();

var rawid;

// Check which page we are in and get rawID

if(address.indexOf(“viewCourseMapItemDispatcher.dowebct”)!=-1){

rawid = address.split(“componentId=”)[1];}

else{

rawid = address.split(“selectedResourceID=”)[1];}

// … get rawID

var id = rawid.split(“&”)[0];

// For Active Editing Only

var textarea = document.getElementById(‘htmlText’);

// Activate real-time preview

// Warning :: Slow

if(active){

textarea.setAttribute(“onKeyUp”, “previewCode()”);}

// Adjust the differences between the annoying MAC

// and the awesome PC. For some reason, Vista renders

// differently on a MAC and PC

var div_size = 350;

var tdiv;

// Fix the Textarea Size;

if(navigator.appVersion.indexOf(“Win”)!=-1){

tdiv = document.getElementById(‘formTag’);

tdiv.style.height = div_size + “px !important”;

}

textarea.style.height = (div_size-15) + “px !important”;

textarea.style.width = “800px !important”;

// Expand the textarea to a bigger size for better editing

document.forms.namedItem(“editPageForm”).elements.namedItem(“htmlText”).setAttribute(‘rows’, 50);

// Fix the Page Squeeze Problem

mystyle = document.styleSheets[0];

// Save a copy of the original code before any modifications

unsafeWindow.originalCode = textarea.value;

// Create a break and insert our Quick Preview

document.body.appendChild(document.createElement(“br”));

document.body.appendChild(wrap);

// Start adding buttons from previous buttons

// supplied by Vista.

// Create & insert Exit button, this button does not

// save any changes.

var theform = document.forms[0];

var inputs = document.getElementsByTagName(‘input’);

var cancel = inputs[inputs.length-1];

cancel.value = “Exit”;

// Create & insert our Save button

// Rename our save and exit button

var oSave = inputs[inputs.length-2];

oSave.value = “Save and Exit”;

var preview = cancel.cloneNode(true);

var save = cancel.cloneNode(true);

var revert = cancel.cloneNode(true);

var thediv = cancel.parentNode;

// Create & insert our FullPreview button

preview.value = “Full Preview”;

save.value = “Save Changes”;

revert.value = “Revert”;

var aspan = document.createElement(“span”);

aspan.innerHTML = “&nbsp;”;

// Assign the buttons their functions

preview.setAttribute(“onClick”, “fullPreview()”);

save.setAttribute(“onClick”, “saveCode()”);

revert.setAttribute(“onClick”, “revert(originalCode)”);

// aspan is just a little gap I use to separate

// the custom buttons I created

for(var i = 0; i < 2; i++){

aspan = aspan.cloneNode(true);

thediv.appendChild(aspan);

}

thediv.appendChild(save);

// Add the Quick Preview Button

if(!active){

var quickpreview = cancel.cloneNode(true);

quickpreview.value = “Quick Preview”;

quickpreview.setAttribute(“onClick”, “previewCode()”);

for(var i = 0; i < 2; i++){

aspan = aspan.cloneNode(true);

thediv.appendChild(aspan);

}

thediv.appendChild(quickpreview);

}

// Add some Spaces

for(var i = 0; i < 2; i++){

aspan = aspan.cloneNode(true);

thediv.appendChild(aspan);

}

// Add the Full Preview Button

thediv.appendChild(preview);

// Add some extra Spaces

for(var i = 0; i < 2; i++){

aspan = aspan.cloneNode(true);

thediv.appendChild(aspan);

}

// Add the Revert Button

thediv.appendChild(revert);

// Add some extra Spaces

for(var i = 0; i < 2; i++){

aspan = aspan.cloneNode(true);

thediv.appendChild(aspan);

}

var resize = cancel.cloneNode(true);

resize.value = “Textbox: Expand”;

resize.setAttribute(“onClick”, “resizefcn()”);

thediv.appendChild(resize);

// Initialize a first Preview Code

unsafeWindow.previewCode();