https://github.com/infinityloop-dev/lazy-component

:wrench: Component for Nette framwork which helps with creation of lazy ajax loaded components.
https://github.com/infinityloop-dev/lazy-component

component lazy-loading nette nette-component php

Last synced: about 1 month ago
JSON representation

:wrench: Component for Nette framwork which helps with creation of lazy ajax loaded components.

• Host: GitHub
• URL: https://github.com/infinityloop-dev/lazy-component
• Owner: infinityloop-dev
• License: mit
• Created: 2020-01-19T22:22:31.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2020-03-28T18:30:35.000Z (almost 5 years ago)
• Last Synced: 2024-11-21T18:42:48.147Z (about 1 month ago)
• Topics: component, lazy-loading, nette, nette-component, php
• Language: PHP
• Homepage: https://www.infinityloop.dev
• Size: 28.3 KB
• Stars: 4
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Lazy component

:wrench: Component for Nette framwork which helps with creation of lazy ajax loaded components.

## Introduction

Component which renders empty in the beggining and is populated by signal request.

## Installation

Install package using composer

```

composer require infinityloop-dev/lazy-component

```

## Dependencies

- PHP >= 7.4

- [nette/application](https://github.com/nette/application)

- [nette/utils](https://github.com/nette/utils)

## How to use

- Create new component and extend `\Infinityloop\LazyComponent\LazyComponent` instead of `\Nette\Application\UI\Control`.

- Trigger `handleLoadComponent` to load and redraw component.

- Use macro `{control componentName}` to render your component as you would normally.

- Additionaly use `{control componentName:loadComponentLink}` to get URL for `loadComponent` signal.

    - Useful for rendering URL (eg. into data attributes) so you can easily trigger signal from javascript.

- Make sure `LazyCompoennt::render()` method is called if you choose to override it.

    - Preferably use `beforeRender()` to pass variables into template. 

    - `beforeRender()` method is not called when empty template is used (when component is not loaded).

- Template for your component is automaticaly deduced to be have same name (and path) as your `.php` file.

    - File extension is simply swapped to `.latte`.

- By default the FontAwesome 5 spinner is used as placeholder. Override `EMPTY_TEMPLATE` constant to use different empty template file.

### Example lazy tab content

Tab header:

```

Tab name

```

Tab content:

```



    {control myComponent}



```

JQuery ajax request on click:

```

$(".tab[data-load-component]").one('click',function (event) {

    const link = $(this).data("load-component");

    $.nette.ajax({

        method: 'GET',

        url: link,

    });

});

```


- Load event is executed only once ([jqery.one](https://api.jquery.com/one/)).