tonyair/webpack-bootstrap-ui-kit
1
0
Fork 0
mirror of https://github.com/a2nt/webpack-bootstrap-ui-kit.git synced 2024-10-22 11:05:45 +02:00
Code Issues Projects Releases Wiki Activity

Minor improvements

Browse Source
This commit is contained in:
Tony Air 2019-11-07 23:35:19 +07:00
parent ddecdb9afc
commit 9e456c8cde
3 changed files with 81 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
src/js/_components/_ui.form.fields.toggle.js
View File

@ -13,12 +13,12 @@ const FormToggleUI = (($) => {
constructor($el) {
const ui = this;
const condition = $el.data('value-toggle');
if (!condition) {
ui.$el = $el;
if (!ui.getCondition()) {
return;
}
ui.$el = $el;
ui.$el.data(DATA_KEY, ui);
ui.toggle();
@ -32,20 +32,62 @@ const FormToggleUI = (($) => {
return ui;
}
getDataEl() {
const ui = this;
const $el = ui.$el;
return ($el.is('[type="radio"]') && $el.parents('.optionset').length) ?
$el.parents('.optionset') : $el;
}
getCondition() {
const ui = this;
return ui.getDataEl().data('value-toggle');
}
getCurrentVal() {
const ui = this;
const $el = ui.$el;
return ($el.attr('type') === 'checkbox') ?
($el.is(':checked') ? true : false) :
($el.attr('type') === 'radio' ? $Html.find(`[name="${ $el.attr('name') }"]:checked`).val() : $el.val());
}
getTrueTarget() {
const ui = this;
const $dataEl = ui.getDataEl();
let target = $dataEl.data('value-toggle-yes');
if (!target || !target.length) {
let target = $dataEl.data('target');
}
return ui.getElement(target);
}
getFalseTarget() {
const ui = this;
const target = ui.getDataEl().data('value-toggle-no');
return ui.getElement(target);
}
getElement(target) {
return target && target.length && $(target).length ?
$(target) : false;
}
toggle() {
const ui = this;
const $el = ui.$el;
const val = ($el.attr('type') === 'checkbox') ?
($el.is(':checked') ? true : false) :
($el.attr('type') === 'radio' ? $Html.find(`[name="${ $el.attr('name') }"]:checked`).val() : $el.val());
const $dataEl = ($el.is('[type="radio"]') && $el.parents('.optionset').length) ?
$el.parents('.optionset') : $el;
const val = ui.getCurrentVal();
const $dataEl = ui.getDataEl();
// coditional toggler
const target = $el.data('target');
const condition = $el.data('value-toggle');
const condition = ui.getCondition();
if (!condition) {
return;
}
@ -56,8 +98,8 @@ const FormToggleUI = (($) => {
condition === val
) ? true : false;
const $yesTarget = $($dataEl.data('value-toggle-yes'));
const $noTarget = $($dataEl.data('value-toggle-no'));
const $yesTarget = ui.getTrueTarget();
const $noTarget = ui.getFalseTarget();
if (!$el.data(FieldUI).shown || typeof val === 'undefined') {
ui.toggleElement($yesTarget, false);

16
src/scss/_components/_ui.form.basics.scss
View File

@ -37,3 +37,19 @@ input.time {
border: 1px solid #ced4da;
}
}
.form-inline {
margin-top: -1rem;
fieldset {
margin-top: 1rem;
}
.field {
display: flex;
}
.form-control {
width: 100%;
}
}

10
src/scss/_variables.scss
View File

@ -5,6 +5,16 @@ $container-max-widths: (sm: 540px, md: 720px, lg: 960px, xl: 1140px, xxl: 1330px
$font-family-base: "Lato", sans-serif !default;
$font-size-base: 1rem !default;
// start font-sizing from h2
$h1-font-size: $font-size-base * 2.5 !default;
$h2-font-size: $h1-font-size !default;
$h3-font-size: $font-size-base * 2 !default;
$h4-font-size: $font-size-base * 1.75 !default;
$h5-font-size: $font-size-base * 1.5 !default;
$h6-font-size: $font-size-base * 1.25 !default;
$grid-gutter-width: 2rem !default;
$grid-gutter-height: 2rem !default;
$grid-gutter-xs-width: $grid-gutter-width / 2 !default;