Expand Field Templates. QfqNS.addFields() requires now requires maximum lines argument.

javascript/src/FieldTemplate.js

@@ -11,7 +11,7 @@ var QfqNS = QfqNS || {};
 (function (n) {
     'use strict';
 
-    n.addFields = function (templateSelector, targetSelector) {
+    n.addFields = function (templateSelector, targetSelector, maxLines) {
         var escapedTemplateSelector = n.escapeJqueryIdSelector(templateSelector);
         var escapedTargetSelector = n.escapeJqueryIdSelector(targetSelector);
 
@@ -19,16 +19,34 @@ var QfqNS = QfqNS || {};
 
         var $target = $(escapedTargetSelector);
 
-        $target.append($template.text());
+        var lines = n.countLines(escapedTargetSelector);
+
+        if (lines >= maxLines) {
+            return;
+        }
+
+        var expandedTemplate = n.replacePlaceholder($template.text(), lines);
+
+        $target.append(expandedTemplate);
     };
 
     n.initializeFields = function (element, templateSelectorData) {
         var $element = $(element);
-        var templateSelector = $element.data(templateSelectorData || 'qfq-line-template');
-        var escapedTemplateSelector = n.escapeJqueryIdSelector(templateSelector);
+        var templateSelector, escapedTemplateSelector, $template, $deserializedTemplate, expandedTemplate;
 
-        var $template = $(escapedTemplateSelector);
-        var $deserializedTemplate = $($template.text());
+        if ($element.children().length > 0) {
+            // already initialized
+            return;
+        }
+
+        templateSelector = $element.data(templateSelectorData || 'qfq-line-template');
+        escapedTemplateSelector = n.escapeJqueryIdSelector(templateSelector);
+
+        $template = $(escapedTemplateSelector);
+
+        expandedTemplate = n.replacePlaceholder($template.text(), 0);
+
+        $deserializedTemplate = $(expandedTemplate);
 
         $deserializedTemplate.find('.qfq-delete-button').remove();
         $element.append($deserializedTemplate);
@@ -37,4 +55,21 @@ var QfqNS = QfqNS || {};
     n.removeFields = function (target) {
         $(target).closest('.qfq-line').remove();
     };
+
+    /**
+     * @private
+     * @param targetSelector
+     * @returns {jQuery}
+     */
+    n.countLines = function (targetSelector) {
+        var escapedTargetSelector = n.escapeJqueryIdSelector(targetSelector);
+        return $(targetSelector).children().length;
+    };
+
+    /**
+     * @private
+     */
+    n.replacePlaceholder = function (haystack, by) {
+        return haystack.replace(/%d/g, by);
+    };
 })(QfqNS);
\ No newline at end of file

mockup/fieldtemplates.html

@@ -29,7 +29,7 @@
     </div>
     <div class="form-group">
         <div class="col-md-1">
-            <button type="button" onclick="QfqNS.addFields('#template', '#target')">Add</button>
+            <button type="button" onclick="QfqNS.addFields('#template', '#target', 10)">Add</button>
         </div>
     </div>
 </form>