ajax_scaffold_generator 1.0.0 → 2.0.0

data/templates/script.js

@@ -1,47 +1,327 @@
-var <%= plural_name %>Block = {
-  edit: function(id) {
-    Element.hide('<%= singular_name %>_' + id);
-    Element.show('edit_<%= singular_name %>_dialog_' + id);
-  },
-
-  editSuccess: function(id) {
-    this.editCancel(id);
-    
-    new Effect.Highlight('<%= singular_name %>_' + id);
-  },
-
-  editCancel: function(id) {
-    $('edit_<%= singular_name %>_error_' + id).innerHTML = '';
-    
-    Element.show('<%= singular_name %>_' + id);
-    Element.hide('edit_<%= singular_name %>_dialog_' + id);
-  },
-
-  add: function() {
-    Element.hide('add_<%= singular_name %>');
-    Element.show('add_<%= singular_name %>_dialog');
-    Form.reset('add_<%= singular_name %>_form');
-  },
-
-  addSuccess: function(request) {  
-    this.addCancel();
-    
-    new Insertion.Bottom('<%= plural_name %>', request.responseText);
-    new Effect.Highlight('<%= singular_name %>_' + this.getNewId(request));
-  },
-
-  addFailure: function(request) {
-    $('add_<%= singular_name %>_error').innerHTML = request.responseText;
-  },
-
-  addCancel: function() {
-    $('add_<%= singular_name %>_error').innerHTML = '';
-    
-    Element.show('add_<%= singular_name %>');
-    Element.hide('add_<%= singular_name %>_dialog');
-  },
-
-  getNewId: function(request) {
-    return request.getResponseHeader('<%= model_name %>ID');
-  }
-}
+
+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;
+  }     
+});