Minor improvements

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

View File

@ -13,12 +13,12 @@ const FormToggleUI = (($) => {
constructor($el) { constructor($el) {
const ui = this; const ui = this;
const condition = $el.data('value-toggle'); ui.$el = $el;
if (!condition) {
if (!ui.getCondition()) {
return; return;
} }
ui.$el = $el;
ui.$el.data(DATA_KEY, ui); ui.$el.data(DATA_KEY, ui);
ui.toggle(); ui.toggle();
@ -32,20 +32,62 @@ const FormToggleUI = (($) => {
return ui; 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() { toggle() {
const ui = this; const ui = this;
const $el = ui.$el; const $el = ui.$el;
const val = ($el.attr('type') === 'checkbox') ? const val = ui.getCurrentVal();
($el.is(':checked') ? true : false) : const $dataEl = ui.getDataEl();
($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;
// coditional toggler // coditional toggler
const target = $el.data('target'); const condition = ui.getCondition();
const condition = $el.data('value-toggle');
if (!condition) { if (!condition) {
return; return;
} }
@ -56,8 +98,8 @@ const FormToggleUI = (($) => {
condition === val condition === val
) ? true : false; ) ? true : false;
const $yesTarget = $($dataEl.data('value-toggle-yes')); const $yesTarget = ui.getTrueTarget();
const $noTarget = $($dataEl.data('value-toggle-no')); const $noTarget = ui.getFalseTarget();
if (!$el.data(FieldUI).shown || typeof val === 'undefined') { if (!$el.data(FieldUI).shown || typeof val === 'undefined') {
ui.toggleElement($yesTarget, false); ui.toggleElement($yesTarget, false);

View File

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

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-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-width: 2rem !default;
$grid-gutter-height: 2rem !default; $grid-gutter-height: 2rem !default;
$grid-gutter-xs-width: $grid-gutter-width / 2 !default; $grid-gutter-xs-width: $grid-gutter-width / 2 !default;