modeljs 0.0.1

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright 2013 YOURNAME
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,143 @@
+model.js
+========
+
+Javascript library to handle CRUD actions for models via ajax.
+
+Contains a model object, generic attribute object, and many common attribute types:
+
+- checkbox-multiple
+- checkbox
+- date-time
+- file
+- image
+- password
+- radio
+- rich-text
+- select
+- texarea
+- textjs
+- time
+
+Adding new attribute types is simple.  Just create a new class that extends Model.Attribute and override the following methods:
+
+- view: Returns a viewable representation of the attribute.
+- form: Returns an editable form of the attribute.
+
+Example of a new attribute type:
+<pre>
+Model.Attribute.MyNewAttribute = Model.Attribute.extend({
+  view: function() {
+  	return $('&lt;a/&gt;').html(this.value);
+  },  
+  form: function() {
+    return $('&lt;form/&gt;').append($('&lt;input/&lt;').attr('type', 'text').attr('id', this.base).val(this.value));
+  }
+});
+</pre>
+
+How to include on your site separately:
+<pre>
+&lt;script src="/assets/jquery.js"                            type="text/javascript"&gt;&lt;/script&gt;
+&lt;script src="/assets/jquery-ui.js"                         type="text/javascript"&gt;&lt;/script&gt;
+&lt;script src="/assets/class.js"                             type="text/javascript"&gt;&lt;/script&gt;
+&lt;script src="/assets/model/model.js"                       type="text/javascript"&gt;&lt;/script&gt;
+&lt;script src="/assets/model/attribute.js"                   type="text/javascript"&gt;&lt;/script&gt;
+&lt;script src="/assets/model/form.js"                        type="text/javascript"&gt;&lt;/script&gt;
+&lt;script src="/assets/model/attribute/checkbox-multiple.js" type="text/javascript"&gt;&lt;/script&gt;
+&lt;script src="/assets/model/attribute/checkbox.js"          type="text/javascript"&gt;&lt;/script&gt;
+&lt;script src="/assets/model/attribute/date-time.js"         type="text/javascript"&gt;&lt;/script&gt;
+&lt;script src="/assets/model/attribute/file.js"              type="text/javascript"&gt;&lt;/script&gt;
+&lt;script src="/assets/model/attribute/image.js"             type="text/javascript"&gt;&lt;/script&gt;
+&lt;script src="/assets/model/attribute/password.js"          type="text/javascript"&gt;&lt;/script&gt;
+&lt;script src="/assets/model/attribute/radio.js"             type="text/javascript"&gt;&lt;/script&gt;
+&lt;script src="/assets/model/attribute/rich-text.js"         type="text/javascript"&gt;&lt;/script&gt;
+&lt;script src="/assets/model/attribute/select.js"            type="text/javascript"&gt;&lt;/script&gt;
+&lt;script src="/assets/model/attribute/texarea.js"           type="text/javascript"&gt;&lt;/script&gt;
+&lt;script src="/assets/model/attribute/textjs.js"            type="text/javascript"&gt;&lt;/script&gt;
+&lt;script src="/assets/model/attribute/time.js"              type="text/javascript"&gt;&lt;/script&gt;
+</pre>
+
+Example when adding a model:
+<pre>
+&lt;div id='user_new_container'&gt;&lt;/div&gt;
+</pre><pre>
+&lt;script type='text/javascript'&gt;
+$(document).ready(function() {
+  user = new Model({
+    name: 'User',
+    id: 'new',
+    attributes: [
+      { name: 'username', type: 'text', value: '' }
+    ]
+  });
+});
+&lt;/script&gt;
+</pre>
+
+Example when editing a model:
+<pre>
+&lt;div id='user_27_container'&gt;&lt;/div&gt;
+</pre><pre>
+&lt;script type='text/javascript'&gt;
+$(document).ready(function() {
+  user = new Model({
+    name: 'User',
+    id: 27,
+    attributes: [
+      { name: 'first_name' , type: 'text', value: "&lt;%= @user.first_name %&gt;" },
+      { name: 'last_name'  , type: 'text', value: "&lt;%= @user.last_name  %&gt;" },
+      { name: 'username'   , type: 'text', value: "&lt;%= @user.username   %&gt;" },
+      { name: 'email'      , type: 'text', value: "&lt;%= @user.email      %&gt;" },
+      { name: 'password'   , type: 'password' },
+      {
+        name: 'roles', 
+        type: 'checkbox-multiple',  
+        value: [1, 14, 18],
+        text: "Managers, Clients, Assistants",
+        empty_text: '[No roles]',
+        multiple: true,
+        loading_message: 'Getting roles...',
+        options_url: '/roles/options'
+      },
+      {
+        name: 'pic', 
+        type: 'image',  
+        value: '',
+        update_url: '/users/27/update-pic'
+      },
+      {
+        name: 'resume', 
+        type: 'file',  
+        value: '',
+        update_url: '/users/27/update-resume'
+      }
+    ]
+  });
+});
+&lt;/script&gt;
+</pre>
+
+<h2>Update Responses</h2>
+
+For attributes that don't require a file upload, Model.js expects the server to respond with the following json object:
+
+<pre>
+{
+  success: true, // Whether or not the save was successful
+  error: false,  // Any error to display to the user
+  attribute: {}  // Any attribute values to set in the local attribute object
+}
+</pre>
+ 
+The File and Image attributes allow for file uploads. Since a typical ajax call can't upload files, this is done with a hidden iframe.  Because of this, the response required for a file or image update is the following:
+
+<pre>
+parent.Model.upload_finished({
+  name: 'user',           // The name of the model
+  id: 27,                 // The id of the model 
+  attribute_name: 'pic',  // The name of the attribute
+  success: true,          // Whether or not the save was successful
+  error: false,           // Any error to display to the user
+  attribute: {}           // Any attribute values to set in the local attribute object
+});
+</pre>

