blob: 1d06e1d47ddc5081347f2ca720dad15720e694cb [file] [log] [blame] [raw]
// Copyright (c) 2021, Compiler Explorer Authors
// All rights reserved.
//
// Redistribution and use in source and binary forms, with or without
// modification, are permitted provided that the following conditions are met:
//
// * Redistributions of source code must retain the above copyright notice,
// this list of conditions and the following disclaimer.
// * Redistributions in binary form must reproduce the above copyright
// notice, this list of conditions and the following disclaimer in the
// documentation and/or other materials provided with the distribution.
//
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
// AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
// IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
// ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE
// LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
// CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
// SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
// INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
// CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
// ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
// POSSIBILITY OF SUCH DAMAGE.
import $ from 'jquery';
import { AlertAskOptions, AlertNotifyOptions } from "./alert.interfaces";
export class Alert {
yesHandler: (answer?: string | string[] | number) => void | null = null;
noHandler: () => void | null = null;
prefixMessage: string = '';
constructor() {
const yesNoModal = $('#yes-no');
yesNoModal.find('button.yes').on('click', () => {
this.yesHandler?.();
});
yesNoModal.find('button.no').on('click', () => {
this.noHandler?.();
});
const enterSomething = $('#enter-something');
enterSomething.find('button.yes').on('click', () => {
const answer = enterSomething.find('.question-answer');
this.yesHandler?.(answer.val());
});
enterSomething.find('button.no').on('click', () => {
this.noHandler?.();
});
}
/**
* Display an alert with a title and a body
*/
alert(title: string, body: string, onClose?: () => void) {
const modal = $('#alert');
modal.find('.modal-title').html(title);
modal.find('.modal-body').html(body);
modal.modal();
if (onClose) {
modal.off('hidden.bs.modal');
modal.on('hidden.bs.modal', onClose);
}
return modal;
}
/**
* Asks the user a two choice question, where the title, content and buttons are customizable
*/
ask(title: string, question: string, askOptions: AlertAskOptions) {
const modal = $('#yes-no');
this.yesHandler = askOptions?.yes ?? (() => undefined);
this.noHandler = askOptions?.no ?? (() => undefined);
modal.find('.modal-title').html(title);
modal.find('.modal-body')
.css("min-height", "inherit")
.html(question);
if (askOptions.yesHtml) modal.find('.modal-footer .yes').html(askOptions.yesHtml);
if (askOptions.yesClass) {
modal.find('.modal-footer .yes')
.removeClass('btn-link')
.addClass(askOptions.yesClass);
}
if (askOptions.noHtml) modal.find('.modal-footer .no').html(askOptions.noHtml);
if (askOptions.noClass) {
modal.find('.modal-footer .no')
.removeClass('btn-link')
.addClass(askOptions.noClass);
}
if (askOptions.onClose) {
modal.off('hidden.bs.modal');
modal.on('hidden.bs.modal', askOptions.onClose);
}
modal.modal();
return modal;
}
/**
* Notifes the user of something by a popup which can be stacked, auto-dismissed, etc... based on options
*/
notify(body: string, {
group = "",
collapseSimilar = true,
alertClass = "",
autoDismiss = true,
dismissTime = 5000
}: AlertNotifyOptions) {
const container = $('#notifications');
if (!container) return;
const newElement = $(`
<div class="alert notification ${alertClass}" tabindex="-1" role="dialog">
<button type="button" class="close" style="float: left; margin-right: 5px;" data-dismiss="alert">
&times;
</button>
<span id="msg">${this.prefixMessage}${body}</span>
</div>
`);
if (group !== "") {
if (collapseSimilar) {
// Only collapsing if a group has been specified
container.find(`[data-group="${group}"]`).remove();
}
newElement.attr('data-group', group)
}
if (autoDismiss) {
setTimeout(() => {
newElement.fadeOut('slow', () => {
newElement.remove();
});
}, dismissTime);
}
// Append the newly created element to the container
container.append(newElement);
}
/**
* Asks the user a two choice question, where the title, content and buttons are customizable
*/
enterSomething(title: string, question: string, defaultValue: string, askOptions: AlertAskOptions) {
const modal = $('#enter-something');
this.yesHandler = askOptions?.yes ?? (() => undefined);
this.noHandler = askOptions?.no ?? (() => undefined);
modal.find('.modal-title').html(title);
modal.find('.modal-body .question').html(question);
const yesButton = modal.find('.modal-footer .yes');
const noButton = modal.find('.modal-footer .no');
const answerEdit = modal.find('.modal-body .question-answer');
answerEdit.val(defaultValue);
answerEdit.on('keyup', (e) => {
if (e.keyCode === 13 || e.which === 13) {
yesButton.trigger('click');
}
});
if (askOptions.yesHtml) yesButton.html(askOptions.yesHtml);
if (askOptions.yesClass) {
yesButton.removeClass('btn-light').addClass(askOptions.yesClass);
}
if (askOptions.noHtml) noButton.html(askOptions.noHtml);
if (askOptions.noClass) {
noButton.removeClass('btn-light').addClass(askOptions.noClass);
}
if (askOptions.onClose) {
modal.off('hidden.bs.modal');
modal.on('hidden.bs.modal', askOptions.onClose);
}
modal.on('shown.bs.modal', () => {
answerEdit.trigger('focus');
});
modal.modal();
return modal;
}
}