Skip to content

Commit 2d20982

Browse files
chelovechishkochelovechishko
committed
add domains list where clocks should not be shown
and all what it needed. Also some rearrangements with html and css for more compact display of previous fields and individual page for domains list.
1 parent c11aa3b commit 2d20982

File tree

5 files changed

+279
-18
lines changed

5 files changed

+279
-18
lines changed

‎clock.js

+23-2
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,9 @@ function create_clock( values ) {
106106
my_overlay_clock_style_top = values[ 'style_top' ];
107107
// yeah, will be only one z-index for every page, sorry
108108
let my_overlay_clock_z_index = values[ 'z_index' ];
109-
109+
let my_overlay_clock_domains = values[ 'domains_array' ];
110+
// console.log( "create_clock: domains[0] = " + my_overlay_clock_domains[0] );
111+
check_is_page_in_domains_list( my_overlay_clock_domains );
110112

111113

112114
overlay_clock.textContent = new_time();
@@ -126,7 +128,6 @@ function create_clock( values ) {
126128
if( my_overlay_clock_full_screen_only && !is_full_screen() ) {
127129
overlay_clock.style.display = 'none';
128130
}
129-
130131
}
131132

132133
function update_time_on_clock() {
@@ -165,3 +166,23 @@ browser.runtime.onMessage.addListener( (request, sender, sendResponse) => {
165166
}
166167
}
167168
} );
169+
170+
function check_is_page_in_domains_list( domains ) {
171+
// if( domains == "undefined" ) {
172+
// console.log( "check_is_page_in_domains_list: domains are undefined" );
173+
// return;
174+
// }
175+
// console.log( "check_is_page_in_domains_list: " +
176+
// "doc.loc.host = " + document.location.hostname );
177+
if (domains.length > 0 ) {
178+
let host = document.location.hostname;
179+
// yeah, no check for values
180+
for( let index = 0; index < domains.length; index++ ) {
181+
if( domains[ index ] == host ) {
182+
// not deleting it
183+
overlay_clock.style.display = 'none';
184+
break;
185+
}
186+
}
187+
}
188+
}

‎defaults.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -8,5 +8,6 @@ document.clock_defaults = {
88
"font_family": "\'Anonymous Pro Minus\', monospace",
99
"style_right": "3px",
1010
"style_top": "2px",
11-
"z_index": "10000099"
11+
"z_index": "10000099",
12+
"domains_array": []
1213
};

‎options.css

+76-6
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
html {
2-
min-width: 250px;
2+
--min-page-width: 440px;
3+
--max-page-width: 440px;
4+
--min-page-height: 280px;
5+
--max-page-height: 300px;
6+
min-width: var( --min-page-width );
7+
max-width: var( --max-page-width );
38
}
49

