Commit aee544cb authored by osman's avatar osman

Make Blazy instance and public functions available via `Drupal.lazy`

parent 9235a4de
......@@ -21,10 +21,10 @@ You can still use this module tandem with it, though that is not a requirement.
* **bLazy v1.8.2** script as a library item
## Installing Manually
- [Download bLazy][3] from https://github.com/dinbror/blazy
- [Download bLazy][3] from https://github.com/dinbror/blazy
- Extract the downloaded file,
- rename *blazy-master* directory to *blazy*,
- copy the folder into the `/libraries` folder: i.e.: `libraries/blazy/blazy.min.js`
- copy the folder into the `/libraries` folder: i.e.: `libraries/blazy/blazy.min.js`
## Installing via Composer
......@@ -61,7 +61,7 @@ You can still use this module tandem with it, though that is not a requirement.
"reference": "1.8.2"
}
}
},
}
]
```
......@@ -73,22 +73,48 @@ composer require 'dinbror/blazy:1.8.2'
- Install this module:
``` sh
composer require 'drupal/lazy:^1.0'
composer require 'drupal/lazy:^2.0'
```
## Usage
There are two options to set up for your site to lazy-load images. And both options share the same [settings](/admin/config/content/lazy).
1. Image fields
2. Inline images and Iframes managed in rich-text fields (ckeditor)
### Image fields
Repeat these steps for each image field you want to enable lazy-loading:
This modules makes a new text filter available for the text-formats: *Lazy-load*
1. Go to **Manage display** page of the entity type you want to enable lazy-loading. *i.e. Article*
2. Select the **display** you want the change. *i.e. Teaser*
3. Click on the little cog icon to edit image display settings
4. Check **Enable lazy-loading** option, update the field settings, and save.
Enable the *Lazy-load* filter for the desired text-formats. i.e. *Full HTML* or
*Filtered HTML*
### Inline images and Iframes
1. **Configure** the [text format](/admin/config/content/formats) you want to enable lazy-loading. *i.e. Full HTML*
2. Check **Lazy-load images and IFRAMEs via bLazy** option to enable the filter, and save configuration.
3. Go to [Lazy-load settings](/admin/config/content/lazy).
4. Check the boxes for the inline elements to be lazy-loaded via filter `<img>` `<iframe>`
5. Save configuration
Check out the configuration at `admin/config/content/lazy`.
*Repeat steps 1-2 for each text-format you want to enable lazy-loading.*
Configure which elements should be lazy-loaded in the **settings** area.
### Blazy plugin can be manupulated in your theme/module javascript:
The options in **Blazy configuration** section of the settings form are the default options of the Blazy library. Refer to [Blazy plugin documentation][5] for each setting.
#### Get Blazy plugin options.
```js
let opt = drupalSettings.lazy;
```
**Blazy configuration** options come with the Blazy defaults. Refer to [Blazy plugin documentation][5] for each setting.
#### Access Blazy's public functions:
| Function | Description |
|:--|:--|
| `Drupal.lazy.revalidate();` | Revalidates document for visible images. Useful if you add images with scripting or ajax |
| `Drupal.lazy.load(element(s), force);` | Forces the given element(s) to load if not collapsed. If you also want to load a collapsed/hidden elements you can add true as the second parameter. You can pass a single element or a list of elements. Tested with getElementById, getElementsByClassName, querySelectorAll, querySelector and jQuery selector. |
| `Drupal.lazy.destroy();` | Unbind events and resets image array |
## Use Case
......
......@@ -5,7 +5,7 @@
Drupal.behaviors.lazy = {
attach: function (context, settings) {
var options = settings.lazy ? settings.lazy : {};
new Blazy(options);
Drupal.lazy = new Blazy(options);
}
};
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment