modeljs 0.0.1

data/app/assets/javascripts/modeljs/attribute/select.js

@@ -0,0 +1,121 @@
+
+Model.Attribute.Select = Model.Attribute.extend({
+
+  text: '',
+  multiple: false,
+
+  needs_options: function()
+	{
+	  return true;	  
+	},
+	
+	view: function()
+  {
+    var html = this.text && this.text.length > 0 ? this.text : this.empty_text;
+  	//return $('<a/>')
+  	//	.attr('title', 'Click to edit')
+  	//	.attr('href', 'javascript:{};')
+  	//	.addClass('model_attribute_select')
+  	//	.html(html);
+  	return $('<div/>')
+  		.html(html);
+  },
+	
+  form: function()
+  {
+    var form = $('<form/>')    
+  	var select = $('<select></select>')
+			.attr('id', this.base)
+			.attr('name', this.base);
+			
+		if (this.multiple)
+		{
+			select.attr('multiple', 'multiple');
+			select.attr('size', '9');
+		}
+ 	
+		var this2 = this;
+		var options = Model.get_attribute_options(this.model.name, this.name);
+		$.each(options, function(i, option) 
+		{
+			if (option.children != null) // Option group
+			{
+				var optgroup = $('<optgroup></optgroup>');
+				optgroup.attr('label', option.title);
+		
+				$.each(option.children, function(j, option2) 
+				{
+					var opt = $('<option></option>')
+						.attr('text', option2.text)
+						.val(option2.value);
+					
+					if (!this2.multiple)
+						opt.attr('selected', (option2.value == this2.value));
+					else
+					{
+						opt.attr('selected', false);
+						for (var k=0; k<this2.value.length; k++)
+							if (option2.value == this2.value[k])
+							{
+								opt.attr('selected', true);
+								break;
+							}
+					}
+					optgroup.append(opt);
+				});
+				
+				select.append(optgroup);
+			}
+			else
+			{
+				var opt = $('<option></option>')
+					.val(option.value)
+					.text(option.text);
+									
+				if (!this2.multiple)
+				{
+					opt.attr('selected', (option.value == this2.value));
+				}
+				else
+				{
+					opt.attr('selected', false);
+					for (var j=0; j<this2.value.length; j++)
+						if (option.value == this2.value[j])
+						{
+							opt.attr('selected', true);
+							break;
+						}
+				}
+				select.append(opt);
+			}
+		});
+		form.append(select);
+		if (this.multiple)
+		{
+		  form.append("<br/>");
+			form.append(
+				$('<input/>')
+					.attr('type', 'button')
+					.val('Clear')
+					.addClass('update_btn')
+					.click(function() { $('#' + this.base).selectedIndex = -1; })
+			);
+		}
+		
+		return form;
+  },
+  
+  form_value: function()
+  {
+    if (!this.multiple)
+		  return $('#' + this.base + ' option:selected').val();
+		
+		var select = $('#' + this.base);
+		val = [];
+		$('#' + this.base + ' option:selected').each(function(i, opt) {
+			val[val.length] = $(opt).val();
+		});
+		return val;
+  }
+   
+});

data/app/assets/javascripts/modeljs/attribute/texarea.js

@@ -0,0 +1,42 @@
+
+Model.Attribute.Textarea = Model.Attribute.extend({
+
+  show_controls: true,
+  normal_text: false,
+  width: 200,
+  height: 100,
+    
+  view: function()
+  {
+    html = this.empty_text;
+    if (this.text && this.text.length > 0)			  html = this.text;
+    else if (this.value && this.value.length > 0) html = this.value;
+  	//return $('<a/>')
+  	//	.attr('title', 'Click to edit')
+  	//	.attr('href', 'javascript:{};')
+  	//	.css({
+  	//	  display: 'block',
+  	//	  width: this.width
+  	//	})
+  	//	.html(html);
+  	return $('<div/>')
+  		.css({
+  		  display: 'block',
+  		  width: this.width
+  		})
+  		.html(html);
+  },
+  
+  form: function()
+  {
+    return $('<form/>')
+      .append($('<textarea/>')
+			  .attr('id', this.base)
+			  .attr('name', this.base)
+			  .val(this.value)
+			  .css('width', this.width)
+			  .css('height', this.height)
+			);
+  }
+  
+});

data/app/assets/javascripts/modeljs/attribute/textjs.js

