ajax-scaffold-generator 2.0

data/templates/script.js

@@ -0,0 +1,327 @@
+
+var Abstract = new Object();
+Abstract.Table = function() {};
+Abstract.Table.prototype = {
+  tagTest: function(element, tagName) {
+    return $(element).tagName.toLowerCase() == tagName.toLowerCase();
+  }		
+};	
+
+Abstract.TableEffect = function() {};
+Abstract.TableEffect.prototype = Object.extend(new Abstract.Table(), {
+  callEffect: function(target, command) {
+    var target = $(target);
+    if (this.tagTest(target,'tr')) {
+      var length = target.cells.length;
+      for (var i = 0; i < length; i++) {
+        eval("new " + command + "(target.cells[i]);");
+      }
+    } else {
+      eval("new " + command + "(targetElement);");
+    }
+  }		
+});	
+
+Abstract.TableRow = function() {};
+Abstract.TableRow.prototype = Object.extend(new Abstract.Table(), {
+  initialize: function(target, source) {
+    try {
+      var target = $(target);
+      var source = $(source);
+      if (this.tagTest(target,'tr') && this.tagTest(source,'tr')) {
+        var newRow = this.findParentTable(target).insertRow(this.getNewRowIndex(target));
+        newRow.parentNode.replaceChild(source, newRow);
+      }
+    } catch (e) {
+      alert(e);
+    }
+  },
+  findParentTable: function(element) {
+    var element = $(element);
+    var maxSearchDepth = 3;
+    var currentSearchDepth = 1;
+    var current = element;
+    while (currentSearchDepth <= maxSearchDepth) {
+      current = current.parentNode;
+      if (this.tagTest(current, 'table')) {
+        return current;
+      }
+      currentSearchDepth++;
+    }
+  }		
+});
+
+var TableRow = new Object();
+
+TableRow.MoveBefore = Class.create();
+TableRow.MoveBefore.prototype = Object.extend(new Abstract.TableRow(), {
+  getNewRowIndex: function(target) {
+    return target.rowIndex;
+  }
+});
+
+TableRow.MoveAfter = Class.create();
+TableRow.MoveAfter.prototype = Object.extend(new Abstract.TableRow(), {
+  getNewRowIndex: function(target) {
+    return target.rowIndex+1;
+  }
+});
+
+//Since scriptaculous doesn't support tables and causes and error applying effects to rows in IE 6.0 and Safari we need this wrapper
+var TableEffect = new Object();
+
+TableEffect.Fade = Class.create();
+TableEffect.Fade.prototype = Object.extend(new Abstract.TableEffect(), {
+  initialize: function(target) {
+    this.callEffect(target, 'Effect.Fade');
+  }
+});
+
+TableEffect.SlideDown = Class.create();
+TableEffect.SlideDown.prototype = Object.extend(new Abstract.TableEffect(), {
+  initialize: function(target) {
+    this.callEffect(target, 'Effect.SlideDown');
+  }
+});
+
+TableEffect.Highlight = Class.create();
+TableEffect.Highlight.prototype = Object.extend(new Abstract.TableEffect(), {
+  initialize: function(target) {
+    this.callEffect(target, 'Effect.Highlight');
+  }
+});
+  
+var AjaxScaffold = new Object();
+
+Object.extend(AjaxScaffold, {  
+
+  newOnLoading: function(request, type) {
+    Element.show(this.getNewIndicator(type));
+  }, 
+  newOnFailure: function(request, type) {
+    this.showError(type, request.responseText);
+    Element.hide(this.getNewIndicator(type));
+  }, 
+  newOnSuccess: function(request, type) {
+    var createForm = request.responseText;
+    new Insertion.Top(this.getTableBodyElement(type), createForm);
+    
+    Element.hide(this.getEmptyMessageElement(type));
+    Element.hide(this.getNewIndicator(type));
+    
+    var createElement = this.getCreateElement(type, this.getId(request,type));
+    Element.show(createElement);
+    new TableEffect.Highlight(createElement);
+    Form.focusFirstElement(createElement.getElementsByTagName('form')[0]);
+  }, 
+  newOnComplete: function(request, type) {
+  
+  },
+  getNewIndicator: function(type) {
+    return $(type + "-new-loading-indicator");
+  },
+
+  
+  
+  
+  createOnLoading: function(request,type,id) {
+    Element.show(this.getIndicator('create',type,id));
+  }, 
+  createOnFailure: function(request,type,id) {
+    var errorElement = this.getFormErrorElement('create',type,id)
+    var errorMessages = request.responseText;
+    errorElement.innerHTML = errorMessages;
+    Element.show(errorElement);
+    Element.hide(this.getIndicator('create',type,id));
+  },   
+  createOnSuccess: function(request,type,id) {      
+    var view = request.responseText;
+    new Insertion.Top(this.getTableBodyElement(type), view);
+    var createElement = this.getCreateElement(type,id);
+    
+    Element.remove(createElement);
+    
+    
+    var viewElement = this.getViewElement(type, this.getId(request,type));
+    new TableEffect.Highlight(viewElement);
+    
+    this.stripeTable(type);
+  },
+  createOnCancel: function(type,id) {
+    var createElement = this.getCreateElement(type,id);
+    Element.remove(createElement); 
+    if (this.countRows(type) == 0) {
+      Element.show(this.getEmptyMessageElement(type));
+    }
+  }, 
+
+
+  deleteOnLoading: function(type,id) {
+
+  }, 
+  deleteOnFailure: function(type,id) {
+    this.showError(type, request.responseText);
+  }, 
+  deleteOnComplete: function(type,id) {
+    var viewElement = this.getViewElement(type,id);
+    
+    new TableEffect.Fade(viewElement);
+    //We cannot set a timeout to remove this element from the DOM b/c once fade is complete
+    // get by ID no longer works on this element. So we'll set a class so that it isn't picked up in a re striping
+    Element.addClassName(viewElement, 'deleted');
+    
+    if (this.countRows(type) == 0) {
+      Element.show(this.getEmptyMessageElement(type));
+    } else {
+      this.stripeTable(type);
+    }
+  },
+  
+
+  editOnLoading: function(request,type,id) {
+    Element.show(this.getIndicator('edit',type,id));
+  }, 
+  editOnFailure: function(request,type,id) {
+    this.showError(type, request.responseText);
+    Element.hide(this.getIndicator('edit',type,id));
+  },   
+  editOnSuccess: function(request,type,id) { 
+    var viewElement = this.getViewElement(type,id);
+
+    //Ajax.Update with Insertion.top does not work when being used as a component with other scaffolds on the screen
+    // the only safe way it seems it to always insert new elements at the bottom and then move them into the appropriate location
+    var editForm = request.responseText;
+    new Insertion.Bottom(this.getTableBodyElement(type), editForm);
+    var editElement = this.getEditElement(type,id);
+    new TableRow.MoveAfter(viewElement, editElement); 
+    
+    var formElement = this.getFormElement(type,id);
+    
+    Element.hide(viewElement); 
+    Element.hide(this.getIndicator('edit',type,id));
+    Element.show(editElement);
+    new Effect.Highlight(editElement);
+    Form.focusFirstElement(formElement);
+  },
+  
+  
+  updateOnLoading: function(request,type,id) {
+    Element.show(this.getIndicator('update',type,id));
+  },
+  updateOnFailure: function(request,type,id) {
+    var errorElement = this.getFormErrorElement('update',type,id)
+    var errorMessages = request.responseText;
+    errorElement.innerHTML = errorMessages;
+    Element.show(errorElement);
+    Element.hide(this.getIndicator('update',type,id));
+  }, 
+  updateOnSuccess: function(request,type,id) {
+    var editElement = this.getEditElement(type,id);
+    var formElement = this.getFormElement(type,id);
+    var viewElement = this.getViewElement(type,id);
+    
+    Element.remove(viewElement);
+    
+    var view = request.responseText;
+    new Insertion.Bottom(this.getTableBodyElement(type), view);
+    var viewElement = this.getViewElement(type,id);
+    new TableRow.MoveBefore(editElement, viewElement); 
+    
+    Element.remove(editElement); 
+    this.stripeTable(type);
+    new TableEffect.Highlight(viewElement);
+  },
+  updateOnCancel: function(type,id) {
+    var viewElement = this.getViewElement(type,id);
+    var editElement = this.getEditElement(type,id);
+    
+    Element.show(viewElement); 
+    Element.remove(editElement);
+  },   
+  
+  
+  showError: function(type,html) {
+    var errorElement = this.getErrorMessageElement(type);
+    var errorMessageElement = errorElement.getElementsByTagName("p")[0];
+    errorMessageElement.innerHTML = html;
+    Element.show(errorElement);
+    new TableEffect.Highlight(errorElement);
+  },
+  hideError: function(type) {
+    var errorElement = this.getErrorMessageElement(type);
+    Element.hide(errorElement);  
+  },
+  
+
+  
+
+  getIndicator: function(scope, type,id) {
+    return $(type + '-' + scope + '-' + id + "-loading-indicator");
+  },
+  getFormErrorElement: function(scope,type,id) {
+    return $(scope + '-' + type + '-' + id + '-errors')
+  },
+  getId: function(request, type) {
+    return request.getResponseHeader(type + '-id');
+  },  
+  getCreateElement: function(type,id) {
+    return $('create-' + type + '-' + id);
+  },
+  getViewElement: function(type,id) {
+    return $('view-' + type + '-' + id);
+  },
+  getEditElement: function(type,id) {
+    return $('edit-' + type + '-' + id);
+  },
+  getFormElement: function(type,id) {
+    return $(type + '-' + id + '-form');
+  },
+  getEmptyMessageElement: function(type) {
+    return $(type + '-empty-message');
+  },
+  getErrorMessageElement: function(type) {
+    return $(type + '-error-message');
+  },
+  getTableBodyElement: function(type) {
+    return $(type + '-list-body');
+  },
+  stripeTable: function(type) {
+    var even = false;
+    var tableBody = this.getTableBodyElement(type);
+    var tableRows = tableBody.getElementsByTagName("tr");
+    var length = tableRows.length;
+
+    for (var i = 0; i < length; i++) {
+      var tableRow = tableRows[i];
+      //Make sure to skip rows that are create or edit rows or messages
+      if (!Element.hasClassName(tableRow, "edit") 
+      	&& !Element.hasClassName(tableRow, "create")
+      	&& !Element.hasClassName(tableRow, "deleted")
+      	&& !Element.hasClassName(tableRow, "message")) {
+        if (even) {
+          Element.addClassName(tableRow, "even");
+        } else {
+          Element.removeClassName(tableRow, "even");
+        }
+        even = !even;
+      }
+    }
+  },
+  countRows: function(type) {
+    var tableBody = this.getTableBodyElement(type);
+    var tableRows = tableBody.getElementsByTagName("tr");
+    var length = tableRows.length;
+
+    var validRows = 0;
+
+    for (var i = 0; i < length; i++) {
+      var tableRow = tableRows[i];
+      //Make sure to skip rows that are deleted or message
+      if (!Element.hasClassName(tableRow, "deleted")
+      	&& !Element.hasClassName(tableRow, "message")) {
+        validRows++;
+      }
+    }
+    return validRows;
+  }     
+});

