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>Very Large: </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="setQRProperties" 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="text">
 140                                 <br>
 141                                 <label>Use Offsite Archives: </label>
 142                                 <input name="ArchiveSettings" id="OffsiteArchive" type="text">
 143                                 <br>
 144                                 <input id="setTime" value="Set Archive" type="button">
 145                         `;
 146                 }
 147                                                                                                                                                                                 },
 148                 {Text : "View 『¥ Text』 Settings [Customizable]", ListenerFunc :         (a_id) => {
 149                         this.clearContainer();
 150
 151                         var disposable_container = document.createElement("DIV");
 152                         disposable_container.setAttribute("id", "disposable_container");
 153                         this.contents_div.appendChild(disposable_container);
 154                         disposable_container.innerHTML =
 155                         `
 156                                 <label>¥Quote Character: </label>
 157                                 <input name="quoteCharacter" id="quoteCharacter" type="text">
 158                                 <br>
 159                                 <label>RGB Hex Color: </label>
 160                                 <input name="HexColorYen" id="hexColorYen" type="text">
 161                                 <input name="HexColorYen" id="SelectColorYen" type="color">
 162                                 <br>
 163                                 <input id="setQuote" value="Set Quote Settings" type="button">
 164                         `;
 165 document.getElementById("SelectColorYen").addEventListener("input", (evt) => {
 166                         (<HTMLInputElement>document.getElementById("hexColorYen")).value =
 167                                 ((<HTMLInputElement>document.getElementById("SelectColorYen")).value);
 168 });
 169
 170
 171                 }
 172                                                                                                                                                                                 },
 173                 {Text : "View 『Kita』 Settings [Customizable]", ListenerFunc :           (a_id) => {
 174                         this.clearContainer();
 175
 176                         var disposable_container = document.createElement("DIV");
 177                         disposable_container.setAttribute("id", "disposable_container");
 178                         this.contents_div.appendChild(disposable_container);
 179                         disposable_container.innerHTML =
 180                         `
 181                                 <script src="http://jscolor.js"></script>
 182                                 <label>Kita Characters: </label>
 183                                 <input name="selectiveCharacter" id="selectiveCharacters" type="text">
 184                                 <br>
 185                                 <label>RGB Hex Color: </label>
 186                                 <input name="HexColorKita" id="HexColorKita" type="text">
 187                                 <input name="HexColorKita" id="SelectColorKita" type="color">
 188                                 <br>
 189                                 <input id="setCharacter" value="Set Quote Settings" type="button">
 190                         `;
 191                         document.getElementById("SelectColorKita").addEventListener("input", (evt) => {
 192                         (<HTMLInputElement>document.getElementById("HexColorKita")).value =
 193                                 ((<HTMLInputElement>document.getElementById("SelectColorKita")).value);
 194                         });
 195                 }
 196                                                                                                                                                                                 },
 197                 {Text : "Set 『Visible Password』 : ", ListenerFunc :                             (input_id) => {
 198                         var input = document.getElementById(input_id);
 199                         var is_check:boolean = !(<HTMLInputElement>input).checked;
 200                         (<HTMLInputElement>document.getElementById(input_id)).checked = is_check;
 201                         this.storeStates();
 202                 }                                                                                                                                                                       },
 203         ]
 204
 205         setting_items:any = {};
 206
 207         constructor(){
 208                 super();
 209                 this.retrieveStates();
 210                 this.init();
 211                 this.activate();
 212         }
 213
 214         setImageAdderFields(){
 215                 (<HTMLInputElement>document.getElementById("width_DIA")).value = this.setting_items.image_adder_settings.Width;
 216                 (<HTMLInputElement>document.getElementById("height_DIA")).value = this.setting_items.image_adder_settings.Height;
 217                 (<HTMLInputElement>document.getElementById("qr_width_DIA")).value = this.setting_items.image_adder_settings.QR_Width;
 218
 219                 if              ((<HTMLInputElement>document.getElementById("width_DIA")).value == "489") (<HTMLInputElement>document.getElementById("v_large_DIA")).checked = true;
 220                 else if((<HTMLInputElement>document.getElementById("width_DIA")).value == "400") (<HTMLInputElement>document.getElementById("large_DIA")).checked = true;
 221                 else if((<HTMLInputElement>document.getElementById("width_DIA")).value == "300") (<HTMLInputElement>document.getElementById("medium_DIA")).checked = true;
 222                 else if((<HTMLInputElement>document.getElementById("width_DIA")).value == "200") (<HTMLInputElement>document.getElementById("small_DIA")).checked = true;
 223         }
 224
 225         setImageAdderEventListeners():void{
 226                 (<HTMLInputElement>document.getElementById("v_large_DIA")).addEventListener("click", function(){
 227                         (<HTMLInputElement>document.getElementById("width_DIA")).value = "489";
 228                         (<HTMLInputElement>document.getElementById("height_DIA")).value = "489";
 229                 });
 230
 231                 (<HTMLInputElement>document.getElementById("large_DIA")).addEventListener("click", function(){
 232                         (<HTMLInputElement>document.getElementById("width_DIA")).value = "400";
 233                         (<HTMLInputElement>document.getElementById("height_DIA")).value = "400";
 234                 });
 235
 236                 (<HTMLInputElement>document.getElementById("medium_DIA")).addEventListener("click", function(){
 237                         (<HTMLInputElement>document.getElementById("width_DIA")).value = "300";
 238                         (<HTMLInputElement>document.getElementById("height_DIA")).value = "300";
 239                 });
 240
 241
 242                 (<HTMLInputElement>document.getElementById("small_DIA")).addEventListener("click", function(){
 243                         (<HTMLInputElement>document.getElementById("width_DIA")).value = "200";
 244                         (<HTMLInputElement>document.getElementById("height_DIA")).value = "200";
 245                 });
 246
 247
 248                 (<HTMLInputElement>document.getElementById("setQRProperties")).addEventListener("click", (evt) => {
 249                         this.storeStates();
 250                         this.clearContainer();
 251                         this.rebuildContainer();
 252                 });
 253
 254
 255
 256         }
 257
 258                 //*...THIS
 259         retrieveStates():void{
 260                 //values used to fill out data fields
 261                 this.setting_items.image_hiding_settings  = {Expiration_Time: localStorage.getItem("Expiration_Time"), MD5_List_FSE: localStorage.getItem("MD5_List_FSE")};
 262                 this.retrieveWordReplaceStates();
 263                 this.retrieveImageAdderStates();
 264                 this.setting_items.thread_rebuild_settings = (localStorage.getItem("tab-settings4") == 'true');
 265                 this.setting_items.yen_settings = (localStorage.getItem("tab-settings5") == 'true');
 266                 this.setting_items.kita_settings  = (localStorage.getItem("tab-settings6") == 'true');
 267                 this.setting_items.password_settings=(localStorage.getItem("pw_active"));
 268         }
 269
 270         retrieveWordReplaceStates():void{
 271                 //acquire text filter representation
 272                 var storage_index:number = 0;
 273                 var JSON_storage:any = {};
 274                 var storage_key:string;
 275                 var text_filters:any[] = [];
 276                 while(storage_index < window.localStorage.length) {
 277                         storage_index++;
 278                         storage_key = window.localStorage.key(storage_index);
 279                         JSON_storage[storage_key] = window.localStorage.getItem(storage_key);
 280                 }
 281                 var filters:string[] = Generics.getJSONPropertiesByKeyName(JSON_storage,"[0-9]+FLT");
 282                 filters.sort();
 283                 filters.forEach((filter) => {
 284                         text_filters.push(TextReplacer.formatFilterSettings(JSON_storage[filter]));
 285                 });
 286
 287                 var width = localStorage.getItem("width_DIA");
 288                 var height = localStorage.getItem("height_DIA");
 289                 var qr_width = localStorage.getItem("qr_width_DIA");
 290
 291                 this.setting_items.word_replace_settings = {Number_of_filters: localStorage.getItem("filter_quantity"), Text_Filter_List: text_filters};
 292         }
 293
 294         retrieveImageAdderStates():void{
 295                 this.setting_items.image_adder_settings =  {Width: localStorage.getItem("width_DIA"),
 296                                                                                                         Height: localStorage.getItem("height_DIA"),
 297                                                                                                         QR_Width: localStorage.getItem("qr_width_DIA")};
 298
 299                 if(this.setting_items.image_adder_settings.Height === null) this.setting_items.image_adder_settings.Height = 400;
 300                 if(this.setting_items.image_adder_settings.Width === null) this.setting_items.image_adder_settings.Width = 400;
 301                 if(this.setting_items.image_adder_settings.QR_Width === null) this.setting_items.image_adder_settings.QR_Width = 480;
 302
 303                 (<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;}";
 304                 (<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;}";
 305         }
 306
 307         storeStates():void{
 308                 //image settings
 309                 this.storeImageFilterStates();
 310                 //Text replace settings
 311                 this.storeTextFilterStates();
 312                 //Image Adder settings
 313                 this.storeImageAdderStates();
 314                 //Password replace settings
 315                 this.storePasswordStates()
 316
 317                 this.retrieveStates();
 318         }
 319
 320         storeImageFilterStates():void{
 321                 if(document.getElementById("Expiration_Time") !== null){
 322                         var time:any = document.getElementById("Expiration_Time");
 323                         var millisecond_time:number = parseInt((<HTMLInputElement>time).value) * Constants.MILLISECONDS_TO_THE_HOUR;
 324                         if (millisecond_time == 0 || millisecond_time === null || millisecond_time === undefined) millisecond_time = Constants.DEFAULT_HIDE_EXPIRATION_TIME;
 325                         localStorage.setItem("Expiration_Time", millisecond_time.toString());
 326                         var md5_filters = (<HTMLInputElement>document.getElementById("MD5_List_FSE")).value;
 327                         localStorage.setItem("MD5_List_FSE", md5_filters);
 328                         Generics.alert4ChanX("Image Settings Saved", "success", 3);
 329                 }
 330
 331         }
 332
 333         storeTextFilterStates():void{
 334                 if(document.getElementById("FilterRow0") !== null){
 335                         var f_row_moving:any = document.getElementById("FilterRow0");
 336                         var number_of_filters:number = 0;
 337                         var number_of_filters_actual:number = 0;
 338                         while(f_row_moving.nextSibling !== null){
 339                                 if((<HTMLInputElement>document.getElementById("Pattern" + number_of_filters)).value !== "") number_of_filters_actual++;
 340                                 number_of_filters++;
 341                                 f_row_moving = f_row_moving.nextSibling;
 342                         }
 343                         window.localStorage.setItem("filter_quantity", number_of_filters_actual.toString());
 344
 345                         for (var pattern_input:number = 0 ; pattern_input < number_of_filters; pattern_input++){
 346                                 var pattern_to_store:string = (<HTMLInputElement>document.getElementById("Pattern"+pattern_input)).value;
 347                                 var replacement_to_store:string = (<HTMLInputElement>document.getElementById("Replacement"+pattern_input)).value;
 348                                 var setting:string = 'g';
 349                                 try{
 350                                         if(pattern_to_store === "") {
 351                                                 localStorage.removeItem(pattern_input + "FLT");
 352                                                 continue;
 353                                         }
 354                                         else if(new RegExp("^\/.*\/\\D+$").test(pattern_to_store)){}
 355                                         else if (new RegExp("^\/.*\/$").test(pattern_to_store)){
 356                                                 pattern_to_store = pattern_to_store + setting;
 357                                         }
 358                                         else if(!new RegExp("^/.*\/\\D$").test(pattern_to_store)){
 359                                                 pattern_to_store = "/" + pattern_to_store + "/" + setting;
 360                                         }
 361                                          //test for breakages, try to cause error
 362                                          var error_test:any = new RegExp(
 363                                                                 pattern_to_store.substring(0, pattern_to_store.lastIndexOf("/") + 1),
 364                                                                 pattern_to_store.substring(pattern_to_store.lastIndexOf("/") + 1)
 365                                                                 );
 366                                  }
 367                                  catch(e){
 368                                         Generics.alert4ChanX("Unrecoverable Regex error on pattern " + pattern_input + " for " + pattern_to_store, "error", undefined);
 369                                         continue;
 370                                  }
 371                                 pattern_to_store = encodeURIComponent(pattern_to_store);
 372                                 var save_string:string = (<HTMLInputElement>document.getElementById("Active"+pattern_input)).checked + '=' + pattern_to_store + '=' + replacement_to_store;
 373                                 window.localStorage.setItem(pattern_input + "FLT", save_string);
 374                         }
 375                         Generics.alert4ChanX("Wordfilters Updated!", "success", 3);
 376                 }
 377         }
 378
 379         storeImageAdderStates():void{
 380                 var width:string = (<HTMLInputElement>document.getElementById("width_DIA")).value;
 381                 localStorage.setItem("width_DIA", width);
 382
 383                 var height:string = (<HTMLInputElement>document.getElementById("height_DIA")).value;
 384                 localStorage.setItem("height_DIA", height);
 385
 386                 var qr_width:string = (<HTMLInputElement>document.getElementById("qr_width_DIA")).value;
 387                 localStorage.setItem("qr_width_DIA", qr_width);
 388
 389
 390         }
 391
 392         storePasswordStates():void{
 393                         //password view settings
 394                 if(document.getElementById("check-settings6") !== null)
 395                 localStorage.setItem("pw_active", `${(<HTMLInputElement>document.getElementById("check-settings6")).checked}`);
 396         }
 397
 398         clearContainer():void{
 399                 var disposable = document.getElementById("disposable_container");
 400                 if(disposable !== null) this.contents_div.removeChild(disposable);
 401                 else this.contents_div.removeChild(this.ul_selection_start);
 402         }
 403
 404         rebuildContainer(){
 405                 this.contents_div.appendChild(this.ul_selection_start);
 406         }
 407
 408         init(){
 409                 this.settings_style.innerHTML = `.inputs{
 410                                                                                         background-color:rgb(200,200,200);margin:5px 7px;width:100px;
 411                                                                                 }
 412                                                                                 .SettingsBackground{
 413                                                                                         position:fixed;width:100%;height:100%;background-color:rgba(200,200,200,0.3);top:0;left:0; z-index:9
 414                                                                                 }
 415                                                                                 .settingsItem{
 416                                                                                         font-size:18px;list-style:katakana-iroha outside;padding:2px;color:#2e2345;
 417                                                                                 }
 418                                                                                 .settingsItem input{
 419                                                                                         transform: scale(1.2);
 420                                                                                 }
 421                                                                                 .settingsMain{
 422                                                                                         border:solid 1px black;position:fixed;background-color:rgb(200,200,200);left:40%;top:20%;margin-bottom:0; z-index:10
 423                                                                                 }
 424                                                                                 .closeIcon{
 425                                                                                         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
 426                                                                                 }
 427                                                                                 .titleStyle{
 428                                                                                         font-size: 20px;padding: 12px 0px 9px 22px
 429                                                                                 }
 430                                                                                 .footerStyle{
 431                                                                                         padding-left: 12px;
 432                                                                                 }
 433                                                                                 .contentStyle{
 434                                                                                         background-color:white;margin:0 0;padding:5px 25px;
 435                                                                                 }`;
 436
 437                 this.background_div.setAttribute('class', 'SettingsBackground');
 438                 this.background_div.setAttribute('id', 'SettingsBackground');
 439                 this.background_div.setAttribute('style','display:none');
 440
 441                 this.settings_div.setAttribute('class', 'settingsMain');
 442                 this.settings_div.setAttribute('id', 'settingsWindow');
 443                 this.settings_div.setAttribute('style', 'display:none;width:500px');
 444
 445                 this.close_link.setAttribute('href','javascript:void(0)');
 446
 447                 this.close_div.setAttribute('class', 'closeIcon');
 448                 this.close_div.addEventListener('click', evt => this.hideWindow());
 449
 450                 this.title_para.setAttribute('class', 'titleStyle');
 451
 452                 this.contents_div.setAttribute('class','contentStyle');
 453
 454                 this.end_para.setAttribute('class', 'footerStyle');
 455
 456                 this.generateList(this.contents_div);
 457         }
 458
 459         generateList(head_node:any):void{
 460                 this.list_items.forEach((list_item, index) => {
 461                         var li = document.createElement('LI');
 462                         li.setAttribute('class', 'settingsItem');
 463                         if(list_item.Text.indexOf('View') > -1){
 464                                 var a:any =  document.createElement('A');
 465                 a.setAttribute('href','javascript:void(0)');
 466                                 a.textContent = list_item.Text;
 467                                 var a_id = 'tab-settings' + index;
 468                                 a.setAttribute('ID', 'tab-settings' + index);
 469                                 var setup_func =(_a_id) => {
 470                                         a.addEventListener('click', (evt) => list_item.ListenerFunc(_a_id));
 471                                         li.appendChild(a);
 472                                         this.ul_selection_start.appendChild(li);
 473                                 }
 474                                 setup_func(a_id);
 475                         }
 476                         else{
 477                                 var label:any =  document.createElement('LABEL');
 478                                 label.textContent = list_item.Text;
 479                                 li.appendChild(label);
 480
 481                                 var input:any = document.createElement('INPUT');
 482                                 var input_id:string = 'check-settings' + index;
 483                                 input.setAttribute('TYPE','checkbox');
 484                                 input.setAttribute('ID', 'check-settings' + index);
 485                                 li.appendChild(input);
 486                                 this.ul_selection_start.appendChild(li);
 487                                 (<HTMLInputElement>input).checked = this.setting_items.password_settings == 'true';
 488                                 var setup_func = (_input_id) => {
 489                                         label.addEventListener('click',(evt) => list_item.ListenerFunc(_input_id));
 490                                 };
 491                                 setup_func(input_id);
 492                         }
 493                 });
 494         }
 495
 496         activate():void{
 497                 document.body.appendChild(this.settings_style);
 498                 this.background_div.addEventListener('click', evt => this.hideWindow());
 499                 document.body.appendChild(this.background_div);
 500                 this.settings_div.appendChild(this.close_link);
 501                 this.close_link.appendChild(this.close_div);
 502                 this.title_para.appendChild(this.title_text);
 503                 this.settings_div.appendChild(this.title_para);
 504                 this.settings_div.appendChild(this.contents_div);
 505                 this.end_para.appendChild(this.end_text);
 506                 this.settings_div.appendChild(this.end_para);
 507                 document.body.appendChild(this.settings_div);
 508         }
 509         decideAction(node:any):void{}
 510
 511         getSettingsArr():Object{
 512                 return this.setting_items;
 513         }
 514
 515         displayWindow():void{
 516                 this.background_div.style.display = 'block';
 517                 this.settings_div.style.display = 'block';
 518                 this.rebuildContainer();
 519         }
 520
 521         hideWindow():void{
 522                 this.background_div.style.display = 'none';
 523                 this.settings_div.style.display = 'none';
 524                 this.clearContainer();
 525         }
 526
 527         filterWindow(disposable_container:any):void{
 528                 var filter_table:any = document.createElement("table");
 529                 filter_table.setAttribute("style", "text-align:center;");
 530                 filter_table.setAttribute("id", "filter_table");
 531                 disposable_container.appendChild(filter_table);
 532
 533                 var table_row:any = document.createElement("tr");
 534                 filter_table.appendChild(table_row);
 535                 var table_head_active:any =  document.createElement("th");
 536                 var head_text_active:any = document.createTextNode("Active");
 537                 table_head_active.appendChild(head_text_active);
 538                 filter_table.appendChild(table_head_active);
 539                 var table_head_pattern:any =  document.createElement("th");
 540                 var headTextPattern:any = document.createTextNode("Pattern");
 541                 table_head_pattern.appendChild(headTextPattern);
 542                 filter_table.appendChild(table_head_pattern);
 543                 var table_head_replacement:any =  document.createElement("th");
 544                 var head_text_replacement:any = document.createTextNode("Replacement");
 545                 table_head_replacement.appendChild(head_text_replacement);
 546                 filter_table.appendChild(table_head_replacement);
 547
 548                 //Create the pattern table
 549                 //loop to create rows
 550                 var number_of_filters:number = parseInt(this.setting_items.word_replace_settings.number_of_filters);
 551                 if (number_of_filters === 0 || isNaN(number_of_filters)) number_of_filters = 6;
 552                 for (var i = 0; i <  number_of_filters ; i++){
 553                         var table_row_contents:any = document.createElement("tr");
 554                         table_row_contents.setAttribute("id", "FilterRow" + i);
 555
 556                         var table_data_active:any =  document.createElement("td");
 557                         var table_checkbox_active:any = document.createElement("input");
 558                         table_checkbox_active.setAttribute("type", "checkbox");
 559                         table_checkbox_active.setAttribute("id", "Active" + i);
 560                         table_data_active.appendChild(table_checkbox_active);
 561                         table_row_contents.appendChild(table_data_active);
 562
 563                         var table_data_pattern:any =  document.createElement("td");
 564                         var table_input_pattern:any = document.createElement("input");
 565                         table_input_pattern.setAttribute("class", "inputs");
 566                         table_input_pattern.setAttribute("id", "Pattern" + i);
 567                         table_data_pattern.appendChild(table_input_pattern);
 568                         table_row_contents.appendChild(table_data_pattern);
 569
 570                         var table_data_replacement:any =  document.createElement("td");
 571                         var table_input_replacement:any =  document.createElement("input");
 572                         table_input_replacement.setAttribute("class", "inputs");
 573                         table_input_replacement.setAttribute("id", "Replacement" + i);
 574                         table_data_replacement.appendChild(table_input_replacement);
 575                         table_row_contents.appendChild(table_data_replacement);
 576
 577                         filter_table.appendChild(table_row_contents);
 578                 }
 579
 580                 var table_last_contents:any = document.createElement("tr");
 581
 582                 var table_add_collumn:any =  document.createElement("td");
 583                 var table_add_row_button:any = document.createElement("input");
 584                 var table_subtract_row_button:any = document.createElement("input");
 585                 table_subtract_row_button.setAttribute("type", "button");
 586                 table_subtract_row_button.setAttribute("value", "-");
 587                 table_subtract_row_button.setAttribute("style", "padding: 7px 0; margin:5px 0;");
 588                 table_add_collumn.appendChild(table_subtract_row_button);
 589                 table_subtract_row_button.addEventListener("click", (evt) => this.filterRemoveRow());
 590                 table_add_row_button.setAttribute("type", "button");
 591                 table_add_row_button.setAttribute("value", "+");
 592                 table_add_row_button.setAttribute("style", "padding: 7px 0; margin:5px 0;");
 593                 table_add_collumn.appendChild(table_add_row_button);
 594                 table_add_row_button.addEventListener("click", (evt) => this.filterAddRow());
 595
 596                 table_last_contents.appendChild(table_add_collumn);
 597
 598                 var table_set_collumn:any =  document.createElement("td");
 599                 var table_confirm_button:any = document.createElement("input");
 600                 table_confirm_button.setAttribute("type", "button");
 601                 table_confirm_button.setAttribute("id", "table_confirm_button");
 602                 table_confirm_button.setAttribute("value", "Set Replacements");
 603                 table_confirm_button.setAttribute("style", "padding: 7px 0; margin:5px 0;");
 604
 605                 //event listeners
 606                 table_confirm_button.addEventListener("click", (evt) => {
 607                         this.storeStates();
 608                         this.clearContainer();
 609                         this.rebuildContainer();
 610                 });
 611
 612                 table_set_collumn.appendChild(table_confirm_button);
 613                 table_last_contents.appendChild(table_set_collumn);
 614
 615                 var table_close_collumn:any = document.createElement("td");
 616                 var table_close_button:any = document.createElement("input");
 617                 table_close_button.setAttribute("type", "button");
 618                 table_close_button.setAttribute("value", "Close Without Saving");
 619                 table_close_button.setAttribute("style", "padding: 7px 0; margin:5px 0;");
 620                 table_close_button.addEventListener("click", (evt) => {
 621                         this.clearContainer();
 622                         this.rebuildContainer();
 623                 });
 624                 table_close_collumn.appendChild(table_close_button);
 625                 table_last_contents.appendChild(table_close_collumn);
 626
 627                 filter_table.appendChild(table_last_contents);
 628         }
 629
 630         filterAddRow():void{
 631                 var number_of_filters:number = parseInt(this.setting_items.word_replace_settings.number_of_filters);
 632
 633                 var filter_table:any = document.getElementById("filter_table");
 634                 filter_table.deleteRow(number_of_filters + 1);
 635                 number_of_filters++;
 636
 637                 var table_row_contents:any = document.createElement("tr");
 638                 table_row_contents.setAttribute("id", "FilterRow" +  (number_of_filters - 1));
 639
 640                 var table_data_active:any =  document.createElement("td");
 641                 var table_checkbox_active:any = document.createElement("input");
 642                 table_checkbox_active.setAttribute("type", "checkbox");
 643                 table_checkbox_active.setAttribute("id", "Active" + (number_of_filters - 1));
 644                 table_data_active.appendChild(table_checkbox_active);
 645                 table_row_contents.appendChild(table_data_active);
 646
 647                 var table_data_pattern:any =  document.createElement("td");
 648                 var table_input_pattern:any = document.createElement("input");
 649                 table_input_pattern.setAttribute("class", "inputs");
 650                 table_input_pattern.setAttribute("id", "Pattern" + (number_of_filters - 1));
 651                 table_data_pattern.appendChild(table_input_pattern);
 652                 table_row_contents.appendChild(table_data_pattern);
 653
 654                 var table_data_replacement:any =  document.createElement("td");
 655                 var table_input_replacement:any =  document.createElement("input");
 656                 table_input_replacement.setAttribute("class", "inputs");
 657                 table_input_replacement.setAttribute("id", "Replacement" + (number_of_filters - 1));
 658                 table_data_replacement.appendChild(table_input_replacement);
 659                 table_row_contents.appendChild(table_data_replacement);
 660
 661                 filter_table.appendChild(table_row_contents);
 662
 663                 var table_last_contents:any = document.createElement("tr");
 664
 665                 var table_add_collumn:any =  document.createElement("td");
 666                 var table_add_row_button:any = document.createElement("input");
 667                 var table_subtract_row_button:any = document.createElement("input");
 668                 table_subtract_row_button.setAttribute("type", "button");
 669                 table_subtract_row_button.setAttribute("value", "-");
 670                 table_subtract_row_button.setAttribute("style", "padding: 7px 0; margin:5px 0;");
 671                 table_add_collumn.appendChild(table_subtract_row_button);
 672                 table_subtract_row_button.addEventListener("click", (evt) => this.filterRemoveRow());
 673                 table_add_row_button.setAttribute("type", "button");
 674                 table_add_row_button.setAttribute("value", "+");
 675                 table_add_row_button.setAttribute("style", "padding: 7px 0; margin:5px 0;");
 676                 table_add_collumn.appendChild(table_add_row_button);
 677                 table_add_row_button.addEventListener("click", (evt) => this.filterAddRow());
 678
 679                 table_last_contents.appendChild(table_add_collumn);
 680
 681                 var table_set_collumn:any =  document.createElement("td");
 682                 var table_confirm_button:any = document.createElement("input");
 683                 table_confirm_button.setAttribute("type", "button");
 684                 table_confirm_button.setAttribute("id", "table_confirm_button");
 685                 table_confirm_button.setAttribute("value", "Set Replacements");
 686                 table_confirm_button.setAttribute("style", "padding: 7px 0; margin:5px 0;");
 687                 //event listeners
 688                 table_confirm_button.addEventListener("click", (evt) => {
 689                         this.storeStates();
 690                         this.clearContainer();
 691                         this.rebuildContainer();
 692                 });
 693
 694                 table_set_collumn.appendChild(table_confirm_button);
 695                 table_last_contents.appendChild(table_set_collumn);
 696
 697                 var table_close_collumn:any = document.createElement("td");
 698                 var table_close_button:any = document.createElement("input");
 699                 table_close_button.setAttribute("type", "button");
 700                 table_close_button.setAttribute("value", "Close Menu");
 701                 table_close_button.setAttribute("style", "padding: 7px 0; margin:5px 0;");
 702                 table_close_button.addEventListener("click", (evt) => {
 703                         this.clearContainer();
 704                         this.rebuildContainer();
 705                 });
 706                 table_close_collumn.appendChild(table_close_button);
 707                 table_last_contents.appendChild(table_close_collumn);
 708
 709                 filter_table.appendChild(table_last_contents);
 710         }
 711
 712         filterRemoveRow():void{
 713                 var number_of_filters:number = parseInt(this.setting_items.word_replace_settings.number_of_filters);
 714
 715                 var filter_table:any = document.getElementById("filter_table");
 716                 if(number_of_filters != 0){
 717                         filter_table.deleteRow(number_of_filters);
 718                         number_of_filters--;
 719                 }
 720         }
 721
 722         filterSetTable():void{
 723                 var filter_length = this.setting_items.word_replace_settings.Text_Filter_List.length;
 724                 for (var filter_count:number = 0 ; filter_count < filter_length ; filter_count++){
 725                         if(
 726                                 this.setting_items.word_replace_settings.Text_Filter_List[filter_count].Active === null ||
 727                                 this.setting_items.word_replace_settings.Text_Filter_List[filter_count].Regex === null ||
 728                                 this.setting_items.word_replace_settings.Text_Filter_List[filter_count].Replacement === null) return;
 729
 730                         if(this.setting_items.word_replace_settings.Text_Filter_List[filter_count].Active === "true"){
 731                                 (<HTMLInputElement>document.getElementById("Active"+filter_count)).checked = true;
 732                         }
 733                         else{
 734                                 (<HTMLInputElement>document.getElementById("Active"+filter_count)).checked = false;
 735                         }
 736                         (<HTMLInputElement>document.getElementById("Pattern"+filter_count)).value =
 737                                                                                         this.setting_items.word_replace_settings.Text_Filter_List[filter_count].Regex;
 738                         (<HTMLInputElement>document.getElementById("Replacement"+filter_count)).value =
 739                                                                                         this.setting_items.word_replace_settings.Text_Filter_List[filter_count].Replacement;
 740                 }
 741         }
 742
 743 }