Skip to content
This repository
Browse code

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

…er for AMD files. Ref #77
  • Loading branch information...
commit d78524a25f549fa1bfcd121f6589ba52c1642e1c 1 parent 225e027
Charles Davison authored
0  distribution/backbone-forms.amd.js → distribution.amd/backbone-forms.js
File renamed without changes
0  distribution/backbone-forms.amd.min.js → distribution.amd/backbone-forms.min.js
File renamed without changes
65 distribution.amd/editors/jquery-ui.css
... ... @@ -0,0 +1,65 @@
  1 +.bbf-jui-date input, .bbf-jui-datetime input {
  2 + width: 100px;
  3 + text-align: center;
  4 +}
  5 +
  6 + .bbf-jui-datetime input {
  7 + margin-right: 1em;
  8 + }
  9 +
  10 + .bbf-jui-datetime select {
  11 + width: 50px;
  12 + text-align: center;
  13 + }
  14 +
  15 +
  16 +
  17 +.bbf-jui-list {
  18 + list-style-type: none;
  19 +}
  20 +
  21 + .bbf-jui-list ul {
  22 + border: 1px solid #ccc;
  23 + border-bottom: none;
  24 + max-height: 150px;
  25 + overflow: auto;
  26 + margin: 0;
  27 + padding: 0;
  28 + }
  29 +
  30 + .bbf-jui-list li {
  31 + border-top: 1px solid #ccc;
  32 + border-bottom: 1px solid #ccc;
  33 + height: 16px;
  34 + background: #fff;
  35 + padding: 4px;
  36 + margin: 0;
  37 + list-style-type: none;
  38 + margin-top: -1px;
  39 + position: relative;
  40 +
  41 + }
  42 + .bbf-jui-list .bbf-list-sortable li {
  43 + cursor: move;
  44 + }
  45 +
  46 + .bbf-jui-list .bbf-list-actions {
  47 + position: absolute;
  48 + top: 2px;
  49 + right: 2px;
  50 + }
  51 +
  52 + .bbf-jui-list .bbf-list-actions button {
  53 + width: 19px;
  54 + height: 19px;
  55 + }
  56 +
  57 + .bbf-jui-list .bbf-list-add {
  58 + width: 100%;
  59 + height: 20px;
  60 + margin-top: -2px;
  61 + }
  62 +
  63 + .bbf-jui-list .bbf-list-editor {
  64 + width: 98%;
  65 + }
0  distribution/editors/jquery-ui.amd.js → distribution.amd/editors/jquery-ui.js
File renamed without changes
0  distribution/editors/jquery-ui.amd.min.js → distribution.amd/editors/jquery-ui.min.js
File renamed without changes
0  distribution/editors/list.amd.js → distribution.amd/editors/list.js
File renamed without changes
0  distribution/editors/list.amd.min.js → distribution.amd/editors/list.min.js
File renamed without changes
43 distribution.amd/templates/bootstrap.css
... ... @@ -0,0 +1,43 @@
  1 +/* Date */
  2 +.bbf-date .bbf-date {
  3 + width: 4em
  4 +}
  5 +
  6 +.bbf-date .bbf-month {
  7 + width: 9em;
  8 +}
  9 +
  10 +.bbf-date .bbf-year {
  11 + width: 5em;
  12 +}
  13 +
  14 +
  15 +/* DateTime */
  16 +.bbf-datetime select {
  17 + width: 4em;
  18 +}
  19 +
  20 +
  21 +/* List */
  22 +.bbf-list .bbf-add {
  23 + margin-top: -10px
  24 +}
  25 +
  26 +.bbf-list li {
  27 + margin-bottom: 5px
  28 +}
  29 +
  30 +.bbf-list .bbf-del {
  31 + margin-left: 4px
  32 +}
  33 +
  34 +
  35 +/* List.Modal */
  36 +.bbf-list-modal {
  37 + cursor: pointer;
  38 + border: 1px solid #ccc;
  39 + width: 208px;
  40 + border-radius: 3px;
  41 + padding: 4px;
  42 + color: #555;
  43 +}
