Skip to content

Commit bfb0c37

Browse files
bugerbuger
committedDec 10, 2010
Wheee! Prototype is ready.
1 parent 41d22ab commit bfb0c37

File tree

8 files changed

+271
-181
lines changed

8 files changed

+271
-181
lines changed
 

‎css/main.css

+42-19
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,8 @@ textarea {
7777
-webkit-transition: all 0,5s;
7878
background-color: white;
7979

80+
text-align: center;
81+
8082
border: 1px solid #AAA;
8183
padding: 20px 25px 25px;
8284
width: 450px;
@@ -100,7 +102,6 @@ textarea {
100102
#workspace canvas {
101103
position: absolute;
102104
top: 41px;
103-
left: 50%;
104105
}
105106

106107
#toolbar {
@@ -110,7 +111,7 @@ textarea {
110111
border-bottom: 1px solid #ccc;
111112
top: 0px;
112113
left: 0px;
113-
z-index: 2;
114+
z-index: 10;
114115
}
115116

116117
/********* Point **********/
@@ -324,7 +325,7 @@ textarea {
324325
margin-top: 200px;
325326
left: 50%;
326327
margin-left: -150px;
327-
z-index: 12;
328+
z-index: 13;
328329
}
329330

330331
/*****************/
@@ -334,12 +335,12 @@ textarea {
334335
left: 0px;
335336
padding: 3px;
336337
height: 35px;
337-
z-index: 3;
338+
z-index: 11;
338339
}
339340

340341
#background {
341342
position: fixed;
342-
z-index: 11;
343+
z-index: 12;
343344
width: 100%;
344345
height: 100%;
345346

@@ -388,29 +389,51 @@ textarea {
388389
/**** Connected Users ***********/
389390
#connected_users {
390391
position: fixed;
391-
bottom: 0px;
392-
right: 0px;
393-
}
394-
395-
#connected_users li {
396-
margin: 0;
397-
padding:0;
392+
bottom: 4px;
393+
right: 10px;
394+
z-index: 4;
398395
}
399396

400-
#connected_users li {
397+
#connected_users a {
401398
color: #333;
402399
border: 1px solid #999;
403-
border-right: none;
404-
display: inline;
405400
float: left;
406-
padding: 5px;
401+
padding: 5px 10px 5px 10px;
402+
text-decoration: none;
407403

408404
font-size: 11px;
409405
font-weight: bold;
410406

411-
cursor: default;
407+
cursor: pointer;
408+
409+
opacity: 0.7;
412410
}
413411

414-
#connected_users li img {
415-
margin-left: 10px;
412+
#connected_users a img { margin-left: 10px; }
413+
414+
#connected_users a:hover { opacity: 1 }
415+
416+
/******** Notifications ***********/
417+
418+
#notifications {
419+
position:fixed;
420+
top: 45px;
421+
right: 5px;
422+
}
423+
424+
#notifications .notification {
425+
width: 250px;
426+
height: 35px;
427+
padding: 10px;
428+
position: relative;
429+
margin-bottom: 10px;
430+
opacity: 0.9;
431+
font-size: 11px;
432+
overflow: hidden;
433+
}
434+
435+
#notifications .notification div { float: left; }
436+
437+
#notifications .notification .text {
438+
padding-left: 10px;
416439
}

‎images/chrome.png

11.2 KB
Loading

‎images/firefox.png

10.2 KB
Loading

‎index.html

+24-57
Original file line numberDiff line numberDiff line change
@@ -26,19 +26,28 @@
2626
<script src="/js/main.js"></script>
2727

