Skip to content

Commit

Permalink
Merge pull request cypht-org#889 from josaphatim/update-bootstrap-modals
Browse files Browse the repository at this point in the history 
Changed custom modals to bootstrap modals
  • Loading branch information
@alvinBM
alvinBM committed Feb 16, 2024
2 parents b0436e5 + 1b11234 commit fd9328d
Show file tree
Hide file tree
Showing 11 changed files with 99 additions and 215 deletions.
1 change: 0 additions & 1 deletion modules/core/output_modules.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -542,7 +542,6 @@ protected function output() {
$js_lib .= '<script type="text/javascript" src="vendor/twbs/bootstrap/dist/js/bootstrap.min.js"></script>';
$js_lib .= '<script type="text/javascript" src="third_party/cash.min.js"></script>';
$js_lib .= '<script type="text/javascript" src="third_party/resumable.min.js"></script>';
$js_lib .= '<script type="text/javascript" src="third_party/tingle.min.js"></script>';
$js_lib .= '<script type="text/javascript" src="third_party/ays-beforeunload-shim.js"></script>';
$js_lib .= '<script type="text/javascript" src="third_party/jquery.are-you-sure.js"></script>';
$js_lib .= '<script type="text/javascript" src="third_party/sortable.min.js"></script>';
Expand Down
101 changes: 0 additions & 101 deletions modules/core/site.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -326,104 +326,3 @@ div.unseen, .unseen .subject { font-weight: 700; }
.drag_target {
background-color: #888 !important;
}

.cypht-modal {
display: block;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
}

.cypht-modal-bg {
background-color: rgba(0,0,0,0.4);
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
}

.cypht-modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 50%;
display: flex;
flex-direction: column;
gap: 20px;
position: relative;
}

.cypht-modal-content-close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
align-self: flex-end;
position: absolute;
}

.cypht-modal-content-close:hover,
.cypht-modal-content-close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}

.cypht-modal-header {
font-size: 1.5rem;
font-weight: 600;
}

.cypht-modal-footer {
display: flex;
justify-content: flex-end;
gap: 10px;
}

.cypht-modal-footer button {
padding: 10px 20px;
cursor: pointer;
}

.cypht-modal-content-close:hover,
.cypht-modal-content-close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}

.cypht-modal-header {
font-size: 1.5rem;
font-weight: 600;
}

.cypht-modal-footer {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 10px;
}

.cypht-modal-footer button {
padding: 10px 20px;
cursor: pointer;
height: max-content;
width: max-content;
}

.mobile .cypht-modal-content {
width: 75%;
}

.mobile .cypht-modal-footer {
justify-content: flex-start;
}