@@ -0,0 +1,63 @@
+
+Model.Attribute.Text = Model.Attribute.extend({
+    
+  show_reminder: true,
+	
+  view: function()
+  {
+    var html = false;
+    if (typeof(this.value) == 'string')
+      html = this.value && this.value.length > 0 ? this.value : this.empty_text;
+    else if (typeof(this.value) == 'number')
+      html = this.value != null ? this.value : this.empty_text;
+    else
+      html = this.value;
+    
+  	//return $('<a/>')
+  	//	.attr('title', 'Click to edit')
+  	//	.attr('href', 'javascript:{};')
+  	//	.html(html);
+  	return $('<div/>')
+  		.html(html);
+  },
+  
+  form: function()
+  {
+    var this2 = this;
+    var input = $('<input/>')
+  		.attr('type', 'text')
+  		.attr('id', this.base)
+  		.attr('name', this.base)
+  		.val(this.value);
+  	if (this.show_reminder)
+  		input.keyup(function (){ this2.flash_reminder(); })
+  	if (this.css)
+  	  input.css(this.css);
+  	var form = $('<form/>').append(input);
+  	if (this.show_reminder)
+  	  form.append($('<span/>').attr('id', this.base + '_reminder').css('font-size', '75%'));
+
+  	return form;
+  },
+  
+  flash_reminder: function()
+  {
+    $('#' + this.base + '_reminder')
+      .html(' (Enter to update, Escape to cancel)')
+      .delay(1000)
+      .fadeOut({ done: function() { $(this).empty().show(); }});
+  },
+  
+  post_form_display: function()
+  {
+    // Put the focus at the end of the string
+    $('#' + this.base).focus();
+    val = $('#' + this.base).val();
+    $('#' + this.base).val('');
+    $('#' + this.base).val(val);
+    
+    if (this.show_reminder)
+      this.flash_reminder();   
+  }
+  
+});

data/app/assets/javascripts/modeljs/attribute/time.js

@@ -0,0 +1,31 @@
+
+Model.Attribute.Time = Model.Attribute.extend({
+	
+  view: function()
+  {
+  	var html = this.value && this.value.length > 0 ? this.value : this.empty_text;  	
+  	return $('<a/>')
+  		.attr('title', 'Click to edit')
+  		.attr('href', 'javascript:{};')
+  		.addClass('model_attribute_text')
+  		.html(html);
+  },
+  
+  form: function()
+  {
+    return $('<form/>')
+      .append($('<input/>')
+        .attr('type', 'text')
+        .attr('id', this.base)
+        .attr('name', this.base)
+        .val(this.value)
+        .addClass('text_box')
+      );
+  },
+  
+  post_form_display: function()
+  {
+    $('#' + this.base).timepicker({ ampm: true }); 
+  }
+  
+});

data/app/assets/javascripts/modeljs/attribute/video.js

@@ -0,0 +1,95 @@
+
+Model.Attribute.Video = Model.Attribute.extend({
+    
+  show_reminder: true,
+  thumb_width: 320,
+  thumb_height: 240,
+	
+  view: function()
+  {
+    var html = false;
+    if (typeof(this.value) == 'string')
+      html = this.value && this.value.length > 0 ? this.value : this.empty_text;
+    else if (typeof(this.value) == 'number')
+      html = this.value != null ? this.value : this.empty_text;
+    else
+      html = this.value;
+    var div = $('<div/>').html(html);
+    var iframe = this.video_iframe(this.value);
+    if (iframe)
+      div.append($('<br/>')).append(iframe);
+    return div;
+  },
+  
+  form: function()
+  {
+    var this2 = this;
+    var input = $('<input/>')
+  		.attr('type', 'text')
+  		.attr('id', this.base)
+  		.attr('name', this.base)
+  		.val(this.value);
+  	if (this.show_reminder)
+  		input.keyup(function (){ this2.flash_reminder(); })
+  	if (this.css)
+  	  input.css(this.css);
+  	var form = $('<form/>').append(input);
+  	if (this.show_reminder)
+  	  form.append($('<span/>').attr('id', this.base + '_reminder').css('font-size', '75%'));
+  	
+  	var iframe = this.video_iframe(this.value);
+    if (iframe)
+      form.append($('<br/>')).append(iframe);
+
+  	return form;
+  },
+  
+  flash_reminder: function()
+  {
+    $('#' + this.base + '_reminder')
+      .html(' (Enter to update, Escape to cancel)')
+      .delay(1000)
+      .fadeOut({ done: function() { $(this).empty().show(); }});
+  },
+  
+  post_form_display: function()
+  {
+    // Put the focus at the end of the string
+    $('#' + this.base).focus();
+    val = $('#' + this.base).val();
+    $('#' + this.base).val('');
+    $('#' + this.base).val(val);
+    
+    if (this.show_reminder)
+      this.flash_reminder();   
+  },
+  
+  video_iframe: function()
+  {
+    if (this.value == null || this.value.length == 0)
+      return false;
+    
+    if (this.value.match(/youtube\.com/))
+  	{
+  	  var v = this.value.replace("youtube.com/watch?v=", '');  	  
+  	  return $('<iframe/>')
+  	    .attr('type', 'text/html')
+  	    .attr('width', this.thumb_width)
+  	    .attr('height', this.thumb_height)
+  	    .attr('frameborder', '0')
+  	    .attr('src', "http://www.youtube.com/embed/" + v + "?autoplay=0"); 	  
+  	}
+  	if (this.value.match(/vimeo\.com/))
+  	{
+  	  var v = this.value.replace("vimeo.com/", '');  	  
+  	  return $('<iframe/>')
+  	    .attr('type', 'text/html')
+  	    .attr('width', this.thumb_width)
+  	    .attr('height', this.thumb_height)
+  	    .attr('frameborder', '0')
+  	    .attr('src', "http://player.vimeo.com/video/" + v); 	  
+  	}
+  	return false;
+  }
+  
+});

