Draft: proof of concept for template elements, re #255

js/vips.js

@@ -254,37 +254,29 @@ $(function() {
     });
 
     $('.dynamic_list').each(function() {
-        $(this).children('.dynamic_row').each(function(i) {
+        $(this).children('.dynamic_row, template').each(function(i) {
             $(this).data('index', i);
         });
     });
 
     $(document).on('click', '.add_dynamic_row', function(event) {
         var container = $(this).closest('.dynamic_list');
-        var template = container.children('.template').last();
-        var clone = template.clone(true).removeClass('template');
-        var index = template.data('index');
+        var template = container.children('template').last();
+        var clone = $(template.prop('content').cloneNode(true));
+        var index = template.data('index') ?? 0;
+        var loop = template.data('loop') ?? 'i';
+        var vars = Object.assign({[loop]: index}, template.data('vars'));
 
         template.data('index', index + 1);
-        clone.insertBefore(template);
-        clone.find('input[data-name], select[data-name], textarea[data-name]').each(function(i) {
-            if ($(this).data('name').indexOf(':') === 0) {
-                $(this).data('name', $(this).data('name').substr(1) + '[' + index + ']');
-            } else {
-                $(this).attr('name', $(this).data('name') + '[' + index + ']');
-                $(this).removeAttr('data-name');
-            }
+        clone.find('template').data('vars', vars);
+        clone.find('input[name], select[name], textarea[name]').each(function(i) {
+            $(this).attr('name', $(this).attr('name').replace(/\w+/g, match => vars[match] ?? match));
         });
-        clone.find('input[data-value], select[data-value], textarea[data-value]').each(function(i) {
-            if ($(this).data('value').indexOf(':') === 0) {
-                $(this).data('value', $(this).data('value').substr(1));
-            } else {
-                $(this).attr('value', index);
-                $(this).removeAttr('data-value');
-            }
+        clone.find('input[value], select[value], textarea[value]').each(function(i) {
+            $(this).attr('value', $(this).attr('value').replace(/\w+/g, match => vars[match] ?? match));
         });
-        clone.find('.wysiwyg-hidden:not(.template *)').toggleClass('wysiwyg wysiwyg-hidden');
-        clone.find('.add_dynamic_row:visible').click();
+        clone.insertBefore(template);
+        template.prev().find('.add_dynamic_row').click();
         event.preventDefault();
     });