aboutsummaryrefslogtreecommitdiff
path: root/js/panels/objects
diff options
context:
space:
mode:
authorArmen Kesablyan2012-06-13 11:37:11 -0700
committerArmen Kesablyan2012-06-13 11:37:11 -0700
commitd2e2a39feeba51e976d139eddf6f1cf331457f4f (patch)
tree7616fb59b5210d0d0128f1fd5dde34a43eb13f11 /js/panels/objects
parentcfa2d42f6ca65eb3ce1bea92db5f4af87dd68bb5 (diff)
parentd57ab6509805ba4e97d6c74be913a2c1b324af3a (diff)
downloadninja-d2e2a39feeba51e976d139eddf6f1cf331457f4f.tar.gz
Merge pull request #12 from ericguzman/binding
Binding Panel update
Diffstat (limited to 'js/panels/objects')
-rw-r--r--js/panels/objects/object.reel/object.css44
-rw-r--r--js/panels/objects/object.reel/object.js30
-rw-r--r--js/panels/objects/objects-panel.reel/objects-panel.css17
-rw-r--r--js/panels/objects/objects-panel.reel/objects-panel.html18
4 files changed, 71 insertions, 38 deletions
diff --git a/js/panels/objects/object.reel/object.css b/js/panels/objects/object.reel/object.css
index 6ca759ba..2612c392 100644
--- a/js/panels/objects/object.reel/object.css
+++ b/js/panels/objects/object.reel/object.css
@@ -18,11 +18,43 @@
18 margin: 0; 18 margin: 0;
19 padding: 0; 19 padding: 0;
20} 20}
21.objects-list list-item { 21
22 width: 200px; 22.objects-list .list-item {
23 height: 200px; 23 list-style-type: none;
24 float: left; 24 float: left;
25 margin: 0 18px 18px; 25 width: 80px;
26 border-radius: 20px; 26 overflow: hidden;
27 box-shadow: inset 0 0 4px rgba(0,0,0,0.5); 27 text-overflow: ellipsis;
28}
29
30/* ------------------
31 Icon Styles
32 ------------------- */
33
34.object-icon {
35 background-color: rgba(0, 0, 0, 0.4);
36 /* red owner/crate */
37 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAACoZJREFUeNqsV2lsHOUZfufYmZ09vF6vE3t9YSc%2ByEWC7YAhbuM0B04TBDVQEGrVVmqpKrUS%2FVOhohQKglYtUlWEkJBKKaWiqG4EciHFMU5iJ8RJnDhOiG878b3rY9d7H7Nz9PkWEgVIaaj4pLFmx%2FN97%2FM%2B7%2FMew9FNrkuXLlE6nSZJkigWi0mZTKbcNM0duC7g2UWn05nYtGkTfdnF%2Fa8Xzp07R3V1ddTf3y8lEonNePSwxWLZL8tyhdVqlTRN0wFoBoBadV3%2FW15e3qWNGzca%2FzeAy5cv05o1a7L3MGpVVfUujuO%2BI4riHhgstNlsImMBnmffYfdsJZNJikQiKkAOAczreP8tvOsDmJsDMDw8zKgleMenUqmd8Oandru9EUZzFUXhBUEgHEzxeJxC4XBSDIf1glTKEXe7TaWsTIUxGXsJewmg2VlJAOozDOP53Nzc9xGeG7LCHT58mHlRAEP7YORR3N%2BNS7HZ7MSMJpOJbOwjoXAyfapnpOTI0c7yo0eXp3fs%2BKGluHhtLJXWi%2Fv7nvU9%2BaQ1Vln17TxPXrliVXjT%2FNgeQBBYiYKh9xGuV8BcD2wlGhoaPgbQ1tbGA%2FGRqqqq7UBKPC9kvUilUxSPxZPxySsD7rffuVDd%2Fn7cHovp49%2FY%2FU3B41kdzWRExNsZzagkx2ILVkkSuODKIbO%2B7uTSAy37wMYOl8vl4MAxC5eqZigcDhlgZh5MvgdAr0Sj0fNcZ2cnzczMHKqurt6LDQQ1E5DS4uJiALH%2FSf22bbmLW2ofUSurbxNCQd%2BUy7VxtdPBZXSDVn19Oy0d7yYLQHNkUGA5EL5FtkYRxxCvZV4MPPUrN5x5TFGsFQgnj7Bmw7iyskJ9fX2DS0tLt4ulpaVMeCN4cS%2BjHHQRXqbCwkIPmHlz%2BN13jyy8%2FkZ9gVXO8WlOj1e0aKmMZklnNCPe8yEfRXhyRIsuioKQES22iMPuWlGUEj43b6tDsAnpdLgP4SiDKJm2siFhWsN9pqioyBCnp6cJQulDnE23O4%2Bbnp7S2ctut5vDJdpqavYUPPEL8rcfpmXfouENBS3Mk0gqZVolC%2BmgN20agoUTab6ySpAb7jZTeW5TlqXvWfiM5HbnZjNkdnY2G1oRQmW%2FccZlOKnxu3btYlq4AlSGqqaJF8Tx%2Bfn556empqKTk5O0sLBAHDaVP9BCVQ%2FezwVQbGYQIqdNEQqbmsglS5QsLSP%2FvfeRUVurO26touKi1Xyuyy5FIuGs4YmJCRobG8sg5umC1QXZMCDMH%2B3bt49EZh0pdAXoVN0wFF3Tch959dXfR5aX50489uP70zXVu7GRczgc5HK7%2Bdz77iVb4zZSURnHBwYovWcv5axfR4pVpjxds5CpUSAQycaZpezy8rKWCgaPb%2BnoeDPz4IMHjJqaMjw3AWCQ2c4C8Hq9S%2FA2oqZVxSTTGTOMcp345pqk2mjOLdAEGelEsVdmscvJySGEhiw7mihaX0cK5GdT5Kxwg8EArmBWRwgjrV7tpbWDw2Mbnv11v2gY69%2FascOZixoBADr0NnkNwJYtW9TR0VF%2FKLRSwPO8FCouKU4sB23Dp3tsLJtzdVNN798vRku8POLHMe8QPyopKSGwQwgX8zRLrSiCBE5UeY0TV1pb%2Bd6Z2TLUQj4tSaJZ6FUikSgTYQaOTDPbPPuTn5%2FPhDjCxKXrhhAW%2BMrKRf%2BEMxSat6fSEbsrx6l8eELQRyfMSDSBcptkqctSic6ePZu9Z16vhCJGntNNeZcnJfON19NXpqdTOYnYsa5%2FH35cVRRJk2WIfopCoVAYGRC4BuCTNchUCg1waat1rT2RTGzcUnt%2B%2FSOPZgxDNxfgtXzqJL92elZyGTxpqAPhcDibUqJFpvUVt1LRrI%2B7%2BPJLNNN1hKotltj3N2%2Be%2Fa5v%2FqOdO5so4PEgAUSBZQDqy0JFRYX6KQCgvh85aoIJ0vM8xUmrbD05NnLPePshD4yrbjKTFp6n%2BPmzFD7dky3PLO6Mdub9RO9pWj7XyxmCoOfo%2BpxfFPN7BgYq2woKW1pbWynmzHGrqsbFYnEGYHTz5s30KQCoz5dwkM4Oncz3eCpstheDydRyGgbKa26Vqx5%2BVDEguBV4EPL5yAADrOmwwsLSdWpxkeIQXpluCqvgwChK%2BclY1LwiCOcfeughcdZbqDCRQmdMoINX7YpXb%2BDREoynNC3jiLpc1a82NPyzdP0Gt%2FOOu2ju3Ta6cLCVgjjULVnJHoubYaSmmklnvQd7ZiwW5mLQUBKAI2qS1tgUKk0l47%2F0%2BU7h%2BI0Sz5d58j2oK36TOXuN%2Bas3Tz%2F9NGtKUUYp1F204cCBDTOjY7IPvSKCWIdjUV1CVyn2esmCJqZHY9dmArvdyW3w5FOpmjbjgmCkdI08NgfnyvM4nikrfeGVXbvenCwpWeVELUGIdQwzw58DgIrnhjqjLBNYTzgxNETnJMnsHxmijKaZu3%2F2OF9ZUMj5%2FD4aDiwhl2PssCyIRDJOgbkZdpjRqNi5Wxw5NIp60IZ4W2RZaNi7d51j%2B%2FZ8NB%2B2J4PxbuVzALA0xPICVGqyHG9sbCRhw7rEMxf7h94jbvHiX1%2FjfOEQiZFo2GmaGcEiZht%2BFoShp6LRSDIpCumgmuTOoK%2F8bm62fywVD6Lgm0PFxVnBsqzB%2BYmDBw%2FarxoVrgeAYjQL79fg0DJUR66pqUnCJCMf6u66ELcqq6RQWF93Z4OjsLhUiOD%2FKqhmqWtz5Ijr9%2By3aF3H9AlsXrgysbJ7ZGj479Fo7%2B27d1fV19fLLP3QY8jn802hdvwD9oK4zOsBZEBnAI1jENVNxsE1EIuIdJExlJZ%2BcPr0wFG%2F74PKeHxLJBzkUjVVpq5rHDuYrcnuY7Tin59XPuwe9AcCI1eam7WnnnvuW5h8HMxwT0%2BPOTIyMn%2FixInfsFENW%2BKfZYAtFSCW0cFG%2FX5%2FDL9vgybk6qoqfs%2BePV6wJ%2Fy598zCuKzEy0pLFEHgLaweQD%2FxaEd7omBiorfTZuu67YknmnY2N38NPUO6ePEiHTt2TIPho7h%2BGwgEDuNcVgXNGwHIMoFrGU1lDJvHMSHVZTKak80HtXW1hZVrK6V%2Ftb3TWVVVWYFh1cYYQBsfSHZ2dkw038P%2F4MCBH23dutWbQM%2FoOXmSuru7%2Fe3t7S%2BPj4%2B%2FDB30XKX%2BRhq4fjGBRbBhFhsvY75bCyYKPJ58DmO2cscdd1bDawEFRWIaAAvxoua9Jfe3tGxHk7FMXJ6g3jNnDMT6o46OjucR0rdx3giuxGcNCV8wsjOUcdSGeYhzEKEpQMzLoQu%2BoqIcmCQJdGanm9raWvf2pqZVmIK4k%2FD63LmziePHj7eeOnXqBThxDOf4mMhvZES4iY%2BXBITtx9w4AAXrALAJ1tF1RQp%2BAqC4uIRjxaqrq4vOnz8%2FjUH3DxDzawDdj%2F3h6yn%2F7BJv8gsqxubGoaGhIEqvP5NRf15Y6HVlaUIhunChn%2FUEDe2ZCe2PeMxUvvTfvP6yDFxdOvMGaxIZMocZYhMEmsM0MDc3F4D3f8Kn3Et4p%2FcToRlfycfpDRarnquQFdtaWloex3SkHzly5C8o4914PsdS%2BSv9Ov6C5YAeCljzQoawvI7crNfXr%2F8IMADlMDTD%2BOWcSAAAAABJRU5ErkJggg%3D%3D);
38 background-position: center center;
39 background-repeat: no-repeat;
40 border: 1px solid rgba(0, 0, 0, 0);
41 border-radius: 5px;
42 height: 50px;
43 margin: 0 15px 5px;
44 width: 50px;
45}
46.object-label {
47 color: #fff;
48 display: block;
49 text-align: center;
50}
51
52.object-icon:hover {
53 border: 1px solid rgba(0, 0, 0, 0.4);
54 box-shadow: 0 0 1px 1px #474747;
55}
56
57.object-icon-component .object-icon {
58 /* gray gear */
59 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAACE5JREFUWIWdV2tsHNUV%2Fu6989iHd9frtVeJsUNsEW8AOYSkTUgs9SVKoahSUdpKSC0toBapSEhBVuFPsOxfFInSP6hCgoigVhS1IFVtgKBKaaIoxBFOChF1bceubRI7btbe3cyOZ%2BbOffRHPKP1I63cK11p5%2BzMOd853znnnkuwyTUwMIBSqdTKGOswTTOjtUYYho7jOFcmJibKL7300qb0GZsFQClNbN%2B%2B%2FWhXV9f9ACwA0FrzycnJv83NzR0C4G1K32YBSCltAD25XC6Zy%2BVYLpdjzc3NScZYDyHEbny3v7%2F%2Ff%2BrbMAJDQ0NwXbdg2%2FY%2Bx3E%2BfOWVV3Sk0DAMyzTNNKWrsRuGkWaMWdHz4cOHIaXE4ODgg57njbz44ovXN7JF1gqef%2F55FIvFXXv37n1z586du0%2BePPnG2NjYL0zTNLdu3frtbdu2%2FejOO%2B%2F8ajabZY3fOY4jR0dHT09PT%2F92YWHhuFIq2L179y%2F379%2F%2F04WFhc8uXrz44%2FHx8U%2BHhoZuDWBoaAjpdHrXgQMH3unp6dlJKYXv%2B3J0dHQ4k8nkOzs7S6lU6pa0aa3huq6am5sbD4Jgsaen5z7TNJlSCvPz8%2BPDw8M%2FePLJJz9t%2FGaVF%2Fv27Sv09fW9VyqVegm5iY0xRtvb2ztbWlraDMMgWmv8t20YBmlpaWltbW3dRgihSikIIZBIJAqmaR4sFovvnjlzZjmmrhFAc3PzlwuFwm4pJbTWYIyBEAKl1M1wrYDSWsP3fbiuC6010uk0EonEqkhorQEAUkoIIaCU0plMpjeVSt0H4M8bArh27dqJycnJ15uamp6wbZtFICilIISAc47FxUX4vg%2FDMJBMJgEA5XIZYRjCtm0UCgUYhhGDCMMQYRhq3%2Ff12NjYm%2FV6%2FfgtKRgeHsa99957xjTNrxQKhW2RnFKKer2OxcVFJJNJpNNp2LYNSikopbBtG8lkEoQQVKvVm54ZBqSU4JyDc04mJyeHx8bGfjI4OLjcaHNdGYZhaBFCClHYtdZYXl6G7%2FvIZDIxDWuX1hqUUqTTadTr9SgfIgBQSuXDMFxnb1VG9%2Ff3I5%2FPf6dYLPZIKaGUAuccN27cgGmaq4wppbSUUiuloJRalYi2bcNxHHiehyAIIIRAsVjc0dzc%2FNBaAOTIkSNobW21GWMJzrnZ2dn5h7vuuutrjDEwxuB5XpyQpmmCMaYrlUp9bGzsT6Ojoyds20Z3d%2FcDO3bs%2BG42m20CQKSU8H0fQoibPDMGwzAwPj5%2B%2BsqVK4csywoJIUG5XPaN5ubmwj333HM0m832SCnTpmm2R54opSClBKUUWmsIIXSlUqmPjIz8%2FPz5828fO3ZMAsBjjz32dq1W%2B3DPnj2%2FyeVyWSEEOOeQUsIwDFBKwRhDqVTq6%2B7uvsgYq7uue%2FnSpUuPG4SQ26SU9wshUoyx2HBjyTUCmpycfG9kZCQ2DgBvvfWWpJT%2BPpfL3d%2Fb2%2Ft4EAQR70gmkzCMmHpGKe0QQkAIsV0I0UE5502cc0tKiYj3yPO1AIQQmJ2dPXH06FGJNcs0TTU9Pf2%2B67ox71GFRL2k0Qbn3PQ8r8mI%2FhBCxM1jbXZHEVFKIQxDtVEVtLW1IQgC7XlezLtlWXElNAJoBEIB1IUQPBI0viCEAGMsjgqllNx%2B%2B%2B0PPPPMM%2BvOg0qlQjs6Or4F3OwBlmUhkUis87xBd0gIcQwAV8MwPOn7fg%2BltMm27aJlWQwAOOewbRtBEMRedXV1HaKUnujv7%2F9jtVpVvb29mJmZobt27Xpky5Yt34%2B8JoTAsiwEQRA7E4ahCoJgQSnlcs4vE0Kukueeew75fD6RuNnMza1bt77T3t7%2B9ah0UqkUHMeJAVBKNef8huu673LO39daa9M0H0qlUt9LpVI5rTWJ6Mxms1heXoYQAlJKffXq1TPz8%2FOHAIS%2B7weVSsVb19Zee%2B21x%2B%2B4447XLcuihmHANE0YhoF6vR5XRtR4ovKilMKyLERVxDmHZVloKEfNOdcTExM%2Fe%2Bqpp95otLeOy2q1erxer%2F8zSsDIG9M04XkeXNfF8vIywjCM261lWYgmJEIIMpkMLMuKk5cQQhzHuVyr1f6y1t6q3vzss8%2FCdd2gVquVs9ls3Mk8z4Nt20in03BdN87wyOsILACkUikwxhCGIUzTjI9y13XLrusGawHEp%2BHhw4ehlMLdd9%2F9q46OjkcAUEIIKKUwDAOMMdi2jZaWltiI1hqEEJimiWQyiWQyCa01onmCEBL%2Fbmpqarcsq6W7u%2Fv42bNn1wM4d%2B4cHn744W%2Fu37%2F%2F14wxFnkY7ZVzIA6rZVlIpVKwbRuMsXX13dg%2FVhoZaWtr27u0tHT%2Bo48%2BurxhDnDOL1Qqlb%2Bv8BZtvfYIjnLD9334vh%2F3%2FZWt19b%2BytxAFhcXL7mu%2B8mGFADA6dOnvYMHD36czWa%2FkUgkWimlGoCqVqsfCyGqlmW10oZ5vBHYSg5oKaWq1Wr%2FcBxn3LKs27TWRGtNHMeZmJqaerS%2Fv%2F9ftwQAAHv27Pm3lPJUOp0%2BkEqltszOzr7x%2BeefP1Eul4%2B5rntRKZVJJpNdjDHaCEAIoRYWFv46PT39wtTU1Auzs7O%2FY4zl8%2Fn8lyqVymdTU1OPzs%2FPf3bq1KlV9jYebwAMDg625vP5fTMzMx%2B8%2FPLL8SExMDDQ2tfXd7G9vb2j8f25ublrw8PDu44cORJfQJ5%2B%2BmlSKpUerNVqnzTKG9ct74YDAwNlAO%2BvlQdBEEopl9fmhZTSC4JANMpeffVVDeCDW9kA%2Fo%2B74eLiIvc8bzYMw0ApJbXWMgzDwPO8maWlJb5ZfZu%2BHS8tLXkXLlz44RdffHFbcmUu9zzPu379%2BtVyuexuVt9%2FAKVP%2BiORVHX0AAAAAElFTkSuQmCC);
28} \ No newline at end of file 60} \ No newline at end of file
diff --git a/js/panels/objects/object.reel/object.js b/js/panels/objects/object.reel/object.js
index 43abafad..1e33b7f7 100644
--- a/js/panels/objects/object.reel/object.js
+++ b/js/panels/objects/object.reel/object.js
@@ -13,6 +13,16 @@ var Montage = require("montage/core/core").Montage,
13 13
14exports.Object = Montage.create(Component, { 14exports.Object = Montage.create(Component, {
15 _needsPropertyInspection : { value: null }, 15 _needsPropertyInspection : { value: null },
16 type: { value: null },
17 getType : {
18 value: function() {
19 if(this._hasPrototype(this.sourceObject, 'Component')) {
20 return 'Component';
21 }
22
23 return null;
24 }
25 },
16 26
17 _sourceObject : { value: null }, 27 _sourceObject : { value: null },
18 sourceObject : { 28 sourceObject : {
@@ -22,8 +32,11 @@ exports.Object = Montage.create(Component, {
22 set: function(object) { 32 set: function(object) {
23 if(this._sourceObject === object) { return false; } 33 if(this._sourceObject === object) { return false; }
24 34
35 this._sourceObject = object;
36
25 if(object._montage_metadata) { 37 if(object._montage_metadata) {
26 this.montageMetaData = object._montage_metadata; 38 this.montageMetaData = object._montage_metadata;
39 this.type = this.getType();
27 } 40 }
28 41
29 this._needsPropertyInspection = this.needsDraw = true; 42 this._needsPropertyInspection = this.needsDraw = true;
@@ -70,8 +83,25 @@ exports.Object = Montage.create(Component, {
70 83
71 }, 84 },
72 85
86 _hasPrototype : {
87 value: function(object, prototypeName) {
88 var prototypes = this.application.ninja.objectsController.getPrototypes(object).map(function(proto) {
89 var metadata = proto._montage_metadata;
90 return (metadata) ? metadata.objectName : "Object";
91 });
92
93 return prototypes.indexOf(prototypeName) !== -1;
94 }
95 },
96
73 draw : { 97 draw : {
74 value: function() { 98 value: function() {
99 if(this.type) {
100 this.element.classList.add('object-icon-'+this.type.toLowerCase());
101 } else{
102 this.element.classList.add('object-icon-default');
103 }
104
75 105
76 } 106 }
77 } 107 }
diff --git a/js/panels/objects/objects-panel.reel/objects-panel.css b/js/panels/objects/objects-panel.reel/objects-panel.css
index 3fa3c479..3a83776e 100644
--- a/js/panels/objects/objects-panel.reel/objects-panel.css
+++ b/js/panels/objects/objects-panel.reel/objects-panel.css
@@ -18,20 +18,3 @@
18 margin: 10px 0 0 0; 18 margin: 10px 0 0 0;
19 padding: 0; 19 padding: 0;
20} 20}
21.objects-list .list-item {
22 list-style-type: none;
23 float: left;
24}
25.object-icon {
26 background-color: #fff;
27 border: 1px solid #353535;
28 border-radius: 5px;
29 height: 50px;
30 margin: 0 15px 5px;
31 width: 50px;
32}
33.object-label {
34 color: #fff;
35 display: block;
36 text-align: center;
37} \ No newline at end of file
diff --git a/js/panels/objects/objects-panel.reel/objects-panel.html b/js/panels/objects/objects-panel.reel/objects-panel.html
index d68a59c0..17f414e8 100644
--- a/js/panels/objects/objects-panel.reel/objects-panel.html
+++ b/js/panels/objects/objects-panel.reel/objects-panel.html
@@ -27,11 +27,7 @@
27 "arrayController": { 27 "arrayController": {
28 "prototype": "montage/ui/controller/array-controller", 28 "prototype": "montage/ui/controller/array-controller",
29 "bindings": { 29 "bindings": {
30 "content" : { 30 "content": {"<-": "@owner.objects"}
31 "boundObject": {"@": "owner"},
32 "boundObjectPropertyPath": "objects",
33 "oneway": true
34 }
35 } 31 }
36 }, 32 },
37 "objectComponent": { 33 "objectComponent": {
@@ -40,16 +36,8 @@
40 "element": {"#": "list-item"} 36 "element": {"#": "list-item"}
41 }, 37 },
42 "bindings": { 38 "bindings": {
43 "sourceObject" : { 39 "sourceObject" : {"<-": "@repetition.objectAtCurrentIteration"},
44 "boundObject": {"@": "repetition"}, 40 "identifier" : {"<-": "@repetition.objectAtCurrentIteration.identifier"}
45 "boundObjectPropertyPath": "objectAtCurrentIteration",
46 "oneway": true
47 },
48 "identifier" : {
49 "boundObject": {"@": "repetition"},
50 "boundObjectPropertyPath": "objectAtCurrentIteration.identifier",
51 "oneway": true
52 }
53 } 41 }
54 } 42 }
55 43