From a4ac7568a0487233202437722c682eef9a0e0016 Mon Sep 17 00:00:00 2001 From: Leonardo Merlin Date: Thu, 23 Apr 2015 20:09:22 -0300 Subject: [PATCH] Fix #41 - Router em URL com HASH e HistoryAPI --- index.html | 28 ++++++++++++++++++---------- js/handlebars-helpers.js | 3 ++- js/main.js | 197 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------------------------------------------ sass/_proposal_group.scss | 3 +-- 4 files changed, 176 insertions(+), 55 deletions(-) diff --git a/index.html b/index.html index 379de67..8dea5c3 100644 --- a/index.html +++ b/index.html @@ -24,13 +24,17 @@
- {{{article.body}}} +

{{{article.body}}}

@@ -38,12 +42,12 @@
{{#each article.categories}}
  • - {{#link name id}}{{/link}} + {{name}}
    • {{/each}} {{#each article.categories}} -
    +
    {{name}}
    @@ -77,7 +81,7 @@
      {{#each categories}}
    • - {{#link name id}}{{/link}} + {{name}} {{#select_proposal ../../article.children slug ../id}}{{/select_proposal}}
      • {{/each}} @@ -89,13 +93,18 @@
    {{title}}
    {{{abstract}}}
    -
    Conheça o Programa
    +
    + Conheça o Programa +
    {{{body}}} -
    -
    Agora contribua para a melhoria desse programa     +
    + + + Agora contribua para a melhoria desse programa +
    @@ -173,7 +182,6 @@
    -
    {{/each}} diff --git a/js/handlebars-helpers.js b/js/handlebars-helpers.js index 530dee9..15fedd5 100644 --- a/js/handlebars-helpers.js +++ b/js/handlebars-helpers.js @@ -2,7 +2,8 @@ Handlebars.registerHelper('link', function(text, url) { text = Handlebars.Utils.escapeExpression(text); url = Handlebars.Utils.escapeExpression(url); - var result = '' + text + ''; + // Exemplo: {{name}} + var result = '' + text + ''; return new Handlebars.SafeString(result); }); diff --git a/js/main.js b/js/main.js index b5c943b..f33ffc2 100644 --- a/js/main.js +++ b/js/main.js @@ -40,52 +40,55 @@ $.getJSON(noosferoAPI) $('.login-container').html(loginTemplate()); $('.countdown').maxlength({text: '%left caracteres restantes'}); - url = $(location).attr('href').split('#').pop(); - if(url.match(/proposal-item-[0-9]+/)){ - display_proposal(url); - } + navigateTo(window.location.hash); + //Actions for links $( '#nav-proposal-categories a' ).click(function(event){ - //Display the category tab - $('#proposal-group').hide(); - $('#proposal-categories').show(); - $('#nav-proposal-categories a').addClass('active'); - $('#nav-proposal-group a').removeClass('active'); - $('.proposal-category-items').hide(); - $('.proposal-category .arrow-box').hide(); - $('.proposal-detail').hide(); event.preventDefault(); + + var $link = $(this); + + // Update URL + updateHash($link.attr('href')); + + // Display the Category tab + display_category_tab(); }); + $( '#nav-proposal-group a' ).click(function(event){ - //Display the Topics or Discussions tab - $('#proposal-categories').hide(); - $('#proposal-group').show(); - $('#nav-proposal-group a').addClass('active'); - $('#nav-proposal-categories a').removeClass('active'); - $(".proposal-item p").dotdotdot(); event.preventDefault(); + + var $link = $(this); + + // Update URL + updateHash($link.attr('href')); + + //Display the Proposals tab + display_proposals_tab(); }); + $( '.proposal-item a' ).click(function(event){ - var item = this.href.split('#').pop(); + var $link = $(this); + var item = $link.data('target'); + + // Update URL + updateHash($link.attr('href')); + display_proposal(item); }); + $( '.proposal-category a' ).click(function(event){ - var item = this.href.split('#').pop(); - if($('#' + item).hasClass('proposal-category-items')){ - //Display Topics or Discussion by category - $('nav').show(); - $('#content').show(); - $('#proposal-categories').show(); - $('.proposal-category-items').hide(); - $('.proposal-detail').hide(); - $('#' + item).show(); - $(".proposal-item p").dotdotdot(); - $('.proposal-category .arrow-box').hide(); - $(this).parent('.proposal-category').data('category'); - $('#proposal-category-'+$(this).parent('.proposal-category').data('category')).find('.arrow-box').show(); - } event.preventDefault(); + + var $link = $(this); + var item = $link.data('target'); + + // Update URL + updateHash($link.attr('href')); + + display_proposal_by_category(item); }); + $( '.send-button a' ).click(function(event){ //display form to send proposal (or login form for non-logged users) loginButton = $(this).parents('.send-button'); @@ -98,11 +101,25 @@ $.getJSON(noosferoAPI) $('#proposal-result').toggleClass('contrast'); }); $( '.show_body a' ).click(function(event){ - display_proposal_detail(); + event.preventDefault(); + + var $link = $(this); + var item = $link.data('target'); + + // Update URL + updateHash($link.attr('href')); }); + $( '.go-to-proposal-button a' ).click(function(event){ - display_proposal(this.href.split('#').pop()); + event.preventDefault(); + + var $link = $(this); + var item = $link.data('target'); + + // Update URL + updateHash($link.attr('href')); }); + $( '.proposal-selection' ).change(function(event){ display_proposal('proposal-item-' + this.value); }); @@ -111,6 +128,7 @@ $.getJSON(noosferoAPI) $('#proposal-group li a').each(function(){ availableTags.push({ label: $(this).text(), value: $(this).attr('href')}); }); + $( "#search-input" ).autocomplete({ source: availableTags, select: function( event, ui ) { display_proposal(ui.item['value' ].replace('#','')); }, @@ -143,7 +161,7 @@ $.getJSON(noosferoAPI) .fail(function( jqxhr, textStatus, error ) { var err = textStatus + ", " + error; console.log( "Request Failed: " + err ); - }); + }); function loadRandomProposal(topic_id, private_token) { $(".no-proposals").hide(); @@ -160,7 +178,7 @@ function loadRandomProposal(topic_id, private_token) { var article = data.articles[0]; $('.random-proposal').html(supportProposalTemplate(article)); - $(".abstract").dotdotdot(); + // $(".abstract").dotdotdot(); $(document.body).off('click', '.vote-actions .skip'); $(document.body).on('click', '.vote-actions .skip', function(e) { loadRandomProposal(topic_id, private_token); @@ -181,10 +199,6 @@ function loadRandomProposal(topic_id, private_token) { e.preventDefault(); }); - $('.results-container').hide(); - $('.experience-proposal-container').show(); - $('.talk-proposal-container').show(); - $(document.body).off('click', '.vote-result'); $(document.body).on('click', '.vote-result', function(e) { $('.results-container').toggle(); @@ -266,6 +280,24 @@ function guid() { s4() + '-' + s4() + s4() + s4(); } +function display_category_tab(){ + $('#proposal-group').hide(); + $('#proposal-categories').show(); + $('#nav-proposal-categories a').addClass('active'); + $('#nav-proposal-group a').removeClass('active'); + $('.proposal-category-items').hide(); + $('.proposal-category .arrow-box').hide(); + $('.proposal-detail').hide(); +} + +function display_proposals_tab(){ + $('#proposal-categories').hide(); + $('#proposal-group').show(); + $('#nav-proposal-group a').addClass('active'); + $('#nav-proposal-categories a').removeClass('active'); + $(".proposal-item p").dotdotdot(); +} + function display_proposal(proposal_id){ $('#proposal-categories').hide(); $('#proposal-group').hide(); @@ -302,6 +334,87 @@ function display_proposal_detail(){ $('.talk-proposal-container').hide(); $('.body').show(); - event.preventDefault(); +} + +function display_proposal_by_category(item){ + var $item = $('#' + item); + + if($item.hasClass('proposal-category-items')){ + //Display Topics or Discussion by category + $('nav').show(); + $('#content').show(); + $('#proposal-categories').show(); + $('.proposal-category-items').hide(); + $('.proposal-detail').hide(); + $item.show(); + $(".proposal-item p").dotdotdot(); + $('.proposal-category .arrow-box').hide(); + var categorySlug = $item.data('category'); + $('#proposal-category-' + categorySlug).find('.arrow-box').show(); + } +} + +function updateHash(hash){ + var id = hash.replace(/^.*#/, ''); + var elem = document.getElementById(id); + + if ( !elem ) { + window.location.hash = hash; + return; + } + + elem.id = id+'-tmp'; + window.location.hash = hash; + elem.id = id; +} + +function locationHashChanged(){ + var hash = location.hash; + navigateTo(hash); +} + +function navigateTo(hash){ + var regexProposals = /#\/programas/; + var regexCategory = /#\/temas/; + var m; + var parts = hash.split('/'); + if( (m = regexProposals.exec(hash)) !== null ){ + var proposalId = parts[2]; + navigateToProposal(proposalId); + } else if( (m = regexCategory.exec(hash)) !== null ){ + var categoryId = parts[3]; + navigateToCategory(categoryId); + } else { + console.log('route not handled', hash); + } } + +function navigateToProposal(proposalId){ + if(proposalId === undefined){ + display_proposals_tab(); + }else{ + display_proposal('proposal-item-' + proposalId); + + // show sub-page + var regexSubpages = /sobre-o-programa$/; + var m; + if((m = regexSubpages.exec(window.location.hash)) !== null ){ + display_proposal_detail(); + } + } +} + +function navigateToCategory(categoryId){ + if(categoryId === undefined){ + display_category_tab(); + }else{ + display_proposal_by_category('proposal-item-' + categoryId) + } +} + +if("onhashchange" in window){ + window.onhashchange = locationHashChanged; +}else{ + console.log('The browser not supports the hashchange event!'); +} \ No newline at end of file diff --git a/sass/_proposal_group.scss b/sass/_proposal_group.scss index bf30bec..f320b65 100644 --- a/sass/_proposal_group.scss +++ b/sass/_proposal_group.scss @@ -11,8 +11,7 @@ #search-input-container, label[for=search] { width: 49%; - display: inline-block; - height: 80px; + height: 80px; vertical-align: middle; overflow: hidden; } -- libgit2 0.21.2