data/Rakefile

@@ -0,0 +1,40 @@
+#!/usr/bin/env rake
+begin
+  require 'bundler/setup'
+rescue LoadError
+  puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
+end
+begin
+  require 'rdoc/task'
+rescue LoadError
+  require 'rdoc/rdoc'
+  require 'rake/rdoctask'
+  RDoc::Task = Rake::RDocTask
+end
+
+RDoc::Task.new(:rdoc) do |rdoc|
+  rdoc.rdoc_dir = 'rdoc'
+  rdoc.title    = 'Caboose'
+  rdoc.options << '--line-numbers'
+  rdoc.rdoc_files.include('README.rdoc')
+  rdoc.rdoc_files.include('lib/**/*.rb')
+end
+
+APP_RAKEFILE = File.expand_path("../test/dummy/Rakefile", __FILE__)
+load 'rails/tasks/engine.rake'
+
+
+
+Bundler::GemHelper.install_tasks
+
+require 'rake/testtask'
+
+Rake::TestTask.new(:test) do |t|
+  t.libs << 'lib'
+  t.libs << 'test'
+  t.pattern = 'test/**/*_test.rb'
+  t.verbose = false
+end
+
+
+task :default => :test

data/app/assets/javascripts/modeljs/attribute/checkbox-multiple.js

