caboose-cms 0.2.5 → 0.2.6

data/app/assets/javascripts/caboose/model/bound_text.js

@@ -0,0 +1,87 @@
+
+BoundText = BoundControl.extend({
+
+  //el: false,
+  //model: false,
+  //attribute: false,
+  //binder: false,
+  
+  width: false,
+ 
+  init: function(params) {
+    for (var thing in params)
+      this[thing] = params[thing];
+    
+    this.el = this.el ? this.el : this.model.name.toLowerCase() + '_' + this.model.id + '_' + this.attribute.name;
+         
+    $('#'+this.el).wrap($('<div/>').attr('id', this.el + '_container').css('position', 'relative'));
+    $('#'+this.el+'_container').empty();
+    $('#'+this.el+'_container').append($('<input/>').attr('id', this.el).attr('type', 'text').attr('placeholder', 'empty').val(this.attribute.value));
+    $('#'+this.el+'_container').append($('<div/>').attr('id', this.el + '_placeholder').addClass('placeholder').append($('<span/>').html(this.attribute.nice_name + ': ')));
+    if (this.attribute.width)  $('#'+this.el).css('width' , this.attribute.width);
+    var w = $('#'+this.el+'_placeholder').outerWidth();
+    $('#'+this.el).attr('placeholder', 'empty').css('padding-left', '+=' + w).css('width', '-=' + w);
+    
+    var this2 = this;
+    $('#'+this.el).on('keyup', function(e) {
+      if (e.keyCode == 27) this2.cancel(); // Escape 
+      if (e.keyCode == 13) this2.save();   // Enter
+      
+      if ($('#'+this2.el).val() != this2.attribute.value_clean)
+        $('#'+this2.el).addClass('dirty');
+      else
+        $('#'+this2.el).removeClass('dirty');
+    });                             
+    $('#'+this.el).on('blur', function() { this2.save(); });
+  },
+  
+  save: function() {
+    this.attribute.value = $('#'+this.el).val();
+    if (this.attribute.value == this.attribute.value_clean)
+      return;
+    
+    this.show_loader();        
+    var this2 = this;
+    this.model.save(this.attribute, function(resp) {
+      if (resp.error)
+      {
+        this2.hide_loader();
+        this2.error(resp.error);
+      }
+      else
+      {
+        this2.show_check(500);
+        $('#'+this2.el).val(this2.attribute.value);
+        $('#'+this2.el).removeClass('dirty');
+
+        if (this2.binder.success)
+          this2.binder.success(this2);
+      }
+    });
+  },
+  
+  cancel: function() {    
+    this.attribute.value = this.attribute.value_clean;
+    $('#'+this.el).val(this.attribute.value);
+    $('#'+this.el).removeClass('dirty');
+    
+    if ($('#'+this.el+'_check').length)
+      this.hide_check();
+  },
+    
+  error: function(str) {
+    if (!$('#'+this.el+'_message').length)
+    {
+      $('#'+this.el+'_container').append($('<div/>')
+        .attr('id', this.el + '_message')
+        .css('width', $('#'+this.el).outerWidth())
+      );
+    }
+    $('#'+this.el+'_message').hide();
+    $('#'+this.el+'_message').html("<p class='note error'>" + str + "</p>");
+    $('#'+this.el+'_message').slideDown();
+    var this2 = this;
+    setTimeout(function() { $('#'+this2.el+'_message').slideUp(function() { $(this).empty(); }); }, 3000);
+  }
+  
+});

data/app/assets/javascripts/caboose/model/bound_textarea.js

