0.2.0 • Published 2 years ago

@acanto/core-orchestrations v0.2.0

Weekly downloads
31
License
ISC
Repository
gitlab
Last release
2 years ago

Frontend

Orchestrations

Abstraction of kind of complex but common UI patterns.

Other examples and patterns of complex implementations

Retrieval of a rendered component via ajax

This is a bare minimal example. Let's say that you need to add this ajax powered component to the home page. The homepage template home/index.twig needs an element to hold the async content:

<div id="my-async-content">Loading...</div>

Then follow these steps:

    1. run acanto component my-component. In the generated component template frontend/components/MyComponent/index.twig you can put what you want, to pass data from the db see next step.
    1. got to plugins/acanto/routes.php and add:
Route::get('/ajax/my-data', function () {
  // static data from backend
  $json = ['id' => 'ciao', 'whatever' => 'dynamic-data'];
  // or dynamic data from models
  $slug = strtolower(@$_GET['slug']);
  $json = Acanto\Acanto\Models\Something::where('slug', $slug)->first();

  return Acanto\Data\Plugin::getAjaxFragment(
    'MyComponent',
    ['dataToUse' => $json],
    'home'
  );
});
    1. got to frontend/routes/home.js and add:
import { $ } from "@acanto/frontend/dom";
import ajax from "@acanto/frontend/ajax";
import { buildQueryString } from "@acanto/frontend/helpers"; // if needed
import Lazy from "@acanto/frontend/lazy"; // if needed

const CLASS_LOADING = "is-loading";
const $results = $("#my-async-content");

function fetchContent(data) {
  const queryString = data ? buildQueryString(data) : "";
  $results.classList.add(CLASS_LOADING);

  ajax(`/ajax/my-data${queryString}`).then(({ data }) => {
    $resultsAsync.innerHTML = data;
    $results.classList.remove(CLASS_LOADING);
    new Lazy({ container: $results });
  });
}

fetchContent({ slug: "some-unique-slug" });
0.2.0

2 years ago

0.1.9

3 years ago

0.1.8

3 years ago

0.1.7

3 years ago

0.1.6

3 years ago

0.1.5

3 years ago

0.1.4

3 years ago

0.1.2

4 years ago

0.1.3

4 years ago

0.1.1

4 years ago

0.1.0

4 years ago

0.0.66

4 years ago

0.0.65

4 years ago

0.0.63

4 years ago

0.0.64

4 years ago

0.0.62

4 years ago

0.0.61

4 years ago

0.0.60

4 years ago

0.0.59

4 years ago

0.0.58

4 years ago

0.0.57

4 years ago

0.0.56

4 years ago

0.0.55

4 years ago

0.0.54

4 years ago

0.0.53

4 years ago

0.0.51

4 years ago

0.0.52

4 years ago

0.0.50

4 years ago

0.0.49

4 years ago

0.0.48

4 years ago

0.0.47

4 years ago

0.0.46

4 years ago

0.0.45

4 years ago

0.0.44

4 years ago

0.0.43

4 years ago

0.0.42

4 years ago

0.0.40

4 years ago

0.0.38

4 years ago

0.0.39

4 years ago

0.0.37

4 years ago

0.0.36

4 years ago

0.0.35

4 years ago

0.0.34

4 years ago

0.0.33

4 years ago

0.0.32

5 years ago

0.0.31

5 years ago

0.0.30

5 years ago

0.0.29

5 years ago

0.0.27

5 years ago

0.0.28

5 years ago

0.0.26

5 years ago

0.0.25

5 years ago

0.0.24

5 years ago

0.0.23

5 years ago

0.0.22

5 years ago

0.0.21

5 years ago

0.0.20

5 years ago

0.0.19

5 years ago

0.0.17

5 years ago

0.0.18

5 years ago

0.0.16

5 years ago

0.0.15

5 years ago

0.0.14

5 years ago

0.0.12

5 years ago

0.0.13

5 years ago

0.0.11

5 years ago

0.0.10

5 years ago

0.0.9

5 years ago

0.0.8

5 years ago

0.0.7

5 years ago

0.0.5

5 years ago

0.0.6

5 years ago

0.0.4

5 years ago

0.0.3

5 years ago

0.0.2

5 years ago