Organic Posts in Steemit Trending List - Header and Body added

Repository

https://github.com/firedreamgames/steemit_trending_organic
merged pull request :
https://github.com/firedreamgames/steemit_trending_organic/commit/ad2a550b6fd0ffaf5dfef1bae0050242225c438c

New Features

Organic Trending Post Viewer is a tool to see Steemit trending posts that did not pay to bid-bots to buy upvotes.
Major updates have been made to the tool as below :

• Before

The trending page only showing author and link.

• After

The trending page shows

• Header
• Body

The markdown information of the body is converted into HTML.
The user can see the summary of the trending post.

• Before

The bot selection was made only manually

• After

A "check-box" is added for the user to select the filtering from current trending users.
When the user "ticks" the check-box, the author is added in the bot list and removed from organic trending page.
The manual bot addition button is preserved.

Implementation of changes

• Dynamic quantity of Divs instead of static Divs

 var div = document.createElement("div");
        div.setAttribute("id", "div_" + i);
        div.setAttribute("class", "gwd-div-1eiz");
        div.style.top = (i * 310) + "px";

The divs are created with "createElement" according to the number of posts.

// append all the child objects to the div

        div.appendChild(input);
        div.appendChild(user);
        div.appendChild(picture);
        div.appendChild(head);
        div.appendChild(bod);
        div.appendChild(qty);
        div.appendChild(sbd);
        div.appendChild(sbd_tag);
        div.appendChild(qty_tag);
        div.appendChild(n_tag);
        div.appendChild(unwanted);

All the elements are appended to the divs with "div.appendChild"

• Check Box for voter addition to bot-list

var input = document.createElement("input");
        input.setAttribute("id", "input_" + i);
        input.setAttribute("type", "checkbox");
        input.setAttribute("class", "gwd-input-1eoi");
        input.addEventListener('click', masterEventHandler, false);

An EventListener is added to each created check-box

    // event handler for un-wanted voter selection
    function masterEventHandler() {
      var target = event.target.id;
      var index = target.split("_")[1];
      var in_text=document.getElementById("uw_" + index).innerHTML
      console.log("clicked" + event.target.id, index);
      if (document.getElementById(target).checked) {
        document.getElementById('button_div_1').style.display = "block";
        document.getElementById('button_div').enabled = "false";                           
        document.getElementById("p_" + index).innerHTML = in_text.strike();
        bots.push(in_text);

      }
      if (document.getElementById(target).checked != true) {
       var ind=bots.indexOf(in_text);
        bots.splice(ind,1);
        
       document.getElementById("p_" + index).innerHTML = in_text;       
      }

    }

The bot list addition is handled via masterEventHandler() function.

• Display of Body of the post in the Div

To convert the mark-down to HTML, an open source tool Remarkable is used.
GitHub
Remarkable is implemented in the JS code via CDN as below.

<script src="https://cdn.jsdelivr.net/remarkable/1.7.1/remarkable.min.js"></script>

The body markdown is converted into HTML as below

 var md = new Remarkable({
          html: true, // Enable HTML tags in source
          xhtmlOut: false, // Use '/' to close single tags (<br />)
          breaks: false, // Convert '\n' in paragraphs into <br>
          linkify: true, // Autoconvert URL-like text to links

          // Enable some language-neutral replacement + quotes beautification
          typographer: false,

          // Double + single quotes replacement pairs, when typographer enabled,
          // and smartquotes on. Set doubles to '«»' for Russian, '„“' for German.
          quotes: '“”‘’'
});
        
        
        var bod=result[i].body
        document.getElementById("pb_"+i).style.fontSize = "medium";
        document.getElementById("pb_"+i).innerHTML =md.render(bod).substring(0,500)+".....";
      }

Links

Organic_Trending_Tool : https://fdsteemtools.neocities.org/organic.html
GitHub : https://github.com/firedreamgames/steemit_trending_organic
GitHub for Remarkable: https://github.com/jonschlinkert/remarkable

Connect

@FireDream - Steemit
@firedream#3528 - Discord

Proof of Work