fix select: solved performance issue for data() nethod

olton · Jan 31, 2025 · b67836d · b67836d
1 parent 6979348
commit b67836d
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 16 deletions.
diff --git a/__html__/select-{data}.html b/__html__/select-{data}.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <link href="../lib/metro.css" rel="stylesheet">
+    <link href="../lib/icons.css" rel="stylesheet">
+
+    <title>Test Select - Metro UI :: Popular HTML, CSS and JS library</title>
+
+</head>
+<body class="m4-cloak p-ab">
+<nav data-role="appbar">
+    <span class="app-bar-item">Select</span>
+    <div class="app-bar-item-static">
+        <input type="checkbox" data-role="theme-switcher" data-state="dark"/>
+    </div>
+</nav>
+<div class="container">
+    <h1>Select test page</h1>
+
+    <div class="example">
+        <select data-role="select" id="select" data-filter="true"></select>
+    </div>
+</div>
+
+<script src="../lib/metro.js"></script>
+<script>
+    $(() => {
+        let options = {};
+        let i = 0;
+        for (const tz of Intl.supportedValuesOf('timeZone')) {
+            options[tz] = tz;
+        }
+        const select = Metro.getPlugin("#select", 'select');
+        select.data(options);
+    })
+</script>
+</body>
+</html>
diff --git a/__html__/select.html b/__html__/select.html
@@ -91,10 +91,8 @@ <h1>Select test page</h1>
     <div class="example mt-4">
         <select data-role="select" multiple id="select2"
                 data-clear-button="true"
-                data-cls-option-group="text-bold fg-orange"
                 data-show-group-name="true"
-                data-cls-group-name="fg-red"
-                data-short-tag="false">
+                data-short-tag="true">
             <optgroup label="Physical servers">
                 <option value="dedicated_corei3_hp">Core i3 (hp)</option>
                 <option value="dedicated_pentium_hp">Pentium (hp)</option>

diff --git a/lib/metro.js b/lib/metro.js
@@ -8733,7 +8733,7 @@
   (function($3) {
     "use strict";
     globalThis["__version__"] = "5.1.0";
-    globalThis["__build_time__"] = "27.01.2025, 21:12:08";
+    globalThis["__build_time__"] = "31.01.2025, 20:16:16";
     const meta_init = $3.meta("metro:init").attr("content");
     const meta_locale = $3.meta("metro:locale").attr("content");
     const meta_week_start = $3.meta("metro:week_start").attr("content");
@@ -8999,7 +8999,7 @@
     const normalizeComponentName = (name2) => typeof name2 !== "string" ? void 0 : name2.replace(/-/g, "").toLowerCase();
     const Metro2 = {
       version: "5.1.0",
-      build_time: "27.01.2025, 21:12:08",
+      build_time: "31.01.2025, 20:16:16",
       buildNumber: 0,
       isTouchable: isTouch3,
       fullScreenEnabled: document.fullscreenEnabled,
@@ -15563,6 +15563,8 @@
       openMode: "auto",
       showGroupName: false,
       shortTag: true,
+      // tag with name max width 120px
+      source: null,
       clsSelect: "",
       clsSelectInput: "",
       clsPrepend: "",
@@ -15617,10 +15619,7 @@
       _addTag: function(val, data2) {
         const element2 = this.element, o2 = this.options;
         let tag, tagSize, container = element2.closest(".select");
-        const group = data2.data("group");
         let html2 = "<span class='title'>" + val + "</span>";
-        if (o2.showGroupName && group) {
-        }
         tag = $3("<div>").addClass("tag").addClass(o2.shortTag ? "short-tag" : "").addClass(o2.clsSelectedItem).html(html2).data("option", data2);
         $3("<span>").addClass("action unselect-option").addClass(o2.clsSelectedItemAction).html("&times;").appendTo(tag);
         if (container.hasClass("input-large")) {
@@ -16074,6 +16073,7 @@
         } else {
           _selected = [];
         }
+        this.observer.disconnect();
         element2.empty();
         if (typeof op === "string") {
           element2.html(op);
@@ -16096,6 +16096,10 @@
           });
         }
         this._createOptions();
+        this.observer.observe(element2[0], {
+          childList: true,
+          subtree: true
+        });
         return this;
       },
       addOption: function(val, title3, selected) {

diff --git a/lib/metro.js.map b/lib/metro.js.map
diff --git a/source/components/select/select.js b/source/components/select/select.js
@@ -22,7 +22,8 @@
         dropFullSize: false,
         openMode: "auto",
         showGroupName: false,
-        shortTag: true,
+        shortTag: true, // tag with name max width 120px
+        source: null,
 
         clsSelect: "",
         clsSelectInput: "",
@@ -95,12 +96,7 @@
             let tag,
                 tagSize,
                 container = element.closest(".select");
-            const group = data.data("group");
             let html = "<span class='title'>" + val + "</span>"
-
-            if (o.showGroupName && group) {
-                //html += `&nbsp;<span class='selected-item__group-name ${o.clsGroupName}'>${group}</span>`;
-            }
 
             tag = $("<div>")
                 .addClass("tag")
@@ -760,6 +756,7 @@
                 _selected = [];
             }
 
+            this.observer.disconnect();
             element.empty();
 
             if (typeof op === "string") {
@@ -792,6 +789,10 @@
             }
 
             this._createOptions();
+            this.observer.observe(element[0], {
+                childList: true,
+                subtree: true,
+            });
 
             return this;
         },