added Modifier option.

changed form to use a submit button.

public/css/style.css

@@ -1,5 +1,8 @@
-#minified { padding-top:0; margin-left:20px; }
+#form-specs { margin:0; padding:20px 30px 25px; background:#f5f5f5; border:1px solid #e5e5e5; border-radius:6px; }
 
+#minified { padding-top:0; margin:0 30px 0 20px; }
+#modifier { margin-left:20px; }
+#modifier .help-inline { font-size:0.9em; }
 #results { display:none; }
 
 #image { width:70%; margin:0 auto; display:block; }

public/js/script.js

@@ -7,31 +7,38 @@
             select: (function () {
 
                 // cache elems
-                var $dropdown   = $('#dropdown'),
+                var model       = null, // set in _setSelectedModel()
+                    $dropdown   = $('#dropdown'),
                     $trigger    = $dropdown.children('.btn'),
                     $options    = $dropdown.find('.dropdown-menu a'),
-                    $minified   = $('#minified input');
+                    $modifier   = $('#modifier input'),
+                    $minified   = $('#minified input'),
+                    $submit     = $('#submit');
 
-                // bind dropdown handler
+                // bind event handlers
                 $options.click( _handleSelect );
+                $submit.click( _handleSubmit );
+
+                // create popover for modifier field
+                $modifier.popover();
 
                 function _handleSelect (e) {
                     e.preventDefault();
+                    _setSelectedModel(this);
+                    _reset(model.name);
+                }
 
-                    var model = {
+                function _handleSubmit(e) {
-                        slug: $(this).attr('href').replace(/#/,''),
+                    e.preventDefault();
-                        name: $(this).text(),
-                        img:  $(this).attr('data-img')
-                    };
 
-                    console.log('selected', model.slug, _isMinified());
+                    var model = _getSelectedModel();
 
                     _setLoading(model.name);
 
                     CREPE.results.hide();
 
                     CREPE
-                        .data.fetch( model.slug, _isMinified() )
+                        .data.fetch( model.slug, _getModifier(), _isMinified() )
                         .then(function(response) {
                             CREPE.results.init(model, response);
                             _reset(model.name);
@@ -42,10 +49,28 @@
                     $trigger.button('loading');
                 }
 
+                function _setSelectedModel(option) {
+                    var $option = $(option);
+                    model = {
+                        slug: $option.attr('href').replace(/#/,''),
+                        name: $option.text(),
+                        img:  $option.attr('data-img')
+                    };
+                    console.log('selected', model.slug);
+                }
+
+                function _getSelectedModel() {
+                    return model;
+                }
+
                 function _isMinified() {
                     return $minified.is(':checked');
                 }
 
+                function _getModifier() {
+                    return $modifier.val();
+                }
+
                 function _reset (label) {
                     var defaultLabel    = 'Select a model',
                         spacing         = '   ';
@@ -56,14 +81,14 @@
                 }
 
                 return {
-
+                    getSelectedModel: _getSelectedModel
                 };
 
             }()),
 
             data: {
-                fetch: function(slug, isMinified){
+                fetch: function(slug, modifier, isMinified){
-                    return $.get('/specs/' + slug, { minified: isMinified });
+                    return $.get('/specs/' + slug, { minified:isMinified, modifier:modifier });
                 }
             },
 

routes/specs.js

@@ -11,6 +11,7 @@ exports.fetch = function(req, res){
 
     var model       = req.params.model,
         isMinified  = req.query.minified == 'true' ? true : false;
+        modifier    = req.query.modifier;
 
     console.log('Model requested: ', model, req.params, req.query, isMinified);
 
@@ -50,7 +51,15 @@ 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, pretty:!isMinified });
+                    res.render(
+                        'specs',
+                        {
+                            title:      carName,
+                            styles:     specs,
+                            modifier:   modifier,
+                            pretty:     !isMinified
+                        }
+                    );
 
                     function _parseBodyStyleHtml(i,bodyStyle) {
                         var style = {

views/index.jade

@@ -5,16 +5,20 @@ block content
     div.hero-unit
       h1= title
       p Welcome to #{title}. That that was redudant tag line.
-      div#dropdown.btn-group
+      form#form-specs.form-inline
-        a.btn.btn-large.dropdown-toggle(data-toggle='dropdown', data-loading-text='Fetching specs...', data-complete-text='', href='#') Select a model   
+        div#dropdown.btn-group
-          span.caret
+          a.btn.btn-large.dropdown-toggle(data-toggle='dropdown', data-loading-text='Fetching specs...', data-complete-text='', href='#') Select a model   
-        ul.dropdown-menu
+            span.caret
-          each model in models
+          ul.dropdown-menu
-            li
+            each model in models
-              a(href='##{model.slug}', data-img='#{model.img}') #{model.name}
+              li
-      label#minified.checkbox.inline
+                a(href='##{model.slug}', data-img='#{model.img}') #{model.name}
-        input(type='checkbox', checked)
+        label#modifier Modifier: 
-        | Minified
+          input.input-small(type='text', placeholder='none', value='two-col', data-toggle='popover', data-placement='bottom', data-trigger='focus', data-html='true', data-title='Modifier CSS Class', data-content='Applied to <code>div.specifications-set</code> to enable custom styling per vehicle.')
+        label#minified.checkbox
+          input(type='checkbox', checked)
+          |  Minified output
+        button#submit.btn.btn-primary.btn-large Get Specs
     div#results.row-fluid
       div.span4
         h3 Model Name

views/specs.jade

@@ -24,7 +24,7 @@ div#specs
     //- TAB CONTENT
     each style, i in styles
       - var visible = (i === 0) ? 'display:block' : ''
-      div.specifications-set.two-col(id='#{style.slug}', style='#{visible}')
+      div(class='specifications-set #{modifier}', id='#{style.slug}', style='#{visible}')
 
         //- CATEGORY TABS
         ul.table-tabs.clearfix