Browse files

Updated JSON Form to support Bootstrap v2.1.1+

Only change is to separate text message from wrapped input field when
"append" or "prepend" is used.

In other words, JSON Form used to generate:

<div class="control-group">
  <label class="control-label">Nickname</label>
  <div class="groups input-prepend">
    <span class="add-on">@</span>
    <input type="text" />
    <span class="help-inline">Your nickname</span>
  </div>
</div>

That does not work in more recent versions because the text falls
under a "font-size: 0" CSS property triggered by "input-prepend".
The library now generates:

<div class="control-group">
  <label class="control-label">Nickname</label>
  <div class="groups">
    <div class="input-prepend">
      <span class="add-on">@</span>
      <input type="text" />
    </div>
    <span class="help-inline">Your nickname</span>
  </div>
</div>

Note this creates an additional level to reach the input field when
"prepend" or "append" is used.
  • Loading branch information...
1 parent 6cce2cd commit 35e066e5c90fc456c5b2bcf1e985cb23566efecf François Daoust committed Nov 2, 2012
Showing with 1,995 additions and 1,040 deletions.
  1. +1,962 −1,029 deps/opt/bootstrap.css
  2. +32 −10 lib/jsonform.js
  3. +1 −1 playground/index.html
View
2,991 deps/opt/bootstrap.css
1,962 additions, 1,029 deletions not shown because the diff is too large. Please use a local Git client to view these changes.
View
42 lib/jsonform.js
@@ -170,14 +170,30 @@ var initializeTabs = function (tabs) {
// Twitter bootstrap-friendly HTML boilerplate for standard inputs
jsonform.fieldTemplate = function(inner) {
- return '<div class="control-group jsonform-error-<%= keydash %> <%= elt.htmlClass?elt.htmlClass:"" %>">' +
- '<% if (node.title && !elt.notitle) { %><label class="control-label" for="<%= node.id %>"><%= node.title %></label><% } %>'+
- '<div class="controls<% if (node.prepend) { %> input-prepend<% } %><% if (node.append) { %> input-append<% } %>">'+
- '<% if (node.prepend) { %><span class="add-on"><%= node.prepend %></span><% } %>'+
- inner+
- '<% if (node.append) { %><span class="add-on"><%= node.append %></span><% } %>'+
- '<% if (node.description) { %><span class="help-inline"><%= node.description %></span><% } %>'+
- '<span class="help-block jsonform-errortext" style="display:none;"></span>'+
+ return '<div class="control-group jsonform-error-<%= keydash %> ' +
+ '<%= elt.htmlClass ? elt.htmlClass : "" %>">' +
+ '<% if (node.title && !elt.notitle) { %>' +
+ '<label class="control-label" for="<%= node.id %>"><%= node.title %></label>' +
+ '<% } %>' +
+ '<div class="controls">' +
+ '<% if (node.prepend || node.append) { %>' +
+ '<div class="<% if (node.prepend) { %>input-prepend<% } %>' +
+ '<% if (node.append) { %> input-append<% } %>">' +
+ '<% if (node.prepend) { %>' +
+ '<span class="add-on"><%= node.prepend %></span>' +
+ '<% } %>' +
+ '<% } %>' +
+ inner +
+ '<% if (node.append) { %>' +
+ '<span class="add-on"><%= node.append %></span>' +
+ '<% } %>' +
+ '<% if (node.prepend || node.append) { %>' +
+ '</div>' +
+ '<% } %>' +
+ '<% if (node.description) { %>' +
+ '<span class="help-inline"><%= node.description %></span>' +
+ '<% } %>' +
+ '<span class="help-block jsonform-errortext" style="display:none;"></span>' +
'</div></div>';
};
@@ -2202,8 +2218,14 @@ formNode.prototype.updateElement = function (domNode) {
}
if ((this.fieldtemplate !== false) &&
this.view && this.view.fieldtemplate) {
- // The field template wraps the element two levels deep in the DOM tree
- this.el = $(this.el).parent().parent().get(0);
+ // The field template wraps the element two or three level deep
+ // in the DOM tree, depending on whether there is anything prepended
+ // or appended to the input field
+ this.el = $(this.el).parent().parent();
+ if (this.prepend || this.prepend) {
+ this.el = this.el.parent();
+ }
+ this.el = this.el.get(0);
}
if (this.parentNode && this.parentNode.view &&
this.parentNode.view.childTemplate) {
View
2 playground/index.html
@@ -57,7 +57,7 @@
</head>
<body>
- <div class="navbar">
+ <div class="navbar navbar-inverse">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#">JSON Form Playground</a>

0 comments on commit 35e066e

Please sign in to comment.