Dariaceli's Git
Browse code

View several posts in the posts page

Dario Rodriguez authored on 07/07/2014 12:08:14
Showing 3 changed files
res/posts.css
History View file @ eaeacca
... ... 
@@ -1,42 +1,42 @@
1 1 
 body {
2 
-	font-family: Sans;
3 
-	color: #8080a5;
4 
-	padding: 80px 0px 0px 0px;
2 
+        font-family: Sans;
3 
+        color: #8080a5;
4 
+        padding: 80px 0px 0px 0px;
5 5 
 }
6 6
7 7 
 input.rounded {
8 
-	border: 1px solid #ccc;
9 
-	-moz-border-radius: 10px;
10 
-	-webkit-border-radius: 10px;
11 
-	border-radius: 10px;
12 
-	-moz-box-shadow: 2px 2px 3px #666;
13 
-	-webkit-box-shadow: 2px 2px 3px #666;
14 
-	box-shadow: 2px 2px 3px #666;
15 
-	font-size: 20px;
16 
-	padding: 4px 7px;
17 
-	outline: 0;
18 
-	-webkit-appearance: none;
8 
+        border: 1px solid #ccc;
9 
+        -moz-border-radius: 10px;
10 
+        -webkit-border-radius: 10px;
11 
+        border-radius: 10px;
12 
+        -moz-box-shadow: 2px 2px 3px #666;
13 
+        -webkit-box-shadow: 2px 2px 3px #666;
14 
+        box-shadow: 2px 2px 3px #666;
15 
+        font-size: 20px;
16 
+        padding: 4px 7px;
17 
+        outline: 0;
18 
+        -webkit-appearance: none;
19 19 
 }
20 20 
 input.rounded:focus {
21 
-	border-color: #339933;
21 
+        border-color: #339933;
22 22 
 }
23 23
24 24 
 input.almostrounded {
25 
-	border: 1px solid #ccc;
26 
-	-moz-border-radius: 2px;
27 
-	-webkit-border-radius: 2px;
28 
-	border-radius: 2px;
29 
-	-moz-box-shadow: 0px 0px 3px #666;
30 
-	-webkit-box-shadow: 0px 0px 3px #666;
31 
-	box-shadow: 0px 0px 3px #666;
32 
-	font-size: 20px;
33 
-	padding: 4px 7px;
34 
-	outline: 0;
35 
-	-webkit-appearance: none;
25 
+        border: 1px solid #ccc;
26 
+        -moz-border-radius: 2px;
27 
+        -webkit-border-radius: 2px;
28 
+        border-radius: 2px;
29 
+        -moz-box-shadow: 0px 0px 3px #666;
30 
+        -webkit-box-shadow: 0px 0px 3px #666;
31 
+        box-shadow: 0px 0px 3px #666;
32 
+        font-size: 20px;
33 
+        padding: 4px 7px;
34 
+        outline: 0;
35 
+        -webkit-appearance: none;
36 36 
 }
37 37
38 38 
 input.almostrounded:focus {
39 
-	border-color: #339933;
39 
+        border-color: #339933;
40 40 
 }
