Login

Corile · (This post was last modified: 05-11-2016, 05:31 PM by Corile.)

Wrote this in an hour at school. Currently only works on chrome because I couldn't be bothered to do vendor prefixes yet. Added vendor prefixes.

http://discotest.netai.net/showthread.php?tid=1

If anyone can write safe mybb regexes I'm done with regexes so this can be implemented here without much effort.

EDIT:
Okay, it's done. It's not the most elegant solution possible, because of how bbcode in MyBB works (and I can't use javascript in any reasonable way) so the user experience of this bbcode is, shall we say, slightly lacking. It works, however, and that's what counts.

Usage:

Code:
[rep=$1,$2]$3,$4,$5,$6[/rep]

$1 [0-100] - the width percentage of the first gradient break.
$2 [0-100] - the width percentage of the second gradient break.

$3 [#COL, #COLOUR, transparent] - the colour of the first anchor of the first gradient.
$4 [#COL, #COLOUR, transparent] - the colour of the second anchor of the first gradient.
$5 [#COL, #COLOUR, transparent] - the colour of the first anchor of the second gradient.
$6 [#COL, #COLOUR, transparent] - the colour of the second anchor of the second gradient.

Mind the gaps, spaces aren't allowed anywhere. This sounds complicated but believe me, it's the easiest it could have been.

Usage examples/templates:

Code:
[rep=50,100]transparent,transparent,#fff,#0c0[/rep]

+1 - allied.

Code:
[rep=50,75]transparent,transparent,#fff,#0c0[/rep]

+0.5 - friendly

Code:
[rep=50,50]#fff,#fff,#fff,#fff[/rep]

0 - neutral, empty bar.

Code:
[rep=0,50]#ff69b4,#fff,transparent,transparent[/rep]

-1 - full hostile in hot pink, for some reason.

FOR ADMINS - IMPLEMENTATION

Title: Reputation Bar
Description: Adds a reputation bar.
Regular expression:

Code:
\[rep=([0-9]{1,3}),([0-9]{1,3})\]([\w\#]{4,11}),([\w\#]{4,11}),([\w\#]{4,11}),([\w\#]{4,11})\[\/rep\]

Replacement:

Code:
<table style="border-collapse: collapse; width: 242px; height: 16px; background-color: $1; background: -webkit-linear-gradient(left, transparent 0%, transparent $1%, $3 $1%, $4 50%, $5 50%, $6 $2%, transparent $2%, transparent 100%); background: -moz-linear-gradient(left, transparent 0%, transparent $1%, $3 $1%, $4 50%, $5 50%, $6 $2%, transparent $2%, transparent 100%); background: -o-linear-gradient(left, transparent 0%, transparent $1%, $3 $1%, $4 50%, $5 50%, $6 $2%, transparent $2%, transparent 100%);" cellspacing=1 cellpadding=0>

  <tr style="margin: 0; padding: 0">

    <td style="width: 5%; box-sizing: border-box; border: 1px solid #222; background: none"></td>

    <td style="width: 5%; box-sizing: border-box; border: 1px solid #222; background: none"></td>

    <td style="width: 5%; box-sizing: border-box; border: 1px solid #222; background: none"></td>

    <td style="width: 5%; box-sizing: border-box; border: 1px solid #222; background: none"></td>

    <td style="width: 5%; box-sizing: border-box; border: 1px solid #222; background: none"></td>

    <td style="width: 5%; box-sizing: border-box; border: 1px solid #222; background: none"></td>

    <td style="width: 5%; box-sizing: border-box; border: 1px solid #222; background: none"></td>

    <td style="width: 5%; box-sizing: border-box; border: 1px solid #222; background: none"></td>

    <td style="width: 5%; box-sizing: border-box; border: 1px solid #222; background: none"></td>

    <td style="width: 5%; box-sizing: border-box; border: 1px solid #222; background: none"></td>

    <td style="width: 5%; box-sizing: border-box; border: 1px solid #222; background: none"></td>

    <td style="width: 5%; box-sizing: border-box; border: 1px solid #222; background: none"></td>

    <td style="width: 5%; box-sizing: border-box; border: 1px solid #222; background: none"></td>

    <td style="width: 5%; box-sizing: border-box; border: 1px solid #222; background: none"></td>

    <td style="width: 5%; box-sizing: border-box; border: 1px solid #222; background: none"></td>

    <td style="width: 5%; box-sizing: border-box; border: 1px solid #222; background: none"></td>

    <td style="width: 5%; box-sizing: border-box; border: 1px solid #222; background: none"></td>

    <td style="width: 5%; box-sizing: border-box; border: 1px solid #222; background: none"></td>

    <td style="width: 5%; box-sizing: border-box; border: 1px solid #222; background: none"></td>

    <td style="width: 5%; box-sizing: border-box; border: 1px solid #222; background: none"></td>

    <!--Protégé is a pretty cool guy, eh makes bbcode and doesnt afraid of anything-->

  </tr>

</table>

Enabled: Yes
Parse order: 0

Reflections on the Revolution in Gallia
Custodi // High City of Heraklion // The Cult of Archangels
Log Filter // Post Creator // Manhattan

Corile · (This post was last modified: 05-11-2016, 07:48 PM by Corile.)

Bump since finished. I added a poll, feel free to vote.

Reflections on the Revolution in Gallia
Custodi // High City of Heraklion // The Cult of Archangels
Log Filter // Post Creator // Manhattan

Thyrzul · 05-11-2016, 08:30 PM,

Looks really nice, though I'm unfamiliar with this implementation template, could you explain me what those in the ([]{}) brackets exactly mean and what in the regular expression refers to what part of the replacement? Thanks.

Corile · 05-11-2016, 08:32 PM,

(05-11-2016, 08:30 PM)Thyrzul Wrote: Looks really nice, though I'm unfamiliar with this implementation template, could you explain me what those in the ([]{}) brackets exactly mean and what in the regular expression refers to what part of the replacement? Thanks.

http://regexr.com/3ddcu

Reflections on the Revolution in Gallia
Custodi // High City of Heraklion // The Cult of Archangels
Log Filter // Post Creator // Manhattan

Thyrzul · (This post was last modified: 05-11-2016, 08:44 PM by Thyrzul.)

Wow, thank you. Now one more question, do the expressions from $1 to $6 indeed mean the parameters from 1 to 6 in the order they were typed in, like how I suspect them to be?