src/settings-window.ts

   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                         }
  47
  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;
 186
 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();
 216
 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;
 243
 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                 });
 255
 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                 });
 265
 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                 });
 278
 279
 280
 281         }
 282
 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
 465 }
 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                                                                                 }`;
 535
 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)');
 545
 546                 this.close_div.setAttribute('class', 'closeIcon');
 547                 this.close_div.addEventListener('click', evt => this.hideWindow());
 548
 549                 this.title_para.setAttribute('class', 'titleStyle');
 550
 551                 this.contents_div.setAttribute('class','contentStyle');
 552
 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());
 589
 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);
 644
 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);
 660
 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);
 669
 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);
 676
 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);
 683
 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);
 690
 691                         filter_table.appendChild(table_row_contents);
 692                 }
 693
 694                 var table_last_contents:any = document.createElement("tr");
 695
 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());
 709
 710                 table_last_contents.appendChild(table_add_collumn);
 711
 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);
 728
 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);
 740
 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);
 764
 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);
 771
 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);
 778
 779                 filter_table.appendChild(table_row_contents);
 780
 781                 var table_last_contents:any = document.createElement("tr");
 782
 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());
 796
 797                 table_last_contents.appendChild(table_add_collumn);
 798
 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);
 814
 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);
 826
 827                 filter_table.appendChild(table_last_contents);
 828         }
 829
 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         }
 842
 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
 864 }