From 91353af9af82f173de9bc9b3d005d1d01cb56be6 Mon Sep 17 00:00:00 2001
From: oizulain <oizulain@gmail.com>
Date: Sat, 9 Jul 2016 00:14:08 +0200
Subject: [PATCH] Enhancement #8 - Refactoring String HTML

---
 dist/jquery.ddslick.min.js |  2 +-
 src/jquery.ddslick.js      | 26 ++++++++++++--------------
 2 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/dist/jquery.ddslick.min.js b/dist/jquery.ddslick.min.js
index ee3b266..a5ac61e 100644
--- a/dist/jquery.ddslick.min.js
+++ b/dist/jquery.ddslick.min.js
@@ -1 +1 @@
-!function(e){"function"==typeof define&&define.amd?define(["jquery"],e):"object"==typeof module&&module.exports?module.exports=e(require("jquery")):e(window.jQuery)}(function(e){function d(e,d){var i=e.find(".dd-option-value[value= '"+d+"']").parents("li").prevAll().length;t(e,i)}function t(e,d,t){var i=e.data("ddslick"),s=e.find(".dd-selected"),l=s.siblings(".dd-selected-value"),a=e.find(".dd-option").eq(d),c=a.closest("li"),r=i.settings,p=i.settings.data[d];e.find(".dd-option").removeClass("dd-option-selected"),a.addClass("dd-option-selected"),i.selectedIndex=d,i.selectedItem=c,i.selectedData=p,r.showSelectedHTML?s.html((p.imageSrc?"<img class='dd-selected-image'"+("right"===r.imagePosition?" dd-image-right":"")+"' src='"+p.imageSrc+"' />":"")+(p.text?"<label class='dd-selected-text'>"+p.text+"</label>":"")+(p.description?"<small class='dd-selected-description dd-desc'"+(r.truncateDescription?" dd-selected-description-truncated":"")+"' >"+p.description+"</small>":"")):s.html(p.text),l.val(p.value),i.original.val(p.value),e.data("ddslick",i),n(e),o(e),t&&"function"==typeof r.onSelected&&r.onSelected.call(this,i)}function i(d){var t=d.find(".dd-select"),i=t.siblings(".dd-options"),n=t.find(".dd-pointer"),o=i.is(":visible"),l=a[d.attr("data-settings-id")];e(".dd-click-off-close").not(i).slideUp(l.animationTime),e(".dd-pointer").removeClass("dd-pointer-up"),t.removeClass("dd-open"),o?(i.slideUp(l.animationTime),n.removeClass("dd-pointer-up"),t.removeClass("dd-open")):(t.addClass("dd-open"),i.slideDown(l.animationTime),n.addClass("dd-pointer-up")),s(d)}function n(e){var d=a[e.attr("data-settings-id")];e.find(".dd-select").removeClass("dd-open"),e.find(".dd-options").slideUp(d.animationTime),e.find(".dd-pointer").removeClass("dd-pointer-up").removeClass("dd-pointer-up")}function o(e){var d=e.find(".dd-select").css("height"),t=e.find(".dd-selected-description"),i=e.find(".dd-selected-image");t.length<=0&&i.length>0&&e.find(".dd-selected-text").css("lineHeight",d)}function s(d){d.find(".dd-option").each(function(){var t=e(this),i=t.css("height"),n=t.find(".dd-option-description"),o=d.find(".dd-option-image");n.length<=0&&o.length>0&&t.find(".dd-option-text").css("lineHeight",i)})}e.fn.ddslick=function(d){return l[d]?l[d].apply(this,Array.prototype.slice.call(arguments,1)):"object"!=typeof d&&d?void e.error("Method "+d+" does not exists."):l.init.apply(this,arguments)};var l={},a={},c={data:[],keepJSONItemsOnTop:!1,animationTime:50,width:260,height:null,background:"#eee",selectText:"",defaultSelectedIndex:null,truncateDescription:!0,imagePosition:"left",showSelectedHTML:!0,clickOffToClose:!0,embedCSS:!0,onSelected:function(){}},r=!1,p="<div class='dd-select'><input class='dd-selected-value' type='hidden' /><a class='dd-selected'></a><span class='dd-pointer dd-pointer-down'></span></div>",f="<ul class='dd-options'></ul>",u="<style id='css-ddslick' type='text/css'>.dd-select{ border-radius:2px; border:solid 1px #ccc; position:relative; cursor:pointer;}.dd-desc { color:#aaa; display:block; overflow: hidden; font-weight:normal; line-height: 1.4em; }.dd-selected{ overflow:hidden; display:block; padding:10px; font-weight:bold;}.dd-pointer{ width:0; height:0; position:absolute; right:10px; top:50%; margin-top:-3px;}.dd-pointer-down{ border:solid 5px transparent; border-top:solid 5px #000; }.dd-pointer-up{border:solid 5px transparent !important; border-bottom:solid 5px #000 !important; margin-top:-8px;}.dd-options{ border:solid 1px #ccc; border-top:none; list-style:none; box-shadow:0px 1px 5px #ddd; display:none; position:absolute; z-index:2000; margin:0; padding:0;background:#fff; overflow:auto;}.dd-option{ padding:10px; display:block; border-bottom:solid 1px #ddd; overflow:hidden; text-decoration:none; color:#333; cursor:pointer;-webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out;-o-transition: all 0.25s ease-in-out;-ms-transition: all 0.25s ease-in-out; }.dd-options > li:last-child > .dd-option{ border-bottom:none;}.dd-option:hover{ background:#f3f3f3; color:#000;}.dd-selected-description-truncated { text-overflow: ellipsis; white-space:nowrap; }.dd-option-selected { background:#f6f6f6; }.dd-option-image, .dd-selected-image { vertical-align:middle; float:left; margin-right:5px; max-width:64px;}.dd-image-right { float:right; margin-right:15px; margin-left:5px;}.dd-container{ position:relative;}​ .dd-selected-text { font-weight:bold}​</style>";l.init=function(d){var n=e.extend({},c,d);return e("#css-ddslick").length<=0&&n.embedCSS&&e(u).appendTo("head"),this.each(function(){var n=e.extend({},c,d),o=e(this),s=o.data("ddslick");if(!s){var l=[];o.find("option").each(function(){var d=e(this),t=d.data();l.push({text:e.trim(d.text()),value:d.val(),selected:d.is(":selected"),description:t.description,imageSrc:t.imagesrc})}),n.keepJSONItemsOnTop?e.merge(n.data,l):n.data=e.merge(l,n.data);var u=o,h=e("<div>").attr("id",o.attr("id"));o.replaceWith(h),o=h;var m="ID_"+(new Date).getTime();e(o).attr("data-settings-id",m),a[m]={},e.extend(a[m],n),o.addClass("dd-container").append(p).append(f),o.find("input.dd-selected-value").attr("id",e(u).attr("id")).attr("name",e(u).attr("name"));var g=o.find(".dd-options");l=o.find(".dd-select"),g.css({width:n.width}),l.css({width:n.width,background:n.background}),o.css({width:n.width}),null!==n.height&&g.css({height:n.height,overflow:"auto"}),e.each(n.data,function(e,d){d.selected&&(n.defaultSelectedIndex=e),g.append("<li><a class='dd-option'>"+(d.value?" <input class='dd-option-value' type='hidden' value='"+d.value+"' />":"")+(d.imageSrc?" <img class='dd-option-image'"+("right"===n.imagePosition?" dd-image-right":"")+"' src='"+d.imageSrc+"' />":"")+(d.text?" <label class='dd-option-text'>"+d.text+"</label>":"")+(d.description?" <small class='dd-option-description dd-desc'>"+d.description+"</small>":"")+"</a></li>")});var v={settings:n,original:u,selectedIndex:-1,selectedItem:null,selectedData:null};if(o.data("ddslick",v),n.selectText.length>0&&null===n.defaultSelectedIndex)o.find(".dd-selected").html(n.selectText);else{var x=null!=n.defaultSelectedIndex&&n.defaultSelectedIndex>=0&&n.defaultSelectedIndex<n.data.length?n.defaultSelectedIndex:0;t(o,x,!1)}o.find(".dd-select").on("click.ddslick",function(){i(o)}),o.find(".dd-option").on("click.ddslick",function(){t(o,e(this).closest("li").index(),!0)}),n.clickOffToClose&&(g.addClass("dd-click-off-close"),o.on("click.ddslick",function(e){e.stopPropagation()}),r||(r=!0,e("body").on("click",function(){e(".dd-open").removeClass("dd-open"),e(".dd-click-off-close").slideUp(n.animationTime).siblings(".dd-select").find(".dd-pointer").removeClass("dd-pointer-up")})))}})},l.select=function(i){return this.each(function(){void 0!==i.index&&t(e(this),i.index),void 0!==i.value&&d(e(this),i.value),void 0!==i.id&&d(e(this),i.id)})},l.open=function(){return this.each(function(){var d=e(this),t=d.data("ddslick");t&&i(d)})},l.close=function(){return this.each(function(){var d=e(this),t=d.data("ddslick");t&&n(d)})},l.destroy=function(){return this.each(function(){var d=e(this),t=d.data("ddslick");if(t){var i=t.original;d.removeData("ddslick").unbind(".ddslick").replaceWith(i)}})}});
\ No newline at end of file
+!function(e){"function"==typeof define&&define.amd?define(["jquery"],e):"object"==typeof module&&module.exports?module.exports=e(require("jquery")):e(window.jQuery)}(function(e){function d(e,d){var i=e.find(".dd-option-value[value= '"+d+"']").parents("li").prevAll().length;t(e,i)}function t(d,t,i){var a=d.data("ddslick"),s=d.find(".dd-selected"),l=s.siblings(".dd-selected-value"),c=d.find(".dd-option").eq(t),r=c.closest("li"),p=a.settings,f=a.settings.data[t];if(d.find(".dd-option").removeClass("dd-option-selected"),c.addClass("dd-option-selected"),a.selectedIndex=t,a.selectedItem=r,a.selectedData=f,p.showSelectedHTML){var u=e("<div>");f.imageSrc&&u.append(e("<img>").addClass("dd-selected-image"+("right"===p.imagePosition?" dd-image-right":"")).attr("src",f.imageSrc)),f.text&&u.append(e("<label>").addClass("dd-selected-text").text(f.text)),f.description&&u.append(e("<small>").addClass("dd-selected-description dd-desc"+(p.truncateDescription?" dd-selected-description-truncated":"")).text(f.description)),s.html(u.html())}else s.html(f.text);l.val(f.value),a.original.val(f.value),d.data("ddslick",a),n(d),o(d),i&&"function"==typeof p.onSelected&&p.onSelected.call(this,a)}function i(d){var t=d.find(".dd-select"),i=t.siblings(".dd-options"),n=t.find(".dd-pointer"),o=i.is(":visible"),s=l[d.attr("data-settings-id")];e(".dd-click-off-close").not(i).slideUp(s.animationTime),e(".dd-pointer").removeClass("dd-pointer-up"),t.removeClass("dd-open"),o?(i.slideUp(s.animationTime),n.removeClass("dd-pointer-up"),t.removeClass("dd-open")):(t.addClass("dd-open"),i.slideDown(s.animationTime),n.addClass("dd-pointer-up")),a(d)}function n(e){var d=l[e.attr("data-settings-id")];e.find(".dd-select").removeClass("dd-open"),e.find(".dd-options").slideUp(d.animationTime),e.find(".dd-pointer").removeClass("dd-pointer-up").removeClass("dd-pointer-up")}function o(e){var d=e.find(".dd-select").css("height"),t=e.find(".dd-selected-description"),i=e.find(".dd-selected-image");t.length<=0&&i.length>0&&e.find(".dd-selected-text").css("lineHeight",d)}function a(d){d.find(".dd-option").each(function(){var t=e(this),i=t.css("height"),n=t.find(".dd-option-description"),o=d.find(".dd-option-image");n.length<=0&&o.length>0&&t.find(".dd-option-text").css("lineHeight",i)})}e.fn.ddslick=function(d){return s[d]?s[d].apply(this,Array.prototype.slice.call(arguments,1)):"object"!=typeof d&&d?void e.error("Method "+d+" does not exists."):s.init.apply(this,arguments)};var s={},l={},c={data:[],keepJSONItemsOnTop:!1,animationTime:50,width:260,height:null,background:"#eee",selectText:"",defaultSelectedIndex:null,truncateDescription:!0,imagePosition:"left",showSelectedHTML:!0,clickOffToClose:!0,embedCSS:!0,onSelected:function(){}},r=!1,p="<div class='dd-select'><input class='dd-selected-value' type='hidden' /><a class='dd-selected'></a><span class='dd-pointer dd-pointer-down'></span></div>",f="<ul class='dd-options'></ul>",u="<style id='css-ddslick' type='text/css'>.dd-select{ border-radius:2px; border:solid 1px #ccc; position:relative; cursor:pointer;}.dd-desc { color:#aaa; display:block; overflow: hidden; font-weight:normal; line-height: 1.4em; }.dd-selected{ overflow:hidden; display:block; padding:10px; font-weight:bold;}.dd-pointer{ width:0; height:0; position:absolute; right:10px; top:50%; margin-top:-3px;}.dd-pointer-down{ border:solid 5px transparent; border-top:solid 5px #000; }.dd-pointer-up{border:solid 5px transparent !important; border-bottom:solid 5px #000 !important; margin-top:-8px;}.dd-options{ border:solid 1px #ccc; border-top:none; list-style:none; box-shadow:0px 1px 5px #ddd; display:none; position:absolute; z-index:2000; margin:0; padding:0;background:#fff; overflow:auto;}.dd-option{ padding:10px; display:block; border-bottom:solid 1px #ddd; overflow:hidden; text-decoration:none; color:#333; cursor:pointer;-webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out;-o-transition: all 0.25s ease-in-out;-ms-transition: all 0.25s ease-in-out; }.dd-options > li:last-child > .dd-option{ border-bottom:none;}.dd-option:hover{ background:#f3f3f3; color:#000;}.dd-selected-description-truncated { text-overflow: ellipsis; white-space:nowrap; }.dd-option-selected { background:#f6f6f6; }.dd-option-image, .dd-selected-image { vertical-align:middle; float:left; margin-right:5px; max-width:64px;}.dd-image-right { float:right; margin-right:15px; margin-left:5px;}.dd-container{ position:relative;}​ .dd-selected-text { font-weight:bold}​</style>";s.init=function(d){var n=e.extend({},c,d);return e("#css-ddslick").length<=0&&n.embedCSS&&e(u).appendTo("head"),this.each(function(){var n=e.extend({},c,d),o=e(this),a=o.data("ddslick");if(!a){var s=[];o.find("option").each(function(){var d=e(this),t=d.data();s.push({text:e.trim(d.text()),value:d.val(),selected:d.is(":selected"),description:t.description,imageSrc:t.imagesrc})}),n.keepJSONItemsOnTop?e.merge(n.data,s):n.data=e.merge(s,n.data);var u=o,h=e("<div>").attr("id",o.attr("id"));o.replaceWith(h),o=h;var g="ID_"+(new Date).getTime();e(o).attr("data-settings-id",g),l[g]={},e.extend(l[g],n),o.addClass("dd-container").append(p).append(f),o.find("input.dd-selected-value").attr("id",e(u).attr("id")).attr("name",e(u).attr("name"));var m=o.find(".dd-options");s=o.find(".dd-select"),m.css({width:n.width}),s.css({width:n.width,background:n.background}),o.css({width:n.width}),null!==n.height&&m.css({height:n.height,overflow:"auto"}),e.each(n.data,function(d,t){t.selected&&(n.defaultSelectedIndex=d);var i=e("<li>").append(e("<a>").addClass("dd-option")),o=i.find("a");t.value&&o.append(e("<input>").addClass("dd-option-value").attr("type","hidden").val(t.value)),t.imageSrc&&o.append(e("<img>").attr("src",t.imageSrc).addClass("dd-option-image"+("right"===n.imagePosition?" dd-image-right":""))),t.text&&o.append(e("<label>").addClass("dd-option-text").text(t.text)),t.description&&o.append(e("<small>").addClass("dd-option-description dd-desc").text(t.description)),m.append(i)});var v={settings:n,original:u,selectedIndex:-1,selectedItem:null,selectedData:null};if(o.data("ddslick",v),n.selectText.length>0&&null===n.defaultSelectedIndex)o.find(".dd-selected").html(n.selectText);else{var x=null!=n.defaultSelectedIndex&&n.defaultSelectedIndex>=0&&n.defaultSelectedIndex<n.data.length?n.defaultSelectedIndex:0;t(o,x,!1)}o.find(".dd-select").on("click.ddslick",function(){i(o)}),o.find(".dd-option").on("click.ddslick",function(){t(o,e(this).closest("li").index(),!0)}),n.clickOffToClose&&(m.addClass("dd-click-off-close"),o.on("click.ddslick",function(e){e.stopPropagation()}),r||(r=!0,e("body").on("click",function(){e(".dd-open").removeClass("dd-open"),e(".dd-click-off-close").slideUp(n.animationTime).siblings(".dd-select").find(".dd-pointer").removeClass("dd-pointer-up")})))}})},s.select=function(i){return this.each(function(){void 0!==i.index&&t(e(this),i.index),void 0!==i.value&&d(e(this),i.value),void 0!==i.id&&d(e(this),i.id)})},s.open=function(){return this.each(function(){var d=e(this),t=d.data("ddslick");t&&i(d)})},s.close=function(){return this.each(function(){var d=e(this),t=d.data("ddslick");t&&n(d)})},s.destroy=function(){return this.each(function(){var d=e(this),t=d.data("ddslick");if(t){var i=t.original;d.removeData("ddslick").unbind(".ddslick").replaceWith(i)}})}});
\ No newline at end of file
diff --git a/src/jquery.ddslick.js b/src/jquery.ddslick.js
index a8d0d9c..efb8263 100644
--- a/src/jquery.ddslick.js
+++ b/src/jquery.ddslick.js
@@ -140,14 +140,13 @@
                 //Add ddOptions to the container. Replace with template engine later.
                 $.each(options.data, function (index, item) {
                     if (item.selected) options.defaultSelectedIndex = index;
-                    ddOptions.append("<li>" +
-                        "<a class='dd-option'>" +
-                            (item.value ? " <input class='dd-option-value' type='hidden' value='" + item.value + "' />" : "") +
-                            (item.imageSrc ? " <img class='dd-option-image'" + (options.imagePosition === "right" ? " dd-image-right" : "") + "' src='" + item.imageSrc + "' />" : "") +
-                            (item.text ? " <label class='dd-option-text'>" + item.text + "</label>" : "") +
-                            (item.description ? " <small class='dd-option-description dd-desc'>" + item.description + "</small>" : "") +
-                        "</a>" +
-                    "</li>");
+                    var ddList = $("<li>").append($("<a>").addClass("dd-option"));
+                    var ddOption = ddList.find("a");
+                    if(item.value) ddOption.append($("<input>").addClass("dd-option-value").attr("type", "hidden").val(item.value));
+                    if(item.imageSrc) ddOption.append($("<img>").attr("src", item.imageSrc).addClass("dd-option-image" + (options.imagePosition === "right" ? " dd-image-right" : "")));
+                    if(item.text) ddOption.append($("<label>").addClass("dd-option-text").text(item.text));
+                    if(item.description) ddOption.append($("<small>").addClass("dd-option-description dd-desc").text(item.description));
+                    ddOptions.append(ddList);
                 });
 
                 //Save plugin data.