2828
<script id="connected_users_template" type="text/x-jquery-tmpl">
29-
<ul>
30-
{{each users}}
31-
{{if $value.id != current_user.id}}
32-
<li class="linear_grad" title="Users watching this project right now">${$value.name}<img src="/images/green_dot.png" /></li>
33-
{{/if}}
34-
{{/each}}
35-
</ul>
29+
{{each users}}
30+
{{if $value.id != current_user.id}}
31+
<a class="linear_grad br_8 " title="Users watching this project right now" href="${$value.link}" target='_blank'>${$value.name}<img src="/images/green_dot.png" /></a>
32+
{{/if}}
33+
{{/each}}
3634
</script>
3735
<script>
3836
var connected_users_template = $('#connected_users_template');
3937
</script>
38+
39+
<script id="notification_template" type="text/x-jquery-tmpl">
40+
<div class="notification br_8 linear_grad box_shadow_s">
41+
<div class="image"><img width="35px" height="35px" src="${image}"/></div>
42+
<div class="text">${text}</div>
43+
</div>
44+
</script>
45+
<script>
46+
var notification_template = $('#notification_template');
47+
</script>
48+
4049
<script id="point_template" type="text/x-jquery-tmpl">
41-
<div class='point ${point.color}' style='top:${point.y}px; left:${point.x}px' id="${point.uuid}">
50+
<div class='point' style='top:${point.y}px; left:${point.x}px' id="point_${point.label}">
4251
<div class='label'>${point.label}</div>
4352
<div class='overview triangle-border top'>
4453
{{each point.comments}}
@@ -89,18 +98,20 @@
8998
<div id="start_screen" class="br_8" style="display: none">
9099
<label>Upload image</label>
91100
<input type="file" id="file_uploader" />
92-
<br/>
93-
<br/>
94-
<span style="font-size: 30px">Try <a href="javascript:;" id="show_demo">demo</a></span>
101+
<br />
102+
<br />
103+
<img src="/images/firefox.png" />
104+
<img src="/images/chrome.png" />
95105
</div>
96106
<div id="workspace" style="display: none;">
97107
<div id="toolbar" class="linear_grad">
98108
<div id="status" style="display: none;">Uploading to server...</div>
99109
<div id="share_link" style="display: none;">Share<input value="" readonly onmousemove="this.select()" /></div>
100110
</div>
101111
<canvas id="image_canvas"></canvas>
102-
<div id="connected_users">
103-
</div>
112+
<div id="connected_users"></div>
113+
114+
<div id="notifications"></div>
104115
</div>
105116
<div id="logged_user" class="user_info" style="display:none">
106117
<div class="image">
@@ -122,50 +133,6 @@
122133
<script src="http://connect.facebook.net/en_US/all.js"></script>
123134
<script>
124135

125-
function logout(){
126-
FB.api({ method: 'Auth.revokeAuthorization' }, function(response) {
127-
console.log("Revoke authorization response: ", response);
128-
});
129-
}
130-
131-
function updateLoginStatus(logged){
132-
var ws = WorkspaceManager.getActiveWorkspace();
133-
134-
if (logged) {
135-
FB.api('/me', function(response) {
136-
console.log('User info', response);
137-
138-
var image = "http://graph.facebook.com/"+response.id+"/picture";
139-
140-
$('#logged_user .image img')[0].src = image;
141-
$('#logged_user .name span').html(response.name);
142-
143-
$('#logged_user').show();
144-
145-
ws.user = {
146-
name: response.name,
147-
image: image, id: response.id,
148-
link: response.link
149-
};
150-
151-
if(!ws.getConnectedUser(response.id))
152-
ws.users.push(ws.user);
153-
154-
155-
$('#fb_login_screen').hide();
156-
$('#background').hide();
157-
158-
$(window).trigger('hashchange');
159-
});
160-
} else {
161-
$('#fb_login_screen').show();
162-
$('#background').show();
163-
164-
$('#logged_user').hide();
165-
166-
ws.user = {};
167-
}
168-
}
169136

