From f90a968281866e66659c88fb9e13c5a4c36a571a Mon Sep 17 00:00:00 2001
From: Artur Arseniev <artur.catch@hotmail.it>
Date: Thu, 25 Jan 2018 00:00:29 +0100
Subject: [PATCH] Create CssGroupRuleView, used for keyframes rules

---
 src/css_composer/view/CssGroupRuleView.js     | 12 +++++
 src/css_composer/view/CssRulesView.js         | 45 ++++++++++++++-----
 .../view/ComponentTextNodeView.js             |  4 +-
 3 files changed, 48 insertions(+), 13 deletions(-)
 create mode 100644 src/css_composer/view/CssGroupRuleView.js

diff --git a/src/css_composer/view/CssGroupRuleView.js b/src/css_composer/view/CssGroupRuleView.js
new file mode 100644
index 000000000..6450bde4c
--- /dev/null
+++ b/src/css_composer/view/CssGroupRuleView.js
@@ -0,0 +1,12 @@
+module.exports = require('./CssRuleView').extend({
+  _createElement: function(tagName) {
+    return document.createTextNode('');
+  },
+
+  render() {
+    const model = this.model;
+    const important = model.get('important');
+    this.el.textContent = model.getDeclaration({ important });
+    return this;
+  }
+});
diff --git a/src/css_composer/view/CssRulesView.js b/src/css_composer/view/CssRulesView.js
index 0c2e132f7..03b38d74c 100644
--- a/src/css_composer/view/CssRulesView.js
+++ b/src/css_composer/view/CssRulesView.js
@@ -1,9 +1,10 @@
-var Backbone = require('backbone');
-var CssRuleView = require('./CssRuleView');
+const CssRuleView = require('./CssRuleView');
+const CssGroupRuleView = require('./CssGroupRuleView');
 
-module.exports = Backbone.View.extend({
+module.exports = require('backbone').View.extend({
   initialize(o) {
     const config = o.config || {};
+    this.atRules = {};
     this.config = config;
     this.em = config.em;
     this.pfx = config.stylePrefix || '';
@@ -32,20 +33,44 @@ module.exports = Backbone.View.extend({
   addToCollection(model, fragmentEl) {
     var fragment = fragmentEl || null;
     var viewObject = CssRuleView;
+    var config = this.config;
+    let rendered, view;
+    const opts = { model, config };
 
-    var view = new viewObject({
-      model,
-      config: this.config
-    });
-    var rendered = view.render().el;
+    // 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') {
+      const atRule = model.getAtRule();
+      let atRuleEl = this.atRules[atRule];
 
-    if (fragment) fragment.appendChild(rendered);
-    else this.$el.append(rendered);
+      if (!atRuleEl) {
+        const styleEl = document.createElement('style');
+        atRuleEl = document.createTextNode('');
+        styleEl.appendChild(document.createTextNode(`${atRule}{`));
+        styleEl.appendChild(atRuleEl);
+        styleEl.appendChild(document.createTextNode(`}`));
+        this.atRules[atRule] = atRuleEl;
+        rendered = styleEl;
+      }
+
+      view = new CssGroupRuleView(opts);
+      atRuleEl.appendData(view.render().el.textContent);
+    } else {
+      view = new CssRuleView(opts);
+      rendered = view.render().el;
+    }
+
+    if (rendered) {
+      if (fragment) fragment.appendChild(rendered);
+      else this.$el.append(rendered);
+    }
 
     return rendered;
   },
 
   render() {
+    this.atRules = {};
     const $el = this.$el;
     const frag = document.createDocumentFragment();
     $el.empty();
diff --git a/src/dom_components/view/ComponentTextNodeView.js b/src/dom_components/view/ComponentTextNodeView.js
index 5510a2d8c..fb190d371 100644
--- a/src/dom_components/view/ComponentTextNodeView.js
+++ b/src/dom_components/view/ComponentTextNodeView.js
@@ -1,3 +1 @@
-var Backbone = require('backbone');
-
-module.exports = Backbone.View.extend({});
+module.exports = require('backbone').View.extend({});