89 distribution.amd/templates/bootstrap.js
... ... @@ -0,0 +1,89 @@
  1 +/**
  2 + * Requirements when customising templates:
  3 + * - Each template must have one 'parent' element tag.
  4 + * - "data-type" attributes are required.
  5 + * - The main placeholder tags such as the following are required: fieldsets, fields
  6 + */
  7 +define(['jquery', 'underscore', 'backbone'], function($, _, Backbone) {
  8 + var Form = Backbone.Form;
  9 +
  10 +
  11 + //TWITTER BOOTSTRAP TEMPLATES
  12 + //Requires Bootstrap 2.x
  13 + Form.setTemplates({
  14 +
  15 + //HTML
  16 + form: '\
  17 + <form class="form-horizontal">{{fieldsets}}</form>\
  18 + ',
  19 +
  20 + fieldset: '\
  21 + <fieldset>\
  22 + <legend>{{legend}}</legend>\
  23 + {{fields}}\
  24 + </fieldset>\
  25 + ',
  26 +
  27 + field: '\
  28 + <div class="control-group field-{{key}}">\
  29 + <label class="control-label" for="{{id}}">{{title}}</label>\
  30 + <div class="controls">\
  31 + <div class="input-xlarge">{{editor}}</div>\
  32 + <div class="help-block">{{help}}</div>\
  33 + </div>\
  34 + </div>\
  35 + ',
  36 +
  37 + nestedField: '\
  38 + <div class="field-{{key}}">\
  39 + <div title="{{title}}" class="input-xlarge">{{editor}}</div>\
  40 + <div class="help-block">{{help}}</div>\
  41 + </div>\
  42 + ',
  43 +
  44 + list: '\
  45 + <div class="bbf-list">\
  46 + <ul class="unstyled clearfix">{{items}}</ul>\
  47 + <button type="button" class="btn bbf-add" data-action="add">Add</div>\
  48 + </div>\
  49 + ',
  50 +
  51 + listItem: '\
  52 + <li class="clearfix">\
  53 + <div class="pull-left">{{editor}}</div>\
  54 + <button type="button" class="btn bbf-del" data-action="remove">&times;</button>\
  55 + </li>\
  56 + ',
  57 +
  58 + date: '\
  59 + <div class="bbf-date">\
  60 + <select data-type="date" class="bbf-date">{{dates}}</select>\
  61 + <select data-type="month" class="bbf-month">{{months}}</select>\
  62 + <select data-type="year" class="bbf-year">{{years}}</select>\
  63 + </div>\
  64 + ',
  65 +
  66 + dateTime: '\
  67 + <div class="bbf-datetime">\
  68 + <p>{{date}}</p>\
  69 + <p>\
  70 + <select data-type="hour" style="width: 4em">{{hours}}</select>\
  71 + :\
  72 + <select data-type="min" style="width: 4em">{{mins}}</select>\
  73 + </p>\
  74 + </div>\
  75 + ',
  76 +
  77 + 'list.Modal': '\
  78 + <div class="bbf-list-modal">\
  79 + {{summary}}\
  80 + </div>\
  81 + '
  82 + }, {
  83 +
  84 + //CLASSNAMES
  85 + error: 'error' //Set on the field tag when validation fails
  86 + });
  87 +
  88 +
  89 +});
