From 5e0eea951087fc77964c7b43384d16197c1362c0 Mon Sep 17 00:00:00 2001
From: Eric Fernance <eric@digital-garage.com.au>
Date: Tue, 18 Oct 2016 20:06:15 +1000
Subject: [PATCH 1/3] Adds initial repeatable and save data

---
 src/class.settings-api.php  |  71 ++++++++++++++++++
 src/js/jquery.repeatable.js | 142 ++++++++++++++++++++++++++++++++++++
 2 files changed, 213 insertions(+)
 create mode 100644 src/js/jquery.repeatable.js

diff --git a/src/class.settings-api.php b/src/class.settings-api.php
index da58270..87a624b 100755
--- a/src/class.settings-api.php
+++ b/src/class.settings-api.php
@@ -26,6 +26,12 @@ class WeDevs_Settings_API {
      */
     protected $settings_fields = array();
 
+    /**
+     * Tracks whether the repeatable JS has been loaded to prevent multiple calls enqueue_script
+     * @var bool
+     */
+    protected $repeatable_loaded = false;
+
     public function __construct() {
         add_action( 'admin_enqueue_scripts', array( $this, 'admin_enqueue_scripts' ) );
     }
@@ -132,6 +138,7 @@ function admin_init() {
                     'std'               => isset( $option['default'] ) ? $option['default'] : '',
                     'sanitize_callback' => isset( $option['sanitize_callback'] ) ? $option['sanitize_callback'] : '',
                     'type'              => $type,
+                    'children'          => isset( $option['children'] ) ? $option['children'] : null,
                 );
 
                 add_settings_field( $section . '[' . $option['name'] . ']', $option['label'], array( $this, 'callback_' . $type ), $section, $section, $args );
@@ -385,6 +392,70 @@ function callback_color( $args ) {
         echo $html;
     }
 
+
+    /**
+     * Displays a repeatable for a settings field.
+     *
+     * @param array   $args settings field args
+     */
+    function callback_repeatable( $args ) {
+
+        if (!$this->repeatable_loaded) {
+            $url = plugins_url("js/jquery.repeatable.js",__FILE__);
+            wp_enqueue_script("jquery.repeatable",  $url, array("jquery"));
+        }
+
+        // Add the repeatable
+        $ex_data = json_decode($this->get_option( $args['id'], $args['section'], $args['std']), true);
+        $html = '<div class="repeatable-container">';
+        
+        foreach ($args['children'] as $child) {
+            $html .= '<label for="'.$child['name'].'_{?}">'.$child['label'].'</label>';
+            $html .= '<input type="text" name="'.$child['name'].'_{?}" value="" id="'.$child['name'].'_{?}" data-parent="'.$args['id'].'" data-child="'.$child['name'].'"/>';
+        }
+        $html .= '<input type="button" class="delete" value="X" />';
+        $html .= '</div><input type="button" value="Add" class="add" />';
+        $html .= '<input type="hidden" name="'.$args["section"].'['.$args['id'].']" id="'.$args['section'].'_'.$args["id"].'"/>';
+        echo $html;
+
+        // Add the field group template
+        $template = '<script type="text/template" id="'.$args["id"].'-template"><div class="field-group">';
+
+        foreach ($args['children'] as $child) {
+            $template .= '<label for="'.$child['name'].'_{?}">'.$child['label'].'</label>';
+            $template .= '<input type="text" name="'.$child['name'].'_{?}" value="" id="'.$child['name'].'_{?}" data-parent="'.$args['id'].'" data-child="'.$child['name'].'"/>';
+
+        }
+        $template .= '<input type="button" class="delete" value="X" />';
+        $template .= '</div></script>';
+
+        echo $template;
+
+        // Push in the JS to make the repeatable go.
+        echo '<script>jQuery(function($) {$(".repeatable-container").repeatable({template: "#'.$args['id'].'-template"});});</script>';
+
+        // On save grab all the values and insert them into the hidden field --  -- this needs to be improved
+        ?>
+            <script>
+	            jQuery("form").on("submit", function () {
+		            var data = {};
+		            <?php foreach ($args["children"] as $child):?>
+                        data['<?php echo $child['name'];?>'] = [];
+		                jQuery("[data-child=<?php echo $child['name'];?>").each(function(idx,el){
+		                	console.log(el);
+		                	data['<?php echo $child["name"];?>'].push(jQuery(el).val());
+		                });
+		            <?php endforeach;?>
+
+                    console.log(JSON.stringify(data));
+
+                    jQuery("#<?php echo $args["section"];?>_<?php echo $args['id'];?>").val(JSON.stringify(data));
+	            });
+            </script>
+        <?
+
+    }
+
     /**
      * Sanitize callback for Settings API
      */
diff --git a/src/js/jquery.repeatable.js b/src/js/jquery.repeatable.js
new file mode 100644
index 0000000..c85a046
--- /dev/null
+++ b/src/js/jquery.repeatable.js
@@ -0,0 +1,142 @@
+/*-------------------------------------------
+ * https://github.com/jenwachter/jquery.repeatable
+ *------------------------------------------*/
+
+(function ($) {
+
+	$.fn.repeatable = function (userSettings) {
+
+		/**
+		 * Default settings
+		 * @type {Object}
+		 */
+		var defaults = {
+			addTrigger: ".add",
+			deleteTrigger: ".delete",
+			max: null,
+			startWith: 0,
+			template: null,
+			itemContainer: ".field-group",
+			beforeAdd: function () {},
+			afterAdd: function () {},
+			beforeDelete: function () {},
+			afterDelete: function () {}
+		};
+
+		/**
+		 * Iterator used to make each added
+		 * repeatable element unique
+		 * @type {Number}
+		 */
+		var i = 0;
+		
+		/**
+		 * DOM element into which repeatable
+		 * items will be added
+		 * @type {jQuery object}
+		 */
+		var target = $(this);
+			
+		/**
+		 * Blend passed user settings with defauly settings
+		 * @type {array}
+		 */
+		var settings = $.extend({}, defaults, userSettings);
+		
+		/**
+		 * Total templated items found on the page
+		 * at load. These may be created by server-side
+		 * scripts.
+		 * @return null
+		 */
+		var total = function () {
+			return $(target).find(settings.itemContainer).length;
+		}();
+
+		
+		/**
+		 * Add an element to the target
+		 * and call the callback function
+		 * @param  object e Event
+		 * @return null
+		 */
+		var addOne = function (e) {
+			e.preventDefault();
+			settings.beforeAdd.call(this);
+			createOne();
+			settings.afterAdd.call(this);
+		};
+
+		/**
+		 * Delete the parent element
+		 * and call the callback function
+		 * @param  object e Event
+		 * @return null
+		 */
+		var deleteOne = function (e) {
+			e.preventDefault();
+			settings.beforeDelete.call(this);
+			$(this).parents(settings.itemContainer).first().remove();
+			total--;
+			maintainAddBtn();
+			settings.afterDelete.call(this);
+		};
+
+		/**
+		 * Add an element to the target
+		 * @return null
+		 */
+		var createOne = function() {
+			getUniqueTemplate().appendTo(target);
+			total++;
+			maintainAddBtn();
+		};
+
+		/**
+		 * Alter the given template to make
+		 * each form field name unique
+		 * @return {jQuery object}
+		 */
+		var getUniqueTemplate = function () {
+			var template = $(settings.template).html();
+			template = template.replace(/{\?}/g, "new" + i++); 	// {?} => iterated placeholder
+			template = template.replace(/\{[^\?\}]*\}/g, ""); 	// {valuePlaceholder} => ""
+			return $(template);
+		};
+
+		/**
+		 * Determines if the add trigger
+		 * needs to be disabled
+		 * @return null
+		 */
+		var maintainAddBtn = function () {
+			if (!settings.max) {
+				return;
+			}
+
+			if (total === settings.max) {
+				$(settings.addTrigger).attr("disabled", "disabled");
+			} else if (total < settings.max) {
+				$(settings.addTrigger).removeAttr("disabled");
+			}
+		};
+
+		/**
+		 * Setup the repeater
+		 * @return null
+		 */
+		(function () {
+			$(settings.addTrigger).on("click", addOne);
+			$("form").on("click", settings.deleteTrigger, deleteOne);
+
+			if (!total) {
+				var toCreate = settings.startWith - total;
+				for (var j = 0; j < toCreate; j++) {
+					createOne();
+				}
+			}
+			
+		})();
+	};
+
+})(jQuery);

