Merge pull request #1417 from ProcessMaker/bugfix/FOUR-9361

FOUR-9361 apply media quieries to container
ProcessMaker · Jul 28, 2023 · 928518c · 928518c
2 parents 81991fe + 36b256e
commit 928518c
Show file tree

Hide file tree

Showing 2 changed files with 97 additions and 16 deletions.
diff --git a/src/components/vue-form-renderer.vue b/src/components/vue-form-renderer.vue
@@ -1,6 +1,7 @@
 <template>
   <div
     id="vue-form-renderer"
+    ref="formRendererContainer"
     :class="[containerClass, containerDeviceClass]"
     :style="cssDevice"
     data-cy="screen-renderer-container"
@@ -104,6 +105,7 @@ export default {
         },
       },
       scrollable: null,
+      containerObserver: null,
     };
   },
   computed: {
@@ -156,14 +158,17 @@ export default {
   },
   created() {
     this.parseCss = _.debounce(this.parseCss, 500, {leading: true});
+
+    this.containerObserver = new ResizeObserver(this.onContainerObserver);
   },
   mounted() {
-    this.parseCss();
     this.registerCustomFunctions();
     if (window.ProcessMaker && window.ProcessMaker.EventBus) {
       window.ProcessMaker.EventBus.$emit('screen-renderer-init', this);
     }
     this.scrollable = Scrollparent(this.$el);
+
+    this.containerObserver.observe(this.$refs.formRendererContainer);
   },
   methods: {
     ...mapActions("globalErrorsModule", ["validate", "hasSubmitted", "showValidationOnLoad"]),
@@ -230,24 +235,22 @@ export default {
       this.$emit('submit', this.data);
     },
     parseCss() {
-      const containerSelector = '.' + this.containerClass;
+      const containerSelector = `.${this.containerClass}`;
+
       try {
         const ast = csstree.parse(this.customCss, {
           onParseError(error) {
             // throw "CSS has the following errors:\n\n" + error.formattedMessage
             throw error.formattedMessage;
           },
         });
+
         let i = 0;
         csstree.walk(ast, function(node, item, list) {
-          if (
-            node.type.match(/^.+Selector$/) &&
-              node.name !== containerSelector &&
-              list
-          ) {
+          if (node.type.match(/^.+Selector$/) && node.name !== containerSelector && list) {
             // Wait until we get to the first item before prepending our container selector
             if (!item.prev) {
-              list.prependData({type: 'WhiteSpace', loc: null, value: ' '});
+              list.prependData({ type: 'WhiteSpace', loc: null, value: ' ' });
               list.prependData({
                 type: 'TypeSelector',
                 loc: null,
@@ -256,14 +259,61 @@ export default {
             }
           }
           if (i > 5000) {
-            throw 'CSS is too big';
+            throw Error('CSS is too long');
           }
-          i = i + 1;
+
+          i += 1;
+        });
+
+        // Find the media block
+        const mediaConditions = [];
+        csstree.walk(ast, {
+          visit: 'Atrule',
+          enter: (node, item, list) => {
+            if (!item.prev && node.name === 'media') {
+              const mediaCondition = {
+                minWidth: 0,
+                maxWidth: Math.max(document.documentElement.clientWidth, window.innerWidth || 0),
+                rules: [],
+              };
+
+              csstree.walk(node.prelude, {
+                visit: 'MediaFeature',
+                enter: (featureNode) => {
+                  if (['min-width', 'max-width'].includes(featureNode.name)) {
+                    mediaCondition[_.camelCase(featureNode.name)] = parseInt(featureNode.value.value, 10);
+
+                    if (mediaCondition.rules.length === 0) {
+                      csstree.walk(node.block, {
+                        visit: 'Rule',
+                        enter: (ruleNode) => {
+                          const rule = csstree.generate(ruleNode);
+
+                          mediaCondition.rules.push(rule);
+                        },
+                      });
+                    }
+
+                    mediaConditions.push(mediaCondition);
+                  }
+                },
+              });
+
+              list.remove(item);
+            }
+          },
         });
 
         this.customCssWrapped = csstree.generate(ast);
 
-        // clear errors
+        mediaConditions.forEach((condition) => {
+          const { width: currentWidth } = this.$refs.formRendererContainer.getBoundingClientRect();
+
+          if (currentWidth >= condition.minWidth && currentWidth <= condition.maxWidth) {
+            this.customCssWrapped += condition.rules.join(' ');
+          }
+        });
+
         this.$emit('css-errors', '');
       } catch (error) {
         this.$emit('css-errors', error);
@@ -275,6 +325,11 @@ export default {
     setCurrentPage(page) {
       this.$refs.renderer.setCurrentPage(page);
     },
+    onContainerObserver(entries) {
+      // Control coordinates
+      const controlEl = entries[0].target.getBoundingClientRect();
+      this.parseCss();
+    },
   },
 };
 </script>

diff --git a/tests/e2e/specs/MediaQuery.spec.js b/tests/e2e/specs/MediaQuery.spec.js
@@ -1,5 +1,8 @@
-
-const sizes = [[700, 800], [1000, 800], [1500, 768]];
+const sizes = [
+  [700, 800],
+  [1000, 800],
+  [1200, 768],
+];
 const backgroundColor = ['rgb(0, 0, 255)', 'rgb(255, 0, 0)', 'rgb(0, 128, 0)'];
 
 describe('Media Query CSS', () => {
@@ -13,10 +16,31 @@ describe('Media Query CSS', () => {
     cy.get('[data-cy=topbar-css]').click();
     cy.wait(500);
     // write the media query in the custom css panel
-    cy.get('#custom-css').type('@media (max-width: 800px) {div[selector=\'new_input_css\'] {background-color: blue;}} @media (min-width: 800px) and (max-width: 1280px) {div[selector=\'new_input_css\'] {background-color: red;}} @media (min-width: 1280px) {div[selector=\'new_input_css\'] {background-color: green;}}', {parseSpecialCharSequences: false} );
+    cy.get('#custom-css').type(
+      `@media (max-width: 480px) {
+      div[selector="new_input_css"] {
+        background-color: blue;
+      }
+    }
+
+    @media (min-width: 481px) and (max-width: 810px) {
+      div[selector="new_input_css"] {
+        background-color: red;
+      }
+    }
+
+    @media (min-width: 811px) {
+      div[selector="new_input_css"] {
+        background-color: green;
+      }
+    }
+  `,
+      { parseSpecialCharSequences: false },
+    );
+
     cy.wait(500);
     cy.get('[data-cy=save-button]').click();
-    //preview
+    // preview
     cy.get('[data-cy=mode-preview]').click();
   });
 
@@ -29,7 +53,9 @@ describe('Media Query CSS', () => {
       } else {
         cy.viewport(size);
       }
-      cy.get('[selector=new_input_css]').should('have.css', 'background-color').and('eq',backgroundColor[index]);
+
+      cy.wait(300);
+      cy.get('[selector=new_input_css]').should('have.css', 'background-color').and('eq', backgroundColor[index]);
     });
   });
 });