Permalink
Browse files

I decided to leverage Twitter Bootstrap's buitlin drop down menu faci…

…tily rather then roll my own. Thus, updating the Twitter Bootstap instance.

....
Added the following logical UI/UX functions:
Delete a row.
Edit a cell (row_column) content.
Edit the width and indentation of a cell.
Delete a cell (row_column).
  • Loading branch information...
lorinpa committed May 24, 2013
1 parent 53ce823 commit 6016a791a3cb9e01f017aa483f7a2a1b2e2f1e9f

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.
View
Binary file not shown.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.
Binary file not shown.
Binary file not shown.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.
View

Large diffs are not rendered by default.

Oops, something went wrong.
View

Large diffs are not rendered by default.

Oops, something went wrong.
View
@@ -1,3 +1,91 @@
/** Cell edit dialog.
* This function constructs the html elements required to edit our document cell.
* @class Cell edit dialog.
* @constructor
*/
var form_gen = function(options) {
this.init = function(options) {
if (options && options.hasOwnProperty("href")) {
this.href = href;
}
if (options && options.hasOwnProperty("row")) {
this.row = options.row;
}
if (options && options.hasOwnProperty("column")) {
this.column = options.column;
}
if (options && options.hasOwnProperty("content")) {
this.content = options.content;
}
if (options && options.hasOwnProperty("css_class")) {
this.css_class = options.css_class;
}
if (options && options.hasOwnProperty("elem")) {
this.elem = options.elem;
}
};
/** Renders the dialog.
* - Locates the dialog container elements (set to hidden).
* - Injects the dialog body elements with the cell chosen by the user (the cell link clicked on)
* */
this.render = function() {
closeDialogControls();
var editColumnContainer = document.querySelector("#edit-column-container");
var row_input = document.createElement("input");
row_input.setAttribute("type", "hidden");
row_input.setAttribute("value", this.row);
row_input.setAttribute("row_id", this.row);
var column_input = document.createElement("input");
column_input.setAttribute("type", 'hidden');
column_input.setAttribute("value", this.column);
column_input.setAttribute("column_id", this.column);
var row_column = g.getRowColumn(this.row, this.column);
var cell_col_span = document.querySelector("#cell-col");
cell_col_span.textContent = row_column.getLocation();
var rowList = g.getRowList();
var rowObj = rowList.getRow(this.row);
var cell_row_span = document.querySelector("#cell-row");
cell_row_span.textContent = rowObj.getLocation();
var text_area = document.createElement("textarea");
text_area.setAttribute("rows", "8");
text_area.setAttribute("cols", "120");
text_area.setAttribute("id", "content-text-area");
text_area.innerHTML = this.content;
editColumnContainer.innerHTML = text_area.outerHTML;
var css_fieldset = document.createElement("fieldset");
var css_label = document.createElement("label");
css_label.setAttribute("for", "css_clss_tf");
css_label.appendChild(document.createTextNode("Style"));
css_fieldset.innerHTML = css_label.outerHTML;
var css_class_tf = document.createElement("input");
css_class_tf.setAttribute("type", "text");
css_class_tf.setAttribute("value", this.css_class);
css_class_tf.setAttribute("id", "css_class_tf");
css_fieldset.innerHTML += css_class_tf.outerHTML;
editColumnContainer.innerHTML += css_fieldset.outerHTML;
var button = document.createElement("button");
button.setAttribute("id", "save-column");
button.innerHTML = "Save";
editColumnContainer.innerHTML += button.outerHTML;
var delete_button = document.createElement("button");
delete_button.setAttribute("id", "delete-column");
delete_button.innerHTML = "Delete";
editColumnContainer.innerHTML += delete_button.outerHTML;
editColumnContainer.innerHTML += row_input.outerHTML;
editColumnContainer.innerHTML += column_input.outerHTML;
var control_panel = document.getElementById("edit-column-dlg");
var style = control_panel.style;
style.setProperty("display", "block");
};
this.init(options);
};
/*** This section contains utility methods. ***/
/** Closes any dialogs who's markup contrains the "control-dlg" css class. **/
@@ -106,6 +194,17 @@ var AppRouter = function() {
showSuccessMessage("Row Added.");
});
/** Responds to click on menu item : Rows->Delete Row */
document.querySelector("#delete-row-link").addEventListener("click", function(event) {
event.preventDefault();
closeDialogControls();
reloadSelectControl("#delete-row");
var dlg = document.querySelector("#row-delete-dlg");
var style = dlg.style;
style.display = "block";
});
/** Responds to click on menu item : Columns->Add Column (to specific row) */
document.querySelector("#add-column-link").addEventListener("click", function(event) {
event.preventDefault();
@@ -123,6 +222,15 @@ var AppRouter = function() {
}
});
/** Responds to click in Delete Row Dialog->buttom */
document.querySelector("#delete-row-button").addEventListener('click', function(event) {
var row_id = document.querySelector("#delete-row").value;
g.deleteRow(row_id);
document.querySelector("#report").innerHTML = g.render().outerHTML;
reloadSelectControl("#delete-row");
showSuccessMessage("Row Deleted.");
});
/** General event handler for all of the application's dialogs.
* Note! So once a dialog is displayed, the EventManager services events like a button or link click.
*
@@ -145,14 +253,136 @@ var AppRouter = function() {
var tagName = event.target.tagName;
switch (tagName) {
case 'I':
closeDialogControls();
closeDialogControls();event
break;
}
};
/** Determines which cell the user clicked.
* Looks through dom tree till it finds a link.
* Parses the link's href attribute and determine the row and column id of the cell we want to process
* (render in the Edit Cell Dialog).
*
* Also captures when a user clicks the edit icon. The edit icons are displayed when the document "Grid" layout is set to display.
* The grid "Layout" allows the user to edit BLANK cells.
*/
this.clickListener = function(event) {
var tagName = event.target.tagName;
event.preventDefault();
event.stopPropagation();
switch (tagName) {
case 'I':
var icon = event.target.className;
if (icon !== 'icon-pencil') {
closeDialogControls();
break;
}
case 'A':
default:
/* * Note we have some redundent code -- editCellListenerll Handler does the same thing (below) */
var href = null;
var elem = event.target;
var not_found = true;
while (not_found) {
if (elem.href && elem.classList && elem.classList.contains("internal")) {
href = elem.href;
not_found = false;
break;
} else {
elem = elem.parentElement;
if (elem == null) {
return;
}
// kind of a kludge -- we've reached the cell parent. So let's use querySelector and get the link
if (elem.hasAttribute("cell")) {
elem =elem.querySelector("a.internal");
}
}
}
var elements = href.split("/");
var len = elements.length;
elem = null;
var srcElement = document.querySelector("a[href='" + "#" + href.split("#")[1] + "']");
for (var nIndex = 0; nIndex < len; nIndex++) {
elem = elements[nIndex];
if (elem.indexOf("#op") != -1) {
var row_id = elements[(nIndex + 2)];
var column_id = elements[(nIndex + 4)];
var columnList = g.getColumnList();
var column = columnList.getColumn(column_id);
var row_column = g.getRowColumn(row_id, column_id);
var fg = new form_gen({"row": row_id, "column": column_id,
"content": column.getContent(), "css_class": row_column.getCssClass(), "elem": srcElement});
fg.render();
break;
}
}
break;
}
};
/** Services the edit-cell dialog (when the dialog is displayed to the user).
* The edit-cell dialog allows the user to change content, set css classes on the containing <div> element.
* The edit cell dialog also allows the user to Delete the cell.
* The user can cancel the edit dialog by clicking on the "close-icon".
*
*/
this.editCellListener = function(event) {
event.preventDefault();
var src = event.target.tagName;
switch (src) {
case 'BUTTON':
var edit_dlg = document.querySelector("#edit-column-dlg>div[id='edit-column-container']");
var content = edit_dlg.querySelector("#content-text-area").value;
var css_class = edit_dlg.querySelector("#css_class_tf").value;
var row_id = edit_dlg.querySelector("input[row_id]").value;
var column_id = edit_dlg.querySelector("input[column_id]").value;
var columnList = g.getColumnList();
var column = columnList.getColumn(column_id);
var row_column = g.getRowColumn(row_id, column_id);
var operation = event.target.id;
switch (operation) {
case 'save-column':
column.setContent(content);
row_column.setCssClass(css_class);
showSuccessMessage("Column Save Successfully.");
break;
case 'delete-column':
g.deleteRowColumn(row_column);
// since a column can used in more than one row or location,
// we can't delete column if there are other instances remaining
if (g.getNumColumnReferences(column) === 0) {
columnList.deleteColumn(column);
}
if (g.getNumColumnsInRow(row_id) === 0) {
g.deleteRow(row_id);
}
showSuccessMessage("Column Deleted.");
break;
}
edit_dlg.querySelector("input[row_id]").value = "";
edit_dlg.querySelector("input[column_id]").value = "";
var report = document.getElementById("report");
var table = g.render();
report.innerHTML = table.outerHTML;
var dlg = document.querySelector("#edit-column-dlg");
var style = dlg.style;
style.setProperty("display", "none");
break;
case "I":
if (event.target.classList.contains("close-dlg-icon")) {
closeDialogControls();
}
break;
}
};
/** Selects the appropriate dom elements and adds event listeners to them.
*
*/
this.init = function() {
document.querySelector("#report").addEventListener("click", this.clickListener, true);
document.querySelector("#edit-column-dlg").addEventListener("click", this.editCellListener, true);
document.querySelector("#add-column-to-row-button").addEventListener("click", this.addColumnListener, true);
document.querySelector("#dlg-controls").addEventListener("click", this.dlgListener, true);
};
@@ -163,5 +393,5 @@ var AppRouter = function() {
var eventManager = new EventManager();
} catch (error) {
console.log("Error installing EventManager: " + error);
}
}
};
Oops, something went wrong.

0 comments on commit 6016a79

Please sign in to comment.