TeaSpeak/TeaWeb
TeaSpeak/TeaWeb
1
0
Fork 0
Code Issues 1 Pull requests Activity

Allow the client to use the scroll bar without closing the modal within modals

Browse source 
Signed-off-by: WolverinDEV <git@teaspeak.de>
This commit is contained in:
WolverinDEV 2019-12-20 21:39:32 +01:00
parent aadb712422
commit 1e924fe40f
No known key found for this signature in database
GPG key ID: 77A6C15085150EEB
2 changed files with 90 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

116
shared/js/ui/elements/modal.ts
View file

@ -89,53 +89,96 @@ class ModalProperties {
full_size?: boolean = false; full_size?: boolean = false;
} }
$(document).on('mousedown', (event: JQuery.MouseDownEvent) => { namespace modal {
/* pageX or pageY are undefined if this is an event executed via .trigger('click'); */ export function initialize_modals() {
if(_global_modal_count == 0 || typeof(event.pageX) === "undefined" || typeof(event.pageY) === "undefined") register_global_events();
return; }
const scrollSize = 18;
function scroll_bar_clicked(event){
const x = event.pageX,
y = event.pageY,
e = $(event.target);
if(e.hasScrollBar("height")){
const top = e.offset().top;
const right = e.offset().left + e.width();
const bottom = top +e.height();
const left = right - scrollSize;
if((y >= top && y <= bottom) && (x >= left && x <= right))
return true;
}
if(e.hasScrollBar("width")){
const bottom = e.offset().top + e.height();
const top = bottom - scrollSize;
const left = e.offset().left;
const right = left + e.width();
if((y >= top && y <= bottom) && (x >= left && x <= right))
return true;
}
return false;
}
function register_global_events() {
$(document).on('mousedown', (event: JQuery.MouseDownEvent) => {
/* pageX or pageY are undefined if this is an event executed via .trigger('click'); */
if(_global_modal_count == 0 || typeof(event.pageX) === "undefined" || typeof(event.pageY) === "undefined")
return;
let element = event.target as HTMLElement; let element = event.target as HTMLElement;
do { const original = element;
if(element.classList.contains('modal-content')) do {
break; if(element.classList.contains('modal-content'))
break;
if(!element.classList.contains('modal')) if(!element.classList.contains('modal'))
continue; continue;
if(element == _global_modal_last && _global_modal_last_time + 100 > Date.now()) if(element == _global_modal_last && _global_modal_last_time + 100 > Date.now())
break; break;
$(element).find("> .modal-dialog > .modal-content > .modal-header .button-modal-close").trigger('click'); if(element === original && scroll_bar_clicked(event)) {
break; _global_modal_last_time = Date.now();
} while((element = element.parentElement)); break;
}); }
$(element).find("> .modal-dialog > .modal-content > .modal-header .button-modal-close").trigger('click');
break;
} while((element = element.parentElement));
});
$(document).on('keyup', (event: JQuery.KeyUpEvent) => { $(document).on('keyup', (event: JQuery.KeyUpEvent) => {
if(_global_modal_count == 0 || typeof(event.target) === "undefined") if(_global_modal_count == 0 || typeof(event.target) === "undefined")
return; return;
if(event.key !== "Escape") if(event.key !== "Escape")
return; return;
let element = event.target as HTMLElement; let element = event.target as HTMLElement;
if(element.nodeName == "HTMLInputElement" || element.nodeName == "HTMLSelectElement" || element.nodeName == "HTMLTextAreaElement") if(element.nodeName == "HTMLInputElement" || element.nodeName == "HTMLSelectElement" || element.nodeName == "HTMLTextAreaElement")
return; return;
do { do {
if(element.classList.contains('modal-content')) if(element.classList.contains('modal-content'))
break; break;
if(!element.classList.contains('modal')) if(!element.classList.contains('modal'))
continue; continue;
if(element == _global_modal_last && _global_modal_last_time + 100 > Date.now()) if(element == _global_modal_last && _global_modal_last_time + 100 > Date.now())
break; break;
$(element).find("> .modal-dialog > .modal-content > .modal-header .button-modal-close").trigger('click'); $(element).find("> .modal-dialog > .modal-content > .modal-header .button-modal-close").trigger('click');
break; break;
} while((element = element.parentElement)); } while((element = element.parentElement));
}); });
}
}
modal.initialize_modals();
let _global_modal_count = 0; let _global_modal_count = 0;
let _global_modal_last: HTMLElement; let _global_modal_last: HTMLElement;
@ -230,6 +273,9 @@ class Modal {
if(!this.shown) return; if(!this.shown) return;
_global_modal_count--; _global_modal_count--;
if(_global_modal_last === this.htmlTag[0])
_global_modal_last = undefined;
this.shown = false; this.shown = false;
this.htmlTag.removeClass('shown'); this.htmlTag.removeClass('shown');
setTimeout(() => { setTimeout(() => {

16
shared/js/ui/modal/ModalAbout.ts
View file

@ -38,16 +38,18 @@ namespace Modals {
}, },
footer: null, footer: null,
width: 600 width: "60em"
}); });
connectModal.htmlTag.find(".modal-body").addClass("modal-about"); connectModal.htmlTag.find(".modal-body").addClass("modal-about");
connectModal.open(); connectModal.open();
(window as any).native.client_version().then(version => { if(!app.is_web()) {
connectModal.htmlTag.find(".version-client").text(version); (window as any).native.client_version().then(version => {
}).catch(error => { connectModal.htmlTag.find(".version-client").text(version);
log.error(LogCategory.GENERAL, tr("Failed to load client version: %o"), error); }).catch(error => {
connectModal.htmlTag.find(".version-client").text("unknown"); log.error(LogCategory.GENERAL, tr("Failed to load client version: %o"), error);
}); connectModal.htmlTag.find(".version-client").text("unknown");
});
}
} }
} }