better aui/flag polyfill

extension/chrome/src/css/page_injection.css

@@ -318,9 +318,12 @@ a.aui-dropdown2-trigger.personal-app-button {
     font-size: 13px;
     line-height: 18px;
 }
-.pull-request-checkout {  
+.pull-request-checkout {
   display: inline-block;
   padding-left: 7px;
   margin-left: 5px;
   line-height: 5px;
  }
+
+ /* module-key = 'com.atlassian.auiplugin:aui-flag', location = 'src/less/flag.less' */
+ #aui-flag-container{position:fixed;top:71px;right:30px;z-index:4000}.aui-flag{left:0;max-height:300px;opacity:0;position:relative;top:-10px;transition:opacity .2s,top .5s}.aui-flag[aria-hidden="true"]{left:300px;max-height:0;opacity:0;overflow:hidden;top:0;transition:max-height .5s .5s,opacity .8s,left 1s}.aui-flag[aria-hidden="false"]{opacity:1;top:0;left:0}.aui-flag .aui-message{box-shadow:0 3px 6px rgba(0,0,0,0.2);margin-bottom:20px;border-top-width:1px;border-right-width:1px;border-bottom-width:1px;border-left-width:1px;border-radius:3px;width:300px}

extension/chrome/src/js/stash_page.js

@@ -1956,23 +1956,15 @@
 					try {
 						require('aui/flag');
 					} catch(_) {
-						// fake
-						define('aui/flag', function(){
-							return function(options) {
-								alert(options.title + "\n" +options.body);
-							}
-						});
+						// fake for <= 3.2
+						polyfillAuiFlag();
 					}
 					loadAuiFlag.resolve();
 				});
 			}
 			catch (_) {
-				// fake
-				define('aui/flag', function(){
-					return function(options) {
-						alert(options.title + "\n\n" +options.body);
-					}
-				});
+				// fake for <= 3.2
+				polyfillAuiFlag();
 				// optional
 				loadAuiFlag.resolve();
 			}
@@ -1995,6 +1987,139 @@
 
 			return jQuery.when(loadRequirement, loadAuiFlag);
 		}
+
+		function polyfillAuiFlag() {
+			define('aui/flag', function(){
+				return flag;
+			});
+			var AUTO_CLOSE_TIME = 5000;
+			var ID_FLAG_CONTAINER = 'aui-flag-container';
+			var defaultOptions = {
+			    body: '',
+			    close: 'manual',
+			    title: '',
+			    type: 'info',
+			    id: null
+			};
+
+			function recomputeStyle (el) {
+			    el = el.length ? el[0] : el;
+			    window.getComputedStyle(el, null).getPropertyValue('left');
+			}
+
+			function flag (options) {
+			    options = jQuery.extend({}, defaultOptions, options);
+
+			    var $flag = renderFlagElement(options);
+			    extendFlagElement($flag);
+
+			    if (options.close === 'auto') {
+			        makeCloseable($flag);
+			        makeAutoClosable($flag);
+			    } else if (options.close === 'manual') {
+			        makeCloseable($flag);
+			    }
+
+			    pruneFlagContainer();
+
+			    return insertFlag($flag);
+			}
+
+			function extendFlagElement ($flag) {
+			    var flag = $flag[0];
+
+			    flag.close = function () {
+			        closeFlag($flag);
+			    };
+			}
+
+			function renderFlagElement (options) {
+			   var closeable = (options.close === 'never') ? '' : 'closeable';
+			   var title = options.title || '';
+			   var body = options.body || '';
+			    var html =
+			        '<div class="aui-flag">' +
+			            '<div class="aui-message aui-message-'+options.type+' '+options.type+' '+closeable+' shadowed">' +
+			                '<p class="title">' +
+			                    '<strong>'+title+'</strong>' +
+			                '</p>' +
+			                body + '<!-- .aui-message -->' +
+			            '</div>' +
+			        '</div>';
+
+			    var $element = jQuery(html);
+
+			    if (typeof options.id === 'string') {
+			        $element.attr('id', options.id);
+			    }
+
+			    return $element;
+			}
+
+			function makeCloseable ($flag) {
+			    var $icon = jQuery('<span class="aui-icon icon-close" role="button" tabindex="0"></span>');
+
+			    $icon.click(function () {
+			        closeFlag($flag);
+			    });
+
+			    $icon.keypress(function (e) {
+			        if ((e.which === 13) || (e.which === 32)) {
+			            closeFlag($flag);
+			            e.preventDefault();
+			        }
+			    });
+
+			    return $flag.find('.aui-message').append($icon)[0];
+			}
+
+			function makeAutoClosable ($flag) {
+			    $flag.find('.aui-message').addClass('aui-will-close');
+			    setTimeout(function () {
+			        $flag[0].close();
+			    }, AUTO_CLOSE_TIME);
+			}
+
+			function closeFlag ($flagToClose) {
+			    var flag = $flagToClose.get(0);
+
+			    flag.setAttribute('aria-hidden', 'true');
+			    flag.dispatchEvent(new CustomEvent('aui-flag-close', {bubbles: true}));
+
+			    return flag;
+			}
+
+			function pruneFlagContainer () {
+			    var $container = findContainer();
+			    var $allFlags = $container.find('.aui-flag');
+
+			    $allFlags.get().forEach(function (flag) {
+			        var isFlagAriaHidden = flag.getAttribute('aria-hidden') === 'true';
+
+			        if (isFlagAriaHidden) {
+			            jQuery(flag).remove();
+			        }
+			    });
+			}
+
+			function findContainer () {
+			    return jQuery('#' + ID_FLAG_CONTAINER);
+			}
+
+			function insertFlag ($flag) {
+			    var $flagContainer = findContainer();
+
+			    if (!$flagContainer.length) {
+			        $flagContainer = jQuery('<div id="' + ID_FLAG_CONTAINER + '"></div>');
+			        jQuery('body').prepend($flagContainer);
+			    }
+
+			    $flag.appendTo($flagContainer);
+			    recomputeStyle($flag);
+
+			    return $flag.attr('aria-hidden', 'false')[0];
+			}
+		}
 	}
 }());
 // Note: to see all stash events add ?eve=* to URL

extension/chrome/src/manifest.json

@@ -2,7 +2,7 @@
 	"manifest_version": 2,
 	"name": "Stash Extension",
 	"description": "Allow to add group of reviewers for pull request in stash + other features",
-	"version": "1.6.4",
+	"version": "1.6.5",
 	"permissions": [
 		"storage",
 		"alarms",

history

@@ -1,3 +1,7 @@
+1.6.5
+===================
+- better aui/flag polyfill
+
 1.6.4
 ===================
 - stash 3.3.x and lower compatibility

version

@@ -1 +1 @@
-1.6.4
+1.6.5