.mobile .cypht-modal-footer button {
padding: 5px 10px;
}
98 changes: 66 additions & 32 deletions modules/core/site.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -306,47 +306,81 @@ var Hm_Ajax_Request = function() { return {
/**
* Show a modal dialog with a title, content and buttons.
*/
const Hm_Modals = {
/**
* show the modal
* @param {string | HTMLElement} title title of the modal
* @param {string | HTMLElement} content content of the modal
* @param {Array<string>} btnsTexts buttons texts
* @param {Array<Function>} btnsCbs array of callbacks for each button @default Hm_Modals.hide()
*/
show: function (title = '', content = '', btnsTexts = [], btnsCbs = []) {
const modal = `
<div id="cypht-modal" class="cypht-modal">
<div class="cypht-modal-bg"></div>
<div class="cypht-modal-content">
<span class="cypht-modal-content-close">&times;</span>
<div class="cypht-modal-header">
${title}
</div>
function Hm_Modal(options) {
var defaults = {
title: 'Cypht',
size: '',
btnSize: '',
modalId: 'myModal',
};

this.opts = { ...defaults, ...options };

<div class="cypht-modal-body">
${content}
</div>
this.init = function () {
if (this.modal) {
return;
}

<div class="cypht-modal-footer">
${btnsTexts.map((text, index) => `<button class="cypht-modal-btn-${index + 1}">${text}</button>`).join('')}
const modal = `
<div id="${this.opts.modalId}" class="modal fade modal-${this.opts.size}" data-bs-backdrop="static" tabindex="-1" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title">${this.opts.title}</h2>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary${this.opts.btnSize? ' btn-' + this.opts.btnSize: ''}" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
`;
document.querySelector('body').insertAdjacentHTML('beforeend', modal);
$('body').append(modal);

btnsTexts.forEach((_, index) => {
document.querySelector(`.cypht-modal-btn-${index + 1}`).addEventListener('click', btnsCbs[index] || this.hide);
});
this.modal = $(`#${this.opts.modalId}`);
this.modalContent = this.modal.find('.modal-body');
this.modalTitle = this.modal.find('.modal-title');
this.modalFooter = this.modal.find('.modal-footer');

document.querySelector('.cypht-modal-content-close').addEventListener('click', this.hide);
document.querySelector('.cypht-modal-bg').addEventListener('click', this.hide);
},
this.bsModal = new bootstrap.Modal(document.getElementById(this.opts.modalId));
};

hide: () => {
document.querySelector('#cypht-modal').remove();
}
this.open = () => {
this.bsModal.show();
};

this.hide = () => {
this.bsModal.hide();
};

this.addFooterBtn = (label, classes, callback) => {
const btn = document.createElement('button');
btn.innerHTML = label;

btn.classList.add('btn', ...classes.split(' '));
if (this.opts.btnSize) {
btn.classList.add(`btn-${this.opts.btnSize}`);
}

btn.addEventListener('click', callback);
btn.addEventListener('click', this.hide);

this.modalFooter.append(btn);
};

this.setContent = (content) => {
this.modalContent.html(content);
};

this.setTitle = (title) => {
this.modalTitle.html(title);
};

this.init();
}

/* user notification manager */
Expand Down
1 change: 0 additions & 1 deletion modules/sievefilters/assets/tingle.min.css
View file

This file was deleted.

6 changes: 0 additions & 6 deletions modules/sievefilters/modules.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1212,7 +1212,6 @@ class Hm_Output_sievefilters_settings_start extends Hm_Output_Module {
protected function output() {
$socked_connected = $this->get('socket_connected', false);
$res = '<div class="sievefilters_settings p-0"><div class="content_title px-3">'.$this->trans('Filters').'</div>';
$res .= '<script type="text/css" src="'.WEB_ROOT.'modules/sievefilters/assets/tingle.min.css"></script>';
$res .= '<div class="p-3">';
return $res;
}
Expand All @@ -1225,7 +1224,6 @@ class Hm_Output_blocklist_settings_start extends Hm_Output_Module {
protected function output() {
$socked_connected = $this->get('socket_connected', false);
$res = '<div class="sievefilters_settings p-0"><div class="content_title px-3">'.$this->trans('Block List').'</div>';
$res .= '<script type="text/css" src="'.WEB_ROOT.'modules/sievefilters/assets/tingle.min.css"></script>';
return $res;
}
}
Expand Down Expand Up @@ -1455,8 +1453,6 @@ public function process() {
function get_script_modal_content()
{
return '<div id="edit_script_modal" class="d-none">
<h1 class="script_modal_title"></h1>
<hr/>
<div class="mb-2">
<h3 class="mb-1">General</h3>
<small>Input a name and order for your filter. In filters, the order of execution is important. You can define an order value (or priority value) for your filter. Filters will run from lowest to highest priority value.</small>
Expand Down Expand Up @@ -1485,8 +1481,6 @@ function get_script_modal_content()
function get_classic_filter_modal_content()
{
return '<div id="edit_filter_modal" class="d-none">
<h1 class="filter_modal_title"></h1>
<hr/>
<div class="mb-2">
<h3 class="mb-1">General</h3>
<small>Input a name and order for your filter. In filters, the order of execution is important. You can define an order value (or priority value) for your filter. Filters will run from lowest to highest priority value.</small>
Expand Down
Loading

0 comments on commit fd9328d

Please sign in to comment.