luci: refactor progress bar class names and add compatibility check to fix #6

luci/luci-app-qmodem/files/modem_overview.htm

@@ -8,7 +8,7 @@
     
 
     
-    .cbi-progressbar {
+    .compat-progressbar {
 	border: 1px solid var(--border-color-high,var(--progressbarColor,var(--background-color)));
 	border-radius: 3px;
 	position: relative;
@@ -18,7 +18,7 @@
 	background: var(--background-color-medium,var(--progressbarColor));
     }
 
-    .cbi-progressbar > div {
+    .compat-progressbar > div {
         background: var(--progressbar, var(--primary, var(--primary-color-medium)));
         height: 100%;
         transition: width .25s ease-in;
@@ -26,7 +26,7 @@
         border-radius: 2px;
     }
 
-    .cbi-progressbar::before {
+    .compat-progressbar::before {
         position: absolute;
         top: -1.4em;
         left: 0;
@@ -38,7 +38,26 @@
 </style>
 
 <script>
+    function hasCssClass(className) {
+        // 获取所有样式表
+        const styleSheets = document.styleSheets;
 
+        // 遍历每个样式表
+        for (let i = 0; i < styleSheets.length; i++) {
+            const rules = styleSheets[i].cssRules || styleSheets[i].rules; // 兼容不同浏览器
+
+            // 遍历每个样式规则
+            for (let j = 0; j < rules.length; j++) {
+                if (rules[j].selectorText && rules[j].selectorText.includes(className)) {
+                    return true; // 找到定义，返回 true
+                }
+            }
+        }
+
+        return false; // 没有找到定义，返回 false
+    }
+
+    const progressbar_className = hasCssClass('.cbi-progressbar') ? 'cbi-progressbar' : 'compat-progressbar';
     class LuciTable{
             constructor(){
                 this.rows = [];
@@ -99,7 +118,7 @@
                         precentage = (data.value - min) / (max - min) * 100;
                         this.rows[index].left.innerHTML = full_name;
                         var progress_bar = document.createElement('div')
-                        progress_bar.className = "cbi-progressbar"
+                        progress_bar.className = progressbar_className
                         progress_bar.title = title;
                         var progress_bar_bar = document.createElement('div')
                         progress_bar_bar.setAttribute("style","width:"+precentage+"%")

luci/luci-app-qmodem/luasrc/view/qmodem/modem_info.htm

@@ -9,7 +9,7 @@
     
 
     
-    .cbi-progressbar {
+    .compat-progressbar {
 	border: 1px solid var(--border-color-high,var(--progressbarColor,var(--background-color)));
 	border-radius: 3px;
 	position: relative;
@@ -19,7 +19,7 @@
 	background: var(--background-color-medium,var(--progressbarColor));
     }
 
-    .cbi-progressbar > div {
+    .compat-progressbar > div {
         background: var(--progressbar, var(--primary, var(--primary-color-medium)));
         height: 100%;
         transition: width .25s ease-in;
@@ -27,7 +27,7 @@
         border-radius: 2px;
     }
 
-    .cbi-progressbar::before {
+    .compat-progressbar::before {
         position: absolute;
         top: -1.4em;
         left: 0;
@@ -39,6 +39,26 @@
 </style>
 
 <script>
+function hasCssClass(className) {
+    // 获取所有样式表
+    const styleSheets = document.styleSheets;
+
+    // 遍历每个样式表
+    for (let i = 0; i < styleSheets.length; i++) {
+        const rules = styleSheets[i].cssRules || styleSheets[i].rules; // 兼容不同浏览器
+
+        // 遍历每个样式规则
+        for (let j = 0; j < rules.length; j++) {
+            if (rules[j].selectorText && rules[j].selectorText.includes(className)) {
+                return true; // 找到定义，返回 true
+            }
+        }
+    }
+
+    return false; // 没有找到定义，返回 false
+}
+
+const progressbar_className = hasCssClass('.cbi-progressbar') ? 'cbi-progressbar' : 'compat-progressbar';
 
 class LuciTable{
         constructor(){
@@ -100,7 +120,7 @@ class LuciTable{
                     precentage = (data.value - min) / (max - min) * 100;
                     this.rows[index].left.innerHTML = full_name;
                     var progress_bar = document.createElement('div')
-                    progress_bar.className = "cbi-progressbar"
+                    progress_bar.className = progressbar_className;
                     progress_bar.title = title;
                     var progress_bar_bar = document.createElement('div')
                     progress_bar_bar.setAttribute("style","width:"+precentage+"%")