Phoenix Core Script

Introduction

Phoenix provides a set of useful scripts to help us operate form and input, these scripts based on jQuery so every developers can easily learn how to use and integrate it with their own scripts.

Phoenix Core

Phoenix core script will auto included if you generate a phoenix admin template, but you can also include it manually in everywhere with first argument as css selector.

// In View class
\Phoenix\Script\PhoenixScript::phoenix();

// In Template
<?php \Phoenix\Script\PhoenixScript::phoenix(); ?>

OR

@php(\Phoenix\Script\PhoenixScript::phoenix())

The jquery.js and phoenix.js will be auto included to HTML head.

Uri

Use uri() to get uri data, same as php $uri->path in template.

Phoenix.uri('path');
Phoenix.uri('root');
Phoenix.uri('full');

Use asset() to get asset path:

Phoenix.asset('path');
Phoenix.asset('root');

Variable Storage

Phoenix can store some variables from PHP and push to frontend. Use this code in PHP:

PhoenixScript::data('item', $data);
PhoenixScript::data('title', 'Hello');

In frontend, use this JS to get value:

// Get object
var item = Phoenix.data('item');

var id = item.id;

// Get string
var title = Phoenix.data('title').toUpperCase();

It is useful if you are using Vue.js and you want to push a lot of data structure to vue instance:

new Vue({
    el: '#app',
    data: {
        item: Phoenix.data('item')
    }
});

Translate

If you has a language key:

flower.message.sakura="Sakura"

Add language key to JS by php:

\Phoenix\Script\PhoenixScript::translate('flower.message.sakura');

Now you can get this language string in JS:

Phoenix.__('flower.message.sakura'); // Sakura

// You can also use sprintf() and plural()
Phoenix.__('flower.message.sakura', 'arg1', 'arg2');
Phoenix.Translator.plural('flower.message.sakura', 3);

See Translator

Messages

Use JS code addMessage() to render message to template:

Phoenix.addMessage('Hello World');

Use other styles

Phoenix.addMessage('Hello World', 'info');
Phoenix.addMessage('Hello World', 'success');
Phoenix.addMessage('Hello World', 'warning');
Phoenix.addMessage('Hello World', 'danger');

Multiple messages:

Phoenix.addMessage(['Foo', 'Bar'], 'info');

Remove messages:

Phoenix.removeMessages();

Events

Phoenix has it's own event system and very easy to use:

Listen A Custom Event

Phoenix.on('my.event', function () {
    // ...
});

Only listen once:

Phoenix.once('my.event', function () {
    // ...
});

Trigger Event

Phoenix.trigger('my.event');

Trigger with params:

Phoenix.trigger('my.event', 'Flower', 'Sakura');

Listen with params:

Phoenix.on('my.event', function (arg1, arg2) {
    // ...
});

Stop Listening

Phoenix.off('my.event');

Get Listeners

var listeners = Phoenix.listeners('my.events');

Plugin Creator

Phoenix help us create jQuery plugin quickly.

Phoenix.plugin('flower', class Flower {
  constructor(arg1, arg2) {
    // ...
  }
});

// Use this plugin
var instance = $('.hello').flower('arg1', 'arg2');

// Call again will get same instance.
var instance2 = $('.hello').flower('arg1', 'arg2');

instance === instance2;

Loaded Event

Phoenix provides a loaded event to make sure your script can run after page and something initialised.

// By default, loaded is same as dom ready event
Phoenix.on('loaded', function () {
    // ...
});

But you can add wait() to make phoenix loaded deferred. For example, this code make phoenix wait web components ready.

Phoenix.wait(function (resolve) {
    window.addEventListener('WebComponentsReady', function() {
        // Call resolve() to complete loaded
        resolve();
    });
});

All wait() callback will push to a queue, if queue all completed, Phoenix will trigger loaded event.

If you found a typo or error, please help us improve this document.