Updating Show Raw Button



  • Continuing the discussion from Updating the editor buttons:

    @boomzilla said:

    Below is the current (Discourse v1.4 Beta 8) code for the custom editor buttons. What we're doing has been broken in future (we're two beta releases behind as I write this). We need to upgrade it based on this advice:

    And now for the show raw button:

    // Show Raw button
    //http://what.thedailywtf.com/t/expanding-replies-hides-raw-button/7399/47?u=pjh
    (function(){
      //@Monarch at what.thedailywtf.com
      //Button is redelcared and sligthly modified due to new scope. it can be further simplified.
      Button = function(action, label, icon, opts) {
        this.action = action;
        this.label = label;
    
        if (typeof icon === "object") { this.opts = icon; } else { this.icon = icon;}
        this.opts = this.opts || opts || {};
    
        this.render = function (buffer){
            var opts = this.opts;
            buffer.push("<button title=\"" + this.label + "\"");
            if (opts.className) { buffer.push(" class=\"" + opts.className + "\""); }
            buffer.push(" data-action=\"" + this.action + "\">");
            if (this.icon) { buffer.push("<i class=\"fa fa-" + this.icon + "\"></i>"); }
            buffer.push("</button>");
        }
      };
    
    
    
        /* Remove this clause after update from v1.4.0.beta4
            https://what.thedailywtf.com/t/fa-code-will-break-next-upgrade/49921/9?u=pjh
        */
        if (typeof Discourse.PostMenuView == 'function'){
            Discourse.PostMenuComponent = Discourse.PostMenuView;
        }
    
      Discourse.PostMenuComponent.reopen({
          buttonForRaw:function(post){
              return new Button('raw', 'view raw post', 'code', {className: "raw-button", disabled: false});
          },
    
          clickRaw:function(post){
              var topicID = post.topic_id,
                  postID =  post.post_number,
                  postArea = $("article[data-post-id='"+post.id+"'] div.contents"),
                  $rawButton = $(this.element).find("button.raw-button"),
                  styles = [{backgroundColor: 'transparent', color: '#A7A7A7'},{backgroundColor: '#08C', color: '#FFF'}];
    
              if (postArea.find('.tdwtf-raw-area').length == 0){
                  var postArea_raw_content = $('<pre class="tdwtf-raw-area"></pre>'),
                      cooked = postArea.find('.cooked');
    
                      cooked.after(postArea_raw_content);
    
                  $.get('/raw/' + topicID + '/' + postID) .done(function (content) {
                      postArea_raw_content.addClass("active");
                      $rawButton.css(styles[1]);//active
                      postArea_raw_content.css({"white-space":"pre-wrap", 'border':'2px dashed #E7E7E7','padding':'3px'}) .text(content);
                      cooked.hide();
                  });
              } else {
                  var postArea_raw_content = postArea.find('.tdwtf-raw-area');
                  if ( !postArea_raw_content.hasClass("active") ){  //raw no active
                      postArea.find('.cooked').hide();  
                      postArea.find('.tdwtf-raw-area').show();
                      postArea_raw_content.addClass("active");
                      $rawButton.css(styles[1]);
                  } else{
                      postArea.find('.cooked').show();  
                      postArea.find('.tdwtf-raw-area').hide();
                      postArea_raw_content.removeClass("active");
                      $rawButton.css(styles[0]);
                  }
              }
          }
      });    
    })();
    

  • Winner of the 2016 Presidential Election

    Hey, since our cool buttons at all basically Javascript UserScripts, but already have all the logic inside, why don't we take them over to meta.d and see if a kind soul over there converts them for us?

    I don't know how much work that would be.
    Paging @cpradio for evaluation.

    Filed under : raw button is the best thing this discourse had that others don't. It's that good imo

    addendum: I just realized I didn't actually say what I wanted to say. What I meant was convert them into real plugins (Ruby/Rails) instead of JS-plugins. Then again, they probably break just as likely... So meh...


  • Winner of the 2016 Presidential Election

    @boomzilla said:

    ```javascript
    // [...] redelcared and sligthly [...]. it [...]

    
    `s/redelcared/redeclared/`, `s/sligthly/slightly/`, `s/it/It/`
    
    @boomzilla <a href="/t/via-quote/50913/1">said</a>:<blockquote>```javascript
        if (typeof icon === "object") { this.opts = icon; } else { this.icon = icon;}
    ```</blockquote>
    
    What's the point of this? Just a copy-paste relic from the original Button declaration implied in the comment?
    <i>/me reads linked thread</i>
    Aha, yes it is.
    @boomzilla <a href="/t/via-quote/50913/1">said</a>:<blockquote>```javascript
            if (this.icon) { buffer.push("<i class=\"fa fa-" + this.icon + "\"></i>"); }
    ```</blockquote>
    
    :wtf: Why is that stuck in an &lt;i&gt; tag?
    Perhaps it should use &lt;div&gt; like the bookmark icon is currently using:
    ```javascript
            if (this.icon) { buffer.push("<div class=\"fa fa-" + this.icon + "\"></div>"); }
    

    I changed i to div in developer tools for Chrome for the like icon, and it worked fine.

    @boomzilla said:

    ```javascript
    if (postArea.find('.tdwtf-raw-area').length == 0){

    That's the best way to find if something exists in this case?
    
    @boomzilla <a href="/t/via-quote/50913/1">said</a>:<blockquote>```javascript
                      $rawButton.css(styles[1]);//active
    ```</blockquote>
    Hooray for magic numbers!
    
    @boomzilla <a href="/t/via-quote/50913/1">said</a>:<blockquote>```javascript
                  if ( !postArea_raw_content.hasClass("active") ){  //raw no active
    ```</blockquote>
    `s/no/not/`
    
    <small><small>Also, comment spacing could stand to be normalized.</small></small>
    <hr />
    
    All that aside, I'm happy I followed and understood (I think) all of that.


  • Do we know if everything breaks with the update?

    Riking's forum is on latest, and the raw button works from the code above.


  • Winner of the 2016 Presidential Election

    @Dreikin said:

    @boomzilla said:
    ```javascript
    if (this.icon) { buffer.push("<i class="fa fa-" + this.icon + "">"); }

    
    :wtf: Why is that stuck in an &lt;i&gt; tag?
    Perhaps it should use &lt;div&gt; like the bookmark icon is currently using:
    ```javascript
            if (this.icon) { buffer.push("<div class=\"fa fa-" + this.icon + "\"></div>"); }
    

    I changed i to div in developer tools for Chrome for the like icon, and it worked fine.

    Continuing this line of thought, I took it to meta.discourse:

    tl;dr: we can probably change that function like this:

        this.render = function (buffer){
            var opts = this.opts;
            buffer.push("<button title=\"" + this.label + "\"");
    -       if (opts.className) { buffer.push(" class=\"" + opts.className + "\""); }
    +       if (this.icon || opts.className) {
    +           buffer.push(" class=\"");
    +           if (this.icon) { buffer.push("fa fa-" + this.icon + " "); }
    +           if (opts.className) { buffer.push(opts.className); }
    +           buffer.push("\"");
    +       }
            buffer.push(" data-action=\"" + this.action + "\">");
    -       if (this.icon) { buffer.push("<i class=\"fa fa-" + this.icon + "\"></i>"); }
            buffer.push("</button>");
        }
    

    or this:

        this.render = function (buffer){
            var opts = this.opts;
            buffer.push("<button title=\"" + this.label + "\"");
           if (opts.className) { buffer.push(" class=\"" + opts.className + "\""); }
            buffer.push(" data-action=\"" + this.action + "\">");
    -       if (this.icon) { buffer.push("<i class=\"fa fa-" + this.icon + "\"></i>"); }
    +       if (this.icon) { buffer.push("<div class=\"fa fa-" + this.icon + "\"></div>"); }
            buffer.push("</button>");
        }
    


  • This should be all the patch you need @boomzilla :

    -/* Remove this clause after update from v1.4.0.beta4
    -    https://what.thedailywtf.com/t/fa-code-will-break-next-upgrade/49921/9?u=pjh
    -*/
    -if (typeof Discourse.PostMenuView == 'function'){
    -  Discourse.PostMenuComponent = Discourse.PostMenuView;
    -}
    -Discourse.PostMenuComponent.reopen({
    +var PostMenuComponent = require('discourse/components/post-menu');
    +PostMenuComponent.reopen({
    

    @Dreikin said:

    Why is that stuck in an <i> tag?

    The i stands for icon and it's what FontAwesome recommends IIRC. Also it's an inline tag, not a block tag like div is - you would want to replace it with span instead.

    I do recall correctly:


  • Discourse touched me in a no-no place

    @riking said:

    The i stands for icon and it's what FontAwesome recommends IIRC.

    :wtf:



  • He's right about the last bit at least.


  • Discourse touched me in a no-no place

    An empty span wouldn't have attracted that from me. Repurposing an innocent HTML tag that already has well-known semantics though…



  • I know, I was just pointing out that FontAwesome recommend it even if it is daft.


  • Discourse touched me in a no-no place

    And I was specifically picking up on the daftness.



  • @Kuro said:

    Paging @cpradio for evaluation.

    ...

    addendum: I just realized I didn't actually say what I wanted to say. What I meant was convert them into real plugins (Ruby/Rails) instead of JS-plugins. Then again, they probably break just as likely... So meh...

    So converting it would be relatively trivial, but yes, it would still break in the future with potential Ember upgrades and/or Discourse restructures.

    I'm also fairly certain there is a plugin outlet in that area, so getting the button there shouldn't be difficult either. If you want it as an actual plugin, I can throw it on one of my to do lists (might not get done for a couple of weeks though, as I just got slammed at work).



  • @riking said:

    This should be all the patch you need @boomzilla :

    -/* Remove this clause after update from v1.4.0.beta4

    Couple of things...it seems to want PostMenuComponent.default.reopen, otherwise I get an error about reopen not being a function. OK, fair enough...but I would have expected this to effect the page if I ran it from the dev console. It doesn't seem to.



  • Oops, yes, should have been require(...).default;.

    Did you make sure to load a new topic after running it?



  • @riking said:

    Did you make sure to load a new topic after running it?

    Yes, I did.



  • I think a discodev just asked you if you tested a code change... :scream:



  • @Kuro said:

    Hey, since our cool buttons at all basically Javascript UserScripts, but already have all the logic inside, why don't we take them over to meta.d and see if a kind soul over there converts them for us?

    I don't know how much work that would be. Paging @cpradio for evaluation.

    Here you go


  • Discourse touched me in a no-no place

    @Kuro said:

    Hey, since our cool buttons at all basically Javascript UserScripts, but already have all the logic inside, why don't we take them over to meta.d and see if a kind soul over there converts them for us?

    It's a good thing you didn't start that post "Hey Lazyweb," or you'd've gotten nothing but useless and/or sarcastic replies, like so: http://www.jwz.org/blog/2011/08/dear-lazyweb/


Log in to reply
 

Looks like your connection to What the Daily WTF? was lost, please wait while we try to reconnect.