@@ -0,0 +1,72 @@
+
+Model.Attribute.CheckboxMultiple = Model.Attribute.extend({
+
+  text: '',
+  show_controls: true,
+
+  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:{};')
+  		.html(html);
+  },
+  
+  form: function()
+  {
+    var tbody = $('<tbody/>');
+    var this2 = this;
+    var options = Model.get_attribute_options(this.model.name, this.name);    
+		$.each(options, function(i, option) {
+		  var cb = $('<input/>')
+			  .attr('name', this2.base)
+			  .attr('id', this2.base + '_' + i)
+			  .attr('type', 'checkbox')
+			  .val(option.value);
+			if (this2.in_value(option.value))
+			  cb.attr('checked', true);
+		  
+			tbody.append($('<tr/>')
+				.append($('<td/>').append(cb))
+				.append($('<td/>')
+				  .append($('<label/>')
+				    .attr('for', this2.base + '_' + i)
+				    .html(option.text)
+				))
+			);
+		});
+		return $('<form/>').append($('<table/>').append(tbody));
+  },
+  
+  form_value: function()
+  {
+		val = [];
+		$('#' + this.container + ' input[type=checkbox]:checked').each(function(i, checkbox) {
+			val[val.length] = $(checkbox).val();
+		});
+		return val;
+  },
+  
+  in_value: function(val)
+  {
+    var count = this.value.count;
+    for (var v in this.value)
+      if (val == this.value[v])
+        return true;
+    return false;
+  },
+  
+  needs_options: function()
+	{
+	  if (!this.options) 
+	    return true;
+	  return false;
+	}
+   
+});

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

@@ -0,0 +1,32 @@
+
+Model.Attribute.Checkbox = Model.Attribute.extend({
+ 
+  show_controls: true,
+    
+  view: function()
+  {
+  	return $('<a/>')
+  		.attr('title', 'Click to edit')
+  		.attr('href', 'javascript:{};')
+  		.addClass('model_attribute_text')
+  		.html(this.value == 1 ? 'Yes' : 'No');
+  },
+  
+  form: function()
+  {
+    return $('<form/>')
+      .append($('<input/>')
+					.attr('id', this.base)
+					.attr('name', this.base)
+					.attr('type', 'checkbox')
+					.val('1')
+					.attr('checked', this.value == 1)
+			);
+  },
+  
+  form_value: function()
+  {
+    return $('#' + this.base).is(':checked') ? 1 : 0; 
+  }
+  
+});

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

@@ -0,0 +1,30 @@
+
+Model.Attribute.DateTime = 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:{};')
+  		.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).datetimepicker({ ampm: true }); 
+  }
+  
+});

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

@@ -0,0 +1,88 @@
+
+Model.Attribute.File = Model.Attribute.extend({
+	
+  custom_form: true, // Tells the model to not do the traditional ajax_update.
+                     // This means we control the entire update process
+    
+  view: function()
+  { 
+    return $('<a/>')
+  	  .attr('href', 'javascript:{};')
+  	  .html('[Upload new file]');
+  },
+  
+  post_view_display: function() 
+  {
+    if (!this.value || this.value.length == 0)
+    {
+      $('#' + this.container).append("No file has been uploaded.");
+      return;
+  	}
+  	$('#' + this.container).append($('<a/>')
+      .attr('href', this.value)
+      .html('[Download file]')
+    );
+  },
+  
+  form: function()
+  {
+    var form = $('<form/>')
+      .attr('action', this.update_url)
+      .attr('method', 'post')
+      .attr('enctype', 'multipart/form-data')
+      .attr('encoding', 'multipart/form-data')
+      .attr('target', this.base + '_iframe');
+      
+    // Add the csrf-token
+    form.append($('<input/>')
+      .attr('type', 'hidden')
+      .attr('name', 'authenticity_token')
+      .val($("meta[name=csrf-token]").attr('content'))
+    );
+
+		form.append($('<input />')
+		  .attr('type', 'file')
+			.attr('id', this.base)
+			.attr('name', this.base)
+		);
+		
+		this2 = this;
+		var controls = $('<span/>')
+      .attr('id', this.controls) 
+      .append($('<input/>').attr('type', 'submit').val('Update').addClass('update_btn').click(function() { this2.loading('Uploading...');     }))
+      .append($('<input/>').attr('type', 'button').val('Cancel').addClass('cancel_btn').click(function() { this2.model.show_attribute(this2); }));
+    form.append(controls);
+    form.append($('<span/>').attr('id', attrib.message));
+    return form;
+  },
+  
+  post_form_display: function()
+  {
+    // Create the iframe  
+    $('#' + this.container).append($('<iframe></iframe>')
+      .attr('id', this.base + '_iframe')
+      .attr('name', this.base + '_iframe')
+      .css('width', '0')
+		  .css('height', '0')
+		  .css('border', '0')
+      //.css('width', 600)
+      //.css('height', 400)
+      //.css('border', '#000 1px solid')
+    );   
+  },
+  
+  upload_finished: function(resp) 
+  {
+    if (resp.error)
+		{
+		  this.error(resp.error);
+		}
+		if (resp.success)
+		{
+		  if (resp.attribute)
+		    for (var thing in resp.attribute)
+		      attrib[thing] = resp.attribute[thing];
+			this.model.show_attribute(this);
+		}
+  }  
+});

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

