Enhance modal
This commit is contained in:
Ludovic CANDELLIER
@@ -1,105 +1,213 @@
|
||||
@if(!defined('LOAD_MODAL'))
|
||||
|
||||
@push('js')
|
||||
@component('boilerplate::minify')
|
||||
<script>
|
||||
|
||||
<script>
|
||||
function openModal(title, form_id, url_open, url_save, callback, size, no_confirm, buttons, callback_after_loaded) {
|
||||
var status = 0;
|
||||
var dialog = bootbox.dialog({
|
||||
title: title,
|
||||
message: '<p><i class="fa fa-spin fa-spinner"></i> {{ __('loading') }} ...</p>',
|
||||
size: size ? size : 'large',
|
||||
scrollable: true,
|
||||
buttons: buildModalButtons(form_id, no_confirm, buttons)
|
||||
});
|
||||
|
||||
dialog.init(function() {
|
||||
$.get(url_open, function(data) {
|
||||
dialog.find('.bootbox-body').html(data);
|
||||
if (callback_after_loaded) {
|
||||
eval(callback_after_loaded);
|
||||
}
|
||||
if (typeof(url_save) !== 'undefined') {
|
||||
handlePostModal(form_id,url_save, callback);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
// bootbox.setLocale('{{ App::getLocale() }}');
|
||||
|
||||
function changeModalContent(dialog, url, callback) {
|
||||
dialog.init(function() {
|
||||
$.get(url, function(data) {
|
||||
dialog.find('.bootbox-body').html(data);
|
||||
if (callback) {
|
||||
eval(callback);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
function openModal(title, form_id, url_open, url_save, callback, size, no_confirm, options) {
|
||||
var status = 0;
|
||||
|
||||
function viewModal(url, size, title) {
|
||||
var dialog = bootbox.dialog({
|
||||
title: title ? title : 'Web viewer',
|
||||
message: '<iframe style="border:0;" src="' + url + '" height="400" width="100%"></iframe>',
|
||||
size: size ? size : 'xl',
|
||||
scrollable: true,
|
||||
});
|
||||
}
|
||||
if (typeof(options) != 'undefined') {
|
||||
var className = (typeof(options['className']) == 'undefined') ? '' : options['className'];
|
||||
var onHide = (typeof(options['onHide']) == 'undefined') ? false : options['onHide'];
|
||||
var onHidden = (typeof(options['onHidden']) == 'undefined') ? false : options['onHidden'];
|
||||
var onShow = (typeof(options['onShow']) == 'undefined') ? false : options['onShow'];
|
||||
var onShown = (typeof(options['onShown']) == 'undefined') ? false : options['onShown'];
|
||||
var onPostModal = (typeof(options['onPostModal']) == 'undefined') ? false : options['onPostModal'];
|
||||
}
|
||||
|
||||
function viewWindow(url, size, title) {
|
||||
var width = (size == 'sm') ? 400 : 600;
|
||||
var title = title ? title : 'Web viewer';
|
||||
window.open(url,title,"menubar=no, status=no, scrollbars=no, menubar=no, width=" + width + ", height=400");
|
||||
}
|
||||
var dialog = bootbox.dialog({
|
||||
title: title,
|
||||
message: '<p><i class="fa fa-spin fa-spinner"></i> {{ __('loading') }} ...</p>',
|
||||
size: size ? size : 'large',
|
||||
scrollable: true,
|
||||
className: className,
|
||||
onHide: function(e) {
|
||||
// console.log(status);
|
||||
if (onHide) {
|
||||
eval(onHide);
|
||||
}
|
||||
},
|
||||
onHidden: function(e) {
|
||||
// console.log(status);
|
||||
if (onHidden) {
|
||||
eval(onHidden);
|
||||
}
|
||||
},
|
||||
onShow: function(e) {
|
||||
var modal = e.target.firstChild;
|
||||
// console.log(modal);
|
||||
// console.log($('.close'));
|
||||
if (onShow) {
|
||||
eval(onShow);
|
||||
}
|
||||
},
|
||||
onShown: function(e) {
|
||||
var modal = e.target.firstChild;
|
||||
// console.log(modal);
|
||||
// console.log($('.close'));
|
||||
if (onShown) {
|
||||
eval(onShown);
|
||||
}
|
||||
},
|
||||
buttons: buildModalButtons(form_id, no_confirm, callback)
|
||||
});
|
||||
|
||||
function buildModalButtons(form_id, no_confirm, buttons) {
|
||||
if (!no_confirm) {
|
||||
var buttons = {
|
||||
cancel: {
|
||||
label: '{{ __('Annuler') }}',
|
||||
className: 'btn-secondary'
|
||||
},
|
||||
confirm: {
|
||||
label: '{{ __('Sauver') }}',
|
||||
className: 'btn-success',
|
||||
callback: function() {
|
||||
submitModal(form_id);
|
||||
}
|
||||
},
|
||||
};
|
||||
}
|
||||
return buttons;
|
||||
}
|
||||
dialog.init(function() {
|
||||
$.get(url_open, function(data) {
|
||||
dialog.find('.bootbox-body').html(data);
|
||||
handlePostModal(form_id, url_save, callback, onPostModal);
|
||||
});
|
||||
});
|
||||
|
||||
function submitModal(form_id) {
|
||||
if (typeof(tinyMCE) != 'undefined') {
|
||||
tinyMCE.triggerSave();
|
||||
}
|
||||
$('form ' + form_id).submit();
|
||||
status = 1;
|
||||
}
|
||||
/*
|
||||
changeModalContent(dialog, url_open);
|
||||
if (! no_confirm) {
|
||||
handlePostModal(form_id, url_save, callback, onPostModal);
|
||||
}
|
||||
*/
|
||||
return dialog;
|
||||
}
|
||||
|
||||
function handlePostModal(form_id, url_save, callback) {
|
||||
$('form ' + form_id).submit(function(e) {
|
||||
e.preventDefault();
|
||||
var formData = new FormData(this);
|
||||
$.ajax({
|
||||
url: url_save,
|
||||
type: 'POST',
|
||||
data: formData,
|
||||
success: function (data) {
|
||||
if (callback) {
|
||||
eval(callback);
|
||||
}
|
||||
},
|
||||
cache: false,
|
||||
contentType: false,
|
||||
processData: false
|
||||
});
|
||||
});
|
||||
}
|
||||
</script>
|
||||
function changeModalContent(dialog, url, callback) {
|
||||
dialog.init(function() {
|
||||
$.get(url, function(data) {
|
||||
dialog.find('.bootbox-body').html(data);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function viewModal(url, size, title) {
|
||||
var dialog = bootbox.dialog({
|
||||
title: title ? title : 'Web viewer',
|
||||
message: '<iframe style="border:0;" src="' + url + '" height="400" width="100%"></iframe>',
|
||||
size: size ? size : 'xl',
|
||||
scrollable: true,
|
||||
});
|
||||
}
|
||||
|
||||
function viewWindow(url, size, title) {
|
||||
var width = (size == 'sm') ? 400 : 600;
|
||||
var title = title ? title : 'Web viewer';
|
||||
window.open(url, title, "menubar=no, status=no, scrollbars=no, menubar=no, width=" + width + ", height=400");
|
||||
}
|
||||
|
||||
function buildModalButtons(form_id, no_confirm, callback) {
|
||||
return no_confirm ? '' : {
|
||||
cancel: {
|
||||
label: '<i class="fa fa-ban"></i> {{ __("Core.cancel") }}',
|
||||
className: 'btn-secondary'
|
||||
},
|
||||
confirm: {
|
||||
label: '<i class="fa fa-save"></i> {{ __("Core.save") }}',
|
||||
className: 'btn-success',
|
||||
callback: function() {
|
||||
return submitModal(form_id, callback);
|
||||
}
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
function submitModal(form_id, callback) {
|
||||
if (typeof(tinyMCE) != 'undefined') {
|
||||
tinyMCE.triggerSave();
|
||||
}
|
||||
var $form = $(form_id);
|
||||
console.log('submitModal ' + form_id);
|
||||
if ($form.valid()) {
|
||||
deactivateButton($form);
|
||||
console.log('check valid');
|
||||
$form.submit();
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function handlePostModal(form_id, url_save, callback, onPostModal) {
|
||||
// console.log('handlePostModal');
|
||||
// initValidator();
|
||||
var response = false;
|
||||
$(form_id).submit(function(e) {
|
||||
e.preventDefault();
|
||||
console.log('handlepostmodal submit');
|
||||
|
||||
if (onPostModal) {
|
||||
response = eval(onPostModal);
|
||||
} else {
|
||||
response = postModal(form_id, url_save, callback);
|
||||
}
|
||||
// console.log(response);
|
||||
});
|
||||
return response;
|
||||
}
|
||||
|
||||
function postModal(form_id, url_save, callback) {
|
||||
console.log('postModal');
|
||||
console.log(form_id);
|
||||
console.log(callback);
|
||||
var ret = false;
|
||||
var $form = $(form_id);
|
||||
var myForm = document.getElementById(form_id.substring(1));
|
||||
|
||||
$.ajax({
|
||||
url: url_save,
|
||||
type: 'POST',
|
||||
data: new FormData(myForm),
|
||||
success: function (data) {
|
||||
if (callback) {
|
||||
eval(callback);
|
||||
}
|
||||
if (!data.error) {
|
||||
bootbox.hideAll();
|
||||
}
|
||||
},
|
||||
crossDomain: true,
|
||||
headers: {
|
||||
"accept": "application/json",
|
||||
"Access-Control-Allow-Origin":"*"
|
||||
},
|
||||
cache: false,
|
||||
contentType: false,
|
||||
processData: false
|
||||
});
|
||||
|
||||
return ret;
|
||||
}
|
||||
|
||||
function openWindow(url, target) {
|
||||
target = (typeof(target) == 'undefined') ? '_blank' : target;
|
||||
if (target == '_blank') {
|
||||
var anchor = document.createElement('a');
|
||||
anchor.href = url;
|
||||
anchor.target = "_blank";
|
||||
anchor.click();
|
||||
} else {
|
||||
window.location = url;
|
||||
}
|
||||
}
|
||||
|
||||
function reactivateButton($form) {
|
||||
console.log('activateButton');
|
||||
var $button = $form.closest('.modal-content').find('.bootbox-accept').first();
|
||||
if ($button.attr("disabled")) {
|
||||
$button.prop("disabled", false);
|
||||
$button.html("<i class='fa fa-save'></i> {{ __('Core.save') }}");
|
||||
}
|
||||
}
|
||||
|
||||
function deactivateButton($form) {
|
||||
console.log('deactivateButton');
|
||||
console.log($form);
|
||||
var $button = $form.closest('.modal-content').find('.bootbox-accept').first();
|
||||
console.log($button);
|
||||
$button.prop("disabled", true);
|
||||
$button.html("<i class='fa fa-spinner fa-spin'></i> {{ __('Core.processing') }}");
|
||||
}
|
||||
|
||||
</script>
|
||||
@endcomponent
|
||||
@endpush
|
||||
|
||||
@php(define('LOAD_MODAL', true))
|
||||
@endif
|
||||
@endif
|
||||
|
||||
Reference in New Issue
Block a user