diff --git a/js/privatebin.js b/js/privatebin.js index c7d638d9..acaaf65c 100644 --- a/js/privatebin.js +++ b/js/privatebin.js @@ -1493,7 +1493,7 @@ jQuery.PrivateBin = (function($, RawDeflate) { const alertType = [ 'loading', // not in bootstrap CSS, but using a plausible value here 'info', // status icon - 'warning', // not used yet + 'warning', // warning icon 'danger' // error icon ]; @@ -1537,28 +1537,35 @@ jQuery.PrivateBin = (function($, RawDeflate) { icon = null; // icons not supported in this case } } + let $translationTarget = $element; - // handle icon - if (icon !== null && // icon was passed - icon !== currentIcon[id] // and it differs from current icon - ) { - let $glyphIcon = $element.find(':first'); + // handle icon, if template uses one + const $glyphIcon = $element.find(':first'); + if ($glyphIcon.length) { + // if there is an icon, we need to provide an inner element + // to translate the message into, instead of the parent + $translationTarget = $(''); + $element.html(' ').prepend($glyphIcon).append($translationTarget); - // remove (previous) icon - $glyphIcon.removeClass(currentIcon[id]); + if (icon !== null && // icon was passed + icon !== currentIcon[id] // and it differs from current icon + ) { + // remove (previous) icon + $glyphIcon.removeClass(currentIcon[id]); - // any other thing as a string (e.g. 'null') (only) removes the icon - if (typeof icon === 'string') { - // set new icon - currentIcon[id] = 'glyphicon-' + icon; - $glyphIcon.addClass(currentIcon[id]); + // any other thing as a string (e.g. 'null') (only) removes the icon + if (typeof icon === 'string') { + // set new icon + currentIcon[id] = 'glyphicon-' + icon; + $glyphIcon.addClass(currentIcon[id]); + } } } // show text if (args !== null) { // add jQuery object to it as first parameter - args.unshift($element); + args.unshift($translationTarget); // pass it to I18n I18n._.apply(this, args); } @@ -1596,7 +1603,9 @@ jQuery.PrivateBin = (function($, RawDeflate) { */ me.showWarning = function(message, icon) { - $errorMessage.find(':first').removeClass(currentIcon[3]); + $errorMessage.find(':first') + .removeClass(currentIcon[3]) + .addClass(currentIcon[2]); handleNotification(2, $errorMessage, message, icon); }; @@ -2990,11 +2999,11 @@ jQuery.PrivateBin = (function($, RawDeflate) { me.init = function() { $attachment = $('#attachment'); - if($attachment.length){ + $dragAndDropFileName = $('#dragAndDropFileName'); + $dropzone = $('#dropzone'); + if($attachment.length) { $attachmentLink = $('#attachment a'); $attachmentPreview = $('#attachmentPreview'); - $dragAndDropFileName = $('#dragAndDropFileName'); - $dropzone = $('#dropzone'); $fileInput = $('#file'); addDragDropHandler(); diff --git a/js/test/Alert.js b/js/test/Alert.js index 8e3787d3..d59f38c1 100644 --- a/js/test/Alert.js +++ b/js/test/Alert.js @@ -24,6 +24,27 @@ describe('Alert', function () { jsc.property( 'shows a status message (bootstrap)', jsc.array(common.jscAlnumString()), + function (message) { + message = message.join(''); + const expected = ''; + $('body').html( + '' + ); + $.PrivateBin.Alert.init(); + $.PrivateBin.Alert.showStatus(message); + const result = $('body').html(); + return expected === result; + } + ); + + jsc.property( + 'shows a status message (bootstrap, custom icon)', + jsc.array(common.jscAlnumString()), jsc.array(common.jscAlnumString()), function (icon, message) { icon = icon.join(''); @@ -31,7 +52,7 @@ describe('Alert', function () { const expected = ''; + '" aria-hidden="true"> ' + message + ''; $('body').html( ''; + $('body').html( + '
' + ); + $.PrivateBin.Alert.init(); + $.PrivateBin.Alert.showWarning(message, icon); + const result = $('body').html(); + return expected === result; + } + ); + + jsc.property( + 'shows a warning message (bootstrap)', + jsc.array(common.jscAlnumString()), + jsc.array(common.jscAlnumString()), + function (message) { + message = message.join(''); + const expected = ''; + $('body').html( + '' + ); + $.PrivateBin.Alert.init(); + $.PrivateBin.Alert.showWarning(message); + const result = $('body').html(); + return expected === result; + } + ); + + jsc.property( + 'shows a warning message (bootstrap, custom icon)', + jsc.array(common.jscAlnumString()), + jsc.array(common.jscAlnumString()), + function (icon, message) { + icon = icon.join(''); + message = message.join(''); + const expected = ''; + $('body').html( + '' + ); + $.PrivateBin.Alert.init(); + $.PrivateBin.Alert.showWarning(message, icon); + const result = $('body').html(); + return expected === result; + } + ); + }); + describe('showError', function () { before(function () { cleanup(); @@ -72,13 +162,35 @@ describe('Alert', function () { 'shows an error message (bootstrap)', jsc.array(common.jscAlnumString()), jsc.array(common.jscAlnumString()), + function (icon, message) { + message = message.join(''); + const expected = ''; + $('body').html( + '' + ); + $.PrivateBin.Alert.init(); + $.PrivateBin.Alert.showError(message); + const result = $('body').html(); + return expected === result; + } + ); + + jsc.property( + 'shows an error message (bootstrap, custom icon)', + jsc.array(common.jscAlnumString()), + jsc.array(common.jscAlnumString()), function (icon, message) { icon = icon.join(''); message = message.join(''); const expected = ''; + '" aria-hidden="true"> ' + message + ''; $('body').html( ''; - $('body').html( - '
' - ); - $.PrivateBin.Alert.init(); - $.PrivateBin.Alert.showWarning(message, icon); - const result = $('body').html(); - return expected === result; - } - ); - - jsc.property( - 'shows a warning message (bootstrap)', - jsc.array(common.jscAlnumString()), - jsc.array(common.jscAlnumString()), - function (icon, message) { - icon = icon.join(''); - message = message.join(''); - const expected = ''; - $('body').html( - '' - ); - $.PrivateBin.Alert.init(); - $.PrivateBin.Alert.showWarning(message, icon); - const result = $('body').html(); - return expected === result; - } - ); - }); - describe('showRemaining', function () { before(function () { cleanup(); @@ -174,7 +239,7 @@ describe('Alert', function () { const expected = ''; + ' ' + string + message + number + ''; $('body').html( '