social_cheesecake 0.2.0 → 0.3.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (35) hide show
  1. data/app/assets/javascripts/kinetic.js +812 -432
  2. data/app/assets/javascripts/socialcheesecake/_header.js +1 -1
  3. data/app/assets/javascripts/socialcheesecake/actor.js +57 -32
  4. data/app/assets/javascripts/socialcheesecake/cheesecake.js +257 -280
  5. data/app/assets/javascripts/socialcheesecake/grid.js +168 -56
  6. data/app/assets/javascripts/socialcheesecake/sector.js +124 -70
  7. data/app/assets/javascripts/socialcheesecake/text.js +9 -4
  8. data/lib/social_cheesecake/version.rb +1 -1
  9. data/test/dummy/app/assets/images/images/ui-bg_diagonals-medium_20_d34d17_40x40.png +0 -0
  10. data/test/dummy/app/assets/images/images/ui-bg_flat_30_cccccc_40x100.png +0 -0
  11. data/test/dummy/app/assets/images/images/ui-bg_flat_50_5c5c5c_40x100.png +0 -0
  12. data/test/dummy/app/assets/images/images/ui-bg_gloss-wave_45_817865_500x100.png +0 -0
  13. data/test/dummy/app/assets/images/images/ui-bg_gloss-wave_60_fece2f_500x100.png +0 -0
  14. data/test/dummy/app/assets/images/images/ui-bg_gloss-wave_70_ffdd57_500x100.png +0 -0
  15. data/test/dummy/app/assets/images/images/ui-bg_gloss-wave_90_fff9e5_500x100.png +0 -0
  16. data/test/dummy/app/assets/images/images/ui-bg_highlight-soft_100_feeebd_1x100.png +0 -0
  17. data/test/dummy/app/assets/images/images/ui-bg_inset-soft_30_ffffff_1x100.png +0 -0
  18. data/test/dummy/app/assets/images/images/ui-icons_3d3d3d_256x240.png +0 -0
  19. data/test/dummy/app/assets/images/images/ui-icons_bd7b00_256x240.png +0 -0
  20. data/test/dummy/app/assets/images/images/ui-icons_d19405_256x240.png +0 -0
  21. data/test/dummy/app/assets/images/images/ui-icons_eb990f_256x240.png +0 -0
  22. data/test/dummy/app/assets/images/images/ui-icons_ed9f26_256x240.png +0 -0
  23. data/test/dummy/app/assets/images/images/ui-icons_fadc7a_256x240.png +0 -0
  24. data/test/dummy/app/assets/images/images/ui-icons_ffe180_256x240.png +0 -0
  25. data/test/dummy/app/assets/images/socialcheesecake_background.png +0 -0
  26. data/test/dummy/app/assets/images/soialcheesecake_icon.png +0 -0
  27. data/test/dummy/app/assets/images/soialcheesecake_icon_back.png +0 -0
  28. data/test/dummy/app/assets/images/under-construction.png +0 -0
  29. data/test/dummy/app/assets/javascripts/application.js +1 -0
  30. data/test/dummy/app/assets/javascripts/main.js +352 -0
  31. data/test/dummy/app/assets/stylesheets/jquery-ui-1.8.17.custom.css +565 -0
  32. data/test/dummy/app/assets/stylesheets/style.css +251 -0
  33. data/test/dummy/public/index.html +149 -119
  34. data/test/dummy/vendor/assets/javascripts/jquery-ui.js +356 -0
  35. metadata +29 -4
