From 38a0dc84347ae10d6ff6cac79de26489bbeb29d5 Mon Sep 17 00:00:00 2001 From: Val Rudi Date: Thu, 29 Mar 2018 17:24:20 +0300 Subject: [PATCH 1/6] Added style containers to fix styles/media-query order --- src/css_composer/view/CssRulesView.js | 29 ++++++++++++++++++++++++--- 1 file changed, 26 insertions(+), 3 deletions(-) diff --git a/src/css_composer/view/CssRulesView.js b/src/css_composer/view/CssRulesView.js index 03b38d74c..1a41cfe2e 100644 --- a/src/css_composer/view/CssRulesView.js +++ b/src/css_composer/view/CssRulesView.js @@ -1,5 +1,6 @@ const CssRuleView = require('./CssRuleView'); const CssGroupRuleView = require('./CssGroupRuleView'); +const $ = Backbone.$; module.exports = require('backbone').View.extend({ initialize(o) { @@ -40,7 +41,7 @@ module.exports = require('backbone').View.extend({ // I have to render keyframes of the same name together // Unfortunately at the moment I didn't find the way of appending them // if not staticly, via appendData - if (model.get('atRuleType') == 'keyframes') { + if (model.get('atRuleType') === 'keyframes') { const atRule = model.getAtRule(); let atRuleEl = this.atRules[atRule]; @@ -61,19 +62,41 @@ module.exports = require('backbone').View.extend({ rendered = view.render().el; } + const mediaWidth = this.getMediaWidth(model.get('mediaText')); + const styleBlockId = `${this.pfx}rules-${mediaWidth}`; + if (rendered) { - if (fragment) fragment.appendChild(rendered); - else this.$el.append(rendered); + if (fragment) { + fragment.getElementById(styleBlockId).appendChild(rendered); + } else { + let $stylesContainer = this.$el.find(`#${styleBlockId}`); + $stylesContainer.append(rendered); + } } return rendered; }, + getMediaWidth(mediaText) { + return mediaText && mediaText.replace('(max-width: ', '').replace(')', ''); + }, + render() { this.atRules = {}; const $el = this.$el; const frag = document.createDocumentFragment(); $el.empty(); + + // Create devices related DOM structure + const pfx = this.pfx; + this.em + .get('DeviceManager') + .getAll() + .forEach(function(model) { + const blockId = pfx + 'rules-' + model.get('widthMedia'); + $(`
`).appendTo(frag); + }); + this.collection.each(model => this.addToCollection(model, frag)); $el.append(frag); $el.attr('class', this.className); From 1280f7c8ad7aba42b6dcf63de7b12427995b8306 Mon Sep 17 00:00:00 2001 From: Val Rudi Date: Fri, 30 Mar 2018 11:40:16 +0300 Subject: [PATCH 2/6] Fixed tests --- test/specs/css_composer/view/CssRulesView.js | 43 ++++++++++++++++---- 1 file changed, 36 insertions(+), 7 deletions(-) diff --git a/test/specs/css_composer/view/CssRulesView.js b/test/specs/css_composer/view/CssRulesView.js index d885fccdc..dadd27bb7 100644 --- a/test/specs/css_composer/view/CssRulesView.js +++ b/test/specs/css_composer/view/CssRulesView.js @@ -1,15 +1,37 @@ -var CssRulesView = require('css_composer/view/CssRulesView'); -var CssRules = require('css_composer/model/CssRules'); +const CssRulesView = require('css_composer/view/CssRulesView'); +const CssRules = require('css_composer/model/CssRules'); +const CssRule = require('css_composer/model/CssRule'); +const Editor = require('editor/model/Editor'); module.exports = { run() { describe('CssRulesView', () => { let obj; + const prefix = 'rules-'; + const devices = [ + { + name: 'Desktop', + width: '', + widthMedia: '' + }, + { + name: 'Tablet', + width: '768px', + widthMedia: '992px' + } + ]; beforeEach(function() { - var col = new CssRules([]); + const col = new CssRules([]); obj = new CssRulesView({ - collection: col + collection: col, + config: { + em: new Editor({ + deviceManager: { + devices + } + }) + } }); document.body.innerHTML = '
'; document.body.querySelector('#fixtures').appendChild(obj.render().el); @@ -23,8 +45,13 @@ module.exports = { expect(CssRulesView).toExist(); }); - it('Collection is empty', () => { - expect(obj.$el.html()).toNotExist(); + it('Collection is empty. Styles structure bootstraped', () => { + expect(obj.$el.html()).toExist(); + const foundStylesContainers = obj.$el.find('div'); + expect(foundStylesContainers.length).toEqual(devices.length); + foundStylesContainers.each(function($styleC, idx) { + expect($styleC.id).toEqual(prefix + devices[idx].widthMedia); + }); }); it('Add new rule', () => { @@ -35,7 +62,9 @@ module.exports = { it('Render new rule', () => { obj.collection.add({}); - expect(obj.$el.html()).toExist(); + expect( + obj.$el.find(`#${prefix}${devices[0].widthMedia}`).html() + ).toExist(); }); }); } From 56addf73cfd0f5aafeaf641bdd0f4f8aff3d4dc4 Mon Sep 17 00:00:00 2001 From: Val Rudi Date: Fri, 30 Mar 2018 11:47:17 +0300 Subject: [PATCH 3/6] Removed unused require --- test/specs/css_composer/view/CssRulesView.js | 1 - 1 file changed, 1 deletion(-) diff --git a/test/specs/css_composer/view/CssRulesView.js b/test/specs/css_composer/view/CssRulesView.js index dadd27bb7..f80178bc6 100644 --- a/test/specs/css_composer/view/CssRulesView.js +++ b/test/specs/css_composer/view/CssRulesView.js @@ -1,6 +1,5 @@ const CssRulesView = require('css_composer/view/CssRulesView'); const CssRules = require('css_composer/model/CssRules'); -const CssRule = require('css_composer/model/CssRule'); const Editor = require('editor/model/Editor'); module.exports = { From b4e9a024d9f50c958a0e65bca33076502020952f Mon Sep 17 00:00:00 2001 From: Val Rudi Date: Fri, 6 Apr 2018 16:25:41 +0300 Subject: [PATCH 4/6] Applied fixes and improvements based on PR comments --- src/css_composer/view/CssRulesView.js | 15 ++++++++--- test/specs/css_composer/view/CssRulesView.js | 26 ++++++++++++++------ 2 files changed, 31 insertions(+), 10 deletions(-) diff --git a/src/css_composer/view/CssRulesView.js b/src/css_composer/view/CssRulesView.js index 1a41cfe2e..c5ce97400 100644 --- a/src/css_composer/view/CssRulesView.js +++ b/src/css_composer/view/CssRulesView.js @@ -78,7 +78,10 @@ module.exports = require('backbone').View.extend({ }, getMediaWidth(mediaText) { - return mediaText && mediaText.replace('(max-width: ', '').replace(')', ''); + return ( + mediaText && + mediaText.replace(`(${this.config.mediaCondition}: `, '').replace(')', '') + ); }, render() { @@ -92,8 +95,14 @@ module.exports = require('backbone').View.extend({ this.em .get('DeviceManager') .getAll() - .forEach(function(model) { - const blockId = pfx + 'rules-' + model.get('widthMedia'); + .map(model => model.get('widthMedia')) + .sort( + (left, right) => + ((right && right.replace('px', '')) || Number.MAX_VALUE) - + ((left && left.replace('px', '')) || Number.MAX_VALUE) + ) + .forEach(widthMedia => { + const blockId = pfx + 'rules-' + widthMedia; $(`
`).appendTo(frag); }); diff --git a/test/specs/css_composer/view/CssRulesView.js b/test/specs/css_composer/view/CssRulesView.js index f80178bc6..5feeb93eb 100644 --- a/test/specs/css_composer/view/CssRulesView.js +++ b/test/specs/css_composer/view/CssRulesView.js @@ -9,14 +9,19 @@ module.exports = { const prefix = 'rules-'; const devices = [ { - name: 'Desktop', - width: '', - widthMedia: '' + name: 'Mobile portrait', + width: '320px', + widthMedia: '480px' }, { name: 'Tablet', width: '768px', widthMedia: '992px' + }, + { + name: 'Desktop', + width: '', + widthMedia: '' } ]; @@ -48,8 +53,17 @@ module.exports = { expect(obj.$el.html()).toExist(); const foundStylesContainers = obj.$el.find('div'); expect(foundStylesContainers.length).toEqual(devices.length); + + const sortedDevicesWidthMedia = devices + .map(dvc => dvc.widthMedia) + .sort((left, right) => { + return ( + ((right && right.replace('px', '')) || Number.MAX_VALUE) - + ((left && left.replace('px', '')) || Number.MAX_VALUE) + ); + }); foundStylesContainers.each(function($styleC, idx) { - expect($styleC.id).toEqual(prefix + devices[idx].widthMedia); + expect($styleC.id).toEqual(prefix + sortedDevicesWidthMedia[idx]); }); }); @@ -61,9 +75,7 @@ module.exports = { it('Render new rule', () => { obj.collection.add({}); - expect( - obj.$el.find(`#${prefix}${devices[0].widthMedia}`).html() - ).toExist(); + expect(obj.$el.find(`#${prefix}`).html()).toExist(); }); }); } From 4d72da01c10f8785c32b8e21236c86ac9e2376b4 Mon Sep 17 00:00:00 2001 From: Val Rudi Date: Fri, 6 Apr 2018 19:40:42 +0300 Subject: [PATCH 5/6] Fixed tests - replaced getElementById with querySelector to avoid "getElementById is not a function" error --- src/css_composer/view/CssRulesView.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/css_composer/view/CssRulesView.js b/src/css_composer/view/CssRulesView.js index c5ce97400..a09e41953 100644 --- a/src/css_composer/view/CssRulesView.js +++ b/src/css_composer/view/CssRulesView.js @@ -63,13 +63,13 @@ module.exports = require('backbone').View.extend({ } const mediaWidth = this.getMediaWidth(model.get('mediaText')); - const styleBlockId = `${this.pfx}rules-${mediaWidth}`; + const styleBlockId = `#${this.pfx}rules-${mediaWidth}`; if (rendered) { if (fragment) { - fragment.getElementById(styleBlockId).appendChild(rendered); + fragment.querySelector(styleBlockId).appendChild(rendered); } else { - let $stylesContainer = this.$el.find(`#${styleBlockId}`); + let $stylesContainer = this.$el.find(styleBlockId); $stylesContainer.append(rendered); } } From bb952eaacee0f60482b9272e3f363c9cddfc5d41 Mon Sep 17 00:00:00 2001 From: Val Rudi Date: Sun, 8 Apr 2018 23:44:56 +0300 Subject: [PATCH 6/6] Get mediaCondition from Editor model config. Fixed tests - add storable to Editor model, proper CssComposer init --- src/css_composer/view/CssRulesView.js | 4 +++- src/editor/model/Editor.js | 1 + test/specs/code_manager/model/CodeModels.js | 5 ++++- 3 files changed, 8 insertions(+), 2 deletions(-) diff --git a/src/css_composer/view/CssRulesView.js b/src/css_composer/view/CssRulesView.js index a09e41953..42297d6d1 100644 --- a/src/css_composer/view/CssRulesView.js +++ b/src/css_composer/view/CssRulesView.js @@ -80,7 +80,9 @@ module.exports = require('backbone').View.extend({ getMediaWidth(mediaText) { return ( mediaText && - mediaText.replace(`(${this.config.mediaCondition}: `, '').replace(')', '') + mediaText + .replace(`(${this.em.getConfig('mediaCondition')}: `, '') + .replace(')', '') ); }, diff --git a/src/editor/model/Editor.js b/src/editor/model/Editor.js index 9032fa049..9cdfa75d8 100644 --- a/src/editor/model/Editor.js +++ b/src/editor/model/Editor.js @@ -52,6 +52,7 @@ module.exports = Backbone.Model.extend({ this.set('Config', c); this.set('modules', []); this.set('toLoad', []); + this.set('storables', []); if (c.el && c.fromElement) this.config.components = c.el.innerHTML; diff --git a/test/specs/code_manager/model/CodeModels.js b/test/specs/code_manager/model/CodeModels.js index d625a539d..8ad18e2c1 100644 --- a/test/specs/code_manager/model/CodeModels.js +++ b/test/specs/code_manager/model/CodeModels.js @@ -71,9 +71,12 @@ module.exports = { }); describe('CssGenerator', () => { - var newCssComp = () => new CssComposer().init(); + let newCssComp; + beforeEach(() => { em = new Editor({}); + newCssComp = () => new CssComposer().init({ em }); + cc = em.get('CssComposer'); obj = new CssGenerator(); dcomp = new DomComponents();