[nodebb-plugin-buttons-galore] NodeBB: Buttons Galore

Tanner

Hooray for buttans! Thanks a bunch @Ted this is really great. I'll see what I can do about submitting a PR for the alignment and other things, if you don't beat me to it.

? Offline

@Tanner, feel free to. Classes started today, and work just tripled.

I was going to check @toolito's colors plugin to see how to do an HTML span.

Markdown, well Github flavored anyway, allows for text alignment in tables. I'd like to be able to align text without a need for tables, however.

a_5mith

@Ted Can be done with CSS. Is Center & Right enough for alignment?

? Offline

@a_5mith, of course. Got a PR up your sleeve for me?

a_5mith

@Ted I'll throw one together.

? Offline

@a_5mith, Sounds great. I'll try to give it a test and merge at lunch. Will probably need to be tonight before I can push it to NPM though.

psychobunny

This is cool. It's actually a bit tragic that those buttons aren't already included in the default composer

Thanks for making this

julian

Hhaahha, I only added the basic button in the composer with the full intention of coming back later and adding more. So much for that

There will be a refactoring of the composer for 0.5.x (maybe .1, maybe .2, I don't know) that'll make adding buttons easier... so will keep this plugin in mind for when that happens.

? Offline

@psychobunny, thanks for a solid code-base that I could work from. Tried make sure your rights weren't infringed in the process.

psychobunny

Tried make sure your rights weren't infringed in the process.

No worries about that haha, at least in my case. In general I just hope that whatever plugins I make will help people make more

? Offline

@psychobunny, that's an excellent philosophy.

While I have your attention, any tips on how to order the buttons and allow for enabling of some but not all of them, at admin discretion, in ACP?

psychobunny

Reordering buttons will be made possible when this happens:

There will be a refactoring of the composer for 0.5.x (maybe .1, maybe .2, I don't know) that'll make adding buttons easier... so will keep this plugin in mind for when that happens.

If you want to create an admin page, you can do something like this:

https://github.com/NodeBB/nodebb-plugin-kitchen-sink/blob/master/lib/adminPage.js for the route
and
https://github.com/NodeBB/nodebb-plugin-kitchen-sink/blob/master/lib/menuItems.js#L19-L28 for the menu link
and
https://github.com/NodeBB/nodebb-plugin-kitchen-sink/blob/master/templates/admin/kitchen-sink.tpl for the actual settings

Then you could pull the settings from an API call client-side, and then enable/disable as necessary. Good luck

? Offline

@psychobunny, excellent - thanks for the tips. Once things progress a bit I'll see about working on the ACP interface.

Tanner

@Ted so what do you think it will take to do the alignment; custom CSS or something more complicated? I'm willing to help in whatever capacity I can!

? Offline

@Tanner, I'm thinking either custom CSS or an HTML span would work. For something that's either going to be left or right aligned though, application of a CSS on the selected area seems to be a cleaner solution - just depends on how well the CSS plays with what else is in the composer.

Sorry, have been busy with a big project and classes starting back.

Tanner

No worries man, just curious so I could have a direction if it turns out I can help. I'm starting classes soon to so I get it.

Need a hand for getting that part set? Help me out to get started and I'll see what I can do.

a_5mith

I was looking at this, but got sidetracked with a few issues I ran into, mainly the regex used. As it's not as simple as I'd of liked.

I don't think spans will work, spans need to go on the outside of the paragraph tags, not inside. Each new line in NodeBB is given a new paragraph tag, so I believe that the span will end up inside a paragraph tag. Which won't work.

What you would need to do instead is give that paragraph tag the class of align-right or align-center.

I've explained it in this jsfiddle I wrote whilst caffeined to my eyeballs on energy drinks. http://jsfiddle.net/srm2dftu/1

psychobunny

You can use text-center and text-right, it's built into bootstrap. What's the regex you're trying to do maybe I can give it a shot

? Offline

@Tanner, I might be able to lend a hand next weekend-ish.

I've got a huge project planned for this weekend in regards to getting a new server up and running with NodeBB, then launching live.

@a_5mith, that's an excellent visual representation!
@psychobunny, presently I haven't started a regex - so maybe that'll get brought about next weekend.

a_5mith

@psychobunny said:

You can use text-center and text-right, it's built into bootstrap. What's the regex you're trying to do maybe I can give it a shot

Something along the lines of

composer.addButton('fa fa-align-center', function(textarea, selectionStart, selectionEnd) {
if(selectionStart === selectionEnd){
controls.insertIntoTextarea(textarea, '+center+Centered Text');
controls.updateTextareaSelection(textarea, selectionStart + 8, selectionEnd + 21);
} else {
controls.wrapSelectionInTextareaWith(textarea, '+center+,'');
controls.updateTextareaSelection(textarea, selectionStart, selectionEnd);
}
});

Then

 .replace(/<p>+center+([\S\s]*?)<\/p>/gm, '<p class="align-center">$1</p>')

but that didn't even put the font awesome icon in. Although I installed it on the 0.5.1 test rig I've built. So I don't know what may have changed.