Fix some enhancements & new features
This commit is contained in:
Ludovic CANDELLIER
39
build/js/include/form/check_fields.js
Normal file
39
build/js/include/form/check_fields.js
Normal file
@@ -0,0 +1,39 @@
|
||||
function checkCollapsedFields(selector)
|
||||
{
|
||||
var fields = selector + ' input,' + selector + ' textarea,' + selector + ' select';
|
||||
console.log(fields);
|
||||
|
||||
var nb_fields = $(fields).length;
|
||||
console.log(nb_fields);
|
||||
var nb_required = $(fields).filter('[required]').length;
|
||||
console.log(nb_required);
|
||||
var nb_filled = 0;
|
||||
var nb_necessary = 0;
|
||||
|
||||
$(fields).each(function(i, field){
|
||||
if ($(field).val() != '')
|
||||
{
|
||||
nb_filled++;
|
||||
}
|
||||
});
|
||||
|
||||
$(fields).filter('[required]').each(function(i, required){
|
||||
if ($(required).val() != '')
|
||||
{
|
||||
nb_necessary++;
|
||||
}
|
||||
});
|
||||
|
||||
var result = nb_filled + " / " + nb_fields;
|
||||
result = result + " | " + nb_necessary + " / " + nb_required;
|
||||
|
||||
console.log(result);
|
||||
|
||||
var check = $(selector).parent().find('.check');
|
||||
console.log(check);
|
||||
|
||||
// $(selector).parent().find('.check').html(result);
|
||||
if (nb_necessary < nb_required) {
|
||||
$(selector).collapse('show');
|
||||
}
|
||||
}
|
||||
42
build/js/include/form/checkbox.js
Normal file
42
build/js/include/form/checkbox.js
Normal file
@@ -0,0 +1,42 @@
|
||||
function initIcheck(selector)
|
||||
{
|
||||
var selector = (typeof(selector) != 'undefined') ? selector : '.iCheck';
|
||||
console.log('initIcheck');
|
||||
$(selector).each(function(){
|
||||
// var each element .iCheck
|
||||
var $this = $(this),
|
||||
skin = $this.attr('data-skin'),
|
||||
color = $this.attr('data-color'),
|
||||
checkbox, radio, insert = '';
|
||||
|
||||
if (skin === undefined) {
|
||||
checkbox = 'icheckbox_minimal';
|
||||
radio = 'iradio_minimal';
|
||||
} else {
|
||||
checkbox = 'icheckbox_' + skin;
|
||||
radio = 'iradio_' + skin;
|
||||
}
|
||||
|
||||
if (color !== undefined) {
|
||||
checkbox = checkbox + '-' + color;
|
||||
radio = radio + '-' + color;
|
||||
}
|
||||
|
||||
// handle iCheck skin 'line'
|
||||
if (skin == 'line') {
|
||||
var label = $this.next(),
|
||||
label_text = label.text();
|
||||
|
||||
insert = '<div class="icheck_line-icon"></div>' + label_text;
|
||||
label.remove();
|
||||
}
|
||||
|
||||
// initialize
|
||||
$this.iCheck({
|
||||
checkboxClass: checkbox,
|
||||
radioClass: radio,
|
||||
insert: insert,
|
||||
increaseArea: '30%' // optional
|
||||
});
|
||||
});
|
||||
}
|
||||
130
build/js/include/form/datetime.js
Normal file
130
build/js/include/form/datetime.js
Normal file
@@ -0,0 +1,130 @@
|
||||
function initDatepicker() {
|
||||
var lang = getLang();
|
||||
loadScript('assets/plugins/datepicker/bootstrap-datepicker.' + lang + '.min.js', function() {
|
||||
$(".datepicker").datepicker({
|
||||
language: lang
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function initDaterangePicker() {
|
||||
var lang = getLang();
|
||||
loadScript('assets/plugins/daterangepicker/' + lang + '.js');
|
||||
}
|
||||
|
||||
function initMomentLang() {
|
||||
var lang = getLang();
|
||||
loadScript('assets/plugins/moment/' + lang + '.js');
|
||||
}
|
||||
|
||||
function getFormatDate() {
|
||||
var lang = getLang();
|
||||
switch (lang) {
|
||||
case 'en':
|
||||
return 'YYYY-MM-DD';
|
||||
break;
|
||||
case 'fr':
|
||||
return 'DD/MM/YYYY';
|
||||
break;
|
||||
default:
|
||||
return 'YYYY-MM-DD';
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function getFormatDatetime() {
|
||||
var lang = getLang();
|
||||
switch (lang) {
|
||||
case 'en':
|
||||
return 'YYYY-MM-DD HH:mm:ss';
|
||||
break;
|
||||
case 'fr':
|
||||
return 'DD/MM/YYYY HH:mm:ss';
|
||||
break;
|
||||
default:
|
||||
return 'YYYY-MM-DD HH:mm:ss';
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function convertToDateRange(str)
|
||||
{
|
||||
return str.replace('-','/');
|
||||
}
|
||||
|
||||
function getDaterangePicker(selector, startDate, parentEl, endDate) {
|
||||
// console.log('getDaterangePicker');
|
||||
// console.log("StartDate : ", startDate);
|
||||
if (typeof(parentEL) == 'undefined') {
|
||||
parentEl = 'file_effect_date_selection';
|
||||
} else {
|
||||
$(selector).parent().parent().parent().parent().parent().parent().parent().parent().parent().addClass(parentEl);
|
||||
}
|
||||
if (typeof(startDate) == 'undefined') {
|
||||
// startDate = moment().format(dateRangePickerLanguage.format);
|
||||
startDate = moment();
|
||||
} else {
|
||||
// console.log("ici");
|
||||
startDate = moment(startDate, getFormatDate());
|
||||
}
|
||||
// console.log("selector : ", selector);
|
||||
// console.log("StartDate : ", startDate);
|
||||
// console.log("format", dateRangePickerLanguage.format);
|
||||
var options = {
|
||||
alwaysShowCalendars: true,
|
||||
autoUpdateInput: false,
|
||||
format: dateRangePickerLanguage.format,
|
||||
opens: 'left',
|
||||
showDropdowns: true,
|
||||
showWeekNumbers: true,
|
||||
startDate: startDate,
|
||||
separator: dateRangePickerLanguage.separator,
|
||||
locale: dateRangePickerLanguage.locale,
|
||||
buttonClasses: 'btn light uppercase weight-900',
|
||||
parentEl: '.' +parentEl
|
||||
};
|
||||
|
||||
if (typeof(endDate) != 'undefined') {
|
||||
options.cancelClass = "btn-danger";
|
||||
options.endDate = endDate;
|
||||
options.ranges = dateRangePickerLanguage.ranges;
|
||||
options.template =
|
||||
'<div class="daterangepicker">' +
|
||||
'<div class="ranges"></div>' +
|
||||
'<div class="drp-calendar left">' +
|
||||
'<div class="calendar-table"></div>' +
|
||||
'<div class="calendar-time"></div>' +
|
||||
'</div>' +
|
||||
'<div class="drp-calendar right">' +
|
||||
'<div class="calendar-table"></div>' +
|
||||
'<div class="calendar-time"></div>' +
|
||||
'</div>' +
|
||||
'<div class="drp-buttons">' +
|
||||
'<span class="drp-selected"></span>' +
|
||||
'<button class="cancelBtn" type="button"></button>' +
|
||||
'<button class="applyBtn" disabled="disabled" type="button"></button> ' +
|
||||
'</div>' +
|
||||
'</div>';
|
||||
} else {
|
||||
options.autoApply = true;
|
||||
options.singleDatePicker = true;
|
||||
};
|
||||
|
||||
$('#files_selection').parent().parent().parent().parent().parent().parent().parent().parent().parent().removeClass(parentEl).addClass(parentEl);
|
||||
var picker = $(selector).daterangepicker(options, function(start, end, label) {
|
||||
//console.log("New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')");
|
||||
});
|
||||
|
||||
$(selector + ' .daterangepicker').removeClass('light').addClass('light');
|
||||
|
||||
$(selector).next('span.add-on').off('click').on('click', function() {
|
||||
$(selector).trigger('click');
|
||||
});
|
||||
|
||||
$(selector).on('apply.daterangepicker', function(ev, picker) {
|
||||
$(this).val(picker.startDate.format(dateRangePickerLanguage.format));
|
||||
$(selector).trigger('change');
|
||||
});
|
||||
|
||||
return picker;
|
||||
}
|
||||
154
build/js/include/form/multi-select.js
Normal file
154
build/js/include/form/multi-select.js
Normal file
@@ -0,0 +1,154 @@
|
||||
function initMultiselect(model, item, route, availables, associated, event)
|
||||
{
|
||||
console.log('initMultiselect');
|
||||
console.log(route);
|
||||
var toggle_button = "#toggle_button_" + model;
|
||||
var assoc_form = model + "_assoc_form";
|
||||
var assoc_submit = '#' + model + '_assoc_submit';
|
||||
var assoc_selection = '#' + model + '_search_selection';
|
||||
var assoc_selectable = '#' + model + '_search_selectable';
|
||||
var list = '#' + model + '_list';
|
||||
|
||||
$(assoc_submit).off('click').on('click', function(event) {
|
||||
event.preventDefault();
|
||||
$('form[name="' + assoc_form + '"]').submit();
|
||||
});
|
||||
|
||||
$(toggle_button).off('click').on('click', function(event) {
|
||||
if (!$(assoc_submit).is(':hover')) {
|
||||
event.preventDefault();
|
||||
$(toggle_button + " .header-wrapper .glyph-icon:first-child").toggleClass("icon-caret-right icon-caret-down");
|
||||
$(assoc_submit).toggleClass('hidden');
|
||||
$(this).parents(".content-box:first").find(".content-box-wrapper").slideToggle(100, function() {
|
||||
admin_content.orderSelect($(list));
|
||||
renderMultiselect(list, model, item, availables, associated);
|
||||
modobox.resize();
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
$('form[name="'+assoc_form+'"]').off('submit').on('submit', function() {
|
||||
var error = 0;
|
||||
var datas = $(this).serializeJSON();
|
||||
|
||||
if (error == 0) {
|
||||
datas["language"] = getLang();
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
dataType: "json",
|
||||
url: laroute.route(route),
|
||||
data: datas,
|
||||
success: function(response) {
|
||||
if (response.error == -1) {
|
||||
header.logout();
|
||||
} else if (response.error == -6) {
|
||||
admin_content.alertNotFound();
|
||||
} else {
|
||||
admin_content.showSuccessMsg('.information_messages_manage', 'informations_has_been_saved');
|
||||
if (response.nb > 0) {
|
||||
$(toggle_button + " .bs-badge").removeClass("opacity-3");
|
||||
} else {
|
||||
$(toggle_button + " .bs-badge").addClass("opacity-3");
|
||||
}
|
||||
$(toggle_button + " .bs-badge").html(response.nb);
|
||||
setTimeout(function(){
|
||||
$(toggle_button).click();
|
||||
}, 1000);
|
||||
}
|
||||
},
|
||||
error: function() {
|
||||
admin_content.showCustomErrorMsg('.information_messages_manage', translate.getText.an_error_occured);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
admin_content.showCustomErrorMsg('.information_messages_manage', translate.getText.an_error_occured);
|
||||
}
|
||||
});
|
||||
|
||||
$(assoc_submit).off('click').on('click', function(event) {
|
||||
event.preventDefault();
|
||||
$('form[name="'+assoc_form+'"]').submit();
|
||||
});
|
||||
|
||||
$(".ms-container").append('<i class="glyph-icon center-icon icon-exchange text-white"></i>');
|
||||
}
|
||||
|
||||
function renderMultiselect(selector, model, item, availables, associated, parent)
|
||||
{
|
||||
console.log('renderMultiselect');
|
||||
var assoc_submit = "#" + model + "_assoc_submit";
|
||||
var assoc_form = model + "_assoc_form";
|
||||
var assoc_toggle = "#toggle_button_" + model;
|
||||
var assoc_list = "#" + model + "_list";
|
||||
var assoc_selectable = '#' + model + '_search_selectable';
|
||||
var assoc_selection = '#' + model + '_search_selection';
|
||||
var assoc_selected = '#ms-' + model + '_list';
|
||||
var select_all = 'select-all-' + item;
|
||||
var deselect_all = 'deselect-all-' + item;
|
||||
|
||||
var selectableHeader = (typeof(availables) != 'undefined') ? "<div class='col-md-12 text-center'><label class='light'>"+availables+"</label></div>" : '';
|
||||
var selectionHeader = (typeof(associated) != 'undefined') ? "<div class='col-md-12 text-center'><label class='green'>"+associated+"</label></div>" : '';
|
||||
|
||||
$(selector).multiSelect({
|
||||
selectableHeader: selectableHeader + "<input type='text' id='"+assoc_selectable+"' class='mb-2 form-control quicksearch selectable-search styled' autocomplete='off' placeholder='"+translate.getText.search+"...'>",
|
||||
selectionHeader: selectionHeader + "<input type='text' id='"+assoc_selection+"' class='mb-2 form-control quicksearch selectable-search styled' autocomplete='off' placeholder='"+translate.getText.search+"...'>",
|
||||
selectableFooter: "<button id='"+select_all+"' class='btn btn-alt btn-success btn-block mt-2 noradius pr-3'><span>"+translate.getText.select_all+"</span><i class='glyph-icon icon-arrow-right pull-right'></i></button>",
|
||||
selectionFooter: "<button id='"+deselect_all+"' class='btn btn-alt btn-danger btn-block mt-2 noradius pl-3'><i class='glyph-icon icon-arrow-left pull-left'></i><span>"+translate.getText.deselect_all+"</span></button>",
|
||||
afterInit: function(ms) {
|
||||
var that = this,
|
||||
$selectableSearch = that.$selectableUl.prev(),
|
||||
$selectionSearch = that.$selectionUl.prev(),
|
||||
selectableSearchString = '#'+that.$container.attr('id')+' .ms-elem-selectable:not(.ms-selected)',
|
||||
selectionSearchString = '#'+that.$container.attr('id')+' .ms-elem-selection.ms-selected';
|
||||
|
||||
that.qs1 = $selectableSearch.quicksearch(selectableSearchString).on('keydown', function(e){
|
||||
if (e.which === 40) {
|
||||
that.$selectableUl.focus();
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
that.qs2 = $selectionSearch.quicksearch(selectionSearchString).on('keydown', function(e){
|
||||
if (e.which == 40) {
|
||||
that.$selectionUl.focus();
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
$(select_all).off('click').on('click', function() {
|
||||
console.log('select_all');
|
||||
console.log('#ms-' + model + '_list');
|
||||
if ($(assoc_selectable).val() == "") {
|
||||
$(list).multiSelect('select_all');
|
||||
} else {
|
||||
$('#ms-' + model + '_list .ms-elem-selectable').each(function() {
|
||||
if(!$(this).is(':hidden')) { $(this).click(); }
|
||||
});
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
$(deselect_all).off('click').on('click', function() {
|
||||
if ($(assoc_selection).val() == "") {
|
||||
$(list).multiSelect('deselect_all');
|
||||
} else {
|
||||
$('#ms-' + model + '_list .ms-elem-selection').each(function() {
|
||||
if(!$(this).is(':hidden')) { $(this).click(); }
|
||||
});
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
},
|
||||
afterSelect: function(){
|
||||
this.qs1.cache();
|
||||
this.qs2.cache();
|
||||
},
|
||||
afterDeselect: function(){
|
||||
this.qs1.cache();
|
||||
this.qs2.cache();
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
5
build/js/include/form/radio.js
Normal file
5
build/js/include/form/radio.js
Normal file
@@ -0,0 +1,5 @@
|
||||
function initRadio()
|
||||
{
|
||||
$('input[type="radio"].custom-radio').uniform();
|
||||
$('.radio span').append('<i class="glyph-icon icon-circle"></i>');
|
||||
}
|
||||
24
build/js/include/form/select.js
Normal file
24
build/js/include/form/select.js
Normal file
@@ -0,0 +1,24 @@
|
||||
function initSelect2()
|
||||
{
|
||||
$(".select2").select2({
|
||||
placeholder: "Select a value",
|
||||
allowClear: true
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
function initChosen()
|
||||
{
|
||||
$(".chosen-select").chosen({ no_results_text: translate.getText.no_result });
|
||||
$(".chosen-search").append('<i class="glyph-icon icon-search"></i>');
|
||||
$(".chosen-single div").html('<i class="glyph-icon icon-caret-down"></i>');
|
||||
$(".chosen-container-single").addClass('styled');
|
||||
}
|
||||
|
||||
function resetChosen()
|
||||
{
|
||||
$('.chosen-select').each(function() {
|
||||
$(this).val("").trigger("chosen:updated");
|
||||
});
|
||||
}
|
||||
|
||||
18
build/js/include/form/set_options.js
Normal file
18
build/js/include/form/set_options.js
Normal file
@@ -0,0 +1,18 @@
|
||||
function setOptions(selector,data,selected,all) {
|
||||
// console.log(data);
|
||||
var $el = $(selector);
|
||||
$el.empty(); // remove old options
|
||||
if (all) {
|
||||
$el.append($("<option></option>").attr("value",'').text('Tous'));
|
||||
}
|
||||
$.each(data, function(key, name) {
|
||||
console.log(name);
|
||||
if (key != null) {
|
||||
if (key == selected) {
|
||||
$el.append($("<option selected='selected'></option>").attr("value", key).text(name));
|
||||
} else {
|
||||
$el.append($("<option></option>").attr("value", key).text(name));
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
21
build/js/include/form/upload.js
Normal file
21
build/js/include/form/upload.js
Normal file
@@ -0,0 +1,21 @@
|
||||
function initFileInputImage(images, uploadRoute)
|
||||
{
|
||||
$(".file").fileinput({
|
||||
uploadUrl: "/file-upload-batch/2",
|
||||
allowedFileExtensions: ['jpg', 'png', 'gif'],
|
||||
overwriteInitial: true,
|
||||
showRemove: true,
|
||||
frameClass: '',
|
||||
initialPreviewAsData: false,
|
||||
maxFileSize: 10000,
|
||||
removeFromPreviewOnError: true,
|
||||
initialPreview: images,
|
||||
layoutTemplates: {
|
||||
footer: ''
|
||||
},
|
||||
previewTemplates: {
|
||||
image: '<img src="{data}" class="kv-preview-data file-preview-image img-fluid" title="{caption}" alt="{caption}" {style}>\n',
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
74
build/js/include/form/validator.js
Normal file
74
build/js/include/form/validator.js
Normal file
@@ -0,0 +1,74 @@
|
||||
function initValidator() {
|
||||
$( document ).ready(function() {
|
||||
// console.log('initValidator');
|
||||
// $(window).on('load', function() {
|
||||
// window.addEventListener('load', function() {
|
||||
|
||||
// console.log('initValidator load');
|
||||
var forms = $('.needs-validation');
|
||||
|
||||
$(forms).each(function(i, form) {
|
||||
form.addEventListener('submit', function(event) {
|
||||
checkValidatorFields(form);
|
||||
}, false);
|
||||
});
|
||||
|
||||
// }, false);
|
||||
});
|
||||
}
|
||||
|
||||
function checkValidatorFields(form) {
|
||||
console.log('checkValidatorFields');
|
||||
if (form.checkValidity() === false) {
|
||||
console.log('non validé');
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
} else {
|
||||
console.log("validé");
|
||||
form.classList.add('valid');
|
||||
}
|
||||
form.classList.add('was-validated');
|
||||
|
||||
form.addEventListener('invalid', function(e) {
|
||||
console.log(e);
|
||||
}, true);
|
||||
|
||||
}
|
||||
|
||||
function initValidatorHtml() {
|
||||
window.addEventListener('load', function() {
|
||||
// Fetch all the forms we want to apply custom Bootstrap validation styles to
|
||||
var forms = document.getElementsByClassName('needs-validation');
|
||||
// Loop over them and prevent submission
|
||||
var validation = Array.prototype.filter.call(forms, function(form) {
|
||||
form.addEventListener('submit', function(event) {
|
||||
if (form.checkValidity() === false) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
}
|
||||
form.classList.add('was-validated');
|
||||
}, false);
|
||||
});
|
||||
}, false);
|
||||
}
|
||||
|
||||
function initValidator2() {
|
||||
$('.needs-validation').bootstrapValidator().on('submit', function(e) {
|
||||
if (e.isDefaultPrevented()) {
|
||||
console.log('bad');
|
||||
} else {
|
||||
console.log('good');
|
||||
}
|
||||
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
// Active the panel element containing the first invalid element
|
||||
var $form = $(e.target),
|
||||
validator = $form.data('bootstrapValidator'),
|
||||
$invalidField = validator.getInvalidFields().eq(0),
|
||||
$collapse = $invalidField.parents('.collapse');
|
||||
|
||||
$collapse.collapse('show');
|
||||
});
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user