Stylish-Toggle/stylish-toggle-script.user.js at master · kogorash/Stylish-Toggle · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
// ==UserScript==
// @name         Stylish Toggle
// @version      0.0.1-beta
// @description  Adds button to toggle all applied Stylish themes
// @namespace    https://github.com/StylishThemes
// @match        http*://*/*
// @grant        none
// @updateURL    https://raw.github.com/StylishThemes/Stylish-Toggle/master/stylish-toggle.user.js
// @downloadURL  https://raw.github.com/StylishThemes/Stylish-Toggle/master/stylish-toggle.user.js
// ==/UserScript==

(function(){
'use strict';

	var stylishToggle = stylishToggle = {

		selector : 'style.stylish-style',

		init : function() {
			if ( document.querySelectorAll( this.selector ).length ) {
				this.addToggle();

				setTimeout(() => {
		                    const checkbox = toggle.querySelector('input');
		                    if (checkbox) {
		                        checkbox.checked = false;
		                        checkbox.dispatchEvent(new Event('change', { bubbles: true }));
		                    }
		                }, 300);
			}
		},
		toggle : function( event ) {
			var indx,
				stylish = document.querySelectorAll( stylishToggle.selector ),
				len = stylish.length;
			for ( indx = 0; indx < len; indx++ ) {
				stylish[ indx ].disabled = !event.target.checked;
			}
		},
		addToggle : function() {
			// flat toggle button from http://codepen.io/mallendeo/pen/eLIiG/
			var toggle = document.createElement( 'div' ),
				html = '<input class="stylish-toggle stylish-toggle-flat" id="stylish-toggle-checkbox" type="checkbox" checked>' +
				'<label class="stylish-toggle-btn" for="stylish-toggle-checkbox"></label>' +
				// toggle css
				'<style>' +
				'.stylish-toggle-wrap { position: fixed; bottom: 2px; left: 2px; background: rgba(0,0,0,0.2);' +
					'opacity: 0.3; border-radius: 2em; }' +
				'.stylish-toggle-wrap:hover { opacity: 1; }' +
				'.stylish-toggle { display: none; }' +
				'.stylish-toggle, .stylish-toggle:after, .stylish-toggle:before, .stylish-toggle *, .stylish-toggle *:after,' +
					' .stylish-toggle *:before, .stylish-toggle + .stylish-toggle-btn { box-sizing: border-box; }' +
				'.stylish-toggle::-moz-selection, .stylish-toggle:after::-moz-selection, .stylish-toggle:before::-moz-selection,' +
					'.stylish-toggle *::-moz-selection, .stylish-toggle *:after::-moz-selection, .stylish-toggle *:before::-moz-selection,' +
					'.stylish-toggle + .stylish-toggle-btn::-moz-selection { background: none; }' +
				'.stylish-toggle::selection, .stylish-toggle:after::selection, .stylish-toggle:before::selection,' +
					'.stylish-toggle *::selection, .stylish-toggle *:after::selection,.stylish-toggle *:before::selection,' +
					'.stylish-toggle + .stylish-toggle-btn::selection { background: none; }' +
				'.stylish-toggle + .stylish-toggle-btn { outline: 0; display: block; width: 4em; height: 2em; position: relative;' +
					'cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }' +
				'.stylish-toggle + .stylish-toggle-btn:after, .stylish-toggle + .stylish-toggle-btn:before {' +
					'position: relative; display: block; content: ""; width: 50%; height: 100%; }' +
				'.stylish-toggle + .stylish-toggle-btn:after { left: 0; background: #777; }' +
				'.stylish-toggle + .stylish-toggle-btn:before { display: none; }' +
				'.stylish-toggle:checked + .stylish-toggle-btn:after { left: 50%; }' +
				'.stylish-toggle-flat + .stylish-toggle-btn { padding: 2px; -webkit-transition: all .2s ease;' +
					'transition: all .2s ease; background: transparent; border: 4px solid #777; border-radius: 2em; }' +
				'.stylish-toggle-flat + .stylish-toggle-btn:after { -webkit-transition: all .2s ease;' +
					'transition: all .2s ease; content: ""; border-radius: 1em; }' +
				'.stylish-toggle-flat:checked + .stylish-toggle-btn { border: 4px solid #7FC6A6; }' +
				'.stylish-toggle-flat:checked + .stylish-toggle-btn:after { left: 50%; background: #7FC6A6; }' +
				'</style>';

			 const policy = trustedTypes.createPolicy('myPolicy', {
		                createHTML: (input) => {
		                    return input;
		                }
		            });
			const safeHTML = policy.createHTML(html);

			toggle.classList.add( 'stylish-toggle-wrap' );
			toggle.title = "Toggle Applied Stylish Theme";
			//toggle.innerHTML = html;
			toggle.innerHTML = safeHTML;

			document.querySelector( 'body' ).appendChild( toggle );
			toggle.querySelector( 'input' ).addEventListener( 'change', this.toggle );
		}

	};

	stylishToggle.init();

})();