From 4aca18553d40ad5cf35a031b73b0386c9469d621 Mon Sep 17 00:00:00 2001 From: Yuriy Sirotenko Date: Thu, 21 Jan 2021 16:03:04 +0600 Subject: [PATCH 1/2] add alpha for background color --- src/css/themes.styl | 7 +------ src/js/iziToast.js | 28 +++++++++++++++++++++------- 2 files changed, 22 insertions(+), 13 deletions(-) diff --git a/src/css/themes.styl b/src/css/themes.styl index 5f69912..5bb6f6d 100644 --- a/src/css/themes.styl +++ b/src/css/themes.styl @@ -48,23 +48,18 @@ // Other theme colors &.iziToast-color-red - background rgba(255, 175, 180, 0.9) border-color rgba(255, 175, 180, 0.9) &.iziToast-color-orange - background rgba(255, 207, 165, 0.9) border-color rgba(255, 207, 165, 0.9) &.iziToast-color-yellow - background rgba(255, 249, 178, 0.9) border-color rgba(255, 249, 178, 0.9) &.iziToast-color-blue - background rgba(157, 222, 255, 0.9) border-color rgba(157, 222, 255, 0.9) &.iziToast-color-green - background rgba(166, 239, 184, 0.9) border-color rgba(166, 239, 184, 0.9) /* * EXAMPLE new colors * &.iziToast-color-name - */ \ No newline at end of file + */ diff --git a/src/js/iziToast.js b/src/js/iziToast.js index 81eebf6..a768d8a 100644 --- a/src/js/iziToast.js +++ b/src/js/iziToast.js @@ -29,23 +29,28 @@ THEMES = { info: { color: 'blue', - icon: 'ico-info' + icon: 'ico-info', + backgroundColor: "rgba(157, 222, 255, 1)", }, success: { color: 'green', - icon: 'ico-success' + icon: 'ico-success', + backgroundColor: "rgba(166, 239, 184, 1)", }, warning: { color: 'orange', - icon: 'ico-warning' + icon: 'ico-warning', + backgroundColor: "rgba(255, 207, 165, 1)", }, error: { color: 'red', - icon: 'ico-error' + icon: 'ico-error', + backgroundColor: "rgba(255, 175, 180, 1)", }, question: { color: 'yellow', - icon: 'ico-question' + icon: 'ico-question', + backgroundColor: "rgba(255, 249, 178, 1)", } }, MOBILEWIDTH = 568, @@ -66,6 +71,7 @@ messageSize: '', messageLineHeight: '', backgroundColor: '', + backgroundOpacity: '1', theme: 'light', // dark color: '', // blue, red, green, yellow icon: '', @@ -220,6 +226,10 @@ return false; } }; + + var isRgba = function(color){ + return color.substring(0,4) == 'rgba'; + }; /** @@ -777,7 +787,11 @@ } if(settings.backgroundColor) { - $DOM.toast.style.background = settings.backgroundColor; + if (isRgba(settings.backgroundColor)) { + $DOM.toast.style.background = settings.backgroundColor.slice(0, -2) + settings.backgroundOpacity + ')'; + } else { + $DOM.toast.style.background = settings.backgroundColor; + } if(settings.balloon){ $DOM.toast.style.borderColor = settings.backgroundColor; } @@ -1289,4 +1303,4 @@ return $iziToast; -}); \ No newline at end of file +}); From 50a97b6e12b923ce33bdd5d7f8f5d80ee5ac1501 Mon Sep 17 00:00:00 2001 From: Yuriy Sirotenko Date: Fri, 22 Jan 2021 10:54:50 +0600 Subject: [PATCH 2/2] fix. Convert from hex to rgba and other fixes --- src/js/iziToast.js | 53 ++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 44 insertions(+), 9 deletions(-) diff --git a/src/js/iziToast.js b/src/js/iziToast.js index a768d8a..ad3aa99 100644 --- a/src/js/iziToast.js +++ b/src/js/iziToast.js @@ -30,27 +30,27 @@ info: { color: 'blue', icon: 'ico-info', - backgroundColor: "rgba(157, 222, 255, 1)", + backgroundColor: "rgba(157, 222, 255, 0.9)", }, success: { color: 'green', icon: 'ico-success', - backgroundColor: "rgba(166, 239, 184, 1)", + backgroundColor: "rgba(166, 239, 184, 0.9)", }, warning: { color: 'orange', icon: 'ico-warning', - backgroundColor: "rgba(255, 207, 165, 1)", + backgroundColor: "rgba(255, 207, 165, 0.9)", }, error: { color: 'red', icon: 'ico-error', - backgroundColor: "rgba(255, 175, 180, 1)", + backgroundColor: "rgba(255, 175, 180, 0.9)", }, question: { color: 'yellow', icon: 'ico-question', - backgroundColor: "rgba(255, 249, 178, 1)", + backgroundColor: "rgba(255, 249, 178, 0.9)", } }, MOBILEWIDTH = 568, @@ -71,7 +71,7 @@ messageSize: '', messageLineHeight: '', backgroundColor: '', - backgroundOpacity: '1', + backgroundOpacity: '', theme: 'light', // dark color: '', // blue, red, green, yellow icon: '', @@ -226,11 +226,42 @@ return false; } }; - + + /** + * Check is color has rgba format? + * @private + */ var isRgba = function(color){ return color.substring(0,4) == 'rgba'; }; + /** + * Check is color has rgb format + * @private + */ + var isRgb = function(color){ + return color.substring(0,3) == 'rgb'; + }; + + /** + * Check is color has HEX fromat + * @private + */ + var isHex = function(color){ + return color.substring(0,1) == '#'; + }; + + /** + * Convert HEX to RGBA + * @private + */ + var hexToRgba = function(hex, alpha){ + var r = parseInt(hex.slice(1, 3), 16), + g = parseInt(hex.slice(3, 5), 16), + b = parseInt(hex.slice(5, 7), 16); + return "rgba(" + r + ", " + g + ", " + b + ", " + alpha + ")"; + }; + /** * Check if is a Base64 string @@ -787,8 +818,12 @@ } if(settings.backgroundColor) { - if (isRgba(settings.backgroundColor)) { - $DOM.toast.style.background = settings.backgroundColor.slice(0, -2) + settings.backgroundOpacity + ')'; + if (isHex(settings.backgroundColor) && settings.backgroundOpacity != '') { + $DOM.toast.style.background = hexToRgba(settings.backgroundColor, settings.backgroundOpacity); + } else if (isRgba(settings.backgroundColor) && settings.backgroundOpacity != '') { + $DOM.toast.style.background = settings.backgroundColor.replace(/[^,]+(?=\))/, settings.backgroundOpacity); + } else if (isRgb(settings.backgroundColor) && settings.backgroundOpacity != '') { + $DOM.toast.style.background = settings.backgroundColor.replace(/\)/, ',' + settings.backgroundOpacity + ')'); } else { $DOM.toast.style.background = settings.backgroundColor; }