-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.ejs
172 lines (147 loc) · 7.27 KB
/
index.ejs
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
<!doctype html>
<html>
<head>
<title>Wikify. Navegue na Wikipedia usando sua voz</title>
<link href="//netdna.bootstrapcdn.com/bootswatch/3.1.0/readable/bootstrap.min.css" rel="stylesheet">
<link href="public/stylesheets/style.css" rel="stylesheet">
<style>
#loader{
display: none;
}
</style>
</head>
<body>
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">Wikify</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><iframe src="http://ghbtns.com/github-btn.html?user=jorgeguberte&repo=wikify&type=fork"
allowtransparency="true" frameborder="0" scrolling="0" width="53" height="30"></iframe></li>
</ul>
</nav>
<div class="col-lg-pull-6 alert alert-info" id="loader">Carregando...</div>
<div class="page" id="page">
</div><!--/page-->
</div><!--/container-->
<script type="text-x-handlebars-template" id="home-template">
<div class="jumbotron">
<h1>Explore a Wikipedia usando sua voz</h1>
<p>Autorize o uso do microfone, e então diga <em>Buscar</em>, seguido do termo a ser buscado.</p>
<p>Para rolar a página, diga <em>Desce</em> ou <em>Sobe</em></p>
</div>
<div class="row">
<div class="col-lg-10">
<p class="lead">Stack</p>
<ul class="list-unstyled list-inline">
<li><span class="glyphicon glyphicon-ok"></span> <a href="http://nodejs.org/" target="_blank">Node.js</a></li>
<li><span class="glyphicon glyphicon-ok"></span> <a href="http://expressjs.com" target="_blank">Express</a></li>
<li><span class="glyphicon glyphicon-ok"></span> <a href="http://backbonejs.org/" target="_blank">Backbone.js</a></li>
<li><span class="glyphicon glyphicon-ok"></span> <a href="http://jquery.org/" target="_blank">jQuery</a></li>
<li><span class="glyphicon glyphicon-ok"></span> <a href="https://npmjs.org/package/wikijs" target="_blank">Wikijs</a></li>
<li><span class="glyphicon glyphicon-ok"></span> <a href="https://www.talater.com/annyang/" target="_blank">Annyang</a></li>
<li><span class="glyphicon glyphicon-ok"></span> <a href="http://getbootstrap.com/" target="_blank">Bootstrap</a> | <a href="http://bootswatch.com/readable/" target="_blank">Tema do Bootswatch</a></li>
</ul>
</div>
</div>
</script>
<script type="text/x-handlebars-template" id="article-template">
<h1>{{title}}</h1>
{{{content}}}
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0-rc2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.1/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.min.js"></script>
<script src="public/javascripts/scrollTo.js"></script>
<script src="public/javascripts/annyang.min.js"></script>
<script>
$.ajaxPrefilter(function(options, originalOptions, jqXHR){
//options.url = 'http://morning-dusk-7497.herokuapp.com' + options.url;
options.url = 'http://localhost:3000'+options.url;
});
//Models
var Article = Backbone.Model.extend({
urlRoot: '/wiki',
url: function () {return this.urlRoot + "/" + encodeURIComponent(this.get("term"))}
});
//Views
var HomeView = Backbone.View.extend({
el: '.page',
render: function(){
var template = Handlebars.compile($('#home-template').html());
this.$el.html(template);
}
});
var ArticleView = Backbone.View.extend({
el: '.page',
render: function(options){
$('#loader').css('display','block');
var that = this;
var article = new Article({term:options.name});
article.fetch({
success: function(serverResponse){
var data= {content:serverResponse.attributes.html, title:options.name};
var source = $('#article-template').html();
var template = Handlebars.compile(source);
var html = template(data);
$('#loader').css('display','none');
that.$el.html(html);
$('.page a').each(function(){
var href = '#'+$(this).attr('href');
$(this).attr('href', href);
});
}
});
}
});
//Router
var Router = Backbone.Router.extend({
routes: {
'':'home',
'wiki/:name':'getArticle'
}
});
var router = new Router();
var articleView = new ArticleView();
var homeView = new HomeView();
router.on('route:home', function(){
homeView.render();
});
router.on('route:getArticle', function(name){
articleView.render({name:name});
});
Backbone.history.start();
$('#submitButton').click(function(e){
e.preventDefault();
var searchTerm = $('#searchTerm').val();
router.navigate('#wiki/'+searchTerm,{trigger: true});
});
//Annyang
if(annyang){
annyang.setLanguage('pt-BR');
var commands = {
'buscar *term': function(term){
console.log('Got stuff for '+term);
router.navigate('#wiki/'+term, {trigger:true});
},
'desce': function(){
var scrolled = $(document).scrollTop();
console.log(scrolled);
$('html').scrollTo(scrolled+300);
scrolled += 300;
},
'sobe': function(){
var scrolled = $(document).scrollTop();
$('html').scrollTo(scrolled-300);
scrolled -= 300;
}
};
annyang.addCommands(commands);
annyang.start();
}
</script>
</body>
</html>