From 0af8ee85c5da9ca5402f09b62dc191159a232108 Mon Sep 17 00:00:00 2001
From: Iagor Moraes <13892132+iagormoraes@users.noreply.github.com>
Date: Thu, 8 Sep 2022 07:27:20 -0300
Subject: [PATCH] Add correct mobile first sort on CSS rules view (#4521).
 Closes #2774

fix: add correct mobile first sort on css rules view
---
 src/css_composer/view/CssRulesView.js        | 22 ++++++-
 test/specs/css_composer/view/CssRulesView.js | 66 +++++++++++++++++---
 2 files changed, 80 insertions(+), 8 deletions(-)

diff --git a/src/css_composer/view/CssRulesView.js b/src/css_composer/view/CssRulesView.js
index 1430482c3..c831c24d7 100644
--- a/src/css_composer/view/CssRulesView.js
+++ b/src/css_composer/view/CssRulesView.js
@@ -1,3 +1,5 @@
+import { bindAll } from 'underscore';
+
 import { View } from '../../common';
 import { createEl } from '../../utils/dom';
 import CssRuleView from './CssRuleView';
@@ -6,6 +8,12 @@ import CssGroupRuleView from './CssGroupRuleView';
 const getBlockId = (pfx, order) => `${pfx}${order ? `-${parseFloat(order)}` : ''}`;
 
 export default class CssRulesView extends View {
+  constructor(options) {
+    super(options);
+
+    bindAll(this, 'sortRules');
+  }
+
   initialize(o) {
     const config = o.config || {};
     this.atRules = {};
@@ -104,6 +112,18 @@ export default class CssRulesView extends View {
     return mediaText && mediaText.replace(`(${this.em.getConfig().mediaCondition}: `, '').replace(')', '');
   }
 
+  sortRules(a, b) {
+    const { em } = this;
+    const isMobFirst = (em.getConfig().mediaCondition || '').indexOf('min-width') !== -1;
+
+    if (!isMobFirst) return 0;
+
+    const left = isMobFirst ? a : b;
+    const right = isMobFirst ? b : a;
+
+    return left - right;
+  }
+
   render() {
     this.renderStarted = 1;
     this.atRules = {};
@@ -112,7 +132,7 @@ export default class CssRulesView extends View {
     $el.empty();
 
     // Create devices related DOM structure, ensure also to have a default container
-    const prs = em.get('DeviceManager').getAll().pluck('priority');
+    const prs = em.get('DeviceManager').getAll().pluck('priority').sort(this.sortRules);
     prs.every(pr => pr) && prs.unshift(0);
     prs.forEach(pr => frag.appendChild(createEl('div', { id: getBlockId(className, pr) })));
 
diff --git a/test/specs/css_composer/view/CssRulesView.js b/test/specs/css_composer/view/CssRulesView.js
index 7b309d12b..5a2873771 100644
--- a/test/specs/css_composer/view/CssRulesView.js
+++ b/test/specs/css_composer/view/CssRulesView.js
@@ -22,21 +22,44 @@ describe('CssRulesView', () => {
       widthMedia: '',
     },
   ];
+  const mobileFirstDevices = [
+    {
+      name: 'Mobile portrait',
+      width: '',
+      widthMedia: '',
+    },
+    {
+      name: 'Tablet',
+      width: '768px',
+      widthMedia: '992px',
+    },
+    {
+      name: 'Desktop',
+      width: '1024px',
+      widthMedia: '1280px',
+    },
+  ];
 
-  beforeEach(() => {
+  function buildEditor(editorOptions) {
     const col = new CssRules([]);
-    obj = new CssRulesView({
+    const obj = new CssRulesView({
       collection: col,
       config: {
-        em: new Editor({
-          deviceManager: {
-            devices,
-          },
-        }),
+        em: new Editor(editorOptions),
       },
     });
     document.body.innerHTML = '<div id="fixtures"></div>';
     document.body.querySelector('#fixtures').appendChild(obj.render().el);
+
+    return obj;
+  }
+
+  beforeEach(() => {
+    obj = buildEditor({
+      deviceManager: {
+        devices,
+      },
+    });
   });
 
   afterEach(() => {
@@ -68,6 +91,35 @@ describe('CssRulesView', () => {
     });
   });
 
+  test('Collection is empty. Styles structure with mobile first bootstraped', () => {
+    obj = buildEditor({
+      mediaCondition: 'min-width',
+      deviceManager: {
+        devices: mobileFirstDevices,
+      },
+    });
+
+    expect(obj.$el.html()).toBeTruthy();
+    const foundStylesContainers = obj.$el.find('div');
+    expect(foundStylesContainers.length).toEqual(mobileFirstDevices.length);
+
+    foundStylesContainers.each((idx, e) => console.log(e.id));
+
+    const sortedDevicesWidthMedia = mobileFirstDevices
+      .map(dvc => dvc.widthMedia)
+      .sort((left, right) => {
+        const a = (left && left.replace('px', '')) || Number.MIN_VALUE;
+        const b = (right && right.replace('px', '')) || Number.MIN_VALUE;
+        return a - b;
+      })
+      .map(widthMedia => parseFloat(widthMedia));
+
+    foundStylesContainers.each((idx, $styleC) => {
+      const width = sortedDevicesWidthMedia[idx];
+      expect($styleC.id).toEqual(`${prefix}${width ? `-${width}` : ''}`);
+    });
+  });
+
   test('Add new rule', () => {
     sinon.stub(obj, 'addToCollection');
     obj.collection.add({});