User:FlightTime/confirm-logout.js

The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/* My slightly changed version of {{meta:User:Bluedeck/source/confirm-logout.js}}

Documentation can be found here: [[en:User:Guywan/Scripts/ConfirmLogout]]

If you want to use this script, simply add the following line to your [[Special:Mypage/vector.js]] or [[Special:Mypage/common.js]]
 
importScript('User:FlightTime/confirm-logout.js'); // [[User:FlightTime/confirm-logout.js]]                                             
 
*  Please keep the backlink so I can see how many people use this. 
*/


// <nowiki>
$(() =>
{
    var logout = $("#pt-logout a")[0];
    if(!logout) return;
    
    // Create new logout link.
    var new_logout = document.createElement("a");
    new_logout.innerText = logout.innerText;
    
    // Insert new logout link and remove old.
    logout.insertAdjacentElement("afterend", new_logout);
    logout.remove();
    
	// Get user-defined styling.
	var fw = window.us_conlog_font_weight ? window.us_conlog_font_weight : "bold";
	var fs = window.us_conlog_font_size ? window.us_conlog_font_size : "86%";
	var bg = window.us_conlog_background ? window.us_conlog_background : "#EEE";
	var fg = window.us_conlog_color ? window.us_conlog_color : "#000";
	var bd = window.us_conlog_border ? window.us_conlog_border : "2px solid #00F";
    
    // Add styling to the page.
    document.getElementsByTagName("body")[0].insertAdjacentHTML("afterbegin",
    	"<style>#use-conlog button { margin: 0 0.2em; border-radius: 9em; padding: 0 0.7em; box-sizing: border-box;" +
    	`font-weight: ${fw}; font-size: ${fs}; background: ${bg}; color: ${fg}; border: ${bd}}` +
    	"#use-conlog button:active { background:rgba(255,255,255,0.6)}</style>");
    // Main grouping div for conlog elements.
    document.getElementsByTagName("body")[0].insertAdjacentHTML("afterbegin", "<div id='use-conlog'></div>");
    
    new_logout.addEventListener("click", event =>
    {
    	// Create the logout confirmation prompt.
    	var conlog = document.getElementById("use-conlog");
        conlog.insertAdjacentHTML("beforeend",
            "<div onclick='this.style.transform = \"translateY(-130%)\";setTimeout(function(){this.remove()}.bind(this), 500);' style='" +
            "position:fixed; top:0; left:0; right:0; margin: 0 0 auto 0; height: auto; line-height: 1.4em; " +
            "padding: 0.6em 2em; opacity: 1; text-align: center; z-index: 9999; box-shadow: 0 2px 5px rgba(0,0,0,0.2); " +
            "transform: translateY(-130%); transition: all 0.2s;" +
            `font-weight: ${fw}; font-size: ${fs}; background: ${bg}; color: ${fg}; border: ${bd}'>` +
            "<div style='margin-bottom: 0.5em;'>You clicked on a log-out link. Do you want to continue?</div>" +
            "<div><button>No</button><button id='conlog-logout'>Log out</button></div></div>"
        );
        
        // Logout handler.
        document.getElementById("conlog-logout").addEventListener("click", event =>
        {
        	new mw.Api().post(
    		{
    			"action": "logout",
    			"token": mw.user.tokens.get("csrfToken")
    		})
    		.fail(result => { mw.notify("Failed to log out: " + result); })
    		.done(() => { window.location.href = mw.util.getUrl(mw.config.get("wgPageName")); });
        });

		// The logout confirmation prompt pops down from the top.
        setTimeout(() => { conlog.lastChild.style.transform = "translateY(0%)"; }, 10);
        
        event.preventDefault();
        event.stopPropagation();
    });
});
// </nowiki>