3 files changed, 43 insertions, 64 deletions

diff --git a/js/panels/presets/style-presets.reel/style-presets.js b/js/panels/presets/style-presets.reel/style-presets.js
index 0c44e20c..7871683e 100644
--- a/js/panels/presets/style-presets.reel/style-presets.js
+++ b/js/panels/presets/style-presets.reel/style-presets.js
@@ -15,25 +15,17 @@ exports.StylesLibrary = Montage.create(Component, {
     presetData : {
         value : null
     },
-    contentPanel : {
-        value: "presets" // get from local storage
-    },
     templateDidLoad : {
         value: function() {
             this.presetData = DefaultPresets;
         }
     },
-    treeList : {
-        value : null
-    },
-    didDraw: {
-        value : function() {
-        }
-    },
     handleNodeActivation: {
         value: function(presetData) {
             var selection = this.application.ninja.selectedElements,
-                self = this;
+                stylesController = this.application.ninja.stylesController,
+                selectorBase = presetData.selectorBase,
+                self = this, className;
 
             if(!selection || !selection.length || selection.length === 0) {
                 return false;
@@ -46,19 +38,27 @@ exports.StylesLibrary = Montage.create(Component, {
                     .changeSelector(self.application.ninja.currentDocument.documentRoot, null, selector);
             }
 
+            selectorBase = stylesController.generateClassName(selectorBase);
+
+            presetData.rules.forEach(function(rule) {
+                stylesController.addRule('.'+selectorBase + rule.selectorSuffix, rule.styles);
+            }, this);
+
             selection.forEach(function(el) {
                 el._element.style.webkitTransition = "all 450ms linear";
 
                 el._element.addEventListener("webkitTransitionEnd", function(e) {
-                    console.log("calling transition end");
+                    el._element.style.webkitTransition = '';
                     setStopRuleSelector("*");
-                });
-
+                }, true);
                 setStopRuleSelector("transitionStopRule");
+                el._element.classList.add(selectorBase);
+
+                //// Keep track of elements with presets and don't add duplicates
 
-                this.application.ninja.stylesController.setElementStyles(el._element, presetData.styles);
             }, this);
 
+
         }
     },
     handleDragEnd : {
diff --git a/js/panels/presets/transitions-presets.reel/transitions-presets.html b/js/panels/presets/transitions-presets.reel/transitions-presets.html
index e3bf0aba..c22ed351 100644
--- a/js/panels/presets/transitions-presets.reel/transitions-presets.html
+++ b/js/panels/presets/transitions-presets.reel/transitions-presets.html
@@ -22,7 +22,6 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                 "module": "js/controllers/tree-controller",
                 "name": "TreeController",
                 "properties" : {
-                    "rootKey" : "data",
                     "branchKey" : "children",
                     "labelKey" : "text",
                     "delegate": {"@": "owner" }
@@ -30,7 +29,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                 "bindings": {
                     "content": {
                         "boundObject": {"@": "owner"},
-                        "boundObjectPropertyPath": "data2"
+                        "boundObjectPropertyPath": "presetData"
                     }
                 }
             },
@@ -40,7 +39,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                 "properties" : {
                     "element" : {"#": "libraryContainer"},
                     "branchComponent" : {"@": "branch" },
-                    "contentController": {"@": "presetsController"}
+                    "contentController": {"@": "presetsController"},
+                    "showRoot": false
                 }
             },
             "branch" : {
diff --git a/js/panels/presets/transitions-presets.reel/transitions-presets.js b/js/panels/presets/transitions-presets.reel/transitions-presets.js
index bc91b3ad..f7d84085 100644
--- a/js/panels/presets/transitions-presets.reel/transitions-presets.js
+++ b/js/panels/presets/transitions-presets.reel/transitions-presets.js
@@ -5,63 +5,42 @@
  </copyright> */
 
 var Montage = require("montage/core/core").Montage,
-    Component = require("montage/ui/component").Component;
+    Component = require("montage/ui/component").Component,
+    DefaultPresets = require("js/panels/presets/default-transition-presets").transitionPresets;
 
 exports.TransitionsLibrary = Montage.create(Component, {
     hasTemplate: {
         value: true
     },
-    contentPanel : {
-        value: "presets" // get from local storage
+    presetData : {
+        value: null
     },
-    templateDidLoad : {
+    deserializedFromTemplate : {
         value: function() {
-            console.log('deserialized');
+            this.presetData = DefaultPresets;
         }
     },
-    treeList : {
-        value : null
-    },
-    data2: {
-        value: {
-            "meta": "Blah",
-            "status": "OK",
-            "text" : "Root",
-            "data" : {
-                "date": "1.1.01",
-                "text": "Transitions",
-                "children": [{
-                    "date": "3.3.01",
-                    "text": "Kid 1"
-                },
-                    {
-                        "date": "3.3.01",
-                        "text": "Kid 2",
-                        "children": [{
-                            "date": "3.4.01",
-                            "text": "Grand Kid 1",
-                            "children": [{
-                                "date": "4.4.01",
-                                "text": "Great Grand Kid 1"
-                            }]
-                        }]
+    handleNodeActivation: {
+        value: function(presetData) {
+            var selection = this.application.ninja.selectedElements,
+                stylesController = this.application.ninja.stylesController,
+                selectorBase = presetData.selectorBase,
+                self = this;
 
-                    },{
-                        "date": "5.5.01",
-                        "text": "Kid 3"
-                    }]
+            if(!selection || !selection.length || selection.length === 0) {
+                return false;
             }
-        }
-    },
-    didDraw: {
-        value : function() {
-            console.log('Presets Panel prepare for draw.');
-//            this.treeList.items.push({
-//                label : "Box Style",
-//                type : 'leaf'
-//            });
-        }
-    }
 
+            selectorBase = stylesController.generateClassName(selectorBase);
 
+            presetData.rules.forEach(function(rule) {
+                this.application.ninja.stylesController.addRule('.' + selectorBase + rule.selectorSuffix, rule.styles);
+            }, this);
+
+            selection.forEach(function(el) {
+                el._element.classList.add(selectorBase);
+            }, this);
+