@@ -71,7 +71,7 @@ function restoreOptions() {
7171 document . querySelector ( "#shadow-blur" ) . value = result . shadowBlur || "0px" ;
7272 document . querySelector ( "input#activate_textShadow" ) . checked = result . shadowActivated ;
7373 if ( result . shadowActivated ) {
74- document . querySelector ( 'div#textSadowOptions ' ) . style . display = "block" ;
74+ document . querySelector ( 'div#textShadowOptions ' ) . style . display = "block" ;
7575 }
7676 result . customOptions . forEach ( element => {
7777 var option = document . createElement ( "option" ) ;
@@ -102,10 +102,78 @@ function restoreOptions() {
102102} ;
103103
104104
105- function updateColorInput ( ) { var color = document . querySelector ( "input#color-picker-textColor" ) . value ; document . querySelector ( "input#color" ) . value = color } ; function updateBackgroundColorInput ( ) { var color = document . querySelector ( "input#color-picker-backgroundColor" ) . value ; document . querySelector ( "input#background_color" ) . value = color } ; function updateColorInputColor ( ) { var color = document . querySelector ( "input#color" ) . value ; document . querySelector ( "input#color-picker-textColor" ) . value = color } ; function updateBackgroundColorInputColor ( ) { var color = document . querySelector ( "input#background_color" ) . value ; document . querySelector ( "input#color-picker-backgroundColor" ) . value = color } ; function updateShadowColorInput ( ) { var color = document . querySelector ( "input#color-picker-shadowColor" ) . value ; document . querySelector ( "input#shadow-color" ) . value = color } ; function updateShadowColorInputColor ( ) { var color = document . querySelector ( "input#shadow-color" ) . value ; document . querySelector ( "input#color-picker-shadowColor" ) . value = color } ; function updateShadowColorDisplay ( ) { if ( document . querySelector ( "input#activate_textShadow" ) . checked ) { document . querySelector ( 'div#textSadowOptions' ) . style . display = "block" } else { document . querySelector ( 'div#textSadowOptions' ) . style . display = "none" } } ;
105+ function updateColorInput ( ) { var color = document . querySelector ( "input#color-picker-textColor" ) . value ; document . querySelector ( "input#color" ) . value = color } ; function updateBackgroundColorInput ( ) { var color = document . querySelector ( "input#color-picker-backgroundColor" ) . value ; document . querySelector ( "input#background_color" ) . value = color } ; function updateColorInputColor ( ) { var color = document . querySelector ( "input#color" ) . value ; document . querySelector ( "input#color-picker-textColor" ) . value = color } ; function updateBackgroundColorInputColor ( ) { var color = document . querySelector ( "input#background_color" ) . value ; document . querySelector ( "input#color-picker-backgroundColor" ) . value = color } ; function updateShadowColorInput ( ) { var color = document . querySelector ( "input#color-picker-shadowColor" ) . value ; document . querySelector ( "input#shadow-color" ) . value = color } ; function updateShadowColorInputColor ( ) { var color = document . querySelector ( "input#shadow-color" ) . value ; document . querySelector ( "input#color-picker-shadowColor" ) . value = color } ; function updateShadowColorDisplay ( ) { if ( document . querySelector ( "input#activate_textShadow" ) . checked ) { document . querySelector ( 'div#textShadowOptions' ) . style . display = "block" } else { document . querySelector ( 'div#textShadowOptions' ) . style . display = "none" } } ;
106106
107- function changeCustomDisplay ( ) { var selectIndex = document . querySelector ( "#custom_select" ) . selectedIndex ; if ( selectIndex != 0 ) { document . querySelector ( "#url_div" ) . style . display = "block" ; document . querySelector ( "#change_url" ) . value = document . querySelector ( "#custom_select" ) . value ; document . querySelector ( "#remove_custom" ) . style . display = "block" ; function setCurrentChoice ( result ) { var customs = result . customOptions ; document . querySelector ( "#background_color" ) . value = customs [ selectIndex - 1 ] . background || "#007ef3" ; document . querySelector ( "#color-picker-backgroundColor" ) . value = customs [ selectIndex - 1 ] . background || "#007ef3" ; document . querySelector ( "#color" ) . value = customs [ selectIndex - 1 ] . color || "white" ; document . querySelector ( "#color-picker-textColor" ) . value = customs [ selectIndex - 1 ] . color || "#ffffff" ; document . querySelector ( "#shadow-color" ) . value = customs [ selectIndex - 1 ] . shadowColor || "#ffffff" ; document . querySelector ( "input#color-picker-shadowColor" ) . value = customs [ selectIndex - 1 ] . shadowColor ; document . querySelector ( "#shadow-blur" ) . value = customs [ selectIndex - 1 ] . shadowBlur || "0px" ; document . querySelector ( "input#activate_textShadow" ) . checked = customs [ selectIndex - 1 ] . shadowActivated ; if ( result . shadowActivated ) { document . querySelector ( 'div#textSadowOptions' ) . style . display = "block" } } ; function onError ( error ) { console . log ( `Error:${ error } ` ) } ; let getting = browser . storage . local . get ( ) ; getting . then ( setCurrentChoice , onError ) } else { document . querySelector ( "#url_div" ) . style . display = "none" ; document . querySelector ( "#remove_custom" ) . style . display = "none" ; function setCurrentChoice ( result ) { document . querySelector ( "#background_color" ) . value = result . background_color || "#007ef3" ; document . querySelector ( "#color-picker-backgroundColor" ) . value = result . background_color || "#007ef3" ; document . querySelector ( "#color" ) . value = result . color || "white" ; document . querySelector ( "#color-picker-textColor" ) . value = result . color || "#ffffff" ; document . querySelector ( "#shadow-color" ) . value = result . shadowColor || "#ffffff" ; document . querySelector ( "input#color-picker-shadowColor" ) . value = result . shadowColor ; document . querySelector ( "#shadow-blur" ) . value = result . shadowBlur || "0px" ; document . querySelector ( "input#activate_textShadow" ) . checked = result . shadowActivated ; if ( result . shadowActivated ) { document . querySelector ( 'div#textSadowOptions' ) . style . display = "block" } } ; function onError ( error ) { console . log ( `Error:${ error } ` ) } ; let getting = browser . storage . local . get ( ) ; getting . then ( setCurrentChoice , onError ) } } ;
107+ function changeCustomDisplay ( ) {
108+ var selectIndex = document . querySelector ( "#custom_select" ) . selectedIndex ;
109+ if ( selectIndex != 0 ) {
110+ document . querySelector ( "#url_div" ) . style . display = "block" ;
111+ document . querySelector ( "#change_url" ) . value = document . querySelector ( "#custom_select" ) . value ;
112+ document . querySelector ( "#remove_custom" ) . style . display = "block" ;
113+
114+ function setCurrentChoice ( result ) {
115+ var customs = result . customOptions ;
116+ document . querySelector ( "#background_color" ) . value = customs [ selectIndex - 1 ] . background || "#007ef3" ;
117+ document . querySelector ( "#color-picker-backgroundColor" ) . value = customs [ selectIndex - 1 ] . background || "#007ef3" ;
118+ document . querySelector ( "#color" ) . value = customs [ selectIndex - 1 ] . color || "white" ;
119+ document . querySelector ( "#color-picker-textColor" ) . value = customs [ selectIndex - 1 ] . color || "#ffffff" ;
120+ document . querySelector ( "#shadow-color" ) . value = customs [ selectIndex - 1 ] . shadowColor || "#ffffff" ;
121+ document . querySelector ( "input#color-picker-shadowColor" ) . value = customs [ selectIndex - 1 ] . shadowColor ;
122+ document . querySelector ( "#shadow-blur" ) . value = customs [ selectIndex - 1 ] . shadowBlur || "0px" ;
123+ document . querySelector ( "input#activate_textShadow" ) . checked = customs [ selectIndex - 1 ] . shadowActivated ;
124+ if ( customs [ selectIndex - 1 ] . shadowActivated ) {
125+ document . querySelector ( 'div#textShadowOptions' ) . style . display = "block"
126+ } else {
127+ document . querySelector ( 'div#textShadowOptions' ) . style . display = "none"
128+ }
129+ document . querySelector ( "#preview" ) . style . background = document . querySelector ( "#background_color" ) . value ;
130+ document . querySelector ( "#preview" ) . style . color = document . querySelector ( "#color" ) . value ;
131+ if ( document . querySelector ( "input#activate_textShadow" ) . checked ) {
132+ document . querySelector ( "#preview" ) . style . textShadow = document . querySelector ( "#shadow-color" ) . value + " 0px 0px " + document . querySelector ( "#shadow-blur" ) . value + "px" ;
133+ } else {
134+ document . querySelector ( "#preview" ) . style . textShadow = "" ;
135+ }
136+ } ;
137+
138+ function onError ( error ) {
139+ console . log ( `Error:${ error } ` )
140+ } ;
141+ let getting = browser . storage . local . get ( ) ;
142+ getting . then ( setCurrentChoice , onError )
143+ } else {
144+ document . querySelector ( "#url_div" ) . style . display = "none" ;
145+ document . querySelector ( "#remove_custom" ) . style . display = "none" ;
146+
147+ function setCurrentChoice ( result ) {
148+ document . querySelector ( "#background_color" ) . value = result . background_color || "#007ef3" ;
149+ document . querySelector ( "#color-picker-backgroundColor" ) . value = result . background_color || "#007ef3" ;
150+ document . querySelector ( "#color" ) . value = result . color || "white" ;
151+ document . querySelector ( "#color-picker-textColor" ) . value = result . color || "#ffffff" ;
152+ document . querySelector ( "#shadow-color" ) . value = result . shadowColor || "#ffffff" ;
153+ document . querySelector ( "input#color-picker-shadowColor" ) . value = result . shadowColor ;
154+ document . querySelector ( "#shadow-blur" ) . value = result . shadowBlur || "0px" ;
155+ document . querySelector ( "input#activate_textShadow" ) . checked = result . shadowActivated ;
156+ if ( result . shadowActivated ) {
157+ document . querySelector ( 'div#textShadowOptions' ) . style . display = "block"
158+ } else {
159+ document . querySelector ( 'div#textShadowOptions' ) . style . display = "none"
160+ }
161+ document . querySelector ( "#preview" ) . style . background = document . querySelector ( "#background_color" ) . value ;
162+ document . querySelector ( "#preview" ) . style . color = document . querySelector ( "#color" ) . value ;
163+ if ( document . querySelector ( "input#activate_textShadow" ) . checked ) {
164+ document . querySelector ( "#preview" ) . style . textShadow = document . querySelector ( "#shadow-color" ) . value + " 0px 0px " + document . querySelector ( "#shadow-blur" ) . value + "px" ;
165+ } else {
166+ document . querySelector ( "#preview" ) . style . textShadow = "" ;
167+ }
168+ } ;
108169
170+ function onError ( error ) {
171+ console . log ( `Error:${ error } ` )
172+ } ;
173+ let getting = browser . storage . local . get ( ) ;
174+ getting . then ( setCurrentChoice , onError )
175+ }
176+ } ;
109177document . addEventListener ( "DOMContentLoaded" , restoreOptions ) ;
110178document . addEventListener ( "DOMContentLoaded" , updatePreview ) ;
111179document . querySelector ( "form" ) . addEventListener ( "submit" , saveOptions ) ;
@@ -115,7 +183,6 @@ document.querySelector("#add_custom").addEventListener("click", addCustom);
115183document . querySelector ( "#remove_custom" ) . addEventListener ( "click" , removeCustom ) ;
116184document . querySelector ( "input#activate_textShadow" ) . addEventListener ( "change" , updatePreview ) ;
117185document . querySelector ( "select#custom_select" ) . addEventListener ( "change" , changeCustomDisplay ) ;
118- document . querySelector ( "select#custom_select" ) . addEventListener ( "change" , updatePreview ) ;
119186document . querySelector ( "input#color-picker-textColor" ) . addEventListener ( "input" , updateColorInput ) ;
120187document . querySelector ( "input#color-picker-backgroundColor" ) . addEventListener ( "input" , updateBackgroundColorInput ) ;
121188document . querySelector ( "input#color" ) . addEventListener ( "input" , updateColorInputColor ) ;
0 commit comments