@@ -0,0 +1,19 @@
+
+Model.Attribute.Hidden = Model.Attribute.extend({
+   
+  view: function()
+  {
+  	return false;
+  },
+  
+  form: function()
+  {
+    return false;
+  },
+  
+  form_value: function() 
+  { 
+    return this.value;
+  }
+  
+});

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

@@ -0,0 +1,105 @@
+
+Model.Attribute.Image = Model.Attribute.extend({
+	
+  show_thumb: true,
+  thumb_width: 100,
+  custom_form: true, // Tells the model to not do the traditional ajax_update.
+                     // This means we control the entire update process
+
+  view: function()
+  { 
+    return $('<a/>')
+  	  .attr('href', 'javascript:{};')
+  	  .html('[Upload new image]');
+  },
+  
+  post_view_display: function() 
+  {
+    if (!this.show_thumb)
+      return;
+    
+    if (!this.value || this.value.length == 0)
+    {
+      $('#' + this.container).append("No image has been uploaded.");
+      return;
+  	}
+  	$('#' + this.container).append($('<p/>')
+    	.append($('<img />')
+    	  .attr('src', this.value + '?' + Math.random())
+    	  .attr('width', this.thumb_width)
+    	)
+    );
+  },
+  
+  form: function()
+  {
+    var form = $('<form/>')
+      .attr('action', this.update_url)
+      .attr('method', 'post')
+      .attr('enctype', 'multipart/form-data')
+      .attr('encoding', 'multipart/form-data')
+      .attr('target', this.base + '_iframe');
+      
+    // Add the csrf-token
+    form.append($('<input/>')
+      .attr('type', 'hidden')
+      .attr('name', 'authenticity_token')
+      .val($("meta[name=csrf-token]").attr('content'))
+    );
+						
+    if (this.show_thumb)
+    {
+    	form.append($('<p/>')
+    	  .append($('<img />')
+    	    .attr('src', this.value + '?' + Math.random())
+    	    .attr('width', this.thumb_width)
+    	  ));
+    }
+
+		form.append($('<input />')
+		  .attr('type', 'file')
+			.attr('id', this.base)
+			.attr('name', this.base)
+		);
+		
+		this2 = this;
+		var controls = $('<span/>')
+      .attr('id', this.controls) 
+      .append($('<input/>').attr('type', 'submit').val('Update').addClass('update_btn').click(function() { this2.loading('Uploading...');     }))
+      .append($('<input/>').attr('type', 'button').val('Cancel').addClass('cancel_btn').click(function() { this2.model.show_attribute(this2); }));
+    form.append(controls);
+    form.append($('<span/>').attr('id', attrib.message));
+    return form;
+  },
+  
+  post_form_display: function()
+  {
+    // Create the iframe  
+    $('#' + this.container).append($('<iframe></iframe>')
+      .attr('id', this.base + '_iframe')
+      .attr('name', this.base + '_iframe')
+      .css('width', '0')
+		  .css('height', '0')
+		  .css('border', '0')
+      //.css('width', 600)
+      //.css('height', 400)
+      //.css('border', '#000 1px solid')
+    );   
+  },
+  
+  upload_finished: function(resp) 
+  {
+    if (resp.error)
+		{
+		  this.error(resp.error);
+		}
+		if (resp.success)
+		{
+		  if (resp.attribute)
+		    for (var thing in resp.attribute)
+		      attrib[thing] = resp.attribute[thing];
+			this.model.show_attribute(this);
+		}
+  }
+  
+});

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

