chylex/TweetDuck
1
0
Fork 0
mirror of https://github.com/chylex/TweetDuck.git synced 2025-05-03 05:34:07 +02:00
Code

Refactor introduction dialog as a bootstrapped module

Browse Source
This commit is contained in:
chylex 2021-12-22 06:37:42 +01:00
parent 9cd813c02c
commit 9d39f26d54
Signed by: chylex
GPG Key ID: 4DE42C8F19A80548
9 changed files with 75 additions and 66 deletions

2
Browser/TweetDeckBrowser.cs
View File

@ -158,7 +158,7 @@ private void browser_FrameLoadEnd(object sender, FrameLoadEndEventArgs e) {
}
if (Config.FirstRun) {
CefScriptExecutor.RunFile(frame, "introduction.js");
CefScriptExecutor.RunBootstrap(frame, "introduction", "introduction.css");
}
}
else if (TwitterUrls.IsTwitter(url)) {

1
Resources/Content/.all.js
View File

@ -51,6 +51,7 @@ import setup_tweet_context_menu from "./features/setup_tweet_context_menu.js";
import setup_tweetduck_account_bamboozle from "./features/setup_tweetduck_account_bamboozle.js";
import setup_video_player from "./features/setup_video_player.js";
import skip_pre_login_page from "./features/skip_pre_login_page.js";
import show_introduction from "./introduction/show_introduction.js";
import hide_cookie_bar from "./login/hide_cookie_bar.js";
const globalFunctions = [

1
Resources/Content/api/bridge.js
View File

@ -19,6 +19,7 @@ if (!("$TDX" in window)) {
* @property {function} onTweetSound
* @property {function(url: string)} openBrowser
* @property {function} openContextMenu
* @property {function(showGuide: boolean)} onIntroductionClosed
* @property {function(videoUrl: string, tweetUrl: string, username: string, callback: function)} playVideo
* @property {function(tweetUrl: string, quoteUrl: string, chirpAuthors: string, chirpImages: string)} setRightClickedChirp
* @property {function(type: string, url: string)} setRightClickedLink

1
Resources/Content/api/td.js
View File

@ -267,6 +267,7 @@ if (!("TD" in window)) {
* @property {function(chirp: ChirpBase)} callback
* @property {string} chirpId
* @property {TwitterConversations} conversations
* @property {function(ids: string[], onSuccess: function(users: TwitterUser[]), onError: function)} getUsersByIds
*/
/**

69
Resources/Content/introduction/show_introduction.js Normal file
View File

@ -0,0 +1,69 @@
import { $TD } from "../api/bridge.js";
import { $ } from "../api/jquery.js";
import { onAppReady } from "../api/ready.js";
import { TD } from "../api/td.js";
const introductionHTML = `
<div id="td-introduction-modal" class="ovl scroll-v scroll-styled-v">
<div class="mdl is-inverted-dark">
<header class="mdl-header">
<h3 class="mdl-header-title">Welcome to TweetDuck</h3>
<a href="#" class="mdl-dismiss link-normal-dark"><i class="icon icon-close"></i></a>
</header>
<div class="mdl-inner">
<div class="mdl-content">
<p>Thank you for downloading TweetDuck!</p>
<p><a id="td-introduction-follow" href="#">Follow @TryMyAwesomeApp</a> for latest news and updates about the app.</p>
<div class="main-menu"></div>
<p><strong>Right-click anywhere</strong> or click <strong>Settings&nbsp;–&nbsp;TweetDuck</strong> in the left panel to open the main menu. You can also right-click links, tweets, images and videos, and desktop notifications to access their respective context menus.</p>
<p>Click <strong>Show Guide</strong> to see awesome features TweetDuck offers, or view the guide later by going to <strong>About TweetDuck</strong> and clicking the help button on top.</p>
</div>
<footer class="txt-right">
<button class="Button--primary" data-guide><span class="label">Show Guide</span></button>
<button class="Button--secondary"><span class="label">Close</span></button>
</footer>
</div>
</div>
</div>`;
/**
* Shows an introduction dialog.
*/
export default function() {
const dialog = $(introductionHTML).appendTo(".js-app");
let tdUser = null;
const loadTweetDuckUser = (onSuccess, onError) => {
if (tdUser !== null) {
onSuccess(tdUser);
}
else {
TD.controller.clients.getPreferredClient().getUsersByIds([ "957608948189880320" ], users => onSuccess(users[0]), onError);
}
};
onAppReady(function loadIntroductionTweetDuckUser() {
loadTweetDuckUser(user => tdUser = user);
});
dialog.find("#td-introduction-follow").click(function() {
loadTweetDuckUser(user => {
$(document).trigger("uiShowFollowFromOptions", { userToFollow: user });
$(".js-modals-container").find("header a[rel='user']").each(function() {
this.outerHTML = "TweetDuck";
});
}, () => alert("An error occurred when retrieving the account information."));
});
dialog.find("button, a.mdl-dismiss").click(function() {
const showGuide = $(this)[0].hasAttribute("data-guide");
dialog.fadeOut(200, function() {
$TD.onIntroductionClosed(showGuide);
document.getElementById("tweetduck-styles-introduction").remove();
dialog.remove();
});
});
};

0
Resources/Scripts/imports/styles/introduction.css → Resources/Content/styles/introduction.css
View File

21
Resources/Scripts/imports/markup/introduction.html
View File

@ -1,21 +0,0 @@
<div id="td-introduction-modal" class="ovl scroll-v scroll-styled-v">
<div class="mdl is-inverted-dark">
<header class="mdl-header">
<h3 class="mdl-header-title">Welcome to TweetDuck</h3>
<a href="#" class="mdl-dismiss link-normal-dark"><i class="icon icon-close"></i></a>
</header>
<div class="mdl-inner">
<div class="mdl-content">
<p>Thank you for downloading TweetDuck!</p>
<p><a id="td-introduction-follow" href="#">Follow @TryMyAwesomeApp</a> for latest news and updates about the app.</p>
<div class="main-menu"></div>
<p><strong>Right-click anywhere</strong> or click <strong>Settings&nbsp;–&nbsp;TweetDuck</strong> in the left panel to open the main menu. You can also right-click links, tweets, images and videos, and desktop notifications to access their respective context menus.</p>
<p>Click <strong>Show Guide</strong> to see awesome features TweetDuck offers, or view the guide later by going to <strong>About TweetDuck</strong> and clicking the help button on top.</p>
</div>
<footer class="txt-right">
<button class="Button--primary" data-guide><span class="label">Show Guide</span></button>
<button class="Button--secondary"><span class="label">Close</span></button>
</footer>
</div>
</div>
</div>

41
Resources/Scripts/introduction.js
View File

@ -1,41 +0,0 @@
(function(){
$(document).one("TD.ready", function(){
const css = $(`<style>#import "styles/introduction.css"</style>`).appendTo(document.head);
const ele = $(`#import "markup/introduction.html"`).appendTo(".js-app");
let tdUser = null;
const loadTweetDuckUser = (onSuccess, onError) => {
if (tdUser !== null){
onSuccess(tdUser);
}
else{
TD.controller.clients.getPreferredClient().getUsersByIds([ "957608948189880320" ], users => onSuccess(users[0]), onError);
}
};
loadTweetDuckUser(user => tdUser = user);
ele.find("#td-introduction-follow").click(function(){
loadTweetDuckUser(user => {
$(document).trigger("uiShowFollowFromOptions", { userToFollow: user });
$(".js-modals-container").find("header a[rel='user']").each(function(){
this.outerHTML = "TweetDuck";
});
}, () => {
alert("An error occurred when retrieving the account information.");
});
});
ele.find("button, a.mdl-dismiss").click(function(){
const showGuide = $(this)[0].hasAttribute("data-guide");
ele.fadeOut(200, function(){
$TD.onIntroductionClosed(showGuide);
ele.remove();
css.remove();
});
});
});
})();

5
TweetDuck.csproj
View File

@ -322,6 +322,7 @@
<ItemGroup>
<None Include="app.config" />
<None Include="packages.config" />
<None Include="Resources\Content\styles\introduction.css" />
<None Include="Resources\Content\styles\tweetdeck.css" />
<None Include="Resources\Content\styles\login.css" />
<None Include="Resources\Images\avatar.png" />
@ -355,11 +356,8 @@
<None Include="Resources\Plugins\timeline-polls\browser.js" />
<None Include="Resources\PostBuild.fsx" />
<None Include="Resources\PostCefUpdate.ps1" />
<None Include="Resources\Scripts\imports\markup\introduction.html" />
<None Include="Resources\Scripts\imports\scripts\plugins.base.js" />
<None Include="Resources\Scripts\imports\styles\introduction.css" />
<None Include="Resources\Scripts\imports\styles\update.css" />
<None Include="Resources\Scripts\introduction.js" />
<None Include="Resources\Scripts\notification.js" />
<None Include="Resources\Scripts\pages\error.html" />
<None Include="Resources\Scripts\pages\example.html" />
@ -397,6 +395,7 @@
<Content Include="Resources\Content\api\jquery.js" />
<Content Include="Resources\Content\api\td.js" />
<Content Include="Resources\Content\api\utils.js" />
<Content Include="Resources\Content\introduction\show_introduction.js" />
<Content Include="Resources\Content\load.js" />
<Content Include="Resources\Content\features\perform_search.js" />
<Content Include="Resources\Content\features\screenshot_tweet.js" />