Updating Show Raw Button

boomzilla

Continuing the discussion from Updating the editor buttons:

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]);
              }
          }
      }
  });    
})();

Kuro

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...

Dreikin

@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.

loopback0

Do we know if everything breaks with the update?

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

Dreikin

@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:
https://meta.discourse.org/t/shouldnt-post-controls-buttons-use-div-instead-of-i/32847?u=dreikin

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>");
    }

riking

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:

https://meta.discourse.org/t/shouldnt-post-controls-buttons-use-div-instead-of-i/32847/11?u=riking

dkf

@riking said:

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

loopback0

He's right about the last bit at least.

dkf

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

loopback0

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

dkf

And I was specifically picking up on the daftness.

cpradio

@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).

boomzilla

@riking said:

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({

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.

riking

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

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

boomzilla

@riking said:

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

Yes, I did.

jaming

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

cpradio

@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

GitHub - cpradio/discourse-plugin-show-raw-button: Show a button on each post to display its RAW form in Discourse

Show a button on each post to display its RAW form in Discourse - cpradio/discourse-plugin-show-raw-button

FrostCat

@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/