0.14

.gitignore

@@ -1 +1,2 @@
 vendor/
+node_modules/

CHANGELOG.md

@@ -1,5 +1,16 @@
 # Notice Manager Changelog
 
+## 0.14
+
+### Added
+- Added `above_title` setting - move all scripts above title.
+- Added `.plugin_count` bullet to panel tab - showing number of notices in panel and priority.
+
+### Changed
+- Improve "jumpy" notices when page is loaded with certain setting combinations by selectively setting css `display: none` to notices not in their expected location.
+- Improve integration between different options (eg. `above_title` with `auto-collect`).
+- Option `auto-collapse` will not automatically collapse panel if an error notice is showing.
+
 ## 0.13
 
 ### Changed

css/admin_notices.css

@@ -32,29 +32,46 @@
 .notice_container > div.error,
 .notice_container > div.notice,
 .notice_container > div.update-nag{
-	margin: 5px 12px 15px 12px;
+	margin: 5px 12px 15px 12px !important; /* Override plugins custom css */
 }
 
-
-/* ngfb update-nag override */
-div.ngfb-notice.update-nag {
-	display: none !important; /* not working - need to remove with js */
-	/* restore normal formatting */
-	/* margin-top: 25px; */
-    border: 0px;
-    /* border-left: 4px solid #ffba00; */
-    border-left: 4px solid #00a0d2;
+/* This should only be used if auto-collect/above-title is enabled */
+.notices-auto-collect #wpbody-content > div.updated,
+.notices-auto-collect #wpbody-content > div.error,
+.notices-auto-collect #wpbody-content > div.notice,
+.notices-auto-collect #wpbody-content > div.update-nag,
+.notices-auto-collect .wrap > div.updated,
+.notices-auto-collect .wrap > div.error,
+.notices-auto-collect .wrap > div.notice,
+.notices-auto-collect .wrap > div.update-nag,
+.notices-above-title .wrap > div.updated,
+.notices-above-title .wrap > div.error,
+.notices-above-title .wrap > div.notice,
+.notices-above-title .wrap > div.update-nag{
+	display: none;
 }
 
-.ngfb-notice.update-nag .notice-message {
-    max-width: 100%;
-    padding: 0;
+#meta-link-notices .plugin-count {
+	display: inline-block;
+	/* vertical-align: top; */
+	box-sizing: border-box;
+	margin: 1px 0 -1px 2px;
+	padding: 0 5px;
+	min-width: 18px;
+	height: 18px;
+	border-radius: 9px;
+	background-color: #72aee6;
+	color: #fff;
+	font-size: 11px;
+	line-height: 1.6;
+	text-align: center;
+	z-index: 26;
 }
 
-.ngfb-notice.update-nag p, .ngfb-notice.update-nag ul, .ngfb-notice.update-nag ol {
-	text-align: left !important;
-    font-size: 13px !important;
-    line-height: 1.5;
-    margin: 1em 0 !important;
-	opacity: 0.5;
+#meta-link-notices .plugin-count.warning {
+	background-color: #dba617;
+}
+
+#meta-link-notices .plugin-count.error {
+	background-color: #d63638;
 }

js/notice_manager_panel.js

