Jaxon

The response plugin class extends the AbstractResponsePlugin and implements the JsCodeGeneratorInterface interface for Javascript code generation. Its Javascript code registers two custom commands in the client application, which are then called in the PHP functions.

<div class="row">
    <div class="col-md-12" id="hello-text">
        &nbsp;
    </div>
    <div class="col-md-4 select">
        <select class="form-select form-control" id="colorselect" name="colorselect" <?= attr()
            ->on('change', rq('HelloWorld')->setColor(Jaxon\select('colorselect'))) ?>>
            <option value="black" selected="selected">Black</option>
            <option value="red">Red</option>
            <option value="green">Green</option>
            <option value="blue">Blue</option>
        </select>
    </div>
    <div class="col-md-8 buttons">
        <button type="button" class="btn btn-primary" <?= attr()
            ->click(rq('HelloWorld')->sayHello(1)) ?>>CLICK ME</button>
        <button type="button" class="btn btn-primary" <?= attr()
            ->click(rq('HelloWorld')->sayHello(0)) ?>>Click Me</button>
    </div>
</div>

                                    

<?php

use Jaxon\Jaxon;
use Jaxon\Plugin\AbstractResponsePlugin;
use Jaxon\Plugin\JsCode;
use Jaxon\Plugin\JsCodeGeneratorInterface;

class TextPlugin extends AbstractResponsePlugin implements JsCodeGeneratorInterface
{
    public const NAME = 'text';

    /**
     * @inheritDoc
     */
    public function getName(): string
    {
        return self::NAME;
    }

    /**
     * @inheritDoc
     */
    public function getHash(): string
    {
        return '0.0.1'; // Use a version number as hash.
    }

    /**
     * @inheritDoc
     */
    public function getJsCode(): JsCode
    {
        return new JsCode(file_get_contents(__DIR__ . '/text.js'));
    }

    public function value(string $eltId, string $value)
    {
        $this->addCommand('text.value', ['eltId' => $eltId, 'value' => $value]);
    }

    public function color(string $eltId, string $color)
    {
        $this->addCommand('text.color', ['eltId' => $eltId, 'color' => $color]);
    }
}

class HelloWorld
{
    public function sayHello(bool $isCaps)
    {
        $text = $isCaps ? 'HELLO WORLD!' : 'Hello World!';
        /** @var TextPlugin */
        $xTextPlugin = jaxon()->getResponse()->text;
        // $xTextPlugin = jaxon()->getResponse()->plugin('text');
        // $xTextPlugin = jaxon()->getResponse()->plugin(TextPlugin::class);
        $xTextPlugin->value('hello-text', $text);
    }

    public function setColor(string $sColor)
    {
        /** @var TextPlugin */
        $xTextPlugin = jaxon()->getResponse()->text;
        $xTextPlugin->color('hello-text', $sColor);
    }
}

// Register object
$jaxon = jaxon();

$jaxon->register(Jaxon::CALLABLE_CLASS, HelloWorld::class);
$jaxon->registerPlugin(TextPlugin::class, TextPlugin::NAME);

// Js options
$jaxon->setOptions(['lib' => ['uri' => '/js'], 'app' => ['minify' => false]], 'js');

                                    

jaxon.dom.ready(() => {
    // Call the HelloWorld class to populate the 2nd div
    <?= rq('HelloWorld')->sayHello(0, false) ?>;
    // call the HelloWorld->setColor() method on load
    <?= rq('HelloWorld')->setColor(Jaxon\select('colorselect'), false) ?>;
});