rails-backbone-forms 0.0.1

data/vendor/assets/javascripts/rails-backbone-forms/jquery-ui-editors.js

@@ -0,0 +1,405 @@
+;(function() {
+    
+    var Form = Backbone.Form,
+        Base = Form.editors.Base,
+        createTemplate = Form.helpers.createTemplate,
+        triggerCancellableEvent = Form.helpers.triggerCancellableEvent,
+        exports = {};
+    
+    /**
+     * Additional editors that depend on jQuery UI
+     */
+    exports.Date = Base.extend({
+
+        className: 'bbf-date',
+        
+        initialize: function(options) {
+            Base.prototype.initialize.call(this, options);
+            
+            if (!this.value) {
+                var date = new Date();
+                date.setSeconds(0);
+                date.setMilliseconds(0);
+                
+                this.value = date;
+            }
+        },
+
+        render: function() {
+            var el = $(this.el);
+
+            el.html('<input>');
+
+            var input = $('input', el);
+
+            input.datepicker({
+                dateFormat: 'dd/mm/yy',
+                showButtonPanel: true
+            });
+
+            //Make sure setValue of this object is called, not of any objects extending it (e.g. DateTime)
+            exports.Date.prototype.setValue.call(this, this.value);
+
+            return this;
+        },
+
+        /**
+        * @return {Date}   Selected date
+        */
+        getValue: function() {
+            var input = $('input', this.el),
+                date = input.datepicker('getDate');
+
+            return date;
+        },
+        
+        setValue: function(value) {
+            $('input', this.el).datepicker('setDate', value);
+        }
+
+    });
+
+
+
+    exports.DateTime = exports.Date.extend({
+
+        className: 'bbf-datetime',
+
+        template: createTemplate('<select>{{hours}}</select> : <select>{{mins}}</select>'),
+
+        render: function() {
+            function pad(n) {
+                return n < 10 ? '0' + n : n
+            }
+
+            //Render the date element first
+            exports.Date.prototype.render.call(this);
+
+            //Setup hour options
+            var hours = _.range(0, 24),
+                hoursOptions = [];
+
+            _.each(hours, function(hour) {
+                hoursOptions.push('<option value="'+hour+'">' + pad(hour) + '</option>');
+            });
+
+            //Setup minute options
+            var minsInterval = this.schema.minsInterval || 15,
+                mins = _.range(0, 60, minsInterval),
+                minsOptions = [];
+
+            _.each(mins, function(min) {
+                minsOptions.push('<option value="'+min+'">' + pad(min) + '</option>');
+            });
+
+            //Render time selects
+            $(this.el).append(this.template({
+                hours: hoursOptions.join(),
+                mins: minsOptions.join()
+            }));
+
+            //Store references to selects
+            this.$hours = $('select:eq(0)', this.el);
+            this.$mins = $('select:eq(1)', this.el);
+            
+            //Set time
+            this.setValue(this.value);
+
+            return this;
+        },
+
+        /**
+        * @return {Date}   Selected datetime
+        */
+        getValue: function() {
+            var input = $('input', this.el),
+                date = input.datepicker('getDate');
+
+            date.setHours(this.$hours.val());
+            date.setMinutes(this.$mins.val());
+            date.setMilliseconds(0);
+
+            return date;
+        },
+        
+        setValue: function(date) {
+            exports.Date.prototype.setValue.call(this, date);
+            
+            this.$hours.val(date.getHours());
+            this.$mins.val(date.getMinutes());
+        }
+
+    });
+
+
+    exports.List = Base.extend({
+
+        className: 'bbf-list',
+
+        //Note: The extra div around the <ul> is used to limit the drag area
+        template: createTemplate('\
+            <ul></ul>\
+            <div><button class="bbf-list-add">Add</div>\
+        '),
+
+        itemTemplate: createTemplate('\
+            <li rel="{{id}}">\
+                <span class="bbf-list-text">{{text}}</span>\
+                <div class="bbf-list-actions">\
+                    <button class="bbf-list-edit">Edit</button>\
+                    <button class="bbf-list-del">Delete</button>\
+                </div>\
+            </li>\
+        '),
+        
+        editorTemplate: createTemplate('\
+            <div class="bbf-field">\
+                <div class="bbf-list-editor"></div>\
+            </div>\
+        '),
+
+        events: {
+            'click .bbf-list-add':   'addNewItem',
+            'click .bbf-list-edit':  'editItem',
+            'click .bbf-list-del':   'deleteItem'
+        },
+
+        initialize: function(options) {
+            Base.prototype.initialize.call(this, options);
+
+            if (!this.schema) throw "Missing required option 'schema'";
+            
+            this.schema.listType = this.schema.listType || 'Text';
+            
+            if (this.schema.listType == 'NestedModel' && !this.schema.model)
+                throw "Missing required option 'schema.model'";
+        },
+
+        render: function() {
+            var el = $(this.el);
+            
+            //Main element
+            el.html(this.template());
+            
+            //Create list
+            var self = this,
+                el = $(this.el),
+                data = this.value || [],
+                schema = this.schema,
+                itemToString = this.itemToString,
+                itemTemplate = this.itemTemplate,
+                listEl = $('ul', el);
+            
+            _.each(data, function(itemData) {     
+                var text = itemToString.call(self, itemData);
+
+                //Create DOM element
+                var li = $(itemTemplate({
+                    id: itemData.id || '',
+                    text: text
+                }));
+
+                //Attach data
+                $.data(li[0], 'data', itemData);
+
+                listEl.append(li);
+            });
+
+            //Make sortable
+            if (schema.sortable !== false) {
+                listEl.sortable({
+                    axis: 'y',
+                    cursor: 'move',
+                    containment: 'parent'
+                });
+                
+                el.addClass('bbf-list-sortable');
+            }
+
+            //jQuery UI buttonize
+            $('button.bbf-list-add', el).button({
+                text: false,
+                icons: { primary: 'ui-icon-plus' }
+            });
+            $('button.bbf-list-edit', el).button({
+                text: false,
+                icons: { primary: 'ui-icon-pencil' }
+            });
+            $('button.bbf-list-del', el).button({
+                text: false,
+                icons: { primary: 'ui-icon-trash' }
+            });
+
+            return this;
+        },
+
+        /**
+         * Formats an item for display in the list
+         * For example objects, dates etc. can have a custom
+         * itemToString method which says how it should be formatted.
+         */
+        itemToString: function(data) {
+            if (!data) return data;
+            
+            var schema = this.schema;
+            
+            //If there's a specified toString use that
+            if (schema.itemToString)
+                return schema.itemToString(data);
+            
+            //Otherwise check if it's NestedModel with it's own toString() method
+            if (this.schema.listType == 'NestedModel') {
+                var model = new (this.schema.model)(data);
+                
+                return model.toString();
+            }
+            
+            //Last resort, just return the data as is
+            return data;
+        },
+
+        /**
+         * Add a new item to the list if it is completed in the editor
+         */
+        addNewItem: function(event) {
+            event.preventDefault();
+                     
+            var self = this;
+
+            this.openEditor(null, function(value) {
+                //Fire 'addItem' cancellable event
+                triggerCancellableEvent(self, 'addItem', [value], function() {
+                    var text = self.itemToString(value);
+
+                    //Create DOM element
+                    var li = $(self.itemTemplate({
+                        id: value.id || '',
+                        text: text
+                    }));
+
+                    //Store data
+                    $.data(li[0], 'data', value);
+
+                    $('ul', self.el).append(li);
+
+                    //jQuery UI buttonize
+                    $('button.bbf-list-edit', this.el).button({
+                        text: false,
+                        icons: { primary: 'ui-icon-pencil' }
+                    });
+                    $('button.bbf-list-del', this.el).button({
+                        text: false,
+                        icons: { primary: 'ui-icon-trash' }
+                    });
+                });
+            });
+        },
+
+        /**
+         * Edit an existing item in the list
+         */
+        editItem: function(event) {
+            event.preventDefault();
+                   
+            var self = this,
+                li = $(event.target).closest('li'),
+                originalValue = $.data(li[0], 'data');
+
+            this.openEditor(originalValue, function(newValue) {
+                //Fire 'editItem' cancellable event
+                triggerCancellableEvent(self, 'editItem', [newValue], function() {
+                    //Update display
+                    $('.bbf-list-text', li).html(self.itemToString(newValue));
+
+                    //Store data
+                    $.data(li[0], 'data', newValue);
+                });
+            });
+        },
+
+        deleteItem: function(event) {
+            event.preventDefault();
+        
+            var self = this,
+                li = $(event.target).closest('li'),
+                data = $.data(li[0], 'data');
+
+            var confirmDelete = (this.schema.confirmDelete) ? this.schema.confirmDelete : false,
+                confirmMsg = this.schema.confirmDeleteMsg || 'Are you sure?';
+                        
+            function remove() {
+                triggerCancellableEvent(self, 'removeItem', [data], function() {
+                    li.remove();
+                });
+            }
+            
+            if (this.schema.confirmDelete) {
+                if (confirm(confirmMsg)) remove();
+            } else {
+                remove();
+            }
+        },
+
+        /**
+         * Opens the sub editor dialog
+         * @param {Mixed}       Data (if editing existing list item, null otherwise)
+         * @param {Function}    Save callback. receives: value
+         */
+        openEditor: function(data, callback) {
+            var self = this,
+                schema = this.schema,
+                listType = schema.listType || 'Text';
+
+            var editor = Form.helpers.createEditor(listType, {
+                key: '',
+                schema: schema,
+                value: data
+            }).render();
+            
+            var container = $(this.editorTemplate());
+            $('.bbf-list-editor', container).html(editor.el);
+
+            var close = function() {
+                container.dialog('close');
+
+                editor.remove();
+                container.remove();
+            };
+
+            $(container).dialog({
+                resizable:  false,
+                modal:      true,
+                width:      500,
+                title:      data ? 'Edit item' : 'New item',
+                buttons: {
+                    'OK': function() {
+                        callback(editor.getValue());
+                        close();
+                    }, 
+                    'Cancel': close
+                }
+            });
+        },
+
+        getValue: function() {
+            var data = [];
+
+            $('li', this.el).each(function(index, li) {
+                data.push($.data(li, 'data'));
+            });
+
+            return data;
+        },
+        
+        setValue: function(value) {
+            this.value = value;
+            this.render();
+        }
+
+    });
+
+
+    //Exports
+    _.extend(Form.editors, exports);
+    
+})();

