Fix issues sa-si-dev#311 and sa-si-dev#313

gnbm · Mar 7, 2024 · 2108942 · 2108942
1 parent 0e389c1
commit 2108942
Show file tree

Hide file tree

Showing 11 changed files with 183 additions and 19 deletions.
diff --git a/dist-archive/virtual-select-1.0.41.min.js b/dist-archive/virtual-select-1.0.41.min.js
diff --git a/dist/virtual-select.js b/dist/virtual-select.js
@@ -33,6 +33,7 @@ var Utils = /*#__PURE__*/function () {
     /**
      * @param {any} text
      * @returns {string}
+     * @memberof Utils
      */
     function getString(text) {
       return text || text === 0 ? text.toString() : '';
@@ -42,6 +43,7 @@ var Utils = /*#__PURE__*/function () {
      * @param {any} value
      * @param {boolean} defaultValue
      * @returns {boolean}
+     * @memberof Utils
      */
   }, {
     key: "convertToBoolean",
@@ -61,6 +63,7 @@ var Utils = /*#__PURE__*/function () {
     /**
      * @param {any} value
      * @returns {boolean}
+     * @memberof Utils
      */
   }, {
     key: "isEmpty",
@@ -81,6 +84,7 @@ var Utils = /*#__PURE__*/function () {
     /**
      * @param {any} value
      * @returns {boolean}
+     * @memberof Utils
      */
   }, {
     key: "isNotEmpty",
@@ -93,6 +97,7 @@ var Utils = /*#__PURE__*/function () {
      * @param {any} value
      * @param {boolean} cloneArray
      * @returns {any[]}
+     * @memberof Utils
      */
   }, {
     key: "removeItemFromArray",
@@ -112,6 +117,7 @@ var Utils = /*#__PURE__*/function () {
     /**
      * @param {any[]} array
      * @returns {any[]}
+     * @memberof Utils
      */
   }, {
     key: "removeArrayEmpty",
@@ -128,6 +134,7 @@ var Utils = /*#__PURE__*/function () {
      * @param {number} max
      * @param {number} max
      * @returns {number}
+     * @memberof Utils
      */
   }, {
     key: "getRandomInt",
@@ -141,6 +148,7 @@ var Utils = /*#__PURE__*/function () {
     /**
      * @param {string} text
      * @return {string}
+     * @memberof Utils
      */
   }, {
     key: "regexEscape",
@@ -152,6 +160,7 @@ var Utils = /*#__PURE__*/function () {
     /**
      * @param {string} text
      * @return {string}
+     * @memberof Utils
      */
   }, {
     key: "normalizeString",
@@ -182,6 +191,30 @@ var Utils = /*#__PURE__*/function () {
       document.body.removeChild(tempElement);
       return textWidth > container.clientWidth;
     }
+
+    /**
+     * @static
+     * @param {string} text
+     * @return {string}
+     * @memberof Utils
+     */
+  }, {
+    key: "replaceDoubleQuotesWithHTML",
+    value: function replaceDoubleQuotesWithHTML(text) {
+      return text.replace(/"/g, '&quot;');
+    }
+
+    /**
+     * @static
+     * @param {string} text
+     * @return {boolean}
+     * @memberof Utils
+     */
+  }, {
+    key: "containsHTML",
+    value: function containsHTML(text) {
+      return /<[a-z][\s\S]*>/i.test(text);
+    }
   }]);
   return Utils;
 }();
@@ -1970,8 +2003,15 @@ var VirtualSelect = /*#__PURE__*/function () {
           valueText.push(label);
           selectedValuesCount += 1;
           if (showValueAsTags) {
-            var valueTooltipForTags = _this10.getTooltipAttrText(label, !Utils.willTextOverflow($valueText.parentElement, label), true);
-            var valueTagHtml = "<span class=\"vscomp-value-tag\" data-index=\"".concat(d.index, "\" ").concat(valueTooltipForTags, ">\n              <span class=\"vscomp-value-tag-content\">").concat(label, "</span>\n              <span class=\"vscomp-value-tag-clear-button\">\n                <i class=\"vscomp-clear-icon\"></i>\n              </span>\n            </span>");
+            var valueTagHtml = '';
+
+            //Will cause text overflow in runtime and if so, the tooltip information is prepared 
+            if (Utils.willTextOverflow($valueText.parentElement, label)) {
+              var valueTooltipForTags = _this10.getTooltipAttrText(label, false, true);
+              valueTagHtml = "<span class=\"vscomp-value-tag\" data-index=\"".concat(d.index, "\" ").concat(valueTooltipForTags, ">\n                  <span class=\"vscomp-value-tag-content\">").concat(label, "</span>\n                  <span class=\"vscomp-value-tag-clear-button\">\n                    <i class=\"vscomp-clear-icon\"></i>\n                  </span>\n                </span>");
+            } else {
+              valueTagHtml = "<span class=\"vscomp-value-tag\" data-index=\"".concat(d.index, "\">\n                  <span class=\"vscomp-value-tag-content\">").concat(label, "</span>\n                  <span class=\"vscomp-value-tag-clear-button\">\n                    <i class=\"vscomp-clear-icon\"></i>\n                  </span>\n                </span>");
+            }
             valueTooltip.push(valueTagHtml);
           } else {
             valueTooltip.push(label);
@@ -2369,8 +2409,9 @@ var VirtualSelect = /*#__PURE__*/function () {
     value: function getTooltipAttrText(text) {
       var ellipsisOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
       var allowHtml = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+      var tootltipText = Utils.containsHTML(text) ? Utils.replaceDoubleQuotesWithHTML(text) : text;
       var data = {
-        'data-tooltip': text || '',
+        'data-tooltip': tootltipText || '',
         'data-tooltip-enter-delay': this.tooltipEnterDelay,
         'data-tooltip-z-index': this.zIndex,
         'data-tooltip-font-size': this.tooltipFontSize,

diff --git a/dist/virtual-select.min.js b/dist/virtual-select.min.js
diff --git a/docs/assets/script.js b/docs/assets/script.js
@@ -289,6 +289,34 @@ function initPageExamples() {
     showValueAsTags: true,
   });
 
+  initVirtualSelect({
+    ele: '#show-value-as-tags-select-with-html',
+    multiple: true,
+  search: true,
+  showValueAsTags: true,
+  options: [
+    {
+      label: '<i class="icon-fire" aria-hidden="true"></i> Option 1',
+      value: 1
+    },
+    { label: '<i class="icon-plane" aria-hidden="true"></i> Option 2', 
+      value: 2 },
+    {
+      label:
+        '<i class="icon-apple" aria-hidden="true"></i> This is a very long text to be selected in the selection!! This is a very long text to be selected in the selection!!',
+      value: 3
+    },
+    {
+      label:
+        'This is a very long text to be selected in the selection!! This is a very long text to be selected in the selection!!',
+      value: 4
+    }
+
+  ],  
+  selectedValue: [1,2]
+  });
+
+
   initVirtualSelect({
     ele: '#direction-rtl-select',
     multiple: true,

diff --git a/docs/assets/styles.css b/docs/assets/styles.css
@@ -128,7 +128,8 @@ section.cover {
   margin-left: 12px;
 }
 
-#show-value-as-tags-select {
+#show-value-as-tags-select,
+#show-value-as-tags-select-with-html {
   max-width: 400px;
 }
 

diff --git a/docs/assets/virtual-select.js b/docs/assets/virtual-select.js
@@ -33,6 +33,7 @@ var Utils = /*#__PURE__*/function () {
     /**
      * @param {any} text
      * @returns {string}
+     * @memberof Utils
      */
     function getString(text) {
       return text || text === 0 ? text.toString() : '';
@@ -42,6 +43,7 @@ var Utils = /*#__PURE__*/function () {
      * @param {any} value
      * @param {boolean} defaultValue
      * @returns {boolean}
+     * @memberof Utils
      */
   }, {
     key: "convertToBoolean",
@@ -61,6 +63,7 @@ var Utils = /*#__PURE__*/function () {
     /**
      * @param {any} value
      * @returns {boolean}
+     * @memberof Utils
      */
   }, {
     key: "isEmpty",
@@ -81,6 +84,7 @@ var Utils = /*#__PURE__*/function () {
     /**
      * @param {any} value
      * @returns {boolean}
+     * @memberof Utils
      */
   }, {
     key: "isNotEmpty",
@@ -93,6 +97,7 @@ var Utils = /*#__PURE__*/function () {
      * @param {any} value
      * @param {boolean} cloneArray
      * @returns {any[]}
+     * @memberof Utils
      */
   }, {
     key: "removeItemFromArray",
@@ -112,6 +117,7 @@ var Utils = /*#__PURE__*/function () {
     /**
      * @param {any[]} array
      * @returns {any[]}
+     * @memberof Utils
      */
   }, {
     key: "removeArrayEmpty",
@@ -128,6 +134,7 @@ var Utils = /*#__PURE__*/function () {
      * @param {number} max
      * @param {number} max
      * @returns {number}
+     * @memberof Utils
      */
   }, {
     key: "getRandomInt",
@@ -141,6 +148,7 @@ var Utils = /*#__PURE__*/function () {
     /**
      * @param {string} text
      * @return {string}
+     * @memberof Utils
      */
   }, {
     key: "regexEscape",
@@ -152,6 +160,7 @@ var Utils = /*#__PURE__*/function () {
     /**
      * @param {string} text
      * @return {string}
+     * @memberof Utils
      */
   }, {
     key: "normalizeString",
@@ -182,6 +191,30 @@ var Utils = /*#__PURE__*/function () {
       document.body.removeChild(tempElement);
       return textWidth > container.clientWidth;
     }
+
+    /**
+     * @static
+     * @param {string} text
+     * @return {string}
+     * @memberof Utils
+     */
+  }, {
+    key: "replaceDoubleQuotesWithHTML",
+    value: function replaceDoubleQuotesWithHTML(text) {
+      return text.replace(/"/g, '&quot;');
+    }
+
+    /**
+     * @static
+     * @param {string} text
+     * @return {boolean}
+     * @memberof Utils
+     */
+  }, {
+    key: "containsHTML",
+    value: function containsHTML(text) {
+      return /<[a-z][\s\S]*>/i.test(text);
+    }
   }]);
   return Utils;
 }();
@@ -1970,8 +2003,15 @@ var VirtualSelect = /*#__PURE__*/function () {
           valueText.push(label);
           selectedValuesCount += 1;
           if (showValueAsTags) {
-            var valueTooltipForTags = _this10.getTooltipAttrText(label, !Utils.willTextOverflow($valueText.parentElement, label), true);
-            var valueTagHtml = "<span class=\"vscomp-value-tag\" data-index=\"".concat(d.index, "\" ").concat(valueTooltipForTags, ">\n              <span class=\"vscomp-value-tag-content\">").concat(label, "</span>\n              <span class=\"vscomp-value-tag-clear-button\">\n                <i class=\"vscomp-clear-icon\"></i>\n              </span>\n            </span>");
+            var valueTagHtml = '';
+
+            //Will cause text overflow in runtime and if so, the tooltip information is prepared 
+            if (Utils.willTextOverflow($valueText.parentElement, label)) {
+              var valueTooltipForTags = _this10.getTooltipAttrText(label, false, true);
+              valueTagHtml = "<span class=\"vscomp-value-tag\" data-index=\"".concat(d.index, "\" ").concat(valueTooltipForTags, ">\n                  <span class=\"vscomp-value-tag-content\">").concat(label, "</span>\n                  <span class=\"vscomp-value-tag-clear-button\">\n                    <i class=\"vscomp-clear-icon\"></i>\n                  </span>\n                </span>");
+            } else {
+              valueTagHtml = "<span class=\"vscomp-value-tag\" data-index=\"".concat(d.index, "\">\n                  <span class=\"vscomp-value-tag-content\">").concat(label, "</span>\n                  <span class=\"vscomp-value-tag-clear-button\">\n                    <i class=\"vscomp-clear-icon\"></i>\n                  </span>\n                </span>");
+            }
             valueTooltip.push(valueTagHtml);
           } else {
             valueTooltip.push(label);
@@ -2369,8 +2409,9 @@ var VirtualSelect = /*#__PURE__*/function () {
     value: function getTooltipAttrText(text) {
       var ellipsisOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
       var allowHtml = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+      var tootltipText = Utils.containsHTML(text) ? Utils.replaceDoubleQuotesWithHTML(text) : text;
       var data = {
-        'data-tooltip': text || '',
+        'data-tooltip': tootltipText || '',
         'data-tooltip-enter-delay': this.tooltipEnterDelay,
         'data-tooltip-z-index': this.zIndex,
         'data-tooltip-font-size': this.tooltipFontSize,

diff --git a/docs/assets/virtual-select.min.js b/docs/assets/virtual-select.min.js
diff --git a/docs/examples.md b/docs/examples.md
@@ -337,6 +337,10 @@ Show each selected values as tags with remove icon
 
 <div id="show-value-as-tags-select"></div>
 
+Show each selected values as tags with some containing HTML
+
+<div id="show-value-as-tags-select-with-html"></div>
+
 ```js
 VirtualSelect.init({
   ...

diff --git a/docs/index.html b/docs/index.html
@@ -12,6 +12,7 @@
 
     <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet" />
 
+    <link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
     <link rel="stylesheet" href="assets/external/vue.css" />
     <link rel="stylesheet" href="assets/external/flags.css" />
     <link rel="stylesheet" href="assets/virtual-select.min.css" />
@@ -49,7 +50,7 @@
   <body>
     <div id="app"></div>
 
-    <script src="assets/virtual-select.min.js"></script>
+    <script src="assets/virtual-select.js"></script>
     <script src="assets/tooltip.min.js"></script>
     <script src="assets/script.js"></script>