diff --git a/public/css/style.css b/public/css/style.css index f5d87a0..75a61bf 100644 --- a/public/css/style.css +++ b/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; } diff --git a/public/js/script.js b/public/js/script.js index a626b0a..45255e5 100644 --- a/public/js/script.js +++ b/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 }); } }, diff --git a/routes/specs.js b/routes/specs.js index c332aba..204c804 100644 --- a/routes/specs.js +++ b/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 = { diff --git a/views/index.jade b/views/index.jade index 26b4141..fa73ef5 100644 --- a/views/index.jade +++ b/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 diff --git a/views/specs.jade b/views/specs.jade index 8f6f23d..5cae526 100644 --- a/views/specs.jade +++ b/views/specs.jade @@ -1,5 +1,3 @@ -//- extends layout - //- block content div#specs