diff --git a/.gitignore b/.gitignore index a725465..ff87634 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ -vendor/ \ No newline at end of file +vendor/ +node_modules/ \ No newline at end of file diff --git a/CHANGELOG.md b/CHANGELOG.md index 3e9de1e..ee2694c 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/css/admin_notices.css b/css/admin_notices.css index 9977137..4fab8f7 100644 --- a/css/admin_notices.css +++ b/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; } \ No newline at end of file diff --git a/js/notice_manager_panel.js b/js/notice_manager_panel.js index 0a6e498..f5d01d5 100644 --- a/js/notice_manager_panel.js +++ b/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); - NoticeManager.collectNotices(); + 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 */ - NoticeManager.maybeRemoveNoticesPanel(); + 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) => { - notices = panel - .find("div.updated, div.error, div.notice, div.update-nag") - .filter(":visible"); - NoticeManager.maybeRemoveNoticesPanel(); - }); + $(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( + $("").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) ) \ No newline at end of file diff --git a/notice-manager.php b/notice-manager.php index e79dd0d..fef8224 100644 --- a/notice-manager.php +++ b/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', diff --git a/src/NoticeManager.php b/src/NoticeManager.php index 7a03d0c..6e79dca 100644 --- a/src/NoticeManager.php +++ b/src/NoticeManager.php @@ -25,14 +25,22 @@ class NoticeManager{ if ( !is_admin() ) return; - $this->options = get_option( 'notice_manager'); + $this->options = get_option( 'notice_manager' ); add_action( 'admin_enqueue_scripts' , [ $this , 'admin_enqueues' ] ); 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' ); } }