510
body {
@@ -11,14 +16,34 @@ body {
1116
padding: 0 0 0 3px;
1217
}
1318

14-
button {
19+
/* Increase visibility of placeholder text */
20+
::placeholder {
21+
opacity: 0.8;
22+
}
23+
24+
button, #add_domain, input[class="delete_domain"] {
1525
color: #b0b0b0;
1626
border: 0px;
1727
background-color: #363636;
18-
padding-top:12px;
19-
padding-bottom:12px;
20-
padding-right:18px;
21-
padding-left:18px;
28+
}
29+
button {
30+
padding-top: 12px;
31+
padding-bottom: 12px;
32+
padding-right: 2ex;
33+
padding-left: 2ex;
34+
}
35+
36+
.buttons_container {
37+
position: relative;
38+
/* Some space from above fields */
39+
padding-top: 1em;
40+
}
41+
.buttons_horizon {
42+
position: absolute;
43+
left: 6rem; /* hardcoded for "save" word */
44+
/* The same size as above class */
45+
padding-top: 1em;
46+
top: 0%;
2247
}
2348

2449
#bg_opacity,#font_size,#font_family,#style_right,#style_top,#z_index {
@@ -41,6 +66,51 @@ button {
4166
appearance: textfield;
4267
}
4368

69+
#page_1 {
70+
max-height: var( --max-page-height );
71+
}
72+
#page_2 {
73+
/* Hide domains page by default */
74+
display: none;
75+
max-height: var( --max-page-height );
76+
}
77+
78+
#domains_container {
79+
overflow-y: scroll;
80+
border: 1px;
81+
min-height: var( --min-page-height );
82+
max-height: var( --min-page-height );
83+
}
84+
.domains {
85+
background-color: darkgrey;
86+
border: 1px;
87+
color: #000000;
88+
font-family: monospace;
89+
font-size: 16px;
90+
}
91+
.domain_element {
92+
padding-top: 10px;
93+
padding-left: 2px;
94+
}
95+
96+
/* Default values for opening settings page */
97+
#page_1_button {
98+
display: block;
99+
}
100+
#page_2_button {
101+
display: none;
102+
}
103+
104+
/* Move apart sticked together input fields
105+
* (those ones, that have only 1 br between them here)
106+
*/
107+
#bg_opacity {
108+
margin-top: 0.5em;
109+
}
110+
#font_size, #style_right {
111+
margin-bottom: 0.5em;
112+
}
113+
44114
.hide_clock_switch {
45115
display: inline-block;
46116
height: 16px;

‎options.html

+33-8
Original file line numberDiff line numberDiff line change
@@ -8,26 +8,51 @@
88
<body>
99
<div id="content">
1010
<h3>Overlay Clock Options</h3>
11-
<input id="mil_time" type="checkbox" name="mil_time"/>24-Hour Clock<br><br>
12-
<input id="full_screen_only" type="checkbox" name="full_screen_only"/>Full screen only<br><br>
11+
<div id="page_1">
12+
<input id="mil_time" type="checkbox" name="mil_time"/>24-Hour Clock<br>
13+
<input id="full_screen_only" type="checkbox" name="full_screen_only"/>Full screen only
1314
<label class="hide_clock_switch" for="hide_clock_checkbox">
1415
<input type="checkbox" id="hide_clock_checkbox" /> <div id="hide_clock_slider"></div> <span id="hide_clock_text"></span>
1516
</label> <br><br>
16-
Text Color: <input id="fg_color" class="color" type="color"><br><br>
17-
Background Color: <input id="bg_color" class="color" type="color"><br><br>
18-
Background Opacity (0..1): <input id="bg_opacity" placeholder="0.8" type="text"><br><br>
19-
Font Size: <input id="font_size" placeholder="14px" type="text"><br><br>
17+
Text Color: <input id="fg_color" class="color" type="color">
18+
Background Color: <input id="bg_color" class="color" type="color"><br>
19+
Background Opacity: <input id="bg_opacity" placeholder="0.8" type="text" title="[0..1]"><br><br>
20+
Font Size: <input id="font_size" placeholder="14px" type="text"><br>
2021
Font Family: <input id="font_family" placeholder="'Anonymous Pro Minus', monospace" type="text" title="Font names with space must be enclosed in quotes"><br><br>
2122
<!-- yes, you can use '%'s and whatever css could use -->
22-
Margin from right side: <input id="style_right" placeholder="3px" type="text" title="you can also use '%' and other units of measurement, not only 'px'"><br><br>
23+
Margin from right side: <input id="style_right" placeholder="3px" type="text" title="you can also use '%' and other units of measurement, not only 'px'"><br>
2324
Margin from top: <input id="style_top" placeholder="2px" type="text"><br><br>
2425
Z-index: <input id="z_index" type="number" placeholder="10000099" title="The bigger the number, the higher place above other elements it will take"><br><br>
26+
</div id="page_1">
2527

2628

29+
<div id="page_2">
30+
<div id="domains_container">
31+
<div class="domain_element">
32+
<input class="domains" type="text" placeholder="www.domain.name"
33+
title="Tap at 'Save' button after adding domain">
34+
<input id="add_domain" type="button" title="Add this domain to list"
35+
value="✝">
36+
</div class="domain_element">
37+
</div id="domains_container">
38+
<br>
39+
</div id="page_2">
40+
2741
<br>
2842
<div id="status"></div>
43+
44+
<div class="buttons_container">
2945
<button id="save">Save</button>
30-
</div>
46+
47+
<div id="page_1_button" class="buttons_horizon">
48+
<button id="switch_to_page_2" type="button">Page 2</button>
49+
</div>
50+
<div id="page_2_button" class="buttons_horizon">
51+
<button id="switch_to_page_1" type="button">Page 1</button>
52+
</div>
53+
</div class="buttons_container">
54+
55+
</div id="content">
3156
</body>
3257

3358
<link rel="stylesheet" href="options.css" />

‎options.js

+145-1
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ function save_options() {
1010
var style_right = document.getElementById( "style_right" ).value;
1111
var style_top = document.getElementById( "style_top" ).value;
1212
var z_index = document.getElementById( "z_index" ).value;
13+
var domains_array = domains_list_to_array();
14+
1315

1416
chrome.storage.sync.set( {
1517
"mil_time": mil_time,
@@ -21,7 +23,8 @@ function save_options() {
2123
"font_family": font_family,
2224
"style_right": style_right,
2325
"style_top": style_top,
24-
"z_index": z_index
26+
"z_index": z_index,
27+
"domains_array": domains_array
2528
} );
2629

2730
// Update status to let user know options were saved.
@@ -44,12 +47,28 @@ function restore_options() {
4447
document.getElementById( "style_right" ).value = values[ "style_right" ];
4548
document.getElementById( "style_top" ).value = values[ "style_top" ];
4649
document.getElementById( "z_index" ).value = values[ "z_index" ];
50+
domains_array = values[ "domains_array" ];
51+
recreate_domains_list_in_html( domains_array );
4752
});
4853
}
4954

5055
document.addEventListener( 'DOMContentLoaded', restore_options );
5156
document.querySelector( '#save' ).addEventListener( 'click', save_options );
5257

58+
// To let function get not Window as 'this', but exactly those element, which called function.
59+
document.getElementById( "add_domain" ).addEventListener( 'click', function() {
60+
add_this_domain( this );
61+
});
62+
63+
document.getElementById( "switch_to_page_1" ).addEventListener( 'click', function() {
64+
// to hide, to show
65+
switch_options_page( "page_2", "page_1" );
66+
switch_options_page( "page_2_button", "page_1_button" );
67+
} );
68+
document.getElementById( "switch_to_page_2" ).addEventListener( 'click', function() {
69+
switch_options_page( "page_1", "page_2" );
70+
switch_options_page( "page_1_button", "page_2_button" );
71+
} );
5372

5473
let clock_visibility = document.getElementById("hide_clock_checkbox");
5574
set_state_of_hide_clock_checkbox();
@@ -116,3 +135,128 @@ function send_message_to_tabs( tabs ) {
116135
// }
117136
}
118137
}
138+
139+
function switch_options_page( to_hide, to_show ) {
140+
// console.log( "switch_options_page " + to_hide + " " + to_show + " worked" );
141+
document.getElementById( to_hide ).style.display = "none";
142+
document.getElementById( to_show ).style.display = "block";
143+
}
144+
145+
146+
// For each saved domain create an div with it and add to page_2.
147+
function recreate_domains_list_in_html( domains ) {
148+
domains.forEach( function( value ) {
149+
domains_container.appendChild( create_domain_element_div( value ) );
150+
})
151+
}
152+
153+
// helper function
154+
// Returns new element.
155+
function create_domain_element_div( value ) {
156+
let domains_container = document.getElementById( "domains_container" );
157+
let new_element = document.createElement( "div" );
158+
// Or classList.add( "domain_element" ); if there some else classes
159+
new_element.className = "domain_element";
160+
161+
let domain_input = document.createElement( "input" );
162+
domain_input.value = value;
163+
domain_input.type = "text";
164+
domain_input.placeholder = "www.domain.name";
165+
domain_input.className = "domains";
166+
// both work
167+
// domain_input.setAttribute( "readonly", true);
168+
domain_input.readOnly = true;
169+
170+
let domain_button = document.createElement( "input" );
171+
domain_button.type = "button";
172+
domain_button.title = "Delete this domain";
173+
domain_button.value = "❌";
174+
domain_button.className = "delete_domain";
175+
// instead of this, could be body.eventListener for all class members
176+
domain_button.addEventListener( 'click' , function() {
177+
delete_exactly_this_domain( this );
178+
});
179+
180+
new_element.appendChild( domain_input );
181+
new_element.appendChild( domain_button );
182+
return new_element;
183+
}
184+
185+
// Also sort result
186+
function domains_list_to_array(
187+
/* takes nothing, as saves current state of html elements */
188+
) {
189+
let domains_container = document.getElementById( "domains_container" );
190+
const domains_elements = domains_container.getElementsByClassName( "domains" );
191+
let temp_array = [];
192+
193+
Array.prototype.filter.call(
194+
domains_elements, ( domains_element ) => {
195+
if( domains_element.value != "" ) {
196+
temp_array.push( domains_element.value );
197+
}
198+
});
199+
return temp_array.sort();
200+
}
201+
202+
function delete_exactly_this_domain( input_button ) {
203+
// if( input_button == "undefined" ) {
204+
// console.log( "delete_exactly_this_domain: input_button is undefined" );
205+
// return;
206+
// }
207+
let parent = input_button.parentNode;
208+
let first_child = parent.firstElementChild;
209+
let value_to_delete = first_child.value;
210+
// console.log( "delete_exactly_this_domain: value_to_delete = " + value_to_delete );
211+
// Creates new array without one element.
212+
domains_array = domains_array.filter( element => element != value_to_delete );
213+
parent.remove();
214+
// no auto-save of changes
215+
}
216+
217+
// Almost the same as upper one.
218+
// Can't be used in file:///options.html debug out of add-on debugging.
219+
function add_this_domain( input_button ) {
220+
// if( input_button == undefined ) {
221+
// console.log( "add_this_domain: input_button is absent" );
222+
// return;
223+
// }
224+
// .domain_element
225+
let parent = input_button.parentNode;
226+
// if( parent == undefined ) {
227+
// console.log( "cannot add_this_domain, input object is missing = "
228+
// + input_button );
229+
// return;
230+
// }
231+
let first_child = parent.firstElementChild;
232+
let value_to_add = first_child.value;
233+
// maybe should be check for at least one '.' in domain name
234+
if ( value_to_add != "" ) {
235+
// console.log( "add_this_domain: value_to_add " + value_to_add );
236+
if( is_element_unique_for_array( value_to_add, domains_array ) ) {
237+
domains_array.push( value_to_add );
238+
domains_array.sort();
239+
// console.log( "add_this_domain: sorted array = " + domains_array );
240+
let new_element = create_domain_element_div( value_to_add )
241+
// #domains_container
242+
let parent_of_parent = parent.parentNode;
243+
// insert right after "#add_domain".parent; aka insertAfter
244+
parent_of_parent.insertBefore( new_element, parent.nextSibling );
245+
// have to click save settings for saving that list as for now
246+
}
247+
}
248+
first_child.value = ""; // clear the field
249+
}
250+
251+
// helper function
252+
// what, into what
253+
function is_element_unique_for_array( element, array ) {
254+
let answer = true;
255+
for( let index = 0; index < array.length; index++ ) {
256+
if( array[ index ] == element ) {
257+
answer = false;
258+
break;
259+
}
260+
}
261+
return answer;
262+
}

0 commit comments

Comments
 (0)