Updating Show Raw Button
-
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]); } } } }); })();
-
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...
-
```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 <i> tag? Perhaps it should use <div> like the bookmark icon is currently using: ```javascript if (this.icon) { buffer.push("<div class=\"fa fa-" + this.icon + "\"></div>"); }
I changed
i
todiv
in developer tools for Chrome for the like icon, and it worked fine.```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.
-
@boomzilla said:
```javascript
if (this.icon) { buffer.push("<i class="fa fa-" + this.icon + "">"); }:wtf: Why is that stuck in an <i> tag? Perhaps it should use <div> like the bookmark icon is currently using: ```javascript if (this.icon) { buffer.push("<div class=\"fa fa-" + this.icon + "\"></div>"); }
I changed
i
todiv
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=dreikintl;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({
Why is that stuck in an <i> tag?
The
i
stands foricon
and it's what FontAwesome recommends IIRC. Also it's an inline tag, not a block tag likediv
is - you would want to replace it withspan
instead.I do recall correctly:
https://meta.discourse.org/t/shouldnt-post-controls-buttons-use-div-instead-of-i/32847/11?u=riking
-
-
He's right about the last bit at least.
-
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.
-
And I was specifically picking up on the daftness.
-
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).
-
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 aboutreopen
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.
- https://what.thedailywtf.com/t/fa-code-will-break-next-upgrade/49921/9?u=pjh
-
Oops, yes, should have been
require(...).default;
.Did you make sure to load a new topic after running it?
-
-
I think a discodev just asked you if you tested a code change...
-
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
-
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/