data/vendor/assets/javascripts/rails-backbone-forms/templates/bootstrap.js

@@ -0,0 +1,92 @@
+/**
+ * Include this file _after_ the main backbone-forms file to override the default templates.
+ * You only need to include templates you want to override.
+ * 
+ * Requirements when customising templates:
+ * - Each template must have one 'parent' element tag.
+ * - "data-type" attributes are required.
+ * - The main placeholder tags such as the following are required: fieldsets, fields
+ */
+;(function() {
+  var Form = Backbone.Form;
+
+    
+  //TWITTER BOOTSTRAP TEMPLATES
+  //Requires Bootstrap 2.x
+  Form.setTemplates({
+
+    //HTML
+    form: '\
+      <form class="form-horizontal">{{fieldsets}}</form>\
+    ',
+
+    fieldset: '\
+      <fieldset>\
+        <legend>{{legend}}</legend>\
+        {{fields}}\
+      </fieldset>\
+    ',
+
+    field: '\
+      <div class="control-group field-{{key}}">\
+        <label class="control-label" for="{{id}}">{{title}}</label>\
+        <div class="controls">\
+          <div class="input-xlarge">{{editor}}</div>\
+          <div class="help-block">{{help}}</div>\
+        </div>\
+      </div>\
+    ',
+
+    nestedField: '\
+      <div class="field-{{key}}">\
+        <div title="{{title}}" class="input-xlarge">{{editor}}</div>\
+        <div class="help-block">{{help}}</div>\
+      </div>\
+    ',
+
+    list: '\
+      <div class="bbf-list">\
+        <ul class="unstyled clearfix">{{items}}</ul>\
+        <button type="button" class="btn bbf-add" data-action="add">Add</div>\
+      </div>\
+    ',
+
+    listItem: '\
+      <li class="clearfix">\
+        <div class="pull-left">{{editor}}</div>\
+        <button type="button" class="btn bbf-del" data-action="remove">&times;</button>\
+      </li>\
+    ',
+
+    date: '\
+      <div class="bbf-date">\
+        <select data-type="date" class="bbf-date">{{dates}}</select>\
+        <select data-type="month" class="bbf-month">{{months}}</select>\
+        <select data-type="year" class="bbf-year">{{years}}</select>\
+      </div>\
+    ',
+
+    dateTime: '\
+      <div class="bbf-datetime">\
+        <p>{{date}}</p>\
+        <p>\
+          <select data-type="hour" style="width: 4em">{{hours}}</select>\
+          :\
+          <select data-type="min" style="width: 4em">{{mins}}</select>\
+        </p>\
+      </div>\
+    ',
+
+    'list.Modal': '\
+      <div class="bbf-list-modal">\
+        {{summary}}\
+      </div>\
+    '
+  }, {
+  
+    //CLASSNAMES
+    error: 'error' //Set on the field tag when validation fails
+  });
+
+
+})();