@@ -0,0 +1,251 @@
1
+ body {
2
+ text-align: center;
3
+ background: #1c1c1c;
4
+ }
5
+ #wrapper {
6
+ width: 940px;
7
+ position: relative;
8
+ padding: 10px;
9
+ padding-bottom: 51px;
10
+ margin: auto;
11
+ background-color: #FEFEE0;
12
+ border: 3px solid #ab8211;
13
+ border-radius: 20px;
14
+ -webkit-border-radius: 20px;
15
+ -moz-border-radius: 20px;
16
+ min-height: 550px;
17
+ background-image: url("socialcheesecake_background.png");
18
+ background-repeat: no-repeat;
19
+ background-position: center;
20
+ }
21
+ .popup {
22
+ padding: 10px;
23
+ background-color: #FEFEE0;
24
+ border: 3px solid #ab8211;
25
+ border-radius: 20px;
26
+ -webkit-border-radius: 20px;
27
+ -moz-border-radius: 20px;
28
+ }
29
+ #popup_darkener {
30
+ background: rgba(50, 50, 50, 0.5);
31
+ }
32
+ #footer {
33
+ width: 920px;
34
+ padding: 10px;
35
+ border: 2px solid #FFE481;
36
+ border-radius: 8px;
37
+ -webkit-border-radius: 8px;
38
+ -moz-border-radius: 8px;
39
+ margin-top: 15px;
40
+ font: 12px helvetica;
41
+ bottom: 10px;
42
+ position: absolute;
43
+ background: rgba(254, 238, 189, 0.5);
44
+ }
45
+ #left_column {
46
+ float: left;
47
+ padding: 0px;
48
+ margin: 0px;
49
+ width: 440px;
50
+ height: 570px;
51
+ border: 2px solid #FFE481;
52
+ border-radius: 8px;
53
+ -webkit-border-radius: 8px;
54
+ -moz-border-radius: 8px;
55
+ background: rgba(254, 238, 189, 0.5);
56
+ }
57
+ #left_column .title {
58
+ font-weight: bold;
59
+ display: block;
60
+ padding: 5px;
61
+ color: #383838;
62
+ font-family: Segoe UI, Arial, sans-serif;
63
+ font-size: 13px;
64
+ }
65
+ #right_column {
66
+ float: right;
67
+ padding: 0px;
68
+ margin: 0px;
69
+ width: 490px;
70
+ }
71
+ canvas {
72
+ position: relative !important;
73
+ }
74
+ .clearfloat {
75
+ clear: both;
76
+ height: 0px;
77
+ }
78
+ #cheesecake {
79
+ height: 440px;
80
+ width: 440px;
81
+ display: block;
82
+ float: left;
83
+ }
84
+ #briefing {
85
+ height: 120px;
86
+ width: 940px;
87
+ display: block;
88
+ float: right;
89
+ }
90
+ #briefing #logo {
91
+ height: 100px;
92
+ width: 100px;
93
+ margin: 10px auto;
94
+ }
95
+ #briefing #logo img {
96
+ height: 100px;
97
+ width: 100px;
98
+ padding: 0px;
99
+ margin: 0px;
100
+ }
101
+ #grid {
102
+ display: block;
103
+ float: left;
104
+ width: 440px;
105
+ }
106
+ #grid .actor {
107
+ width: 64px;
108
+ height: 64px;
109
+ float: left;
110
+ margin: 3px;
111
+ display: none;
112
+ opacity: 0.8;
113
+ }
114
+ #grid .actor.focused {
115
+ border: 2px solid #8E846B;
116
+ background-color: #ffe481;
117
+ margin: 1px;
118
+ opacity: 1;
119
+ }
120
+ #grid .actor img {
121
+ width: 64px;
122
+ height: 64px;
123
+ }
124
+ #form {
125
+ width: 490px;
126
+ font: 12px helvetica;
127
+ display: block;
128
+ float: right;
129
+ }
130
+ #form .label, #form .field {
131
+ display: inline-block;
132
+ }
133
+ #form .row {
134
+ display: block;
135
+ }
136
+ #form .compound_row{
137
+ min-height : 80px;
138
+ max-width : 335px;
139
+ padding-left : 30px;
140
+ }
141
+ #form .compound_row .left_mid_row{
142
+ float: left;
143
+ }
144
+ #form .compound_row .right_mid_row{
145
+ float : right;
146
+ }
147
+ #form #add_sector button {
148
+ width: 100%;
149
+ }/*
150
+ #form .add_subsector_button{
151
+ float: right;
152
+ }*/
153
+ #form .button_container{
154
+ min-height: 30px;
155
+ padding-right: 5px;
156
+ }
157
+ #form #done {
158
+ height: 50px;
159
+ padding: 10px 0px;
160
+ }
161
+ #form #done button {
162
+ float: right;
163
+ height: 40px;
164
+ width: 60px;
165
+ }
166
+ #form .sector {
167
+ background: #feeebd url(images/ui-bg_highlight-soft_100_feeebd_1x100.png) 50% top repeat-x;;
168
+ padding: 5px 10px;
169
+ border: 1px solid #EEDCB7;
170
+ text-align: center;
171
+ border-radius: 8px;
172
+ -webkit-border-radius: 8px;
173
+ -moz-border-radius: 8px;
174
+ border-top: none;
175
+ border-top-left-radius: 0;
176
+ border-top-right-radius: 0;
177
+ }
178
+ #form .sector div {
179
+ text-align: left;
180
+ }
181
+ #form .sector blockquote {
182
+ margin-top: 0px;
183
+ }
184
+ #form .sector .subsector {
185
+ margin: 5px;
186
+ background: rgba(238,220,183,0.5);
187
+ border: 1px solid #A68211;
188
+ padding: 5px;
189
+ border-radius: 8px;
190
+ -webkit-border-radius: 8px;
191
+ -moz-border-radius: 8px;
192
+ }
193
+ #form .sector button {
194
+ margin: auto;
195
+ }
196
+ #form .title {
197
+ padding: 5px;
198
+ }
199
+ #form .title, #form .subtitle, #form .subsubtitle {
200
+ font-weight: bold;
201
+ display: block;
202
+ }
203
+ #form .subtitle, #form .subsubtitle {
204
+ display: block;
205
+ }
206
+ #form .subtitle {
207
+ font-weight: bold;
208
+ padding: 5px 0px;
209
+ }
210
+ #form .subsubtitle {
211
+ }
212
+ #form ul{
213
+ border-bottom-left-radius: 0px;
214
+ border-bottom-right-radius: 0px;
215
+ }
216
+ #settings {
217
+ background: rgba(254, 238, 189, 0.5);
218
+ border-width : 2px;
219
+ }
220
+ #settings-0, #settings-1 {
221
+ padding: 0px;
222
+ height: 473px;
223
+ }
224
+ #sectors {
225
+ border: none;
226
+ }
227
+ #sectors li a {
228
+ padding: .5em 0px;
229
+ width: 27px;
230
+ }
231
+ #add_tab{
232
+ background: #FFBABA;
233
+ border-style: dashed;
234
+ }
235
+ #add_tab a{
236
+ color: #BD1823;
237
+ }
238
+ #sectors .ui-tabs-nav li {
239
+ margin: 0px;
240
+ width: 27px;
241
+ text-align: center;
242
+ }
243
+ #settings-1 .ui-tabs-panel {
244
+ padding: 0px !important;
245
+ height: 384px;
246
+ background: none;
247
+ }
248
+ .ui-widget-content {
249
+ background: none;
250
+ border
251
+ }
@@ -2,131 +2,161 @@
2
2
  <html>
