Add timeline and CatStyles stubs

classes/CatStyles.js

@@ -0,0 +1,87 @@
+function CatStyle(cssRules) {
+  this.name       = cssRules.name;
+  this.cssRules   = cssRules;
+  this.rules      = {};
+}
+CatStyle.prototype.remove = function() {
+  for (let i = 0; i < this.cssRules.parentStyleSheet.rules.length; i++) {
+    let cssRules = this.cssRules.parentStyleSheet.rules[i];
+    if (cssRules === this.cssRules) {
+      this.cssRules.parentStyleSheet.deleteRule(i);
+      break;
+    }
+  }
+}
+CatStyle.prototype.setRule = function(key, values) {
+}
+CatStyle.prototype.setCatKeyframe = function(key, values) {
+  var rule = this.stylesheet.findRule(key);
+  // Create the rule if it doesn't exist
+  if (!rule) {
+    this.stylesheet.appendRule(key + ' { }');
+    rule = this.stylesheet.findRule(key);
+  }
+  // Set the style for the stylesheet
+  for (var value in values) {
+    rule.style[value] = values[value];
+  }
+}
+CatStyle.prototype.setKeyframe = function(key, values) {
+  var rule = this.stylesheet.findRule(key);
+  // Create the rule if it doesn't exist
+  if (!rule) {
+    this.stylesheet.appendRule(key + ' { }');
+    rule = this.stylesheet.findRule(key);
+  }
+  // Set the style for the stylesheet
+  for (var value in values) {
+    rule.style[value] = values[value];
+  }
+}
+CatStyle.prototype.unsetKeyframe = function(key, properties) {
+  let rule = this.stylesheet.findRule(key);
+  if (!rule) return false;
+  // Clear properties
+  for (let pi = 0; pi < properties.length; pi++) {
+    let property = properties[pi];
+    rule.style[property] = '';
+    for (let i = rule.style.length; i > 0; i--) {
+      if (rule.style[i] === property) {
+        rule.style.splice(i, 1);
+      }
+    }
+  }
+  // Delete the keyframe if it is empty.
+  if (rule.style.length === 0) {
+    this.deleteKeyframe(key);
+  }
+}
+CatStyle.prototype.getKeyframe = function(key) {
+  let rule = this.stylesheet.findRule(key);
+  let ret = {};
+  if (rule) {
+    for (let i = 0; i < rule.style.length; i++) {
+      ret[rule.style[i]] = rule.style[rule.style[i]];
+    }
+  }
+  return ret;
+}
+CatStyle.prototype.getKeyframes = function() {
+  let frames = {};
+  for (let i = 0; i < this.stylesheet.cssRules.length; i++) {
+    let cssRule = this.stylesheet.cssRules[i];
+    if (cssRule.type !== 8) continue;
+    frames[cssRule.keyText] = this.getKeyframe(cssRule.keyText);
+  }
+  return frames;
+}
+CatStyle.prototype.deleteKeyframe = function(key) {
+  this.stylesheet.deleteRule(key);
+}
+CatStyle.prototype.deleteCatKeyframe = function(key) {
+  if (!this.keyframes[key]) return false;
+  delete this.keyframes[key];
+  this.stylesheet.deleteRule(key);
+}
+
+module.exports = CatStyle;

modules/timeline.js

@@ -0,0 +1,29 @@
+const {remote}                      = require('electron');
+const {dialog,Menu,MenuItem}        = remote;
+
+let timeline = null;
+let controls = null;
+
+module.exports = function(Cat) {
+  return {
+    init: function(dom) {
+      timeline = document.querySelector('cat-timeline');
+      controls = document.querySelector('#timeline-controls');
+    },
+    on: {
+      'project-closed': project => {
+        timeline.clearKeyframes();
+      },
+      'project-focused': project => {
+        // clear keyframes
+        // NOTE: should multiple animations be selectable...?
+        // if project.selectedElement
+          // if selectedElement has animation
+            // generate keyframes
+      },
+      'project-loaded': project => {
+        //
+      }
+    }
+  }
+};