Do not close modals when clicking on the background if the form has changed
Fixes #5239 Closes #5255
This commit is contained in:
parent
e01a361ea4
commit
89821c759e
|
|
@ -35,18 +35,19 @@ return new DomManipulation(tag)};KB.find=function(selector){var element=document
|
|||
return null};KB.exists=function(selector){return!!document.querySelector(selector)};KB.focus=function(selector){var element=document.querySelector(selector);if(element){return element.focus()}};KB.html.label=function(label,id){return KB.dom('label').attr('for',id).text(label).build()};KB.html.radio=function(label,name,value){return KB.dom('label').add(KB.dom('input').attr('type','radio').attr('name',name).attr('value',value).build()).text(label).build()};KB.html.radios=function(items){var html=KB.dom('div');for(var item in items){if(items.hasOwnProperty(item)){html.add(KB.html.radio(item.label,item.name,item.value))}}};KB.http.request=function(method,url,headers,body){var successCallback=function(){};var authErrorCallback=function(){};var netErrorCallback=function(){};var errorCallback=function(){};function parseResponse(request){var redirect=request.getResponseHeader('X-Ajax-Redirect');var location=request.getResponseHeader('Location');if(redirect==='self'){window.location.reload()}else if(redirect&&redirect.indexOf('#')>-1){window.location=redirect.split('#')[0]}else if(redirect){window.location=redirect}else if(location){window.location=location}else if(request.getResponseHeader('Content-Type')==='application/json'){try{return JSON.parse(request.responseText)}catch(e){}}
|
||||
return request.responseText}
|
||||
this.execute=function(){var request=new XMLHttpRequest();request.open(method,url,!0);request.setRequestHeader('X-Requested-With','XMLHttpRequest');for(var header in headers){if(headers.hasOwnProperty(header)){request.setRequestHeader(header,headers[header])}}
|
||||
request.onerror=function(){errorCallback()};request.onreadystatechange=function(){if(request.readyState===XMLHttpRequest.DONE){var response=parseResponse(request);switch(request.status){case 200:successCallback(response);return;case 401:authErrorCallback(response);errorCallback(response);break;case 0:netErrorCallback(response);errorCallback(response);break;default:errorCallback(response);break}}};request.send(body);return this};this.success=function(callback){successCallback=callback;return this};this.authError=function(callback){authErrorCallback=callback;return this};this.netError=function(callback){netErrorCallback=callback;return this};this.error=function(callback){errorCallback=callback;return this}};KB.http.get=function(url){return(new KB.http.request('GET',url)).execute()};KB.http.postJson=function(url,body){var headers={'Content-Type':'application/json','Accept':'application/json'};return(new KB.http.request('POST',url,headers,JSON.stringify(body))).execute()};KB.http.postForm=function(url,formElement){var formData=new FormData(formElement);return(new KB.http.request('POST',url,{},formData)).execute()};KB.http.uploadFile=function(url,file,csrf,onProgress,onComplete,onError,onServerError,onRequestTooLarge){var fd=new FormData();fd.append('files[]',file);fd.append('csrf_token',csrf);var xhr=new XMLHttpRequest();xhr.upload.addEventListener('progress',onProgress);xhr.upload.addEventListener('error',onError);xhr.open('POST',url,!0);xhr.setRequestHeader('X-Requested-With','XMLHttpRequest');xhr.onreadystatechange=function(){if(xhr.readyState===XMLHttpRequest.DONE){if(xhr.status===200){onComplete()}else if(xhr.status===413){if(typeof onRequestTooLarge!=='undefined'){onRequestTooLarge()}else{onError(xhr.responseText)}}else if(typeof onServerError!=='undefined'){onServerError(JSON.parse(xhr.responseText))}}};xhr.send(fd)};(function(){var isOpen=!1;function onOverlayClick(e){if(e.target.matches('#modal-overlay')){e.stopPropagation();e.preventDefault();destroy()}}
|
||||
request.onerror=function(){errorCallback()};request.onreadystatechange=function(){if(request.readyState===XMLHttpRequest.DONE){var response=parseResponse(request);switch(request.status){case 200:successCallback(response);return;case 401:authErrorCallback(response);errorCallback(response);break;case 0:netErrorCallback(response);errorCallback(response);break;default:errorCallback(response);break}}};request.send(body);return this};this.success=function(callback){successCallback=callback;return this};this.authError=function(callback){authErrorCallback=callback;return this};this.netError=function(callback){netErrorCallback=callback;return this};this.error=function(callback){errorCallback=callback;return this}};KB.http.get=function(url){return(new KB.http.request('GET',url)).execute()};KB.http.postJson=function(url,body){var headers={'Content-Type':'application/json','Accept':'application/json'};return(new KB.http.request('POST',url,headers,JSON.stringify(body))).execute()};KB.http.postForm=function(url,formElement){var formData=new FormData(formElement);return(new KB.http.request('POST',url,{},formData)).execute()};KB.http.uploadFile=function(url,file,csrf,onProgress,onComplete,onError,onServerError,onRequestTooLarge){var fd=new FormData();fd.append('files[]',file);fd.append('csrf_token',csrf);var xhr=new XMLHttpRequest();xhr.upload.addEventListener('progress',onProgress);xhr.upload.addEventListener('error',onError);xhr.open('POST',url,!0);xhr.setRequestHeader('X-Requested-With','XMLHttpRequest');xhr.onreadystatechange=function(){if(xhr.readyState===XMLHttpRequest.DONE){if(xhr.status===200){onComplete()}else if(xhr.status===413){if(typeof onRequestTooLarge!=='undefined'){onRequestTooLarge()}else{onError(xhr.responseText)}}else if(typeof onServerError!=='undefined'){onServerError(JSON.parse(xhr.responseText))}}};xhr.send(fd)};(function(){var isOpen=!1;var isFormDirty=!1;function onOverlayClick(e){if(e.target.matches('#modal-overlay')&&isFormDirty===!1){e.stopPropagation();e.preventDefault();destroy()}}
|
||||
function onCloseButtonClick(){KB.trigger('modal.close')}
|
||||
function onFormChange(){isFormDirty=!0}
|
||||
function onFormSubmit(){KB.trigger('modal.loading');submitForm()}
|
||||
function getForm(){return document.querySelector('#modal-content form:not(.js-modal-ignore-form)')}
|
||||
function submitForm(){var form=getForm();if(form){var url=form.getAttribute('action');if(url){KB.http.postForm(url,form).success(function(response){KB.trigger('modal.stop');if(response){replace(response)}else{destroy()}}).error(function(response){KB.trigger('modal.stop');if(response.hasOwnProperty('message')){window.alert(response.message)}})}}}
|
||||
function afterRendering(){var formElement=KB.find('#modal-content form');if(formElement){formElement.on('submit',onFormSubmit,!1)}
|
||||
function afterRendering(){var formElement=KB.find('#modal-content form');if(formElement){formElement.on('change',onFormChange,!1);formElement.on('submit',onFormSubmit,!1)}
|
||||
var autoFocusElement=document.querySelector('#modal-content input[autofocus]');if(autoFocusElement){autoFocusElement.focus()}
|
||||
KB.render();_KB.datePicker();_KB.autoComplete();_KB.tagAutoComplete();_KB.get('Task').onPopoverOpened();KB.trigger('modal.afterRender')}
|
||||
function replace(html){var contentElement=KB.find('#modal-content');if(contentElement){contentElement.replace(KB.dom('div').attr('id','modal-content').html(html).build());afterRendering()}}
|
||||
function create(html,width,overlayClickDestroy){var closeButtonElement=KB.dom('a').attr('href','#').attr('id','modal-close-button').html('<i class="fa fa-times"></i>').click(onCloseButtonClick).build();var headerElement=KB.dom('div').attr('id','modal-header').add(closeButtonElement).build();var contentElement=KB.dom('div').attr('id','modal-content').html(html).build();var boxElement=KB.dom('div').attr('id','modal-box').style('width',width).add(headerElement).add(contentElement).build();var overlayElement=KB.dom('div').attr('id','modal-overlay').add(boxElement).build();if(overlayClickDestroy){overlayElement.addEventListener('click',onOverlayClick,!1)}
|
||||
document.body.appendChild(overlayElement);afterRendering()}
|
||||
function destroy(){isOpen=!1;var overlayElement=KB.find('#modal-overlay');if(overlayElement){KB.trigger('modal.beforeDestroy');overlayElement.remove()}}
|
||||
function destroy(){isOpen=!1;isFormDirty=!1;var overlayElement=KB.find('#modal-overlay');if(overlayElement){KB.trigger('modal.beforeDestroy');overlayElement.remove()}}
|
||||
function getWidth(size){var viewport=KB.utils.getViewportSize();if(viewport.width<700){return'99%'}
|
||||
switch(size){case 'large':return viewport.width<1350?'98%':'1350px';case 'medium':return viewport.width<1024?'70%':'1024px'}
|
||||
return viewport.width<800?'75%':'800px'}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
(function () {
|
||||
var isOpen = false;
|
||||
var isFormDirty = false;
|
||||
|
||||
function onOverlayClick(e) {
|
||||
if (e.target.matches('#modal-overlay')) {
|
||||
if (e.target.matches('#modal-overlay') && isFormDirty === false) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
destroy();
|
||||
|
|
@ -13,6 +14,10 @@
|
|||
KB.trigger('modal.close');
|
||||
}
|
||||
|
||||
function onFormChange() {
|
||||
isFormDirty = true;
|
||||
}
|
||||
|
||||
function onFormSubmit() {
|
||||
KB.trigger('modal.loading');
|
||||
submitForm();
|
||||
|
|
@ -51,6 +56,7 @@
|
|||
function afterRendering() {
|
||||
var formElement = KB.find('#modal-content form');
|
||||
if (formElement) {
|
||||
formElement.on('change', onFormChange, false);
|
||||
formElement.on('submit', onFormSubmit, false);
|
||||
}
|
||||
|
||||
|
|
@ -122,8 +128,9 @@
|
|||
|
||||
function destroy() {
|
||||
isOpen = false;
|
||||
var overlayElement = KB.find('#modal-overlay');
|
||||
isFormDirty = false;
|
||||
|
||||
var overlayElement = KB.find('#modal-overlay');
|
||||
if (overlayElement) {
|
||||
KB.trigger('modal.beforeDestroy');
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue