Add <progress> support

Functie
1

I would like to propose the adding of the <progress /> tag to Discourse. It can be very useful, and can be used wherever a visual representation of a statistic is worthwhile. For example, “1/30 users registered” or “$50 raised of our $500 goal” would be much better represented as a progress element than text.

Additionally, progress bars should be CSS-customizable.

2 likes
2

This would fit well into a plugin like the spoiler one.

3

Exactly. I see no reason for this to be in Core when it is probably one of the easiest Plugins there could be. eg,

plugin.rb

# name: progress
# version: 0.1 

register_asset "javascripts/progress.js.es6", :server_side

progress.js.es6

Discourse.Markdown.whiteListTag("progress", "class", /d-prog/);
Discourse.Markdown.whiteListTag("progress", "max", /[0-9\.]+/);
Discourse.Markdown.whiteListTag("progress", "value", /[0-9\.]+/);

6 likes
4

I think I screwed up something. It’s still refusing to work.

Can someone give me feedback? https://github.com/pacificfils/discourse-progressbar

1 like
5

I drop mine into the localhost folder instead of doing Git, so I don’t know if this is correct

    - exec:
    cd: $home/plugins
    cmd:
      - mkdir -p plugins
      - git clone https://github.com/discourse/docker_manager.git
      - git clone https://github.com/pacificfils/discourse-progressbar.git

What did you try in the post?
I also tried <progress class="d-prog" value="0.3" max="1.0">30%</progress>
and it worked for me.

Maybe a browser support issue?

Chrome 	Firefox (Gecko) 	IE 	Opera 	Safari
6.0 	6.0 (6.0)[1][2] 	10 	11.0 	 5.2

.

Android Firefox M (Gecko) 	IE M 	 	Opera M Safari M
Yes 	6.0 (6.0)[1][2] 	Not supported 	11.0 	7[3]
2 likes
6

I tried:

<progress class="d-prog" value="0.1" max="1.0"></progress>

and got a blank post in return, suggesting that there’s something wrong with the plugin. It does load, though.

It can’t be browser incompatibility, I’m running Chrome, and I see it everywhere else.

7

AFAIK the progress tag requires something between the opening and closing tags. (though it might only be a fallback for browser’s that don’t support the tag)

and it isn’t “min” it’s “value”
* you’re thinking of the meter tag?
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meter

8

Sorry, that was a typo on my part. Still doesn’t work with something in between the tags.

I’m suspecting the plugin. It doesn’t show up on the Admin Panel list either…

9

If it isn’t showing at all in the Admin -> plugins page it may not have installed OK

* to get a link there you need to put
# url: http://somedomain.com/path
in plugin.rb

The progress tag does not show in the preview

And it doesn’t show in the post right away until after it’s “cooked”

* notice I was wrong and that nothing is required between the tags

1 like
10


Alright! The plugin didn’t load correctly because the code wasn’t wrapped in a function. Once I fixed that, it worked great.

Thanks!

ProgressBar Plugin: https://github.com/pacificfils/discourse-progressbar.git (src)

1 like
11

Ah, yes. If the file has a “.js” extension it needs that. When it has an “.es6” extension it runs “auto-magically” and doesn’t need to be.

1 like
12

The repository from github is gone. :’(

Update: found this:
https://github.com/SGColdSun/discourse-progressbar

3 likes
13

@SidV have you installed it?
Is it still working?

14

If you find the discourse-progressbar.git tell me :wink:
Maybe @Mittineague knows something about this :thumbsup:

15

@Mittineague, any chance you fix this plugin?

2 likes
16

I found new progress.js

Material Progress —Google Material Design Progress linear bar. By using CSS3 and vanilla JavaScript.

Demo

Check this out:
http://lightningtgc.github.io/MProgress.js/

4 likes