tonyair
/
webpack-bootstrap-ui-kit
mirror of https://github.com/a2nt/webpack-bootstrap-ui-kit.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

IMPROVEMENT: field gutter variables

This commit is contained in:
Tony Air 2020-02-24 22:16:06 +07:00
parent 5136435b8f
commit 1fc7394550
3 changed files with 102 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

190
src/js/_components/_ui.form.basics.js
View File

@ -3,7 +3,7 @@ import $ from 'jquery';
//import 'bootstrap-select/dist/js/bootstrap-select';
//$.fn.selectpicker.Constructor.BootstrapVersion = '4';
import select2 from 'select2/dist/js/select2.js';
import Inputmask from 'inputmask';
//import Inputmask from 'inputmask';
//import select2 from 'jquery.inputmask/dist/jquery.inputmask.bundle';
@ -11,125 +11,125 @@ import Events from '../_events';
import SpinnerUI from './_ui.spinner';
import FormFieldUI from './_ui.form.fields';
const FormBasics = (($) => {
// Constants
const NAME = 'jsFormBasics';
const DATA_KEY = NAME;
const $Html = $('html, body');
const W = window;
const D = document;
const FormBasics = ($ => {
// Constants
const NAME = 'jsFormBasics';
const DATA_KEY = NAME;
const $Html = $('html, body');
const W = window;
const D = document;
class FormBasics {
constructor(el) {
const ui = this;
const $el = $(el);
class FormBasics {
constructor(el) {
const ui = this;
const $el = $(el);
ui._el = el;
$el.data(DATA_KEY, this);
ui._el = el;
$el.data(DATA_KEY, this);
//$('[data-inputmask]').inputmask();
//$('[data-inputmask]').inputmask();
const $fields = $el.find(Events.FORM_FIELDS);
// init fields ui
$fields.each((i, el) => {
// skip some fields here
new FormFieldUI(el);
});
const $fields = $el.find(Events.FORM_FIELDS);
// init fields ui
$fields.each((i, el) => {
// skip some fields here
new FormFieldUI(el);
});
const $selectFields = $el.find('select:not([readonly])');
const $radioOptions = $el.find('input[type="radio"]');
const $selectFields = $el.find('select:not([readonly])');
const $radioOptions = $el.find('input[type="radio"]');
$selectFields.each((i, el) => {
$(el).select2();
});
$selectFields.each((i, el) => {
$(el).select2();
});
$fields.each((e, el) => {
const $el = $(el);
$fields.each((e, el) => {
const $el = $(el);
if ($el.hasClass('required') || $el.attr('aria-required')) {
$el.closest('.field').addClass('required');
}
});
if ($el.hasClass('required') || $el.attr('aria-required')) {
$el.closest('.field').addClass('required');
}
});
$radioOptions.each((e, el) => {
const $el = $(el);
$radioOptions.each((e, el) => {
const $el = $(el);
if ($el.is(':checked')) {
$el.parents('.radio').addClass('checked');
}
});
if ($el.is(':checked')) {
$el.parents('.radio').addClass('checked');
}
});
$radioOptions.on('change', (e) => {
const $el = $(e.currentTarget);
const $parent = $el.parents('.radio');
$radioOptions.on('change', e => {
const $el = $(e.currentTarget);
const $parent = $el.parents('.radio');
$parent.siblings('.radio').each((i, el) => {
const $el = $(el);
$parent.siblings('.radio').each((i, el) => {
const $el = $(el);
if (!$el.find('input').is(':checked')) {
$el.removeClass('checked');
}
});
if (!$el.find('input').is(':checked')) {
$el.removeClass('checked');
}
});
if ($el.is(':checked')) {
$parent.addClass('checked');
}
});
if ($el.is(':checked')) {
$parent.addClass('checked');
}
});
$el.on('submit', (e) => {
SpinnerUI.show();
});
$el.on('submit', e => {
SpinnerUI.show();
});
$el.addClass(`${NAME}-active`);
$el.trigger(Events.FORM_INIT_BASICS);
}
$el.addClass(`${NAME}-active`);
$el.trigger(Events.FORM_INIT_BASICS);
}
// Public methods
dispose() {
const $el = $(this._el);
// Public methods
dispose() {
const $el = $(this._el);
const $selectFields = $el.find('select:not([readonly])');
$selectFields.each((i, el) => {
$(el).select2('destroy');
});
const $selectFields = $el.find('select:not([readonly])');
$selectFields.each((i, el) => {
$(el).select2('destroy');
});
$el.removeClass(`${NAME}-active`);
$.removeData(this._el, DATA_KEY);
this._el = null;
}
$el.removeClass(`${NAME}-active`);
$.removeData(this._el, DATA_KEY);
this._el = null;
}
static _jQueryInterface() {
return this.each(() => {
// attach functionality to el
const $el = $(this);
let data = $el.data(DATA_KEY);
static _jQueryInterface() {
return this.each(() => {
// attach functionality to el
const $el = $(this);
let data = $el.data(DATA_KEY);
if (!data) {
data = new FormBasics(this);
$el.data(DATA_KEY, data);
}
});
}
}
if (!data) {
data = new FormBasics(this);
$el.data(DATA_KEY, data);
}
});
}
}
// jQuery interface
$.fn[NAME] = FormBasics._jQueryInterface;
$.fn[NAME].Constructor = FormBasics;
$.fn[NAME].noConflict = function() {
$.fn[NAME] = JQUERY_NO_CONFLICT;
return FormBasics._jQueryInterface;
};
// jQuery interface
$.fn[NAME] = FormBasics._jQueryInterface;
$.fn[NAME].Constructor = FormBasics;
$.fn[NAME].noConflict = function() {
$.fn[NAME] = JQUERY_NO_CONFLICT;
return FormBasics._jQueryInterface;
};
const init = () => {
$('form').jsFormBasics();
};
const init = () => {
$('form').jsFormBasics();
};
// auto-apply
$(W).on(`${Events.AJAX} ${Events.LOADED}`, () => {
init();
});
// auto-apply
$(W).on(`${Events.AJAX} ${Events.LOADED}`, () => {
init();
});
return FormBasics;
return FormBasics;
})($);
export default FormBasics;

8
src/scss/_components/_ui.main.scss
View File

@ -112,12 +112,12 @@ textarea,
}
.btn-toolbar {
margin-top: $grid-gutter-height / 2;
margin-top: $field-gutter-height;
}
.field {
position: relative;
margin: ($grid-gutter-height / 2) 0;
margin: $field-gutter-height 0;
&.composite {
margin-top: 0;
@ -173,8 +173,8 @@ textarea,
// element col paddings
.col-block {
padding-top: $grid-gutter-height / 4;
padding-bottom: $grid-gutter-height / 4;
padding-top: $col-block-gutter-height;
padding-bottom: $col-block-gutter-height;
}
// rewrite btn opacity on hover

3
src/scss/_variables.scss
View File

@ -36,6 +36,9 @@ $grid-gutter-height: 2rem !default;
$grid-gutter-xs-width: $grid-gutter-width / 2 !default;
$grid-gutter-element-height: $grid-gutter-height * 2 !default;
$field-gutter-height: $grid-gutter-height / 2 !default;
$col-block-gutter-height: $grid-gutter-height / 4 !default;
$footer-size: 18.5rem !default;
$footer-bar-size: 2.5rem !default;