@@ -0,0 +1,134 @@
+
+BoundTextarea = BoundControl.extend({
+
+  //el: false,
+  //model: false,
+  //attribute: false,
+  //binder: false,
+  
+  width: false,
+ 
+  init: function(params) {
+    for (var thing in params)
+      this[thing] = params[thing];
+    
+    this.el = this.el ? this.el : this.model.name.toLowerCase() + '_' + this.model.id + '_' + this.attribute.name;
+         
+    $('#'+this.el).wrap($('<div/>').attr('id', this.el + '_container').css('position', 'relative'));
+    $('#'+this.el+'_container').empty();
+    $('#'+this.el+'_container').append($('<textarea/>').attr('id', this.el).attr('placeholder', 'empty').val(this.attribute.value));
+    $('#'+this.el+'_container').append($('<div/>').attr('id', this.el + '_placeholder').addClass('placeholder').append($('<span/>').html(this.attribute.nice_name + ': ')));
+    if (this.attribute.width)  $('#'+this.el).css('width'  , this.attribute.width);
+    if (this.attribute.height) $('#'+this.el).css('height' , this.attribute.height);
+    var h = $('#'+this.el+'_placeholder').outerHeight();
+    $('#'+this.el).attr('placeholder', 'empty').css('padding-top', '+=' + h).css('height', '-=' + h);
+    
+    var this2 = this;
+    $('#'+this.el).on('keyup', function(e) {
+      if (e.keyCode == 27) this2.cancel(); // Escape 
+      //if (e.keyCode == 13) this2.save();   // Enter
+      
+      if ($('#'+this2.el).val() != this2.attribute.value_clean)
+      {
+        this2.show_controls();
+        $('#'+this2.el).addClass('dirty');
+      }
+      else
+        $('#'+this2.el).removeClass('dirty');
+    });                             
+    $('#'+this.el).on('blur', function() { this2.save(); });
+  },
+  
+  show_controls: function() {
+    if ($('#'+this.el+'_controls').length)
+      return;    
+    var w = $('#'+this.el).outerWidth();
+    var this2 = this;
+    $('#'+this.el+'_container').prepend($('<div/>')
+      .attr('id', this.el + '_controls')
+      .addClass('bound_textarea_controls')
+      .css('position', 'absolute')
+      .css('top', 0)
+      .css('left', w-148)
+      .css('width', 148)
+      .css('overflow', 'hidden')
+      .append($('<div/>')
+        .css('width', 148)
+        .css('margin-left', 148)
+        .append($('<a/>').html('Save'   ).addClass('save'   ).css('width', 60).attr('href', '#').click(function(event) { event.preventDefault(); this2.save();   }))
+        .append($('<a/>').html('Discard').addClass('discard').css('width', 80).attr('href', '#').click(function(event) { event.preventDefault(); this2.cancel(); }))
+      )
+    );  
+    $('#'+this.el+'_controls div').animate({ 'margin-left': 0 }, 300); 
+  },
+    
+  hide_controls: function() {
+    if (!$('#'+this.el+'_controls').length)
+      return;
+    var this2 = this;
+    $('#'+this.el+'_controls div').animate({ 'margin-left': 100 }, 300, function() { 
+      $('#'+this2.el+'_controls').remove(); 
+    });
+  },
+  
+  save: function() {
+    this.attribute.value = $('#'+this.el).val();
+    if (this.attribute.value == this.attribute.value_clean)
+      return;
+    
+    this.hide_controls();
+    this.show_loader();        
+    var this2 = this;
+    this.model.save(this.attribute, function(resp) {
+      if (resp.error)
+      {
+        this2.hide_loader();
+        this2.error(resp.error);
+      }
+      else
+      {
+        this2.show_check(500);
+        $('#'+this2.el).val(this2.attribute.value);
+        $('#'+this2.el).removeClass('dirty');
+
+        if (this2.binder.success)
+          this2.binder.success(this2);
+      }
+    });
+  },
+  
+  cancel: function() {
+    
+    if ($('#'+this.el).val() != this.attribute.value_clean)
+    {
+      if (confirm('This box has unsaved changes.  Hit OK to save changes, Cancel to discard.'))
+      { 
+        this.attribute.value       = $('#'+this.el).val();
+        this.attribute.value_clean = $('#'+this.el).val();
+        this.save();
+      }
+    }    
+    this.attribute.value = this.attribute.value_clean;
+    $('#'+this.el).val(this.attribute.value);
+    $('#'+this.el).removeClass('dirty');
+    
+    if ($('#'+this.el+'_check').length)
+      this.hide_check();
+  },
+    
+  error: function(str) {
+    if (!$('#'+this.el+'_message').length)
+    {
+      $('#'+this.el+'_container').append($('<div/>')
+        .attr('id', this.el + '_message')
+        .css('width', $('#'+this.el).outerWidth())
+      );
+    }
+    $('#'+this.el+'_message').hide();
+    $('#'+this.el+'_message').html("<p class='note error'>" + str + "</p>");
+    $('#'+this.el+'_message').slideDown();
+    var this2 = this;
+    setTimeout(function() { $('#'+this2.el+'_message').slideUp(function() { $(this).empty(); }); }, 3000);
+  }
+  
+});

data/app/assets/javascripts/caboose/model/class.js