3
3
  <head>
4
4
  <meta charset="utf-8">
5
- <style>
6
- body {
7
- margin: 0px;
8
- padding: 0px;
9
- }
10
- canvas {
11
- }
12
- #grid {
13
- position: absolute;
14
- left: 460px;
15
- top: 30px;
16
- }
17
- #grid .actor {
18
- width: 64px;
19
- height: 64px;
20
- float: left;
21
- margin: 5px;
22
- }
23
- #grid .actor.focused {
24
- border: 2px solid #00F;
25
- background-color: #006;
26
- margin: 3px;
27
- }
28
- #grid .actor img {
29
- width: 64px;
30
- height: 64px;
31
- }
32
- </style>
33
- <script src="assets/application.js"></script>
34
- <script>
35
- window.requestAnimFrame = (function(callback) {
36
- return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
37
- function(callback) {
38
- window.setTimeout(callback, 1000 / 60);
39
- };
40
- })();
41
- var cheese;
42
- window.onload = function() {
43
- var cheesecakeData = {
44
- container: {
45
- id: "container",
46
- width: 440,
47
- height: 440
48
- },
49
- grid: {
50
- id: "grid",
51
- divIdPrefix: "actor_"
52
- },
53
- rMax : 200,
54
- center: {x : 220, y : 220},
55
- sectors: [
56
- {name:"John Connor Lider de la revolucion" , subsectors : [
57
- {id : 0,
58
- name : "Cassidy",
59
- actors: [
60
- [0],
61
- [1],
62
- [2]
63
- ]
64
- },
65
- {id : 1, name : "Cassidy2"}
66
- ]},
67
- { name:"3,14159265358979323846264338327950288419716939937510" , subsectors : [
68
- {id : 2, name : "Abc"},
69
- {id : 3,
70
- name : "Cassidy2",
71
- actors: [
72
- [3],
73
- [4]
74
- ]
75
- }
76
- ]},
77
- { name:"Luke I am your father", subsectors : [
78
- {id : 4, name : "Luke I am your father"}
79
- ]},
80
- { name:"Olivia",subsectors : [
81
- {id : 5, name : "Dunham"},
82
- {id : 6, name : "FBI"}
83
- ]},
84
- { name:"Altivia",subsectors : [
85
- {id : 7, name : "Dunham"},
86
- {id : 8, name : "FBI"}
87
- ]},
88
- { name:"Walter",subsectors : [
89
- {id : 9, name : "Bishop"},
90
- {id : 10, name : "Craziness",
91
- actors: [[3]]
92
- }]
93
- },
94
- { name:"Nina",subsectors : [
95
- {id : 11, name : "Massive Dynamic"}
96
- ]}
97
- ],
98
- highlightedSectorCallback : function(sector){
99
- }
100
- };
101
- cheese = new socialCheesecake.Cheesecake(cheesecakeData);
102
- };
103
-
104
- </script>
5
+ <title>SocialCheeseCakeJS</title>
6
+ <link href="assets/application.css" rel="stylesheet" type="text/css">
7
+ <script src="assets/application.js" type="text/javascript"></script>
105
8
  </head>