@@ -281,12 +280,11 @@
 
         //If set to display to full html, add html
         if (settings.showSelectedHTML) {
-            ddSelected.html(
-                    (selectedData.imageSrc ? "<img class='dd-selected-image'" + (settings.imagePosition === "right" ? " dd-image-right" : "") + "' src='" + selectedData.imageSrc + "' />" : "") +
-                    (selectedData.text ? "<label class='dd-selected-text'>" + selectedData.text + "</label>" : "") +
-                    (selectedData.description ? "<small class='dd-selected-description dd-desc'" + (settings.truncateDescription ? " dd-selected-description-truncated" : "") + "' >" + selectedData.description + "</small>" : "")
-                );
-
+            var ddSelectedData = $("<div>");
+            if(selectedData.imageSrc) ddSelectedData.append($("<img>").addClass("dd-selected-image" + (settings.imagePosition === "right" ? " dd-image-right" : "")).attr("src", selectedData.imageSrc));
+            if(selectedData.text) ddSelectedData.append($("<label>").addClass("dd-selected-text").text(selectedData.text));
+            if(selectedData.description) ddSelectedData.append($("<small>").addClass("dd-selected-description dd-desc" + (settings.truncateDescription ? " dd-selected-description-truncated" : "")).text(selectedData.description));
+            ddSelected.html(ddSelectedData.html());
         }
         //Else only display text as selection
         else ddSelected.html(selectedData.text);