aboutsummaryrefslogtreecommitdiff
path: root/js/panels/objects/object.reel
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/objects/object.reel')
-rw-r--r--js/panels/objects/object.reel/object.css59
-rw-r--r--js/panels/objects/object.reel/object.html44
-rw-r--r--js/panels/objects/object.reel/object.js104
3 files changed, 207 insertions, 0 deletions
diff --git a/js/panels/objects/object.reel/object.css b/js/panels/objects/object.reel/object.css
new file mode 100644
index 00000000..79b7647c
--- /dev/null
+++ b/js/panels/objects/object.reel/object.css
@@ -0,0 +1,59 @@
1/* <copyright>
2 This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
3 No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
4 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
5 </copyright> */
6
7/*
8
9<section data-montage-id="objects-panel" class="objects-panel">
10 <ul data-montage-id="list" class="objects-list">
11 <li data-montage-id="list-item" class="list-item"></li>
12 </ul>
13</section>
14
15*/
16
17.objects-list {
18 margin: 0;
19 padding: 0;
20}
21
22.objects-list .list-item {
23 list-style-type: none;
24 float: left;
25 width: 70px;
26 overflow: hidden;
27 text-overflow: ellipsis;
28}
29
30/* ------------------
31 Icon Styles
32 ------------------- */
33
34.object-icon {
35 background-color: rgba(0, 0, 0, 0.6);
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 auto 5px;
44 width: 50px;
45}
46.object-name {
47 color: #fff;
48 display: block;
49 text-align: center;
50}
51
52.object-icon:hover {
53 background-color: rgba(0, 0, 0, 0.4);
54}
55
56.object-icon-component.object-icon {
57 /* gray gear */
58 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);
59} \ No newline at end of file
diff --git a/js/panels/objects/object.reel/object.html b/js/panels/objects/object.reel/object.html
new file mode 100644
index 00000000..f9de1499
--- /dev/null
+++ b/js/panels/objects/object.reel/object.html
@@ -0,0 +1,44 @@
1<!DOCTYPE html>
2<!-- <copyright>
3 This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
4 No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
5 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
6 </copyright> -->
7<html>
8<head>
9 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
10 <link rel="stylesheet" type="text/css" href="object.css">
11
12 <script type="text/montage-serialization">
13 {
14 "owner": {
15 "prototype": "js/panels/objects/object.reel",
16 "properties": {
17 "element": {"#": "object"},
18 "iconElement": { "#": "object-icon"}
19 }
20 },
21 "labelText": {
22 "prototype": "montage/ui/dynamic-text.reel",
23 "properties": {
24 "element": {"#": "name" }
25 },
26 "bindings": {
27 "value" : {"<-": "@owner.name"}
28 }
29 }
30
31 }
32 </script>
33
34</head>
35<body>
36
37
38<li data-montage-id="object" draggable="true">
39 <div data-montage-id="object-icon" class="object-icon"></div>
40 <span data-montage-id="name" class="object-name"></span>
41</li>
42
43</body>
44</html>
diff --git a/js/panels/objects/object.reel/object.js b/js/panels/objects/object.reel/object.js
new file mode 100644
index 00000000..6f8f5c92
--- /dev/null
+++ b/js/panels/objects/object.reel/object.js
@@ -0,0 +1,104 @@
1/* <copyright>
2 This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
3 No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
4 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
5 </copyright> */
6
7/**
8 @requires montage/core/core
9 @requires montage/ui/component
10 */
11var Montage = require("montage/core/core").Montage,
12 Component = require("montage/ui/component").Component;
13
14exports.Object = Montage.create(Component, {
15 _needsPropertyInspection : { value: null },
16 iconElement : { value: null },
17 type : { value: null },
18
19 _sourceObject : { value: null },
20 sourceObject : {
21 get: function() {
22 return this._sourceObject;
23 },
24 set: function(object) {
25 if(this._sourceObject === object) { return false; }
26
27 this._sourceObject = object;
28
29 if(object._montage_metadata) {
30 this.montageMetaData = object._montage_metadata;
31 this.type = this.application.ninja.objectsController.getObjectCategory(object);
32 }
33
34 this._needsPropertyInspection = this.needsDraw = true;
35 }
36
37 },
38
39 _identifier : {
40 value: null
41 },
42 identifier : {
43 get: function() {
44 return this._identifier;
45 },
46 set: function(value) {
47 if(this._identifier === value || !value) { return false; }
48
49 this._identifier = value;
50
51 this.needsDraw = true;
52 }
53
54 },
55
56 _montageMetaData : {
57 value: null
58 },
59 montageMetaData : {
60 get: function() {
61 return this._montageLabel;
62 },
63 set: function(data) {
64 if(this._montageMetaData === data) { return false; }
65
66 this._montageMetaData = data;
67
68 if(data.label) {
69 this.name = data.label;
70 this.needsDraw = true;
71 }
72 }
73
74 },
75
76 /* ---------------------
77 Event Handlers
78 --------------------- */
79
80 handleClick: {
81 value: function(e) {
82 this.parentComponent.parentComponent.displayHUDForObject(this.sourceObject);
83 }
84 },
85
86 prepareForDraw : {
87 value: function() {
88 this.iconElement.addEventListener('click', this, false);
89 }
90 },
91
92 draw : {
93 value: function() {
94 if(this.type) {
95 this.iconElement.classList.add('object-icon-'+this.type.toLowerCase());
96 } else{