Eigene $dotapp-Bibliothek

Einleitung

DotApp ist nicht „PHP plus eine zufällige jQuery-Datei“. Dasselbe Request-Modell (load, CRC, parseReply) erweitert das Frontend. Sie schreiben ein Vanilla-Widget und hängen es mit $dotapp().fn('name', fn) an $dotapp. Legen Sie die Datei in die Assets Ihres Moduls. Bearbeiten Sie niemals app/parts/js/.

Das Live-Modul Examples liefert exNotify (Factory-Toasts), exCopy (Zwischenablage am Button), exStepper (ein Knoten → API) und exPing (Widget, das nach PHP POSTet).

Boot-Ereignisse

Bibliotheken registrieren sich auf dotapp-register. Seitenskripte laufen auf dotapp. Ladereihenfolge:

<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>

Schützen Sie Doppelregistrierung mit isRegistered und fangen Sie eine Meldung, die already registered enthält.

fn() registrieren

Factory (leeres $dotapp()): Toasts und Dialoge. Pro Element: ein Knoten gibt die Widget-API zurück, mehrere Knoten geben this zurück.

(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 });
})();

Der Seitencode ruft dann $dotapp().exNotify({ title: "Saved", text: "…" }) und $dotapp("#qty").exStepper() auf. Wrappen Sie nicht $.fn.plugin. Schreiben Sie Vanilla-DOM.

PHP aus dem Widget

Innerhalb der Bibliothek läuft HTTP über this.load + parseReply. Rufen Sie einen DotApp-Endpunkt niemals mit fetch auf.

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 antwortet mit crcCheck() und 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

Widget-Klassen bleiben bei {modulename}_* oder einem gemeinsamen Demo-Sheet. Die Live-Styles liegen in /app/modules/Examples/assets/css/examples.css und werden als /assets/modules/Examples/css/examples.css ausgeliefert. Toast-Stack, Stepper und Snippet-Block sind dort, damit Sie das Aussehen in Ihr Modul kopieren können.

Live-Demo

/documentation/examples/run/library — Toasts, Kopieren, Stepper und PHP-Ping. Quelle: ex-ui.js, library.js, Controllers/Library.php.