diff --git a/Resources/Scripts/update.js b/Resources/Scripts/update.js index 5f52fd9f..69e988d6 100644 --- a/Resources/Scripts/update.js +++ b/Resources/Scripts/update.js @@ -27,9 +27,10 @@ // // Function: Creates the update notification element. Removes the old one if already exists. // - var displayNotification = function(version, download){ + var displayNotification = function(version, download, changelog){ var outdated = version === "unsupported"; + // styles var css = $("#tweetduck-update-css"); if (!css.length){ @@ -39,25 +40,30 @@ position: absolute; bottom: 0; width: 200px; - height: 170px; + height: 178px; z-index: 9999; color: #fff; background-color: rgb(32, 94, 138); + text-align: center; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); } .tdu-title { - font-size: 17px; + font-size: 15px; font-weight: bold; - text-align: center; - letter-spacing: 0.2px; - margin: 8px auto 2px; + margin: 8px 0 2px; + cursor: default; } .tdu-info { - font-size: 12px; - text-align: center; - margin: 3px auto 0; + display: inline-block; + font-size: 14px; + margin: 3px 0; +} + +.tdu-showlog { + text-decoration: underline; + cursor: pointer; } .tdu-buttons button { @@ -86,10 +92,82 @@ background-color: #607a8e; color: #dfdfdf; } + +#tweetduck-changelog { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + z-index: 9998; +} + +#tweetduck-changelog-box { + position: absolute; + width: 60%; + height: 75%; + max-width: calc(90% - 200px); + max-height: 90%; + left: calc(50% + 100px); + top: 50%; + padding: 12px; + overflow-y: auto; + transform: translateX(-50%) translateY(-50%); + font-size: 14px; + color: #000; + background-color: #fff; + box-sizing: border-box; +} + +#tweetduck-changelog h2 { + margin: 0 0 7px; + font-size: 23px; +} + +#tweetduck-changelog h3 { + margin: 0 0 5px 7px; + font-size: 18px; +} + +#tweetduck-changelog p { + margin: 0 0 2px 30px; + display: list-item; +} + +#tweetduck-changelog p.l2 { + margin-left: 50px; +} + +#tweetduck-changelog a { + color: #247fbb; +} + +#tweetduck-changelog code { + padding: 0 4px; + font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; + color: #24292e; + background-color: rgba(27, 31, 35, 0.05); +} </style> `).appendTo(document.head); } + // changelog + var log = $("#tweetduck-changelog"); + + if (!log.length){ + var log = $(` +<div id='tweetduck-changelog'> + <div id='tweetduck-changelog-box'> + <h2>TweetDuck Update ${version}</h2> + ${changelog} + </div> +</div> +`).appendTo(document.body).css("display", "none"); + } + + // notification var ele = $("#tweetduck-update"); var existed = ele.length > 0; @@ -100,7 +178,7 @@ ele = $(outdated ? ` <div id='tweetduck-update'> <p class='tdu-title'>Unsupported System</p> - <p class='tdu-info'>You will not receive updates.</p> + <p class='tdu-info'>You will not receive updates</p> <div class='tdu-buttons'> <button class='tdu-btn-unsupported'>Read more</button> <button class='tdu-btn-ignore'>Dismiss</button> @@ -108,8 +186,8 @@ </div> ` : ` <div id='tweetduck-update'> - <p class='tdu-title'>TweetDuck Update</p> - <p class='tdu-info'>Version ${version} is now available.</p> + <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> @@ -118,11 +196,28 @@ </div> `).appendTo(document.body).css("display", existed ? "block" : "none"); + // ui logic var hide = function(){ ele.remove(); + log.remove(); css.remove(); }; + var slide = function(){ + log.hide(); + ele.slideUp(hide); + }; + + ele.children(".tdu-showlog").click(function(){ + log.toggle(); + }); + + log.click(function(){ + log.hide(); + }).children().first().click(function(e){ + e.stopPropagation(); + }); + var buttonDiv = ele.children(".tdu-buttons").first(); buttonDiv.children(".tdu-btn-download").click(function(){ @@ -138,7 +233,7 @@ buttonDiv.children(".tdu-btn-later").click(function(){ clearTimeout(updateCheckTimeoutID); - ele.slideUp(hide); + slide(); }); buttonDiv.children(".tdu-btn-unsupported").click(function(){ @@ -147,7 +242,7 @@ buttonDiv.children(".tdu-btn-ignore,.tdu-btn-unsupported").click(function(){ $TDU.onUpdateDismissed(); - ele.slideUp(hide); + slide(); }); if (!existed){ @@ -166,6 +261,23 @@ return new Date(offset.getFullYear(), offset.getMonth(), offset.getDate(), offset.getHours()+1, 0, 0)-now; }; + // + // Function: Ghetto-converts markdown to HTML. + // + var markdown = function(md){ + return md.replace(/&/g, "&") + .replace(/</g, "<") + .replace(/>/g, ">") + .replace(/^### (.*?)$/gm, "<h3>$1</h3>") + .replace(/^- (.*?)$/gm, "<p>$1</p>") + .replace(/^ - (.*?)$/gm, "<p class='l2'>$1</p>") + .replace(/\*\*(.*?)\*\*/g, "<strong>$1</strong>") + .replace(/\*(.*?)\*/g, "<em>$1</em>") + .replace(/`(.*?)`/g, "<code>$1</code>") + .replace(/\[(.*?)\]\((.*?)\)/g, "<a href='$2'>$1</a>") + .replace(/\n\r?\n/g, "<br>"); + }; + // // Function: Runs an update check and updates all DOM elements appropriately. // @@ -181,7 +293,7 @@ if (hasUpdate){ var obj = release.assets.find(asset => asset.name === updateFileName) || { browser_download_url: "" }; - displayNotification(tagName, obj.browser_download_url); + displayNotification(tagName, obj.browser_download_url, markdown(release.body)); if (eventID){ // ignore undefined and 0 $TDU.onUpdateCheckFinished(eventID, tagName, obj.browser_download_url);