134 distribution.amd/templates/default.css
... ... @@ -0,0 +1,134 @@
  1 +/* Form */
  2 +.bbf-form {
  3 + margin: 0;
  4 + padding: 0;
  5 + border: none;
  6 +}
  7 +
  8 +
  9 +/* Field */
  10 +.bbf-field {
  11 + margin: 1em 0;
  12 + list-style-type: none;
  13 + position: relative;
  14 + clear: both;
  15 +}
  16 +
  17 + .bbf-field label {
  18 + float: left;
  19 + width: 25%;
  20 + }
  21 +
  22 + .bbf-field .bbf-editor {
  23 + margin-left: 25%;
  24 + width: 74%;
  25 + }
  26 +
  27 + .bbf-field input, .bbf-field textarea, .bbf-field select {
  28 + width: 100%;
  29 + }
  30 +
  31 + .bbf-field .bbf-help {
  32 + margin-left: 25%;
  33 + width: 74%;
  34 + color: #999;
  35 + }
  36 +
  37 + .bbf-field.bbf-error .bbf-editor {
  38 + outline: 1px solid red;
  39 + }
  40 +
  41 +
  42 +/* Radio */
  43 +.bbf-radio {
  44 + list-style-type: none;
  45 +}
  46 +
  47 + .bbf-radio input {
  48 + width: auto;
  49 + }
  50 +
  51 + .bbf-radio label {
  52 + float: none;
  53 + }
  54 +
  55 +
  56 +/* Checkboxes */
  57 +.bbf-checkboxes {
  58 + list-style-type: none;
  59 +}
  60 +
  61 + .bbf-checkboxes input {
  62 + width: auto;
  63 + }
  64 +
  65 + .bbf-checkboxes label {
  66 + float: none;
  67 + }
  68 +
  69 +
  70 +/* List */
  71 +.bbf-list ul {
  72 + list-style-type: none;
  73 + margin: 0;
  74 + padding: 0;
  75 +}
  76 +
  77 + .bbf-list .bbf-error {
  78 + border: 1px solid red;
  79 + }
  80 +
  81 + .bbf-list li {
  82 + clear: both;
  83 + width: 100%;
  84 + }
  85 +
  86 + .bbf-list li .bbf-editor-container {
  87 + margin-right: 2em;
  88 + }
  89 +
  90 + .bbf-list li .bbf-remove {
  91 + float: right;
  92 + width: 2em;
  93 + }
  94 +
  95 +.bbf-list .bbf-actions {
  96 + text-align: center;
  97 + clear: both;
  98 +}
  99 +
  100 +/* List.Modal */
  101 +.bbf-list-modal {
  102 + cursor: pointer;
  103 + border: 1px solid #ccc;
  104 + width: 208px;
  105 + border-radius: 3px;
  106 + padding: 4px;
  107 + color: #555;
  108 +}
  109 +
  110 +
  111 +
  112 +/* Date */
  113 +.bbf-date .bbf-date {
  114 + width: 4em;
  115 +}
  116 +
  117 +.bbf-date .bbf-month {
  118 + width: 9em;
  119 +}
  120 +
  121 +.bbf-date .bbf-year {
  122 + width: 6em;
  123 +}
  124 +
  125 +
  126 +/* DateTime */
  127 +.bbf-datetime .bbf-date-container {
  128 + float: left;
  129 + margin-right: 1em;
  130 +}
  131 +
  132 +.bbf-datetime select {
  133 + width: 4em;
  134 +}
86 distribution.amd/templates/default.js
... ... @@ -0,0 +1,86 @@
  1 +/**
  2 + * Requirements when customising templates:
  3 + * - Each template must have one 'parent' element tag.
  4 + * - "data-type" attributes are required.
  5 + * - The main placeholder tags such as the following are required: fieldsets, fields
  6 + */
  7 +define(['jquery', 'underscore', 'backbone'], function($, _, Backbone) {
  8 + var Form = Backbone.Form;
  9 +
  10 +
  11 + //DEFAULT TEMPLATES
  12 + Form.setTemplates({
  13 +
  14 + //HTML
  15 + form: '\
  16 + <form class="bbf-form">{{fieldsets}}</form>\
  17 + ',
  18 +
  19 + fieldset: '\
  20 + <fieldset>\
  21 + <legend>{{legend}}</legend>\
  22 + <ul>{{fields}}</ul>\
  23 + </fieldset>\
  24 + ',
  25 +
  26 + field: '\
  27 + <li class="bbf-field field-{{key}}">\
  28 + <label for="{{id}}">{{title}}</label>\
  29 + <div class="bbf-editor">{{editor}}</div>\
  30 + <div class="bbf-help">{{help}}</div>\
  31 + </li>\
  32 + ',
  33 +
  34 + nestedField: '\
  35 + <li class="bbf-field bbf-nested-field field-{{key}}" title="{{title}}">\
  36 + <label for="{{id}}">{{title}}</label>\
  37 + <div class="bbf-editor">{{editor}}</div>\
  38 + <div class="bbf-help">{{help}}</div>\
  39 + </li>\
  40 + ',
  41 +
  42 + list: '\
  43 + <div class="bbf-list">\
  44 + <ul>{{items}}</ul>\
  45 + <div class="bbf-actions"><button type="button" data-action="add">Add</div>\
  46 + </div>\
  47 + ',
  48 +
  49 + listItem: '\
  50 + <li>\
  51 + <button type="button" data-action="remove" class="bbf-remove">&times;</button>\
  52 + <div class="bbf-editor-container">{{editor}}</div>\
  53 + </li>\
  54 + ',
  55 +
  56 + date: '\
  57 + <div class="bbf-date">\
  58 + <select data-type="date" class="bbf-date">{{dates}}</select>\
  59 + <select data-type="month" class="bbf-month">{{months}}</select>\
  60 + <select data-type="year" class="bbf-year">{{years}}</select>\
  61 + </div>\
  62 + ',
  63 +
  64 + dateTime: '\
  65 + <div class="bbf-datetime">\
  66 + <div class="bbf-date-container">{{date}}</div>\
  67 + <select data-type="hour">{{hours}}</select>\
  68 + :\
  69 + <select data-type="min">{{mins}}</select>\
  70 + </div>\
  71 + ',
  72 +
  73 + 'list.Modal': '\
  74 + <div class="bbf-list-modal">\
  75 + {{summary}}\
  76 + </div>\
  77 + '
  78 + }, {
  79 +
  80 + //CLASSNAMES
  81 + error: 'bbf-error'
  82 +
  83 + });
  84 +
  85 +
  86 +});