170137
FB.init({appId: '127727177287107', status: true, cookie: true, xfbml: true});
171138
FB.Event.subscribe('auth.sessionChange', function(response) {

‎js/main.js

+44-32
Original file line numberDiff line numberDiff line change
@@ -40,48 +40,60 @@ $(document).ready(function(){
4040
});
4141

4242
$('#show_demo').bind('click', function(){
43-
loadDemo();
43+
$.bbq.pushState("#1");
4444
})
4545

4646
WorkspaceManager.createWorkspace();
47-
//loadDemo();
4847
})
4948

5049
function showWorkspace(){
5150
$('#workspace').show()
5251
$('#start_screen').hide();
5352
}
5453

55-
function loadDemo(){
56-
WorkspaceManager.getActiveWorkspace().loadProject("/images/demo_image.png",
57-
[
58-
{
59-
'label': '1',
60-
'x': 300,
61-
'y': 200,
62-
'color': 'blue',
63-
'comments': [
64-
{
65-
'author_name': 'ted',
66-
'text': 'Test comment. This a long long long comment. bla bla bla blaaaaaaaaa.Test comment. This a long long long comment. bla bla bla blaaaaaaaaa.'
67-
}
68-
]
69-
},
70-
{
71-
'label': '2',
72-
'x': 250,
73-
'y': 400,
74-
'color': 'red',
75-
'comments': [
76-
{
77-
'author_name': 'bob',
78-
'text': 'Test comment 2'
79-
}
80-
]
81-
}
82-
]
83-
)
54+
55+
function logout(){
56+
FB.api({ method: 'Auth.revokeAuthorization' }, function(response) {
57+
console.log("Revoke authorization response: ", response);
58+
});
59+
}
60+
61+
function updateLoginStatus(logged){
62+
var ws = WorkspaceManager.getActiveWorkspace();
8463

85-
showWorkspace();
64+
if (logged) {
65+
FB.api('/me', function(response) {
66+
console.log('User info', response);
67+
68+
var image = "http://graph.facebook.com/"+response.id+"/picture";
69+
70+
$('#logged_user .image img')[0].src = image;
71+
$('#logged_user .name span').html(response.name);
72+
73+
$('#logged_user').show();
74+
75+
ws.user = {
76+
name: response.name,
77+
image: image, id: response.id,
78+
link: response.link
79+
};
80+
81+
if(!ws.getConnectedUser(response.id))
82+
ws.users.push(ws.user);
83+
84+
85+
$('#fb_login_screen').hide();
86+
$('#background').hide();
87+
88+
$(window).trigger('hashchange');
89+
});
90+
} else {
91+
$('#fb_login_screen').show();
92+
$('#background').show();
93+
94+
$('#logged_user').hide();
95+
96+
ws.user = {};
97+
}
8698
}
8799

‎js/pointout.js

+23-1
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,6 @@ PointOut.loadProject = function(options){
111111
var xhr = new XMLHttpRequest();
112112
xhr.open('POST', '/load/'+options.project_id, true);
113113
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
114-
xhr.send("user_id="+options.user_id);
115114

116115
xhr.onreadystatechange = function(){
117116
if(xhr.readyState == 4){
@@ -124,4 +123,27 @@ PointOut.loadProject = function(options){
124123
}
125124
}
126125
};
126+
127+
xhr.send(options.data.toQueryString());
128+
}
129+
130+
PointOut.addComment = function(options){
131+
var xhr = new XMLHttpRequest();
132+
xhr.open('POST', '/comment/'+options.project_id, true);
133+
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
134+
135+
xhr.onreadystatechange = function(){
136+
if(xhr.readyState == 4){
137+
if(xhr.status == 200) {
138+
console.log('Comment added');
139+
//var data = JSON.parse(xhr.responseText);
140+
141+
//options.success(data);
142+
} else {
143+
console.error("Error while creating project:", xhr);
144+
}
145+
}
146+
};
147+
148+
xhr.send(options.data.toQueryString());
127149
}

0 commit comments

Comments
 (0)
Please sign in to comment.