106
- <body id="container" onmousedown="return false;">
107
- <div id="grid">
108
- <div class="actor" id="actor_0"><img src="assets/youngAlberto.png">
9
+ <body id="container">
10
+ <div id="wrapper">
11
+ <div id="briefing">
12
+ <div id="logo">
13
+ <img src="assets/soialcheesecake_icon.png">
14
+ </div>
15
+ <div id="logoback" style="display:none;">
16
+ <img src="assets/soialcheesecake_icon_back.png">
17
+ </div>
18
+ <div id="logofront" style="display:none;">
19
+ <img src="assets/soialcheesecake_icon.png">
20
+ </div>
109
21
  </div>
110
- <div class="actor" id="actor_1"><img src="assets/beatriz.png">
22
+ <div id="left_column">
23
+ <div class="title">
24
+ SocialCheeseCakeJS Demo
25
+ </div>
26
+ <div id="cheesecake"></div>
27
+ <div id="grid">
28
+ <div class="actor" id="actor_0"><img src="assets/youngAlberto.png">
29
+ </div>
30
+ <div class="actor" id="actor_1"><img src="assets/beatriz.png">
31
+ </div>
32
+ <div class="actor" id="actor_2"><img src="assets/rails.png">
33
+ </div>
34
+ <div class="actor" id="actor_3"><img src="assets/beatriz.png">
35
+ </div>
36
+ <div class="actor" id="actor_4"><img src="assets/youngAlberto.png">
37
+ </div>
38
+ </div>
111
39
  </div>