data/templates/style.css

@@ -0,0 +1,324 @@
+.list-wrapper form,
+.list-wrapper table,
+.list-wrapper p,
+.list-wrapper div,
+.list-wrapper fieldset {
+margin: 0;
+padding: 0;
+}
+
+.list-wrapper {
+margin: 5px 0;
+}
+
+
+table.list {
+width: 100%;
+}
+
+.list-header {
+position: relative;
+background: #005CB8;
+clear: both;
+}
+
+* html .list-header {
+height: 1%;
+}
+
+.list-header div.actions a {
+color: #fff;
+background: url(/images/add.gif) 1px 50% no-repeat;
+font-size: 13px;
+font-family: Trebuchet MS;
+font-weight: bold;
+text-decoration: none;
+padding: 1px 2px 1px 19px;
+}
+
+.list-header div.actions a:hover {
+background: #378CDF url(/images/add.gif) 1px 50% no-repeat;
+}
+
+.list-header h2 {
+color: #fff;
+padding: 3px 5px;
+margin: 0;
+font-size: 18px;
+font-weight: normal;
+font-family: Verdana, sans-serif;
+}
+
+.list-header .actions {
+position: absolute;
+right: 5px;
+bottom: 2px;
+}
+
+table.list a {
+color: #0066CC;
+}
+
+table.list tr.header {
+background: #C5DBF7;
+}
+
+table.list th {
+font-size: 11px;
+padding: 2px;
+color: #fff;
+background: #555;
+letter-spacing: 0;
+font-family: Arial, sans-serif;
+text-align: left;
+padding-left: 5px;
+}
+
+table.list td {
+padding: 5px 4px;
+border-bottom: solid 1px #C5DBF7;
+color: #333;
+font-family: Verdana, sans-serif;
+font-size: 11px;
+background-color: #E6F2FF;
+}
+
+table.list tr.even td {
+background-color: #fff;
+}
+
+
+table.list .edit td,
+table.list .create td {
+padding: 0;
+padding: 4px;
+}
+
+table.list td.action {
+padding: 0;
+padding-right: 2px;
+}
+
+table.list td a {
+font-family: Verdana, sans-serif;
+font-size: 11px;
+font-weight: bold;
+letter-spacing: -1px;
+padding: 2px;
+line-height: 18px;
+}
+
+table.list td a:hover {
+background: #ff8;
+}
+
+.list-wrapper .list-footer {
+text-align: right;
+background: #005CB8;
+padding: 2px 0;
+border-bottom: none;
+}
+
+table.list tfoot a {
+color: #fff;
+font-size: 12px;
+font-weight: bold;
+letter-spacing: 0;
+font-family: Arial, sans-serif;
+}
+
+table.list tfoot a:hover {
+color: #0066CC;
+}
+
+table.list .edit td,
+table.list .create td {
+background: #DAFFCD;
+}
+
+table.list .edit td,
+table.list .create td {
+border-top: solid 2px #fff;
+border-bottom: solid 2px #fff;
+}
+
+table.list .actions div {
+width: 95px;
+right: 0;
+text-align: right;
+float: right;
+padding-right: 2px;
+}
+
+/* Messages */
+
+table.list .empty-message td {
+background: #e8e8e8;
+text-align: center;
+color: #666;
+}
+
+table.list .error-message td {
+border-bottom: solid 1px #fff;
+background: #f66;
+color: #333;
+font-size: 11px;
+font-weight: bold;
+}
+
+table.list .error-message p {
+padding-left: 19px;
+background: url(/images/error.gif) 0 0 no-repeat;
+}
+
+table.list .error-message td.actions {
+background: #f66;
+text-align: right;
+}
+
+table.list .error-message td.actions a {
+color: #333;
+}
+
+/* Error Styling */
+
+table.list #errorExplanation {
+background: #fcc;
+margin: 2px 7px;
+border: solid 1px #f66;
+}
+
+table.list #errorExplanation h2 {
+padding: 2px 5px 3px 20px;
+color: #333;
+font-size: 11px;
+margin: 0;
+letter-spacing: 0;
+font-family: Verdana;
+background: #f66 url(/images/error.gif) 2px 1px no-repeat;
+}
+
+table.list #errorExplanation ul {
+margin: 0;
+padding: 2px 2px 4px 25px;
+}
+
+table.list #errorExplanation p {
+font-size: 11px;
+padding: 2px 5px;
+font-family: Verdana;
+margin: 0;
+}
+
+table.list #errorExplanation ul li {
+font-size: 11px;
+margin: 0;
+font-family: Verdana;
+padding: 0;
+}
+
+table.list .fieldWithErrors input {
+border: solid 1px #f00;
+}
+
+/* Loading Indicator */
+
+.list-wrapper .loading-indicator {
+vertical-align: bottom;
+margin: 0;
+}
+
+.list-wrapper .list-header .loading-indicator,
+.list-wrapper .edit .loading-indicator,
+.list-wrapper .create .loading-indicator {
+vertical-align: bottom;
+margin-bottom: 3px;
+}
+
+/* Form Styling */
+
+.list-wrapper fieldset {
+border: none;
+}
+
+table.list label.required{
+font-weight: bold;
+}
+
+table.list label.example {
+font-size: 11px;
+font-family: arial;
+color: #888;
+}
+
+table.list h4 {
+padding: 2px;
+margin: 0;
+color: #1F7F00;
+font-size: 16px;
+letter-spacing: -1px;
+font-family: Georgia, Arial, sans-serif;
+}
+
+.list-wrapper .submit {
+font-weight: bold;
+font-size: 14px;
+font-family: Arial, sans-serif;
+letter-spacing: 0;
+margin: 0;
+margin-top: 5px;
+}
+
+table.list .edit a,
+table.list .create a {
+font-size: 14px;
+font-weight: bold;
+font-family: Arial, sans-serif;
+letter-spacing: 0;
+}
+
+table.list p {
+clear: both;
+}
+
+table.list div.row {
+clear: both;
+float: none;
+padding: 2px;
+margin-left: 5px;
+}
+
+table.list div.form-element {
+float: left;
+margin-right: 10px;
+margin-bottom: 2px;
+}
+
+table.list label {
+display: block;
+font-family: Verdana, sans-serif;
+color: #555;
+font-size: 11px;
+padding-bottom: 1px;
+}
+
+table.list input,
+table.list select {
+font-size: 16px;
+font-weight: bold;
+font-family: Arial, sans-serif;
+letter-spacing: -1px;
+}
+
+table.list .form-element input {
+padding: 1px;
+border: solid 1px #1F7F00;
+}
+
+table.list textarea {
+height: 65px;
+font-family: Arial, sans-serif;
+font-size: 12px;
+padding: 1px;
+border: solid 1px #1F7F00;
+}