data/vendor/assets/javascripts/rails-backbone-forms/templates/default.js

@@ -0,0 +1,89 @@
+/**
+ * Include this file _after_ the main backbone-forms file to override the default templates.
+ * You only need to include templates you want to override.
+ * 
+ * Requirements when customising templates:
+ * - Each template must have one 'parent' element tag.
+ * - "data-type" attributes are required.
+ * - The main placeholder tags such as the following are required: fieldsets, fields
+ */
+;(function() {
+  var Form = Backbone.Form;
+
+  
+  //DEFAULT TEMPLATES
+  Form.setTemplates({
+    
+    //HTML
+    form: '\
+      <form class="bbf-form">{{fieldsets}}</form>\
+    ',
+    
+    fieldset: '\
+      <fieldset>\
+        <legend>{{legend}}</legend>\
+        <ul>{{fields}}</ul>\
+      </fieldset>\
+    ',
+    
+    field: '\
+      <li class="bbf-field field-{{key}}">\
+        <label for="{{id}}">{{title}}</label>\
+        <div class="bbf-editor">{{editor}}</div>\
+        <div class="bbf-help">{{help}}</div>\
+      </li>\
+    ',
+
+    nestedField: '\
+      <li class="bbf-field bbf-nested-field field-{{key}}" title="{{title}}">\
+        <label for="{{id}}">{{title}}</label>\
+        <div class="bbf-editor">{{editor}}</div>\
+        <div class="bbf-help">{{help}}</div>\
+      </li>\
+    ',
+
+    list: '\
+      <div class="bbf-list">\
+        <ul>{{items}}</ul>\
+        <div class="bbf-actions"><button type="button" data-action="add">Add</div>\
+      </div>\
+    ',
+
+    listItem: '\
+      <li>\
+        <button type="button" data-action="remove" class="bbf-remove">&times;</button>\
+        <div class="bbf-editor-container">{{editor}}</div>\
+      </li>\
+    ',
+
+    date: '\
+      <div class="bbf-date">\
+        <select data-type="date" class="bbf-date">{{dates}}</select>\
+        <select data-type="month" class="bbf-month">{{months}}</select>\
+        <select data-type="year" class="bbf-year">{{years}}</select>\
+      </div>\
+    ',
+
+    dateTime: '\
+      <div class="bbf-datetime">\
+        <div class="bbf-date-container">{{date}}</div>\
+        <select data-type="hour">{{hours}}</select>\
+        :\
+        <select data-type="min">{{mins}}</select>\
+      </div>\
+    ',
+
+    'list.Modal': '\
+      <div class="bbf-list-modal">\
+        {{summary}}\
+      </div>\
+    '
+  }, {
+
+    //CLASSNAMES
+    error: 'bbf-error'
+
+  });
+
+
+})();

