added Modifier option.
changed form to use a submit button.
This commit is contained in:
Victor Nguyen
parent
e26d51c0b1
commit
b55543d1a3
5 changed files with 67 additions and 26 deletions
|
|
@ -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; }
|
||||
|
|
|
|||
|
|
@ -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 = {
|
||||
slug: $(this).attr('href').replace(/#/,''),
|
||||
name: $(this).text(),
|
||||
img: $(this).attr('data-img')
|
||||
};
|
||||
function _handleSubmit(e) {
|
||||
e.preventDefault();
|
||||
|
||||
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){
|
||||
return $.get('/specs/' + slug, { minified: isMinified });
|
||||
fetch: function(slug, modifier, isMinified){
|
||||
return $.get('/specs/' + slug, { minified:isMinified, modifier:modifier });
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -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 = {
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ block content
|
|||
div.hero-unit
|
||||
h1= title
|
||||
p Welcome to #{title}. That that was redudant tag line.
|
||||
form#form-specs.form-inline
|
||||
div#dropdown.btn-group
|
||||
a.btn.btn-large.dropdown-toggle(data-toggle='dropdown', data-loading-text='Fetching specs...', data-complete-text='', href='#') Select a model
|
||||
span.caret
|
||||
|
|
@ -12,9 +13,12 @@ block content
|
|||
each model in models
|
||||
li
|
||||
a(href='##{model.slug}', data-img='#{model.img}') #{model.name}
|
||||
label#minified.checkbox.inline
|
||||
label#modifier Modifier:
|
||||
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
|
||||
| Minified output
|
||||
button#submit.btn.btn-primary.btn-large Get Specs
|
||||
div#results.row-fluid
|
||||
div.span4
|
||||
h3 Model Name
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in a new issue