Pequenas melhorias no javascript (refact)

Leonardo Merlin
1 parent c38ddace
Showing 2 changed files with 71 additions and 62 deletions Show diff stats
index.html
js/main.js
@@ -120,7 +120,7 @@
         </ul>
       </nav>
-      <ul id="proposal-categories">
+      <div id="proposal-categories">
         <div id="proposal-categories-container">
           {{#each article.categories}}
             <li id='proposal-category-{{slug}}' class="proposal-category" data-category="{{slug}}">
@@ -142,7 +142,7 @@
             </div>
           {{/each}}
         </div>
-      </ul>
+      </div>
       <div id="proposal-group" class='hide'>
         <label for="search-input">Selecione um programa para fazer propostas e contar sua experiência.</label>
@@ -3,7 +3,6 @@ var templateSource = document.getElementById(&#39;proposal-template&#39;).innerHTML;
 // compile the template
 var template = Handlebars.compile(templateSource);
-
 var supportProposalTemplate = Handlebars.compile(document.getElementById('support-proposal-template').innerHTML);
 var loginTemplate = Handlebars.compile(document.getElementById('login').innerHTML);
 var resultsTemplate = Handlebars.compile(document.getElementById('results').innerHTML);
@@ -40,8 +39,8 @@ if( isLocalhost ){
 $.getJSON(noosferoAPI)
   .done(function( data ) {
-    data['host'] = host;
-    data['private_token'] = private_token;
+    data.host = host;
+    data.private_token = private_token;
     resultsPlaceholder.innerHTML = template(data);
     $('.login-container').html(loginTemplate());
     $('.countdown').maxlength({text: '%left caracteres restantes'});
@@ -84,20 +83,6 @@ $.getJSON(noosferoAPI)
       // Update URL and Navigate
       updateHash($link.attr('href'));
     });
-//TODO remove this
-//    $( '.proposal-category a' ).hover(function(event){
-//      $(this).stop().effect('shake', {distance:20}, 700);
-//      $(form).siblings('.success-sent').show();
-//
-//      if(!$(this)..siblings.hasClass('animated')){
-//      if(!$(this).hasClass('animated')){
-//        $(this).addClass('animated');
-//        $(this).stop().effect('shake', {distance:20}, 700);
-//      }
-//      }, 
-//      function(){
-//        $(this).removeClass('animated');
-//      });
     $( '.proposal-category .go-back' ).on('click touchstart', function(event){
       event.preventDefault();
@@ -116,22 +101,24 @@ $.getJSON(noosferoAPI)
       updateHash(newHash);
     });
-    $( '.send-button a' ).on('click touchstart', function(event){
+    $( '.send-button a' ).on('click touchstart', function(e){
+      e.preventDefault();
+      
       //display form to send proposal (or login form for non-logged users)
       var $this = $(this);
       loginButton = $this.parents('.send-button');
       loginButton.hide();
       $this.parents('.success-proposal-sent').hide();
       loginCallback(logged_in);
-      event.preventDefault();
     });
-    $( '#display-contrast' ).on('click touchstart', function(event){
+    $( '#display-contrast' ).on('click touchstart', function(e){
+      e.preventDefault();
       $('#proposal-result').toggleClass('contrast');
     });
-    $( '.show_body a' ).on('click touchstart', function(event){
-      event.preventDefault();
+    $( '.show_body a' ).on('click touchstart', function(e){
+      e.preventDefault();
       var $link = $(this);
       var item = $link.data('target');
@@ -140,8 +127,8 @@ $.getJSON(noosferoAPI)
       updateHash($link.attr('href'));
     });
-    $( '.go-to-proposal-button a' ).on('click touchstart', function(event){
-      event.preventDefault();
+    $( '.go-to-proposal-button a' ).on('click touchstart', function(e){
+      e.preventDefault();
       var $link = $(this);
       var item = $link.data('target');
@@ -150,7 +137,9 @@ $.getJSON(noosferoAPI)
       updateHash($link.attr('href'));
     });
-    $( '.proposal-selection' ).change(function(event){
+    $( '.proposal-selection' ).change(function(e){
+      e.preventDefault();
+
       display_proposal('proposal-item-' + this.value);
     });
@@ -159,7 +148,7 @@ $.getJSON(noosferoAPI)
       availableTags.push({ label: $(this).text(), value: $(this).attr('href')});
     });
-    $( "#search-input" ).autocomplete({
+    $( '#search-input' ).autocomplete({
       source: availableTags,
       minLength: 3,
       select: function( event, ui ) {
@@ -178,22 +167,23 @@ $.getJSON(noosferoAPI)
       e.preventDefault();
       var proposal_id = this.id.split('-').pop();
       var form = this;
+      var $form = $(this);
       var message = $(form).find('.message');
       message.hide();
       message.text('');
       $.ajax({
         type: 'post',
         url: host + '/api/v1/articles/' + proposal_id + '/children',
-        data: $('#'+this.id).serialize() + "&private_token="+private_token+"&fields=id&article[name]=article_"+guid()
+        data: $('#'+this.id).serialize() + '&private_token=' + private_token + '&fields=id&article[name]=article_' + guid()
       })
       .done(function( data ) {
         form.reset();
-        $(form).hide();
-        $(form).siblings('.success-sent').show();
+        $form.hide();
+        $form.siblings('.success-sent').show();
       })
       .fail(function( jqxhr, textStatus, error ) {
-        var err = textStatus + ", " + error;
-        console.log( "Request Failed: " + err );
+        var err = textStatus + ', ' + error;
+        console.log( 'Request Failed: ' + err );
         message.show();
         message.text('Não foi possível enviar.');
        });
@@ -201,33 +191,39 @@ $.getJSON(noosferoAPI)
   })
   .fail(function( jqxhr, textStatus, error ) {
-    var err = textStatus + ", " + error;
-    console.log( "Request Failed: " + err );
+    var err = textStatus + ', ' + error;
+    console.log( 'Request Failed: ' + err );
   });
 function loadRandomProposal(topic_id, private_token) {
-  $(".no-proposals").hide();
-  $(".loading").show();
-  $('.random-proposal').html('');
+  var $noProposals = $('.no-proposals');
+  var $loading = $('.loading');
+  var $randomProposal = $('.random-proposal');
+  var $body = $(document.body);
+  
+  // reset view
+  $noProposals.hide();
+  $loading.show();
+  $randomProposal.html('');
+
   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';
   $.getJSON(url).done(function( data ) {
-    $(".loading").hide();
+    $loading.hide();
-    if(data.articles.length == 0) {
-      $(".no-proposals").show();
+    if(data.articles.length === 0) {
+      $noProposals.show();
       return;
     }
     var article = data.articles[0];
-    $('.random-proposal').html(supportProposalTemplate(article));
-    // $(".abstract").dotdotdot();
-    $(document.body).off('click', '.vote-actions .skip');
-    $(document.body).on('click', '.vote-actions .skip', function(e) {
+    $randomProposal.html(supportProposalTemplate(article));
+    $body.off('click', '.vote-actions .skip');
+    $body.on('click', '.vote-actions .skip', function(e) {
       loadRandomProposal(topic_id, private_token);
       e.preventDefault();
     });
-    $(document.body).off('click', '.vote-actions .like');
-    $(document.body).on('click', '.vote-actions .like', function(e) {
+    $body.off('click', '.vote-actions .like');
+    $body.on('click', '.vote-actions .like', function(e) {
       $.ajax({
         type: 'post',
         url: host + '/api/v1/articles/' + article.id + '/vote',
@@ -241,18 +237,29 @@ function loadRandomProposal(topic_id, private_token) {
       e.preventDefault();
     });
-    $(document.body).off('click', '.vote-result');
-    $(document.body).on('click', '.vote-result', function(e) {
-      $('.results-container').toggle();
-      if($('.results-container').is(":visible")) {
-        $('.results-container .loading').show();
-        $('.results-container .results-content').hide();
+    $body.off('click', '.vote-result');
+    $body.on('click', '.vote-result', function(e) {
+      
+      var $resultsContainer = $('.results-container');
+      
+      $resultsContainer.toggle();
+      
+      if($resultsContainer.is(':visible')) {
+        var $loading = $resultsContainer.find('.loading');
+        var $resultsContent = $resultsContainer.find('.results-content');
+        
+        $loading.show();
+        $resultsContent.hide();
+
         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';
         $.getJSON(url).done(function( data ) {
-          $('.results-container').html(resultsTemplate(data));
+          
+          $resultsContainer.html(resultsTemplate(data));
           $('.results-container .loading').hide();
           $('.results-container .results-content').show();
-          $("html, body").animate({ scrollTop: $(document).height() }, "fast");
+          $('html, body').animate({
+            scrollTop: $(document).height()
+          }, 'fast');
         });
         $('.experience-proposal-container').hide();
         $('.talk-proposal-container').hide();
@@ -280,7 +287,9 @@ function loginCallback(loggedIn, token) {
   $('.login .message').text('');
   if(logged_in) {
-    if(token) private_token = token;
+    if(token){
+      private_token = token;
+    }
     loginButton.siblings('.save-article-form').show();
     loginButton.siblings('.save-article-form .message').show();
     loginButton.siblings('.login-container').hide();
@@ -297,7 +306,7 @@ function oauthPluginHandleLoginResult(loggedIn, token) {
 jQuery(document).ready(function($) {
   $(document).on('click', '.login-action', function(e) {
-    var message = $('.login .message')
+    var message = $('.login .message');
     message.hide();
     message.text('');
     $.ajax({
@@ -345,7 +354,7 @@ function display_proposals_tab(){
   $('#proposal-group').show();
   $('#nav-proposal-group a').addClass('active');
   $('#nav-proposal-categories a').removeClass('active');
-  $(".proposal-item p").dotdotdot();
+  $('.proposal-item p').dotdotdot();
   $('#content').show();
   $('nav').show();
@@ -387,7 +396,7 @@ function display_proposal_detail(){
   $('.talk-proposal-container').hide();
   $('.body').show();
-  $("html, body").animate({ scrollTop: 0 }, "fast");
+  $('html, body').animate({ scrollTop: 0 }, 'fast');
 }
 function display_proposal_by_category(item){
@@ -403,7 +412,7 @@ function display_proposal_by_category(item){
     $('.proposal-category-items').hide();
     $('.proposal-detail').hide();
     $item.toggle( 'blind', 1000 );
-    $(".proposal-item p").dotdotdot();
+    $('.proposal-item p').dotdotdot();
     $('.proposal-category .arrow-box').hide();
     var categorySlug = $item.data('category');
     $('#proposal-category-' + categorySlug).find('.arrow-box').show();
@@ -480,11 +489,11 @@ function navigateToCategory(categoryId){
   if(categoryId === undefined){
     display_category_tab();
   }else{
-    display_proposal_by_category('proposal-item-' + categoryId)
+    display_proposal_by_category('proposal-item-' + categoryId);
   }
 }
-if("onhashchange" in window){
+if('onhashchange' in window){
   window.onhashchange = locationHashChanged;
 }else{
   console.log('The browser not supports the hashchange event!');
	@@ -120,7 +120,7 @@		@@ -120,7 +120,7 @@
120	</ul>	120	</ul>
121	</nav>	121	</nav>
122		122
123	- <ul id="proposal-categories">	123	+ <div id="proposal-categories">
124	<div id="proposal-categories-container">	124	<div id="proposal-categories-container">
125	{{#each article.categories}}	125	{{#each article.categories}}
126	<li id='proposal-category-{{slug}}' class="proposal-category" data-category="{{slug}}">	126	<li id='proposal-category-{{slug}}' class="proposal-category" data-category="{{slug}}">
	@@ -142,7 +142,7 @@		@@ -142,7 +142,7 @@
142	</div>	142	</div>
143	{{/each}}	143	{{/each}}
144	</div>	144	</div>
145	- </ul>	145	+ </div>
146		146
147	<div id="proposal-group" class='hide'>	147	<div id="proposal-group" class='hide'>
148	<label for="search-input">Selecione um programa para fazer propostas e contar sua experiência.</label>	148	<label for="search-input">Selecione um programa para fazer propostas e contar sua experiência.</label>