Help with BBCode Extension

0E800

Im working on a bbcode barcode extension.

Here is my Fiddle:
https://jsfiddle.net/7c4dxg5g/

Here is my AddBBcode.php

<?php
namespace oe800\BBCodeBarcode\Listeners;
use Flarum\Event\ConfigureFormatter;
use Illuminate\Contracts\Events\Dispatcher;
class AddBBCode
{
    public function subscribe(Dispatcher $events)
    {
        $events->listen(ConfigureFormatter::class, [$this, 'addBBCode']);
    }
    public function addBBCode(ConfigureFormatter $event)
    {


         $event->configurator->BBCodes->addCustom(
            '[UPC]{TEXT}[/UPC]',
            '<script src="https://cdnjs.cloudflare.com/ajax/libs/jsbarcode/3.6.0/barcodes/JsBarcode.ean-upc.min.js"></script>
<svg class="barcode"
  jsbarcode-format="upc"
  jsbarcode-value="{TEXT}"
  jsbarcode-textmargin="0"
  jsbarcode-fontoptions="bold">
</svg>
<script type="text/javascript">JsBarcode(".barcode").init();</script>'
        );
    }
}

The issue:
Everything works as it should, the barcode is created. However, I have these errors in console and not sure how to fix.
Also, if I repy or create a post, insert my barcode bbcode, it creates the barcode, but if I try to edit the post, the post edit dialog does not pop up.
In console I get this error: ReferenceError: JsBarcode is not defined

Screenshots.

datitisev

The issue may be because you are calling the script in the post itself, and not globally.
You may want to download the JSBarcode file, and add it to the resources so Flarum loads it once all the time.
Not sure, tho...

Don't take my word for it ?

0E800

Okay, so I still am having issues trying to include JS inside my BBCode Extensions..
Here is another issue I need help on. If anyone is familiar with JS I could use help with it.

Here is my Fiddle:
http://jsfiddle.net/GG9Sa/4266/

Here is the code I need help with:

<script>
for( var _i = 1; _i <= 31; _i += 1 ){
var _addClass = '';
if( _i === 5 ){ _addClass = ' class="selected"'; }
document.write( '<li><a href="#" title="'+_i+'" data-value="'+_i+'"'+_addClass+'>'+_i+'</a></li>' );
}
</script>

This part of the code is what is used to highlight the day of the month. What I want it to do is automatically highlight the day of the month - using JS.
Currently I need to change the "5" in if( _i === 5)
Im trying to make it so it uses d.getDate(); to automatically replace the 5 with whatever number the day of the month is.

Any help would be greatly appreciated. As you can see, I am working on a Calendar Extension.

Thanks.

Update: here is the fix for my problem.

	<script>
        var date = new Date().getDate();
	for( var _i = 1; _i <= 31; _i += 1 ){
	var _addClass = '';
	if( _i === date ){ _addClass = ' class="selected"'; }
	document.write( '<li><a href="#" title="'+_i+'" data-value="'+_i+'"'+_addClass+'>'+_i+'</a></li>' );
	}
	</script>

http://jsfiddle.net/ht0dc2nz/3/

0E800

Coming soon, 0E800's BBCode Calendar extension.
Customize color and I guess 1 to 10 events.

Useful for landing page extension and single posts.

Preview:
http://jsfiddle.net/ht0dc2nz/3/