aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js93
-rw-r--r--user-document-templates/montage-application-cloud/main.reel/main.js9
2 files changed, 91 insertions, 11 deletions
diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
index 9b5b755c..ec092604 100644
--- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
+++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
@@ -16,6 +16,24 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
16 value: null 16 value: null
17 }, 17 },
18 18
19 _testButtonJson: {
20 value: {
21 "component": "button",
22
23 "module": "montage/ui/button.reel",
24
25 "name": "Button",
26
27 "properties": [
28 {
29 "name": "label",
30 "type": "string",
31 "default": "Button"
32 }
33 ]
34 }
35 },
36
19 didCreate: { 37 didCreate: {
20 value: function() { 38 value: function() {
21 this._loadComponents(); 39 this._loadComponents();
@@ -24,7 +42,7 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
24 42
25 _loadComponents: { 43 _loadComponents: {
26 value: function() { 44 value: function() {
27 this.photos = [ 45 this.components = [
28 {component: "Button", data: "montage/ui/button.reel/button.json"} 46 {component: "Button", data: "montage/ui/button.reel/button.json"}
29 ]; 47 ];
30 } 48 }
@@ -54,14 +72,75 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
54 } 72 }
55 }, 73 },
56 74
75 _stash: {
76 value: {}
77 },
78
57 handleExecuteAddComponent: { 79 handleExecuteAddComponent: {
58 value: function(evt) { 80 value: function(evt) {
59 this.addComponentToStage(evt.detail.component, evt.detail.dropX, evt.detail.dropY) 81 //var component = evt.detail.component;
82 // Get the data from the event detail component
83 var component = this._testButtonJson;
84 this._stash.dropx = evt.detail.dropX;
85 this._stash.dropy = evt.detail.dropY;
86 this.addComponentToStage(component);// evt.detail.dropX, evt.detail.dropY);
87 }
88 },
89
90 /**
91 * Send a request to add a component to the user document and waits for a callback to continue
92 */
93 addComponentToStage: {
94 value: function(component) {
95 var that = this;
96 var element = this.makeComponent(component.component);
97 this.application.ninja.currentDocument._window.addComponent(element, {type: "Button", path: component.module, name: "Button"}, function(instance, element) {
98
99 var styles = {
100 'position': 'absolute',
101 'top' : that._stash.dropx + 'px',
102 'left' : that._stash.dropy + 'px',
103 '-webkit-transform-style' : 'preserve-3d',
104 '-webkit-transform' : 'perspective(1400) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
105 };
106
107 that.application.ninja.currentDocument.setComponentInstance(instance, element);
108
109 NJevent("elementAdding", {"el": element, "data":styles});
110 });
111 }
112 },
113
114 callback: {
115 value: function(instance, element) {
116 console.log(instance);
117
118 var styles = {
119 'position': 'absolute',
120 'top' : this._stash.dropx + 'px',
121 'left' : this._stash.dropy + 'px',
122 '-webkit-transform-style' : 'preserve-3d',
123 '-webkit-transform' : 'perspective(1400) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
124 };
125
126 this.application.ninja.currentDocument.setComponentInstance(instance, element);
127
128 NJevent("elementAdding", {"el": element, "data":styles});
129
60 } 130 }
61 }, 131 },
62 132
63 addComponentToStage:{ 133 makeComponent: {
64 value:function(componentType, dropX, dropY){ 134 value: function(name) {
135 var el;
136 el = NJUtils.makeNJElement(name, "Button", "component");
137 el.setAttribute("type", "button");
138 return el;
139 }
140 },
141
142 ___addComponentToStage:{
143 value:function(component, dropX, dropY){
65// var compW = 100, 144// var compW = 100,
66// compH = 100, 145// compH = 100,
67// 146//
@@ -155,11 +234,5 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
155 234
156 235
157 } 236 }
158 },
159
160 callback: {
161 value: function() {
162 console.log("the callback");
163 }
164 } 237 }
165}); \ No newline at end of file 238}); \ No newline at end of file
diff --git a/user-document-templates/montage-application-cloud/main.reel/main.js b/user-document-templates/montage-application-cloud/main.reel/main.js
index 036d6c24..90262073 100644
--- a/user-document-templates/montage-application-cloud/main.reel/main.js
+++ b/user-document-templates/montage-application-cloud/main.reel/main.js
@@ -45,7 +45,14 @@ exports.Main = Montage.create(Component, {
45 45
46 var button = require.async(stro) 46 var button = require.async(stro)
47 .then(function (button) { 47 .then(function (button) {
48 callback(); 48 var btIns = button["Button"];
49
50 btIns.element = containerElement;
51 btIns.deserializedFromTemplate();
52
53 btIns.needsDraw = true;
54 btIns.label = "Button";
55 callback(btIns, containerElement);
49 }) 56 })
50 .end(); 57 .end();
51 58