@@ -16,7 +16,7 @@ var NoticeManager = (function ($, document) {
 
 	let button;
 	let panel;
-	let haveClosed;
+	let haveClosed; // set to true on first close/collect
 	let dismissNoticesButton;
 
 	// bootstrap
@@ -28,7 +28,10 @@ var NoticeManager = (function ($, document) {
 
 	dismissNoticesButton.on("click", () => {
 		screenMeta.close(panel, button);
+		if (! haveClosed){
 			NoticeManager.collectNotices();
+		}
+		NoticeManager.addCounter();
 	});
 
 	//original wp focus on click function
@@ -40,10 +43,15 @@ var NoticeManager = (function ($, document) {
 	// cannot convert to arrow function - uses this
 	// could use event.target instead
 	button.on("click", function () {
-		haveClosed = true;
 		if ($(this).hasClass("screen-meta-active")) {
+			if (haveClosed) {
+				NoticeManager.addCounter();
+			}
+
 			// $(window).scrollTop(true);
 		} else {
+			NoticeManager.removeCounter();
+
 			// wait (500).then(function(){ //still jumpy sometimes - but scrolls to correct position 400 ~ 600
 			// 	$(window).scrollTop(true);
 			// });
@@ -69,19 +77,16 @@ var NoticeManager = (function ($, document) {
 		/**
 		 * Remove panel if there are no notices on this page
 		 */
+		if (options.screen_panel) {
 			NoticeManager.maybeRemoveNoticesPanel();
+		}
 
-		if (options.auto_collect) {
+		if (options.screen_panel && options.auto_collect) {
 			NoticeManager.collectNotices();
 		} else {
-			/**
-			 * Move ALL notices above page title.
-			 * Default no-panel action - override WordPress moving notices BELOW title.
-			 * I HATE it when WordPress moves notices below title.
-			 *
-			 * comment this line out to completely restore WordPress functionality when auto_collect is off
-			 */
-			notices.insertBefore(".wrap:first");
+			if (options.above_title) {
+				NoticeManager.moveAboveTitle();
+			}
 		}
 
 		/**
@@ -95,12 +100,14 @@ var NoticeManager = (function ($, document) {
 
 		/**
 		 * auto-close notices panel after short delay
-		 * only auto-close if we have not interacted (opened/closed) with panel previously
+		 * only auto-close if we have collected notices previously
+		 * only auto-close if no error messages
 		 */
 		if (options.auto_collapse) {
 			wait(4000).then(() => {
-				if (!haveClosed) {
+				if (haveClosed && NoticeManager.getNoticesTopPriority() != 'error') {
 					screenMeta.close(panel, button);
+					NoticeManager.addCounter();
 				}
 			});
 		}
@@ -125,6 +132,14 @@ var NoticeManager = (function ($, document) {
 	return {
 		getNotices: () => notices,
 
+		getNoticesTopPriority: () => {
+			if ( notices.filter('.error').length )
+				return 'error';
+			if ( notices.filter('.notice-warning, .update-nag').length )
+				return 'warning';
+			return 'notice';
+		},
+
 		/**
 		 * Collect notices into panel.
 		 * Remove dismiss-notices button.
@@ -133,16 +148,36 @@ var NoticeManager = (function ($, document) {
 			notices.appendTo(".notice_container").eq(0);
 			$(".notice_container").removeClass("empty"); // .empty removes padding
 
+			haveClosed = true; // initial collection has occured.
+
 			/**
 			 * When dismissible notices are dismissed, check if any notices are left on page.
 			 * If no notices are left - remove Notice Panel entirely
 			 */
-			$(document).on("DOMNodeRemoved", ".notice.is-dismissible", (e) => {
+			$(document).on(
+				"DOMNodeRemoved",
+				"#meta-link-notices-wrap .notice.is-dismissible",
+				(e) => {
 					notices = panel
 						.find("div.updated, div.error, div.notice, div.update-nag")
 						.filter(":visible");
 					NoticeManager.maybeRemoveNoticesPanel();
-			});
+				}
+			);
+		},
+
+		addCounter: () => {
+			if (!button.children('.plugin-count').length){
+				button.append(
+					$("<span/>").text(notices.length).attr({
+						class: "plugin-count",
+					}).addClass(NoticeManager.getNoticesTopPriority())
+				);
+			}
+		},
+
+		removeCounter: () => {
+			button.children(".plugin-count").remove();
 		},
 
 		/**
@@ -160,5 +195,14 @@ var NoticeManager = (function ($, document) {
 				$("#screen-meta-links").detach();
 			}
 		},
+
+		/**
+		 * Move ALL notices above page title.
+		 * Default no-panel action - override WordPress moving notices BELOW title.
+		 * I HATE it when WordPress moves notices below title.
+		 */
+		moveAboveTitle: () => {
+			notices.insertBefore(".wrap:first");
+		},
 	};
 }(jQuery,document) )

notice-manager.php

@@ -2,7 +2,7 @@
 /**
  * Plugin Name: Notice Manager
  * Description: Manage notices on WordPress admin pages. Adds 'Notices' screen-meta-link.
- * Version: 0.13
+ * Version: 0.14
  * Author: abuyoyo
  * Author URI: https://github.com/abuyoyo/
  * Plugin URI: https://github.com/abuyoyo/notice-manager
@@ -30,6 +30,12 @@ new PluginCore(
 						// 'title'       => 'N',
 						'description' => 'Setup How notice manager functions.',
 						'fields'      => [
+							[
+								'id' => 'above_title',
+								'title' => 'Above Title',
+								'type' => 'checkbox',
+								'description' => 'Move all notices above title. (WordPress core moves notices below title using script.)',
+							],
 							[
 								'id' => 'screen_panel',
 								'title' => 'Notices Panel',

src/NoticeManager.php

@@ -31,8 +31,16 @@ class NoticeManager{
 		
 		if ( ! empty( $this->options['screen_panel'] ) ){
 			add_action( 'admin_init' , [ $this , 'register_notice_manager_panel' ] );
+
+			if ( ! empty( $this->options['auto_collect'] ) ){
+				add_filter( 'admin_body_class', fn($classes) => $classes . ' notices-auto-collect' );
+			}
 		}else{
-			array_walk($this->options,function(&$item){$item=0;});
+			// array_walk($this->options,function(&$item){$item=0;});
+		}
+
+		if ( ! empty( $this->options['above_title'] ) ){
+			add_filter( 'admin_body_class', fn($classes) => $classes . ' notices-above-title' );
 		}
 
 	}