Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Update AMD wrapper for templates. Create a separate distribution fold…

…er for AMD files. Ref #77
  • Loading branch information...
commit d78524a25f549fa1bfcd121f6589ba52c1642e1c 1 parent 225e027
@powmedia authored
View
0  distribution/backbone-forms.amd.js → distribution.amd/backbone-forms.js
File renamed without changes
View
0  distribution/backbone-forms.amd.min.js → distribution.amd/backbone-forms.min.js
File renamed without changes
View
65 distribution.amd/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%;
+ }
View
0  distribution/editors/jquery-ui.amd.js → distribution.amd/editors/jquery-ui.js
File renamed without changes
View
0  distribution/editors/jquery-ui.amd.min.js → distribution.amd/editors/jquery-ui.min.js
File renamed without changes
View
0  distribution/editors/list.amd.js → distribution.amd/editors/list.js
File renamed without changes
View
0  distribution/editors/list.amd.min.js → distribution.amd/editors/list.min.js
File renamed without changes
View
43 distribution.amd/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;
+}
View
89 distribution.amd/templates/bootstrap.js
@@ -0,0 +1,89 @@
+/**
+ * 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
+ */
+define(['jquery', 'underscore', 'backbone'], function($, _, Backbone) {
+ 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
+ });
+
+
+});
View
134 distribution.amd/templates/default.css
@@ -0,0 +1,134 @@
+/* Form */
+.bbf-form {
+ margin: 0;
+ padding: 0;
+ border: none;
+}
+
+
+/* Field */
+.bbf-field {
+ margin: 1em 0;
+ list-style-type: none;
+ position: relative;
+ clear: both;
+}
+
+ .bbf-field label {
+ float: left;
+ width: 25%;
+ }
+
+ .bbf-field .bbf-editor {
+ margin-left: 25%;
+ width: 74%;
+ }
+
+ .bbf-field input, .bbf-field textarea, .bbf-field select {
+ width: 100%;
+ }
+
+ .bbf-field .bbf-help {
+ margin-left: 25%;
+ width: 74%;
+ color: #999;
+ }
+
+ .bbf-field.bbf-error .bbf-editor {
+ outline: 1px solid red;
+ }
+
+
+/* Radio */
+.bbf-radio {
+ list-style-type: none;
+}
+
+ .bbf-radio input {
+ width: auto;
+ }
+
+ .bbf-radio label {
+ float: none;
+ }
+
+
+/* Checkboxes */
+.bbf-checkboxes {
+ list-style-type: none;
+}
+
+ .bbf-checkboxes input {
+ width: auto;
+ }
+
+ .bbf-checkboxes label {
+ float: none;
+ }
+
+
+/* List */
+.bbf-list ul {
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+}
+
+ .bbf-list .bbf-error {
+ border: 1px solid red;
+ }
+
+ .bbf-list li {
+ clear: both;
+ width: 100%;
+ }
+
+ .bbf-list li .bbf-editor-container {
+ margin-right: 2em;
+ }
+
+ .bbf-list li .bbf-remove {
+ float: right;
+ width: 2em;
+ }
+
+.bbf-list .bbf-actions {
+ text-align: center;
+ clear: both;
+}
+
+/* List.Modal */
+.bbf-list-modal {
+ cursor: pointer;
+ border: 1px solid #ccc;
+ width: 208px;
+ border-radius: 3px;
+ padding: 4px;
+ color: #555;
+}
+
+
+
+/* Date */
+.bbf-date .bbf-date {
+ width: 4em;
+}
+
+.bbf-date .bbf-month {
+ width: 9em;
+}
+
+.bbf-date .bbf-year {
+ width: 6em;
+}
+
+
+/* DateTime */
+.bbf-datetime .bbf-date-container {
+ float: left;
+ margin-right: 1em;
+}
+
+.bbf-datetime select {
+ width: 4em;
+}
View
86 distribution.amd/templates/default.js
@@ -0,0 +1,86 @@
+/**
+ * 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
+ */
+define(['jquery', 'underscore', 'backbone'], function($, _, Backbone) {
+ 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'
+
+ });
+
+
+});
View
23 scripts/build
@@ -39,9 +39,9 @@ builder(baseDir)
builder(baseDir)
.setContent(mainContents)
.wrap('scripts/build-templates/main.amd.js', templateData)
- .save('distribution/backbone-forms.amd.js')
+ .save('distribution.amd/backbone-forms.js')
.uglify()
- .save('distribution/backbone-forms.amd.min.js');
+ .save('distribution.amd/backbone-forms.min.js');
//Standalone template files
@@ -52,10 +52,17 @@ builder(baseDir)
.wrap('scripts/build-templates/standalone-template.js')
.save('distribution/templates/'+template+'.js');
+ //HTML (AMD)
+ builder(baseDir)
+ .load('src/templates/'+template+'.js')
+ .wrap('scripts/build-templates/standalone-template.amd.js')
+ .save('distribution.amd/templates/'+template+'.js');
+
//CSS
builder(baseDir)
.load('src/templates/'+template+'.css')
- .save('distribution/templates/'+template+'.css');
+ .save('distribution/templates/'+template+'.css')
+ .save('distribution.amd/templates/'+template+'.css');
});
@@ -68,19 +75,21 @@ builder(baseDir)
.uglify()
.save('distribution/editors/'+name+'.min.js');
+ //CSS file
if (path.existsSync(baseDir + '/src/editors/'+name+'.css')) {
builder(baseDir)
.load('src/editors/'+name+'.css')
- .save('distribution/editors/'+name+'.css');
+ .save('distribution/editors/'+name+'.css')
+ .save('distribution.amd/editors/'+name+'.css');
}
//Save AMD version (for RequireJS)
builder(baseDir)
.load('src/editors/'+name+'.js')
- .wrap('scripts/build-templates/editor.amd.js')
- .save('distribution/editors/'+name+'.amd.js')
+ .wrap('scripts/build-templates/simple.amd.js')
+ .save('distribution.amd/editors/'+name+'.js')
.uglify()
- .save('distribution/editors/'+name+'.amd.min.js');
+ .save('distribution.amd/editors/'+name+'.min.js');
});
View
0  scripts/build-templates/editor.amd.js → scripts/build-templates/simple.amd.js
File renamed without changes
View
12 scripts/build-templates/standalone-template.amd.js
@@ -0,0 +1,12 @@
+/**
+ * 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
+ */
+define(['jquery', 'underscore', 'backbone'], function($, _, Backbone) {
+ var Form = Backbone.Form;
+
+ {{body}}
+
+});
Please sign in to comment.
Something went wrong with that request. Please try again.