@@ -0,0 +1,64 @@
+/* Simple JavaScript Inheritance
+ * By John Resig http://ejohn.org/
+ * MIT Licensed.
+ */
+// Inspired by base2 and Prototype
+(function(){
+  var initializing = false, fnTest = /xyz/.test(function(){xyz;}) ? /\b_super\b/ : /.*/;
+ 
+  // The base Class implementation (does nothing)
+  this.Class = function(){};
+ 
+  // Create a new Class that inherits from this class
+  Class.extend = function(prop) {
+    var _super = this.prototype;
+   
+    // Instantiate a base class (but only create the instance,
+    // don't run the init constructor)
+    initializing = true;
+    var prototype = new this();
+    initializing = false;
+   
+    // Copy the properties over onto the new prototype
+    for (var name in prop) {
+      // Check if we're overwriting an existing function
+      prototype[name] = typeof prop[name] == "function" &&
+        typeof _super[name] == "function" && fnTest.test(prop[name]) ?
+        (function(name, fn){
+          return function() {
+            var tmp = this._super;
+           
+            // Add a new ._super() method that is the same method
+            // but on the super-class
+            this._super = _super[name];
+           
+            // The method only need to be bound temporarily, so we
+            // remove it when we're done executing
+            var ret = fn.apply(this, arguments);        
+            this._super = tmp;
+           
+            return ret;
+          };
+        })(name, prop[name]) :
+        prop[name];
+    }
+   
+    // The dummy class constructor
+    function Class() {
+      // All construction is actually done in the init method
+      if ( !initializing && this.init )
+        this.init.apply(this, arguments);
+    }
+   
+    // Populate our constructed prototype object
+    Class.prototype = prototype;
+   
+    // Enforce the constructor to be what we expect
+    Class.prototype.constructor = Class;
+ 
+    // And make this class extendable
+    Class.extend = arguments.callee;
+   
+    return Class;
+  };
+})();

data/app/assets/javascripts/caboose/model/model.js

@@ -0,0 +1,37 @@
+
+var Model = function(params) {
+  for (var thing in params)
+    this[thing] = params[thing];
+  
+  if (this.options_url)
+  {
+    for (var attrib in this.options_url)
+      this.populate_options(this.options_url[attrib]);
+  }
+};
+
+Model.prototype = {
+  name: false,
+  id: false,
+  attributes: [],
+  attributes_clean: [],
+  update_url: false,
+  fetch_url: false,
+  options_url: false,
+  options: false,
+  
+  save: function(attrib, after) {
+    if (!attrib.update_url)
+      attrib.update_url = this.update_url;
+    attrib.save(after);
+  },
+  
+  populate_options: function(after, i) {
+    if (i == null || i == undefined)
+      i = 0;
+    if (i >= this.attributes.length)
+      after();
+    var this2 = this;
+    this.attributes[i].populate_options(function() { this2.populate_options(after, i+1); });
+  }
+};

data/app/assets/javascripts/caboose/model/model_binder.js

@@ -0,0 +1,61 @@
+
+var ModelBinder = function(params) { this.init(params); };
+
+ModelBinder.prototype = {
+  model: false,
+  controls: [],
+  //active_control: false,
+  success: false,
+  
+  init: function(params) {
+    this.model = new Model({        
+      name: params['name'],
+      id: params['id'],
+      attributes: [],
+      attributes_clean: []
+    });
+    if (params['update_url']) this.model.update_url = params['update_url'];
+    if (params['success'])    this.success = params['success'];
+      
+    var m = this.model;
+    $.each(params['attributes'], function(i, attrib) {
+      m.attributes[m.attributes.length] = new Attribute(attrib);
+    });
+    //this.model.populate_options();
+
+    var this2 = this;
+    $.each(this.model.attributes, function(i, attrib) {
+      var opts = {
+        model: this2.model,
+        attribute: attrib,
+        binder: this2
+      };    
+      var control = false;
+      if (attrib.type == 'text')          control = new BoundText(opts);
+      else if (attrib.type == 'select')   control = new BoundSelect(opts);
+      else if (attrib.type == 'checkbox') control = new BoundCheckbox(opts);
+      else if (attrib.type == 'textarea') control = new BoundTextarea(opts);
+
+      this2.controls.push();    
+    });
+    
+    //$(document).keyup(function(e) {
+    //  if (e.keyCode == 27) this2.cancel_active(); // Escape
+    //  //if (e.keyCode == 13) this2.save_active();   // Enter
+    //});
+  },
+  
+  //cancel_active: function() {
+  //  if (!this.active_control)
+  //    return;
+  //  this.active_control.cancel();
+  //  this.active_control = false;    
+  //},
+  
+  //save_active: function() {
+  //  if (!this.active_control)
+  //    return;
+  //  this.active_control.save();      
+  //  this.active_control = false;    
+  //},
+};

