Vlastná knižnica $dotapp

Úvod

DotApp nie je „PHP plus náhodný jQuery súbor“. Ten istý model požiadaviek (load, CRC, parseReply) slúži aj na rozšírenie frontendu. Napíšete vanilkový widget a zavesíte ho na $dotapp cez $dotapp().fn('name', fn). Súbor dajte do assetov svojho modulu. Nikdy neupravujte app/parts/js/.

Živý modul Examples dodáva exNotify (továrenské toasty), exCopy (schránka na tlačidle), exStepper (jeden uzol → API) a exPing (widget, ktorý POSTuje do PHP).

Udalosti bootu

Knižnice sa registrujú na dotapp-register. Skripty stránky bežia na dotapp. Poradie načítania:

<script src="/assets/dotapp/dotapp.js"></script>
<script src="/assets/modules/Examples/js/ex-ui.js"></script>
<script src="/assets/modules/Examples/js/library.js"></script>

Dvojitú registráciu chráňte cez isRegistered a catch chyby, ktorej správa obsahuje already registered.

Registrácia fn()

Továreň (prázdne $dotapp()): toasty a dialógy. Na prvok: jeden uzol vráti API widgetu, viac uzlov vráti this.

(function () {
  var isRegistered = false;
  var runMe = function ($dotapp) {
    if (isRegistered) return;
    isRegistered = true;
    $dotapp().fn("exNotify", function (opts) {
      if (opts && typeof opts === "object") {
        return ExNotify.show(opts);
      }
      return this;
    });
    $dotapp().fn("exStepper", function (options) {
      var els = this.getElements();
      if (els.length !== 1) {
        throw new Error("exStepper requires exactly one element");
      }
      var el = els[0];
      if (!el._exStepper) el._exStepper = new ExStepper(el, options || {});
      return el._exStepper;
    });
  };
  if (window.$dotapp) runMe(window.$dotapp);
  else window.addEventListener("dotapp-register", function () { runMe(window.$dotapp); }, { once: true });
})();

Kód stránky potom volá $dotapp().exNotify({ title: "Saved", text: "…" }) a $dotapp("#qty").exStepper(). Neobľahčujte $.fn.plugin. Prepíšte to vo vanilkovom DOM.

Volanie PHP z widgetu

Vnútri knižnice ide HTTP cez this.load + parseReply. Na DotApp endpoint nikdy nepoužívajte fetch.

ExPing.prototype.send = function () {
  var self = this;
  this.dotApp.load(this.settings.url, "POST", {},
    function (raw) {
      var reply = self.dotApp.parseReply(raw);
      ExNotify.show({ title: "PHP", text: (reply && reply.message) ? reply.message : "No reply" });
    }
  );
};

PHP odpovie cez crcCheck() a ajaxReply:

public static function ping($request)
{
    if (!$request->crcCheck()) {
        return DotApp::DotApp()->ajaxReply(['status' => 0, 'message' => 'Bad request'], 400);
    }
    return DotApp::DotApp()->ajaxReply([
        'status' => 1,
        'message' => 'PHP answered at ' . date('H:i:s'),
    ], 200);
}

CSS

Triedy widgetov nechajte na {modulename}_* alebo na zdieľanom demo hárku. Živé štýly sú v /app/modules/Examples/assets/css/examples.css a servírujú sa ako /assets/modules/Examples/css/examples.css. Toast, stepper aj snippet tam sú, aby ste vzhľad mohli skopírovať do svojho modulu.

Živá ukážka

/documentation/examples/run/library — toasty, kopírovanie, stepper a PHP ping. Zdroj: ex-ui.js, library.js, Controllers/Library.php.