From 8399263c574985c03046e4c04dfb1e320ce2ef45 Mon Sep 17 00:00:00 2001
From: Max Vogl <maxvogl1@gmail.com>
Date: Sun, 31 Mar 2019 16:04:37 +0200
Subject: [PATCH] :sparkles: Add replace, after and before function

---
 dist/jquery.loadTemplate.js     | 46 +++++++++++++++++++++++++--------
 dist/jquery.loadTemplate.min.js |  2 +-
 readme.md                       |  4 +++
 3 files changed, 40 insertions(+), 12 deletions(-)

diff --git a/dist/jquery.loadTemplate.js b/dist/jquery.loadTemplate.js
index aa9ba52..d1963b3 100644
--- a/dist/jquery.loadTemplate.js
+++ b/dist/jquery.loadTemplate.js
@@ -29,6 +29,9 @@
             pageNo: 1,
             elemPerPage: 10,
             append: false,
+            replace: false,
+            after: false,
+            before: false,
             prepend: false,
             beforeInsert: null,
             afterInsert: null,
@@ -94,7 +97,7 @@
             todo = data.length;
         }
 
-        if (!settings.append && !settings.prepend) {
+        if (!settings.append && !settings.prepend && !settings.replace && !settings.after && !settings.before) {
             $that.html("");
         }
 
@@ -102,7 +105,7 @@
             {},
             settings,
             {
-                append: !settings.prepend && true,
+                append: !settings.prepend && !settings.replace && !settings.after && !settings.before && true,
                 complete: function (data) {
                     done++;
                     if (done === todo || errored) {
@@ -216,11 +219,17 @@
             if (settings.beforeInsert) {
                 settings.beforeInsert($templateHtml, data);
             }
-            if (settings.append) {
 
+            if (settings.append) {
                 $(this).append($templateHtml);
             } else if (settings.prepend) {
                 $(this).prepend($templateHtml);
+            } else if (settings.replace) {
+                $(this).html("").replaceWith($templateHtml);
+            } else if (settings.after) {
+                $(this).after($templateHtml);
+            } else if (settings.before) {
+                $(this).before($templateHtml);
             } else {
                 $(this).html("").append($templateHtml);
             }
@@ -291,6 +300,18 @@
             $elem.append(applyFormatters($elem, value, "content", settings));
         });
 
+        processElements("data-content-replace", template, data, settings, function ($elem, value) {
+            $elem.replaceWith(applyFormatters($elem, value, "content", settings));
+        });
+
+        processElements("data-content-after", template, data, settings, function ($elem, value) {
+            $elem.after(applyFormatters($elem, value, "content", settings));
+        });
+
+        processElements("data-content-before", template, data, settings, function ($elem, value) {
+            $elem.before(applyFormatters($elem, value, "content", settings));
+        });
+
         processElements("data-content-prepend", template, data, settings, function ($elem, value) {
             $elem.prepend(applyFormatters($elem, value, "content", settings));
         });
@@ -318,19 +339,13 @@
         processElements("data-alt", template, data, settings, function ($elem, value) {
             $elem.attr("alt", applyFormatters($elem, value, "alt", settings));
         });
-        
-        processElements("data-title", template, data, settings, function ($elem, value) {
-            $elem.attr("title", applyFormatters($elem, value, "title", settings));
-        });
 
         processElements("data-id", template, data, settings, function ($elem, value) {
             $elem.attr("id", applyFormatters($elem, value, "id", settings));
         });
 
-        processElements("data-css", template, data, settings, function ($elem, value) {
-            $elem.css(applyFormatters($elem, value, "css", settings))
-        });
-        
+
+
         processElements("data-class", template, data, settings, function ($elem, value) {
             $elem.addClass(applyFormatters($elem, value, "class", settings));
         });
@@ -453,6 +468,15 @@
                         case "contentAppend":
                             $this.append(applyDataBindFormatters($this, value, this));
                             break;
+                        case "contentReplace":
+                            $this.replaceWith(applyDataBindFormatters($this, value, this));
+                            break;
+                        case "contentAfter":
+                            $this.after(applyDataBindFormatters($this, value, this));
+                            break;
+                        case "contentBefore":
+                            $this.before(applyDataBindFormatters($this, value, this));
+                            break;
                         case "contentPrepend":
                             $this.prepend(applyDataBindFormatters($this, value, this));
                             break;
diff --git a/dist/jquery.loadTemplate.min.js b/dist/jquery.loadTemplate.min.js
index bf88099..36cd60c 100644
--- a/dist/jquery.loadTemplate.min.js
+++ b/dist/jquery.loadTemplate.min.js
@@ -1 +1 @@
-!function(t){"use strict";function e(e,n,c){var s,f,p,d=this;return n=n||{},p=t.extend(!0,{async:!0,overwriteCache:!1,complete:null,success:null,error:function(){t(this).each(function(){t(this).html(p.errorMessage)})},errorMessage:"There was an error loading the template.",paged:!1,pageNo:1,elemPerPage:10,append:!1,prepend:!1,beforeInsert:null,afterInsert:null,bindingOptions:{ignoreUndefined:!1,ignoreNull:!1,ignoreEmptyString:!1}},c),"array"===t.type(n)?(T=!0,i.call(this,e,n,p)):(a(e)||(s=t(e),"string"==typeof e&&0===e.indexOf("#")&&(p.isFile=!1)),f=p.isFile||void 0===p.isFile&&(void 0===s||0===s.length),f&&!p.overwriteCache&&w[e]?o(e,d,n,p):f&&!p.overwriteCache&&w.hasOwnProperty(e)?r(e,d,n,p):f?l(e,d,n,p):u(s,d,n,p),this)}function n(e,n){n?P[e]=n:P=t.extend(P,e)}function a(t){return"string"==typeof t&&t.indexOf("/")>-1}function i(n,a,i){i=i||{};var r,o=this,c=a.length,s=i.prepend&&!i.append,l=0,u=0,f=!1,p=[];if(i.paged){var d=(i.pageNo-1)*i.elemPerPage;a=a.slice(d,d+i.elemPerPage),c=a.length}return i.append||i.prepend||o.html(""),r=t.extend({},i,{append:!i.prepend&&!0,complete:function(t){(++l===c||f)&&(f&&i&&"function"==typeof i.error&&i.error.call(o,p),i&&"function"==typeof i.complete&&i.complete())},success:function(){++u===c&&i&&"function"==typeof i.success&&i.success()},error:function(t){f=!0,p.push(t)}}),s&&a.reverse(),t(a).each(function(){if(e.call(o,n,this,r),f)return!1}),this}function r(t,e,n,a){k[t]?k[t].push({data:n,selection:e,settings:a}):k[t]=[{data:n,selection:e,settings:a}]}function o(t,e,n,a){var i=w[t].clone();f.call(e,i,n,a),"function"==typeof a.success&&a.success()}function c(){return(new Date).getTime()}function s(t){return-1!==t.indexOf("?")?t+"&_="+c():t+"?_="+c()}function l(e,n,a,i){w[e]=null;var r=e;i.overwriteCache&&(r=s(r)),t.ajax({url:r,async:i.async,success:function(r){d(t(r),e,n,a,i)},error:function(t){p(e,n,a,i,t)}})}function u(e,n,a,i){(e.is("script")||e.is("template"))&&(e=t.parseHTML(t.trim(e.html()))),f.call(n,e,a,i),"function"==typeof i.success&&i.success()}function f(e,n,a){h(e=t("<div/>").append(e),n,a),t(this).each(function(){var i=e.children().clone(!0);t("select",i).each(function(n,a){t(this).val(t("select",e).eq(n).val())}),a.beforeInsert&&a.beforeInsert(i,n),a.append?t(this).append(i):a.prepend?t(this).prepend(i):t(this).html("").append(i),a.afterInsert&&a.afterInsert(i,n)}),"function"==typeof a.complete&&a.complete.call(t(this),n)}function p(e,n,a,i,r){var o;for("function"==typeof i.error&&i.error.call(n,r),t(k[e]).each(function(t,e){"function"==typeof e.settings.error&&e.settings.error.call(e.selection,r)}),"function"==typeof i.complete&&i.complete.call(n);k[e]&&(o=k[e].shift());)"function"==typeof o.settings.complete&&o.settings.complete.call(o.selection);void 0!==k[e]&&k[e].length>0&&(k[e]=[])}function d(t,e,n,a,i){var r;for(w[e]=t.clone(),f.call(n,t,a,i),"function"==typeof i.success&&i.success.call(n);k[e]&&(r=k[e].shift());)f.call(r.selection,w[e].clone(),r.data,r.settings),"function"==typeof r.settings.success&&r.settings.success.call(r.selection)}function h(e,n,a){v("data-content",e,n=n||{},a,function(t,e){t.html(O(t,e,"content",a))}),v("data-content-append",e,n,a,function(t,e){t.append(O(t,e,"content",a))}),v("data-content-prepend",e,n,a,function(t,e){t.prepend(O(t,e,"content",a))}),v("data-content-text",e,n,a,function(t,e){t.text(O(t,e,"content",a))}),v("data-innerHTML",e,n,a,function(t,e){t.html(O(t,e,"content",a))}),v("data-src",e,n,a,function(t,e){t.attr("src",O(t,e,"src",a))},function(t){t.remove()}),v("data-href",e,n,a,function(t,e){t.attr("href",O(t,e,"href",a))},function(t){t.remove()}),v("data-alt",e,n,a,function(t,e){t.attr("alt",O(t,e,"alt",a))}),v("data-title",e,n,a,function(t,e){t.attr("title",O(t,e,"title",a))}),v("data-id",e,n,a,function(t,e){t.attr("id",O(t,e,"id",a))}),v("data-css",e,n,a,function(t,e){t.css(O(t,e,"css",a))}),v("data-class",e,n,a,function(t,e){t.addClass(O(t,e,"class",a))}),v("data-link",e,n,a,function(e,n){var i=t("<a/>");i.attr("href",O(e,n,"link",a)),i.html(e.html()),e.html(i)}),v("data-link-wrap",e,n,a,function(e,n){var i=t("<a/>");i.attr("href",O(e,n,"link-wrap",a)),e.wrap(i)}),v("data-options",e,n,a,function(e,n){t(n).each(function(){t("<option/>").attr("value",this).text(this).appendTo(e)})}),y(e,n,a),v("data-value",e,n,a,function(t,e){t.val(O(t,e,"value",a))})}function v(e,n,a,i,r,o){t("["+e+"]",n).each(function(){var n=t(this),c=n.attr(e),s=x(a,c);m(n,s,i)?(n.removeAttr(e),void 0!==s&&r?r(n,s):o&&o(n)):n.remove()})}function m(t,e,n){var a=g(t,n);return(!a.ignoreUndefined||void 0!==e)&&((!a.ignoreNull||null!==e)&&(!a.ignoreEmptyString||""!==e))}function g(e,n){var a={};return e instanceof jQuery&&e.attr("data-binding-options")?(a=t.parseJSON(e.attr("data-binding-options")),e.removeAttr("data-binding-options")):"object"==typeof e&&e.hasOwnProperty("bindingOptions")&&(a=e.bindingOptions),t.extend({},n.bindingOptions,a)}function y(e,n,a){t("[data-template-bind]",e).each(function(){var e=t(this),i=t.parseJSON(e.attr("data-template-bind"));e.removeAttr("data-template-bind"),t(i).each(function(){var i;if(i="object"==typeof this.value?x(n,this.value.data):x(n,this.value),this.attribute){if(!m(this,i,a))return void e.remove();switch(this.attribute){case"content":case"innerHTML":e.html(b(e,i,this));break;case"contentAppend":e.append(b(e,i,this));break;case"contentPrepend":e.prepend(b(e,i,this));break;case"contentText":e.text(b(e,i,this));break;case"options":var r=this;t(i).each(function(){t("<option/>").attr("value",this[r.value.value]).text(b(e,this[r.value.content],r)).attr("selected",void 0!=typeof this[r.value.selected]&&this[r.value.selected]).appendTo(e)});break;default:e.attr(this.attribute,b(e,i,this))}}})})}function b(t,e,n,a){return n.formatter&&P[n.formatter]?function(a){return P[n.formatter].call(t,e,n.formatOptions,a)}(a):e}function x(t,e){if("this"===e)return t;for(var n,a=e.split("."),i=t;(n=a.shift())&&void 0!==i&&null!=i;)i=i[n];return i}function O(e,n,a,i){var r,o=e.attr("data-format-target");if((o===a||!o&&"content"===a)&&(r=e.attr("data-format"))&&"function"==typeof P[r]){var c=e.attr("data-format-options");return function(a){return P[r].call(e[0],n,c,t.extend({},a))}(i)}return n}var T,w={},k={},P={};n("nestedTemplateFormatter",function(e,n,a){if(n){"string"==typeof n&&"{"===n[0]&&(n=t.parseJSON(n));var i=n.parentElement||"div",r=n.template||n;return n.parentElement?t("<"+i+"/>").loadTemplate(r,e,a):t("<"+i+"/>").loadTemplate(r,e,a).children()}}),t.fn.loadTemplate=e,t.addTemplateFormatter=n}(jQuery);
\ No newline at end of file
+!function(m){"use strict";var g={},b={},s={};function y(t,e,n){var a,r,i,o,c,s,l,f,p,u,d,h,v=this;return e=e||{},i=m.extend(!0,{async:!0,overwriteCache:!1,complete:null,success:null,error:function(){m(this).each(function(){m(this).html(i.errorMessage)})},errorMessage:"There was an error loading the template.",paged:!1,pageNo:1,elemPerPage:10,append:!1,replace:!1,after:!1,before:!1,prepend:!1,beforeInsert:null,afterInsert:null,bindingOptions:{ignoreUndefined:!1,ignoreNull:!1,ignoreEmptyString:!1}},n),"array"===m.type(e)?(!0,function(t,e,n){n=n||{};var a,r=this,i=e.length,o=n.prepend&&!n.append,c=0,s=0,l=!1,f=[];if(n.paged){var p=(n.pageNo-1)*n.elemPerPage;e=e.slice(p,p+n.elemPerPage),i=e.length}n.append||n.prepend||n.replace||n.after||n.before||r.html("");a=m.extend({},n,{append:!(n.prepend||n.replace||n.after||n.before),complete:function(t){(++c===i||l)&&(l&&n&&"function"==typeof n.error&&n.error.call(r,f),n&&"function"==typeof n.complete&&n.complete())},success:function(){++s===i&&n&&"function"==typeof n.success&&n.success()},error:function(t){l=!0,f.push(t)}}),o&&e.reverse();return m(e).each(function(){if(y.call(r,t,this,a),l)return!1}),this}.call(this,t,e,i)):("string"==typeof(o=t)&&-1<o.indexOf("/")||(a=m(t),"string"==typeof t&&0===t.indexOf("#")&&(i.isFile=!1)),(r=i.isFile||void 0===i.isFile&&(void 0===a||0===a.length))&&!i.overwriteCache&&g[t]?(p=v,u=e,d=i,h=g[t].clone(),O.call(p,h,u,d),"function"==typeof d.success&&d.success()):r&&!i.overwriteCache&&g.hasOwnProperty(t)?(s=v,l=e,f=i,b[c=t]?b[c].push({data:l,selection:s,settings:f}):b[c]=[{data:l,selection:s,settings:f}]):r?function(e,n,a,r){g[e]=null;var t=e;r.overwriteCache&&(t=-1!==(i=t).indexOf("?")?i+"&_="+x():i+"?_="+x());var i;m.ajax({url:t,async:r.async,success:function(t){!function(t,e,n,a,r){var i;g[e]=t.clone(),O.call(n,t,a,r),"function"==typeof r.success&&r.success.call(n);for(;b[e]&&(i=b[e].shift());)O.call(i.selection,g[e].clone(),i.data,i.settings),"function"==typeof i.settings.success&&i.settings.success.call(i.selection)}(m(t),e,n,a,r)},error:function(t){!function(t,e,n,a,r){var i;"function"==typeof a.error&&a.error.call(e,r);m(b[t]).each(function(t,e){"function"==typeof e.settings.error&&e.settings.error.call(e.selection,r)}),"function"==typeof a.complete&&a.complete.call(e);for(;b[t]&&(i=b[t].shift());)"function"==typeof i.settings.complete&&i.settings.complete.call(i.selection);void 0!==b[t]&&0<b[t].length&&(b[t]=[])}(e,n,0,r,t)}})}(t,v,e,i):function(t,e,n,a){(t.is("script")||t.is("template"))&&(t=m.parseHTML(m.trim(t.html())));O.call(e,t,n,a),"function"==typeof a.success&&a.success()}(a,v,e,i),this)}function t(t,e){e?s[t]=e:s=m.extend(s,t)}function x(){return(new Date).getTime()}function O(n,e,a){var t,r,i,o,c;n=m("<div/>").append(n);l("data-content",t=n,r=(r=e)||{},i=a,function(t,e){t.html(d(t,e,"content",i))}),l("data-content-append",t,r,i,function(t,e){t.append(d(t,e,"content",i))}),l("data-content-replace",t,r,i,function(t,e){t.replaceWith(d(t,e,"content",i))}),l("data-content-after",t,r,i,function(t,e){t.after(d(t,e,"content",i))}),l("data-content-before",t,r,i,function(t,e){t.before(d(t,e,"content",i))}),l("data-content-prepend",t,r,i,function(t,e){t.prepend(d(t,e,"content",i))}),l("data-content-text",t,r,i,function(t,e){t.text(d(t,e,"content",i))}),l("data-innerHTML",t,r,i,function(t,e){t.html(d(t,e,"content",i))}),l("data-src",t,r,i,function(t,e){t.attr("src",d(t,e,"src",i))},function(t){t.remove()}),l("data-href",t,r,i,function(t,e){t.attr("href",d(t,e,"href",i))},function(t){t.remove()}),l("data-alt",t,r,i,function(t,e){t.attr("alt",d(t,e,"alt",i))}),l("data-id",t,r,i,function(t,e){t.attr("id",d(t,e,"id",i))}),l("data-class",t,r,i,function(t,e){t.addClass(d(t,e,"class",i))}),l("data-link",t,r,i,function(t,e){var n=m("<a/>");n.attr("href",d(t,e,"link",i)),n.html(t.html()),t.html(n)}),l("data-link-wrap",t,r,i,function(t,e){var n=m("<a/>");n.attr("href",d(t,e,"link-wrap",i)),t.wrap(n)}),l("data-options",t,r,i,function(e,t){m(t).each(function(){var t=m("<option/>");t.attr("value",this).text(this).appendTo(e)})}),o=r,c=i,m("[data-template-bind]",t).each(function(){var n=m(this),t=m.parseJSON(n.attr("data-template-bind"));n.removeAttr("data-template-bind"),m(t).each(function(){var t;if(t="object"==typeof this.value?u(o,this.value.data):u(o,this.value),this.attribute){if(!f(this,t,c))return void n.remove();switch(this.attribute){case"content":case"innerHTML":n.html(p(n,t,this));break;case"contentAppend":n.append(p(n,t,this));break;case"contentReplace":n.replaceWith(p(n,t,this));break;case"contentAfter":n.after(p(n,t,this));break;case"contentBefore":n.before(p(n,t,this));break;case"contentPrepend":n.prepend(p(n,t,this));break;case"contentText":n.text(p(n,t,this));break;case"options":var e=this;m(t).each(function(){var t=m("<option/>");t.attr("value",this[e.value.value]).text(p(n,this[e.value.content],e)).attr("selected",null!=typeof this[e.value.selected]&&this[e.value.selected]).appendTo(n)});break;default:n.attr(this.attribute,p(n,t,this))}}})}),l("data-value",t,r,i,function(t,e){t.val(d(t,e,"value",i))}),m(this).each(function(){var t=n.children().clone(!0);m("select",t).each(function(t,e){m(this).val(m("select",n).eq(t).val())}),a.beforeInsert&&a.beforeInsert(t,e),a.append?m(this).append(t):a.prepend?m(this).prepend(t):a.replace?m(this).html("").replaceWith(t):a.after?m(this).after(t):a.before?m(this).before(t):m(this).html("").append(t),a.afterInsert&&a.afterInsert(t,e)}),"function"==typeof a.complete&&a.complete.call(m(this),e)}function l(a,t,r,i,o,c){m("["+a+"]",t).each(function(){var t=m(this),e=t.attr(a),n=u(r,e);f(t,n,i)?(t.removeAttr(a),void 0!==n&&o?o(t,n):c&&c(t)):t.remove()})}function f(t,e,n){var a=function(t,e){var n={};t instanceof jQuery&&t.attr("data-binding-options")?(n=m.parseJSON(t.attr("data-binding-options")),t.removeAttr("data-binding-options")):"object"==typeof t&&t.hasOwnProperty("bindingOptions")&&(n=t.bindingOptions);return m.extend({},e.bindingOptions,n)}(t,n);return(!a.ignoreUndefined||void 0!==e)&&((!a.ignoreNull||null!==e)&&(!a.ignoreEmptyString||""!==e))}function p(t,e,n,a){return n.formatter&&s[n.formatter]?(r=a,s[n.formatter].call(t,e,n.formatOptions,r)):e;var r}function u(t,e){if("this"===e)return t;for(var n,a=e.split("."),r=t;(n=a.shift())&&void 0!==r&&null!=r;)r=r[n];return r}function d(t,e,n,a){var r,i,o=t.attr("data-format-target");if(o!==n&&(o||"content"!==n)||!(r=t.attr("data-format"))||"function"!=typeof s[r])return e;var c=t.attr("data-format-options");return i=a,s[r].call(t[0],e,c,m.extend({},i))}t("nestedTemplateFormatter",function(t,e,n){if(e){"string"==typeof e&&"{"===e[0]&&(e=m.parseJSON(e));var a=e.parentElement||"div",r=e.template||e;return e.parentElement?m("<"+a+"/>").loadTemplate(r,t,n):m("<"+a+"/>").loadTemplate(r,t,n).children()}}),m.fn.loadTemplate=y,m.addTemplateFormatter=t}(jQuery);
diff --git a/readme.md b/readme.md
index 3b0970f..2a7f288 100644
--- a/readme.md
+++ b/readme.md
@@ -105,6 +105,8 @@ There are a number of different bindings and ways to bind the data. The followin
 - "data-content-text" - binds the value supplied to the content of the element as text (uses $(elem).text(value))
 - "data-content-append" - appends the value to the end of the element (uses $(elem).append(value))
 - "data-content-prepend" - prepends the value to the beginning of the element (uses $(elem).prepend(value))
+- "data-content-before" - add the value before the element (uses $(elem).before(value))
+- "data-content-after" - add the value after the element (uses $(elem).after(value))
 - "data-id" - sets the id of the element to the value provided (uses $(elem).attr("id", value));
 - "data-href" - sets the href value of the element to the value provided (uses $(elem).attr("href", value));
 - "data-alt" - sets the alt value of the element to the value provided (uses $(elem).attr("alt", value));
@@ -151,6 +153,8 @@ The full list of options are:
 - "elemPerPage" (default 10) - The number of elements to display per page if the data is being paged.
 - "append" (default false) - If set to true, the template will be appended to the element rather than replacing the contents of the element.
 - "prepend" (default false) - If set to true, the template will be prepended to the element rather than replacing the contents of the element. The append option takes priority over prepend, so if both options are set to true, the element is appended and not prepended.
+- "before" (default false) - If set to true, the template will be added before the element rather than replacing the contents of the element.
+- "after" (default false) - If set to true, the template will be added after the element rather than replacing the contents of the element.
 - "beforeInsert" (default null) - Callback function to be called before inserting the template into the document. The format of the function is function($elem) where $elem is the jQuery object of the populated template about to be inserted into the document.
 - "afterInsert" (default null) - As above, a callback function to be called after inserting the template into the document. The format is the same as above.
 - "bindingOptions" (default all flags false): add flags to ignore certain types of values. {"ignoreUndefined": false, "ignoreNull": false, "ignoreEmptyString": false}. The flags you set here, are overwritten on an element level by those specified in a template with a "data-binding-options" or a "data-template-bind" attribute. Examples can be found in the Examples/OptionalBinding folder.