data/app/assets/javascripts/caboose/shortcut.js

@@ -0,0 +1,11 @@
+
+lastkeys = "";
+$(document).keyup(function(e) {
+  if (e.keyCode == 13 && lastkeys == "caboose") // Enter
+  {
+    
+  }
+  if (lastkeys.length > 7)
+    lastkeys = "";
+  lastkeys += String.fromCharCode(e.keyCode);
+});

data/app/assets/javascripts/caboose/station.js

@@ -1,15 +1,15 @@
 
-var CabooseStation = function(m) {
-  this.modal = m;
-  this.init();
+var CabooseStation = function(m, initial_tab) {
+  this.init(m, initial_tab);
 };
 
 CabooseStation.prototype = {
-  
+ 
   modal: false,
   
-  init: function()
+  init: function(m, initial_tab)
   {
+    this.modal = m;
     var this2 = this;
     // Handle main nav items with subnav
     $('#station > ul > li > a').click(function(event) {
@@ -34,6 +34,8 @@ CabooseStation.prototype = {
         parent.window.location = $(this).attr('href');
       }
     });
+    if (initial_tab)
+      $('#station > ul > li#nav_item_' + initial_tab + ' > a').trigger('click');
   },
   
   subnav: function(id, href)

data/app/assets/stylesheets/caboose/modal.css

@@ -56,11 +56,42 @@ body {
   padding: 10px 10px 10px 40px;
 }
 
+#modal_content div.yesnobox {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 22;
+  background-color: rgba(0, 0, 0, 0.9);
+  font-size: 20px;
+  text-align: center;
+}
+
+#modal_content div.yesnobox div {
+  padding: 20px;
+}
+  
+#modal_content div.yesnobox input {
+  width: auto;  
+}
+
 div.model_attribute_text {
   color: #000;
 }
 
-input {
+#modal_content div.top_right_controls {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+#modal_content div.top_right_controls a {
+  display: inline-block;
+  margin: 0;
+  padding: 4px 8px;
+}
+
+input, select, textarea {
+  font-family: Helvetica, arial;
   border: 1px solid #ccc;
   -moz-border-radius: 2px;
   -webkit-border-radius: 2px;
@@ -71,6 +102,33 @@ input {
   z-index: 20;
 }
 
+input.dirty,
+textarea.dirty {
+  background: #fff799;  
+}
+
+select {
+  padding: 0;
+  height: 44px;
+}
+
+option {
+  
+}
+
+select.fake {
+  background: transparent;
+  position: absolute;
+  top: 0;
+  left: 0;
+  color: transparent;
+}
+
+select.fake option {
+  background: #fff;
+  color: #000;
+}
+
 #modal_content .bound_input_check a,
 #modal_content .bound_input_cancel a {
   border: 1px solid #ccc;
@@ -96,6 +154,53 @@ input {
   color: rgba(255, 255, 255, 0.0);
 }
 
+#modal_content .bound_textarea_controls a {
+  display: inline-block;
+  margin: 3px 0 0 1px;
+  padding: 8px 0 6px 0;
+  background: #ccc;
+  color: #000;
+  text-align: center;
+  border: #666 1px solid;
+}
+
+#modal_content .bound_textarea_controls a.save    { width: 60px; }
+#modal_content .bound_textarea_controls a.discard { width: 80px; }
+  
+#modal_content .note,
+#modal_content .error {
+  margin: 0;
+}
+
+#modal_content .placeholder {
+  display: block;
+  margin: 0;
+  padding: 0 5px 0 0;
+  height: 34px;
+  
+  position: absolute;
+  top: 12px;
+  left: 10px;
+  z-index: 19;
+}
+
+#modal_content .placeholder span {
+  display: block;
+  font-size: 20px;
+  color: #757575;
+}
+
+#modal_content input[type='checkbox'] {
+  position: absolute;
+  top: 4px;
+  left: 0;
+  z-index: 19;
+  
+  margin: 0;
+  padding: 0;
+  width: 20px;
+}
+
 #modal_content .search_form {
   position: absolute;
   top: 0;