data/app/assets/javascripts/modeljs/attribute.js

@@ -0,0 +1,69 @@
+
+Model.Attribute = Class.extend({
+  name: '',
+  nice_name: '',
+  value: '',	
+  model: false,
+  base: '', // model.name + '_' + model.id + '_' + attribute.name
+  type: false,
+  container: false,
+  controls: false,
+  show_controls: false,
+  message: false,
+  empty_text: '',
+  update_url: false, // If this attribute has a special update URL
+  custom_form: false, // If the attribute needs a custom form (used in file and image)
+  css: false, 
+  
+  init: function(params)
+  {
+    for (var thing in params)
+      this[thing] = params[thing];     
+    this.set_base(this.base);
+    if (!this.nice_name)  this.nice_name  = this.name.replace('_', ' ').capitalize();
+  },
+  
+  set_base: function(base)
+  {
+    this.base = base;
+    if (!this.container)  this.container 	= this.base + '_container';
+    if (!this.controls)   this.controls 	= this.base + '_controls';
+    if (!this.message)    this.message    = this.base + '_message';
+  },
+			
+  // Whether or not the attribute needs to go get options via ajax
+  needs_options: function() { return false; },
+	
+  // Returns the viewable representation of the attribute.
+  view: function() { return false; },
+  
+  // Returns a form  without update or cancel buttons (Assumes options already populated)
+  form: function() { return false; },
+  
+  // Returns the current value in the visible form.
+  form_value: function() { return $('#' + this.base).val(); },
+  
+  // Returns the values form the form that will be sent to ajax_update
+  form_values: function() {
+    var vals = {};
+    vals[this.name] = this.form_value();
+    return vals;
+  },
+   
+  // Runs after the view or form is displayed on the screen.
+  post_view_display: function() {},
+  post_form_display: function() { $('#' + this.base).focus(); },
+  
+  // Notes
+  loading: function(str) { this.show_message('loading_small', str); },
+  note:    function(str) { this.show_message('note_small'         , str); },
+  success: function(str) { this.show_message('note_small success' , str); },
+  error:   function(str) { this.show_message('note_small error'   , str); },
+  show_message: function(class_names, str) { 
+    $('#' + this.message).empty().removeClass('loading_small');
+    $('#' + this.message).addClass(class_names).html(str); 
+  },
+  
+  // If the attribute needs to handle any finished uploads
+  upload_finished: function(e, data) {}
+});

data/app/assets/javascripts/modeljs/form/embedded.js

@@ -0,0 +1,13 @@
+/*
+Class: Model.Form
+Author: William Barry (william@nine.is)
+Description: Abstract form class to encapsulate add and edit forms for models.
+*/
+
+Model.Form.Embedded = Class.extend({
+
+  add: function() { return false; },   
+  edit: function() { return false; },
+  listing: function() { return false; }, 
+  
+});

data/app/assets/javascripts/modeljs/form.js

