Mac image hide fix
[4Free-FSE.git] / src / settings-window.ts
blob2c2e879039e4208a4779acf1856c35a915d0b830
1 class SettingsWindow  extends FeatureInterface{
2         background_div:any = document.createElement('DIV');
3         settings_div:any = document.createElement('DIV');
4         close_div:any = document.createElement('DIV');
5         contents_div = document.createElement('DIV');
6         ul_selection_start:any = document.createElement('UL');
7         
8         close_link:any = document.createElement('A');
9         title_para:any = document.createElement('P');
10         title_text:any = document.createTextNode('4F-FSE Settings');
11         end_para:any = document.createElement('P');
12         end_text:any = document.createTextNode('Refresh to view changes');
13         
14         settings_style:any = document.createElement('STYLE');
15                 
16                 //to change order change, this AND...*
17         list_items:any[] = 
18         [
19                 {Text : " | View 『Image Hiding』 Settings", ListenerFunc :                               (a_id) => {
20                         this.clearContainer();
21                         (<Element>this.contents_div).innerHTML = 
22                                 `
23                                 <div id="disposable_container">
24                                                                  <label>Non-MD5 Expiration Time(hours): </label>
25                                                                  <input id="Expiration_Time">
26                                                                  <hr>
27                                                                  <label>MD5 Filters:</label>
28                                                                  <br>
29                                                                  <textarea style="width:98%;height:217px" placeholder="Enter MD5 like on 4chanX... 
30                                                                 /abc123/
31                                                                 /def890/" id="MD5_List_FSE"></textarea>
32                                                                 <hr>
33                                 </div>
34                                 `;
35                                 (<HTMLInputElement>document.getElementById("Expiration_Time")).value = "" + (this.setting_items.image_hiding_settings.Expiration_Time / Constants.MILLISECONDS_TO_THE_HOUR);
36                                 (<HTMLInputElement>document.getElementById("MD5_List_FSE")).value = this.setting_items.image_hiding_settings.MD5_List_FSE; 
37                                 var set_button = document.createElement('INPUT');
38                                 document.getElementById("disposable_container").appendChild(set_button);        
39                                 set_button.setAttribute('VALUE', "Set Image Settings");
40                                 set_button.addEventListener("click", (evt) => {
41                                         this.storeStates();
42                                         this.clearContainer();
43                                         this.rebuildContainer();
44                                 });
45                                 set_button.setAttribute('TYPE', 'button');                      
46                         }
48                                                                                                                                                                                 },
49                 {Text : " | View 『Word Replacement』 Settings", ListenerFunc :                   (a_id) => {
50                         this.clearContainer();
51                         
52                         var disposable_container:any = document.createElement("DIV");
53                         disposable_container.setAttribute("ID", "disposable_container");
54                         this.contents_div.appendChild(disposable_container);
55                         this.filterWindow(disposable_container);
56                         this.filterSetTable();                          
57                 }
58                                                                                                                                                                                 },
59                 {Text : " | View 『Danbooru Image Adder』 Settings", ListenerFunc :               (a_id) => {             
60                         this.clearContainer();
61                         
62                         var disposable_container:Element = document.createElement("DIV");
63                         disposable_container.setAttribute("id", "disposable_container");
64                         this.contents_div.appendChild(disposable_container);    
65                         disposable_container.innerHTML = `
66                         <table style="text-align:center;margin-left:5px">
67                                 <tr>
68                                         <td>
69                                                 <label>Very Large: </label>
70                                         </td>
71                                         <td>
72                                                 <input id="v_large_DIA" name="preivew-size" style="display:inline" type="radio">
73                                         </td>
74                                 </tr>
75                                 <tr>
76                                         <td>
77                                                 <label>Large: </label>
78                                         </td>
79                                         <td>
80                                                 <input id="large_DIA" name="preivew-size" style="display:inline" type="radio">
81                                         </td>
82                                 </tr>
83                                 <tr>
84                                         <td>
85                                                 <label>Medium: </label>
86                                         </td>
87                                         <td>
88                                                 <input id="medium_DIA" name="preivew-size" style="display:inline" type="radio">
89                                         </td>
90                                 </tr>
91                                 <tr>
92                                         <td>
93                                                 <label>Small: </label>
94                                         </td>
95                                         <td>
96                                                 <input id="small_DIA" name="preivew-size" style="display:inline" type="radio">
97                                         </td>
98                                 </tr>
99                                 <tr>
100                                         <td>
101                                                 <label>Width: </label>
102                                         </td>
103                                         <td>
104                                                 <input id="width_DIA" name="preivew-size" style="width:20%"  type="text">
105                                         </td>
106                                 </tr>
107                                 <tr>
108                                         <td>
109                                                 <label>Height: </label>
110                                         </td>
111                                         <td>
112                                                 <input id="height_DIA" name="preivew-size" style="width:20%"  type="text">
113                                         </td>
114                                 </tr>
115                         </table>        
116                 
117                         <hr>
118                         
119                         <label>Quick Reply Min Width: </label>
120                         <input id="qr_width_DIA" name="preivew-size" style="width:20%" type="text">
121                 
122                         <hr>
123                 
124                         <input id="SetImageAdderProperties" value="Set Preview Size" type="button">
125                         `;
126                 this.setImageAdderFields();
127                 this.setImageAdderEventListeners();
128                 }
129                                                                                                                                                                                 },
130                 {Text : " | View 『Thread Rebuilder』 Settings", ListenerFunc :                   (a_id) => {
131                         this.clearContainer();
132                         
133                         var disposable_container = document.createElement("DIV");
134                         disposable_container.setAttribute("id", "disposable_container");
135                         this.contents_div.appendChild(disposable_container);    
136                         disposable_container.innerHTML = 
137                         `
138                                 <label>Use 4chan Archives: </label>
139                                 <input name="ArchiveSettings" id="OnsiteArchive" type="radio">
140                                 <br>
141                                 <label>Use Offsite Archives: </label>
142                                 <input name="ArchiveSettings" id="OffsiteArchive" type="radio">
143                                 <br>
144                                 <input id="setArchive" value="Set Archive" type="button">
145                         `;
146                         
147                         (document.getElementById("setArchive")).addEventListener("click", () => {
148                                 this.storeStates();
149                                 this.clearContainer();
150                                 this.rebuildContainer();
151                         });
152                         if(this.setting_items.thread_rebuild_settings.Archive_Type === "0") (<HTMLInputElement>document.getElementById("OffsiteArchive")).checked = true;
153                         else if(this.setting_items.thread_rebuild_settings.Archive_Type === "1") (<HTMLInputElement>document.getElementById("OnsiteArchive")).checked = true;
154         }
155                                                                                                                                                                                 },
156                 {Text : " | View 『¥ Text』 Settings [Customizable]", ListenerFunc :      (a_id) => {
157                         this.clearContainer();
158                         
159                         var disposable_container = document.createElement("DIV");
160                         disposable_container.setAttribute("id", "disposable_container");
161                         this.contents_div.appendChild(disposable_container);                    
162                         disposable_container.innerHTML = 
163                         `
164                                 <label>¥Quote Character: </label>
165                                 <input name="quoteCharacter" id="quoteCharacter" type="text" value="¥">
166                                 <br>
167                                 <label>RGB Hex Color: </label>
168                                 <input name="HexColorYen" id="HexColorYen_text" type="text">
169                                 <input name="HexColorYen" id="SelectColorYen" type="color">
170                                 <br>
171                                 <input id="setQuote" value="Set Quote Settings" type="button">
172                         `;                      
173                         document.getElementById("SelectColorYen").addEventListener("input", (evt) => {
174                                 (<HTMLInputElement>document.getElementById("HexColorYen_text")).value = 
175                                         ((<HTMLInputElement>document.getElementById("SelectColorYen")).value);
176                         });                     
177                         document.getElementById("setQuote").addEventListener("click", (e) => { 
178                                         this.storeStates();
179                                         this.clearContainer();
180                                         this.rebuildContainer();
181 });     
182                         if(this.setting_items.character_inserter_settings.Yen_Character !== undefined)
183                                 (<HTMLInputElement>document.getElementById("quoteCharacter")).value = this.setting_items.character_inserter_settings.Yen_Character;
184                         if(this.setting_items.character_inserter_settings.Yen_Color !== undefined)
185                                 (<HTMLInputElement>document.getElementById("HexColorYen_text")).value = this.setting_items.character_inserter_settings.Yen_Color;       
187 (<HTMLInputElement>document.getElementById("SelectColorYen")).value = this.setting_items.character_inserter_settings.Yen_Color; 
188                 }
189                                                                                                                                                                                 },
190                 {Text : " | View 『Kita』 Settings [Customizable]", ListenerFunc :                (a_id) => {
191                         this.clearContainer();
192                         
193                         var disposable_container = document.createElement("DIV");
194                         disposable_container.setAttribute("id", "disposable_container");
195                         this.contents_div.appendChild(disposable_container);    
196                         disposable_container.innerHTML = 
197                         `                                                               
198                                 <script src="http://jscolor.js"></script>
199                                 <label>Kita Characters: </label>
200                                 <input name="selectiveCharacter" id="selectiveCharacters" type="text" value="キタ━━━(゚∀゚)━━━!!">
201                                 <br>
202                                 <label>RGB Hex Color: </label>
203                                 <input name="HexColorKita" id="HexColorKita_text" type="text">
204                                 <input name="HexColorKita" id="SelectColorKita" type="color">
205                                 <br>
206                                 <input id="setCharacter" value="Set Character Settings" type="button">
207                         `;
208                         document.getElementById("SelectColorKita").addEventListener("input", (evt) => {
209                                 (<HTMLInputElement>document.getElementById("HexColorKita_text")).value = 
210                                         ((<HTMLInputElement>document.getElementById("SelectColorKita")).value);
211                                 });
212                         document.getElementById("setCharacter").addEventListener("click", (e) =>{
213                                         this.storeStates();
214                                         this.clearContainer();
215                                         this.rebuildContainer();
217 });     
218                         if(this.setting_items.character_inserter_settings.Kita_Character !== undefined)
219                                 (<HTMLInputElement>document.getElementById("selectiveCharacters")).value = this.setting_items.character_inserter_settings.Kita_Character;
220                         if(this.setting_items.character_inserter_settings.Kita_Color !== undefined)
221                                 (<HTMLInputElement>document.getElementById("HexColorKita_text")).value = this.setting_items.character_inserter_settings.Kita_Color;     
222                         (<HTMLInputElement>document.getElementById("SelectColorKita")).value = this.setting_items.character_inserter_settings.Kita_Color;       
223                 }                                                                                                                                                                               
224                                                                                                                                                                                 },
225                 {Text : " | Set 『Visible Password』", ListenerFunc :                             (input_id) => {
226                         this.storeStates();
227                 }                                                                                                                                                                       },
228         ]
229         
230         setting_items:any = {};
231         
232         constructor(){
233                 super();
234                 this.retrieveStates();
235                 this.init();
236                 this.activate();
237         }
238         
239         setImageAdderFields(){
240                 (<HTMLInputElement>document.getElementById("width_DIA")).value = this.setting_items.image_adder_settings.Width;
241                 (<HTMLInputElement>document.getElementById("height_DIA")).value = this.setting_items.image_adder_settings.Height;
242                 (<HTMLInputElement>document.getElementById("qr_width_DIA")).value = this.setting_items.image_adder_settings.QR_Width;
244                 if              ((<HTMLInputElement>document.getElementById("width_DIA")).value == "489") (<HTMLInputElement>document.getElementById("v_large_DIA")).checked = true;    
245                 else if((<HTMLInputElement>document.getElementById("width_DIA")).value == "400") (<HTMLInputElement>document.getElementById("large_DIA")).checked = true;
246                 else if((<HTMLInputElement>document.getElementById("width_DIA")).value == "300") (<HTMLInputElement>document.getElementById("medium_DIA")).checked = true;
247                 else if((<HTMLInputElement>document.getElementById("width_DIA")).value == "200") (<HTMLInputElement>document.getElementById("small_DIA")).checked = true;
248         }
249         
250         setImageAdderEventListeners():void{
251                 (<HTMLInputElement>document.getElementById("v_large_DIA")).addEventListener("click", function(){
252                         (<HTMLInputElement>document.getElementById("width_DIA")).value = "489";
253                         (<HTMLInputElement>document.getElementById("height_DIA")).value = "489";
254                 });
256                 (<HTMLInputElement>document.getElementById("large_DIA")).addEventListener("click", function(){
257                         (<HTMLInputElement>document.getElementById("width_DIA")).value = "400";
258                         (<HTMLInputElement>document.getElementById("height_DIA")).value = "400";
259                 });
260                         
261                 (<HTMLInputElement>document.getElementById("medium_DIA")).addEventListener("click", function(){
262                         (<HTMLInputElement>document.getElementById("width_DIA")).value = "300";
263                         (<HTMLInputElement>document.getElementById("height_DIA")).value = "300";
264                 });
266                 
267                 (<HTMLInputElement>document.getElementById("small_DIA")).addEventListener("click", function(){
268                         (<HTMLInputElement>document.getElementById("width_DIA")).value = "200";
269                         (<HTMLInputElement>document.getElementById("height_DIA")).value = "200";
270                 });
271                 
272                 
273                 (<HTMLInputElement>document.getElementById("SetImageAdderProperties")).addEventListener("click", (evt) => {
274                         this.storeStates();
275                         this.clearContainer();
276                         this.rebuildContainer();
277                 });
281         }
283                 //*...THIS
284         retrieveStates():void{
285                 //values used to fill out data fields
286                 this.setting_items.image_hiding_settings  = {Expiration_Time: localStorage.getItem("Expiration_Time"), MD5_List_FSE: localStorage.getItem("MD5_List_FSE"), Active: localStorage.getItem("ImageHidingActive")};
287                 this.retrieveWordReplaceStates();
288                 this.retrieveImageAdderStates();
289                 this.retrieveRebuildStates();
290                 this.retrieveCharacterInsertingStates();
291                 this.setting_items.password_settings=(localStorage.getItem("PasswordActive"));
292         }
293         
294         retrieveActiveToggles():void{
295                 if(localStorage.getItem("4F-FSE") === null){
296                         (<HTMLInputElement>document.getElementById("check-settings0")).checked = true;
297                         (<HTMLInputElement>document.getElementById("check-settings1")).checked = false;
298                         (<HTMLInputElement>document.getElementById("check-settings2")).checked = false;
299                         (<HTMLInputElement>document.getElementById("check-settings3")).checked = false;
300                         (<HTMLInputElement>document.getElementById("check-settings4")).checked = true;
301                         (<HTMLInputElement>document.getElementById("check-settings5")).checked = true;
302                         (<HTMLInputElement>document.getElementById("check-settings6")).checked = true;
303                         localStorage.setItem("4F-FSE", "Success");
304                         this.displayWindow();
305                         return;
306                 } 
307                 (<HTMLInputElement>document.getElementById("check-settings0")).checked = localStorage.getItem("ImageHidingActive") === 'true';
308                 (<HTMLInputElement>document.getElementById("check-settings1")).checked = localStorage.getItem("TextReplaceActive") === 'true';
309                 (<HTMLInputElement>document.getElementById("check-settings2")).checked = localStorage.getItem("ImageAdderActive") === 'true';
310                 (<HTMLInputElement>document.getElementById("check-settings3")).checked = localStorage.getItem("ThreadRebuilderActive") === 'true';
311                 (<HTMLInputElement>document.getElementById("check-settings4")).checked = localStorage.getItem("YenActive") === 'true';
312                 (<HTMLInputElement>document.getElementById("check-settings5")).checked = localStorage.getItem("KitaActive") === 'true';
313                 (<HTMLInputElement>document.getElementById("check-settings6")).checked = localStorage.getItem("PasswordActive") === 'true';
314         }
315         
316         retrieveWordReplaceStates():void{
317                 //acquire text filter representation
318                 var storage_index:number = 0;
319                 var JSON_storage:any = {};
320                 var storage_key:string;
321                 var text_filters:any[] = [];
322                 var local_store_len = window.localStorage.length;
323                 while(storage_index < local_store_len) {
324                         storage_key = window.localStorage.key(storage_index);
325                         JSON_storage[storage_key] = window.localStorage.getItem(storage_key);
326                         storage_index++;
327                 }
328                 var filters:string[] = Generics.getJSONPropertiesByKeyName(JSON_storage,"[0-9]+FLT");
329                 filters.sort();
330                 filters.forEach((filter) => {
331                         text_filters.push(TextReplacer.formatFilterSettings(JSON_storage[filter]));
332                 });
333                 
334                 this.setting_items.word_replace_settings = {Number_of_Filters: localStorage.getItem("filter_quantity"), Text_Filter_List: text_filters, Active:localStorage.getItem("TextReplaceActive")};
335         }
336         
337         retrieveImageAdderStates():void{
338                 this.setting_items.image_adder_settings =  {Width: localStorage.getItem("width_DIA"),
339                                                                                                         Height: localStorage.getItem("height_DIA"), 
340                                                                                                         QR_Width: localStorage.getItem("qr_width_DIA"),
341                                                                                                         Active:localStorage.getItem("ImageAdderActive")};
342                 
343                 if(this.setting_items.image_adder_settings.Height === null) this.setting_items.image_adder_settings.Height = 400;
344                 if(this.setting_items.image_adder_settings.Width === null) this.setting_items.image_adder_settings.Width = 400;
345                 if(this.setting_items.image_adder_settings.QR_Width === null) this.setting_items.image_adder_settings.QR_Width = 480;
346                 
347                 (<HTMLInputElement>document.getElementById("fourchanx-css")).textContent += ".qr-preview { height:" +  this.setting_items.image_adder_settings.Height + "px; width: " + this.setting_items.image_adder_settings.Width +  "px; left:8%;background-size: cover;}";
348                 (<HTMLInputElement>document.getElementById("fourchanx-css")).textContent += "#dump-list { min-height: " + (this.setting_items.image_adder_settings.Width - 20) +  "px; width: " + (this.setting_items.image_adder_settings.QR_Width) + "px;}";
349                 
350         }
351         
352         retrieveRebuildStates():void{
353                 if(localStorage.getItem("ArchiveType_FSE") !== "1" && localStorage.getItem("ArchiveType_FSE") !== "0") localStorage.setItem("ArchiveType_FSE", "1");
354                 this.setting_items.thread_rebuild_settings = {Archive_Type: localStorage.getItem("ArchiveType_FSE"), Active:localStorage.getItem("ThreadRebuilderActive")};
355         }
356         
357         retrieveCharacterInsertingStates():void{
358         if (localStorage.getItem("Yen_Character") === undefined || localStorage.getItem("Yen_Character") === null) localStorage.setItem("Yen_Character", "¥");
359         if (localStorage.getItem("Yen_Color") === undefined || localStorage.getItem("Yen_Color")  === null) localStorage.setItem("Yen_Color", "#9370DB");
360         if (localStorage.getItem("Kita_Character") === undefined || localStorage.getItem("Kita_Character") === null) localStorage.setItem("Kita_Character", "キタ━━━(゚∀゚)━━━!!");
361         if (localStorage.getItem("Kita_Color") === undefined || localStorage.getItem("Kita_Color") === null)localStorage.setItem("Kita_Color", "#444444");
362                 
363                 this.setting_items.character_inserter_settings = {Yen_Active: localStorage.getItem("YenActive"), Yen_Character: localStorage.getItem("Yen_Character"), Yen_Color: localStorage.getItem("Yen_Color"),
364                                                                                                         Kita_Active: localStorage.getItem("KitaActive"), Kita_Character:localStorage.getItem("Kita_Character"), Kita_Color: localStorage.getItem("Kita_Color")};
365                                                                                                         
366         }
367         
368         storeStates():void{
369                 //image settings
370                 this.storeImageFilterStates();  
371                 //Text replace settings
372                 this.storeTextFilterStates();   
373                 //Image Adder settings
374                 this.storeImageAdderStates();
375                 //Thread rebuild settings
376                 this.storeRebuildStates();
377                 //character inserter
378                 this.storeCharacterInserterStates();
379                 //Password replace settings
380                 this.storePasswordStates()
381         
382                 this.retrieveStates();
383         }
384         
385         storeActiveToggles():void{
386                 localStorage.setItem("ImageHidingActive", ((<HTMLInputElement>document.getElementById("check-settings0")).checked.toString()));
387                 localStorage.setItem("TextReplaceActive", ((<HTMLInputElement>document.getElementById("check-settings1")).checked.toString()));
388                 localStorage.setItem("ImageAdderActive", ((<HTMLInputElement>document.getElementById("check-settings2")).checked.toString()));
389                 localStorage.setItem("ThreadRebuilderActive", ((<HTMLInputElement>document.getElementById("check-settings3")).checked.toString()));
390                 localStorage.setItem("YenActive", ((<HTMLInputElement>document.getElementById("check-settings4")).checked.toString()));
391                 localStorage.setItem("KitaActive", ((<HTMLInputElement>document.getElementById("check-settings5")).checked.toString()));
392                 localStorage.setItem("PasswordActive", ((<HTMLInputElement>document.getElementById("check-settings6")).checked.toString()));
393         }
394         
395         storeImageFilterStates():void{
396                 if(document.getElementById("Expiration_Time") !== null){
397                         var time:any = document.getElementById("Expiration_Time");
398                         var millisecond_time:number = parseInt((<HTMLInputElement>time).value) * Constants.MILLISECONDS_TO_THE_HOUR;
399                         if (millisecond_time == 0 || millisecond_time === null || millisecond_time === undefined) millisecond_time = Constants.DEFAULT_HIDE_EXPIRATION_TIME;
400                         localStorage.setItem("Expiration_Time", millisecond_time.toString());
401                         var md5_filters = (<HTMLInputElement>document.getElementById("MD5_List_FSE")).value;
402                         localStorage.setItem("MD5_List_FSE", md5_filters);
403                         Generics.alert4ChanX("Image Settings Saved", "success", 3);
404                 }
405                 
406         }
407         
408         storeTextFilterStates():void{
409                 if(document.getElementById("FilterRow0") !== null){             
410                         var f_row_moving:any = document.getElementById("FilterRow0");
411                         var Number_of_Filters:number = 0;
412                         var Number_of_Filters_actual:number = 0;
413                         while(f_row_moving.nextSibling !== null){
414                                 if((<HTMLInputElement>document.getElementById("Pattern" + Number_of_Filters)).value !== "") Number_of_Filters_actual++;
415                                 Number_of_Filters++;
416                                 f_row_moving = f_row_moving.nextSibling;
417                         }                       
418                         window.localStorage.setItem("filter_quantity", Number_of_Filters_actual.toString());
419                         
420                         for (var pattern_input:number = 0 ; pattern_input < Number_of_Filters; pattern_input++){
421                                 var pattern_to_store:string = (<HTMLInputElement>document.getElementById("Pattern"+pattern_input)).value;
422                                 var replacement_to_store:string = (<HTMLInputElement>document.getElementById("Replacement"+pattern_input)).value;
423                                 var setting:string = 'g';
424                                 try{
425                                         if(pattern_to_store === "") {
426                                                 localStorage.removeItem(pattern_input + "FLT");
427                                                 continue;
428                                         }
429                                         else if(new RegExp("^\/.*\/\\D+$").test(pattern_to_store)){}
430                                         else if (new RegExp("^\/.*\/$").test(pattern_to_store)){
431                                                 pattern_to_store = pattern_to_store + setting;
432                                         }
433                                         else if(!new RegExp("^/.*\/\\D$").test(pattern_to_store)){
434                                                 pattern_to_store = "/" + pattern_to_store + "/" + setting;
435                                         } 
436                                          //test for breakages, try to cause error
437                                          var error_test:any = new RegExp(
438                                                                 pattern_to_store.substring(0, pattern_to_store.lastIndexOf("/") + 1),
439                                                                 pattern_to_store.substring(pattern_to_store.lastIndexOf("/") + 1)
440                                                                 );
441                                  }
442                                  catch(e){
443                                         Generics.alert4ChanX("Unrecoverable Regex error on pattern " + pattern_input + " for " + pattern_to_store, "error", undefined);
444                                         continue;
445                                  }
446                                 pattern_to_store = encodeURIComponent(pattern_to_store);
447                                 var save_string:string = (<HTMLInputElement>document.getElementById("Active"+pattern_input)).checked + '=' + pattern_to_store + '=' + replacement_to_store;
448                                 window.localStorage.setItem(pattern_input + "FLT", save_string);
449                         }
450                         Generics.alert4ChanX("Wordfilters Updated!", "success", 3);
451                 }
452         }
453         
454         storeImageAdderStates():void{
455 if(document.getElementById("SetImageAdderProperties") !== null){
456                 var width:string = (<HTMLInputElement>document.getElementById("width_DIA")).value;      
457                 localStorage.setItem("width_DIA", width);
458                 
459                 var height:string = (<HTMLInputElement>document.getElementById("height_DIA")).value;    
460                 localStorage.setItem("height_DIA", height);
461                 
462                 var qr_width:string = (<HTMLInputElement>document.getElementById("qr_width_DIA")).value;        
463                 localStorage.setItem("qr_width_DIA", qr_width);
464                 
466         }
467         
468         storeRebuildStates():void{
469                 if(document.getElementById("setArchive") !== null){
470                         localStorage.setItem("ArchiveType_FSE", (<HTMLInputElement>document.getElementById("OffsiteArchive")).checked === true ? "0" : "1");
471                 }
472         }
473         
474         storeCharacterInserterStates():void{
475                 if(document.getElementById("setCharacter") !== null){
476                         localStorage.setItem("Kita_Character", (<HTMLInputElement>document.getElementById("selectiveCharacters")).value);
477                         localStorage.setItem("Kita_Color", (<HTMLInputElement>document.getElementById("HexColorKita_text")).value);
478                 }
479                 else if(document.getElementById("setQuote") !== null){
480                         localStorage.setItem("Yen_Character", (<HTMLInputElement>document.getElementById("quoteCharacter")).value);
481                         localStorage.setItem("Yen_Color", (<HTMLInputElement>document.getElementById("HexColorYen_text")).value);
482                 }       
483         }
484         
485         storePasswordStates():void{
486                         //password view settings
487                 if(document.getElementById("check-settings6") !== null)
488                 localStorage.setItem("PasswordActive", `${(<HTMLInputElement>document.getElementById("check-settings6")).checked}`);            
489         }
490         
491         clearContainer():void{
492                 var disposable = document.getElementById("disposable_container");
493                 if(disposable !== null) this.contents_div.removeChild(disposable);
494                 else this.contents_div.removeChild(this.ul_selection_start);
495         }
496         
497         rebuildContainer(){
498                 this.contents_div.appendChild(this.ul_selection_start);
499         }
500         
501         init(){
502                 this.settings_style.innerHTML = `.inputs{
503                                                                                         background-color:rgb(200,200,200);margin:5px 7px;width:100px;
504                                                                                 }
505                                                                                 .SettingsBackground{
506                                                                                         position:fixed;width:100%;height:100%;background-color:rgba(200,200,200,0.3);top:0;left:0; z-index:9
507                                                                                 }
508                                                                                 .settingsItem{
509                                                                                         font-size:18px;list-style:katakana-iroha outside;padding:2px;color:#2e2345;
510                                                                                 }
511                                                                                 .settingsItem input{
512                                                                                         transform: scale(1.2);
513                                                                                 }
514                                                                                 .settingsMain{
515                                                                                         border:solid 1px black;position:fixed;background-color:rgb(200,200,200);left:40%;top:20%;margin-bottom:0; z-index:10
516                                                                                 }
517                                                                                 .closeIcon{
518                                                                                         border:solid 1px black;position:absolute;width:25px;height:25px;background-color:rgba(255,100,90,0.9); right:3px;top:3px; z-index:10
519                                                                                 }
520                                                                                 .titleStyle{
521                                                                                         font-size: 20px;padding: 12px 0px 9px 22px
522                                                                                 }
523                                                                                 .tooltip-4F{
524                                                                                         z-index:9;padding:5px;border:1px solid black;background-color:white;word-wrap:break-word;display:none;position:absolute;
525                                                                                 }
526                                                                                 .help_icon{
527                                                                                         height:22.5px;margin:-4px 10px
528                                                                                 }
529                                                                                 .footerStyle{
530                                                                                         padding-left: 12px;
531                                                                                 }
532                                                                                 .contentStyle{
533                                                                                         background-color:white;margin:0 0;padding:5px 25px;
534                                                                                 }`;
536                 this.background_div.setAttribute('class', 'SettingsBackground');
537                 this.background_div.setAttribute('id', 'SettingsBackground');
538                 this.background_div.setAttribute('style','display:none');
539                 
540                 this.settings_div.setAttribute('class', 'settingsMain');
541                 this.settings_div.setAttribute('id', 'settingsWindow');
542                 this.settings_div.setAttribute('style', 'display:none;width:500px');
543                 
544                 this.close_link.setAttribute('href','javascript:void(0)');
546                 this.close_div.setAttribute('class', 'closeIcon');
547                 this.close_div.addEventListener('click', evt => this.hideWindow());
548                 
549                 this.title_para.setAttribute('class', 'titleStyle');
551                 this.contents_div.setAttribute('class','contentStyle');
553                 this.end_para.setAttribute('class', 'footerStyle');
554                                 
555                 this.ul_selection_start.setAttribute("ID", "selection_list");
556                 this.generateList(this.contents_div);
557         }
558         
559         generateList(head_node:any):void{                       
560                 this.list_items.forEach((list_item, index) => {
561                         var li = document.createElement('LI');
562                         li.setAttribute('class', 'settingsItem');
563                         if(list_item.Text.indexOf('View') > -1){
564                                 var input:any = document.createElement('INPUT');
565                                 var input_id:string = 'check-settings' + index;
566                                 input.setAttribute('TYPE','checkbox');
567                                 input.setAttribute('ID', 'check-settings' + index);
568                                 li.appendChild(input);          
569                                 input.addEventListener('click', (evt) => this.storeActiveToggles());
570                                         
571                                 var a:any =  document.createElement('A');
572                 a.setAttribute('href','javascript:void(0)');
573                                 a.textContent = list_item.Text;
574                                 var a_id = 'tab-settings' + index;
575                                 a.setAttribute('ID', 'tab-settings' + index);
576                                 var setup_func =(_a_id) => {
577                                         a.addEventListener('click', (evt) => list_item.ListenerFunc(_a_id ));
578                                         li.appendChild(a);
579                                         this.ul_selection_start.appendChild(li);
580                                 }
581                                 setup_func(a_id);
582                         }
583                         else{
584                                 var input:any = document.createElement('INPUT');
585                                 var input_id:string = 'check-settings' + index;
586                                 input.setAttribute('TYPE','checkbox');
587                                 input.setAttribute('ID', 'check-settings' + index);
588                                 input.addEventListener('click', (evt) => this.storeActiveToggles());
590                                 var label:any =  document.createElement('LABEL');
591                                 label.appendChild(input);       
592                                 var label_text = document.createTextNode(list_item.Text);       
593                                 label.appendChild(label_text);
594                                 li.appendChild(label);
595                                 this.ul_selection_start.appendChild(li);
596                                 
597                                 (<HTMLInputElement>input).checked = this.setting_items.password_settings == 'true';
598                                 var setup_func = (input_id) => {
599                                         label.addEventListener('click',(evt) => list_item.ListenerFunc(input_id));
600                                 };
601                                 setup_func(input_id);
602                         }
603                 });
604         }
605         
606         activate():void{
607                 document.body.appendChild(this.settings_style);
608                 this.background_div.addEventListener('click', evt => this.hideWindow());
609                 document.body.appendChild(this.background_div);
610                 this.settings_div.appendChild(this.close_link);
611                 this.close_link.appendChild(this.close_div);
612                 this.title_para.appendChild(this.title_text);
613                 this.settings_div.appendChild(this.title_para);
614                 this.settings_div.appendChild(this.contents_div);               
615                 this.contents_div.appendChild(this.ul_selection_start);
616                 this.end_para.appendChild(this.end_text);
617                 this.settings_div.appendChild(this.end_para);
618                 document.body.appendChild(this.settings_div);
619                 this.retrieveActiveToggles();
620         }
621         decideAction(node:any):void{}
622         
623         getSettingsArr():Object{
624                 return this.setting_items;
625         }
626         
627         displayWindow():void{
628                 this.background_div.style.display = 'block';
629                 this.settings_div.style.display = 'block';
630                 this.rebuildContainer();
631         }
632         
633         hideWindow():void{
634                 this.background_div.style.display = 'none';
635                 this.settings_div.style.display = 'none';
636                 this.clearContainer();
637         }
638                 
639         filterWindow(disposable_container:any):void{
640                 var filter_table:any = document.createElement("table");
641                 filter_table.setAttribute("style", "text-align:center;");
642                 filter_table.setAttribute("id", "filter_table");
643                 disposable_container.appendChild(filter_table);
645                 var top_row = document.createElement("TR");
646                 filter_table.appendChild(top_row);
647                 
648                 var table_head_active:any =  document.createElement("th");
649                 top_row.appendChild(table_head_active);
650                 var head_text_active:any = document.createTextNode("Active");
651                 table_head_active.appendChild(head_text_active);
652                 var table_head_pattern:any =  document.createElement("th");
653                 top_row.appendChild(table_head_pattern);
654                 var headTextPattern:any = document.createTextNode("Pattern");
655                 table_head_pattern.appendChild(headTextPattern);
656                 var table_head_replacement:any =  document.createElement("th");
657                 top_row.appendChild(table_head_replacement);
658                 var head_text_replacement:any = document.createTextNode("Replacement");
659                 table_head_replacement.appendChild(head_text_replacement);
661                 //Create the pattern table
662                 //loop to create rows
663                 var Number_of_Filters:number = parseInt(this.setting_items.word_replace_settings.Number_of_Filters);
664                 console.log(Number_of_Filters);
665                 if (Number_of_Filters === 0 || isNaN(Number_of_Filters)) Number_of_Filters = 6;
666                 for (var i = 0; i <  Number_of_Filters ; i++){
667                         var table_row_contents:any = document.createElement("tr");
668                         table_row_contents.setAttribute("id", "FilterRow" + i);
670                         var table_data_active:any =  document.createElement("td");
671                         var table_checkbox_active:any = document.createElement("input");
672                         table_checkbox_active.setAttribute("type", "checkbox");
673                         table_checkbox_active.setAttribute("id", "Active" + i);
674                         table_data_active.appendChild(table_checkbox_active);
675                         table_row_contents.appendChild(table_data_active);
677                         var table_data_pattern:any =  document.createElement("td");
678                         var table_input_pattern:any = document.createElement("input");
679                         table_input_pattern.setAttribute("class", "inputs");
680                         table_input_pattern.setAttribute("id", "Pattern" + i);
681                         table_data_pattern.appendChild(table_input_pattern);
682                         table_row_contents.appendChild(table_data_pattern);
684                         var table_data_replacement:any =  document.createElement("td");
685                         var table_input_replacement:any =  document.createElement("input");
686                         table_input_replacement.setAttribute("class", "inputs");
687                         table_input_replacement.setAttribute("id", "Replacement" + i);
688                         table_data_replacement.appendChild(table_input_replacement);
689                         table_row_contents.appendChild(table_data_replacement);
691                         filter_table.appendChild(table_row_contents);
692                 }
694                 var table_last_contents:any = document.createElement("tr");
696                 var table_add_collumn:any =  document.createElement("td");
697                 var table_add_row_button:any = document.createElement("input");
698                 var table_subtract_row_button:any = document.createElement("input");
699                 table_subtract_row_button.setAttribute("type", "button");
700                 table_subtract_row_button.setAttribute("value", "-");
701                 table_subtract_row_button.setAttribute("style", "padding: 7px 0; margin:5px 0;");
702                 table_add_collumn.appendChild(table_subtract_row_button);
703                 table_subtract_row_button.addEventListener("click", (evt) => this.filterRemoveRow());
704                 table_add_row_button.setAttribute("type", "button");
705                 table_add_row_button.setAttribute("value", "+");
706                 table_add_row_button.setAttribute("style", "padding: 7px 0; margin:5px 0;");
707                 table_add_collumn.appendChild(table_add_row_button);
708                 table_add_row_button.addEventListener("click", (evt) => this.filterAddRow());
710                 table_last_contents.appendChild(table_add_collumn);
712                 var table_set_collumn:any =  document.createElement("td");
713                 var table_confirm_button:any = document.createElement("input");
714                 table_confirm_button.setAttribute("type", "button");
715                 table_confirm_button.setAttribute("id", "table_confirm_button");
716                 table_confirm_button.setAttribute("value", "Set Replacements");
717                 table_confirm_button.setAttribute("style", "padding: 7px 0; margin:5px 0;");
718                 
719                 //event listeners
720                 table_confirm_button.addEventListener("click", (evt) => {
721                         this.storeStates();
722                         this.clearContainer();
723                         this.rebuildContainer();
724                 });
725                 
726                 table_set_collumn.appendChild(table_confirm_button);
727                 table_last_contents.appendChild(table_set_collumn);
729                 var table_close_collumn:any = document.createElement("td");
730                 var table_close_button:any = document.createElement("input");
731                 table_close_button.setAttribute("type", "button");
732                 table_close_button.setAttribute("value", "Close Without Saving");
733                 table_close_button.setAttribute("style", "padding: 7px 0; margin:5px 0;");
734                 table_close_button.addEventListener("click", (evt) => {
735                         this.clearContainer();
736                         this.rebuildContainer();
737                 });
738                 table_close_collumn.appendChild(table_close_button);
739                 table_last_contents.appendChild(table_close_collumn);
741                 filter_table.appendChild(table_last_contents);
742         }
743         
744         filterAddRow():void{
745                 var filter_table:any = document.getElementById("filter_table");
746                 var Number_of_Filters = 0;
747                 var filter_children = document.getElementById("filter_table").firstChild;
748                 while(filter_children.nextSibling){
749                         filter_children = filter_children.nextSibling;
750                         Number_of_Filters++
751                 } 
752                 
753                 
754                 var table_row_contents:any = document.createElement("tr");
755                 table_row_contents.setAttribute("id", "FilterRow" +  (Number_of_Filters - 1));
756                 filter_table.removeChild(filter_children);
757                 
758                 var table_data_active:any =  document.createElement("td");
759                 var table_checkbox_active:any = document.createElement("input");
760                 table_checkbox_active.setAttribute("type", "checkbox");
761                 table_checkbox_active.setAttribute("id", "Active" + (Number_of_Filters- 1));
762                 table_data_active.appendChild(table_checkbox_active);
763                 table_row_contents.appendChild(table_data_active);
765                 var table_data_pattern:any =  document.createElement("td");
766                 var table_input_pattern:any = document.createElement("input");
767                 table_input_pattern.setAttribute("class", "inputs");
768                 table_input_pattern.setAttribute("id", "Pattern" + (Number_of_Filters- 1));
769                 table_data_pattern.appendChild(table_input_pattern);
770                 table_row_contents.appendChild(table_data_pattern);
772                 var table_data_replacement:any =  document.createElement("td");
773                 var table_input_replacement:any =  document.createElement("input");
774                 table_input_replacement.setAttribute("class", "inputs");
775                 table_input_replacement.setAttribute("id", "Replacement" + (Number_of_Filters- 1));
776                 table_data_replacement.appendChild(table_input_replacement);
777                 table_row_contents.appendChild(table_data_replacement);
779                 filter_table.appendChild(table_row_contents);
781                 var table_last_contents:any = document.createElement("tr");
783                 var table_add_collumn:any =  document.createElement("td");
784                 var table_add_row_button:any = document.createElement("input");
785                 var table_subtract_row_button:any = document.createElement("input");
786                 table_subtract_row_button.setAttribute("type", "button");
787                 table_subtract_row_button.setAttribute("value", "-");
788                 table_subtract_row_button.setAttribute("style", "padding: 7px 0; margin:5px 0;");
789                 table_add_collumn.appendChild(table_subtract_row_button);
790                 table_subtract_row_button.addEventListener("click", (evt) => this.filterRemoveRow());
791                 table_add_row_button.setAttribute("type", "button");
792                 table_add_row_button.setAttribute("value", "+");
793                 table_add_row_button.setAttribute("style", "padding: 7px 0; margin:5px 0;");
794                 table_add_collumn.appendChild(table_add_row_button);
795                 table_add_row_button.addEventListener("click", (evt) => this.filterAddRow());
797                 table_last_contents.appendChild(table_add_collumn);
799                 var table_set_collumn:any =  document.createElement("td");
800                 var table_confirm_button:any = document.createElement("input");
801                 table_confirm_button.setAttribute("type", "button");
802                 table_confirm_button.setAttribute("id", "table_confirm_button");
803                 table_confirm_button.setAttribute("value", "Set Replacements");
804                 table_confirm_button.setAttribute("style", "padding: 7px 0; margin:5px 0;");
805                 //event listeners
806                 table_confirm_button.addEventListener("click", (evt) => {
807                         this.storeStates();
808                         this.clearContainer();
809                         this.rebuildContainer();
810                 });
811                 
812                 table_set_collumn.appendChild(table_confirm_button);
813                 table_last_contents.appendChild(table_set_collumn);
815                 var table_close_collumn:any = document.createElement("td");
816                 var table_close_button:any = document.createElement("input");
817                 table_close_button.setAttribute("type", "button");
818                 table_close_button.setAttribute("value", "Close Without Saving");
819                 table_close_button.setAttribute("style", "padding: 7px 0; margin:5px 0;");
820                 table_close_button.addEventListener("click", (evt) => {
821                         this.clearContainer();
822                         this.rebuildContainer();
823                 });
824                 table_close_collumn.appendChild(table_close_button);
825                 table_last_contents.appendChild(table_close_collumn);
827                 filter_table.appendChild(table_last_contents);
828         }
830         filterRemoveRow():void{
831                 var filter_table:any = document.getElementById("filter_table");
832                 var Number_of_Filters = 0;
833                 var filter_children = document.getElementById("filter_table").firstChild;
834                 while(filter_children.nextSibling){
835                         filter_children = filter_children.nextSibling;
836                         Number_of_Filters++
837                 } 
838                 if(Number_of_Filters != 2){
839                         filter_table.deleteRow(--Number_of_Filters);
840                 }
841         }
843         filterSetTable():void{
844                 var filter_length = this.setting_items.word_replace_settings.Number_of_Filters; 
845                 for (var filter_count:number = 0 ; filter_count < filter_length ; filter_count++){
846                         if(
847                                 this.setting_items.word_replace_settings.Text_Filter_List[filter_count].Active === null || 
848                                 this.setting_items.word_replace_settings.Text_Filter_List[filter_count].Regex === null ||
849                                 this.setting_items.word_replace_settings.Text_Filter_List[filter_count].Replacement === null) return;
850                                 
851                         if(this.setting_items.word_replace_settings.Text_Filter_List[filter_count].Active === "true"){
852                                 (<HTMLInputElement>document.getElementById("Active"+filter_count)).checked = true;
853                         }
854                         else{
855                                 (<HTMLInputElement>document.getElementById("Active"+filter_count)).checked = false;
856                         }
857                         (<HTMLInputElement>document.getElementById("Pattern"+filter_count)).value = 
858                                                                                         this.setting_items.word_replace_settings.Text_Filter_List[filter_count].Regex;
859                         (<HTMLInputElement>document.getElementById("Replacement"+filter_count)).value = 
860                                                                                         this.setting_items.word_replace_settings.Text_Filter_List[filter_count].Replacement;
861                 }
862         }
863