112
- <div class="actor" id="actor_2"><img src="assets/youngAlberto.png">
40
+ <div id="right_column">
41
+ <form name ="settings" id= "form">
42
+ <div id="settings">
43
+ <div class="title">
44
+ SocialCheeseCakeJS Settings
45
+ </div>
46
+ <ul>
47
+ <li>
48
+ <a href="#settings-0">General</a>
49
+ </li>
50
+ <li>
51
+ <a href="#settings-1">Sectors</a>
52
+ </li>
53
+ </ul>
54
+ <div id="settings-0">
55
+ <div class = "sector">
56
+ <div class = "subtitle label">
57
+ Location & Size
58
+ </div>
59
+ <div class = "compound_row">
60
+ <div class = "left_mid_row">
61
+ <div class = "label">
62
+ Centre
63
+ </div>
64
+ <blockquote>
65
+ <div class = "row">
66
+ <div class = "label">
67
+ X
68
+ </div>
69
+ <input type ="text" id ="x" value = "220" size="3" maxlength="3"/>
70
+ px
71
+ </div>
72
+ <div class = "row">
73
+ <div class = "label">
74
+ Y
75
+ </div>
76
+ <input type ="text" id ="y" value = "220" size="3" maxlength="3"/>
77
+ px
78
+ </div>
79
+ </blockquote>
80
+ </div>
81
+ <div class = "right_mid_row">
82
+ <div class = "label">
83
+ Radius
84
+ </div>
85
+ <input type ="text" id ="rmax" value = "200" size="3" maxlength="3"/>
86
+ px
87
+ </div>
88
+ </div>
89
+ </div>
90
+ </div>
91
+ <div id="settings-1">
92
+ <div id="sectors">
93
+ <ul>
94
+ <li>
95
+ <a href="#tabs-0">0</a>
96
+ </li>
97
+ </ul>
98
+ <div id="tabs-0">
99
+ <div class="sector" id="s0">
100
+ <div class = "subtitle label">
101
+ Sector 0
102
+ </div>
103
+ <div class = "row">
104
+ <div class = "label">
105
+ Name
106
+ </div>
107
+ <input type ="text" id ="label_s0" value = ""/>
108
+ </div>
109
+ <div class= "subsector" id="s0s0">
110
+ <div class = "subsubtitle label">
111
+ Subsector 0
112
+ </div>
113
+ <div class = "row">
114
+ <div class = "label">
115
+ Name
116
+ </div>
117
+ <input type ="text" id ="label_s0s0" value = ""/>
118
+ </div>
119
+ <div class = "row">
120
+ <div class = "label">
121
+ Actors
122
+ </div>
123
+ <input type ="checkbox" class="actors" name ="actors_s0s0" value = "0" checked="true"/>
124
+ 0
125
+ <input type ="checkbox" class="actors" name ="actors_s0s0" value = "1" checked="true"/>
126
+ 1
127
+ <input type ="checkbox" class="actors" name ="actors_s0s0" value = "2" checked="true"/>
128
+ 2
129
+ <input type ="checkbox" class="actors" name ="actors_s0s0" value = "3"/>
130
+ 3
131
+ <input type ="checkbox" class="actors" name ="actors_s0s0" value = "4"/>
132
+ 4
133
+ </div>
134
+ </div>
135
+ <!-- <div class = "button_container"> -->
136
+ <button type="button" id="add_subsector_button_s0" class="add_subsector_button" onclick="addSubsector(0)">
137
+ Add Subsector
138
+ </button>
139
+ <!-- </div> -->
140
+ </div>
141
+ </div>
142
+ </div>
143
+ <button type="button" id="add_sector_button">
144
+ Add new sector
145
+ </button>
146
+ </div>
147
+ </div>
148
+ <button type="button" id="create_button">
149
+ Create Cheescake!
150
+ </button>
151
+ </form>
113
152
  </div>
114
- <div class="actor" id="actor_3"><img src="assets/beatriz.png">
115
- </div>
116
- <div class="actor" id="actor_4"><img src="assets/youngAlberto.png">
153
+ <br class="clearfloat">
154
+ <div id="footer">
155
+ Copyright ©2012
117
156
  </div>
118
157
  </div>
119
- <div id="buttons">
120
- <button type="button" onclick="cheese.grid.actors[0].focus()">Focus 0</button>
121
- <button type="button" onclick="cheese.grid.actors[0].unfocus()">unfocus 0</button>
122
- <button type="button" onclick="cheese.grid.actors[0].hide()">hide 0</button>
123
- <button type="button" onclick="cheese.grid.actors[0].show()">show 0</button>
124
- <button type="button" onclick="cheese.grid.actors[0].fadeOut(1000)">fadeOut 0</button>
125
- <button type="button" onclick="cheese.grid.actors[0].fadeIn(1000)">fadeIn 0</button>
126
- <button type="button" onclick="cheese.grid.focusAll()">Focus all!</button>
127
- <button type="button" onclick="cheese.grid.unfocusAll()">Unfocus all!</button>
128
- <button type="button" onclick="cheese.grid.hideAll()">Hide all!</button>
129
- <button type="button" onclick="cheese.grid.showAll()">Show all!</button>
158
+ <div id="briefing_popup" class="popup" style="display:none;">
159
+ <a href="https://github.com/adiezbal/SocialCheesecake" target="_blank"> <img src="assets/under-construction.png"> </a>
130
160
  </div>
131
161
  </body>
132
162
  </html>