Commit c4dda55a2e35d71e3226137373880bfc0b25798a

Authored by Leonardo Merlin
1 parent c38ddace

Pequenas melhorias no javascript (refact)

Showing 2 changed files with 71 additions and 62 deletions   Show diff stats
index.html
... ... @@ -120,7 +120,7 @@
120 120 </ul>
121 121 </nav>
122 122  
123   - <ul id="proposal-categories">
  123 + <div id="proposal-categories">
124 124 <div id="proposal-categories-container">
125 125 {{#each article.categories}}
126 126 <li id='proposal-category-{{slug}}' class="proposal-category" data-category="{{slug}}">
... ... @@ -142,7 +142,7 @@
142 142 </div>
143 143 {{/each}}
144 144 </div>
145   - </ul>
  145 + </div>
146 146  
147 147 <div id="proposal-group" class='hide'>
148 148 <label for="search-input">Selecione um programa para fazer propostas e contar sua experiência.</label>
... ...
js/main.js
... ... @@ -3,7 +3,6 @@ var templateSource = document.getElementById(&#39;proposal-template&#39;).innerHTML;
3 3  
4 4 // compile the template
5 5 var template = Handlebars.compile(templateSource);
6   -
7 6 var supportProposalTemplate = Handlebars.compile(document.getElementById('support-proposal-template').innerHTML);
8 7 var loginTemplate = Handlebars.compile(document.getElementById('login').innerHTML);
9 8 var resultsTemplate = Handlebars.compile(document.getElementById('results').innerHTML);
... ... @@ -40,8 +39,8 @@ if( isLocalhost ){
40 39  
41 40 $.getJSON(noosferoAPI)
42 41 .done(function( data ) {
43   - data['host'] = host;
44   - data['private_token'] = private_token;
  42 + data.host = host;
  43 + data.private_token = private_token;
45 44 resultsPlaceholder.innerHTML = template(data);
46 45 $('.login-container').html(loginTemplate());
47 46 $('.countdown').maxlength({text: '%left caracteres restantes'});
... ... @@ -84,20 +83,6 @@ $.getJSON(noosferoAPI)
84 83 // Update URL and Navigate
85 84 updateHash($link.attr('href'));
86 85 });
87   -//TODO remove this
88   -// $( '.proposal-category a' ).hover(function(event){
89   -// $(this).stop().effect('shake', {distance:20}, 700);
90   -// $(form).siblings('.success-sent').show();
91   -//
92   -// if(!$(this)..siblings.hasClass('animated')){
93   -// if(!$(this).hasClass('animated')){
94   -// $(this).addClass('animated');
95   -// $(this).stop().effect('shake', {distance:20}, 700);
96   -// }
97   -// },
98   -// function(){
99   -// $(this).removeClass('animated');
100   -// });
101 86  
102 87 $( '.proposal-category .go-back' ).on('click touchstart', function(event){
103 88 event.preventDefault();
... ... @@ -116,22 +101,24 @@ $.getJSON(noosferoAPI)
116 101 updateHash(newHash);
117 102 });
118 103  
119   - $( '.send-button a' ).on('click touchstart', function(event){
  104 + $( '.send-button a' ).on('click touchstart', function(e){
  105 + e.preventDefault();
  106 +
120 107 //display form to send proposal (or login form for non-logged users)
121 108 var $this = $(this);
122 109 loginButton = $this.parents('.send-button');
123 110 loginButton.hide();
124 111 $this.parents('.success-proposal-sent').hide();
125 112 loginCallback(logged_in);
126   - event.preventDefault();
127 113 });
128 114  
129   - $( '#display-contrast' ).on('click touchstart', function(event){
  115 + $( '#display-contrast' ).on('click touchstart', function(e){
  116 + e.preventDefault();
130 117 $('#proposal-result').toggleClass('contrast');
131 118 });
132 119  
133   - $( '.show_body a' ).on('click touchstart', function(event){
134   - event.preventDefault();
  120 + $( '.show_body a' ).on('click touchstart', function(e){
  121 + e.preventDefault();
135 122  
136 123 var $link = $(this);
137 124 var item = $link.data('target');
... ... @@ -140,8 +127,8 @@ $.getJSON(noosferoAPI)
140 127 updateHash($link.attr('href'));
141 128 });
142 129  
143   - $( '.go-to-proposal-button a' ).on('click touchstart', function(event){
144   - event.preventDefault();
  130 + $( '.go-to-proposal-button a' ).on('click touchstart', function(e){
  131 + e.preventDefault();
145 132  
146 133 var $link = $(this);
147 134 var item = $link.data('target');
... ... @@ -150,7 +137,9 @@ $.getJSON(noosferoAPI)
150 137 updateHash($link.attr('href'));
151 138 });
152 139  
153   - $( '.proposal-selection' ).change(function(event){
  140 + $( '.proposal-selection' ).change(function(e){
  141 + e.preventDefault();
  142 +
154 143 display_proposal('proposal-item-' + this.value);
155 144 });
156 145  
... ... @@ -159,7 +148,7 @@ $.getJSON(noosferoAPI)
159 148 availableTags.push({ label: $(this).text(), value: $(this).attr('href')});
160 149 });
161 150  
162   - $( "#search-input" ).autocomplete({
  151 + $( '#search-input' ).autocomplete({
163 152 source: availableTags,
164 153 minLength: 3,
165 154 select: function( event, ui ) {
... ... @@ -178,22 +167,23 @@ $.getJSON(noosferoAPI)
178 167 e.preventDefault();
179 168 var proposal_id = this.id.split('-').pop();
180 169 var form = this;
  170 + var $form = $(this);
181 171 var message = $(form).find('.message');
182 172 message.hide();
183 173 message.text('');
184 174 $.ajax({
185 175 type: 'post',
186 176 url: host + '/api/v1/articles/' + proposal_id + '/children',
187   - data: $('#'+this.id).serialize() + "&private_token="+private_token+"&fields=id&article[name]=article_"+guid()
  177 + data: $('#'+this.id).serialize() + '&private_token=' + private_token + '&fields=id&article[name]=article_' + guid()
188 178 })
189 179 .done(function( data ) {
190 180 form.reset();
191   - $(form).hide();
192   - $(form).siblings('.success-sent').show();
  181 + $form.hide();
  182 + $form.siblings('.success-sent').show();
193 183 })
194 184 .fail(function( jqxhr, textStatus, error ) {
195   - var err = textStatus + ", " + error;
196   - console.log( "Request Failed: " + err );
  185 + var err = textStatus + ', ' + error;
  186 + console.log( 'Request Failed: ' + err );
197 187 message.show();
198 188 message.text('Não foi possível enviar.');
199 189 });
... ... @@ -201,33 +191,39 @@ $.getJSON(noosferoAPI)
201 191  
202 192 })
203 193 .fail(function( jqxhr, textStatus, error ) {
204   - var err = textStatus + ", " + error;
205   - console.log( "Request Failed: " + err );
  194 + var err = textStatus + ', ' + error;
  195 + console.log( 'Request Failed: ' + err );
206 196 });
207 197  
208 198 function loadRandomProposal(topic_id, private_token) {
209   - $(".no-proposals").hide();
210   - $(".loading").show();
211   - $('.random-proposal').html('');
  199 + var $noProposals = $('.no-proposals');
  200 + var $loading = $('.loading');
  201 + var $randomProposal = $('.random-proposal');
  202 + var $body = $(document.body);
  203 +
  204 + // reset view
  205 + $noProposals.hide();
  206 + $loading.show();
  207 + $randomProposal.html('');
  208 +
212 209 var url = host + '/api/v1/articles/' + topic_id + '/children' + '?private_token=' + private_token + '&limit=1&order=random()&_='+new Date().getTime()+'&fields=id,name,abstract,created_by&content_type=ProposalsDiscussionPlugin::Proposal';
213 210 $.getJSON(url).done(function( data ) {
214   - $(".loading").hide();
  211 + $loading.hide();
215 212  
216   - if(data.articles.length == 0) {
217   - $(".no-proposals").show();
  213 + if(data.articles.length === 0) {
  214 + $noProposals.show();
218 215 return;
219 216 }
220 217  
221 218 var article = data.articles[0];
222   - $('.random-proposal').html(supportProposalTemplate(article));
223   - // $(".abstract").dotdotdot();
224   - $(document.body).off('click', '.vote-actions .skip');
225   - $(document.body).on('click', '.vote-actions .skip', function(e) {
  219 + $randomProposal.html(supportProposalTemplate(article));
  220 + $body.off('click', '.vote-actions .skip');
  221 + $body.on('click', '.vote-actions .skip', function(e) {
226 222 loadRandomProposal(topic_id, private_token);
227 223 e.preventDefault();
228 224 });
229   - $(document.body).off('click', '.vote-actions .like');
230   - $(document.body).on('click', '.vote-actions .like', function(e) {
  225 + $body.off('click', '.vote-actions .like');
  226 + $body.on('click', '.vote-actions .like', function(e) {
231 227 $.ajax({
232 228 type: 'post',
233 229 url: host + '/api/v1/articles/' + article.id + '/vote',
... ... @@ -241,18 +237,29 @@ function loadRandomProposal(topic_id, private_token) {
241 237 e.preventDefault();
242 238 });
243 239  
244   - $(document.body).off('click', '.vote-result');
245   - $(document.body).on('click', '.vote-result', function(e) {
246   - $('.results-container').toggle();
247   - if($('.results-container').is(":visible")) {
248   - $('.results-container .loading').show();
249   - $('.results-container .results-content').hide();
  240 + $body.off('click', '.vote-result');
  241 + $body.on('click', '.vote-result', function(e) {
  242 +
  243 + var $resultsContainer = $('.results-container');
  244 +
  245 + $resultsContainer.toggle();
  246 +
  247 + if($resultsContainer.is(':visible')) {
  248 + var $loading = $resultsContainer.find('.loading');
  249 + var $resultsContent = $resultsContainer.find('.results-content');
  250 +
  251 + $loading.show();
  252 + $resultsContent.hide();
  253 +
250 254 var url = host + '/api/v1/articles/' + topic_id + '/children' + '?private_token=' + private_token + '&limit=10&order=votes_score&fields=id,name,abstract,votes_for,votes_against&content_type=ProposalsDiscussionPlugin::Proposal';
251 255 $.getJSON(url).done(function( data ) {
252   - $('.results-container').html(resultsTemplate(data));
  256 +
  257 + $resultsContainer.html(resultsTemplate(data));
253 258 $('.results-container .loading').hide();
254 259 $('.results-container .results-content').show();
255   - $("html, body").animate({ scrollTop: $(document).height() }, "fast");
  260 + $('html, body').animate({
  261 + scrollTop: $(document).height()
  262 + }, 'fast');
256 263 });
257 264 $('.experience-proposal-container').hide();
258 265 $('.talk-proposal-container').hide();
... ... @@ -280,7 +287,9 @@ function loginCallback(loggedIn, token) {
280 287 $('.login .message').text('');
281 288  
282 289 if(logged_in) {
283   - if(token) private_token = token;
  290 + if(token){
  291 + private_token = token;
  292 + }
284 293 loginButton.siblings('.save-article-form').show();
285 294 loginButton.siblings('.save-article-form .message').show();
286 295 loginButton.siblings('.login-container').hide();
... ... @@ -297,7 +306,7 @@ function oauthPluginHandleLoginResult(loggedIn, token) {
297 306  
298 307 jQuery(document).ready(function($) {
299 308 $(document).on('click', '.login-action', function(e) {
300   - var message = $('.login .message')
  309 + var message = $('.login .message');
301 310 message.hide();
302 311 message.text('');
303 312 $.ajax({
... ... @@ -345,7 +354,7 @@ function display_proposals_tab(){
345 354 $('#proposal-group').show();
346 355 $('#nav-proposal-group a').addClass('active');
347 356 $('#nav-proposal-categories a').removeClass('active');
348   - $(".proposal-item p").dotdotdot();
  357 + $('.proposal-item p').dotdotdot();
349 358  
350 359 $('#content').show();
351 360 $('nav').show();
... ... @@ -387,7 +396,7 @@ function display_proposal_detail(){
387 396 $('.talk-proposal-container').hide();
388 397  
389 398 $('.body').show();
390   - $("html, body").animate({ scrollTop: 0 }, "fast");
  399 + $('html, body').animate({ scrollTop: 0 }, 'fast');
391 400 }
392 401  
393 402 function display_proposal_by_category(item){
... ... @@ -403,7 +412,7 @@ function display_proposal_by_category(item){
403 412 $('.proposal-category-items').hide();
404 413 $('.proposal-detail').hide();
405 414 $item.toggle( 'blind', 1000 );
406   - $(".proposal-item p").dotdotdot();
  415 + $('.proposal-item p').dotdotdot();
407 416 $('.proposal-category .arrow-box').hide();
408 417 var categorySlug = $item.data('category');
409 418 $('#proposal-category-' + categorySlug).find('.arrow-box').show();
... ... @@ -480,11 +489,11 @@ function navigateToCategory(categoryId){
480 489 if(categoryId === undefined){
481 490 display_category_tab();
482 491 }else{
483   - display_proposal_by_category('proposal-item-' + categoryId)
  492 + display_proposal_by_category('proposal-item-' + categoryId);
484 493 }
485 494 }
486 495  
487   -if("onhashchange" in window){
  496 +if('onhashchange' in window){
488 497 window.onhashchange = locationHashChanged;
489 498 }else{
490 499 console.log('The browser not supports the hashchange event!');
... ...