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

IMPROVEMENT: field gutter variables

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

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

@ -112,12 +112,12 @@ textarea,
} }
.btn-toolbar { .btn-toolbar {
margin-top: $grid-gutter-height / 2; margin-top: $field-gutter-height;
} }
.field { .field {
position: relative; position: relative;
margin: ($grid-gutter-height / 2) 0; margin: $field-gutter-height 0;
&.composite { &.composite {
margin-top: 0; margin-top: 0;
@ -173,8 +173,8 @@ textarea,
// element col paddings // element col paddings
.col-block { .col-block {
padding-top: $grid-gutter-height / 4; padding-top: $col-block-gutter-height;
padding-bottom: $grid-gutter-height / 4; padding-bottom: $col-block-gutter-height;
} }
// rewrite btn opacity on hover // 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-xs-width: $grid-gutter-width / 2 !default;
$grid-gutter-element-height: $grid-gutter-height * 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-size: 18.5rem !default;
$footer-bar-size: 2.5rem !default; $footer-bar-size: 2.5rem !default;