From 002196e079cc3ed61e5d386e7470787a4071394c Mon Sep 17 00:00:00 2001
From: Eric Fernance <eric@digital-garage.com.au>
Date: Tue, 18 Oct 2016 20:40:56 +1000
Subject: [PATCH 2/3] Shows existing data

---
 src/class.settings-api.php  | 20 +++++++++++++++-----
 src/js/jquery.repeatable.js |  1 +
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/class.settings-api.php b/src/class.settings-api.php
index 87a624b..fc84a95 100755
--- a/src/class.settings-api.php
+++ b/src/class.settings-api.php
@@ -407,13 +407,23 @@ function callback_repeatable( $args ) {
 
         // Add the repeatable
         $ex_data = json_decode($this->get_option( $args['id'], $args['section'], $args['std']), true);
+        $ex_keys = array_keys($ex_data);
+
         $html = '<div class="repeatable-container">';
-        
-        foreach ($args['children'] as $child) {
-            $html .= '<label for="'.$child['name'].'_{?}">'.$child['label'].'</label>';
-            $html .= '<input type="text" name="'.$child['name'].'_{?}" value="" id="'.$child['name'].'_{?}" data-parent="'.$args['id'].'" data-child="'.$child['name'].'"/>';
+
+        if (count($ex_keys) > 0) {
+            foreach ($ex_data[$ex_keys[0]] as $i=>$v) {
+                $html .= '<div class="field-group">';
+                foreach ($args['children'] as $child) {
+                    $html .= '<label for="'.$child['name'].'_{?}">'.$child['label'].'</label>';
+                    $html .= '<input type="text" name="'.$child['name'].'_{?}" value="'.$ex_data[$child['name']][$i].'" id="'.$child['name'].'_{?}" data-parent="'.$args['id'].'" data-child="'.$child['name'].'"/>';
+                }
+                $html .= '<input type="button" class="delete" value="X" />';
+                $html .= '</div>';
+            }
         }
-        $html .= '<input type="button" class="delete" value="X" />';
+        echo "ERIC YOU NEED TO WRITE A DELETE CALL BACK";
+
         $html .= '</div><input type="button" value="Add" class="add" />';
         $html .= '<input type="hidden" name="'.$args["section"].'['.$args['id'].']" id="'.$args['section'].'_'.$args["id"].'"/>';
         echo $html;
diff --git a/src/js/jquery.repeatable.js b/src/js/jquery.repeatable.js
index c85a046..476088e 100644
--- a/src/js/jquery.repeatable.js
+++ b/src/js/jquery.repeatable.js
@@ -1,4 +1,5 @@
 /*-------------------------------------------
+ * This is basically just a cut and paste of the below
  * https://github.com/jenwachter/jquery.repeatable
  *------------------------------------------*/
 

From d0a0e8ec99162f447e1e281d13eacfadcf1da7d7 Mon Sep 17 00:00:00 2001
From: Eric Fernance <eric@digital-garage.com.au>
Date: Wed, 19 Oct 2016 07:03:25 +1000
Subject: [PATCH 3/3] Adds unique IDs for existing

---
 src/class.settings-api.php | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/class.settings-api.php b/src/class.settings-api.php
index fc84a95..848bd25 100755
--- a/src/class.settings-api.php
+++ b/src/class.settings-api.php
@@ -394,7 +394,7 @@ function callback_color( $args ) {
 
 
     /**
-     * Displays a repeatable for a settings field.
+     * Displays a repeatable for a settings field.  Sanitization, is applied to the final field.
      *
      * @param array   $args settings field args
      */
@@ -416,13 +416,12 @@ function callback_repeatable( $args ) {
                 $html .= '<div class="field-group">';
                 foreach ($args['children'] as $child) {
                     $html .= '<label for="'.$child['name'].'_{?}">'.$child['label'].'</label>';
-                    $html .= '<input type="text" name="'.$child['name'].'_{?}" value="'.$ex_data[$child['name']][$i].'" id="'.$child['name'].'_{?}" data-parent="'.$args['id'].'" data-child="'.$child['name'].'"/>';
+                    $html .= '<input type="text" name="'.$child['name'].'_ex'.$i.'" value="'.$ex_data[$child['name']][$i].'" id="'.$child['name'].'_ex'.$i.'" data-parent="'.$args['id'].'" data-child="'.$child['name'].'"/>';
                 }
                 $html .= '<input type="button" class="delete" value="X" />';
                 $html .= '</div>';
             }
         }
-        echo "ERIC YOU NEED TO WRITE A DELETE CALL BACK";
 
         $html .= '</div><input type="button" value="Add" class="add" />';
         $html .= '<input type="hidden" name="'.$args["section"].'['.$args['id'].']" id="'.$args['section'].'_'.$args["id"].'"/>';
@@ -456,9 +455,7 @@ function callback_repeatable( $args ) {
 		                	data['<?php echo $child["name"];?>'].push(jQuery(el).val());
 		                });
 		            <?php endforeach;?>
-
-                    console.log(JSON.stringify(data));
-
+                    
                     jQuery("#<?php echo $args["section"];?>_<?php echo $args['id'];?>").val(JSON.stringify(data));
 	            });
             </script>