Updated styling + conditional options

dist/formbuilder.css

@@ -12,6 +12,7 @@
 .fb-icon-text:before{content:'\e80a'}
 .fb-icon-number:before{content:'\e80b'}
 .fb-icon-time:before{content:'\e80c'}
+.fb-icon-conditional:before{content:'\E80D'}
 .fb-button{text-align:left}
 .fb-clear{clear:both}
 .fb-main{padding:0 20px 0 0;position:relative}
@@ -65,6 +66,8 @@ input[readonly]{cursor:not-allowed;background-color:#eee}
 .fb-common-wrapper .fb-label-description{margin-bottom:10px}
 .fb-common-wrapper .fb-label-description input,.fb-common-wrapper .fb-label-description textarea{width:100%}
 .fb-common-wrapper .fb-label-description textarea{min-height:5em}
+.fb-conditional-question{float:right;font-size:.9em;max-width:50%;text-overflow:ellipsis;height:20px;white-space:nowrap;overflow:hidden}
+.fb-conditional-question-trigger > span{font-weight:bold}
 .option-score-input{width:50px}
 .option-label-input{width:170px}
 .response-field-draggable-helper{border:1px dashed #ddd;background:#eee}

dist/formbuilder.js

@@ -10,7 +10,7 @@
       this.callback = function() {
         var currentValue, newValue;
         currentValue = _.clone(_this.model.get(_this.keypath)) || [];
-        if (el.value && _.contains(currentValue, el.value)) {
+        if (_.contains(currentValue, el.value)) {
           newValue = _.without(currentValue, el.value);
           return _this.model.set(_this.keypath, newValue);
         } else {
@@ -77,7 +77,8 @@
 (function() {
   var BuilderView, EditFieldView, Formbuilder, FormbuilderCollection, FormbuilderModel, GridFieldView, TableFieldView, ViewFieldView, _ref, _ref1, _ref2, _ref3, _ref4, _ref5, _ref6,
     __hasProp = {}.hasOwnProperty,
-    __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
+    __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
+    __indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };
 
   FormbuilderModel = (function(_super) {
     __extends(FormbuilderModel, _super);
@@ -132,6 +133,44 @@
       return parent && parent.get('type') === 'grid';
     };
 
+    FormbuilderModel.prototype.canBeConditionallyDisplayed = function() {
+      return !this.inTable() && !this.inGrid();
+    };
+
+    FormbuilderModel.prototype.conditionalParent = function() {
+      var parentUuid;
+      parentUuid = this.get(Formbuilder.options.mappings.CONDITIONAL_PARENT);
+      if (parentUuid) {
+        return this.collection.findWhereUuid(parentUuid);
+      }
+      return null;
+    };
+
+    FormbuilderModel.prototype.answers = function() {
+      return this.get('answers') || [];
+    };
+
+    FormbuilderModel.prototype.conditionalTriggerOptions = function(selected) {
+      var options, parent, triggerValues;
+      parent = this.conditionalParent();
+      options = [];
+      if (parent) {
+        options = _.clone(parent.answers());
+        options.unshift({
+          'uuid': '',
+          'label': '[No Selection]'
+        });
+        if (selected) {
+          triggerValues = this.get(Formbuilder.options.mappings.CONDITIONAL_VALUES) || [];
+          options = _.filter(options, function(trigger) {
+            var _ref1;
+            return _ref1 = trigger.uuid, __indexOf.call(triggerValues, _ref1) >= 0;
+          });
+        }
+      }
+      return options;
+    };
+
     FormbuilderModel.prototype.attachMethods = function() {
       if (typeof this.attributes.initialize === 'function') {
         this.attributes.initialize.call(this);
@@ -205,26 +244,6 @@
       return items;
     };
 
-    FormbuilderCollection.prototype.findConditionalTriggerOptions = function(child) {
-      var options, parentUuid;
-      parentUuid = child.get(Formbuilder.options.mappings.CONDITIONAL_PARENT);
-      options = [];
-      if (parentUuid) {
-        options = _.chain(this.findConditionalTriggers(child)).filter(function(trigger) {
-          return trigger.get('uuid') === parentUuid;
-        }).map(function(trigger) {
-          return trigger.get('answers');
-        }).flatten(true).value();
-        options.unshift({
-          'uuid': null,
-          label: '[No Selection] <span type="button" class="btn-xs btn-link" data-toggle="tooltip" data-placement="bottom" title="If selected, this element will display when the triggering element has no value">\
-        <span class="glyphicon glyphicon-question-sign"></span>\
-    </span>'
-        });
-      }
-      return options;
-    };
-
     return FormbuilderCollection;
 
   })(Backbone.Collection);
@@ -2104,7 +2123,7 @@ var __t, __p = '', __e = _.escape, __j = Array.prototype.join;
 function print() { __p += __j.call(arguments, '') }
 with (obj) {
 
- if (!rf.inTable() && !rf.inGrid()) { ;
+ if (rf.canBeConditionallyDisplayed()) { ;
 __p += '\n\n\n<div class=\'fb-edit-section-header\'>Conditionally Display?\n    <span type="button" class="btn btn-link" data-toggle="tooltip" data-placement="bottom" title="Checkbox, Radio and Dropdown elements can be used to conditionally trigger the display of elements">\n        <span class="glyphicon glyphicon-question-sign"></span>\n    </span>\n</div>\n';
   var list = rf.collection.findConditionalTriggers(rf);
 if (list.length) {
@@ -2123,7 +2142,8 @@ __p += '\n    <option value="' +
 __p += '\n</select>\n';
 
 
-var selectedList = rf.collection.findConditionalTriggerOptions(rf)
+var selectedList = rf.conditionalTriggerOptions();
+
 
 for (i in selectedList) { ;
 __p += '\n<label class="checkbox">\n    <input type=\'checkbox\' data-rv-append=\'model.' +
@@ -2573,6 +2593,8 @@ obj || (obj = {});
 var __t, __p = '', __e = _.escape;
 with (obj) {
 __p += '<div class=\'subtemplate-wrapper\'>\n  <div class=\'cover\'></div>\n  ' +
+((__t = ( Formbuilder.templates['view/conditional']({rf: rf}) )) == null ? '' : __t) +
+'\n  ' +
 ((__t = ( Formbuilder.templates['view/label']({rf: rf}) )) == null ? '' : __t) +
 '\n\n  ' +
 ((__t = ( Formbuilder.fields[rf.get(Formbuilder.options.mappings.TYPE)].view({rf: rf}) )) == null ? '' : __t) +
@@ -2591,6 +2613,8 @@ obj || (obj = {});
 var __t, __p = '', __e = _.escape;
 with (obj) {
 __p += '<div class=\'subtemplate-wrapper\'>\n  <div class=\'cover\'></div>\n  ' +
+((__t = ( Formbuilder.templates['view/conditional']({rf: rf}) )) == null ? '' : __t) +
+'\n  ' +
 ((__t = ( Formbuilder.fields[rf.get(Formbuilder.options.mappings.TYPE)].view({rf: rf}) )) == null ? '' : __t) +
 '\n  ' +
 ((__t = ( Formbuilder.templates['view/duplicate_remove']({rf: rf}) )) == null ? '' : __t) +
@@ -2600,6 +2624,29 @@ __p += '<div class=\'subtemplate-wrapper\'>\n  <div class=\'cover\'></div>\n  '
 return __p
 };
 
+this["Formbuilder"]["templates"]["view/conditional"] = function(obj) {
+obj || (obj = {});
+var __t, __p = '', __e = _.escape, __j = Array.prototype.join;
+function print() { __p += __j.call(arguments, '') }
+with (obj) {
+
+
+var parent = rf.conditionalParent();
+var triggerValues = _.pluck(rf.conditionalTriggerOptions(true), 'label');
+if (parent && triggerValues.length) {
+;
+__p += '\n<div class="fb-conditional-question">\n    <i class="fb-icon-conditional"></i>\n    <span class="fb-conditional-question-trigger">display when <span>' +
+((__t = ( parent.get('label') )) == null ? '' : __t) +
+'</span> is <span>' +
+((__t = ( triggerValues.join(' or ') )) == null ? '' : __t) +
+'</span></span>\n</div>\n';
+ } ;
+__p += '\n';
+
+}
+return __p
+};
+
 this["Formbuilder"]["templates"]["view/description"] = function(obj) {
 obj || (obj = {});
 var __t, __p = '', __e = _.escape;

src/scripts/main.coffee

@@ -19,6 +19,27 @@ class FormbuilderModel extends Backbone.DeepModel
   inGrid:() ->
     parent = @parentModel()
     parent and parent.get('type') is 'grid'
+  canBeConditionallyDisplayed:() -> !@inTable() and !@inGrid()
+  conditionalParent: () ->
+    parentUuid = @get(Formbuilder.options.mappings.CONDITIONAL_PARENT)
+    if parentUuid
+      return @collection.findWhereUuid(parentUuid)
+    null
+
+  answers: () -> @get('answers') || []
+
+  conditionalTriggerOptions: (selected) ->
+    parent = @conditionalParent()
+    options = []
+    if parent
+      options = _.clone(parent.answers())
+      options.unshift({'uuid': '', 'label': '[No Selection]'})
+      if selected
+        triggerValues =  @get(Formbuilder.options.mappings.CONDITIONAL_VALUES) || []
+        options = _.filter options, (trigger) -> trigger.uuid in triggerValues
+
+    options
+
 
   attachMethods: ()->
     if typeof @attributes.initialize is 'function'
@@ -63,19 +84,7 @@ class FormbuilderCollection extends Backbone.Collection
       hasNoParent = !model.hasParent()
       correctType and differentModel and hasNoParent
     items
-  findConditionalTriggerOptions: (child) ->
-    parentUuid = child.get(Formbuilder.options.mappings.CONDITIONAL_PARENT)
-    options = []
-    if parentUuid
-      options = _.chain(@findConditionalTriggers(child))
-        .filter((trigger) -> trigger.get('uuid') == parentUuid)
-        .map((trigger) -> trigger.get('answers'))
-        .flatten(true)
-        .value()
-      options.unshift({'uuid': null, label: '[No Selection] <span type="button" class="btn-xs btn-link" data-toggle="tooltip" data-placement="bottom" title="If selected, this element will display when the triggering element has no value">
-        <span class="glyphicon glyphicon-question-sign"></span>
-    </span>'})
-    options
+
 
 
 

src/scripts/rivets-config.coffee

@@ -5,7 +5,7 @@ rivets.binders.append =
 
     @callback = () =>
       currentValue = _.clone(@model.get(@keypath)) || []
-      if el.value and _.contains(currentValue, el.value)
+      if _.contains(currentValue, el.value)
         newValue = _.without(currentValue, el.value)
         @model.set(@keypath, newValue)
       else

src/styles/formbuilder.styl

@@ -46,6 +46,7 @@ $editing-border = darken($editing-bg, 7%)
 .fb-icon-text:before { content: '\e80a'; } /* '' */
 .fb-icon-number:before { content: '\e80b'; } /* '' */
 .fb-icon-time:before { content: '\e80c'; } /* '' */
+.fb-icon-conditional:before { content: '\E80D'; } /* '' */
 
 .fb-button {
   text-align: left;
@@ -349,6 +350,20 @@ input[readonly] {
   min-height: 5em;
 }
 
+.fb-conditional-question {
+    float: right;
+    font-size: .9em;
+    max-width: 50%;
+    text-overflow: ellipsis;
+    height: 20px;
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+.fb-conditional-question-trigger > span {
+    font-weight: bold;
+}
+
 .option-score-input {
   width: 50px;
 }
@@ -533,4 +548,4 @@ for row in (1..15)
       width: 100%;
     }
   }
-}
+}

src/templates/edit/conditional_options.html

@@ -1,4 +1,4 @@
-<% if (!rf.inTable() && !rf.inGrid()) { %>
+<% if (rf.canBeConditionallyDisplayed()) { %>
 
 
 <div class='fb-edit-section-header'>Conditionally Display?
@@ -22,7 +22,8 @@
 </select>
 <%
 
-var selectedList = rf.collection.findConditionalTriggerOptions(rf)
+var selectedList = rf.conditionalTriggerOptions();
+
 
 for (i in selectedList) { %>
 <label class="checkbox">

src/templates/view/base.html

@@ -1,5 +1,6 @@
 <div class='subtemplate-wrapper'>
   <div class='cover'></div>
+  <%= Formbuilder.templates['view/conditional']({rf: rf}) %>
   <%= Formbuilder.templates['view/label']({rf: rf}) %>
 
   <%= Formbuilder.fields[rf.get(Formbuilder.options.mappings.TYPE)].view({rf: rf}) %>

src/templates/view/base_non_input.html

@@ -1,5 +1,6 @@
 <div class='subtemplate-wrapper'>
   <div class='cover'></div>
+  <%= Formbuilder.templates['view/conditional']({rf: rf}) %>
   <%= Formbuilder.fields[rf.get(Formbuilder.options.mappings.TYPE)].view({rf: rf}) %>
   <%= Formbuilder.templates['view/duplicate_remove']({rf: rf}) %>
 </div>

src/templates/view/conditional.html

@@ -0,0 +1,10 @@
+<%
+var parent = rf.conditionalParent();
+var triggerValues = _.pluck(rf.conditionalTriggerOptions(true), 'label');
+if (parent && triggerValues.length) {
+%>
+<div class="fb-conditional-question">
+    <i class="fb-icon-conditional"></i>
+    <span class="fb-conditional-question-trigger">display when <span><%= parent.get('label') %></span> is <span><%= triggerValues.join(' or ') %></span></span>
+</div>
+<% } %>