Merge pull request #13 from 18F/single-page-urls

URL formatting
fecgov · Dec 29, 2014 · d83195e · d83195e
2 parents b887174 + 14d0daa
commit d83195e
Show file tree

Hide file tree

Showing 12 changed files with 76 additions and 93 deletions.
diff --git a/static/js/init.js b/static/js/init.js
@@ -3,7 +3,7 @@
 var search = require('./modules/search.js');
 var api = require('./modules/api.js');
 var navs = require('./modules/navs.js');
-var singleLinks = require('./modules/single-links.js');
+var singleEntity = require('./modules/single-entity.js');
 var tmpls = require('./modules/tmpls.js');
 var filters = require('./modules/filters.js');
 var urls = require('./modules/urls.js');
@@ -15,7 +15,7 @@ var router = require('./modules/router.js');
 api.init();
 search.init();
 navs.init();
-singleLinks.init();
+singleEntity.init();
 tmpls.init();
 filters.init();
 urls.init();

diff --git a/static/js/modules/api.js b/static/js/modules/api.js
@@ -16,17 +16,11 @@ var callAPI = function(url) {
 };
 
 var buildURL = function(e) {
-    var URL = 'rest/' + entityMap[e.category],
+    var URL = '/rest/' + entityMap[e.category],
         field;
 
-    if (typeof e.filters.cmte_id !== 'undefined') {
-        URL += '/' + e.filters.cmte_id;
-
-        // if we're requesting a single committee, filters 
-        // aren't applicable, though they still get passed
-        // in if there were filters chosen leading up to
-        // finding this committee
-        delete e.filters;
+    if (typeof e.id !== 'undefined') {
+        URL += '/' + e.id;
     }
 
     URL += '?';
@@ -95,7 +89,7 @@ module.exports = {
         });
 
         events.on('load:browse', function(e) {
-            var promise = callAPI('rest/' + entityMap[e.category] + '?fields=*');
+            var promise = callAPI('/rest/' + entityMap[e.category] + '?fields=*');
 
             promise.done(function(data) {
                 e.data = data;

diff --git a/static/js/modules/single-entity.js b/static/js/modules/single-entity.js
@@ -0,0 +1,16 @@
+'use strict';
+
+var events = require('./events.js');
+
+var initChosen = function() {
+    $('.chosen-select').chosen({
+        width: "100%",
+        disable_search: true,
+    });
+}
+
+module.exports = {
+    init: function() {
+        events.on('bind:singleEntity', initChosen);
+    }
+};
diff --git a/static/js/modules/single-links.js b/static/js/modules/single-links.js
diff --git a/static/js/modules/tables.js b/static/js/modules/tables.js
@@ -36,10 +36,22 @@ var sortTable = function(e){
   });
 }
 
+var singleClickHandler = function(e) {
+  e.preventDefault();
+  var id = $(this).data('id');
+  var category = $(this).data('category');
+
+  events.emit('load:singleEntity', {
+    category: category + 's',
+    id: id
+  });
+}
+
 module.exports = {
     init: function() {
         events.on('bind:browse', bindPaginationLinks);
         events.on('bind:browse', sortTable);
+        $('#main').on('click', '.single-link', singleClickHandler);
 
         // if loaded on a page with a results table
         bindPaginationLinks();

diff --git a/static/js/modules/tmpls.js b/static/js/modules/tmpls.js
@@ -14,7 +14,7 @@ var renderBrowse = function(e) {
     }
     else {
         var tmplName = e.category + '-table',
-            promise = loadTemplate('views/partials/' + tmplName + '.handlebars');
+            promise = loadTemplate('/views/partials/' + tmplName + '.handlebars');
 
         promise.done(function(data) {
             var context = {};
@@ -85,8 +85,8 @@ var renderFilters = function(e) {
 
     // pre-load table partial so the template can be shared on client + server
     $.when(
-        loadTemplate('views/' + tmplName + '.handlebars'),
-        loadTemplate('views/partials/' + tmplName + '-table.handlebars')
+        loadTemplate('/views/' + tmplName + '.handlebars'),
+        loadTemplate('/views/partials/' + tmplName + '-table.handlebars')
     ).done(function(tmpl1, tmpl2) {
         templates[tmplName] = Handlebars.compile(tmpl1[0]);
         templates[partialName] = Handlebars.registerPartial(partialName, tmpl2[0]);
@@ -100,10 +100,10 @@ var renderSearchResultsList = function(e) {
         i,
         len = categories.length;
 
-    promises.push(loadTemplate('views/search-results.handlebars'));
+    promises.push(loadTemplate('/views/search-results.handlebars'));
 
     for (i = 0; i < len; i++) {
-        promises.push(loadTemplate('views/partials/' + categories[i] + 's-table.handlebars'));
+        promises.push(loadTemplate('/views/partials/' + categories[i] + 's-table.handlebars'));
     }
 
     $.when.apply($, promises).done(function() {
@@ -133,18 +133,19 @@ var renderSearchResultsList = function(e) {
 
 var renderLandingView = function() {
     $.when(
-        loadTemplate('views/search.handlebars'),
-        loadTemplate('views/partials/search-bar.handlebars')
+        loadTemplate('/views/search.handlebars'),
+        loadTemplate('/views/partials/search-bar.handlebars')
     ).done(function(tmpl1, tmpl2) {
         templates['landing'] = Handlebars.compile(tmpl1[0]);
         templates['search-bar'] = Handlebars.registerPartial('search-bar', tmpl2[0]);
         $('#main').html(templates['landing']());
+        events.emit('bind:singleEntity');
     });
 };
 
 var renderSingleEntity = function(e) {
   $.when(
-    loadTemplate('views/' + e.category + '-single.handlebars')
+    loadTemplate('/views/' + e.category + '-single.handlebars')
   ).done(function(tmpl1) {
     var context = {};
     context = mapFields(e.category, e.data.results);

diff --git a/static/js/modules/urls.js b/static/js/modules/urls.js
@@ -7,7 +7,17 @@ var buildURL = function(context) {
         field;
 
     if (typeof context.category !== 'undefined') {
-        URL += context.category + '?';
+        URL += context.category;
+
+        if (typeof context.id !== 'undefined') {
+            URL += '/' + context.id;
+
+            return URL;
+        }
+
+        if (typeof context.query !== 'undefined' || typeof context.filters !== 'undefined') {
+            URL += '?';
+        }
 
         if (typeof context.query !== 'undefined') {
             URL += 'q=' + encodeURIComponent(context.query) + '&';
@@ -22,7 +32,7 @@ var buildURL = function(context) {
         }
     }
 
-    return URL + 'fields=*';
+    return URL;
 };
 
 var changeURL = function(context) {
@@ -37,7 +47,7 @@ module.exports = {
     init: function() {
         events.on('load:browse', changeURL);
         events.on('render:browse', changeURL);
-        events.on('load:singleEntity', changeURL);
+        events.on('render:singleEntity', changeURL);
         events.on('selected:filter', changeURL);
         events.on('removed:filter', changeURL);
         events.on('render:searchResultsList', changeURL);

diff --git a/static/js/modules/tablist.js → static/js/vendor/tablist.js b/static/js/modules/tablist.js → static/js/vendor/tablist.js
diff --git a/tests/unit/api.js b/tests/unit/api.js
@@ -12,18 +12,16 @@ describe('API Module', function() {
                 }
             };
 
-            assert.equal(api.buildURL(context), 'rest/candidate?year=2000&state=IL&fields=*');
+            assert.equal(api.buildURL(context), '/rest/candidate?year=2000&state=IL&fields=*');
         });
 
         it('should return an appropriate URL for single committees', function() {
             var context = {
                 category: 'committees',
-                filters: {
-                    cmte_id: '12345'
-                }
+                id: '12345'
             };
 
-            assert.equal(api.buildURL(context), 'rest/committee/12345?fields=*');
+            assert.equal(api.buildURL(context), '/rest/committee/12345?fields=*');
         });
     });
 });
diff --git a/tests/unit/urls.js b/tests/unit/urls.js
@@ -9,7 +9,7 @@ describe('URL Module', function() {
                 query: 'ladybug'  
             };
 
-            assert.equal(urls.buildURL(context), '/insects?q=ladybug&fields=*');
+            assert.equal(urls.buildURL(context), '/insects?q=ladybug&');
         });
 
         it('should return a URL to match the given context when filtered', function() {
@@ -21,7 +21,7 @@ describe('URL Module', function() {
                 }
             };
 
-            assert.equal(urls.buildURL(context), '/insects?numLegs=4&color=red&fields=*');
+            assert.equal(urls.buildURL(context), '/insects?numLegs=4&color=red&');
         });
 
     });

diff --git a/views/candidates-single.handlebars b/views/candidates-single.handlebars
@@ -74,7 +74,7 @@
           <h5><a href="#">JANET FOR DELAWARE</a></h5>
           <p class="figure-group__description">Principal Candidate Campaign Committee | Last updated 11/11/2014</p>
           <figure class="figure-group__graphic">
-            <img src="img/barchart.png">
+            <img src="/img/barchart.png">
           </figure>
           <figure class="figure-group__summary meta-box">
             <h6>Summary</h6>
@@ -103,7 +103,7 @@
           <h5><a href="#">FRIENDS OF JANET</a></h5>
           <p class="figure-group__description">Principal Candidate Campaign Committee</p>
           <figure class="figure-group__graphic">
-            <img src="img/barchart.png">
+            <img src="/img/barchart.png">
           </figure>
           <figure class="figure-group__summary meta-box">
             <h6>Summary</h6>
@@ -136,7 +136,7 @@
           <h5><a href="#">CANDIDATES XYZ</a></h5>
           <p class="figure-group__description">Principal Candidate Campaign Committee</p>
           <figure class="figure-group__graphic">
-            <img src="img/barchart.png">
+            <img src="/img/barchart.png">
           </figure>
           <figure class="figure-group__summary meta-box">
             <h6>Summary</h6>
@@ -165,7 +165,7 @@
           <h5><a href="#">LEADERPAC</a></h5>
           <p class="figure-group__description">Principal Candidate Campaign Committee</p>
           <figure class="figure-group__graphic">
-            <img src="img/barchart.png">
+            <img src="/img/barchart.png">
           </figure>
           <figure class="figure-group__summary meta-box">
             <h6>Summary</h6>
@@ -201,24 +201,24 @@
         <h3>Independent Expenditures Summary</h3>
         <div class="figure-group">
           <h5>Total Outside Spending</h5>
-          <img src="img/support-oppose--big.png">
+          <img src="/img/support-oppose--big.png">
         </div>
         <div class="figure-group">
           <figure class="chunk--half">
             <h5>Super PACs</h5>
-            <img src="img/support-oppose.png">
+            <img src="/img/support-oppose.png">
           </figure>
           <figure class="chunk--half">
             <h5>Party Committees</h5>
-            <img src="img/support-oppose.png">
+            <img src="/img/support-oppose.png">
           </figure>
           <figure class="chunk--half">
             <h5>PACs</h5>
-            <img src="img/support-oppose.png">
+            <img src="/img/support-oppose.png">
           </figure>
           <figure class="chunk--half">
             <h5>Individuals, Corporations &amp; Unions</h5>
-            <img src="img/support-oppose.png">
+            <img src="/img/support-oppose.png">
           </figure>
         </div>
       </div>
@@ -438,12 +438,4 @@
   </section>
 </div>
 
-<script src="js/modules/tablist.js"></script>
-<script>
-jQuery(document).ready(function($){
-  $('.chosen-select').chosen({
-    width: "100%",
-    disable_search: true,
-  });
-});
-</script>
+<script src="/js/vendor/tablist.js"></script>
diff --git a/views/committees-single.handlebars b/views/committees-single.handlebars
@@ -123,7 +123,7 @@
           <p class="text--lead">Total receipts and disbursements over time.</p>
           <div class="figure-group">
             <figure class="chunk--two-thirds">
-              <img src="img/time.png">
+              <img src="/img/time.png">
             </figure>
             <div class="meta-box figure-group__controls chunk--third">
               <h5>View</h5>
@@ -133,7 +133,7 @@
                 <label for="check-cash"><input id="check-cash" type="checkbox" value="cash" checked> Cash</label>
                 <label for="check-debt"><input id="check-debt" type="checkbox" value="debt" checked> Debt</label>
               </div>
-              <img class="controls--slider" src="img/slider.png">
+              <img class="controls--slider" src="/img/slider.png">
             </div>
           </div>
         </div>
@@ -142,7 +142,7 @@
           <p class="text--lead">Click on the pieces to view more information</p>
           <figure>
             <figcaption>January 1, 2012 - Today | Totals last updated 11/11/14 at 11:00 AM</figcaption>
-            <img src="img/tree.png">
+            <img src="/img/tree.png">
           </figure>
         </div>
       </div>
@@ -217,7 +217,7 @@
             </div>
           </div>
           <div class="figure-group">
-            <img src="img/report.png">
+            <img src="/img/report.png">
           </div>
         </div>
       </div>
@@ -365,12 +365,4 @@
     </section>
   </div>
 
-  <script src="js/modules/tablist.js"></script>
-  <script>
-  jQuery(document).ready(function($){
-    $('.chosen-select').chosen({
-      width: "100%",
-      disable_search: true,
-    });
-  });
-  </script>
+  <script src="/js/vendor/tablist.js"></script>