feature: css: --is-mobile: add

Author: coderaiser

client/client.js

@@ -25,6 +25,7 @@ const {
 } = require('../common/cloudfunc');
 
 const loadModule = require('./load-module');
+const {getCSSVar} = require('./dom');
 
 const noJS = (a) => a.replace(/.js$/, '');
 
@@ -59,15 +60,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',

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}
  */

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();
+});

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);
 }
 

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%;