script - NoticeManager module (refactor notice_manager_panel.js)
This commit is contained in:
abuoyoyo
parent
12e2fd9312
commit
a05bd73ef0
@ -1,173 +1,166 @@
|
||||
let notices = jQuery( 'div.updated, div.error, div.notice, div.update-nag' ).not( '.inline, .below-h2' );
|
||||
|
||||
(function($,document){
|
||||
/**
|
||||
* NoticeManager class/module
|
||||
*
|
||||
*/
|
||||
var NoticeManager = (function ($, document) {
|
||||
let options = window.notice_manager_options;
|
||||
|
||||
// wait function used with autoCollapse
|
||||
wait = window.wait || function(ms){
|
||||
let wait = function (ms) {
|
||||
var dfd = $.Deferred();
|
||||
setTimeout(dfd.resolve, ms); //callback, timeout till callback
|
||||
return dfd.promise();
|
||||
};
|
||||
|
||||
let notices;
|
||||
|
||||
let button = $( '#meta-link-notices' ),
|
||||
panel = $( '#meta-link-notices-wrap' ),
|
||||
haveClosed = false,
|
||||
let button;
|
||||
let panel;
|
||||
let haveClosed;
|
||||
let dismissNoticesButton;
|
||||
|
||||
// notices = $( 'div.updated, div.error, div.notice, div.update-nag' ).not( '.inline, .below-h2' ),
|
||||
dismissNoticesButton = $( '#meta-link-notices-wrap button.notice-dismiss' );
|
||||
// bootstrap
|
||||
// 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(){
|
||||
screenMeta.close(panel,button);
|
||||
collectNotices();
|
||||
dismissNoticesButton.on("click", () => {
|
||||
screenMeta.close(panel, button);
|
||||
NoticeManager.collectNotices();
|
||||
});
|
||||
|
||||
//original wp focus on click function
|
||||
button.on( 'focus.scroll-into-view', function(e){
|
||||
if ( e.target.scrollIntoView )
|
||||
e.target.scrollIntoView(false);
|
||||
button.on("focus.scroll-into-view", (e) => {
|
||||
if (e.target.scrollIntoView) e.target.scrollIntoView(false);
|
||||
});
|
||||
|
||||
//scroll page to top when closing notice panel
|
||||
button.on('click',function(){
|
||||
// scroll page to top when closing notice panel
|
||||
// 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 ($(this).hasClass("screen-meta-active")) {
|
||||
// $(window).scrollTop(true);
|
||||
}else{
|
||||
} else {
|
||||
// wait (500).then(function(){ //still jumpy sometimes - but scrolls to correct position 400 ~ 600
|
||||
// $(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);
|
||||
|
||||
notices = $( 'div.updated, div.error, div.notice, div.update-nag' ).not( '.inline, .below-h2' );
|
||||
|
||||
|
||||
maybeRemoveNoticesPanel();
|
||||
|
||||
|
||||
if (noticeManager.autoCollect){
|
||||
collectNotices();
|
||||
}else{
|
||||
if (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');
|
||||
notices.insertBefore(".wrap:first");
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* auto-open notices panel
|
||||
*/
|
||||
if (button.length){
|
||||
if (button.length) {
|
||||
panel.toggle();
|
||||
button.addClass( 'screen-meta-active' );
|
||||
screenMeta.open(panel,button);
|
||||
button.addClass("screen-meta-active");
|
||||
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);
|
||||
/**
|
||||
* auto-close notices panel after short delay
|
||||
* only auto-close if we have not interacted (opened/closed) with panel previously
|
||||
*/
|
||||
if (options.auto_collapse) {
|
||||
wait(4000).then(() => {
|
||||
if (!haveClosed) {
|
||||
screenMeta.close(panel, button);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
});
|
||||
|
||||
/**
|
||||
* Collect notices into panel.
|
||||
* Remove dismiss-notices button.
|
||||
*/
|
||||
function collectNotices(){
|
||||
|
||||
notices.appendTo('.notice_container').eq(0);
|
||||
$('.notice_container').removeClass('empty');
|
||||
|
||||
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' );
|
||||
|
||||
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}); // end document.on.ready
|
||||
|
||||
// prevent jumpy scrollRestoration on reload page
|
||||
// fixed below on 'beforeunload'
|
||||
// if (history.scrollRestoration) {
|
||||
// history.scrollRestoration = 'manual';
|
||||
//}
|
||||
|
||||
|
||||
/**
|
||||
* Set history.scrollTop to prevent jump on page refresh when scrollRestoration = auto
|
||||
*/
|
||||
$(window).on('beforeunload', function() {
|
||||
history.pushState({scrollTop:document.body.scrollTop},document.title,document.location.pathname);
|
||||
$(window).on("beforeunload", () => {
|
||||
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) )
|
||||
@ -39,7 +39,7 @@ class NoticeManager{
|
||||
|
||||
function admin_enqueues(){
|
||||
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' );
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user