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

Allow linking to items in the guide

Browse Source
This commit is contained in:
chylex 2017-09-28 13:33:54 +02:00
parent 76b15f1971
commit bc804c6a53
2 changed files with 34 additions and 25 deletions
Resources/Guide
index.htmlscript.js

50
Resources/Guide/index.html
View File

@ -22,7 +22,7 @@
<h2>General</h2>
<details>
<summary>How to open the main menu</summary>
<summary id="main-menu">How to open the main menu</summary>
<div>
<p>The main menu gives you access to the following items:</p>
<img src="img/app-menu.png" alt="">
@ -36,7 +36,7 @@
</details>
<details>
<summary>How to customize the theme and layout</summary>
<summary id="customize-theme">How to customize the theme and layout</summary>
<div>
<ol>
<li>Click <em>Settings</em> in the left panel</li>
@ -55,7 +55,7 @@
</details>
<details>
<summary>How to add emoji to tweets</summary>
<summary id="emoji">How to add emoji to tweets</summary>
<div>
<p>When writing a new tweet, click the heart icon to open an emoji picker. If you're writing a reply, click the <em>Popout</em> icon first to bring the reply into the large panel.</p>
<p>Then you can immediately type into the <em>Search</em> field, which accepts keywords separated by space. Pressing <em>Enter</em> in the search field (when not empty) will insert the first result into your tweet. Pressing <em>Escape</em> closes the emoji picker.</p>
@ -66,7 +66,7 @@
</details>
<details>
<summary>How to use tweet templates</summary>
<summary id="templates">How to use tweet templates</summary>
<div>
<p>To create a simple template to use when writing a new tweet or reply:</p>
<ol>
@ -88,7 +88,7 @@
</details>
<details>
<summary>How to upload images from clipboard</summary>
<summary id="upload-from-clipboard">How to upload images from clipboard</summary>
<div>
<p>When writing a tweet/reply, press <em>Ctrl+V</em> to upload an image from clipboard. You can use this to quickly paste a selection from an image editor such as Paint, or after copying an image in your browser.</p>
<p>Make sure you're in the tweet input field before you press Ctrl+V, otherwise the keyboard shortcut won't trigger.</p>
@ -101,7 +101,7 @@
<h2>Columns</h2>
<details>
<summary>How to copy links to tweets</summary>
<summary id="copy-tweet-links">How to copy links to tweets</summary>
<div>
<p>When you right-click anywhere inside a tweet, you will be given these options:</p>
<ul>
@ -115,7 +115,7 @@
</details>
<details>
<summary>How to download images and videos</summary>
<summary id="download-media">How to download images and videos</summary>
<div>
<p>When you right-click an image or a video thumbnail with a purple play button, you will be given these options:</p>
<ul>
@ -129,7 +129,7 @@
</details>
<details>
<summary>How to take screenshots of individual tweets</summary>
<summary id="screenshot-tweets">How to take screenshots of individual tweets</summary>
<div>
<p>When you right-click anywhere inside a tweet, you will be given these options:</p>
<ul>
@ -143,7 +143,7 @@
</details>
<details>
<summary>How to clear and restore column contents</summary>
<summary id="clear-columns">How to clear and restore column contents</summary>
<div>
<p>TweetDeck lets you clear a column, which can help keep things organized by hiding tweets you have already read. To clear a column, click the <em>slider icon</em> on top of the column, and then click the <em>Clear</em> button.</p>
<p>If you need to revert this decision and restore a column, normally you would need to delete and re-create it, but in TweetDuck you can simply hold Shift which turns the Clear button into a <em>Restore</em> button.</p>
@ -171,7 +171,7 @@
<h2>Notifications</h2>
<details>
<summary>How to enable desktop or sound notifications</summary>
<summary id="enable-notifications">How to enable desktop or sound notifications</summary>
<div>
<p>New columns have disabled notifications by default. To enable them, click the <em>slider icon</em> on top of the column, and expand the <em>Preferences</em> section.</p>
<p>Now you can toggle either, or both of the notification options:</p>
@ -180,7 +180,7 @@
</details>
<details>
<summary>How to move or resize desktop notifications</summary>
<summary id="move-resize-notifications">How to move or resize desktop notifications</summary>
<div>
<p>Open the <em>main menu</em>, select <em>Options</em>, and then click the <em>Notifications</em> tab. Here, you can customize many aspects of desktop notifications.</p>
<p>Scroll down to the <em>Location</em> section where you can customize where the notification shows up. You can either pick one of the 4 corners of your screen and the distance from the corner, or select <em>Custom</em> and then you'll be able to freely move the example notification window.</p>
@ -192,7 +192,7 @@
</details>
<details>
<summary>How to customize sound notifications</summary>
<summary id="sound-notifications">How to customize sound notifications</summary>
<div>
<p>Open the <em>main menu</em>, select <em>Options</em>, and then click the <em>Sounds</em> tab. Here, you can pick a sound file that will be used instead of the default TweetDeck sound notification.</p>
<p>Keep in mind that you're only linking to the sound file, so make sure not to delete the file afterwards, otherwise TweetDuck won't find it anymore.</p>
@ -202,7 +202,7 @@
</details>
<details>
<summary>How to temporarily mute all notifications</summary>
<summary id="mute-notifications">How to temporarily mute all notifications</summary>
<div>
<p>There are two ways you can mute/unmute notifications:</p>
<ul>
@ -222,7 +222,7 @@
<h2>Options</h2>
<details>
<summary>How to configure TweetDuck</summary>
<summary id="configure-tweetduck">How to configure TweetDuck</summary>
<div>
<p>Open the <em>main menu</em> and select <em>Options</em>. Here you can configure various parts of TweetDuck; the dialog is split into several tabs:</p>
<ul>
@ -237,7 +237,7 @@
</details>
<details>
<summary>How to view and manage plugins</summary>
<summary id="manage-plugins">How to view and manage plugins</summary>
<div>
<p>TweetDuck has several offical plugins that extend the website and notifications with new functionality.</p>
<p>Open the <em>main menu</em> and select <em>Plugins</em> to open the plugin list. Here you can see what each plugin does, and enable/disable them individually. </p>
@ -247,7 +247,7 @@
</details>
<details>
<summary>How to backup your profile or move it to another computer</summary>
<summary id="manage-profile">How to backup your profile or move it to another computer</summary>
<div>
<ol>
<li>Open the <em>main menu</em>, select <em>Options</em>, and click <em>Manage Options</em> on the bottom left</li>
@ -263,7 +263,7 @@
</details>
<details>
<summary>How to restore default options</summary>
<summary id="restore-options">How to restore default options</summary>
<div>
<ol>
<li>Open the <em>main menu</em>, select <em>Options</em>, and click <em>Manage Options</em> on the bottom left</li>
@ -281,7 +281,7 @@
<h2>Efficiency</h2>
<details>
<summary>How to use keyboard shortcuts</summary>
<summary id="keyboard-shortcuts">How to use keyboard shortcuts</summary>
<div>
<ol>
<li>Click <em>Settings</em> in the left panel</li>
@ -305,7 +305,7 @@
</details>
<details>
<summary>How to use the forward / back mouse buttons</summary>
<summary id="extra-mouse-buttons">How to use the forward / back mouse buttons</summary>
<div>
<p>If you have a mouse that supports the forward and back buttons, you can use them in both the browser and a desktop notification. All you need to do is move the cursor over the window (even if it's not focused), and press one of the buttons.</p>
<p>In the browser:</p>
@ -322,7 +322,7 @@
</details>
<details>
<summary>How to keep the New Tweet panel open</summary>
<summary id="pin-new-tweet">How to keep the New Tweet panel open</summary>
<div>
<p>Open the New Tweet panel, and click the <em>pin icon</em> on top. When the pin points to the left, the panel will stay open after tweeting or restarting TweetDuck.</p>
<img src="img/new-tweet-pin.png" alt="">
@ -330,7 +330,7 @@
</details>
<details>
<summary>How to instantly popout replies</summary>
<summary id="popout-replies">How to instantly popout replies</summary>
<div>
<p><em>Middle-click the reply icon</em> to instantly open your reply in the New Tweet panel.</p>
<p>Middle-clicks are usually done by pressing your mouse wheel as if it was a button. When using a laptop touchpad or certain mice, the ways of triggering a middle click vary.</p>
@ -338,7 +338,7 @@
</details>
<details>
<summary>How to change which account will be pre-selected for replies</summary>
<summary id="reply-account">How to change which account will be pre-selected for replies</summary>
<div>
<p>By default, TweetDeck pre-selects the account mentioned in the column header. The ability to change this is provided by an official plugin which is disabled by default, as it's a bit more difficult to setup, but it can be very powerful. To enable the plugin:</p>
<ol>
@ -362,7 +362,7 @@
<h2>Advanced</h2>
<details>
<summary>How to open Chrome Dev Tools</summary>
<summary id="dev-tools">How to open Chrome Dev Tools</summary>
<div>
<ol>
<li>Open the <em>main menu</em>, select <em>Options</em>, and click the <em>Advanced</em> tab</li>
@ -375,7 +375,7 @@
</details>
<details>
<summary>How to customize styles using CSS</summary>
<summary id="custom-css">How to customize styles using CSS</summary>
<div>
<ol>
<li>Open the <em>main menu</em>, select <em>Options</em>, and click the <em>Advanced</em> tab</li>
@ -388,7 +388,7 @@
</details>
<details>
<summary>How to develop plugins</summary>
<summary id="plugin-development">How to develop plugins</summary>
<div>
<p>Before creating a plugin, you should have at least basic knowledge of <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web" rel="nofollow">web development</a> (namely HTML, CSS, JavaScript), and several JS libraries TweetDeck uses, such as <a href="https://learn.jquery.com" rel="nofollow">jQuery 2</a>, <a href="https://mustache.github.io" rel="nofollow">Mustache</a>, <a href="https://github.com/ded/klass" rel="nofollow">klass</a>, and <a href="https://flightjs.github.io/" rel="nofollow">Flight</a>.</p>
<p>Working with the TweetDeck source code involves a lot of reverse-engineering. You can visit <a href="https://github.com/DeckHack/discoveries" rel="nofollow">DeckHack</a> which is working to document its source code, and view <a href="https://github.com/chylex/TweetDuck/tree/master/Resources/Scripts" rel="nofollow">TweetDuck sources</a> which includes all scripts and official plugins.</p>

9
Resources/Guide/script.js
View File

@ -65,6 +65,15 @@ var init = function(){
elements[index].addEventListener("mouseup", onMouseUp);
}
}
if (location.hash.length > 1){
var element = document.getElementById(location.hash.substring(1));
if (element && element.tagName === "SUMMARY"){
element.click();
element.scrollIntoView(true);
}
}
};
if (document.readyState !== "loading"){