AlwaysKillSticky/src/options.html
2019-02-04 23:45:00 -05:00

94 lines
6.0 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html>
<head>
<title>AlwaysKillSticky - Options</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<link rel='stylesheet' type='text/css' href='options.css' />
<link rel='stylesheet' type='text/css' href='fonts.css' />
<link rel="shortcut icon" type="image/png" href="images/AKS_on_32.png" />
</head>
<body>
<h1>AlwaysKillSticky</h1>
<form class='top-controls'>
<span class='mode-select-container'>
<span class='blacklist-mode-label'>Blacklist mode</span>
<input type='checkbox' id='whitelist-mode'></input>
<span class='whitelist-mode-label'>Whitelist mode</span>
</span>
<span class='buttons'>
<button disabled type='button' class='reset-button'>Reset</button>
<button disabled type='button' class='save-button'>Save</button>
</span>
</form>
<div id='matchingPatterns'>
<h2>Matching patterns</h2>
<p>Kill stickies on web page URLs matching the following <a href='https://regexr.com/' rel='nofollow' target='_blank'>regular expressions</a> (one per line):</p>
<div class='textarea-container'>
<textarea spellcheck="false"></textarea>
</div>
</div>
<div id='exclusionPatterns'>
<h2>Exclusion patterns</h2>
<p>Do <strong>not</strong> kill stickies on web page URLs matching the following <a href='https://regexr.com/' rel='nofollow' target='_blank'>regular expressions</a> (one per line):</p>
<p class='note'>(<strong>NOTE:</strong> Exclusion patterns override matching patterns; if a page is <em>both</em> matched <em>and</em> excluded, stickies will <strong>not</strong> be killed on that page.)</p>
<div class='textarea-container'>
<textarea spellcheck="false"></textarea>
</div>
</div>
<div class='bottom-info'>
<p class='bottom-info'>AlwaysKillSticky v<span class='version'>0.0</span></p>
<p class='bottom-info'>© Said Achmiz 2019present</p>
</div>
<form class='open-help-button-container'>
<button type='button' class='open-help-button'>Help</button>
</form>
<div id='help' class='help-overlay'>
<form>
<button type='button' class='close-button'>Close</button>
</form>
<div class='help-container'>
<h1>AlwaysKillSticky Help</h1>
<p>On sites/pages where its enabled, AlwaysKillSticky finds all elements whose <code>position</code> CSS property has a computed value of either <code>sticky</code> or <code>fixed</code>, and removes those elements.</p>
<h2>Basic usage</h2>
<p>To enable AlwaysKillSticky on a site:</p>
<ol>
<li>Click the AlwaysKillSticky icon (<span class='fa fa-heavy'>&#xf08d;</span>) in your browser toolbar;</li>
<li>Click the big button (<span class='fa fa-heavy'>&#xf08d;</span>).</li>
</ol>
<p>Stickies will immediately be killed, and will always be killed whenever you visit that page, or any page on the same site, in the future.</p>
<hr/>
<p>To <em>stop</em> killing stickies on a site:
<ol>
<li>Click the big button (<span class='fa fa-heavy'>&#xf08d;</span>) again.</li>
</ol>
<p>Stickies will no longer be killed when you visit pages on that site.</p>
<p>(After disabling sticky-killing for a page, you can click the Reload (<span class='fa fa-heavy'>&#xf2f1;</span>) button to refresh the page if you want to restore killed sticky elements on that page.)</p>
<h2>Modes</h2>
<p>AlwaysKillSticky can work in either of two modes: <strong>blacklist mode</strong> (the default) and <strong>whitelist mode</strong>. (You can switch modes at any time, via the Options page.)</p>
<h3>Blacklist mode</h3>
<p>In <strong>blacklist mode</strong>, stickies will <em>only</em> be killed if:</p>
<ul>
<li>the page URL matches one of the patterns in the <strong>matching patterns</strong> list, <em>and</em>;</li>
<li>the page does <em>not</em> match any of the patterns in the <strong>exclusion patterns</strong> list.</li>
</ul>
<p>In blacklist mode, if you click the big button (<span class='fa fa-heavy'>&#xf08d;</span>) in the AlwaysKillSticky popup to enable the
<h3>Whitelist mode</h3>
<p>In <strong>whitelist mode</strong>, <em>the matching patterns list is ignored</em>. Stickies are <em>always</em> killed, <em>unless</em> the page matches one of the patterns in the <strong>exclusion patterns</strong> list.</p>
<p>(In whitelist mode, the behavior of the main button (<span class='fa fa-heavy'>&#xf08d;</span>) in the AlwaysKillSticky popup is reversed.)</p>
<h2>Advanced usage</h2>
<p>AlwaysKillSticky automatically manages the lists of matching and exclusion patterns. When you enable or disable sticky-killing for a site (by clicking the big button in the AlwaysKillSticky popup), the pattern lists are automatically modified appropriately. There is usually no need to edit the lists yourself.</p>
<p>However, if you prefer more fine-grained control (e.g., if you want to kill stickies on all sites on a domain, or if you want to exclude specific paths of a site), you can edit the pattern lists by hand. The matching and exclusion patterns are <a href='https://en.wikipedia.org/wiki/Regular_expression' rel='nofollow' target='_blank'>regular expressions</a> (a.k.a. “regexps”). (The site <a href='https://regexr.com/' rel='nofollow' target='_blank'>RegExr.com</a> is useful if you are not entirely familiar with how regexps work—or even if you are.)</p>
<p><strong>NOTE:</strong> Lines beginning with a pound sign (#) are comments; they are ignored.</p>
<h3>How automatic management of the patterns lists works</h3>
<p>The comments in the <a href='popup.js' target='_blank'><code>popup.js</code> script file</a> explain exactly what happens to the patterns lists when you use the main button (<span class='fa fa-heavy'>&#xf08d;</span>) in the AlwaysKillSticky popup to enable or disable sticky-killing on a site.</p>
<h2>License</h2>
<p>This extension is released under the GNU General Public License
as published by the Free Software Foundation; either version
2 of the License, or (at your option) any later version.</p>
</div>
</div>
</body>
<script src="functions.js"></script>
<script src="options.js"></script>
</html>