@@ -0,0 +1,36 @@
+
+Model.Attribute.Password = Model.Attribute.extend({
+    
+  view: function()
+  {
+  	return $('<a/>')
+  		.attr('title', 'Click to edit')
+  		.attr('href', 'javascript:{};')
+  		.html('Change Password');  		
+  },
+    
+  form: function()
+  {
+    return $('<form/>')
+      .append($('<input/>')
+  		  .attr('type', 'password')
+  		  .attr('id', this.base)
+  		  .attr('name', this.base)
+  		)
+  		.append($('<br/>'))
+  		.append($('<input/>')
+  			.attr('type', 'password')
+  			.attr('id', this.base + '_confirm')
+  			.attr('name', this.base + '_confirm')
+  		)
+  		.append($('<span> (Confirm)</span>'));
+  },
+  
+  form_values: function()
+  {
+    values = this._super();
+    values.confirm = $('#' + this.base + '_confirm').val();
+    return values;
+  }
+  
+});

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

@@ -0,0 +1,60 @@
+
+Model.Attribute.Radio = Model.Attribute.extend({
+ 
+  text: '',
+  show_controls: true,
+  
+  needs_options: function()
+	{
+	  return true;	  
+	},
+  
+  view: function()
+  {
+    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_text')
+  		.html(html);
+  },
+  
+  form: function()
+  {
+    var tbody = $('<tbody/>');
+    var this2 = this;
+    var options = Model.get_attribute_options(this.model.name, this.name);
+		$.each(options, function(i, option) {
+			tbody.append($('<tr/>')
+				.append($('<td/>')
+					.append($('<input/>')
+						.attr('name', this2.base)
+						.attr('id', this2.base + '_' + i)
+						.attr('type', 'radio')
+						.val(option.value)
+				))
+				.append($('<td/>')
+				  .append($('<label/>')
+				    .attr('for', this2.base + '_' + i)
+				    .html(option.text)
+				))
+			);
+		});
+		return $('<form/>').append($('<table/>').append(tbody));
+  },
+  
+  form_value: function()
+  {
+    value = '';
+		$('#' + this.base + '_form input:radio').each(function(i, r) {
+		  if (r.checked)
+		  {
+		    value = r.val();
+				return false;
+			}
+		});
+		return value;
+		/* Note: if for some reason a value is not selected, value becomes empty. */ 
+  }
+  
+});

data/app/assets/javascripts/modeljs/attribute/rich-text.js

@@ -0,0 +1,40 @@
+
+Model.Attribute.RichText = Model.Attribute.extend({
+
+  show_controls: true,
+    
+  view: function()
+  {
+    tinyMCE.execCommand('mceRemoveControl', null, $('#' + this.base));
+    var html = this.value && this.value.length > 0 ? this.value : this.empty_text;
+		return $('<div/>')
+			.addClass('model_attribute_container')
+			.html(html);
+  },
+  
+  form: function()
+  {
+    return $('<form/>')
+      .append($('<textarea/>')
+				.addClass('mceEditor')
+				.attr('id', this.base)
+				.attr('name', this.base)
+				.val(this.value)
+			);
+  },
+  
+  form_value: function()
+  {
+    tinyMCE.triggerSave();
+    tinyMCE.execCommand('mceRemoveControl', null, $('#' + this.base));
+    return $('#' + this.base).val();
+  },
+  
+  post_form_display: function()
+	{		
+		$('#' + this.base).css('display', 'block');
+		tinyMCE.execCommand('mceAddControl', null, $('#' + this.base));
+		$('#' + this.base).focus();
+	}
+  
+});