Skip to content

Commit 03f5908

Browse files
lorenzobrunilorenzobruni
committed
* Method **api.ajax.config** fixed.
* Method **api.modal.confirm** enhanced to support multiple cascade modals * **Bootstrap 4.5.2** SCSS synched and CSS recompiled with the default Accessibility WCAG 2.1 Level AA color scheme * **API Constants** cleaned. Please re-sync the `root/template/modal.html` with your project
1 parent 1dfb600 commit 03f5908

File tree

4 files changed

+45
-73
lines changed

4 files changed

+45
-73
lines changed

‎src/js/api.constant.js

Lines changed: 5 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,14 @@
11
/*******************************************************************************
22
API - Constant
33
*******************************************************************************/
4-
const C_API_VERSION = '4.0.0';
5-
6-
/*******************************************************************************
7-
API - Constant - Selector
8-
*******************************************************************************/
9-
const C_API_SELECTOR_BODY = '#body';
10-
// Spinner
11-
const C_API_SELECTOR_SPINNER = '#spinner';
12-
// Navigation
13-
const C_API_SELECTOR_NAVIGATION = '#navigation';
14-
// Nav Loader
15-
const C_API_SELECTOR_NAV_LOADER = '#nav-loader';
16-
// Return to Top
17-
const C_API_SELECTOR_RETURN_TO_TOP = '#return-to-top';
18-
// Modal
19-
const C_API_SELECTOR_MODAL_BODY = '.modal-body > p';
20-
const C_API_SELECTOR_MODAL_CONFIRM = '#modal-confirm';
21-
const C_API_SELECTOR_MODAL_SUCCESS = '#modal-success';
22-
const C_API_SELECTOR_MODAL_ERROR = '#modal-error';
23-
const C_API_SELECTOR_MODAL_INFORMATION = '#modal-information';
24-
const C_API_SELECTOR_MODAL_EXCEPTION = '#modal-exception';
25-
const C_API_SELECTOR_MODAL_BUTTON_CONFIRM = '#modal-button-confirm';
4+
const C_API_VERSION = "4.1.0";
265

276
/*******************************************************************************
287
API - Constant - URI
298
*******************************************************************************/
309
// Used as GET parameter to hide content
31-
const C_API_URI_NOHEADER = 'noheader';
32-
const C_API_URI_NONAVBAR = 'nonavbar';
33-
const C_API_URI_NOFOOTER = 'nofooter';
10+
const C_API_URI_NOHEADER = "noheader";
11+
const C_API_URI_NONAVBAR = "nonavbar";
12+
const C_API_URI_NOFOOTER = "nofooter";
3413
// Used as GET parameter to load a body
35-
const C_API_URI_BODY = 'body';
14+
const C_API_URI_BODY = "body";

‎src/js/api.library.js

Lines changed: 35 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ api.spinner.progress.timeout = 0;
1919
*/
2020
api.spinner.start = function () {
2121
if (!api.spinner.count++) {
22-
$(C_API_SELECTOR_SPINNER).show();
22+
$("#spinner").show();
2323
}
2424
};
2525