@@ -0,0 +1,257 @@
+/*
+Class: Model.Form
+Author: William Barry (william@nine.is)
+Description: Abstract form class to encapsulate add and edit forms for models.
+*/
+
+Model.Form = Class.extend({
+    
+  class_name: 'Model.Form',
+  model: false,
+  message: false, 
+  adding_message: null,
+  deleting_message: null,
+  delete_message: null,
+  
+  // Listing info
+  listing_models: false,
+  
+  init: function(model, params) 
+  {
+    this.model = model;    
+    if (params)
+      for (var thing in params)
+	  	  this[thing] = params[thing];
+	  
+	  if (!this.message         ) this.message = model.name + '_message';
+    if (!this.adding_message  ) this.adding_message   = 'Adding ' + this.model.name + '...';
+    if (!this.deleting_message) this.deleting_message = 'Deleting ' + this.model.name + '...';
+    if (!this.delete_message  ) this.delete_message   = "Are you sure you want to delete the " + this.model.name + "?  This can't be undone.";
+  },
+
+  // Returns the form for adding the model or false for an embedded form.
+  add: function() 
+  {
+    var m = this.model;
+    var tbody = $('<tbody/>');
+    $(m.attributes).each(function(i, a) {
+      if (a.type == 'hidden')
+        return;
+      tbody.append($('<tr/>')
+        .append($('<td/>').css('vertical-align', 'top').html(a.nice_name + ':'))
+        .append($('<td/>').css('vertical-align', 'top').attr('id', m.name + '_' + m.id + '_' + a.name + '_container')
+          .append(a.form().children())
+        )
+      );
+    });
+    var form = $('<form/>')
+      .attr('id', 'new_' + m.name + '_form')
+      .submit(function() { return false; })
+      .append($('<table/>').append(tbody))
+      .append($('<div/>').attr('id', this.message_div))
+      .append($('<p/>')
+        .append($('<input/>').attr('type', 'submit').val('Add ' + m.name).click(function() { m.ajax_add(); }))
+        .append($('<input/>').attr('type', 'button').val('Back').click(function() { window.location = m.listing_url; }))
+      );
+    return form;
+  },
+  
+  // Runs after the add form has been displayed
+  post_add_display: function() {},
+  
+  // Returns the form for editing a model or false for an embedded form.
+  edit: function() 
+  {
+    var m = this.model;
+    
+    var this2 = this;
+    var tbody = $('<tbody/>');
+    $(m.attributes).each(function(i, a) {
+      if (a.type == 'hidden')
+        return;
+      tbody.append($('<tr/>')
+        .append($('<td/>').css('vertical-align', 'top').html(a.nice_name + ':'))
+        .append($('<td/>').css('vertical-align', 'top').attr('id', m.name + '_' + m.id + '_' + a.name + '_container'))
+      );
+    });
+    
+    var div = $('<div/>')
+      .append($('<table/>').append(tbody))
+      .append($('<div/>').attr('id', this.message))
+      .append($('<p/>')
+        .append($('<input/>').attr('type', 'button').val('Back').click(function() { window.location = m.listing_url; }))
+        .append(' ')
+        .append($('<input/>').attr('type', 'button').val('Delete ' + m.name).click(function() { m.ajax_delete(); }))
+      );
+    return div;
+  },
+  
+  // Runs after the edit form has been displayed
+  post_edit_display: function() {},
+  
+  listing_view: function()
+  {
+    var tr = $('<tr/>');
+    var m = this.model;
+    $(this.model.attributes).each(function(i, a) {
+      if (a.type == 'hidden') return;
+      tr.append(
+        $('<td/>')
+          .attr('id', m.name + '_' + m.id + '_' + a.name + '_container')
+          .append(a.view())
+      );
+    });
+    return tr;    
+  },
+  
+  post_listing_view_display: function() {},
+  
+  // Returns a listing table of models or false for an embedded listing
+  listing_form: function() 
+  {
+    var m = this.model;
+    var count = m.unhidden_attribute_count();
+    var tr = $('<tr/>').attr('id', m.name + '_' + m.id + '_listing_container');
+    $(this.model.attributes).each(function(i, a) {
+      if (a.type == 'hidden')
+        return;
+      var c = '';
+      if (i == 0)             c = 'edit_listing_first_cell';
+      else if (i == count-1)  c = 'edit_listing_last_cell';
+      else                    c = 'edit_listing_cell';
+      
+      tr.append($('<td/>')
+        .css('vertical-align', 'top')
+        .addClass(c)
+        .attr('id', m.name + '_' + m.id + '_' + a.name + '_container')
+      );
+    });    
+    return tr;
+  },
+   
+  // Runs after the listing has been displayed
+  post_listing_form_display: function() {},
+  
+  listing_view: function() 
+  {
+    var m = this.model;
+    var tr = $('<tr/>').attr('id', m.name + '_' + m.id + '_listing_container');
+    $(this.model.attributes).each(function(i, a) {
+      if (a.type == 'hidden')
+        return;
+      tr.append($('<td/>').css('vertical-align', 'top').attr('id', m.name + '_' + m.id + '_' + a.name + '_container'));
+    });
+    return tr;
+  },
+  
+  post_listing_view_display: function() {},
+  
+  // Gets the latest rows for the listing
+  refresh_listing_models: function(done)
+  {
+    var this2 = this;
+    var obj = Model.parse_url(this.model.listing_url);
+    $.ajax({
+      url: obj.url,
+      type: obj.verb,
+      success: function(models) {
+        this2.refresh_listing_models_helper(models);
+        done();
+      },
+      error: function() {
+        this2.ajax_error('Error');
+      }
+    });
+  },
+  
+  refresh_listing_models_helper: function(models)
+  { 
+    var this2 = this; 
+    this.listing_models = [];
+    $(models).each(function(i, m) {
+        
+      var attribs = [];
+      $(m.attributes).each(function(i, a) {
+        
+        // Find the original attribute with the same name
+        var attrib = false;
+        $(this2.model.attributes_original).each(function(j, a2) {
+          if (a2.name == a.name)
+          {
+            attrib = $.extend(true, {}, a2);
+            return false;
+          }
+        });
+        
+        // Copy new data into the original attribute hash
+        for (var thing in a)
+          attrib[thing] = a[thing];
+        attrib.base = this2.model.name + '_' + m.id + '_' + attrib.name;
+
+        attribs.push(attrib);
+      });        
+      var params = {
+        name:               this2.model.name,
+        id:                 m.id,
+        form:               this2.class_name,
+        attributes:         attribs,
+        create_url:         this2.model.create_url,
+        update_url:         this2.model.update_url,
+        delete_url:         this2.model.delete_url,
+        listing_url:        this2.model.listing_url,
+        listing_edit:       this2.model.listing_edit,
+        listing_delete:     this2.model.listing_delete, 
+        listing_empty_text: this2.model.listing_empty_text,
+        is_listing:         true
+      };
+      var m2 = new Model(params); 
+      this2.listing_models.push(m2);
+    });
+  },
+  
+  // Returns the values of the add form that will be sent to model.ajax_add 
+  add_values: function()
+  {
+    var m = this.model;
+    var data = {}; 
+    $(m.attributes).each(function(i, a) {
+      data[a.name] = a.form_value();
+    });
+    return data;
+  },
+
+  // Show a confirmation screen
+  confirm: function(params)
+  {
+    var this2 = this;
+    $('#' + this.message).empty()    
+      .append($('<div/>')
+        .addClass('note2 error')
+        .append($('<p/>').append(params.message))
+        .append($('<p/>')
+          .append($('<input />').attr('type', 'button').val('Yes').click(params.yes))
+          .append(" ")
+          .append($('<input />').attr('type', 'button').val('No').click(function() { $('#' + this2.message).empty(); }))
+        )
+      );
+  },
+  
+  ajax_success: function(resp)
+  {
+    if (resp.text)            $('#' + this.message).empty().append($('<p/>').addClass('note'        ).html(resp.text));
+    else if (resp.success)    $('#' + this.message).empty().append($('<p/>').addClass('note success').html(resp.success));
+    else if (resp.error)		  $('#' + this.message).empty().append($('<p/>').addClass('note error'  ).html(resp.error));
+    else if (resp.flash)      $('#' + this.message).empty().append($('<p/>').html(resp.flash).delay(2000).fadeOut().delay(2000).queue(function() { $(this).remove(); }));
+    else if (resp.redirect)   window.location = resp.redirect;
+    else                      $('#' + this.message).empty();
+  },
+
+  ajax_error: function(str) { this.error(str); },
+
+  // Notes
+  loading: function(str) { this.show_message('loading'      , str); },
+  note:    function(str) { this.show_message('note'         , str); },
+  success: function(str) { this.show_message('note success' , str); },
+  error:   function(str) { this.show_message('note error'   , str); },
+  show_message: function(class_names, str) { $('#' + this.message).empty().append($('<p/>').addClass(class_names).html(str)); }
+});