abuyoyo/notice-manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

script - NoticeManager module (refactor notice_manager_panel.js)

Browse Source
This commit is contained in:
abuoyoyo 2022-06-22 02:03:03 +03:00
parent 12e2fd9312
commit a05bd73ef0
2 changed files with 116 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

223
js/notice_manager_panel.js
View File

@ -1,173 +1,166 @@
let notices = jQuery( 'div.updated, div.error, div.notice, div.update-nag' ).not( '.inline, .below-h2' ); /**
* NoticeManager class/module
(function($,document){ *
*/
var NoticeManager = (function ($, document) {
let options = window.notice_manager_options;
// wait function used with autoCollapse // wait function used with autoCollapse
wait = window.wait || function(ms){ let wait = function (ms) {
var dfd = $.Deferred(); var dfd = $.Deferred();
setTimeout(dfd.resolve, ms); //callback, timeout till callback setTimeout(dfd.resolve, ms); //callback, timeout till callback
return dfd.promise(); return dfd.promise();
}; };
let notices;
let button = $( '#meta-link-notices' ), let button;
panel = $( '#meta-link-notices-wrap' ), let panel;
haveClosed = false, let haveClosed;
let dismissNoticesButton;
// notices = $( 'div.updated, div.error, div.notice, div.update-nag' ).not( '.inline, .below-h2' ), // bootstrap
dismissNoticesButton = $( '#meta-link-notices-wrap button.notice-dismiss' ); // some of these need to run BEFORE document.ready - don't know why really
button = $("#meta-link-notices");
panel = $("#meta-link-notices-wrap");
haveClosed = false;
dismissNoticesButton = $("#meta-link-notices-wrap button.notice-dismiss");
dismissNoticesButton.on('click',function(){ dismissNoticesButton.on("click", () => {
screenMeta.close(panel,button); screenMeta.close(panel, button);
collectNotices(); NoticeManager.collectNotices();
}); });
//original wp focus on click function //original wp focus on click function
button.on( 'focus.scroll-into-view', function(e){ button.on("focus.scroll-into-view", (e) => {
if ( e.target.scrollIntoView ) if (e.target.scrollIntoView) e.target.scrollIntoView(false);
e.target.scrollIntoView(false);
}); });
//scroll page to top when closing notice panel // scroll page to top when closing notice panel
button.on('click',function(){ // cannot convert to arrow function - uses this
// could use event.target instead
button.on("click", function () {
haveClosed = true; haveClosed = true;
if ( $(this).hasClass('screen-meta-active') ){ if ($(this).hasClass("screen-meta-active")) {
// $(window).scrollTop(true); // $(window).scrollTop(true);
}else{ } else {
// wait (500).then(function(){ //still jumpy sometimes - but scrolls to correct position 400 ~ 600 // wait (500).then(function(){ //still jumpy sometimes - but scrolls to correct position 400 ~ 600
// $(window).scrollTop(true); // $(window).scrollTop(true);
// }); // });
} }
}); });
/**
* document.on.ready
*/
$(() => {
console.log("NoticeManager.on.ready");
console.log("options");
console.log(options);
// bootstrap notices
// get all notices that are not explicily marked as `.inline` or `.below-h2`
// we add .update-nag.inline for WordPress Update notice
notices = $("div.updated, div.error, div.notice")
.not(".inline, .below-h2")
.add("div.update-nag");
$(document).ready(function(){ /**
* Remove panel if there are no notices on this page
*/
NoticeManager.maybeRemoveNoticesPanel();
console.log(noticeManager); if (options.auto_collect) {
NoticeManager.collectNotices();
notices = $( 'div.updated, div.error, div.notice, div.update-nag' ).not( '.inline, .below-h2' ); } else {
maybeRemoveNoticesPanel();
if (noticeManager.autoCollect){
collectNotices();
}else{
/** /**
* Move ALL notices above page title. * Move ALL notices above page title.
* Default no-panel action - override WordPress moving notices BELOW 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'); notices.insertBefore(".wrap:first");
} }
/** /**
* auto-open notices panel * auto-open notices panel
*/ */
if (button.length){ if (button.length) {
panel.toggle(); panel.toggle();
button.addClass( 'screen-meta-active' ); button.addClass("screen-meta-active");
screenMeta.open(panel,button); screenMeta.open(panel, button);
} }
if (noticeManager.autoCollapse){
// auto-close notices panel after short delay
// only auto-close if we have not interacted (opened/closed) with panel previously
wait(10000).then(function(){
if ( ! haveClosed ){
screenMeta.close(panel,button);
}
});
}
});
/** /**
* Collect notices into panel. * auto-close notices panel after short delay
* Remove dismiss-notices button. * only auto-close if we have not interacted (opened/closed) with panel previously
*/ */
function collectNotices(){ if (options.auto_collapse) {
wait(4000).then(() => {
notices.appendTo('.notice_container').eq(0); if (!haveClosed) {
$('.notice_container').removeClass('empty'); screenMeta.close(panel, button);
}
if (dismissNoticesButton.length)
dismissNoticesButton.detach();
$(document).on('DOMNodeRemoved', '.notice.is-dismissible' , function (e) {
console.log('DOMNodeRemoved');
console.log(e.target);
console.log(e);
// $(e.target).on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(e){
notices = panel.find( 'div.updated, div.error, div.notice, div.update-nag' ).filter(':visible');
console.log('DomNodeRemoved:notices.length');
console.log(notices.length);
maybeRemoveNoticesPanel();
// });
// notices = $( 'div.updated, div.error, div.notice, div.update-nag' ).not( '.inline, .below-h2' );
// notices = panel.find( 'div.updated, div.error, div.notice, div.update-nag' );//.not( '.inline, .below-h2' );
}); });
} }
}); // end document.on.ready
function maybeRemoveNoticesPanel(){
console.log('notices.length');
console.log(notices.length);
/**
* Remove meta-links-notices if no notices on page
* Remove screen-meta-links wrapper if no panels on page
*/
if ( ! notices.length ){
console.log('NO NOTICES');
screenMeta.close(panel,button);
$('#meta-link-notices-link-wrap').detach();
$('#meta-link-notices-wrap').detach();
if ( ! $('#screen-meta-links').children().length )
$('#screen-meta-links').detach();
return;
}
}
// prevent jumpy scrollRestoration on reload page // prevent jumpy scrollRestoration on reload page
// fixed below on 'beforeunload' // fixed below on 'beforeunload'
// if (history.scrollRestoration) { // if (history.scrollRestoration) {
// history.scrollRestoration = 'manual'; // history.scrollRestoration = 'manual';
//} //}
/** /**
* Set history.scrollTop to prevent jump on page refresh when scrollRestoration = auto * Set history.scrollTop to prevent jump on page refresh when scrollRestoration = auto
*/ */
$(window).on('beforeunload', function() { $(window).on("beforeunload", () => {
history.pushState({scrollTop:document.body.scrollTop},document.title,document.location.pathname); history.pushState(
{ scrollTop: document.body.scrollTop },
document.title,
document.location.pathname
);
}); });
return {
getNotices: () => notices,
/**
* Collect notices into panel.
* Remove dismiss-notices button.
*/
collectNotices: () => {
notices.appendTo(".notice_container").eq(0);
$(".notice_container").removeClass("empty");
if (dismissNoticesButton.length) dismissNoticesButton.detach();
/**
* 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();
});
},
/**
* Remove meta-links-notices if no notices on page
* Remove screen-meta-links wrapper if no panels on page
*/
maybeRemoveNoticesPanel: () => {
if (!notices.length) {
screenMeta.close(panel, button);
$("#meta-link-notices-link-wrap").detach();
$("#meta-link-notices-wrap").detach();
if (!$("#screen-meta-links").children().length)
$("#screen-meta-links").detach();
}
},
};
}(jQuery,document) ) }(jQuery,document) )

2
src/NoticeManager.php
View File

@ -39,7 +39,7 @@ class NoticeManager{
function admin_enqueues(){ function admin_enqueues(){
wp_enqueue_script( 'notice_manager_panel', NOTICE_MANAGER_URL . 'js/notice_manager_panel.js' , null, false , true ); wp_enqueue_script( 'notice_manager_panel', NOTICE_MANAGER_URL . 'js/notice_manager_panel.js' , null, false , true );
wp_localize_script( 'notice_manager_panel', 'noticeManager', camelCaseKeys($this->options) ); wp_localize_script( 'notice_manager_panel', 'notice_manager_options', $this->options );
wp_enqueue_style( 'admin_notices', NOTICE_MANAGER_URL . 'css/admin_notices.css' ); wp_enqueue_style( 'admin_notices', NOTICE_MANAGER_URL . 'css/admin_notices.css' );
} }