diff --git a/Resources/Scripts/update.js b/Resources/Scripts/update.js index b85cce1e..65ce63ab 100644 --- a/Resources/Scripts/update.js +++ b/Resources/Scripts/update.js @@ -1,17 +1,18 @@ -(function($, $TDU){ +(function($TDU){ // // Function: Creates the update notification element. Removes the old one if already exists. // var displayNotification = function(version, changelog){ // styles - var css = $("#tweetduck-update-css"); + let css = document.getElementById("tweetduck-update-css"); - if (!css.length){ - css = $(` -<style id='tweetduck-update-css'> + if (!css){ + css = document.createElement("style"); + css.id = "tweetduck-update-css"; + css.innerText = ` #tweetduck-update { - position: absolute; + position: fixed; bottom: 0; width: 200px; height: 178px; @@ -20,6 +21,11 @@ background-color: rgb(32, 94, 138); text-align: center; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); + transition: transform 400ms cubic-bezier(.02, .01, .47, 1); +} + +#tweetduck-update.hidden-below { + transform: translateY(178px); } #tweetduck-update .tdu-title { @@ -130,86 +136,102 @@ font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; color: #24292e; background-color: rgba(27, 31, 35, 0.05); -} -</style> -`).appendTo(document.head); +}`; + + document.head.appendChild(css); } // changelog - var log = $("#tweetduck-changelog"); + let log = document.getElementById("tweetduck-changelog"); - if (!log.length){ - var log = $(` -<div id='tweetduck-changelog'> - <div id='tweetduck-changelog-box'> - <h2>TweetDuck Update ${version}</h2> - ${markdown(atob(changelog))} - </div> -</div> -`).appendTo(document.body).css("display", "none"); + if (!log){ + log = document.createElement("div"); + log.id = "tweetduck-changelog"; + log.style.display = "none"; + log.innerHTML = ` +<div id='tweetduck-changelog-box'> + <h2>TweetDuck Update ${version}</h2> + ${markdown(atob(changelog))} +</div>`; + + document.body.appendChild(log); } // notification - var ele = $("#tweetduck-update"); - var existed = ele.length > 0; + let ele = document.getElementById("tweetduck-update"); + let existed = !!ele; if (existed){ ele.remove(); } - ele = $(` -<div id='tweetduck-update'> - <p class='tdu-title'>T weetDuck Update ${version}</p> - <p class='tdu-info tdu-showlog'>View update information</p> - <div class='tdu-buttons'> - <button class='tdu-btn-download'>Update now</button> - <button class='tdu-btn-later'>Remind me later</button> - <!-- TODO <button class='tdu-btn-ignore'>Ignore this update</button>--> - </div> -</div> -`).appendTo(document.body).css("display", existed ? "block" : "none"); + ele = document.createElement("div"); + ele.id = "tweetduck-update"; + ele.innerHTML = ` +<p class='tdu-title'>T weetDuck Update ${version}</p> +<p class='tdu-info tdu-showlog'>View update information</p> +<div class='tdu-buttons'> + <button class='tdu-btn-download'>Update now</button> + <button class='tdu-btn-later'>Remind me later</button> + <button class='tdu-btn-ignore'>Ignore this update</button> +</div>`; - // ui logic - var hide = function(){ + if (!existed){ + ele.classList.add("hidden-below"); + } + + document.body.appendChild(ele); + + // ui functions + const exitNow = function(){ ele.remove(); log.remove(); css.remove(); }; - var slide = function(){ - log.hide(); - ele.slideUp(hide); + const exitSlide = function(){ + log.style.display = "none"; + + ele.classList.add("hidden-below"); + setTimeout(exitNow, 400); }; - ele.children(".tdu-showlog").click(function(){ - log.toggle(); + const onClick = function(element, callback){ + element.addEventListener("click", callback); + }; + + // ui listeners + onClick(ele.querySelector(".tdu-showlog"), function(){ + log.style.display = window.getComputedStyle(log).display === "none" ? "block" : "none"; }); - log.click(function(){ - log.hide(); - }).children().first().click(function(e){ + onClick(log, function(){ + log.style.display = "none"; + }); + + onClick(log.children[0], function(e){ e.stopPropagation(); }); - var buttonDiv = ele.children(".tdu-buttons").first(); - - buttonDiv.children(".tdu-btn-download").click(function(){ - hide(); + onClick(ele.querySelector(".tdu-btn-download"), function(){ + exitNow(); $TDU.onUpdateAccepted(); }); - buttonDiv.children(".tdu-btn-later").click(function(){ + onClick(ele.querySelector(".tdu-btn-later"), function(){ $TDU.onUpdateDelayed(); - slide(); - }); - - buttonDiv.children(".tdu-btn-ignore").click(function(){ - $TDU.onUpdateDismissed(); - slide(); + exitSlide(); }); + onClick(ele.querySelector(".tdu-btn-ignore"), function(){ + $TDU.onUpdateDismissed(); + exitSlide(); + }); + + // finalize notification if (!existed){ - ele.slideDown(); + ele.getBoundingClientRect(); // reflow + ele.classList.remove("hidden-below"); } return ele; @@ -218,7 +240,7 @@ // // Function: Ghetto-converts markdown to HTML. // - var markdown = function(md){ + const markdown = function(md){ return md.replace(/&/g, "&") .replace(/</g, "<") .replace(/>/g, ">") @@ -237,12 +259,17 @@ // // Block: Check updates on startup. // - $(document).one("TD.ready", function(){ + if ("$" in window && typeof $._data === "function" && "TD" in $._data(document, "events")){ + $(document).one("TD.ready", function(){ + $TDU.triggerUpdateCheck(); + }); + } + else{ $TDU.triggerUpdateCheck(); - }); + } // // Block: Setup global functions. // window.TDUF_displayNotification = displayNotification; -})($, $TDU); +})($TDU);