Skip to content

Commit a01a097

Browse files
Maarten84Maarten84
committed
Wrap selects if parent is not .select already.
And append .select-arrow into it
1 parent c512856 commit a01a097

File tree

4 files changed

+100
-78
lines changed

4 files changed

+100
-78
lines changed

‎dist/css/styles.min.css

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/css/styles.min.css.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/forms.html

Lines changed: 49 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -236,14 +236,11 @@ <h2>Custom Checkbox</h2>
236236
</li>
237237
<li class="b0_12 mt-2x"><h2>Custom select</h2></li>
238238
<li class="b0_12 input-select">
239-
<div class="select">
240-
<select>
241-
<option>First select</option>
242-
<option>Option</option>
243-
<option>Option</option>
244-
</select>
245-
<div class="select-arrow"></div>
246-
</div>
239+
<select>
240+
<option>First select</option>
241+
<option>Option</option>
242+
<option>Option</option>
243+
</select>
247244
</li>
248245
</ul>
249246
<ul class="fields formlabel-bottom g">
@@ -265,36 +262,50 @@ <h2>Custom Checkbox</h2>
265262

266263
<!-- TODO CastleModules van maken : data-castlemodule='castlecss-forms' -->
267264
<script>
268-
$('.js-forms').find('.form-field').each(function(){
269-
var $this = $(this);
270-
271-
function setValue($field) {
272-
// Check if inputs or textareas have a value
273-
if( $field.val() == null )
274-
return;
275-
else if( $field.val().length > 0 )
276-
$field.parents('.form-field').addClass('has-value');
277-
else if( $field.val().length === 0 )
278-
$field.parents('.form-field').removeClass('has-value');
279-
// Check if select has an option selected with a value
280-
else if( field[0].tagName.match('select') && $field.find('option:selected').val() )
281-
$field.parents('.form-field').addClass('has-value');
282-
else
283-
$field.parents('.form-field').removeClass('has-value');
284-
}
285-
286-
// Get all formfields
287-
var $formfields = $this.find('input, textarea, select');
288-
289-
// Check if there is already a value
290-
$formfields.each(function(){
291-
setValue($(this));
292-
}).focus(function(){
293-
$(this).parents('.form-field').addClass('has-focus');
294-
}).focusout(function(){
295-
$(this).parents('.form-field').removeClass('has-focus');
296-
}).on('keyup change', function(){
297-
setValue($(this));
265+
$(function() {
266+
$('.js-forms').find('.form-field').each(function(){
267+
var $this = $(this);
268+
269+
function setValue($field) {
270+
// Check if inputs or textareas have a value
271+
if( $field.val() == null )
272+
return;
273+
else if( $field.val().length > 0 )
274+
$field.parents('.form-field').addClass('has-value');
275+
else if( $field.val().length === 0 )
276+
$field.parents('.form-field').removeClass('has-value');
277+
// Check if select has an option selected with a value
278+
else if( field[0].tagName.match('select') && $field.find('option:selected').val() )
279+
$field.parents('.form-field').addClass('has-value');
280+
else
281+
$field.parents('.form-field').removeClass('has-value');
282+
}
283+
284+
// Get all formfields
285+
var $formfields = $this.find('input, textarea, select');
286+
287+
// Check if there is already a value
288+
$formfields.each(function(){
289+
setValue($(this));
290+
}).focus(function(){
291+
$(this).parents('.form-field').addClass('has-focus');
292+
}).focusout(function(){
293+
$(this).parents('.form-field').removeClass('has-focus');
294+
}).on('keyup change', function(){
295+
setValue($(this));
296+
});
297+
});
298+
});
299+
300+
$(function() {
301+
$('select').each(function() {
302+
var $this = $(this);
303+
304+
if ($this.parent('.select').length == 0) {
305+
$this.wrap('<div class="select">');
306+
307+
$('.select').append('<div class="select-arrow">')
308+
}
298309
});
299310
});
300311

‎views/forms.html

Lines changed: 48 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -133,14 +133,11 @@ <h2>Custom Checkbox</h2>
133133
</li>
134134
<li class="b0_12 mt-2x"><h2>Custom select</h2></li>
135135
<li class="b0_12 input-select">
136-
<div class="select">
137-
<select>
138-
<option>First select</option>
139-
<option>Option</option>
140-
<option>Option</option>
141-
</select>
142-
<div class="select-arrow"></div>
143-
</div>
136+
<select>
137+
<option>First select</option>
138+
<option>Option</option>
139+
<option>Option</option>
140+
</select>
144141
</li>
145142
</ul>
146143
<ul class="fields formlabel-bottom g">
@@ -162,36 +159,50 @@ <h2>Custom Checkbox</h2>
162159

163160
<!-- TODO CastleModules van maken : data-castlemodule='castlecss-forms' -->
164161
<script>
165-
$('.js-forms').find('.form-field').each(function(){
166-
var $this = $(this);
162+
$(function() {
163+
$('.js-forms').find('.form-field').each(function(){
164+
var $this = $(this);
165+
166+
function setValue($field) {
167+
// Check if inputs or textareas have a value
168+
if( $field.val() == null )
169+
return;
170+
else if( $field.val().length > 0 )
171+
$field.parents('.form-field').addClass('has-value');
172+
else if( $field.val().length === 0 )
173+
$field.parents('.form-field').removeClass('has-value');
174+
// Check if select has an option selected with a value
175+
else if( field[0].tagName.match('select') && $field.find('option:selected').val() )
176+
$field.parents('.form-field').addClass('has-value');
177+
else
178+
$field.parents('.form-field').removeClass('has-value');
179+
}
180+
181+
// Get all formfields
182+
var $formfields = $this.find('input, textarea, select');
183+
184+
// Check if there is already a value
185+
$formfields.each(function(){
186+
setValue($(this));
187+
}).focus(function(){
188+
$(this).parents('.form-field').addClass('has-focus');
189+
}).focusout(function(){
190+
$(this).parents('.form-field').removeClass('has-focus');
191+
}).on('keyup change', function(){
192+
setValue($(this));
193+
});
194+
});
195+
});
196+
197+
$(function() {
198+
$('select').each(function() {
199+
var $this = $(this);
200+
201+
if ($this.parent('.select').length == 0) {
202+
$this.wrap('<div class="select">');
167203

168-
function setValue($field) {
169-
// Check if inputs or textareas have a value
170-
if( $field.val() == null )
171-
return;
172-
else if( $field.val().length > 0 )
173-
$field.parents('.form-field').addClass('has-value');
174-
else if( $field.val().length === 0 )
175-
$field.parents('.form-field').removeClass('has-value');
176-
// Check if select has an option selected with a value
177-
else if( field[0].tagName.match('select') && $field.find('option:selected').val() )
178-
$field.parents('.form-field').addClass('has-value');
179-
else
180-
$field.parents('.form-field').removeClass('has-value');
181-
}
182-
183-
// Get all formfields
184-
var $formfields = $this.find('input, textarea, select');
185-
186-
// Check if there is already a value
187-
$formfields.each(function(){
188-
setValue($(this));
189-
}).focus(function(){
190-
$(this).parents('.form-field').addClass('has-focus');
191-
}).focusout(function(){
192-
$(this).parents('.form-field').removeClass('has-focus');
193-
}).on('keyup change', function(){
194-
setValue($(this));
204+
$('.select').append('<div class="select-arrow">')
205+
}
195206
});
196207
});
197208

0 commit comments

Comments
 (0)