41 41
42 42 
 div.centered {
... ... 
@@ -54,38 +54,90 @@ background-image: -webkit-linear-gradient(left bottom, #C7C7C7 11%, #EEEEEE 81%)
54 54 
 background-image: -ms-linear-gradient(left bottom, #C7C7C7 11%, #EEEEEE 81%);
55 55 
 background-image: linear-gradient(to left bottom, #C7C7C7 11%, #EEEEEE 81%);
56 56 
 /* border */
57 
-	border: 1px solid #ccc;
58 
-	-moz-border-radius: 2px;
59 
-	-webkit-border-radius: 2px;
60 
-	border-radius: 2px;
61 
-	-moz-box-shadow: 0px 0px 3px #666;
62 
-	-webkit-box-shadow: 0px 0px 3px #666;
63 
-	box-shadow: 0px 0px 3px #666;
64 
-	font-size: 20px;
65 
-	padding: 16px 24px;
66 
-	outline: 0;
67 
-	-webkit-appearance: none;
57 
+        border: 1px solid #ccc;
58 
+        -moz-border-radius: 2px;
59 
+        -webkit-border-radius: 2px;
60 
+        border-radius: 2px;
61 
+        -moz-box-shadow: 0px 0px 3px #666;
62 
+        -webkit-box-shadow: 0px 0px 3px #666;
63 
+        box-shadow: 0px 0px 3px #666;
64 
+        font-size: 20px;
65 
+        padding: 16px 24px;
66 
+        outline: 0;
67 
+        -webkit-appearance: none;
68 68 
 }
69 69
70 70 
 div.centered {
71 
-	text-align: center;
72 
-	width: 450px;
73 
-	margin-left: auto;
74 
-	margin-right: auto;
71 
+        text-align: center;
72 
+        width: 450px;
73 
+        margin-left: auto;
74 
+        margin-right: auto;
75 
+}
76 
+
77 
+div.centeredbutton {
78 
+        text-align: center;
79 
+        width: 450px;
80 
+        margin-left: auto;
81 
+        margin-right: auto;
75 82 
 }
76 83
77 84 
 p.title {
78 
-	font-size: 28px;
79 
-	padding: 0px 0px 20px 0px;
85 
+        font-size: 28px;
86 
+        padding: 0px 0px 20px 0px;
80 87 
 }
81 88
82 89 
 .aligned {
83 
-	list-style-type: none;
84 
-	padding-left: 30px;
90 
+        list-style-type: none;
91 
+        padding-left: 30px;
85 92 
 }
86 93
87 94 
 .aligned .label {
95 
+        float: left;
96 
+        width: 50px;
97 
+        padding: 4px 10px 0px 0px;
98 
+}
99 
+
100 
+div.post {
101 
+        padding: 10px;
102 
+        width: 800px;
103 
+        margin-left: auto;
104 
+        margin-right: auto;
105 
+	margin-top: 35px;
106 
+	margin-bottom: 20px;
107 
+	background: #f4f4f4;
108 
+        -moz-box-shadow: 0px 0px 1px #aaa;
109 
+        -webkit-box-shadow: 0px 0px 1px #aaa;
110 
+        box-shadow: 0px 0px 1px #aaa;
111 
+}
112 
+
113 
+div.postheader {
114 
+        border: 1px solid #ddd;
115 
+        padding: 4px;
116 
+        margin-left: 0px;
117 
+        margin-right: 0px;
118 
+	background: #eee;
119 
+        -moz-box-shadow: 0px 0px 1px #eee;
120 
+        -webkit-box-shadow: 0px 0px 1px #eee;
121 
+        box-shadow: 0px 0px 1px #eee;
122 
+}
123 
+
124 
+p.authorpostnum, p.date {
125 
+        padding: 0px;
126 
+        margin-top: 0px;
127 
+        margin-bottom: 0px;
128 
+}
129 
+
130 
+span.author {
88 131 
 	float: left;
89 
-	width: 50px;
90 
-	padding: 4px 10px 0px 0px;
91 132 
 }
133 
+
134 
+span.postnum {
135 
+	float: right;
136 
+}
137 
+
138 
+div.postbody {
139 
+        padding: 4px 4px 16px;
140 
+        margin-left: 0px;
141 
+        margin-right: 0px;
142 
+}
143 
+
res/posts.html
History View file @ eaeacca
... ... 
@@ -4,8 +4,10 @@
4 4 
  <link rel="stylesheet" type="text/css" href="posts.css">
5 5 
 </head>
6 6 
 <body>
7 
-   <p id='posts'> No posts for now</p>
8 
-   <span class='centeredbutton'><input class='rounded' id='gotonewpost' type ='button' value='Nuevo post'/></span>
7 
+<!-- HEADER_START -->
8 
+<!-- HEADER_END -->
9 
+   <div class='centeredbutton'><input class='rounded' id='gotonewpost' type ='button' value='Nuevo post'/></div>
10 
+   <div id='posts'><p>No posts for now</p></div>
9 11 
  <script src='posts.js'></script>
10 12 
 </body>
11 13 
 </html>
res/posts.js
History View file @ eaeacca
... ... 
@@ -2,35 +2,76 @@
2 2 
 "use strict";
3 3
4 4 
 function request(querytext, func, errorfunc) {
5 
-	var req = new XMLHttpRequest();
6 
-	req.onreadystatechange = function() {
7 
-		if (req.readyState !== 4) {
8 
-			return;
9 
-		}
10 
-		if (req.status !== 200) {
11 
-			errorfunc();
12 
-			return;
13 
-		}
14 
-		func(req.responseText);
15 
-	};
16 
-	req.open("GET",querytext);
17 
-	req.send();
5 
+        var req = new XMLHttpRequest();
6 
+        req.onreadystatechange = function() {
7 
+                if (req.readyState !== 4) {
8 
+                        return;
9 
+                }
10 
+                if (req.status !== 200) {
11 
+                        errorfunc();
12 
+                        return;
13 
+                }
14 
+                func(req.responseText);
15 
+        };
16 
+        req.open("GET",querytext);
17 
+        req.send();
18 18 
 }
19 19
20 20 
 gotonewpost.onclick = function(e) {
21 
-	window.location="/newpost.html"+window.location.search
21 
+        window.location="/newpost.html"+window.location.search
22 22 
 };
23 23
24 24 
 document.getElementById("posts").innerHTML='Loading posts...';
25 25
26 
+var postsarray=[];
27 
+var lastpost=-1;
28 
+var toppost=-1;
29 
+var postsperpage=5;
30 
+
31 
+function changepost(postnum,data) {
32 
+        var p=JSON.parse(data);
33 
+        var postdate=new Date(0);
34 
+        postdate.setUTCSeconds(parseInt(p.date));
35 
+        var header="";
36 
+        var body="";
37 
+        header='<div class="postheader"><p class="authorpostnum">&nbsp;<span class="author">Autor: '+p.author+'</span><span class="postnum">#'+postnum+'</span></p><p class="date">Fecha: '+postdate.toString()+'</p></div>';
38 
+        body='<div class="postbody">'+decodeURIComponent(p.text)+'</div>';
39 
+        postsarray[toppost-postnum]='<div class="post">'+header+body+'</div>' /*+JSON.stringify(p) */;
40 
+}
41 
+
42 
+function clearpost(postnum) {
43 
+        postsarray[toppost-postnum]=undefined;
44 
+}
45 
+
46 
+function displayposts() {
47 
+        var contents=[]
48 
+        for(var i=0;i<postsperpage;i++) {
49 
+                if(postsarray[i]==undefined)
50 
+                        continue;
51 
+                contents.push(postsarray[i]);
52 
+        }
53 
+        if(contents.length==0)
54 
+                contents[0]='No posts loaded';
55 
+        document.getElementById("posts").innerHTML=contents.join("\n");
56 
+}
57 
+
58 
+function refreshpost(postnum) {
59 
+        request("/getpost"+window.location.search+"&n="+postnum, function(r1) {
60 
+                changepost(postnum,r1);
61 
+                displayposts();
62 
+        },function() {
63 
+                clearpost(postnum);
64 
+        });
65 
+}
66 
+
67 
+
26 68 
 request("/lastpost"+window.location.search,function(r) {
27 
-	request("/getpost"+window.location.search+"&n="+r, function(r1) {
28 
-		document.getElementById("posts").innerHTML=r1;
29 
-	},function() {
30 
-		document.getElementById("posts").innerHTML='Error getting posts';
31 
-	});
69 
+        lastpost=r;
70 
+        toppost=r;
71 
+        for(var i=0;i<postsperpage;i++)
72 
+                refreshpost(r-i);
32 73 
 },function() {
33 
-	document.getElementById("posts").innerHTML='There are no posts';
74 
+        document.getElementById("posts").innerHTML='There are no posts';
34 75 
 });
35 76
36 77 
 }());