-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
216 lines (200 loc) · 7.63 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
<!DOCTYPE html>
<html>
<head>
<title>CouncilConnect PDX Demo App</title>
<style>
@import url(http://fonts.googleapis.com/css?family=Istok+Web:400,700,400italic&v2);
body { font-family:'Istok Web'; padding:30px 0; background:url(http://www.portlandonline.com/councilagenda/images/login-bg.png); }
#wrapper {
width:700px;
padding:15px;
background:#fff;
margin:0 auto;
border-radius:5px;
-moz-box-shadow:rgba(0,0,0,0.5) 0 0 10px;
-webkit-box-shadow:rgba(0,0,0,0.5) 0 0 10px;
box-shadow:rgba(0,0,0,0.5) 0 0 10px;
}
#logo,.loading img { display:block; margin:0 auto; }
#current-agenda-items { margin:0; padding:0; }
#current-agenda-items li {
cursor:pointer;
font-size:14px;
list-style:none;
border:1px solid #DEDEDE;
margin:10px 0;
padding:5px 0 0 50px;
border-radius:5px;
background: #f9f9f9;
position:relative;
}
#current-agenda-items li:hover { background:#f3f3f3; }
#current-agenda-items li span { display:block; color:#666; font-size:20px; position:absolute; left:5px; }
.item-content,#disqus_thread { display:none; }
.dsq-brlink { font-size:10px; }
#disqus_thread { margin:5px 0 0 0; padding:15px 0 0 0; border-top:1px dashed #ccc;}
</style>
</head>
<body>
<div id="wrapper">
<a href="#!/home"><img id="logo" src="http://www.portlandonline.com/councilagenda/images/login-logo.png"></a>
<div id="home-wrap">
<p>Click on an item to join a conversation about the agenda item.</p>
<p class="loading"><img src="http://www.preloaders.net/preloaders/2/preview.gif"></p>
<ul id="current-agenda-items"></ul>
</div>
<div id="item-listing">
<div class="content"></div>
<div id="disqus_thread">
</div>
</div>
<a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script id="template-list-item" language="text/template">
<li id="item-{{id}}" class="item"><span>{{id}}</span> {{content}}</li>
</script>
<script id="template-item-html" language="text/template">
<div class="item-content" id="content-{{id}}">
<h2>{{heading}}</h2>
<p>Bureaus affected:</p>
<ul>
{{bureau-list}}
</ul>
<p>{{content}}</p>
</div>
</script>
<script>
/**
* Setting up Disqus
*/
var disqus_shortname = 'pdxcouncilagenda';
var disqus_developer = 1;
var disqus_identifier = 'homepage';
var disqus_url = 'http://oscargodson.com/labs/agenda-demo-app';
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
/**
* Function for updating the comments for an AJAX app like this
*/
var updateDisqus = function(id,url){
DISQUS.reset({
reload: true,
config: function () {
this.page.identifier = id;
this.page.url = url;
}
});
}
/**
* Checks if the current URL is equal to the home page hash, or has no hash
* @returns {Boolean} returns true if it _is_ the home page and false if not
*/
var isHome = function(){
if(window.location.hash == '#!/home' || window.location.hash == ""){
return true;
}
else{
return false
}
}
/**
* Simple JS template parser
* @param {String} str the template text (string)
* @param {Object} json the JSON containing the key:value of the {{tag}}:new-value
* @returns {String} the new string with the {{tag}}s replaced with the values given in the json param
*/
var template = function(str,json) {
for(x in json){
pattern = new RegExp('{{'+x+'}}','g');
if(str !== null){
str = str.replace(pattern,json[x]);
}
}
return str;
};
/**
* openItem() just checks if it is in fact an agenda item page and if so
* fades out the home page and in the agenda item page and also updates
* Disqus and displays the new comment form
*/
var openItem = function(){
if(window.location.hash.indexOf('item') > -1){
var itemId = window.location.hash.split('/')[2];
$('#home-wrap').fadeOut(250,function(){
$('#content-'+itemId).fadeIn(250,function(){
$('#disqus_thread').show();
});
updateDisqus('item_'+itemId,window.location.href);
});
}
}
/**
* What happens whenever the hash in the URL changes
*/
window.onhashchange = function(){
if(isHome()){
$('.item-content').fadeOut(250,function(){
$('#home-wrap').fadeIn();
//...but for now, we want to just hide homepage comments
$('#disqus_thread').hide();
});
}
else{
openItem();
}
}
/**
* Setup the click events on the items.
* Simply parses out the id based on the id attribute then updates the URL
* then window.onhashchange will figure the rest out.
*/
$('body').delegate('.item','click',function(){
var itemId = $(this).attr('id').split('-')[1];
window.location.hash = '#!/item/'+itemId;
});
/**
* Loads the current agenda then does the following to it
*/
$.getJSON('http://api.portlandoregon.gov/councilagenda/agendas/?callback=?',function(json){
if(isHome()){
//Hide the comment form if it's the home page
$('#disqus_thread').hide();
}
else{
//Go to an item page if it isn't the home page
openItem();
}
//Get rid of the loader gif now
$('.loading').remove();
var sessions = json.agendas[1].sessions;
//For every session
for(s in sessions){
//For every item in this session
for(i in sessions[s].items){
var item = sessions[s].items[i];
var bureauHTML = '';
//Because there can be multiple bureaus, we're going to save all the HTML we want to append for the bureaus
for(b in item.bureaus){ bureauHTML = bureauHTML+'<li>'+item.bureaus[b]+'</li>'; }
var tagRefs = {
"id" : item.id,
"content" : item.topic,
"heading" : item.heading,
"bureau-list" : bureauHTML
}
//Convert the tags to real data via the tagRefs var which gives references between the tags and actual content
var listHTML = template($('#template-list-item').html(),tagRefs);
var itemPageHTML = template($('#template-item-html').html(),tagRefs);
//Add a button on the home page (it's actually a simple <li> though.)
$('#current-agenda-items').append(listHTML);
//Now, add the agenda item into the DOM for easy access later. Less HTTP requests, the more happy the user is
$('#item-listing .content').append(itemPageHTML);
}
}
});
</script>
</body>
</html>