added Minified option to enable choice of pretty/minified output

public/css/style.css

@@ -1,3 +1,5 @@
+#minified { padding-top:0; margin-left:20px; }
+
 #results { display:none; }
 
 #image { width:70%; margin:0 auto; display:block; }

public/js/script.js

@@ -6,10 +6,13 @@
 
             select: (function () {
 
+                // cache elems
                 var $dropdown   = $('#dropdown'),
                     $trigger    = $dropdown.children('.btn'),
-                    $options    = $dropdown.find('.dropdown-menu a');
+                    $options    = $dropdown.find('.dropdown-menu a'),
+                    $minified   = $('#minified input');
 
+                // bind dropdown handler
                 $options.click( _handleSelect );
 
                 function _handleSelect (e) {
@@ -21,14 +24,14 @@
                         img:  $(this).attr('data-img')
                     };
 
-                    console.log('selected', model.slug);
+                    console.log('selected', model.slug, _isMinified());
 
                     _setLoading(model.name);
 
                     CREPE.results.hide();
 
                     CREPE
-                        .data.fetch(model.slug)
+                        .data.fetch( model.slug, _isMinified() )
                         .then(function(response) {
                             CREPE.results.init(model, response);
                             _reset(model.name);
@@ -39,6 +42,10 @@
                     $trigger.button('loading');
                 }
 
+                function _isMinified() {
+                    return $minified.is(':checked');
+                }
+
                 function _reset (label) {
                     var defaultLabel    = 'Select a model',
                         spacing         = '   ';
@@ -55,8 +62,8 @@
             }()),
 
             data: {
-                fetch: function(slug){
-                    return $.get('/specs/' + slug);
+                fetch: function(slug, isMinified){
+                    return $.get('/specs/' + slug, { minified: isMinified });
                 }
             },
 

routes/specs.js

@@ -9,9 +9,10 @@ exports.fetch = function(req, res){
         jsdom   = require('jsdom'),
         request = require('request');
 
-    var model = req.params.model;
+    var model       = req.params.model,
+        isMinified  = req.query.minified == 'true' ? true : false;
 
-    console.log('Model requested: ', model, req.params);
+    console.log('Model requested: ', model, req.params, req.query, isMinified);
 
     request(
         { uri: 'http://www.mazda.com.au/vehicles/'+ model +'/specifications' },
@@ -49,7 +50,7 @@ exports.fetch = function(req, res){
 
                     // res.send('There are ' + $styles.length + ' body style(s) for the ' + model);
                     var carName = $body.find('h1').text().replace(' Specifications','');
-                    res.render('specs', { title:carName, styles:specs });
+                    res.render('specs', { title:carName, styles:specs, pretty:!isMinified });
 
                     function _parseBodyStyleHtml(i,bodyStyle) {
                         var style = {

views/index.jade

@@ -12,6 +12,9 @@ block content
           each model in models
             li
               a(href='##{model.slug}', data-img='#{model.img}') #{model.name}
+      label#minified.checkbox.inline
+        input(type='checkbox', checked)
+        | Minified
     div#results.row-fluid
       div.span4
         h3 Model Name

views/specs.jade

@@ -1,5 +1,3 @@
-//- extends layout
-
 //- block content
 div#specs