23 scripts/build
@@ -39,9 +39,9 @@ builder(baseDir)
39 39 builder(baseDir)
40 40 .setContent(mainContents)
41 41 .wrap('scripts/build-templates/main.amd.js', templateData)
42   - .save('distribution/backbone-forms.amd.js')
  42 + .save('distribution.amd/backbone-forms.js')
43 43 .uglify()
44   - .save('distribution/backbone-forms.amd.min.js');
  44 + .save('distribution.amd/backbone-forms.min.js');
45 45
46 46
47 47 //Standalone template files
@@ -52,10 +52,17 @@ builder(baseDir)
52 52 .wrap('scripts/build-templates/standalone-template.js')
53 53 .save('distribution/templates/'+template+'.js');
54 54
  55 + //HTML (AMD)
  56 + builder(baseDir)
  57 + .load('src/templates/'+template+'.js')
  58 + .wrap('scripts/build-templates/standalone-template.amd.js')
  59 + .save('distribution.amd/templates/'+template+'.js');
  60 +
55 61 //CSS
56 62 builder(baseDir)
57 63 .load('src/templates/'+template+'.css')
58   - .save('distribution/templates/'+template+'.css');
  64 + .save('distribution/templates/'+template+'.css')
  65 + .save('distribution.amd/templates/'+template+'.css');
59 66 });
60 67
61 68
@@ -68,19 +75,21 @@ builder(baseDir)
68 75 .uglify()
69 76 .save('distribution/editors/'+name+'.min.js');
70 77
  78 + //CSS file
71 79 if (path.existsSync(baseDir + '/src/editors/'+name+'.css')) {
72 80 builder(baseDir)
73 81 .load('src/editors/'+name+'.css')
74   - .save('distribution/editors/'+name+'.css');
  82 + .save('distribution/editors/'+name+'.css')
  83 + .save('distribution.amd/editors/'+name+'.css');
75 84 }
76 85
77 86 //Save AMD version (for RequireJS)
78 87 builder(baseDir)
79 88 .load('src/editors/'+name+'.js')
80   - .wrap('scripts/build-templates/editor.amd.js')
81   - .save('distribution/editors/'+name+'.amd.js')
  89 + .wrap('scripts/build-templates/simple.amd.js')
  90 + .save('distribution.amd/editors/'+name+'.js')
82 91 .uglify()
83   - .save('distribution/editors/'+name+'.amd.min.js');
  92 + .save('distribution.amd/editors/'+name+'.min.js');
84 93 });
85 94
86 95
0  scripts/build-templates/editor.amd.js → scripts/build-templates/simple.amd.js
File renamed without changes
12 scripts/build-templates/standalone-template.amd.js
... ... @@ -0,0 +1,12 @@
  1 +/**
  2 + * Requirements when customising templates:
  3 + * - Each template must have one 'parent' element tag.
  4 + * - "data-type" attributes are required.
  5 + * - The main placeholder tags such as the following are required: fieldsets, fields
  6 + */
  7 +define(['jquery', 'underscore', 'backbone'], function($, _, Backbone) {
  8 + var Form = Backbone.Form;
  9 +
  10 + {{body}}
  11 +
  12 +});

0 comments on commit d78524a

Please sign in to comment.
Something went wrong with that request. Please try again.