Merge pull request #24 from rthaut/development

v4.1.0

.eslintrc

@@ -0,0 +1,30 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true,
+    "greasemonkey": true,
+    "jquery": true
+  },
+  "globals": {
+    "dialogPolyfill": true,
+    "getStoredValue": true,
+    "getStoredJSON": true,
+    "setStoredValue": true,
+    "setStoredJSON": true,
+    "addStyleSheet": true,
+    "resetStyleSheet": true,
+    "daDialog": true
+  },
+  "extends": "eslint:recommended",
+  "rules": {
+    "curly": ["error", "multi-line"],
+    "no-console": "off",
+    "no-unused-vars": ["error", {
+      "vars": "local",
+      "args": "none"
+    }],
+    "no-useless-escape": "off",
+    "prefer-const": ["error"],
+    "quote-props": ["error", "always"]
+  }
+}

.vscode/cSpell.json

@@ -8,7 +8,8 @@
     "words": [
         "deviantart",
         "userscript",
-        "polyfill"
+        "polyfill",
+        "greasemonkey"
     ],
     // flagWords - list of words to be always considered incorrect
     // This is useful for offensive words and common spelling errors.

README.md

@@ -1,45 +1,61 @@
-![deviantART Filter Promotional Image](https://raw.githubusercontent.com/rthaut/deviantART-Filter/master/resources/screenshots/Promo.png)
-
 ## Overview
 Have you ever been bothered by seeing deviations (submissions) from certain users while browsing [deviantART](https://www.deviantart.com)? Now you can quickly and permanently hide all deviations from any user! Install deviantART Filter in your web browser of choice, then either a.) enter their username on the settings panel, or b.) simply click the new red X that appears in the top right corner of any thumbnail image to filter that user.
 
+![deviantART Filter Promotional Image](https://raw.githubusercontent.com/rthaut/deviantART-Filter/master/resources/screenshots/Promo.png)
+
 * * *
 
 ## Installation
 ### Mozilla Firefox
-1. Install from the official Mozilla Add-ons for Firefox: [https://addons.mozilla.org/en-US/firefox/addon/deviantart-filter/](https://addons.mozilla.org/en-US/firefox/addon/deviantart-filter/)
-1. There is no step 2
+**[Install from the official Mozilla Add-ons for Firefox site](https://addons.mozilla.org/en-US/firefox/addon/deviantart-filter/)**
+
 
 ### Google Chrome
-1. Install from the official Chrome Web Store: [https://chrome.google.com/webstore/detail/deviantart-filter/odlmamilbohnpnoomjclomghphbajikp](https://chrome.google.com/webstore/detail/deviantart-filter/odlmamilbohnpnoomjclomghphbajikp)
-1. There is no step 2
+**[Install from the official Google Chrome Web Store](https://chrome.google.com/webstore/detail/deviantart-filter/odlmamilbohnpnoomjclomghphbajikp)**
 
 * * *
 
-### Legacy Userscript (Deprecated)
-**NOTE:** The userscript version of deviantART Filter is being deprecated in favor of the web extension versions. It is *strongly* recommended that you transition from the userscript version to a web exension (see the [transition instructions](#transitioning-from-legacy-userscript) below).
-#### For Mozilla Firefox
-1. Install the [Greasemonkey](https://addons.mozilla.org/en-US/firefox/addon/greasemonkey) Add-on
-1. Restart your browser after installation
-1. Visit the [script installation URL](https://github.com/rthaut/deviantART-Filter/raw/master/dist/userscript/deviantart_filter.user.js) and follow the prompts from Greasemonkey to complete the installation
-    - See [this wiki article](https://wiki.greasespot.net/Greasemonkey_Manual:Installing_Scripts) for help with installing userscripts in Greasemonkey
-#### For Google Chrome
-1. Install [Tampermonkey Beta](https://chrome.google.com/webstore/detail/tampermonkey-beta/gcalenpjmijncebpfijmoaglllgpjagf) Extension
-1. Restart your browser after installation
-1. Visit the [script installation URL](https://github.com/rthaut/deviantART-Filter/raw/master/dist/userscript/deviantart_filter.user.js) and follow the prompts from Tampermonkey to complete the installation
-    - See [this FAQ entry](http://tampermonkey.net/faq.php#Q102) for help with installing userscripts in Tampermonkey
+## Usage
+
+### Hiding Users While Browsing
+1. When you see a deviation from someone you want to hide, hover over the thumbnail image
+2. In the top-left corner, an `x` icon will appear
+3. Click on the `x` to hide all deviations from that user
+4. You can click that `x` again to un-hide that user later
+
+### Hiding Known/Specific Users
+If you know the username of a user you want to filter, you can manually enter their username without actually finding one of their deviations.
+1. Click the `Manage Filters` link that appears in the top right corner of [deviantART](https://www.deviantart.com)
+    - It is beside your username, by the Message Center icon, when you are logged in
+    - It is beside the Join and Login links when you are not logged in
+2. Enter their username in the field at the top of the `Filtered Users` tab
+    - **IMPORTANT**: usernames should be entered in all lowercase letters, even if their username is not displayed that way
+3. Click the `Hide User` button next to the field
+
+### Placeholders vs Completely Hiding Deviations
+deviantART Filter normally displays a blank "placeholder" image for each filtered user. This is intended to allow you to see that the filters are actually working, as well as to provide a quick way to un-hide users. However, these placeholder images can be disabled, resulting in all filtered users being completed hidden when browsing [deviantART](https://www.deviantart.com).
+1. Click the `Manage Filters` link that appears in the top right corner of [deviantART](https://www.deviantart.com)
+    - It is beside your username, by the Message Center icon, when you are logged in
+    - It is beside the Join and Login links when you are not logged in
+2. View the `Settings` tab
+3. Uncheck the `Use placeholders for hidden deviations` option at the top of the Settings tab
+
+### Exporting/Importing Filters
+deviantART Filter allows your to export and import filters. This is mostly for keeping your filters in sync between browsers/computers, but is handy for backup purposes as well.
+1. Click the `Manage Filters` link that appears in the top right corner of [deviantART](https://www.deviantart.com)
+    - When you are logged in, it is located next to your username
+    - When you are not logged in, it is located next to the Join and Login links
+2. View the `Settings` tab
+3. Scroll down to the `Export/Import Filters` section
+3. To export existing filters:
+    1. Click the `Export Filters` button to generate a text block in the large text box below the buttons
+    2. Copy the entire block of text to your clipboard, then save it (i.e. in a plain text file) or import it elsewhere
+4. To import new filters:
+    1. Paste a previously exported text block into the large text box below the buttons
+    2. Click the `Import Filters` button
+        - The import results will be displayed, showing how many filters were imported
 
 * * *
 
-### Transitioning from Legacy Userscript
-1. Open [deviantART](https://www.deviantart.com/), then click the "Manage Filter" link in the top right corner of the page (next to your username)
-1. Click the Settings tab, then click the Export Filters button
-1. Copy the **entire** block of text that appears below the button and paste it into a text editor for later use
-    - You can click anywhere in the textbox, then press `CTRL`+`A` (or `CMD`+`A`) on your keyboard to select all of the text
-    - You may want to save the file in your text editor, just in case, but this is not necessary
-1. Disable (or uninstall) the deviantART Filter userscript from Greasemonkey/Tampermonkey
-1. Install the deviantART filter web extension for Chrome/Firefox (see the [installation links](#installation) above)
-1. Visit [deviantART](https://www.deviantart.com/) again and open the Settings tab again
-1. Paste the block of text from step 4 into the textbox below the Export Filters button
-1. Click the Import Filters button
-1. A dialog will appear confirming the import results
+### Legacy Userscript (Deprecated)
+**Please visit [the wiki](https://github.com/rthaut/deviantART-Filter/wiki#about-the-old-userscript-) for information about the userscript version of deviantART Filter. There you will find [steps for migrating](https://github.com/rthaut/deviantART-Filter/wiki/Userscript#transitioning-from-legacy-userscript) to the new web extensions.**

gulpfile.js

@@ -7,6 +7,7 @@ var sequence = require('run-sequence');
 var concat = require('gulp-concat');
 var cssnano = require('gulp-cssnano');
 var ejs = require("gulp-ejs")
+var eslint = require('gulp-eslint');
 var gulpIf = require('gulp-if');
 var header = require('gulp-header');
 var insert = require('gulp-insert');
@@ -58,6 +59,18 @@ var package = require('./package.json');
 
 /* ====================  BUILD TASKS  ==================== */
 
+const eslintIsFixed = function (file) {
+    return file.eslint && file.eslint.fixed;
+}
+gulp.task('lint', function () {
+    return gulp.src('./lib/js/**/*.js')
+        .pipe(eslint({
+            'fix': true
+        }))
+        .pipe(eslint.format())
+        .pipe(eslint.failAfterError());
+});
+
 // tasks for cleaning the build directories
 gulp.task('clean:userscript', function () {
     return del(['./dist/userscript/*'])
@@ -79,6 +92,7 @@ gulp.task('clean', [
 // tasks for building the userscript version
 gulp.task('build:userscript', function (callback) {
     sequence(
+        'lint',
         ['build:userscript:includes', 'build:userscript:utils', 'build:userscript:stylesheets'],
         'build:userscript:core',
         'build:userscript:cleanup',
@@ -133,6 +147,15 @@ gulp.task('build:userscript:cleanup', function () {
 });
 
 // tasks for building the WebExtension version
+gulp.task('build:webextension', function (callback) {
+    sequence(
+        'lint',
+        'clean:webextension',
+        ['build:webextension:js', 'build:webextension:css', 'build:webextension:icons', 'build:webextension:manifest'],
+        ['zip:webextension', 'crx:webextension'],
+        callback
+    );
+});
 gulp.task('build:webextension:js', function () {
     return merge(
         gulp.src(includes)
@@ -146,10 +169,14 @@ gulp.task('build:webextension:js', function () {
         .pipe(gulp.dest('./dist/webextension/js'));
 });
 gulp.task('build:webextension:css', function () {
-    return gulp.src(stylesheets)
-        .pipe(concat(package.name + '.css'))
-        .pipe(cssnano({ zindex: false }))
-        .pipe(header(fs.readFileSync('./banners/webextension.txt', 'utf8'), { package: package }))
+    return merge(
+        gulp.src(stylesheets)
+            .pipe(concat(package.name + '.css'))
+            .pipe(cssnano({ zindex: false }))
+            .pipe(header(fs.readFileSync('./banners/webextension.txt', 'utf8'), { package: package })),
+        gulp.src('./node_modules/dialog-polyfill/dialog-polyfill.css')
+            .pipe(cssnano({ zindex: false }))
+    )
         .pipe(gulp.dest('./dist/webextension/css'));
 });
 gulp.task('build:webextension:manifest', function () {
@@ -161,14 +188,6 @@ gulp.task('build:webextension:icons', function () {
     return gulp.src(['./resources/icons/**/*.png'])
         .pipe(gulp.dest('./dist/webextension/icons'));
 });
-gulp.task('build:webextension', function (callback) {
-    sequence(
-        'clean:webextension',
-        ['build:webextension:js', 'build:webextension:css', 'build:webextension:icons', 'build:webextension:manifest'],
-        ['zip:webextension', 'crx:webextension'],
-        callback
-    );
-});
 
 // tasks for packaging the WebExtension for distribution
 gulp.task('zip:webextension', function (callback) {
@@ -185,6 +204,17 @@ gulp.task('crx:webextension', function () {
         .pipe(gulp.dest('./dist'))
 });
 
+// tasks for automatically building on source changes
+gulp.task('watch', ['build'], function () {
+    gulp.watch('./lib/**/*', ['build']);
+});
+gulp.task('watch:userscript', ['build:userscript'], function () {
+    gulp.watch('./lib/**/*', ['build:userscript']);
+});
+gulp.task('watch:webextension', ['build:webextension'], function () {
+    gulp.watch('./lib/**/*', ['build:webextension']);
+});
+
 // task for building everything
 gulp.task('build', ['build:userscript', 'build:webextension']);
 

lib/css/main.css

@@ -56,6 +56,18 @@
     resize: vertical;
 }
 
+.manage-filters-table {
+    margin: -0.1em -0.4em;
+}
+
+.manage-filters-table td {
+    padding: 0.1em 0.4em;
+}
+
+.manage-filters-table label {
+    font-weight: bold;
+}
+
 /* tabs */
 .manage-filters-tabs {
     display: block;
@@ -92,41 +104,52 @@
     display: none;
 }
 
+.filter-data-table-loading {
+    margin: 1em;
+    font-style: italic;
+    font-size: 1.25em;
+}
+
+.filter-data-table-info {
+    margin: 0.75em 0.25em;
+    font-size: 1.166666em;
+}
+
 /* filters table */
-.manage-filters-table {
+.filter-data-table {
     border-collapse: collapse;
     margin: 0 auto;
     width: 100%;
 }
-.manage-filters-table tr {
+.filter-data-table tr {
     border-bottom: 1px solid rgba(0, 0, 0, 0.15);
 }
-.manage-filters-table tr:nth-child(2n) {
+.filter-data-table tr:nth-child(2n) {
     background-color: rgba(255, 255, 255, 0.35);
 }
-.manage-filters-table td {
+.filter-data-table td {
     padding: 4px;
     text-align: left;
 }
-.manage-filters-table th {
+.filter-data-table th {
     border-bottom: 1px solid #8C9A88;
     padding: 4px;
     text-align: left;
 }
 
 /* filters table inline form */
-.manage-filters-table input {
+.filter-data-table input {
     background: transparent;
     border: 1px solid #92A399;
     box-shadow: inset 2px 2px 3px 0 rgba(0, 0, 0, 0.1);
     color: #3B5A4A;
     padding: 0.2em;
     width: 75%;
 }
-.manage-filters-table input:focus {
+.filter-data-table input:focus {
     background: #FFFFFF;
 }
-.manage-filters-table button {
+.filter-data-table button {
     margin: 0;
     padding: 0.2em;
 }