User talk:FlightTime/confirm-logout.js

Minified and personalised

@FlightTime: Here is a version of the script that will hopefully meet your desires:

$(() =>
{
    var logout = $("#pt-logout a")[0];
    if(!logout) return;
    
    var new_logout = document.createElement("a");
    new_logout.innerText = logout.innerText;
    logout.insertAdjacentElement("afterend", new_logout);
    logout.remove();
    
    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: inherit; } #use_conlog button:active { background:rgba(255,255,255,0.6)}</style>");
    document.getElementsByTagName("body")[0].insertAdjacentHTML("afterbegin", "<div id='use_conlog'></div>");
    
    var conlog = document.getElementById("use_conlog");
    
    new_logout.addEventListener("click", event =>
    {
        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; font-size: 86%; box-shadow: 0 2px 5px rgba(0,0,0,0.2); " +
            "font-weight: bold; transform: translateY(-130%); transition: all 0.2s;" +
            "background: #EEE; color: #000; border: 2px solid #00F;'>" +
            "<div style='margin-bottom: 0.5em;'>You clicked on a log-out link. Do you want to continue?</div>" +
            "<div><button style='border: 2px solid #00F; color: #000'>No</button>" +
            "<button style='border: 2px solid #00F; color: #000' onclick='window.location=\"/wiki/special:logout\"'>Log out</button></div></div>"
        );

        var notice_element = conlog.lastChild;
        setTimeout(() => { notice_element.style.transform = "translateY(0%)"; }, 10);
        
        event.preventDefault();
        event.stopPropagation();
    });
});

Let me know if something doesn't work as expected. Regards, —guywan (talk • contribs) 18:45, 21 March 2020 (UTC)[reply]

@Guywan: Oh my gosh, Thank you. I'll check it out right now. Wow its like Christmas :) - FlightTime (open channel) 18:53, 21 March 2020 (UTC)[reply]

@Guywan: Seems to work just fine. Again thank you very much :) - FlightTime (open channel) 19:01, 21 March 2020 (UTC)[reply]

@FlightTime: Hello again, I've made some small changes to my version. Most noticeably, you are logged out immediately instead of being taken to Special:Logout. If you are interested in this, the easiest thing to do would be to replace your vector.js with this:

us_conlog_background = "#EEE";
us_conlog_border = "2px solid #00F";
mw.loader.getScript("/w/index.php?title=User:Guywan/Scripts/ConfirmLogout.js&action=raw&ctype=text/javascript");//[[User:Guywan/Scripts/ConfirmLogout.js]]

Regards, —guywan (talk • contribs) 19:28, 22 March 2020 (UTC)[reply]

@Guywan: Thank you, that was one thing I found a little annoying and was going to ask if it could be removed, but I don't want to wear out my welcome. You have a great day. Cheers, - FlightTime (open channel) 19:39, 22 March 2020 (UTC)[reply]

@Guywan: Could you show the patch for this and where to place it, I also use this script on Commons. I think it would be better for me to adjust my script here so I can keep my Commons version the same. Thanx again, - FlightTime (open channel) 20:04, 22 March 2020 (UTC)[reply]

@FlightTime: You can import the script globally from meta. Add this to mw:User:FlightTime/global.js:

us_conlog_background = "#EEE";
us_conlog_border = "2px solid #00F";
mw.loader.load("https://en.wikipedia.org/w/index.php?title=User:Guywan/Scripts/ConfirmLogout.js&action=raw&ctype=text/javascript");

Then you'll need to remove local imports, I think. Let me know if you'd rather have local versions. —guywan (talk • contribs) 20:21, 22 March 2020 (UTC)[reply]