From a733d814410fe2d2c1327f96f9c69bd871cc9b1b Mon Sep 17 00:00:00 2001
From: coderiaser <coderaiser@cloudcmd.io>
Date: Wed, 6 Nov 2024 16:53:30 +0200
Subject: [PATCH] feature: css: --is-mobile: add

---
 client/client.js          |  9 +--------
 client/dom/index.js       |  5 +++++
 client/dom/index.spec.js  | 30 ++++++++++++++++++++++++++++++
 client/listeners/index.js |  4 +++-
 css/query.css             |  9 ++++++++-
 5 files changed, 47 insertions(+), 10 deletions(-)

diff --git a/client/client.js b/client/client.js
index f6394521..f17e0b23 100644
--- a/client/client.js
+++ b/client/client.js
@@ -59,15 +59,8 @@ function CloudCmdProto(DOM) {
     this.prefixSocket = '';
     this.prefixURL = '';
     
-    const bodyStyle = getComputedStyle(document.body);
-    
-    this.MIN_ONE_PANEL_WIDTH = bodyStyle.getPropertyValue('--min-one-panel-width');
-    this.MOBILE_ONE_PANEL_WIDTH = bodyStyle.getPropertyValue('--mobile-max-width');
-    
+    this.MIN_ONE_PANEL_WIDTH = DOM.getCSSVar('min-one-panel-width');
     this.HOST = location.origin || location.protocol + '//' + location.host;
-    
-    this.TITLE = 'Cloud Commander';
-    
     this.sort = {
         left: 'name',
         right: 'name',
diff --git a/client/dom/index.js b/client/dom/index.js
index c9b50e44..bfb4386c 100644
--- a/client/dom/index.js
+++ b/client/dom/index.js
@@ -520,6 +520,11 @@ module.exports.getPanelPosition = (panel) => {
     return panel.dataset.name.replace('js-', '');
 };
 
+module.exports.getCSSVar = (name, {body = document.body} = {}) => {
+    const bodyStyle = getComputedStyle(body);
+    return bodyStyle.getPropertyValue(`--${name}`);
+};
+
 /** function getting panel active, or passive
  * @param options = {active: true}
  */
diff --git a/client/dom/index.spec.js b/client/dom/index.spec.js
index 1c413fc8..db4d8f09 100644
--- a/client/dom/index.spec.js
+++ b/client/dom/index.spec.js
@@ -4,6 +4,7 @@ require('css-modules-require-hook/preset');
 
 const {test, stub} = require('supertape');
 const mockRequire = require('mock-require');
+const {getCSSVar} = require('./index');
 const {reRequire, stopAll} = mockRequire;
 
 global.CloudCmd = {};
@@ -29,3 +30,32 @@ test('cloudcmd: client: dom: goToDirectory', async (t) => {
     t.calledWith(changeDir, [path]);
     t.end();
 });
+
+test('cloudcmd: client: dom: getCSSVar', (t) => {
+    const body = {};
+    const getPropertyValue = stub().returns(0);
+    
+    global.getComputedStyle = stub().returns({
+        getPropertyValue,
+    });
+    const result = getCSSVar('hello', {body});
+    delete global.getComputedStyle;
+    
+    t.notOk(result);
+    t.end();
+});
+
+test('cloudcmd: client: dom: getCSSVar: 1', (t) => {
+    const body = {};
+    const getPropertyValue = stub().returns(1);
+    
+    global.getComputedStyle = stub().returns({
+        getPropertyValue,
+    });
+    const result = getCSSVar('hello', {body});
+    
+    delete global.getComputedStyle;
+    
+    t.ok(result);
+    t.end();
+});
diff --git a/client/listeners/index.js b/client/listeners/index.js
index 01fb3eb3..78342411 100644
--- a/client/listeners/index.js
+++ b/client/listeners/index.js
@@ -222,7 +222,9 @@ function copyPath(el) {
 }
 
 function execIfNotMobile(callback, event) {
-    if (window.innerWidth > CloudCmd.MOBILE_ONE_PANEL_WIDTH)
+    const isMobile = DOM.getCSSVar('is-mobile');
+    
+    if (!isMobile)
         callback(event);
 }
 
diff --git a/css/query.css b/css/query.css
index 17639d71..b5843b85 100644
--- a/css/query.css
+++ b/css/query.css
@@ -19,9 +19,10 @@
         width: 15%;
     }
 }
+
 :root {
-    --mobile-max-width: 600px;
     --min-one-panel-width: 1155px;
+    --is-mobile: 0;
 }
 
 @media only screen and (height <= 900px) and (width <= 600px) {
@@ -56,6 +57,12 @@
     }
 }
 
+@media only screen and (width <= 600px) {
+    :root {
+        --is-mobile: 1;
+    }
+}
+
 @media only screen and (height <= 550px) and (width <= 600px) {
     .fm {
         height: 65%;