chylex/TweetDuck
1
0
Fork 0
mirror of https://github.com/chylex/TweetDuck.git synced 2025-04-14 12:15:48 +02:00
Code

Add a modal with release info to update notifications

Browse Source 
Closes
This commit is contained in:
chylex 2017-07-08 18:00:00 +02:00
parent b93f9a4b9a
commit 78df020737
1 changed files with 127 additions and 15 deletions

142
Resources/Scripts/update.js
View File

@ -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&#8202;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, "&amp;")
.replace(/</g, "&lt;")
.replace(/>/g, "&gt;")
.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);