@@ -39,12 +39,12 @@ api.spinner.stop = function () {
3939

4040
// Close the spinner after 1 second to show 100% in the progress bar
4141
setTimeout(function () {
42-
$(C_API_SELECTOR_SPINNER).fadeOut('slow');
42+
$("#spinner").fadeOut('slow');
4343
}, 1000);
4444
}
4545
else {
4646
// Close the spinner immediatelly
47-
$(C_API_SELECTOR_SPINNER).fadeOut('slow');
47+
$("#spinner").fadeOut('slow');
4848
}
4949
}
5050
};
@@ -60,9 +60,9 @@ api.spinner.progress.start = function (progressTimeout) {
6060
api.spinner.progress.timeout = progressTimeout;
6161

6262
// Set progress to 0%
63-
$(C_API_SELECTOR_SPINNER + " .progress").find("[name=bar]").css('width', '1%').attr('aria-valuenow', 1);
64-
$(C_API_SELECTOR_SPINNER + " .progress").find("[name=percentage]").text("1%");
65-
$(C_API_SELECTOR_SPINNER + " .progress").show();
63+
$("#spinner .progress").find("[name=bar]").css('width', '1%').attr('aria-valuenow', 1);
64+
$("#spinner .progress").find("[name=percentage]").text("1%");
65+
$("#spinner .progress").show();
6666

6767
// Initiate the progress by setting the timeout
6868
api.spinner.progress.setTimeout();
@@ -76,9 +76,9 @@ api.spinner.progress.stop = function () {
7676
clearTimeout(api.spinner.progress.instance);
7777

7878
// Set progress to 100%
79-
$(C_API_SELECTOR_SPINNER + " .progress").find("[name=bar]").css('width', '100%').attr('aria-valuenow', 100);
80-
$(C_API_SELECTOR_SPINNER + " .progress").find("[name=percentage]").text("100%");
81-
$(C_API_SELECTOR_SPINNER + " .progress").fadeOut('slow');
79+
$("#spinner .progress").find("[name=bar]").css('width', '100%').attr('aria-valuenow', 100);
80+
$("#spinner .progress").find("[name=percentage]").text("100%");
81+
$("#spinner .progress").fadeOut('slow');
8282
};
8383

8484
/**
@@ -99,9 +99,9 @@ api.spinner.progress.setTimeout = function () {
9999

100100
api.spinner.progress.instance = setTimeout(function () {
101101
// Never display 100% as it may need longer than expected to complete
102-
var percentage = Math.min(parseInt($(C_API_SELECTOR_SPINNER + " .progress").find("[name=bar]").attr('aria-valuenow')) + 1, 99);
103-
$(C_API_SELECTOR_SPINNER + " .progress").find("[name=bar]").css('width', percentage + '%').attr('aria-valuenow', percentage);
104-
$(C_API_SELECTOR_SPINNER + " .progress").find("[name=percentage]").text(percentage + "%");
102+
var percentage = Math.min(parseInt($("#spinner .progress").find("[name=bar]").attr('aria-valuenow')) + 1, 99);
103+
$("#spinner .progress").find("[name=bar]").css('width', percentage + '%').attr('aria-valuenow', percentage);
104+
$("#spinner .progress").find("[name=percentage]").text(percentage + "%");
105105
// Loop in
106106
api.spinner.progress.setTimeout();
107107
}, api.spinner.progress.timeout);
@@ -187,14 +187,14 @@ api.content.navigate = function (pNavSelector, pRelativeURL, pNav_link_SelectorT
187187
url: pRelativeURL,
188188
async: false,
189189
success: function (response) {
190-
$(C_API_SELECTOR_BODY).hide().empty().html(response).fadeIn();
190+
$('#body').hide().empty().html(response).fadeIn();
191191
}
192192
});
193193

194194
// "show" is a Bootstrap property
195-
$(C_API_SELECTOR_NAVIGATION).find("*").removeClass("show");
195+
$("#navigation").find("*").removeClass("show");
196196
// "active" is a Bootstrap property
197-
$(C_API_SELECTOR_NAVIGATION).find("*").removeClass("active");
197+
$("#navigation").find("*").removeClass("active");
198198

199199
if (pNav_link_SelectorToHighlight)
200200
// "active" is a Bootstrap property
@@ -235,16 +235,16 @@ api.content.goTo = function (pRelativeURL, pNav_link_SelectorToHighlight, pNav_m
235235
async: false,
236236
success: function (response) {
237237
api.content.params = pParams;
238-
$(C_API_SELECTOR_BODY).hide().empty().html(response).fadeIn().promise().done(function () {
238+
$('#body').hide().empty().html(response).fadeIn().promise().done(function () {
239239
api.content.params = {};
240240
});
241241
}
242242
});
243243

244244
// "show" is a Bootstrap property
245-
$(C_API_SELECTOR_NAVIGATION).find("*").removeClass("show");
245+
$("#navigation").find("*").removeClass("show");
246246
// "active" is a Bootstrap property
247-
$(C_API_SELECTOR_NAVIGATION).find("*").removeClass("active");
247+
$("#navigation").find("*").removeClass("active");
248248

249249
if (pNav_link_SelectorToHighlight)
250250
// "active" is a Bootstrap property
@@ -469,7 +469,7 @@ api.ajax.jsonrpc.request = function (pAPI_URL, pAPI_Method, pAPI_Params, callbac
469469
api.spinner.stop();
470470

471471
// Stop the nav loader
472-
$(C_API_SELECTOR_NAV_LOADER).removeClass('text-yellow fa-spin').addClass('text-navbar');
472+
$("#nav-loader").removeClass('text-yellow fa-spin').addClass('text-navbar');
473473
$("body").css("cursor", "default");
474474
}
475475
}
@@ -479,7 +479,7 @@ api.ajax.jsonrpc.request = function (pAPI_URL, pAPI_Method, pAPI_Params, callbac
479479

480480
try {
481481
// Start the nav loader
482-
$(C_API_SELECTOR_NAV_LOADER).removeClass('text-navbar').addClass('text-yellow fa-spin');
482+
$("#nav-loader").removeClass('text-navbar').addClass('text-yellow fa-spin');
483483
$("body").css("cursor", "progress");
484484

485485
// Simulate sync behaviour
@@ -507,25 +507,19 @@ api.modal = {};
507507
* @param {*} pCallbackParams
508508
*/
509509
api.modal.confirm = function (pMessage, pCallbackMethod, pCallbackParams) {
510-
511510
// Set the body of the Modal - Empty the container first
512-
$(C_API_SELECTOR_MODAL_CONFIRM).find(C_API_SELECTOR_MODAL_BODY).empty().html(pMessage);
513-
514-
$(C_API_SELECTOR_MODAL_BUTTON_CONFIRM).on("click", function () {
515-
// Run the Callback function
516-
pCallbackMethod(pCallbackParams);
511+
$("#modal-confirm").find(".modal-body > p").empty().html(pMessage);
517512

513+
$("#modal-confirm").find("[name=submit]").once("click", function () {
518514
// Close the Modal
519-
$(C_API_SELECTOR_MODAL_CONFIRM).modal('hide');
515+
$("#modal-confirm").modal('hide');
516+
// Must wait for the async transition to finsh before invoking the callback function that may be a cascade confirm
517+
// Consider refactoring by cloning the confir modal instead.
518+
new Promise(resolve => setTimeout(resolve, 100)).then(() => { pCallbackMethod(pCallbackParams); });
520519
});
521520

522-
$(C_API_SELECTOR_MODAL_CONFIRM).on('hide.bs.modal', function (e) {
523-
// Unbind to avoid the callback to loop
524-
$(C_API_SELECTOR_MODAL_BUTTON_CONFIRM).unbind("click");
525-
})
526-
527521
// Force the modal to re-initialise before displaying in case of cascade confirm modals
528-
$(C_API_SELECTOR_MODAL_CONFIRM).data('bs.modal', null).modal();
522+
$("#modal-confirm").modal();
529523
};
530524

531525
/**
@@ -535,10 +529,10 @@ api.modal.confirm = function (pMessage, pCallbackMethod, pCallbackParams) {
535529
api.modal.success = function (pMessage) {
536530

537531
// Set the body of the Modal
538-
$(C_API_SELECTOR_MODAL_SUCCESS).find(C_API_SELECTOR_MODAL_BODY).empty().html(pMessage);
532+
$("#modal-success").find(".modal-body > p").empty().html(pMessage);
539533

540534
// Display the Modal
541-
$(C_API_SELECTOR_MODAL_SUCCESS).modal();
535+
$("#modal-success").modal();
542536
};
543537

544538
/**
@@ -548,10 +542,10 @@ api.modal.success = function (pMessage) {
548542
api.modal.error = function (pMessage) {
549543

550544
// Set the body of the Modal
551-
$(C_API_SELECTOR_MODAL_ERROR).find(C_API_SELECTOR_MODAL_BODY).empty().html(pMessage);
545+
$("#modal-error").find(".modal-body > p").empty().html(pMessage);
552546

553547
// Display the Modal
554-
$(C_API_SELECTOR_MODAL_ERROR).modal();
548+
$("#modal-error").modal();
555549
};
556550

557551
/**
@@ -561,10 +555,10 @@ api.modal.error = function (pMessage) {
561555
api.modal.information = function (pMessage) {
562556

563557
// Set the body of the Modal
564-
$(C_API_SELECTOR_MODAL_INFORMATION).find(C_API_SELECTOR_MODAL_BODY).empty().html(pMessage);
558+
$("#modal-information").find(".modal-body > p").empty().html(pMessage);
565559

566560
// Display the Modal
567-
$(C_API_SELECTOR_MODAL_INFORMATION).modal();
561+
$("#modal-information").modal();
568562
};
569563

570564
/**
@@ -574,10 +568,10 @@ api.modal.information = function (pMessage) {
574568
api.modal.exception = function (pMessage) {
575569

576570
// Set the body of the Modal
577-
$(C_API_SELECTOR_MODAL_EXCEPTION).find(C_API_SELECTOR_MODAL_BODY).empty().html(pMessage);
571+
$("#modal-exception").find(".modal-body > p").empty().html(pMessage);
578572

579573
// Display the Modal
580-
$(C_API_SELECTOR_MODAL_EXCEPTION).modal();
574+
$("#modal-exception").modal();
581575
};
582576

583577

‎src/js/api.plugin.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,13 @@ API - Plugin - Return To Top
1313
$(document).ready(function () {
1414
$(window).scroll(function () {
1515
if ($(this).scrollTop() >= 50) {
16-
$(C_API_SELECTOR_RETURN_TO_TOP).fadeIn('slow');
16+
$("#return-to-top").fadeIn('slow');
1717
} else {
18-
$(C_API_SELECTOR_RETURN_TO_TOP).fadeOut('slow');
18+
$("#return-to-top").fadeOut('slow');
1919
}
2020
});
2121

22-
$(C_API_SELECTOR_RETURN_TO_TOP).click(function () {
22+
$("#return-to-top").click(function () {
2323
$('body,html').stop().animate({
2424
scrollTop: 0
2525
}, 500);

‎test/template/modal.html

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!-- Modal - Confirm-->
2-
<div id="modal-confirm" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
2+
<div id="modal-confirm" class="modal fade" data-backdrop="static" tabindex="-1" role="dialog" aria-hidden="true">
33
<div class="modal-dialog">
44
<div class="modal-content">
55
<div class="modal-header bg-warning">
@@ -11,8 +11,7 @@ <h5 class="modal-title text-light">Confirm</h5>
1111
</div>
1212
<div class="modal-footer">
1313
<button type="button" class="btn btn-neutral" data-dismiss="modal"><i class="far fa-times-circle"></i> Cancel</button>
14-
<button id="modal-button-confirm" type="button" class="btn btn-warning text-light"><i class="far fa-check-circle"></i>
15-
Confirm</button>
14+
<button type="button" name="submit" class="btn btn-warning text-light"><i class="far fa-check-circle"></i> Confirm</button>
1615
</div>
1716
</div>
1817
</div>

0 commit comments

Comments
 (0)