data/vendor/assets/javascripts/rails-backbone-forms.js

@@ -0,0 +1,2 @@
+//= require rails-backbone-forms/jquery-ui-editors.js
+//= require rails-backbone-forms/backbone-forms.js

data/vendor/assets/stylesheets/rails-backbone-forms/editors/jquery-ui.css

@@ -0,0 +1,65 @@
+.bbf-jui-date input, .bbf-jui-datetime input {
+    width: 100px;
+    text-align: center;
+}
+
+    .bbf-jui-datetime input {
+        margin-right: 1em;
+    }
+
+    .bbf-jui-datetime select {
+        width: 50px;
+        text-align: center;
+    }
+    
+    
+
+.bbf-jui-list {
+    list-style-type: none;
+}
+    
+    .bbf-jui-list ul {
+        border: 1px solid #ccc;
+        border-bottom: none;
+        max-height: 150px;
+        overflow: auto;
+        margin: 0;
+        padding: 0;
+    }
+
+    .bbf-jui-list li {
+        border-top: 1px solid #ccc;
+        border-bottom: 1px solid #ccc;
+        height: 16px;
+        background: #fff;
+        padding: 4px;
+        margin: 0;
+        list-style-type: none;
+        margin-top: -1px;
+        position: relative;
+        
+    }    
+        .bbf-jui-list .bbf-list-sortable li {
+            cursor: move;
+        }
+        
+        .bbf-jui-list .bbf-list-actions {
+            position: absolute;
+            top: 2px;
+            right: 2px;
+        }
+    
+        .bbf-jui-list .bbf-list-actions button {
+            width: 19px;
+            height: 19px;
+        }
+    
+        .bbf-jui-list .bbf-list-add {
+            width: 100%;
+            height: 20px;
+            margin-top: -2px;
+        }
+        
+    .bbf-jui-list .bbf-list-editor {
+        width: 98%;
+    }

data/vendor/assets/stylesheets/rails-backbone-forms/templates/bootstrap.css

@@ -0,0 +1,43 @@
+/* Date */
+.bbf-date .bbf-date {
+  width: 4em
+}
+
+.bbf-date .bbf-month {
+  width: 9em;
+}
+
+.bbf-date .bbf-year {
+  width: 5em;
+}
+
+
+/* DateTime */
+.bbf-datetime select {
+  width: 4em;
+}
+
+
+/* List */
+.bbf-list .bbf-add {
+  margin-top: -10px
+}
+
+.bbf-list li {
+  margin-bottom: 5px
+}
+
+.bbf-list .bbf-del {
+  margin-left: 4px
+}
+
+
+/* List.Modal */
+.bbf-list-modal {
+  cursor: pointer;
+  border: 1px solid #ccc;
+  width: 208px;
+  border-radius: 3px;
+  padding: 4px;
+  color: #555;
+}