src/image-hider.ts

   1
   2 class ImageHider extends FeatureInterface{
   3         blank_png:string = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAACXBIWXMAALiMAAC4jAHM9rsvAAAAG3RFWHRTb2Z0d2FyZQBDZWxzeXMgU3R1ZGlvIFRvb2zBp+F8AAAAo0lEQVR42u3RAQ0AAAjDMO5f9LFBSCdhTdvRnQIEiIAAERAgAgJEQIC4AERAgAgIEAEBIiBABERAgAgIEAEBIiBABERAgAgIEAEBIiBABERAgAgIEAEBIiBABERAgAgIEAEBIiBABERAgAgIEAEBIiBABERAgAgIEAEBIiBABERAgAgIEAEBIiBABERAgAgIEAEBIiBABAQIECACAkRAgAjI9xbzUCtI4axs4wAAAABJRU5ErkJggg==`;
   4
   5         hide_expiration_time:number;
   6         threads_to_hide:string[];
   7         md5_filters_arr:string[];
   8
   9         constructor(){
  10                 super();
  11                 this.retrieveStates();
  12                 this.init();
  13                 this.activate();
  14         }
  15
  16         //retrieve from memory the hidden images
  17         //Images are stored in memory as f<ID_NUMBER>IMG and recalled using the storage_key
  18         //Function makes a check to see if the hiding time limit for the thread has expired or not.
  19         //Note: Must have the DOM itterate through before retrieval
  20         retrieveStates():void{
  21                 var storage_position:number = 0;
  22         var JSON_storage:any = {};/*;any bypasses dot notation issues on objects*/
  23                 var storage_key:string;
  24                 var local_store_size = window.localStorage.length;
  25                 while(storage_position < local_store_size) {
  26                         storage_key = window.localStorage.key(storage_position);
  27                         JSON_storage[storage_key] = window.localStorage.getItem(storage_key);
  28                         storage_position++;
  29                 }
  30                 this.threads_to_hide = Generics.getJSONPropertiesByKeyName(JSON_storage,'[0-9]+IMG');
  31                 //aquire each time to check for changes
  32                 this.hide_expiration_time =  parseInt(JSON_storage.Expiration_Time);
  33                 if(this.hide_expiration_time === null) this.hide_expiration_time = Constants.DEFAULT_HIDE_EXPIRATION_TIME;
  34                 var md5_filters = JSON_storage.MD5_List_FSE;
  35                 if(md5_filters !== undefined && md5_filters !== null){
  36                         this.md5_filters_arr = md5_filters.split('\n');
  37                         //remove trailing and starting slash
  38                         this.md5_filters_arr.forEach((md5, index) => {
  39                                 md5 = md5.trim();
  40                                 this.md5_filters_arr[index] = md5.substring(1, md5.length - 1);
  41                         });
  42                 }
  43         }
  44
  45         storeStates(...item_pairs:string[]):void{
  46                 window.localStorage.setItem(item_pairs[0], item_pairs[1]);
  47         }
  48
  49         init():void{    }
  50
  51         //hide image onclick listener.
  52         //Method 404's a given image. This 404'ing allows image dissabling to be toggled on and off.
  53         //Post number associated with the image is stored in local storage.
  54         hideOnClick(event:any):boolean{
  55                 var is_hidden =  event.target.src.substring(21, 29) == ",iVBORw0";
  56                 var hide_group_id:string;
  57                 if((event.ctrlKey && event.shiftKey) && !is_hidden){
  58                         event.preventDefault();
  59                         event.stopPropagation();
  60                         hide_group_id = event.target.getAttribute('hide-grouping');
  61                         this.storeStates(hide_group_id, `${Date.now()}`);
  62                         [].slice.call(document.querySelectorAll('img[hide-grouping="' + hide_group_id + '"]')).forEach((image_node) => {
  63                                 image_node.setAttribute('hidden-src', image_node.src);
  64                                 image_node.src = this.blank_png;
  65                         });
  66                 }
  67                 else if(event.ctrlKey && event.shiftKey){
  68                         event.preventDefault();
  69                         event.stopPropagation();
  70                         hide_group_id = event.target.getAttribute('hide-grouping');
  71                         window.localStorage.removeItem(hide_group_id);
  72                         event.target.src = event.target.getAttribute('hidden-src');
  73                         [].slice.call(document.querySelectorAll('img[hide-grouping="' + hide_group_id + '"]')).forEach((image_node) => {
  74                                 image_node.src = image_node.getAttribute('hidden-src');
  75                         });
  76                 }
  77                 this.retrieveStates();
  78                 return true;
  79         }
  80
  81         decideAction(node:any):void{
  82                 //tagname is always upper in HTML, in xml it's displayed as written.
  83                 if(node.tagName  === 'IMG' || node.tagName  === 'VIDEO'){
  84                         if(node.id === "ihover"){
  85                                 this.hideHoverImageNode(node);
  86                                 return;
  87                         }
  88                         if(node.getAttribute('data-md5') !== null){
  89                                 this.hideImageNode(node);
  90                         }
  91                 }
  92         }
  93                 //Activate
  94         activate():void{
  95                 console.log("4F-FSE: ImageHider Active");
  96         }
  97
  98         hideImageNode(image_node:any){
  99                 var sister_node:any = image_node.parentNode.parentNode.parentNode.getElementsByClassName('catalog-thumb')[0]; // the catalog sister to index
 100                 var sister_node_non_exist = false;
 101                 if(sister_node === undefined){
 102                         sister_node_non_exist = true;
 103                 }
 104                 var image_node_already_run = false;
 105                 if(/\d+IMG/.test(image_node.getAttribute('hide-grouping'))){
 106                         image_node_already_run = true;
 107                         if(!sister_node_non_exist){
 108                                 if(/\d+IMG/.test(sister_node.getAttribute('hide-grouping'))){
 109                                         return;
 110                                 }
 111                         }
 112                 }
 113
 114                 if(!image_node_already_run) image_node.setAttribute('hide-grouping', image_node.parentNode.parentNode.id.substring(1) + 'IMG');
 115                 if(!sister_node_non_exist)sister_node.setAttribute('hide-grouping', image_node.parentNode.parentNode.id.substring(1) + 'IMG');
 116
 117                 if(!image_node_already_run) image_node.addEventListener('click', (evt) => this.hideOnClick(evt));
 118                 if(!sister_node_non_exist) sister_node.addEventListener('click',(evt) => this.hideOnClick(evt));
 119
 120                 var threadstore_len = this.threads_to_hide.length;
 121                 var node_group_id = image_node.getAttribute('hide-grouping');
 122
 123                 for(let thread = 0 ; thread < threadstore_len; thread++){
 124                         if(node_group_id == this.threads_to_hide[thread]){
 125                                 if(!image_node_already_run){
 126                                         image_node.setAttribute('hidden-src', image_node.src);
 127                                         image_node.src = this.blank_png;
 128                                 }
 129                                 if(!sister_node_non_exist){
 130                                         sister_node.setAttribute('hidden-src', sister_node.src);
 131                                         sister_node.src = this.blank_png;
 132                                 }
 133                                 return;
 134                         }
 135                 }
 136                 //index node holds the MD5
 137                 var node_md5:string = image_node.getAttribute('data-md5');
 138                 if(this.md5_filters_arr !== undefined){
 139                         var md5_filters_arr_len = this.md5_filters_arr.length;
 140                         for(var md5:number = 0 ; md5 < md5_filters_arr_len; md5++){
 141                                 if(node_md5 == this.md5_filters_arr[md5]){
 142                                         this.threads_to_hide.push();
 143                                         if(!image_node_already_run){
 144                                                 image_node.setAttribute('hidden-src', image_node.src);
 145                                                 image_node.src = this.blank_png;
 146                                         }
 147                                         if(!sister_node_non_exist){
 148                                                 sister_node.setAttribute('hidden-src', sister_node.src);
 149                                                 sister_node.src = this.blank_png;
 150                                         }
 151                                         return;
 152                                 }
 153                         }
 154                 }
 155         }
 156
 157         hideHoverImageNode(image_node:any):void{
 158                 var unprocessed_id:string = image_node.getAttribute('data-full-i-d');
 159                 var proccessed_id:string = unprocessed_id.substring(unprocessed_id.indexOf('.') + 1);
 160                 var image_node_id:string = proccessed_id + 'IMG';
 161                 if(image_node === undefined) return;
 162
 163                 for(var thread = 0, threadstore_len:number = this.threads_to_hide.length ; thread < threadstore_len; thread++){
 164                         if(image_node_id == this.threads_to_hide[thread]){
 165                                 image_node.removeAttribute('src');
 166                                 return;
 167                         }
 168                 }
 169                 //thread node holds the MD5
 170                 var node_md5:string;
 171                 // if(is_embeded_post) node_md5 = image_node.getAttribute('data-md5');
 172                 /*else */node_md5 = document.getElementById('f' + proccessed_id).getElementsByTagName('IMG')[0].getAttribute('data-md5');
 173                 if(this.md5_filters_arr !== undefined){
 174                         for(var md5:number = 0 , md5_filters_arr_len:number = this.md5_filters_arr.length; md5 < md5_filters_arr_len; md5++){
 175                                 if(node_md5 == this.md5_filters_arr[md5]){
 176                                         image_node.removeAttribute('src');
 177                                         return;
 178                                 }
 179                         }
 180                 }
 181         }
 182 }