New dev branch
This commit is contained in:
Jeremy Rangel
18
blocks/button/.editorconfig
Normal file
18
blocks/button/.editorconfig
Normal file
@ -0,0 +1,18 @@
|
||||
# This file is for unifying the coding style for different editors and IDEs
|
||||
# editorconfig.org
|
||||
|
||||
# WordPress Coding Standards
|
||||
# https://make.wordpress.org/core/handbook/coding-standards/
|
||||
|
||||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
end_of_line = lf
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
indent_style = tab
|
||||
|
||||
[*.{yml,yaml}]
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
30
blocks/button/.gitignore
vendored
Normal file
30
blocks/button/.gitignore
vendored
Normal file
@ -0,0 +1,30 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# Coverage directory used by tools like istanbul
|
||||
coverage
|
||||
|
||||
# Compiled binary addons (https://nodejs.org/api/addons.html)
|
||||
build/Release
|
||||
|
||||
# Dependency directories
|
||||
node_modules/
|
||||
|
||||
# Optional npm cache directory
|
||||
.npm
|
||||
|
||||
# Optional eslint cache
|
||||
.eslintcache
|
||||
|
||||
# Output of `npm pack`
|
||||
*.tgz
|
||||
|
||||
# Output of `wp-scripts plugin-zip`
|
||||
*.zip
|
||||
|
||||
# dotenv environment variables file
|
||||
.env
|
||||
52
blocks/button/components/IconSelectControl.js
Normal file
52
blocks/button/components/IconSelectControl.js
Normal file
@ -0,0 +1,52 @@
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { SelectControl } from '@wordpress/components';
|
||||
|
||||
export function IconSelectControl(props) {
|
||||
const { iconSvgId, onIconChange } = props;
|
||||
|
||||
// Hardcoded icon data
|
||||
const iconData = [
|
||||
{
|
||||
"uuid": "c0a8012345678f3d5b847ad0f8a890f1",
|
||||
"iconId": "comment-dots",
|
||||
"family": "Font Awesome",
|
||||
"sub-family": "solid",
|
||||
"name": "Comment Dots",
|
||||
"path": "<path d='M168.2 384.9c-15-5.4-31.7-3.1-44.6 6.4c-8.2 6-22.3 14.8-39.4 22.7c5.6-14.7 9.9-31.3 11.3-49.4c1-12.9-3.3-25.7-11.8-35.5C60.4 302.8 48 272 48 240c0-79.5 83.3-160 208-160s208 80.5 208 160s-83.3 160-208 160c-31.6 0-61.3-5.5-87.8-15.1zM26.3 423.8c-1.6 2.7-3.3 5.4-5.1 8.1l-.3 .5c-1.6 2.3-3.2 4.6-4.8 6.9c-3.5 4.7-7.3 9.3-11.3 13.5c-4.6 4.6-5.9 11.4-3.4 17.4c2.5 6 8.3 9.9 14.8 9.9c5.1 0 10.2-.3 15.3-.8l.7-.1c4.4-.5 8.8-1.1 13.2-1.9c.8-.1 1.6-.3 2.4-.5c17.8-3.5 34.9-9.5 50.1-16.1c22.9-10 42.4-21.9 54.3-30.6c31.8 11.5 67 17.9 104.1 17.9c141.4 0 256-93.1 256-208S397.4 32 256 32S0 125.1 0 240c0 45.1 17.7 86.8 47.7 120.9c-1.9 24.5-11.4 46.3-21.4 62.9zM144 272a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm144-32a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm80 32a32 32 0 1 0 0-64 32 32 0 1 0 0 64z'/>"
|
||||
},
|
||||
{
|
||||
"uuid": "a1b2c3d4e5f6789abcdef0123456789ab",
|
||||
"iconId": "newspaper",
|
||||
"family": "Font Awesome",
|
||||
"sub-family": "solid",
|
||||
"name": "Newspaper",
|
||||
"path": "<path d='M168 80c-13.3 0-24 10.7-24 24l0 304c0 8.4-1.4 16.5-4.1 24L440 432c13.3 0 24-10.7 24-24l0-304c0-13.3-10.7-24-24-24L168 80zM72 480c-39.8 0-72-32.2-72-72L0 112C0 98.7 10.7 88 24 88s24 10.7 24 24l0 296c0 13.3 10.7 24 24 24s24-10.7 24-24l0-304c0-39.8 32.2-72 72-72l272 0c39.8 0 72 32.2 72 72l0 304c0 39.8-32.2 72-72 72L72 480zM176 136c0-13.3 10.7-24 24-24l96 0c13.3 0 24 10.7 24 24l0 80c0 13.3-10.7 24-24 24l-96 0c-13.3 0-24-10.7-24-24l0-80zm200-24l32 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-32 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm0 80l32 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-32 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zM200 272l208 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-208 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm0 80l208 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-208 0c-13.3 0-24-10.7-24-24s10.7-24 24-24z'/>"
|
||||
}
|
||||
];
|
||||
|
||||
// Handle icon selection from dropdown
|
||||
const handleIconChange = (selectedIconId) => {
|
||||
const selectedIcon = iconData.find(icon => icon.uuid === selectedIconId);
|
||||
|
||||
if (selectedIcon && onIconChange) {
|
||||
onIconChange({
|
||||
iconSvgId: selectedIconId, // UUID of the selected icon
|
||||
iconSvgPath: selectedIcon.path // SVG path of the selected icon
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<SelectControl
|
||||
label={__("Select Icon")}
|
||||
value={iconSvgId}
|
||||
options={iconData.map((icon) => ({
|
||||
label: icon.name,
|
||||
value: icon.uuid, // Store the UUID as the value
|
||||
}))}
|
||||
onChange={handleIconChange}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
18
blocks/button/components/iconsvgs.json
Normal file
18
blocks/button/components/iconsvgs.json
Normal file
@ -0,0 +1,18 @@
|
||||
[
|
||||
{
|
||||
"uuid": "c0a8012345678f3d5b847ad0f8a890f1",
|
||||
"iconId": "comment-dots",
|
||||
"family": "Font Awesome",
|
||||
"sub-family": "solid",
|
||||
"name": "Comment Dots",
|
||||
"path": "<path d='M168.2 384.9c-15-5.4-31.7-3.1-44.6 6.4c-8.2 6-22.3 14.8-39.4 22.7c5.6-14.7 9.9-31.3 11.3-49.4c1-12.9-3.3-25.7-11.8-35.5C60.4 302.8 48 272 48 240c0-79.5 83.3-160 208-160s208 80.5 208 160s-83.3 160-208 160c-31.6 0-61.3-5.5-87.8-15.1zM26.3 423.8c-1.6 2.7-3.3 5.4-5.1 8.1l-.3 .5c-1.6 2.3-3.2 4.6-4.8 6.9c-3.5 4.7-7.3 9.3-11.3 13.5c-4.6 4.6-5.9 11.4-3.4 17.4c2.5 6 8.3 9.9 14.8 9.9c5.1 0 10.2-.3 15.3-.8l.7-.1c4.4-.5 8.8-1.1 13.2-1.9c.8-.1 1.6-.3 2.4-.5c17.8-3.5 34.9-9.5 50.1-16.1c22.9-10 42.4-21.9 54.3-30.6c31.8 11.5 67 17.9 104.1 17.9c141.4 0 256-93.1 256-208S397.4 32 256 32S0 125.1 0 240c0 45.1 17.7 86.8 47.7 120.9c-1.9 24.5-11.4 46.3-21.4 62.9zM144 272a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm144-32a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm80 32a32 32 0 1 0 0-64 32 32 0 1 0 0 64z'/>"
|
||||
},
|
||||
{
|
||||
"uuid": "a1b2c3d4e5f6789abcdef0123456789ab",
|
||||
"iconId": "newspaper",
|
||||
"family": "Font Awesome",
|
||||
"sub-family": "solid",
|
||||
"name": "Newspaper",
|
||||
"path": "<path d='M168 80c-13.3 0-24 10.7-24 24l0 304c0 8.4-1.4 16.5-4.1 24L440 432c13.3 0 24-10.7 24-24l0-304c0-13.3-10.7-24-24-24L168 80zM72 480c-39.8 0-72-32.2-72-72L0 112C0 98.7 10.7 88 24 88s24 10.7 24 24l0 296c0 13.3 10.7 24 24 24s24-10.7 24-24l0-304c0-39.8 32.2-72 72-72l272 0c39.8 0 72 32.2 72 72l0 304c0 39.8-32.2 72-72 72L72 480zM176 136c0-13.3 10.7-24 24-24l96 0c13.3 0 24 10.7 24 24l0 80c0 13.3-10.7 24-24 24l-96 0c-13.3 0-24-10.7-24-24l0-80zm200-24l32 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-32 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm0 80l32 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-32 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zM200 272l208 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-208 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm0 80l208 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-208 0c-13.3 0-24-10.7-24-24s10.7-24 24-24z'/>"
|
||||
}
|
||||
]
|
||||
23
blocks/button/icon-svgs.json
Normal file
23
blocks/button/icon-svgs.json
Normal file
@ -0,0 +1,23 @@
|
||||
[
|
||||
{
|
||||
"id": "comment-dots",
|
||||
"family": "Font Awesome",
|
||||
"sub-family": "solid",
|
||||
"name": "Comment Dots",
|
||||
"path": "<path d='M168.2 384.9c-15-5.4-31.7-3.1-44.6 6.4c-8.2 6-22.3 14.8-39.4 22.7c5.6-14.7 9.9-31.3 11.3-49.4c1-12.9-3.3-25.7-11.8-35.5C60.4 302.8 48 272 48 240c0-79.5 83.3-160 208-160s208 80.5 208 160s-83.3 160-208 160c-31.6 0-61.3-5.5-87.8-15.1zM26.3 423.8c-1.6 2.7-3.3 5.4-5.1 8.1l-.3 .5c-1.6 2.3-3.2 4.6-4.8 6.9c-3.5 4.7-7.3 9.3-11.3 13.5c-4.6 4.6-5.9 11.4-3.4 17.4c2.5 6 8.3 9.9 14.8 9.9c5.1 0 10.2-.3 15.3-.8l.7-.1c4.4-.5 8.8-1.1 13.2-1.9c.8-.1 1.6-.3 2.4-.5c17.8-3.5 34.9-9.5 50.1-16.1c22.9-10 42.4-21.9 54.3-30.6c31.8 11.5 67 17.9 104.1 17.9c141.4 0 256-93.1 256-208S397.4 32 256 32S0 125.1 0 240c0 45.1 17.7 86.8 47.7 120.9c-1.9 24.5-11.4 46.3-21.4 62.9zM144 272a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm144-32a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm80 32a32 32 0 1 0 0-64 32 32 0 1 0 0 64z'/>"
|
||||
},
|
||||
{
|
||||
"id": "newspaper",
|
||||
"family": "Font Awesome",
|
||||
"sub-family": "solid",
|
||||
"name": "Newspaper",
|
||||
"path": "<path d='M168 80c-13.3 0-24 10.7-24 24l0 304c0 8.4-1.4 16.5-4.1 24L440 432c13.3 0 24-10.7 24-24l0-304c0-13.3-10.7-24-24-24L168 80zM72 480c-39.8 0-72-32.2-72-72L0 112C0 98.7 10.7 88 24 88s24 10.7 24 24l0 296c0 13.3 10.7 24 24 24s24-10.7 24-24l0-304c0-39.8 32.2-72 72-72l272 0c39.8 0 72 32.2 72 72l0 304c0 39.8-32.2 72-72 72L72 480zM176 136c0-13.3 10.7-24 24-24l96 0c13.3 0 24 10.7 24 24l0 80c0 13.3-10.7 24-24 24l-96 0c-13.3 0-24-10.7-24-24l0-80zm200-24l32 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-32 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm0 80l32 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-32 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zM200 272l208 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-208 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm0 80l208 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-208 0c-13.3 0-24-10.7-24-24s10.7-24 24-24z'/>"
|
||||
},
|
||||
{
|
||||
"id": "map",
|
||||
"family": "Font Awesome",
|
||||
"sub-family": "solid",
|
||||
"name": "Map",
|
||||
"path": "<path d='M565.6 36.2C572.1 40.7 576 48.1 576 56l0 336c0 10-6.2 18.9-15.5 22.4l-168 64c-5.2 2-10.9 2.1-16.1 .3L192.5 417.5l-160 61c-7.4 2.8-15.7 1.8-22.2-2.7S0 463.9 0 456L0 120c0-10 6.1-18.9 15.5-22.4l168-64c5.2-2 10.9-2.1 16.1-.3L383.5 94.5l160-61c7.4-2.8 15.7-1.8 22.2 2.7zM48 136.5l0 284.6 120-45.7 0-284.6L48 136.5zM360 422.7l0-285.4-144-48 0 285.4 144 48zm48-1.5l120-45.7 0-284.6L408 136.5l0 284.6z'/>"
|
||||
}
|
||||
]
|
||||
30
blocks/button/lcp-button.php
Normal file
30
blocks/button/lcp-button.php
Normal file
@ -0,0 +1,30 @@
|
||||
<?php
|
||||
/**
|
||||
* Plugin Name: Button
|
||||
* Description: Example block scaffolded with Create Block tool.
|
||||
* Requires at least: 6.6
|
||||
* Requires PHP: 7.2
|
||||
* Version: 0.1.0
|
||||
* Author: The WordPress Contributors
|
||||
* License: GPL-2.0-or-later
|
||||
* License URI: https://www.gnu.org/licenses/gpl-2.0.html
|
||||
* Text Domain: button
|
||||
*
|
||||
* @package CreateBlock
|
||||
*/
|
||||
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit; // Exit if accessed directly.
|
||||
}
|
||||
|
||||
/**
|
||||
* Registers the block using the metadata loaded from the `block.json` file.
|
||||
* Behind the scenes, it registers also all assets so they can be enqueued
|
||||
* through the block editor in the corresponding context.
|
||||
*
|
||||
* @see https://developer.wordpress.org/reference/functions/register_block_type/
|
||||
*/
|
||||
function create_block_button_block_init() {
|
||||
register_block_type( __DIR__ . '/build' );
|
||||
}
|
||||
add_action( 'init', 'create_block_button_block_init' );
|
||||
20
blocks/button/package.json
Normal file
20
blocks/button/package.json
Normal file
@ -0,0 +1,20 @@
|
||||
{
|
||||
"name": "button",
|
||||
"version": "0.1.0",
|
||||
"description": "Example block scaffolded with Create Block tool.",
|
||||
"author": "The WordPress Contributors",
|
||||
"license": "GPL-2.0-or-later",
|
||||
"main": "build/index.js",
|
||||
"scripts": {
|
||||
"build": "wp-scripts build",
|
||||
"format": "wp-scripts format",
|
||||
"lint:css": "wp-scripts lint-style",
|
||||
"lint:js": "wp-scripts lint-js",
|
||||
"packages-update": "wp-scripts packages-update",
|
||||
"plugin-zip": "wp-scripts plugin-zip",
|
||||
"start": "wp-scripts start"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@wordpress/scripts": "^30.6.0"
|
||||
}
|
||||
}
|
||||
55
blocks/button/readme.txt
Normal file
55
blocks/button/readme.txt
Normal file
@ -0,0 +1,55 @@
|
||||
=== Button ===
|
||||
Contributors: The WordPress Contributors
|
||||
Tags: block
|
||||
Tested up to: 6.6
|
||||
Stable tag: 0.1.0
|
||||
License: GPL-2.0-or-later
|
||||
License URI: https://www.gnu.org/licenses/gpl-2.0.html
|
||||
|
||||
Example block scaffolded with Create Block tool.
|
||||
|
||||
== Description ==
|
||||
|
||||
This is the long description. No limit, and you can use Markdown (as well as in the following sections).
|
||||
|
||||
For backwards compatibility, if this section is missing, the full length of the short description will be used, and
|
||||
Markdown parsed.
|
||||
|
||||
== Installation ==
|
||||
|
||||
This section describes how to install the plugin and get it working.
|
||||
|
||||
e.g.
|
||||
|
||||
1. Upload the plugin files to the `/wp-content/plugins/button` directory, or install the plugin through the WordPress plugins screen directly.
|
||||
1. Activate the plugin through the 'Plugins' screen in WordPress
|
||||
|
||||
|
||||
== Frequently Asked Questions ==
|
||||
|
||||
= A question that someone might have =
|
||||
|
||||
An answer to that question.
|
||||
|
||||
= What about foo bar? =
|
||||
|
||||
Answer to foo bar dilemma.
|
||||
|
||||
== Screenshots ==
|
||||
|
||||
1. This screen shot description corresponds to screenshot-1.(png|jpg|jpeg|gif). Note that the screenshot is taken from
|
||||
the /assets directory or the directory that contains the stable readme.txt (tags or trunk). Screenshots in the /assets
|
||||
directory take precedence. For example, `/assets/screenshot-1.png` would win over `/tags/4.3/screenshot-1.png`
|
||||
(or jpg, jpeg, gif).
|
||||
2. This is the second screen shot
|
||||
|
||||
== Changelog ==
|
||||
|
||||
= 0.1.0 =
|
||||
* Release
|
||||
|
||||
== Arbitrary section ==
|
||||
|
||||
You may provide arbitrary sections, in the same format as the ones above. This may be of use for extremely complicated
|
||||
plugins where more information needs to be conveyed that doesn't fit into the categories of "description" or
|
||||
"installation." Arbitrary sections will be shown below the built-in sections outlined above.
|
||||
46
blocks/button/src/block.json
Normal file
46
blocks/button/src/block.json
Normal file
@ -0,0 +1,46 @@
|
||||
{
|
||||
"$schema": "https://schemas.wp.org/trunk/block.json",
|
||||
"apiVersion": 3,
|
||||
"name": "lcp/button",
|
||||
"version": "0.1.0",
|
||||
"title": "Button",
|
||||
"category": "widgets",
|
||||
"icon": "smiley",
|
||||
"description": "Example block scaffolded with Create Block tool.",
|
||||
"example": {},
|
||||
"supports": {
|
||||
"html": false
|
||||
},
|
||||
"attributes": {
|
||||
"buttonFunction": {
|
||||
"type": "string",
|
||||
"default": "customUrl"
|
||||
},
|
||||
"buttonText": {
|
||||
"type": "string",
|
||||
"default": "Button Text"
|
||||
},
|
||||
"displayIcon": {
|
||||
"type": "boolean"
|
||||
},
|
||||
"iconSource": {
|
||||
"type": "string",
|
||||
"default": "svgPath"
|
||||
},
|
||||
"iconSvgPath": {
|
||||
"type": "string"
|
||||
},
|
||||
"iconSvgId": {
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
"popUpId": {
|
||||
"type": "number"
|
||||
}
|
||||
},
|
||||
"textdomain": "button",
|
||||
"editorScript": "file:./index.js",
|
||||
"editorStyle": "file:./index.css",
|
||||
"style": "file:./style-index.css",
|
||||
"viewScript": "file:./view.js"
|
||||
}
|
||||
152
blocks/button/src/edit.js
Normal file
152
blocks/button/src/edit.js
Normal file
@ -0,0 +1,152 @@
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
|
||||
import { PanelBody, SelectControl, TextControl, TextareaControl, ToggleControl } from '@wordpress/components';
|
||||
import { useState, useEffect } from '@wordpress/element';
|
||||
import './editor.scss';
|
||||
import { useSelect } from '@wordpress/data';
|
||||
import { IconSelectControl } from '../components/IconSelectControl';
|
||||
|
||||
|
||||
// Sample JSON data for icons (with UUIDs)
|
||||
const iconData = [
|
||||
{
|
||||
"uuid": "c0a8012345678f3d5b847ad0f8a890f1",
|
||||
"iconId": "comment-dots",
|
||||
"family": "Font Awesome",
|
||||
"sub-family": "solid",
|
||||
"name": "Comment Dots",
|
||||
"path": "<path d='M168.2 384.9c-15-5.4-31.7-3.1-44.6 6.4c-8.2 6-22.3 14.8-39.4 22.7c5.6-14.7 9.9-31.3 11.3-49.4c1-12.9-3.3-25.7-11.8-35.5C60.4 302.8 48 272 48 240c0-79.5 83.3-160 208-160s208 80.5 208 160s-83.3 160-208 160c-31.6 0-61.3-5.5-87.8-15.1zM26.3 423.8c-1.6 2.7-3.3 5.4-5.1 8.1l-.3 .5c-1.6 2.3-3.2 4.6-4.8 6.9c-3.5 4.7-7.3 9.3-11.3 13.5c-4.6 4.6-5.9 11.4-3.4 17.4c2.5 6 8.3 9.9 14.8 9.9c5.1 0 10.2-.3 15.3-.8l.7-.1c4.4-.5 8.8-1.1 13.2-1.9c.8-.1 1.6-.3 2.4-.5c17.8-3.5 34.9-9.5 50.1-16.1c22.9-10 42.4-21.9 54.3-30.6c31.8 11.5 67 17.9 104.1 17.9c141.4 0 256-93.1 256-208S397.4 32 256 32S0 125.1 0 240c0 45.1 17.7 86.8 47.7 120.9c-1.9 24.5-11.4 46.3-21.4 62.9zM144 272a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm144-32a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm80 32a32 32 0 1 0 0-64 32 32 0 1 0 0 64z'/>"
|
||||
},
|
||||
{
|
||||
"uuid": "a1b2c3d4e5f6789abcdef0123456789ab",
|
||||
"iconId": "newspaper",
|
||||
"family": "Font Awesome",
|
||||
"sub-family": "solid",
|
||||
"name": "Newspaper",
|
||||
"path": "<path d='M168 80c-13.3 0-24 10.7-24 24l0 304c0 8.4-1.4 16.5-4.1 24L440 432c13.3 0 24-10.7 24-24l0-304c0-13.3-10.7-24-24-24L168 80zM72 480c-39.8 0-72-32.2-72-72L0 112C0 98.7 10.7 88 24 88s24 10.7 24 24l0 296c0 13.3 10.7 24 24 24s24-10.7 24-24l0-304c0-39.8 32.2-72 72-72l272 0c39.8 0 72 32.2 72 72l0 304c0 39.8-32.2 72-72 72L72 480zM176 136c0-13.3 10.7-24 24-24l96 0c13.3 0 24 10.7 24 24l0 80c0 13.3-10.7 24-24 24l-96 0c-13.3 0-24-10.7-24-24l0-80zm200-24l32 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-32 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm0 80l32 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-32 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zM200 272l208 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-208 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm0 80l208 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-208 0c-13.3 0-24-10.7-24-24s10.7-24 24-24z'/>"
|
||||
}
|
||||
];
|
||||
|
||||
export default function Edit(props) {
|
||||
const { attributes, setAttributes } = props;
|
||||
const { buttonFunction, popUpId, buttonText, iconSvgId, iconSvgPath, displayIcon, iconSource} = attributes; // iconSvgId holds the UUID and iconSvgPath holds the SVG path
|
||||
const [popups, setPopups] = useState([]);
|
||||
|
||||
// Fetch published popups (lcp-popup CPT)
|
||||
useEffect(() => {
|
||||
const fetchPopups = async () => {
|
||||
const response = await fetch('/wp-json/wp/v2/lcp-popup');
|
||||
const data = await response.json();
|
||||
setPopups(data);
|
||||
};
|
||||
fetchPopups();
|
||||
}, []);
|
||||
|
||||
// Handle icon selection from dropdown
|
||||
const handleIconChange = (selectedIconId) => {
|
||||
console.log("an icon is selected");
|
||||
// Find the selected icon from the iconData array using the UUID
|
||||
const selectedIcon = iconData.find(icon => icon.uuid === selectedIconId);
|
||||
|
||||
if (selectedIcon) {
|
||||
// Update both iconSvgId (UUID) and iconSvgPath (SVG path)
|
||||
setAttributes({
|
||||
iconSvgId: selectedIconId, // UUID of the selected icon
|
||||
iconSvgPath: selectedIcon.path // SVG path of the selected icon
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleToggleChange = (value) => {
|
||||
setAttributes({ displayIcon: value });
|
||||
};
|
||||
|
||||
const iconSourceOptions = [
|
||||
{ value: 'manualSvgPath', label: 'SVG Path' },
|
||||
{ value: 'iconSelector', label: 'Select Icon' },
|
||||
];
|
||||
|
||||
const buttonFunctionOptions = [
|
||||
{ value: 'customUrl', label: 'Custom URL' },
|
||||
{ value: 'openPopup', label: 'Open Popup' },
|
||||
{ value: 'showLoginForm', label: 'Show Login Form' },
|
||||
{ value: 'logOut', label: 'Open Popup' },
|
||||
{ value: 'shareCurrentPost', label: 'Share Current Post' }
|
||||
];
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<InspectorControls>
|
||||
|
||||
<PanelBody title={__("Button Settings")}>
|
||||
<SelectControl
|
||||
label={__("Popup")}
|
||||
value={popUpId}
|
||||
options={iconSourceOptions}
|
||||
onChange={(value) => setAttributes({ iconSource })}
|
||||
/>
|
||||
{buttonFunction === 'openPopup' && (
|
||||
<SelectControl
|
||||
label={__("Popup")}
|
||||
value={popUpId}
|
||||
options={iconSourceOptions}
|
||||
onChange={(value) => setAttributes({ iconSource })}
|
||||
/>
|
||||
)}
|
||||
<TextControl
|
||||
label={__("Button Text")}
|
||||
value={buttonText}
|
||||
onChange={(value) => setAttributes({ buttonText: value })}
|
||||
/>
|
||||
<ToggleControl
|
||||
label="Display Icon"
|
||||
checked={displayIcon}
|
||||
onChange={handleToggleChange}
|
||||
/>
|
||||
{displayIcon && (
|
||||
<>
|
||||
<SelectControl
|
||||
label={__("Icon Source")}
|
||||
value={iconSource}
|
||||
options={iconSourceOptions}
|
||||
onChange={(value) => setAttributes({ iconSource: value })}
|
||||
/>
|
||||
{iconSource === 'manualSvgPath' && (
|
||||
<TextareaControl
|
||||
label="Icon SVG Path"
|
||||
value={iconSvgPath}
|
||||
onChange={(value) => props.setAttributes({ iconSvgPath: value })}
|
||||
/>
|
||||
)}
|
||||
{iconSource === 'iconSelector' && (
|
||||
<>
|
||||
<SelectControl
|
||||
label={__("Icon")}
|
||||
value={iconSvgId}
|
||||
options={iconData.map((icon) => ({
|
||||
label: icon.name,
|
||||
value: icon.uuid, // Store the UUID as the value
|
||||
}))}
|
||||
onChange={handleIconChange}
|
||||
/>
|
||||
<IconSelectControl
|
||||
value={props.attributes.icon}
|
||||
onChange={handleIconChange}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
|
||||
</PanelBody>
|
||||
</InspectorControls>
|
||||
<div {...useBlockProps()}>
|
||||
<div className="button-container">
|
||||
<span>{buttonText}</span>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
9
blocks/button/src/editor.scss
Normal file
9
blocks/button/src/editor.scss
Normal file
@ -0,0 +1,9 @@
|
||||
/**
|
||||
* The following styles get applied inside the editor only.
|
||||
*
|
||||
* Replace them with your own styles or remove the file completely.
|
||||
*/
|
||||
|
||||
.wp-block-create-block-button {
|
||||
border: 1px dotted #f00;
|
||||
}
|
||||
39
blocks/button/src/index.js
Normal file
39
blocks/button/src/index.js
Normal file
@ -0,0 +1,39 @@
|
||||
/**
|
||||
* Registers a new block provided a unique name and an object defining its behavior.
|
||||
*
|
||||
* @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
|
||||
*/
|
||||
import { registerBlockType } from '@wordpress/blocks';
|
||||
|
||||
/**
|
||||
* Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
|
||||
* All files containing `style` keyword are bundled together. The code used
|
||||
* gets applied both to the front of your site and to the editor.
|
||||
*
|
||||
* @see https://www.npmjs.com/package/@wordpress/scripts#using-css
|
||||
*/
|
||||
import './style.scss';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import Edit from './edit';
|
||||
import save from './save';
|
||||
import metadata from './block.json';
|
||||
|
||||
/**
|
||||
* Every block starts by registering a new block type definition.
|
||||
*
|
||||
* @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
|
||||
*/
|
||||
registerBlockType( metadata.name, {
|
||||
/**
|
||||
* @see ./edit.js
|
||||
*/
|
||||
edit: Edit,
|
||||
|
||||
/**
|
||||
* @see ./save.js
|
||||
*/
|
||||
save,
|
||||
} );
|
||||
25
blocks/button/src/save.js
Normal file
25
blocks/button/src/save.js
Normal file
@ -0,0 +1,25 @@
|
||||
import { useBlockProps } from '@wordpress/block-editor';
|
||||
|
||||
export default function save(props) {
|
||||
const { attributes } = props;
|
||||
const { type, popUpId, buttonText, iconSvgPath } = attributes; // Destructure buttonText and iconSvgPath from attributes
|
||||
|
||||
// Get the block props for the button
|
||||
const blockProps = useBlockProps.save();
|
||||
|
||||
// Conditionally add data-open-popup if type is 'openPopUp' and popUpId is not empty
|
||||
if (type === 'openPopUp' && popUpId) {
|
||||
blockProps['data-open-popup'] = popUpId; // Add the data attribute dynamically
|
||||
}
|
||||
|
||||
return (
|
||||
<button {...blockProps}>
|
||||
{/* Conditionally render the icon if iconSvgPath is set */}
|
||||
{iconSvgPath && (
|
||||
<svg className="icon" viewBox="0 0 24 24" width="100" height="100" dangerouslySetInnerHTML={{ __html: iconSvgPath }} />
|
||||
)}
|
||||
{/* Render the button text */}
|
||||
{buttonText || 'Button'} {/* Use buttonText or fallback */}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
12
blocks/button/src/style.scss
Normal file
12
blocks/button/src/style.scss
Normal file
@ -0,0 +1,12 @@
|
||||
/**
|
||||
* The following styles get applied both on the front of your site
|
||||
* and in the editor.
|
||||
*
|
||||
* Replace them with your own styles or remove the file completely.
|
||||
*/
|
||||
|
||||
.wp-block-create-block-button {
|
||||
background-color: #21759b;
|
||||
color: #fff;
|
||||
padding: 2px;
|
||||
}
|
||||
25
blocks/button/src/view.js
Normal file
25
blocks/button/src/view.js
Normal file
@ -0,0 +1,25 @@
|
||||
/**
|
||||
* Use this file for JavaScript code that you want to run in the front-end
|
||||
* on posts/pages that contain this block.
|
||||
*
|
||||
* When this file is defined as the value of the `viewScript` property
|
||||
* in `block.json` it will be enqueued on the front end of the site.
|
||||
*
|
||||
* Example:
|
||||
*
|
||||
* ```js
|
||||
* {
|
||||
* "viewScript": "file:./view.js"
|
||||
* }
|
||||
* ```
|
||||
*
|
||||
* If you're not making any changes to this file because your project doesn't need any
|
||||
* JavaScript running in the front-end, then you should delete this file and remove
|
||||
* the `viewScript` property from `block.json`.
|
||||
*
|
||||
* @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#view-script
|
||||
*/
|
||||
|
||||
/* eslint-disable no-console */
|
||||
console.log( 'Hello World! (from create-block-button block)' );
|
||||
/* eslint-enable no-console */
|
||||
18
blocks/lcp-dynamic-container/.editorconfig
Normal file
18
blocks/lcp-dynamic-container/.editorconfig
Normal file
@ -0,0 +1,18 @@
|
||||
# This file is for unifying the coding style for different editors and IDEs
|
||||
# editorconfig.org
|
||||
|
||||
# WordPress Coding Standards
|
||||
# https://make.wordpress.org/core/handbook/coding-standards/
|
||||
|
||||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
end_of_line = lf
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
indent_style = tab
|
||||
|
||||
[*.{yml,yaml}]
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
30
blocks/lcp-dynamic-container/.gitignore
vendored
Normal file
30
blocks/lcp-dynamic-container/.gitignore
vendored
Normal file
@ -0,0 +1,30 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# Coverage directory used by tools like istanbul
|
||||
coverage
|
||||
|
||||
# Compiled binary addons (https://nodejs.org/api/addons.html)
|
||||
build/Release
|
||||
|
||||
# Dependency directories
|
||||
node_modules/
|
||||
|
||||
# Optional npm cache directory
|
||||
.npm
|
||||
|
||||
# Optional eslint cache
|
||||
.eslintcache
|
||||
|
||||
# Output of `npm pack`
|
||||
*.tgz
|
||||
|
||||
# Output of `wp-scripts plugin-zip`
|
||||
*.zip
|
||||
|
||||
# dotenv environment variables file
|
||||
.env
|
||||
131
blocks/lcp-dynamic-container/lcp-dynamic-container.php
Normal file
131
blocks/lcp-dynamic-container/lcp-dynamic-container.php
Normal file
@ -0,0 +1,131 @@
|
||||
<?php /**
|
||||
* Function to generate random class and add dynamic padding styles
|
||||
*/
|
||||
function render_lcp_container( $attributes, $content ) {
|
||||
// Debugging: Check the passed attributes
|
||||
//var_dump($attributes);
|
||||
|
||||
// Generate a random class name (optional, could be customized)
|
||||
$random_class = 'lcp-container-' . wp_generate_password( 12, false, false );
|
||||
|
||||
// Get the padding and backgroundColor attributes
|
||||
$padding = isset( $attributes['padding'] ) ? $attributes['padding'] : array();
|
||||
$background_color = isset( $attributes['backgroundColor'] ) ? $attributes['backgroundColor'] : '#ffffff'; // Default color
|
||||
|
||||
// Debugging: Check padding and background color
|
||||
error_log(print_r($padding, true));
|
||||
error_log(print_r($background_color, true));
|
||||
|
||||
// Check if all padding values are the same across all sizes
|
||||
$same_padding = true;
|
||||
$padding_top = $padding['extraLarge']['top'];
|
||||
$padding_right = $padding['extraLarge']['right'];
|
||||
$padding_bottom = $padding['extraLarge']['bottom'];
|
||||
$padding_left = $padding['extraLarge']['left'];
|
||||
|
||||
// Compare the padding for all other sizes (large, medium, small)
|
||||
foreach ( ['large', 'medium', 'small'] as $size ) {
|
||||
if (
|
||||
$padding[$size]['top'] !== $padding_top ||
|
||||
$padding[$size]['right'] !== $padding_right ||
|
||||
$padding[$size]['bottom'] !== $padding_bottom ||
|
||||
$padding[$size]['left'] !== $padding_left
|
||||
) {
|
||||
$same_padding = false;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// Prepare the inline style or media queries
|
||||
$style = '';
|
||||
|
||||
// Add background-color to the inline style
|
||||
$style .= sprintf( 'background-color: %s;', esc_attr( $background_color ) );
|
||||
|
||||
if ( $same_padding ) {
|
||||
// If all padding values are the same, use inline style
|
||||
$style .= sprintf(
|
||||
'padding-top: %s; padding-right: %s; padding-bottom: %s; padding-left: %s;',
|
||||
esc_attr( $padding_top ),
|
||||
esc_attr( $padding_right ),
|
||||
esc_attr( $padding_bottom ),
|
||||
esc_attr( $padding_left )
|
||||
);
|
||||
} else {
|
||||
// If padding is different, generate media queries for different sizes
|
||||
$style .= sprintf(
|
||||
'@media (min-width: 1200px) { .%s { padding-top: %s; padding-right: %s; padding-bottom: %s; padding-left: %s; } }',
|
||||
esc_attr( $random_class ),
|
||||
esc_attr( $padding['extraLarge']['top'] ),
|
||||
esc_attr( $padding['extraLarge']['right'] ),
|
||||
esc_attr( $padding['extraLarge']['bottom'] ),
|
||||
esc_attr( $padding['extraLarge']['left'] )
|
||||
);
|
||||
|
||||
$style .= sprintf(
|
||||
'@media (min-width: 1024px) { .%s { padding-top: %s; padding-right: %s; padding-bottom: %s; padding-left: %s; } }',
|
||||
esc_attr( $random_class ),
|
||||
esc_attr( $padding['large']['top'] ),
|
||||
esc_attr( $padding['large']['right'] ),
|
||||
esc_attr( $padding['large']['bottom'] ),
|
||||
esc_attr( $padding['large']['left'] )
|
||||
);
|
||||
|
||||
$style .= sprintf(
|
||||
'@media (min-width: 768px) { .%s { padding-top: %s; padding-right: %s; padding-bottom: %s; padding-left: %s; } }',
|
||||
esc_attr( $random_class ),
|
||||
esc_attr( $padding['medium']['top'] ),
|
||||
esc_attr( $padding['medium']['right'] ),
|
||||
esc_attr( $padding['medium']['bottom'] ),
|
||||
esc_attr( $padding['medium']['left'] )
|
||||
);
|
||||
|
||||
$style .= sprintf(
|
||||
'@media (max-width: 767px) { .%s { padding-top: %s; padding-right: %s; padding-bottom: %s; padding-left: %s; } }',
|
||||
esc_attr( $random_class ),
|
||||
esc_attr( $padding['small']['top'] ),
|
||||
esc_attr( $padding['small']['right'] ),
|
||||
esc_attr( $padding['small']['bottom'] ),
|
||||
esc_attr( $padding['small']['left'] )
|
||||
);
|
||||
}
|
||||
|
||||
// Generate the <style> tag with the final CSS (either inline or media queries)
|
||||
$style_tag = '';
|
||||
if ( ! empty( $style ) ) {
|
||||
$style_tag = sprintf( '<style>.%s { %s }</style>', esc_attr( $random_class ), $style );
|
||||
}
|
||||
|
||||
// Output the content wrapped in the div with the random class and padding styles
|
||||
return $style_tag . sprintf(
|
||||
'<div class="lcp-container %s">%s</div>',
|
||||
esc_attr( $random_class ),
|
||||
$content
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Function to return the media query breakpoint based on the size
|
||||
*/
|
||||
function get_media_query_breakpoint( $size ) {
|
||||
// Define breakpoints for each size
|
||||
$breakpoints = array(
|
||||
'extraLarge' => '1200px',
|
||||
'large' => '1024px',
|
||||
'medium' => '768px',
|
||||
'small' => '480px',
|
||||
);
|
||||
|
||||
return isset( $breakpoints[$size] ) ? $breakpoints[$size] : '480px';
|
||||
}
|
||||
|
||||
/**
|
||||
* Function to initialize the block
|
||||
*/
|
||||
function lcp_dynamic_container_block_init() {
|
||||
register_block_type( __DIR__ . '/build', array(
|
||||
'render_callback' => 'render_lcp_dynamic_container', // Add the render callback here
|
||||
));
|
||||
}
|
||||
add_action( 'init', 'lcp_dynamic_container_block_init' );
|
||||
20
blocks/lcp-dynamic-container/package.json
Normal file
20
blocks/lcp-dynamic-container/package.json
Normal file
@ -0,0 +1,20 @@
|
||||
{
|
||||
"name": "lcp-viewport",
|
||||
"version": "0.1.0",
|
||||
"description": "Example block scaffolded with Create Block tool.",
|
||||
"author": "The WordPress Contributors",
|
||||
"license": "GPL-2.0-or-later",
|
||||
"main": "build/index.js",
|
||||
"scripts": {
|
||||
"build": "wp-scripts build",
|
||||
"format": "wp-scripts format",
|
||||
"lint:css": "wp-scripts lint-style",
|
||||
"lint:js": "wp-scripts lint-js",
|
||||
"packages-update": "wp-scripts packages-update",
|
||||
"plugin-zip": "wp-scripts plugin-zip",
|
||||
"start": "wp-scripts start"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@wordpress/scripts": "^30.4.0"
|
||||
}
|
||||
}
|
||||
55
blocks/lcp-dynamic-container/readme.txt
Normal file
55
blocks/lcp-dynamic-container/readme.txt
Normal file
@ -0,0 +1,55 @@
|
||||
=== Lcp Viewport ===
|
||||
Contributors: The WordPress Contributors
|
||||
Tags: block
|
||||
Tested up to: 6.6
|
||||
Stable tag: 0.1.0
|
||||
License: GPL-2.0-or-later
|
||||
License URI: https://www.gnu.org/licenses/gpl-2.0.html
|
||||
|
||||
Example block scaffolded with Create Block tool.
|
||||
|
||||
== Description ==
|
||||
|
||||
This is the long description. No limit, and you can use Markdown (as well as in the following sections).
|
||||
|
||||
For backwards compatibility, if this section is missing, the full length of the short description will be used, and
|
||||
Markdown parsed.
|
||||
|
||||
== Installation ==
|
||||
|
||||
This section describes how to install the plugin and get it working.
|
||||
|
||||
e.g.
|
||||
|
||||
1. Upload the plugin files to the `/wp-content/plugins/lcp-viewport` directory, or install the plugin through the WordPress plugins screen directly.
|
||||
1. Activate the plugin through the 'Plugins' screen in WordPress
|
||||
|
||||
|
||||
== Frequently Asked Questions ==
|
||||
|
||||
= A question that someone might have =
|
||||
|
||||
An answer to that question.
|
||||
|
||||
= What about foo bar? =
|
||||
|
||||
Answer to foo bar dilemma.
|
||||
|
||||
== Screenshots ==
|
||||
|
||||
1. This screen shot description corresponds to screenshot-1.(png|jpg|jpeg|gif). Note that the screenshot is taken from
|
||||
the /assets directory or the directory that contains the stable readme.txt (tags or trunk). Screenshots in the /assets
|
||||
directory take precedence. For example, `/assets/screenshot-1.png` would win over `/tags/4.3/screenshot-1.png`
|
||||
(or jpg, jpeg, gif).
|
||||
2. This is the second screen shot
|
||||
|
||||
== Changelog ==
|
||||
|
||||
= 0.1.0 =
|
||||
* Release
|
||||
|
||||
== Arbitrary section ==
|
||||
|
||||
You may provide arbitrary sections, in the same format as the ones above. This may be of use for extremely complicated
|
||||
plugins where more information needs to be conveyed that doesn't fit into the categories of "description" or
|
||||
"installation." Arbitrary sections will be shown below the built-in sections outlined above.
|
||||
136
blocks/lcp-dynamic-container/src/block.json
Normal file
136
blocks/lcp-dynamic-container/src/block.json
Normal file
@ -0,0 +1,136 @@
|
||||
{
|
||||
"$schema": "https://schemas.wp.org/trunk/block.json",
|
||||
"apiVersion": 3,
|
||||
"name": "lcp/dynamic-container",
|
||||
"version": "0.1.0",
|
||||
"title": "Dynamic Container",
|
||||
"category": "widgets",
|
||||
"icon": "smiley",
|
||||
"description": "A general purpose container that uses dynamic rendering",
|
||||
"example": {},
|
||||
"supports": {
|
||||
"anchor": true,
|
||||
"align": [ "left", "right", "wide", "full" ],
|
||||
"background": {
|
||||
"backgroundImage": true,
|
||||
"backgroundSize": true,
|
||||
"__experimentalDefaultControls": {
|
||||
"backgroundImage": true
|
||||
}
|
||||
},
|
||||
"color": {
|
||||
"gradients": true,
|
||||
"background": true,
|
||||
"link": true,
|
||||
"__experimentalDefaultControls": {
|
||||
"background": true,
|
||||
"text": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"attributes": {
|
||||
"maxWidthExtraLarge": {
|
||||
"type": "string"
|
||||
},
|
||||
"maxWidthLarge": {
|
||||
"type": "string"
|
||||
},
|
||||
"maxWidthMedium": {
|
||||
"type": "string"
|
||||
},
|
||||
"maxWidthSmall": {
|
||||
"type": "string"
|
||||
},
|
||||
"minHeightExtraLarge": {
|
||||
"type": "string"
|
||||
},
|
||||
"minHeightLarge": {
|
||||
"type": "string"
|
||||
},
|
||||
"minHeightMedium": {
|
||||
"type": "string"
|
||||
},
|
||||
"minHeightSmall": {
|
||||
"type": "string"
|
||||
},
|
||||
"isBox": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"backgroundColor": {
|
||||
"type": "string"
|
||||
},
|
||||
"entranceAnimation": {
|
||||
"type": "string"
|
||||
},
|
||||
"exitAnimation": {
|
||||
"type": "string"
|
||||
},
|
||||
|
||||
"overflow": {
|
||||
"type": "string"
|
||||
},
|
||||
"padding": {
|
||||
"type": "object",
|
||||
"default": {
|
||||
"extraLarge": {
|
||||
"top": "0",
|
||||
"right": "0",
|
||||
"bottom": "0",
|
||||
"left": "0"
|
||||
},
|
||||
"large": {
|
||||
"top": "0",
|
||||
"right": "0",
|
||||
"bottom": "0",
|
||||
"left": "0"
|
||||
},
|
||||
"medium": {
|
||||
"top": "0",
|
||||
"right": "0",
|
||||
"bottom": "0",
|
||||
"left": "0"
|
||||
},
|
||||
"small": {
|
||||
"top": "0",
|
||||
"right": "0",
|
||||
"bottom": "0",
|
||||
"left": "0"
|
||||
}
|
||||
}
|
||||
},
|
||||
"margin": {
|
||||
"type": "object",
|
||||
"default": {
|
||||
"extraLarge": {
|
||||
"top": "12px",
|
||||
"right": "0",
|
||||
"bottom": "12px",
|
||||
"left": "0"
|
||||
},
|
||||
"large": {
|
||||
"top": "12px",
|
||||
"right": "0",
|
||||
"bottom": "12px",
|
||||
"left": "0"
|
||||
},
|
||||
"medium": {
|
||||
"top": "12px",
|
||||
"right": "0",
|
||||
"bottom": "12px",
|
||||
"left": "0"
|
||||
},
|
||||
"small": {
|
||||
"top": "12px",
|
||||
"right": "0",
|
||||
"bottom": "12px",
|
||||
"left": "0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"textdomain": "lcp",
|
||||
"editorScript": "file:./index.js",
|
||||
"editorStyle": "file:./index.css",
|
||||
"style": "file:./style-index.css",
|
||||
"viewScript": "file:./view.js"}
|
||||
211
blocks/lcp-dynamic-container/src/edit.js
Normal file
211
blocks/lcp-dynamic-container/src/edit.js
Normal file
@ -0,0 +1,211 @@
|
||||
import { useBlockProps, InnerBlocks, InspectorControls } from '@wordpress/block-editor';
|
||||
import { __experimentalToggleGroupControl as ToggleGroupControl,
|
||||
__experimentalToggleGroupControlOption as ToggleGroupControlOption, __experimentalUnitControl as UnitControl, BaseControl, ToggleControl, ColorPalette, Popover, Button } from '@wordpress/components';
|
||||
import { useState, useEffect } from 'react';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
|
||||
/**
|
||||
* The edit function describes the structure of your block in the context of the editor.
|
||||
* This represents what the editor will render when the block is used.
|
||||
*
|
||||
* @param {Object} props - The props for the block.
|
||||
* @return {Element} Element to render.
|
||||
*/
|
||||
export default function Edit({ attributes, setAttributes }) {
|
||||
const blockProps = useBlockProps();
|
||||
const { padding, maxWidthLarge, maxWidthMedium, maxWidthSmall, minHeightLarge, minHeightMedium, minHeightSmall, backgroundColor } = attributes; // Destructure necessary attributes
|
||||
|
||||
// State for independent padding toggle
|
||||
const [isIndependentLarge, setIsIndependentLarge] = useState(false);
|
||||
|
||||
// Toggle to show or hide the color picker popover
|
||||
const [showColorPopover, setShowColorPopover] = useState(false);
|
||||
const [selectedColor, setSelectedColor] = useState(backgroundColor || '#ffffff'); // Default color
|
||||
|
||||
// Toggle padding for individual sizes
|
||||
const handleToggleChange = () => {
|
||||
setIsIndependentLarge(!isIndependentLarge);
|
||||
};
|
||||
|
||||
// Update padding for all sizes
|
||||
const updatePaddingForAllSizes = (newValue) => {
|
||||
const newPadding = {
|
||||
extraLarge: { top: newValue, right: newValue, bottom: newValue, left: newValue },
|
||||
large: { top: newValue, right: newValue, bottom: newValue, left: newValue },
|
||||
medium: { top: newValue, right: newValue, bottom: newValue, left: newValue },
|
||||
small: { top: newValue, right: newValue, bottom: newValue, left: newValue }
|
||||
};
|
||||
setAttributes({ padding: newPadding });
|
||||
};
|
||||
|
||||
// Handle individual padding changes
|
||||
const handlePaddingChange = (size, position, newValue) => {
|
||||
const updatedPadding = { ...padding };
|
||||
updatedPadding[size][position] = newValue;
|
||||
setAttributes({ padding: updatedPadding });
|
||||
};
|
||||
|
||||
// Handle color change
|
||||
const handleColorChange = (color) => {
|
||||
setSelectedColor(color);
|
||||
setAttributes({ backgroundColor: color }); // Update background color
|
||||
};
|
||||
|
||||
// Handle maxWidth change for different sizes
|
||||
const handleMaxWidthChange = (value, size) => {
|
||||
setAttributes({ [`maxWidth${size}`]: value });
|
||||
};
|
||||
|
||||
// Handle minHeight change for different sizes
|
||||
const handleMinHeightChange = (value, size) => {
|
||||
setAttributes({ [`minHeight${size}`]: value });
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
console.log("Updated attributes:", attributes);
|
||||
}, [attributes]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<InspectorControls>
|
||||
<ToggleGroupControl
|
||||
label="my label"
|
||||
value="vertical"
|
||||
isBlock
|
||||
__nextHasNoMarginBottom
|
||||
__next40pxDefaultSize
|
||||
>
|
||||
<ToggleGroupControlOption value="horizontal" label="Horizontal" />
|
||||
<ToggleGroupControlOption value="vertical" label="Vertical" />
|
||||
</ToggleGroupControl>
|
||||
{/* BaseControl for padding */}
|
||||
<BaseControl label="Padding - Desktop">
|
||||
<div style={{ display: 'flex', flexDirection: 'row' }}>
|
||||
<span style={{ marginRight: '10px' }}>Padding</span>
|
||||
<ToggleControl
|
||||
label="Use Independent Padding"
|
||||
checked={isIndependentLarge}
|
||||
onChange={handleToggleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Padding controls */}
|
||||
{isIndependentLarge ? (
|
||||
<div style={{ display: 'grid', padding: '10px', gridTemplateColumns: '1fr 1fr', gap: '10px', justifyItems: 'center' }}>
|
||||
{/* Padding controls for top, left, right, bottom */}
|
||||
<fieldset style={{ gridColumn: 'span 2', width: '116px' }}>
|
||||
<legend>Top</legend>
|
||||
<UnitControl
|
||||
value={padding.extraLarge?.top || '10px'}
|
||||
onChange={(newValue) => handlePaddingChange('extraLarge', 'top', newValue)}
|
||||
/>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>Left</legend>
|
||||
<UnitControl
|
||||
value={padding.extraLarge?.left || '10px'}
|
||||
onChange={(newValue) => handlePaddingChange('extraLarge', 'left', newValue)}
|
||||
/>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>Right</legend>
|
||||
<UnitControl
|
||||
value={padding.extraLarge?.right || '10px'}
|
||||
onChange={(newValue) => handlePaddingChange('extraLarge', 'right', newValue)}
|
||||
/>
|
||||
</fieldset>
|
||||
<fieldset style={{ gridColumn: 'span 2', width: '116px' }}>
|
||||
<legend>Bottom</legend>
|
||||
<UnitControl
|
||||
value={padding.extraLarge?.bottom || '10px'}
|
||||
onChange={(newValue) => handlePaddingChange('extraLarge', 'bottom', newValue)}
|
||||
/>
|
||||
</fieldset>
|
||||
</div>
|
||||
) : (
|
||||
<UnitControl
|
||||
label="Padding Value"
|
||||
value={999} // You can replace this with an attribute value
|
||||
onChange={updatePaddingForAllSizes}
|
||||
/>
|
||||
)}
|
||||
</BaseControl>
|
||||
|
||||
{/* Max Width Controls */}
|
||||
<BaseControl label="Max Width">
|
||||
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<UnitControl
|
||||
label="Large"
|
||||
value={maxWidthLarge}
|
||||
onChange={(value) => handleMaxWidthChange(value, 'Large')}
|
||||
defaultUnit="px"
|
||||
/>
|
||||
<UnitControl
|
||||
label="Medium"
|
||||
value={maxWidthMedium}
|
||||
onChange={(value) => handleMaxWidthChange(value, 'Medium')}
|
||||
defaultUnit="px"
|
||||
/>
|
||||
<UnitControl
|
||||
label="Small"
|
||||
value={maxWidthSmall}
|
||||
onChange={(value) => handleMaxWidthChange(value, 'Small')}
|
||||
defaultUnit="px"
|
||||
/>
|
||||
</div>
|
||||
</BaseControl>
|
||||
|
||||
{/* Min Height Controls */}
|
||||
<BaseControl label="Min Height">
|
||||
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<UnitControl
|
||||
label="Large"
|
||||
value={minHeightLarge}
|
||||
onChange={(value) => handleMinHeightChange(value, 'Large')}
|
||||
defaultUnit="px"
|
||||
/>
|
||||
<UnitControl
|
||||
label="Medium"
|
||||
value={minHeightMedium}
|
||||
onChange={(value) => handleMinHeightChange(value, 'Medium')}
|
||||
defaultUnit="px"
|
||||
/>
|
||||
<UnitControl
|
||||
label="Small"
|
||||
value={minHeightSmall}
|
||||
onChange={(value) => handleMinHeightChange(value, 'Small')}
|
||||
defaultUnit="px"
|
||||
/>
|
||||
</div>
|
||||
</BaseControl>
|
||||
|
||||
{/* Background color picker */}
|
||||
<BaseControl label={__('Background Color')}>
|
||||
<div>
|
||||
<Button onClick={() => setShowColorPopover(!showColorPopover)}>
|
||||
{__('Choose Background Color')}
|
||||
</Button>
|
||||
|
||||
{showColorPopover && (
|
||||
<Popover position="bottom center">
|
||||
<ColorPalette
|
||||
value={selectedColor}
|
||||
onChange={handleColorChange}
|
||||
colors={[{ name: "Primary", slug: "primary", color: "#3E5062" }, { name: "Secondary", slug: "secondary", color: "#2B3843" }, { name: "Light Color - 1", slug: "light-color-1", color: "#ECF0F5" }, { name: "Dark Gray", slug: "dark-gray", color: "#333333" }, { name: "Accent", slug: "accent", color: "#61FFB6" }]}
|
||||
disableCustomColors={false}
|
||||
/>
|
||||
</Popover>
|
||||
)}
|
||||
|
||||
{/* Color indicator */}
|
||||
<div style={{ backgroundColor: selectedColor, width: '30px', height: '30px', marginTop: '10px', borderRadius: '50%' }}></div>
|
||||
</div>
|
||||
</BaseControl>
|
||||
</InspectorControls>
|
||||
|
||||
<div {...blockProps} style={{ maxWidth: maxWidthLarge, minHeight: minHeightLarge }}>
|
||||
<InnerBlocks />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
9
blocks/lcp-dynamic-container/src/editor.scss
Normal file
9
blocks/lcp-dynamic-container/src/editor.scss
Normal file
@ -0,0 +1,9 @@
|
||||
/**
|
||||
* The following styles get applied inside the editor only.
|
||||
*
|
||||
* Replace them with your own styles or remove the file completely.
|
||||
*/
|
||||
|
||||
.wp-block-create-block-lcp-viewport {
|
||||
border: 1px dotted #f00;
|
||||
}
|
||||
39
blocks/lcp-dynamic-container/src/index.js
Normal file
39
blocks/lcp-dynamic-container/src/index.js
Normal file
@ -0,0 +1,39 @@
|
||||
/**
|
||||
* Registers a new block provided a unique name and an object defining its behavior.
|
||||
*
|
||||
* @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
|
||||
*/
|
||||
import { registerBlockType } from '@wordpress/blocks';
|
||||
|
||||
/**
|
||||
* Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
|
||||
* All files containing `style` keyword are bundled together. The code used
|
||||
* gets applied both to the front of your site and to the editor.
|
||||
*
|
||||
* @see https://www.npmjs.com/package/@wordpress/scripts#using-css
|
||||
*/
|
||||
import './style.scss';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import Edit from './edit';
|
||||
import save from './save';
|
||||
import metadata from './block.json';
|
||||
|
||||
/**
|
||||
* Every block starts by registering a new block type definition.
|
||||
*
|
||||
* @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
|
||||
*/
|
||||
registerBlockType( metadata.name, {
|
||||
/**
|
||||
* @see ./edit.js
|
||||
*/
|
||||
edit: Edit,
|
||||
|
||||
/**
|
||||
* @see ./save.js
|
||||
*/
|
||||
save,
|
||||
} );
|
||||
12
blocks/lcp-dynamic-container/src/save.js
Normal file
12
blocks/lcp-dynamic-container/src/save.js
Normal file
@ -0,0 +1,12 @@
|
||||
import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
|
||||
|
||||
export default function Save() {
|
||||
// Block props
|
||||
const blockProps = useBlockProps.save();
|
||||
|
||||
return (
|
||||
<div {...blockProps}>
|
||||
<InnerBlocks.Content />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
12
blocks/lcp-dynamic-container/src/style.scss
Normal file
12
blocks/lcp-dynamic-container/src/style.scss
Normal file
@ -0,0 +1,12 @@
|
||||
/**
|
||||
* The following styles get applied both on the front of your site
|
||||
* and in the editor.
|
||||
*
|
||||
* Replace them with your own styles or remove the file completely.
|
||||
*/
|
||||
|
||||
.wp-block-create-block-lcp-viewport {
|
||||
background-color: #21759b;
|
||||
color: #fff;
|
||||
padding: 2px;
|
||||
}
|
||||
25
blocks/lcp-dynamic-container/src/view.js
Normal file
25
blocks/lcp-dynamic-container/src/view.js
Normal file
@ -0,0 +1,25 @@
|
||||
/**
|
||||
* Use this file for JavaScript code that you want to run in the front-end
|
||||
* on posts/pages that contain this block.
|
||||
*
|
||||
* When this file is defined as the value of the `viewScript` property
|
||||
* in `block.json` it will be enqueued on the front end of the site.
|
||||
*
|
||||
* Example:
|
||||
*
|
||||
* ```js
|
||||
* {
|
||||
* "viewScript": "file:./view.js"
|
||||
* }
|
||||
* ```
|
||||
*
|
||||
* If you're not making any changes to this file because your project doesn't need any
|
||||
* JavaScript running in the front-end, then you should delete this file and remove
|
||||
* the `viewScript` property from `block.json`.
|
||||
*
|
||||
* @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#view-script
|
||||
*/
|
||||
|
||||
/* eslint-disable no-console */
|
||||
console.log( 'Hello World! (from create-block-lcp-viewport block)' );
|
||||
/* eslint-enable no-console */
|
||||
18
blocks/lcp-gallery/.editorconfig
Normal file
18
blocks/lcp-gallery/.editorconfig
Normal file
@ -0,0 +1,18 @@
|
||||
# This file is for unifying the coding style for different editors and IDEs
|
||||
# editorconfig.org
|
||||
|
||||
# WordPress Coding Standards
|
||||
# https://make.wordpress.org/core/handbook/coding-standards/
|
||||
|
||||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
end_of_line = lf
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
indent_style = tab
|
||||
|
||||
[*.{yml,yaml}]
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
30
blocks/lcp-gallery/.gitignore
vendored
Normal file
30
blocks/lcp-gallery/.gitignore
vendored
Normal file
@ -0,0 +1,30 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# Coverage directory used by tools like istanbul
|
||||
coverage
|
||||
|
||||
# Compiled binary addons (https://nodejs.org/api/addons.html)
|
||||
build/Release
|
||||
|
||||
# Dependency directories
|
||||
node_modules/
|
||||
|
||||
# Optional npm cache directory
|
||||
.npm
|
||||
|
||||
# Optional eslint cache
|
||||
.eslintcache
|
||||
|
||||
# Output of `npm pack`
|
||||
*.tgz
|
||||
|
||||
# Output of `wp-scripts plugin-zip`
|
||||
*.zip
|
||||
|
||||
# dotenv environment variables file
|
||||
.env
|
||||
2
blocks/lcp-gallery/assets/css/lcp-gallery.css
Normal file
2
blocks/lcp-gallery/assets/css/lcp-gallery.css
Normal file
@ -0,0 +1,2 @@
|
||||
.admin-bar .lg-outer {top:32px;height:calc(100% - 32px)!important}
|
||||
|
||||
845
blocks/lcp-gallery/assets/css/lg-transitions.css
Normal file
845
blocks/lcp-gallery/assets/css/lg-transitions.css
Normal file
@ -0,0 +1,845 @@
|
||||
.lg-css3.lg-zoom-in .lg-item {
|
||||
opacity: 0;
|
||||
}
|
||||
.lg-css3.lg-zoom-in .lg-item.lg-prev-slide {
|
||||
-webkit-transform: scale3d(1.3, 1.3, 1.3);
|
||||
transform: scale3d(1.3, 1.3, 1.3);
|
||||
}
|
||||
.lg-css3.lg-zoom-in .lg-item.lg-next-slide {
|
||||
-webkit-transform: scale3d(1.3, 1.3, 1.3);
|
||||
transform: scale3d(1.3, 1.3, 1.3);
|
||||
}
|
||||
.lg-css3.lg-zoom-in .lg-item.lg-current {
|
||||
-webkit-transform: scale3d(1, 1, 1);
|
||||
transform: scale3d(1, 1, 1);
|
||||
opacity: 1;
|
||||
}
|
||||
.lg-css3.lg-zoom-in .lg-item.lg-prev-slide, .lg-css3.lg-zoom-in .lg-item.lg-next-slide, .lg-css3.lg-zoom-in .lg-item.lg-current {
|
||||
-webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s;
|
||||
-moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s;
|
||||
-o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s;
|
||||
transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s;
|
||||
}
|
||||
|
||||
.lg-css3.lg-lollipop-rev .lg-item {
|
||||
opacity: 0;
|
||||
}
|
||||
.lg-css3.lg-lollipop-rev .lg-item.lg-prev-slide {
|
||||
-moz-transform: translate3d(0, 0, 0) scale(0.5);
|
||||
-o-transform: translate3d(0, 0, 0) scale(0.5);
|
||||
-ms-transform: translate3d(0, 0, 0) scale(0.5);
|
||||
-webkit-transform: translate3d(0, 0, 0) scale(0.5);
|
||||
transform: translate3d(0, 0, 0) scale(0.5);
|
||||
}
|
||||
.lg-css3.lg-lollipop-rev .lg-item.lg-next-slide {
|
||||
-webkit-transform: translate3d(100%, 0, 0);
|
||||
transform: translate3d(100%, 0, 0);
|
||||
}
|
||||
.lg-css3.lg-lollipop-rev .lg-item.lg-current {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
.lg-css3.lg-lollipop-rev .lg-item.lg-prev-slide, .lg-css3.lg-lollipop-rev .lg-item.lg-next-slide, .lg-css3.lg-lollipop-rev .lg-item.lg-current {
|
||||
-webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
|
||||
-moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
|
||||
-o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
|
||||
transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
|
||||
}
|
||||
|
||||
.lg-css3.lg-slide-skew-ver-cross .lg-item {
|
||||
opacity: 0;
|
||||
}
|
||||
.lg-css3.lg-slide-skew-ver-cross .lg-item.lg-prev-slide {
|
||||
-moz-transform: skew(0deg, 20deg) translate3d(0, -100%, 0px);
|
||||
-o-transform: skew(0deg, 20deg) translate3d(0, -100%, 0px);
|
||||
-ms-transform: skew(0deg, 20deg) translate3d(0, -100%, 0px);
|
||||
-webkit-transform: skew(0deg, 20deg) translate3d(0, -100%, 0px);
|
||||
transform: skew(0deg, 20deg) translate3d(0, -100%, 0px);
|
||||
}
|
||||
.lg-css3.lg-slide-skew-ver-cross .lg-item.lg-next-slide {
|
||||
-moz-transform: skew(0deg, 20deg) translate3d(0, 100%, 0px);
|
||||
-o-transform: skew(0deg, 20deg) translate3d(0, 100%, 0px);
|
||||
-ms-transform: skew(0deg, 20deg) translate3d(0, 100%, 0px);
|
||||
-webkit-transform: skew(0deg, 20deg) translate3d(0, 100%, 0px);
|
||||
transform: skew(0deg, 20deg) translate3d(0, 100%, 0px);
|
||||
}
|
||||
.lg-css3.lg-slide-skew-ver-cross .lg-item.lg-current {
|
||||
-moz-transform: skew(0deg, 0deg) translate3d(0%, 0%, 0px);
|
||||
-o-transform: skew(0deg, 0deg) translate3d(0%, 0%, 0px);
|
||||
-ms-transform: skew(0deg, 0deg) translate3d(0%, 0%, 0px);
|
||||
-webkit-transform: skew(0deg, 0deg) translate3d(0%, 0%, 0px);
|
||||
transform: skew(0deg, 0deg) translate3d(0%, 0%, 0px);
|
||||
opacity: 1;
|
||||
}
|
||||
.lg-css3.lg-slide-skew-ver-cross .lg-item.lg-prev-slide, .lg-css3.lg-slide-skew-ver-cross .lg-item.lg-next-slide, .lg-css3.lg-slide-skew-ver-cross .lg-item.lg-current {
|
||||
-webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
|
||||
-moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
|
||||
-o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
|
||||
transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
|
||||
}
|
||||
|
||||
.lg-css3.lg-lollipop .lg-item {
|
||||
opacity: 0;
|
||||
}
|
||||
.lg-css3.lg-lollipop .lg-item.lg-prev-slide {
|
||||
-webkit-transform: translate3d(-100%, 0, 0);
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
}
|
||||
.lg-css3.lg-lollipop .lg-item.lg-next-slide {
|
||||
-moz-transform: translate3d(0, 0, 0) scale(0.5);
|
||||
-o-transform: translate3d(0, 0, 0) scale(0.5);
|
||||
-ms-transform: translate3d(0, 0, 0) scale(0.5);
|
||||
-webkit-transform: translate3d(0, 0, 0) scale(0.5);
|
||||
transform: translate3d(0, 0, 0) scale(0.5);
|
||||
}
|
||||
.lg-css3.lg-lollipop .lg-item.lg-current {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
.lg-css3.lg-lollipop .lg-item.lg-prev-slide, .lg-css3.lg-lollipop .lg-item.lg-next-slide, .lg-css3.lg-lollipop .lg-item.lg-current {
|
||||
-webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
|
||||
-moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
|
||||
-o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
|
||||
transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
|
||||
}
|
||||
|
||||
.lg-css3.lg-slide-skew-ver-rev .lg-item {
|
||||
opacity: 0;
|
||||
}
|
||||
.lg-css3.lg-slide-skew-ver-rev .lg-item.lg-prev-slide {
|
||||
-moz-transform: skew(-60deg, 0deg) translate3d(0, -100%, 0px);
|
||||
-o-transform: skew(-60deg, 0deg) translate3d(0, -100%, 0px);
|
||||
-ms-transform: skew(-60deg, 0deg) translate3d(0, -100%, 0px);
|
||||
-webkit-transform: skew(-60deg, 0deg) translate3d(0, -100%, 0px);
|
||||
transform: skew(-60deg, 0deg) translate3d(0, -100%, 0px);
|
||||
}
|
||||
.lg-css3.lg-slide-skew-ver-rev .lg-item.lg-next-slide {
|
||||
-moz-transform: skew(-60deg, 0deg) translate3d(0, 100%, 0px);
|
||||
-o-transform: skew(-60deg, 0deg) translate3d(0, 100%, 0px);
|
||||
-ms-transform: skew(-60deg, 0deg) translate3d(0, 100%, 0px);
|
||||
-webkit-transform: skew(-60deg, 0deg) translate3d(0, 100%, 0px);
|
||||
transform: skew(-60deg, 0deg) translate3d(0, 100%, 0px);
|
||||
}
|
||||
.lg-css3.lg-slide-skew-ver-rev .lg-item.lg-current {
|
||||
-moz-transform: skew(0deg, 0deg) translate3d(0%, 0%, 0px);
|
||||
-o-transform: skew(0deg, 0deg) translate3d(0%, 0%, 0px);
|
||||
-ms-transform: skew(0deg, 0deg) translate3d(0%, 0%, 0px);
|
||||
-webkit-transform: skew(0deg, 0deg) translate3d(0%, 0%, 0px);
|
||||
transform: skew(0deg, 0deg) translate3d(0%, 0%, 0px);
|
||||
opacity: 1;
|
||||
}
|
||||
.lg-css3.lg-slide-skew-ver-rev .lg-item.lg-prev-slide, .lg-css3.lg-slide-skew-ver-rev .lg-item.lg-next-slide, .lg-css3.lg-slide-skew-ver-rev .lg-item.lg-current {
|
||||
-webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
|
||||
-moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
|
||||
-o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
|
||||
transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
|
||||
}
|
||||
|
||||
.lg-css3.lg-rotate-rev .lg-item {
|
||||
opacity: 0;
|
||||
}
|
||||
.lg-css3.lg-rotate-rev .lg-item.lg-prev-slide {
|
||||
-moz-transform: rotate(360deg);
|
||||
-o-transform: rotate(360deg);
|
||||
-ms-transform: rotate(360deg);
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
.lg-css3.lg-rotate-rev .lg-item.lg-next-slide {
|
||||
-moz-transform: rotate(-360deg);
|
||||
-o-transform: rotate(-360deg);
|
||||
-ms-transform: rotate(-360deg);
|
||||
-webkit-transform: rotate(-360deg);
|
||||
transform: rotate(-360deg);
|
||||
}
|
||||
.lg-css3.lg-rotate-rev .lg-item.lg-current {
|
||||
-moz-transform: rotate(0deg);
|
||||
-o-transform: rotate(0deg);
|
||||
-ms-transform: rotate(0deg);
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
.lg-css3.lg-rotate-rev .lg-item.lg-prev-slide, .lg-css3.lg-rotate-rev .lg-item.lg-next-slide, .lg-css3.lg-rotate-rev .lg-item.lg-current {
|
||||
-webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
|
||||
-moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
|
||||
-o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
|
||||
transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
|
||||
}
|
||||
|
||||
.lg-css3.lg-slide-skew-ver .lg-item {
|
||||
opacity: 0;
|
||||
}
|
||||
.lg-css3.lg-slide-skew-ver .lg-item.lg-prev-slide {
|
||||
-moz-transform: skew(60deg, 0deg) translate3d(0, -100%, 0px);
|
||||
-o-transform: skew(60deg, 0deg) translate3d(0, -100%, 0px);
|
||||
-ms-transform: skew(60deg, 0deg) translate3d(0, -100%, 0px);
|
||||
-webkit-transform: skew(60deg, 0deg) translate3d(0, -100%, 0px);
|
||||
transform: skew(60deg, 0deg) translate3d(0, -100%, 0px);
|
||||
}
|
||||
.lg-css3.lg-slide-skew-ver .lg-item.lg-next-slide {
|
||||
-moz-transform: skew(60deg, 0deg) translate3d(0, 100%, 0px);
|
||||
-o-transform: skew(60deg, 0deg) translate3d(0, 100%, 0px);
|
||||
-ms-transform: skew(60deg, 0deg) translate3d(0, 100%, 0px);
|
||||
-webkit-transform: skew(60deg, 0deg) translate3d(0, 100%, 0px);
|
||||
transform: skew(60deg, 0deg) translate3d(0, 100%, 0px);
|
||||
}
|
||||
.lg-css3.lg-slide-skew-ver .lg-item.lg-current {
|
||||
-moz-transform: skew(0deg, 0deg) translate3d(0%, 0%, 0px);
|
||||
-o-transform: skew(0deg, 0deg) translate3d(0%, 0%, 0px);
|
||||
-ms-transform: skew(0deg, 0deg) translate3d(0%, 0%, 0px);
|
||||
-webkit-transform: skew(0deg, 0deg) translate3d(0%, 0%, 0px);
|
||||
transform: skew(0deg, 0deg) translate3d(0%, 0%, 0px);
|
||||
opacity: 1;
|
||||
}
|
||||
.lg-css3.lg-slide-skew-ver .lg-item.lg-prev-slide, .lg-css3.lg-slide-skew-ver .lg-item.lg-next-slide, .lg-css3.lg-slide-skew-ver .lg-item.lg-current {
|
||||
-webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
|
||||
-moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
|
||||
-o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
|
||||
transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
|
||||
}
|
||||
|
||||
.lg-css3.lg-rotate .lg-item {
|
||||
opacity: 0;
|
||||
}
|
||||
.lg-css3.lg-rotate .lg-item.lg-prev-slide {
|
||||
-moz-transform: rotate(-360deg);
|
||||
-o-transform: rotate(-360deg);
|
||||
-ms-transform: rotate(-360deg);
|
||||
-webkit-transform: rotate(-360deg);
|
||||
transform: rotate(-360deg);
|
||||
}
|
||||
.lg-css3.lg-rotate .lg-item.lg-next-slide {
|
||||
-moz-transform: rotate(360deg);
|
||||
-o-transform: rotate(360deg);
|
||||
-ms-transform: rotate(360deg);
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
.lg-css3.lg-rotate .lg-item.lg-current {
|
||||
-moz-transform: rotate(0deg);
|
||||
-o-transform: rotate(0deg);
|
||||
-ms-transform: rotate(0deg);
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
.lg-css3.lg-rotate .lg-item.lg-prev-slide, .lg-css3.lg-rotate .lg-item.lg-next-slide, .lg-css3.lg-rotate .lg-item.lg-current {
|
||||
-webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
|
||||
-moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
|
||||
-o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
|
||||
transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
|
||||
}
|
||||
|
||||
.lg-css3.lg-slide-skew .lg-item {
|
||||
opacity: 0;
|
||||
}
|
||||
.lg-css3.lg-slide-skew .lg-item.lg-prev-slide {
|
||||
-moz-transform: skew(20deg, 0deg) translate3d(-100%, 0%, 0px);
|
||||
-o-transform: skew(20deg, 0deg) translate3d(-100%, 0%, 0px);
|
||||
-ms-transform: skew(20deg, 0deg) translate3d(-100%, 0%, 0px);
|
||||
-webkit-transform: skew(20deg, 0deg) translate3d(-100%, 0%, 0px);
|
||||
transform: skew(20deg, 0deg) translate3d(-100%, 0%, 0px);
|
||||
}
|
||||
.lg-css3.lg-slide-skew .lg-item.lg-next-slide {
|
||||
-moz-transform: skew(20deg, 0deg) translate3d(100%, 0%, 0px);
|
||||
-o-transform: skew(20deg, 0deg) translate3d(100%, 0%, 0px);
|
||||
-ms-transform: skew(20deg, 0deg) translate3d(100%, 0%, 0px);
|
||||
-webkit-transform: skew(20deg, 0deg) translate3d(100%, 0%, 0px);
|
||||
transform: skew(20deg, 0deg) translate3d(100%, 0%, 0px);
|
||||
}
|
||||
.lg-css3.lg-slide-skew .lg-item.lg-current {
|
||||
-moz-transform: skew(0deg, 0deg) translate3d(0%, 0%, 0px);
|
||||
-o-transform: skew(0deg, 0deg) translate3d(0%, 0%, 0px);
|
||||
-ms-transform: skew(0deg, 0deg) translate3d(0%, 0%, 0px);
|
||||
-webkit-transform: skew(0deg, 0deg) translate3d(0%, 0%, 0px);
|
||||
transform: skew(0deg, 0deg) translate3d(0%, 0%, 0px);
|
||||
opacity: 1;
|
||||
}
|
||||
.lg-css3.lg-slide-skew .lg-item.lg-prev-slide, .lg-css3.lg-slide-skew .lg-item.lg-next-slide, .lg-css3.lg-slide-skew .lg-item.lg-current {
|
||||
-webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
|
||||
-moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
|
||||
-o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
|
||||
transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
|
||||
}
|
||||
|
||||
.lg-css3.lg-scale-up .lg-item {
|
||||
opacity: 0;
|
||||
}
|
||||
.lg-css3.lg-scale-up .lg-item.lg-prev-slide {
|
||||
-moz-transform: scale3d(0.8, 0.8, 0.8) translate3d(0%, 10%, 0);
|
||||
-o-transform: scale3d(0.8, 0.8, 0.8) translate3d(0%, 10%, 0);
|
||||
-ms-transform: scale3d(0.8, 0.8, 0.8) translate3d(0%, 10%, 0);
|
||||
-webkit-transform: scale3d(0.8, 0.8, 0.8) translate3d(0%, 10%, 0);
|
||||
transform: scale3d(0.8, 0.8, 0.8) translate3d(0%, 10%, 0);
|
||||
}
|
||||
.lg-css3.lg-scale-up .lg-item.lg-next-slide {
|
||||
-moz-transform: scale3d(0.8, 0.8, 0.8) translate3d(0%, 10%, 0);
|
||||
-o-transform: scale3d(0.8, 0.8, 0.8) translate3d(0%, 10%, 0);
|
||||
-ms-transform: scale3d(0.8, 0.8, 0.8) translate3d(0%, 10%, 0);
|
||||
-webkit-transform: scale3d(0.8, 0.8, 0.8) translate3d(0%, 10%, 0);
|
||||
transform: scale3d(0.8, 0.8, 0.8) translate3d(0%, 10%, 0);
|
||||
}
|
||||
.lg-css3.lg-scale-up .lg-item.lg-current {
|
||||
-moz-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
|
||||
-o-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
|
||||
-ms-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
|
||||
-webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
|
||||
transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
.lg-css3.lg-scale-up .lg-item.lg-prev-slide, .lg-css3.lg-scale-up .lg-item.lg-next-slide, .lg-css3.lg-scale-up .lg-item.lg-current {
|
||||
-webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s;
|
||||
-moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s;
|
||||
-o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s;
|
||||
transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s;
|
||||
}
|
||||
|
||||
.lg-css3.lg-slide-vertical-growth .lg-item {
|
||||
opacity: 0;
|
||||
}
|
||||
.lg-css3.lg-slide-vertical-growth .lg-item.lg-prev-slide {
|
||||
-moz-transform: scale3d(0.5, 0.5, 0.5) translate3d(0, -150%, 0);
|
||||
-o-transform: scale3d(0.5, 0.5, 0.5) translate3d(0, -150%, 0);
|
||||
-ms-transform: scale3d(0.5, 0.5, 0.5) translate3d(0, -150%, 0);
|
||||
-webkit-transform: scale3d(0.5, 0.5, 0.5) translate3d(0, -150%, 0);
|
||||
transform: scale3d(0.5, 0.5, 0.5) translate3d(0, -150%, 0);
|
||||
}
|
||||
.lg-css3.lg-slide-vertical-growth .lg-item.lg-next-slide {
|
||||
-moz-transform: scale3d(0.5, 0.5, 0.5) translate3d(0, 150%, 0);
|
||||
-o-transform: scale3d(0.5, 0.5, 0.5) translate3d(0, 150%, 0);
|
||||
-ms-transform: scale3d(0.5, 0.5, 0.5) translate3d(0, 150%, 0);
|
||||
-webkit-transform: scale3d(0.5, 0.5, 0.5) translate3d(0, 150%, 0);
|
||||
transform: scale3d(0.5, 0.5, 0.5) translate3d(0, 150%, 0);
|
||||
}
|
||||
.lg-css3.lg-slide-vertical-growth .lg-item.lg-current {
|
||||
-moz-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
|
||||
-o-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
|
||||
-ms-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
|
||||
-webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
|
||||
transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
.lg-css3.lg-slide-vertical-growth .lg-item.lg-prev-slide, .lg-css3.lg-slide-vertical-growth .lg-item.lg-next-slide, .lg-css3.lg-slide-vertical-growth .lg-item.lg-current {
|
||||
-webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
|
||||
-moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
|
||||
-o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
|
||||
transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
|
||||
}
|
||||
|
||||
.lg-css3.lg-slide-circular-vertical .lg-item {
|
||||
opacity: 0;
|
||||
}
|
||||
.lg-css3.lg-slide-circular-vertical .lg-item.lg-prev-slide {
|
||||
-moz-transform: scale3d(0, 0, 0) translate3d(0, -100%, 0);
|
||||
-o-transform: scale3d(0, 0, 0) translate3d(0, -100%, 0);
|
||||
-ms-transform: scale3d(0, 0, 0) translate3d(0, -100%, 0);
|
||||
-webkit-transform: scale3d(0, 0, 0) translate3d(0, -100%, 0);
|
||||
transform: scale3d(0, 0, 0) translate3d(0, -100%, 0);
|
||||
}
|
||||
.lg-css3.lg-slide-circular-vertical .lg-item.lg-next-slide {
|
||||
-moz-transform: scale3d(0, 0, 0) translate3d(0, 100%, 0);
|
||||
-o-transform: scale3d(0, 0, 0) translate3d(0, 100%, 0);
|
||||
-ms-transform: scale3d(0, 0, 0) translate3d(0, 100%, 0);
|
||||
-webkit-transform: scale3d(0, 0, 0) translate3d(0, 100%, 0);
|
||||
transform: scale3d(0, 0, 0) translate3d(0, 100%, 0);
|
||||
}
|
||||
.lg-css3.lg-slide-circular-vertical .lg-item.lg-current {
|
||||
-moz-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
|
||||
-o-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
|
||||
-ms-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
|
||||
-webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
|
||||
transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
.lg-css3.lg-slide-circular-vertical .lg-item.lg-prev-slide, .lg-css3.lg-slide-circular-vertical .lg-item.lg-next-slide, .lg-css3.lg-slide-circular-vertical .lg-item.lg-current {
|
||||
-webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s;
|
||||
-moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s;
|
||||
-o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s;
|
||||
transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s;
|
||||
}
|
||||
|
||||
.lg-css3.lg-slide-vertical .lg-item {
|
||||
opacity: 0;
|
||||
}
|
||||
.lg-css3.lg-slide-vertical .lg-item.lg-prev-slide {
|
||||
-webkit-transform: translate3d(0, -100%, 0);
|
||||
transform: translate3d(0, -100%, 0);
|
||||
}
|
||||
.lg-css3.lg-slide-vertical .lg-item.lg-next-slide {
|
||||
-webkit-transform: translate3d(0, 100%, 0);
|
||||
transform: translate3d(0, 100%, 0);
|
||||
}
|
||||
.lg-css3.lg-slide-vertical .lg-item.lg-current {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
.lg-css3.lg-slide-vertical .lg-item.lg-prev-slide, .lg-css3.lg-slide-vertical .lg-item.lg-next-slide, .lg-css3.lg-slide-vertical .lg-item.lg-current {
|
||||
-webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
|
||||
-moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
|
||||
-o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
|
||||
transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
|
||||
}
|
||||
|
||||
.lg-css3.lg-slide-circular .lg-item {
|
||||
opacity: 0;
|
||||
}
|
||||
.lg-css3.lg-slide-circular .lg-item.lg-prev-slide {
|
||||
-moz-transform: scale3d(0, 0, 0) translate3d(-100%, 0, 0);
|
||||
-o-transform: scale3d(0, 0, 0) translate3d(-100%, 0, 0);
|
||||
-ms-transform: scale3d(0, 0, 0) translate3d(-100%, 0, 0);
|
||||
-webkit-transform: scale3d(0, 0, 0) translate3d(-100%, 0, 0);
|
||||
transform: scale3d(0, 0, 0) translate3d(-100%, 0, 0);
|
||||
}
|
||||
.lg-css3.lg-slide-circular .lg-item.lg-next-slide {
|
||||
-moz-transform: scale3d(0, 0, 0) translate3d(100%, 0, 0);
|
||||
-o-transform: scale3d(0, 0, 0) translate3d(100%, 0, 0);
|
||||
-ms-transform: scale3d(0, 0, 0) translate3d(100%, 0, 0);
|
||||
-webkit-transform: scale3d(0, 0, 0) translate3d(100%, 0, 0);
|
||||
transform: scale3d(0, 0, 0) translate3d(100%, 0, 0);
|
||||
}
|
||||
.lg-css3.lg-slide-circular .lg-item.lg-current {
|
||||
-moz-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
|
||||
-o-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
|
||||
-ms-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
|
||||
-webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
|
||||
transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
.lg-css3.lg-slide-circular .lg-item.lg-prev-slide, .lg-css3.lg-slide-circular .lg-item.lg-next-slide, .lg-css3.lg-slide-circular .lg-item.lg-current {
|
||||
-webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s;
|
||||
-moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s;
|
||||
-o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s;
|
||||
transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s;
|
||||
}
|
||||
|
||||
.lg-css3.lg-soft-zoom .lg-item {
|
||||
opacity: 0;
|
||||
}
|
||||
.lg-css3.lg-soft-zoom .lg-item.lg-prev-slide {
|
||||
-webkit-transform: scale3d(1.1, 1.1, 1.1);
|
||||
transform: scale3d(1.1, 1.1, 1.1);
|
||||
}
|
||||
.lg-css3.lg-soft-zoom .lg-item.lg-next-slide {
|
||||
-webkit-transform: scale3d(0.9, 0.9, 0.9);
|
||||
transform: scale3d(0.9, 0.9, 0.9);
|
||||
}
|
||||
.lg-css3.lg-soft-zoom .lg-item.lg-current {
|
||||
-webkit-transform: scale3d(1, 1, 1);
|
||||
transform: scale3d(1, 1, 1);
|
||||
opacity: 1;
|
||||
}
|
||||
.lg-css3.lg-soft-zoom .lg-item.lg-prev-slide, .lg-css3.lg-soft-zoom .lg-item.lg-next-slide, .lg-css3.lg-soft-zoom .lg-item.lg-current {
|
||||
-webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s;
|
||||
-moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s;
|
||||
-o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s;
|
||||
transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s;
|
||||
}
|
||||
|
||||
.lg-css3.lg-slide-skew-cross-rev .lg-item {
|
||||
opacity: 0;
|
||||
}
|
||||
.lg-css3.lg-slide-skew-cross-rev .lg-item.lg-prev-slide {
|
||||
-moz-transform: skew(0deg, -60deg) translate3d(-100%, 0%, 0px);
|
||||
-o-transform: skew(0deg, -60deg) translate3d(-100%, 0%, 0px);
|
||||
-ms-transform: skew(0deg, -60deg) translate3d(-100%, 0%, 0px);
|
||||
-webkit-transform: skew(0deg, -60deg) translate3d(-100%, 0%, 0px);
|
||||
transform: skew(0deg, -60deg) translate3d(-100%, 0%, 0px);
|
||||
}
|
||||
.lg-css3.lg-slide-skew-cross-rev .lg-item.lg-next-slide {
|
||||
-moz-transform: skew(0deg, -60deg) translate3d(100%, 0%, 0px);
|
||||
-o-transform: skew(0deg, -60deg) translate3d(100%, 0%, 0px);
|
||||
-ms-transform: skew(0deg, -60deg) translate3d(100%, 0%, 0px);
|
||||
-webkit-transform: skew(0deg, -60deg) translate3d(100%, 0%, 0px);
|
||||
transform: skew(0deg, -60deg) translate3d(100%, 0%, 0px);
|
||||
}
|
||||
.lg-css3.lg-slide-skew-cross-rev .lg-item.lg-current {
|
||||
-moz-transform: skew(0deg, 0deg) translate3d(0%, 0%, 0px);
|
||||
-o-transform: skew(0deg, 0deg) translate3d(0%, 0%, 0px);
|
||||
-ms-transform: skew(0deg, 0deg) translate3d(0%, 0%, 0px);
|
||||
-webkit-transform: skew(0deg, 0deg) translate3d(0%, 0%, 0px);
|
||||
transform: skew(0deg, 0deg) translate3d(0%, 0%, 0px);
|
||||
opacity: 1;
|
||||
}
|
||||
.lg-css3.lg-slide-skew-cross-rev .lg-item.lg-prev-slide, .lg-css3.lg-slide-skew-cross-rev .lg-item.lg-next-slide, .lg-css3.lg-slide-skew-cross-rev .lg-item.lg-current {
|
||||
-webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
|
||||
-moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
|
||||
-o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
|
||||
transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
|
||||
}
|
||||
|
||||
.lg-css3.lg-tube .lg-item {
|
||||
opacity: 0;
|
||||
}
|
||||
.lg-css3.lg-tube .lg-item.lg-prev-slide {
|
||||
-moz-transform: scale3d(1, 0, 1) translate3d(-100%, 0, 0);
|
||||
-o-transform: scale3d(1, 0, 1) translate3d(-100%, 0, 0);
|
||||
-ms-transform: scale3d(1, 0, 1) translate3d(-100%, 0, 0);
|
||||
-webkit-transform: scale3d(1, 0, 1) translate3d(-100%, 0, 0);
|
||||
transform: scale3d(1, 0, 1) translate3d(-100%, 0, 0);
|
||||
}
|
||||
.lg-css3.lg-tube .lg-item.lg-next-slide {
|
||||
-moz-transform: scale3d(1, 0, 1) translate3d(100%, 0, 0);
|
||||
-o-transform: scale3d(1, 0, 1) translate3d(100%, 0, 0);
|
||||
-ms-transform: scale3d(1, 0, 1) translate3d(100%, 0, 0);
|
||||
-webkit-transform: scale3d(1, 0, 1) translate3d(100%, 0, 0);
|
||||
transform: scale3d(1, 0, 1) translate3d(100%, 0, 0);
|
||||
}
|
||||
.lg-css3.lg-tube .lg-item.lg-current {
|
||||
-moz-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
|
||||
-o-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
|
||||
-ms-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
|
||||
-webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
|
||||
transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
.lg-css3.lg-tube .lg-item.lg-prev-slide, .lg-css3.lg-tube .lg-item.lg-next-slide, .lg-css3.lg-tube .lg-item.lg-current {
|
||||
-webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
|
||||
-moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
|
||||
-o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
|
||||
transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
|
||||
}
|
||||
|
||||
.lg-css3.lg-slide-skew-cross .lg-item {
|
||||
opacity: 0;
|
||||
}
|
||||
.lg-css3.lg-slide-skew-cross .lg-item.lg-prev-slide {
|
||||
-moz-transform: skew(0deg, 60deg) translate3d(-100%, 0%, 0px);
|
||||
-o-transform: skew(0deg, 60deg) translate3d(-100%, 0%, 0px);
|
||||
-ms-transform: skew(0deg, 60deg) translate3d(-100%, 0%, 0px);
|
||||
-webkit-transform: skew(0deg, 60deg) translate3d(-100%, 0%, 0px);
|
||||
transform: skew(0deg, 60deg) translate3d(-100%, 0%, 0px);
|
||||
}
|
||||
.lg-css3.lg-slide-skew-cross .lg-item.lg-next-slide {
|
||||
-moz-transform: skew(0deg, 60deg) translate3d(100%, 0%, 0px);
|
||||
-o-transform: skew(0deg, 60deg) translate3d(100%, 0%, 0px);
|
||||
-ms-transform: skew(0deg, 60deg) translate3d(100%, 0%, 0px);
|
||||
-webkit-transform: skew(0deg, 60deg) translate3d(100%, 0%, 0px);
|
||||
transform: skew(0deg, 60deg) translate3d(100%, 0%, 0px);
|
||||
}
|
||||
.lg-css3.lg-slide-skew-cross .lg-item.lg-current {
|
||||
-moz-transform: skew(0deg, 0deg) translate3d(0%, 0%, 0px);
|
||||
-o-transform: skew(0deg, 0deg) translate3d(0%, 0%, 0px);
|
||||
-ms-transform: skew(0deg, 0deg) translate3d(0%, 0%, 0px);
|
||||
-webkit-transform: skew(0deg, 0deg) translate3d(0%, 0%, 0px);
|
||||
transform: skew(0deg, 0deg) translate3d(0%, 0%, 0px);
|
||||
opacity: 1;
|
||||
}
|
||||
.lg-css3.lg-slide-skew-cross .lg-item.lg-prev-slide, .lg-css3.lg-slide-skew-cross .lg-item.lg-next-slide, .lg-css3.lg-slide-skew-cross .lg-item.lg-current {
|
||||
-webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
|
||||
-moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
|
||||
-o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
|
||||
transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
|
||||
}
|
||||
|
||||
.lg-css3.lg-zoom-in-big .lg-item {
|
||||
opacity: 0;
|
||||
}
|
||||
.lg-css3.lg-zoom-in-big .lg-item.lg-prev-slide {
|
||||
-webkit-transform: scale3d(2, 2, 2);
|
||||
transform: scale3d(2, 2, 2);
|
||||
}
|
||||
.lg-css3.lg-zoom-in-big .lg-item.lg-next-slide {
|
||||
-webkit-transform: scale3d(2, 2, 2);
|
||||
transform: scale3d(2, 2, 2);
|
||||
}
|
||||
.lg-css3.lg-zoom-in-big .lg-item.lg-current {
|
||||
-webkit-transform: scale3d(1, 1, 1);
|
||||
transform: scale3d(1, 1, 1);
|
||||
opacity: 1;
|
||||
}
|
||||
.lg-css3.lg-zoom-in-big .lg-item.lg-prev-slide, .lg-css3.lg-zoom-in-big .lg-item.lg-next-slide, .lg-css3.lg-zoom-in-big .lg-item.lg-current {
|
||||
-webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s;
|
||||
-moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s;
|
||||
-o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s;
|
||||
transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s;
|
||||
}
|
||||
|
||||
.lg-css3.lg-slide-skew-only-rev .lg-item {
|
||||
opacity: 0;
|
||||
}
|
||||
.lg-css3.lg-slide-skew-only-rev .lg-item.lg-prev-slide {
|
||||
-moz-transform: skew(-10deg, 0deg);
|
||||
-o-transform: skew(-10deg, 0deg);
|
||||
-ms-transform: skew(-10deg, 0deg);
|
||||
-webkit-transform: skew(-10deg, 0deg);
|
||||
transform: skew(-10deg, 0deg);
|
||||
}
|
||||
.lg-css3.lg-slide-skew-only-rev .lg-item.lg-next-slide {
|
||||
-moz-transform: skew(-10deg, 0deg);
|
||||
-o-transform: skew(-10deg, 0deg);
|
||||
-ms-transform: skew(-10deg, 0deg);
|
||||
-webkit-transform: skew(-10deg, 0deg);
|
||||
transform: skew(-10deg, 0deg);
|
||||
}
|
||||
.lg-css3.lg-slide-skew-only-rev .lg-item.lg-current {
|
||||
-moz-transform: skew(0deg, 0deg);
|
||||
-o-transform: skew(0deg, 0deg);
|
||||
-ms-transform: skew(0deg, 0deg);
|
||||
-webkit-transform: skew(0deg, 0deg);
|
||||
transform: skew(0deg, 0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
.lg-css3.lg-slide-skew-only-rev .lg-item.lg-prev-slide, .lg-css3.lg-slide-skew-only-rev .lg-item.lg-next-slide, .lg-css3.lg-slide-skew-only-rev .lg-item.lg-current {
|
||||
-webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
|
||||
-moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
|
||||
-o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
|
||||
transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
|
||||
}
|
||||
|
||||
.lg-css3.lg-zoom-in-out .lg-item {
|
||||
opacity: 0;
|
||||
}
|
||||
.lg-css3.lg-zoom-in-out .lg-item.lg-prev-slide {
|
||||
-webkit-transform: scale3d(2, 2, 2);
|
||||
transform: scale3d(2, 2, 2);
|
||||
}
|
||||
.lg-css3.lg-zoom-in-out .lg-item.lg-next-slide {
|
||||
-webkit-transform: scale3d(0, 0, 0);
|
||||
transform: scale3d(0, 0, 0);
|
||||
}
|
||||
.lg-css3.lg-zoom-in-out .lg-item.lg-current {
|
||||
-webkit-transform: scale3d(1, 1, 1);
|
||||
transform: scale3d(1, 1, 1);
|
||||
opacity: 1;
|
||||
}
|
||||
.lg-css3.lg-zoom-in-out .lg-item.lg-prev-slide, .lg-css3.lg-zoom-in-out .lg-item.lg-next-slide, .lg-css3.lg-zoom-in-out .lg-item.lg-current {
|
||||
-webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s;
|
||||
-moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s;
|
||||
-o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s;
|
||||
transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s;
|
||||
}
|
||||
|
||||
.lg-css3.lg-slide-skew-only-y-rev .lg-item {
|
||||
opacity: 0;
|
||||
}
|
||||
.lg-css3.lg-slide-skew-only-y-rev .lg-item.lg-prev-slide {
|
||||
-moz-transform: skew(0deg, -10deg);
|
||||
-o-transform: skew(0deg, -10deg);
|
||||
-ms-transform: skew(0deg, -10deg);
|
||||
-webkit-transform: skew(0deg, -10deg);
|
||||
transform: skew(0deg, -10deg);
|
||||
}
|
||||
.lg-css3.lg-slide-skew-only-y-rev .lg-item.lg-next-slide {
|
||||
-moz-transform: skew(0deg, -10deg);
|
||||
-o-transform: skew(0deg, -10deg);
|
||||
-ms-transform: skew(0deg, -10deg);
|
||||
-webkit-transform: skew(0deg, -10deg);
|
||||
transform: skew(0deg, -10deg);
|
||||
}
|
||||
.lg-css3.lg-slide-skew-only-y-rev .lg-item.lg-current {
|
||||
-moz-transform: skew(0deg, 0deg);
|
||||
-o-transform: skew(0deg, 0deg);
|
||||
-ms-transform: skew(0deg, 0deg);
|
||||
-webkit-transform: skew(0deg, 0deg);
|
||||
transform: skew(0deg, 0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
.lg-css3.lg-slide-skew-only-y-rev .lg-item.lg-prev-slide, .lg-css3.lg-slide-skew-only-y-rev .lg-item.lg-next-slide, .lg-css3.lg-slide-skew-only-y-rev .lg-item.lg-current {
|
||||
-webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
|
||||
-moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
|
||||
-o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
|
||||
transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
|
||||
}
|
||||
|
||||
.lg-css3.lg-slide-skew-only-y .lg-item {
|
||||
opacity: 0;
|
||||
}
|
||||
.lg-css3.lg-slide-skew-only-y .lg-item.lg-prev-slide {
|
||||
-moz-transform: skew(0deg, 10deg);
|
||||
-o-transform: skew(0deg, 10deg);
|
||||
-ms-transform: skew(0deg, 10deg);
|
||||
-webkit-transform: skew(0deg, 10deg);
|
||||
transform: skew(0deg, 10deg);
|
||||
}
|
||||
.lg-css3.lg-slide-skew-only-y .lg-item.lg-next-slide {
|
||||
-moz-transform: skew(0deg, 10deg);
|
||||
-o-transform: skew(0deg, 10deg);
|
||||
-ms-transform: skew(0deg, 10deg);
|
||||
-webkit-transform: skew(0deg, 10deg);
|
||||
transform: skew(0deg, 10deg);
|
||||
}
|
||||
.lg-css3.lg-slide-skew-only-y .lg-item.lg-current {
|
||||
-moz-transform: skew(0deg, 0deg);
|
||||
-o-transform: skew(0deg, 0deg);
|
||||
-ms-transform: skew(0deg, 0deg);
|
||||
-webkit-transform: skew(0deg, 0deg);
|
||||
transform: skew(0deg, 0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
.lg-css3.lg-slide-skew-only-y .lg-item.lg-prev-slide, .lg-css3.lg-slide-skew-only-y .lg-item.lg-next-slide, .lg-css3.lg-slide-skew-only-y .lg-item.lg-current {
|
||||
-webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
|
||||
-moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
|
||||
-o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
|
||||
transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
|
||||
}
|
||||
|
||||
.lg-css3.lg-zoom-out-big .lg-item {
|
||||
opacity: 0;
|
||||
}
|
||||
.lg-css3.lg-zoom-out-big .lg-item.lg-prev-slide {
|
||||
-webkit-transform: scale3d(0, 0, 0);
|
||||
transform: scale3d(0, 0, 0);
|
||||
}
|
||||
.lg-css3.lg-zoom-out-big .lg-item.lg-next-slide {
|
||||
-webkit-transform: scale3d(0, 0, 0);
|
||||
transform: scale3d(0, 0, 0);
|
||||
}
|
||||
.lg-css3.lg-zoom-out-big .lg-item.lg-current {
|
||||
-webkit-transform: scale3d(1, 1, 1);
|
||||
transform: scale3d(1, 1, 1);
|
||||
opacity: 1;
|
||||
}
|
||||
.lg-css3.lg-zoom-out-big .lg-item.lg-prev-slide, .lg-css3.lg-zoom-out-big .lg-item.lg-next-slide, .lg-css3.lg-zoom-out-big .lg-item.lg-current {
|
||||
-webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s;
|
||||
-moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s;
|
||||
-o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s;
|
||||
transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s;
|
||||
}
|
||||
|
||||
.lg-css3.lg-slide-skew-only .lg-item {
|
||||
opacity: 0;
|
||||
}
|
||||
.lg-css3.lg-slide-skew-only .lg-item.lg-prev-slide {
|
||||
-moz-transform: skew(10deg, 0deg);
|
||||
-o-transform: skew(10deg, 0deg);
|
||||
-ms-transform: skew(10deg, 0deg);
|
||||
-webkit-transform: skew(10deg, 0deg);
|
||||
transform: skew(10deg, 0deg);
|
||||
}
|
||||
.lg-css3.lg-slide-skew-only .lg-item.lg-next-slide {
|
||||
-moz-transform: skew(10deg, 0deg);
|
||||
-o-transform: skew(10deg, 0deg);
|
||||
-ms-transform: skew(10deg, 0deg);
|
||||
-webkit-transform: skew(10deg, 0deg);
|
||||
transform: skew(10deg, 0deg);
|
||||
}
|
||||
.lg-css3.lg-slide-skew-only .lg-item.lg-current {
|
||||
-moz-transform: skew(0deg, 0deg);
|
||||
-o-transform: skew(0deg, 0deg);
|
||||
-ms-transform: skew(0deg, 0deg);
|
||||
-webkit-transform: skew(0deg, 0deg);
|
||||
transform: skew(0deg, 0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
.lg-css3.lg-slide-skew-only .lg-item.lg-prev-slide, .lg-css3.lg-slide-skew-only .lg-item.lg-next-slide, .lg-css3.lg-slide-skew-only .lg-item.lg-current {
|
||||
-webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
|
||||
-moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
|
||||
-o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
|
||||
transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
|
||||
}
|
||||
|
||||
.lg-css3.lg-zoom-out-in .lg-item {
|
||||
opacity: 0;
|
||||
}
|
||||
.lg-css3.lg-zoom-out-in .lg-item.lg-prev-slide {
|
||||
-webkit-transform: scale3d(0, 0, 0);
|
||||
transform: scale3d(0, 0, 0);
|
||||
}
|
||||
.lg-css3.lg-zoom-out-in .lg-item.lg-next-slide {
|
||||
-webkit-transform: scale3d(2, 2, 2);
|
||||
transform: scale3d(2, 2, 2);
|
||||
}
|
||||
.lg-css3.lg-zoom-out-in .lg-item.lg-current {
|
||||
-webkit-transform: scale3d(1, 1, 1);
|
||||
transform: scale3d(1, 1, 1);
|
||||
opacity: 1;
|
||||
}
|
||||
.lg-css3.lg-zoom-out-in .lg-item.lg-prev-slide, .lg-css3.lg-zoom-out-in .lg-item.lg-next-slide, .lg-css3.lg-zoom-out-in .lg-item.lg-current {
|
||||
-webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s;
|
||||
-moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s;
|
||||
-o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s;
|
||||
transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s;
|
||||
}
|
||||
|
||||
.lg-css3.lg-slide-skew-rev .lg-item {
|
||||
opacity: 0;
|
||||
}
|
||||
.lg-css3.lg-slide-skew-rev .lg-item.lg-prev-slide {
|
||||
-moz-transform: skew(-20deg, 0deg) translate3d(-100%, 0%, 0px);
|
||||
-o-transform: skew(-20deg, 0deg) translate3d(-100%, 0%, 0px);
|
||||
-ms-transform: skew(-20deg, 0deg) translate3d(-100%, 0%, 0px);
|
||||
-webkit-transform: skew(-20deg, 0deg) translate3d(-100%, 0%, 0px);
|
||||
transform: skew(-20deg, 0deg) translate3d(-100%, 0%, 0px);
|
||||
}
|
||||
.lg-css3.lg-slide-skew-rev .lg-item.lg-next-slide {
|
||||
-moz-transform: skew(-20deg, 0deg) translate3d(100%, 0%, 0px);
|
||||
-o-transform: skew(-20deg, 0deg) translate3d(100%, 0%, 0px);
|
||||
-ms-transform: skew(-20deg, 0deg) translate3d(100%, 0%, 0px);
|
||||
-webkit-transform: skew(-20deg, 0deg) translate3d(100%, 0%, 0px);
|
||||
transform: skew(-20deg, 0deg) translate3d(100%, 0%, 0px);
|
||||
}
|
||||
.lg-css3.lg-slide-skew-rev .lg-item.lg-current {
|
||||
-moz-transform: skew(0deg, 0deg) translate3d(0%, 0%, 0px);
|
||||
-o-transform: skew(0deg, 0deg) translate3d(0%, 0%, 0px);
|
||||
-ms-transform: skew(0deg, 0deg) translate3d(0%, 0%, 0px);
|
||||
-webkit-transform: skew(0deg, 0deg) translate3d(0%, 0%, 0px);
|
||||
transform: skew(0deg, 0deg) translate3d(0%, 0%, 0px);
|
||||
opacity: 1;
|
||||
}
|
||||
.lg-css3.lg-slide-skew-rev .lg-item.lg-prev-slide, .lg-css3.lg-slide-skew-rev .lg-item.lg-next-slide, .lg-css3.lg-slide-skew-rev .lg-item.lg-current {
|
||||
-webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
|
||||
-moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
|
||||
-o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
|
||||
transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
|
||||
}
|
||||
|
||||
.lg-css3.lg-zoom-out .lg-item {
|
||||
opacity: 0;
|
||||
}
|
||||
.lg-css3.lg-zoom-out .lg-item.lg-prev-slide {
|
||||
-webkit-transform: scale3d(0.7, 0.7, 0.7);
|
||||
transform: scale3d(0.7, 0.7, 0.7);
|
||||
}
|
||||
.lg-css3.lg-zoom-out .lg-item.lg-next-slide {
|
||||
-webkit-transform: scale3d(0.7, 0.7, 0.7);
|
||||
transform: scale3d(0.7, 0.7, 0.7);
|
||||
}
|
||||
.lg-css3.lg-zoom-out .lg-item.lg-current {
|
||||
-webkit-transform: scale3d(1, 1, 1);
|
||||
transform: scale3d(1, 1, 1);
|
||||
opacity: 1;
|
||||
}
|
||||
.lg-css3.lg-zoom-out .lg-item.lg-prev-slide, .lg-css3.lg-zoom-out .lg-item.lg-next-slide, .lg-css3.lg-zoom-out .lg-item.lg-current {
|
||||
-webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s;
|
||||
-moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s;
|
||||
-o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s;
|
||||
transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s;
|
||||
}
|
||||
|
||||
.lg-css3.lg-slide-skew-ver-cross-rev .lg-item {
|
||||
opacity: 0;
|
||||
}
|
||||
.lg-css3.lg-slide-skew-ver-cross-rev .lg-item.lg-prev-slide {
|
||||
-moz-transform: skew(0deg, -20deg) translate3d(0, -100%, 0px);
|
||||
-o-transform: skew(0deg, -20deg) translate3d(0, -100%, 0px);
|
||||
-ms-transform: skew(0deg, -20deg) translate3d(0, -100%, 0px);
|
||||
-webkit-transform: skew(0deg, -20deg) translate3d(0, -100%, 0px);
|
||||
transform: skew(0deg, -20deg) translate3d(0, -100%, 0px);
|
||||
}
|
||||
.lg-css3.lg-slide-skew-ver-cross-rev .lg-item.lg-next-slide {
|
||||
-moz-transform: skew(0deg, -20deg) translate3d(0, 100%, 0px);
|
||||
-o-transform: skew(0deg, -20deg) translate3d(0, 100%, 0px);
|
||||
-ms-transform: skew(0deg, -20deg) translate3d(0, 100%, 0px);
|
||||
-webkit-transform: skew(0deg, -20deg) translate3d(0, 100%, 0px);
|
||||
transform: skew(0deg, -20deg) translate3d(0, 100%, 0px);
|
||||
}
|
||||
.lg-css3.lg-slide-skew-ver-cross-rev .lg-item.lg-current {
|
||||
-moz-transform: skew(0deg, 0deg) translate3d(0%, 0%, 0px);
|
||||
-o-transform: skew(0deg, 0deg) translate3d(0%, 0%, 0px);
|
||||
-ms-transform: skew(0deg, 0deg) translate3d(0%, 0%, 0px);
|
||||
-webkit-transform: skew(0deg, 0deg) translate3d(0%, 0%, 0px);
|
||||
transform: skew(0deg, 0deg) translate3d(0%, 0%, 0px);
|
||||
opacity: 1;
|
||||
}
|
||||
.lg-css3.lg-slide-skew-ver-cross-rev .lg-item.lg-prev-slide, .lg-css3.lg-slide-skew-ver-cross-rev .lg-item.lg-next-slide, .lg-css3.lg-slide-skew-ver-cross-rev .lg-item.lg-current {
|
||||
-webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
|
||||
-moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
|
||||
-o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
|
||||
transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=lg-transitions.css.map */
|
||||
1
blocks/lcp-gallery/assets/css/lightgallery-bundle.min.css
vendored
Normal file
1
blocks/lcp-gallery/assets/css/lightgallery-bundle.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
1151
blocks/lcp-gallery/assets/css/lightgallery.css
Normal file
1151
blocks/lcp-gallery/assets/css/lightgallery.css
Normal file
File diff suppressed because it is too large
Load Diff
1
blocks/lcp-gallery/assets/css/lightgallery.min.css
vendored
Normal file
1
blocks/lcp-gallery/assets/css/lightgallery.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
blocks/lcp-gallery/assets/img/sample/sample-img-1.jpg
Normal file
BIN
blocks/lcp-gallery/assets/img/sample/sample-img-1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 MiB |
BIN
blocks/lcp-gallery/assets/img/sample/sample-img-10.jpg
Normal file
BIN
blocks/lcp-gallery/assets/img/sample/sample-img-10.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
BIN
blocks/lcp-gallery/assets/img/sample/sample-img-2.jpg
Normal file
BIN
blocks/lcp-gallery/assets/img/sample/sample-img-2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 MiB |
BIN
blocks/lcp-gallery/assets/img/sample/sample-img-3.jpg
Normal file
BIN
blocks/lcp-gallery/assets/img/sample/sample-img-3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 376 KiB |
BIN
blocks/lcp-gallery/assets/img/sample/sample-img-4.jpg
Normal file
BIN
blocks/lcp-gallery/assets/img/sample/sample-img-4.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
BIN
blocks/lcp-gallery/assets/img/sample/sample-img-5.jpg
Normal file
BIN
blocks/lcp-gallery/assets/img/sample/sample-img-5.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 344 KiB |
BIN
blocks/lcp-gallery/assets/img/sample/sample-img-6.jpg
Normal file
BIN
blocks/lcp-gallery/assets/img/sample/sample-img-6.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
BIN
blocks/lcp-gallery/assets/img/sample/sample-img-7.jpg
Normal file
BIN
blocks/lcp-gallery/assets/img/sample/sample-img-7.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
BIN
blocks/lcp-gallery/assets/img/sample/sample-img-8.jpg
Normal file
BIN
blocks/lcp-gallery/assets/img/sample/sample-img-8.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.2 MiB |
BIN
blocks/lcp-gallery/assets/img/sample/sample-img-9.jpg
Normal file
BIN
blocks/lcp-gallery/assets/img/sample/sample-img-9.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 531 KiB |
8
blocks/lcp-gallery/assets/js/lg-autoplay.min.js
vendored
Normal file
8
blocks/lcp-gallery/assets/js/lg-autoplay.min.js
vendored
Normal file
@ -0,0 +1,8 @@
|
||||
/**
|
||||
* lightgallery | 2.8.2 | November 28th 2024
|
||||
* http://www.lightgalleryjs.com/
|
||||
* Copyright (c) 2020 Sachin Neravath;
|
||||
* @license GPLv3
|
||||
*/
|
||||
|
||||
!function(t,o){"object"==typeof exports&&"undefined"!=typeof module?module.exports=o():"function"==typeof define&&define.amd?define(o):(t="undefined"!=typeof globalThis?globalThis:t||self).lgAutoplay=o()}(this,(function(){"use strict";var t=function(){return(t=Object.assign||function(t){for(var o,e=1,s=arguments.length;e<s;e++)for(var r in o=arguments[e])Object.prototype.hasOwnProperty.call(o,r)&&(t[r]=o[r]);return t}).apply(this,arguments)},o="lgSlideItemLoad",e="lgBeforeSlide",s="lgAfterSlide",r="lgDragStart",i="lgDragEnd",a="lgAutoplay",l="lgAutoplayStart",n="lgAutoplayStop",u={autoplay:!0,slideShowAutoplay:!1,slideShowInterval:5e3,progressBar:!0,forceSlideShowAutoplay:!1,autoplayControls:!0,appendAutoplayControlsTo:".lg-toolbar",autoplayPluginStrings:{toggleAutoplay:"Toggle Autoplay"}};return function(){function p(o){return this.core=o,this.settings=t(t({},u),this.core.settings),this}return p.prototype.init=function(){var t=this;this.settings.autoplay&&(this.interval=!1,this.fromAuto=!0,this.pausedOnTouchDrag=!1,this.pausedOnSlideChange=!1,this.settings.autoplayControls&&this.controls(),this.settings.progressBar&&this.core.outer.append('<div class="lg-progress-bar"><div class="lg-progress"></div></div>'),this.settings.slideShowAutoplay&&this.core.LGel.once(o+".autoplay",(function(){t.startAutoPlay()})),this.core.LGel.on(r+".autoplay touchstart.lg.autoplay",(function(){t.interval&&(t.stopAutoPlay(),t.pausedOnTouchDrag=!0)})),this.core.LGel.on(i+".autoplay touchend.lg.autoplay",(function(){!t.interval&&t.pausedOnTouchDrag&&(t.startAutoPlay(),t.pausedOnTouchDrag=!1)})),this.core.LGel.on(e+".autoplay",(function(){t.showProgressBar(),!t.fromAuto&&t.interval?(t.stopAutoPlay(),t.pausedOnSlideChange=!0):t.pausedOnSlideChange=!1,t.fromAuto=!1})),this.core.LGel.on(s+".autoplay",(function(){t.pausedOnSlideChange&&!t.interval&&t.settings.forceSlideShowAutoplay&&(t.startAutoPlay(),t.pausedOnSlideChange=!1)})),this.showProgressBar())},p.prototype.showProgressBar=function(){var t=this;if(this.settings.progressBar&&this.fromAuto){var o=this.core.outer.find(".lg-progress-bar"),e=this.core.outer.find(".lg-progress");this.interval&&(e.removeAttr("style"),o.removeClass("lg-start"),setTimeout((function(){e.css("transition","width "+(t.core.settings.speed+t.settings.slideShowInterval)+"ms ease 0s"),o.addClass("lg-start")}),20))}},p.prototype.controls=function(){var t=this,o='<button aria-label="'+this.settings.autoplayPluginStrings.toggleAutoplay+'" type="button" class="lg-autoplay-button lg-icon"></button>';this.core.outer.find(this.settings.appendAutoplayControlsTo).append(o),this.core.outer.find(".lg-autoplay-button").first().on("click.lg.autoplay",(function(){t.core.outer.hasClass("lg-show-autoplay")?t.stopAutoPlay():t.interval||t.startAutoPlay()}))},p.prototype.startAutoPlay=function(){var t=this;this.core.outer.find(".lg-progress").css("transition","width "+(this.core.settings.speed+this.settings.slideShowInterval)+"ms ease 0s"),this.core.outer.addClass("lg-show-autoplay"),this.core.outer.find(".lg-progress-bar").addClass("lg-start"),this.core.LGel.trigger(l,{index:this.core.index}),this.interval=setInterval((function(){t.core.index+1<t.core.galleryItems.length?t.core.index++:t.core.index=0,t.core.LGel.trigger(a,{index:t.core.index}),t.fromAuto=!0,t.core.slide(t.core.index,!1,!1,"next")}),this.core.settings.speed+this.settings.slideShowInterval)},p.prototype.stopAutoPlay=function(){this.interval&&(this.core.LGel.trigger(n,{index:this.core.index}),this.core.outer.find(".lg-progress").removeAttr("style"),this.core.outer.removeClass("lg-show-autoplay"),this.core.outer.find(".lg-progress-bar").removeClass("lg-start")),clearInterval(this.interval),this.interval=!1},p.prototype.closeGallery=function(){this.stopAutoPlay()},p.prototype.destroy=function(){this.settings.autoplay&&this.core.outer.find(".lg-progress-bar").remove(),this.core.LGel.off(".lg.autoplay"),this.core.LGel.off(".autoplay")},p}()}));
|
||||
8
blocks/lcp-gallery/assets/js/lg-comment.min.js
vendored
Normal file
8
blocks/lcp-gallery/assets/js/lg-comment.min.js
vendored
Normal file
@ -0,0 +1,8 @@
|
||||
/**
|
||||
* lightgallery | 2.8.2 | November 28th 2024
|
||||
* http://www.lightgalleryjs.com/
|
||||
* Copyright (c) 2020 Sachin Neravath;
|
||||
* @license GPLv3
|
||||
*/
|
||||
|
||||
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).lgComment=e()}(this,(function(){"use strict";var t=function(){return(t=Object.assign||function(t){for(var e,o=1,n=arguments.length;o<n;o++)for(var i in e=arguments[o])Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);return t}).apply(this,arguments)},e="lgBeforeSlide",o="lgAfterSlide",n={commentBox:!1,fbComments:!1,disqusComments:!1,disqusConfig:{title:void 0,language:"en"},commentsMarkup:'<div id="lg-comment-box" class="lg-comment-box lg-fb-comment-box"><div class="lg-comment-header"><h3 class="lg-comment-title">Leave a comment.</h3><span class="lg-comment-close lg-icon"></span></div><div class="lg-comment-body"></div></div>',commentPluginStrings:{toggleComments:"Toggle Comments"}};return function(){function i(e,o){return this.core=e,this.$LG=o,this.settings=t(t({},n),this.core.settings),this}return i.prototype.init=function(){this.settings.commentBox&&(this.setMarkup(),this.toggleCommentBox(),this.settings.fbComments?this.addFbComments():this.settings.disqusComments&&this.addDisqusComments())},i.prototype.setMarkup=function(){this.core.outer.append(this.settings.commentsMarkup+'<div class="lg-comment-overlay"></div>');var t='<button type="button" aria-label="'+this.settings.commentPluginStrings.toggleComments+'" class="lg-comment-toggle lg-icon"></button>';this.core.$toolbar.append(t)},i.prototype.toggleCommentBox=function(){var t=this;this.core.outer.find(".lg-comment-toggle").first().on("click.lg.comment",(function(){t.core.outer.toggleClass("lg-comment-active")})),this.core.outer.find(".lg-comment-overlay").first().on("click.lg.comment",(function(){t.core.outer.removeClass("lg-comment-active")})),this.core.outer.find(".lg-comment-close").first().on("click.lg.comment",(function(){t.core.outer.removeClass("lg-comment-active")}))},i.prototype.addFbComments=function(){var t=this,n=this;this.core.LGel.on(e+".comment",(function(e){var o=t.core.galleryItems[e.detail.index].fbHtml;t.core.outer.find(".lg-comment-body").html(o)})),this.core.LGel.on(o+".comment",(function(){try{FB.XFBML.parse()}catch(t){n.$LG(window).on("fbAsyncInit",(function(){FB.XFBML.parse()}))}}))},i.prototype.addDisqusComments=function(){var t=this,n=this.$LG("#disqus_thread");n.remove(),this.core.outer.find(".lg-comment-body").append('<div id="disqus_thread"></div>'),this.core.LGel.on(e+".comment",(function(){n.html("")})),this.core.LGel.on(o+".comment",(function(e){var o=e.detail.index,n=t;setTimeout((function(){try{DISQUS.reset({reload:!0,config:function(){this.page.identifier=n.core.galleryItems[o].disqusIdentifier,this.page.url=n.core.galleryItems[o].disqusURL,this.page.title=n.settings.disqusConfig.title,this.language=n.settings.disqusConfig.language}})}catch(t){console.error("Make sure you have included disqus JavaScript code in your document. Ex - https://lg-disqus.disqus.com/admin/install/platforms/universalcode/")}}),n.core.lGalleryOn?0:1e3)}))},i.prototype.destroy=function(){this.core.LGel.off(".lg.comment"),this.core.LGel.off(".comment")},i}()}));
|
||||
8
blocks/lcp-gallery/assets/js/lg-fullscreen.min.js
vendored
Normal file
8
blocks/lcp-gallery/assets/js/lg-fullscreen.min.js
vendored
Normal file
@ -0,0 +1,8 @@
|
||||
/**
|
||||
* lightgallery | 2.8.2 | November 28th 2024
|
||||
* http://www.lightgalleryjs.com/
|
||||
* Copyright (c) 2020 Sachin Neravath;
|
||||
* @license GPLv3
|
||||
*/
|
||||
|
||||
!function(e,l){"object"==typeof exports&&"undefined"!=typeof module?module.exports=l():"function"==typeof define&&define.amd?define(l):(e="undefined"!=typeof globalThis?globalThis:e||self).lgFullscreen=l()}(this,(function(){"use strict";var e=function(){return(e=Object.assign||function(e){for(var l,n=1,t=arguments.length;n<t;n++)for(var c in l=arguments[n])Object.prototype.hasOwnProperty.call(l,c)&&(e[c]=l[c]);return e}).apply(this,arguments)},l={fullScreen:!0,fullscreenPluginStrings:{toggleFullscreen:"Toggle Fullscreen"}};return function(){function n(n,t){return this.core=n,this.$LG=t,this.settings=e(e({},l),this.core.settings),this}return n.prototype.init=function(){var e="";if(this.settings.fullScreen){if(!(document.fullscreenEnabled||document.webkitFullscreenEnabled||document.mozFullScreenEnabled||document.msFullscreenEnabled))return;e='<button type="button" aria-label="'+this.settings.fullscreenPluginStrings.toggleFullscreen+'" class="lg-fullscreen lg-icon"></button>',this.core.$toolbar.append(e),this.fullScreen()}},n.prototype.isFullScreen=function(){return document.fullscreenElement||document.mozFullScreenElement||document.webkitFullscreenElement||document.msFullscreenElement},n.prototype.requestFullscreen=function(){var e=document.documentElement;e.requestFullscreen?e.requestFullscreen():e.msRequestFullscreen?e.msRequestFullscreen():e.mozRequestFullScreen?e.mozRequestFullScreen():e.webkitRequestFullscreen&&e.webkitRequestFullscreen()},n.prototype.exitFullscreen=function(){document.exitFullscreen?document.exitFullscreen():document.msExitFullscreen?document.msExitFullscreen():document.mozCancelFullScreen?document.mozCancelFullScreen():document.webkitExitFullscreen&&document.webkitExitFullscreen()},n.prototype.fullScreen=function(){var e=this;this.$LG(document).on("fullscreenchange.lg.global"+this.core.lgId+" \n webkitfullscreenchange.lg.global"+this.core.lgId+" \n mozfullscreenchange.lg.global"+this.core.lgId+" \n MSFullscreenChange.lg.global"+this.core.lgId,(function(){e.core.lgOpened&&e.core.outer.toggleClass("lg-fullscreen-on")})),this.core.outer.find(".lg-fullscreen").first().on("click.lg",(function(){e.isFullScreen()?e.exitFullscreen():e.requestFullscreen()}))},n.prototype.closeGallery=function(){this.isFullScreen()&&this.exitFullscreen()},n.prototype.destroy=function(){this.$LG(document).off("fullscreenchange.lg.global"+this.core.lgId+" \n webkitfullscreenchange.lg.global"+this.core.lgId+" \n mozfullscreenchange.lg.global"+this.core.lgId+" \n MSFullscreenChange.lg.global"+this.core.lgId)},n}()}));
|
||||
8
blocks/lcp-gallery/assets/js/lg-hash.min.js
vendored
Normal file
8
blocks/lcp-gallery/assets/js/lg-hash.min.js
vendored
Normal file
@ -0,0 +1,8 @@
|
||||
/**
|
||||
* lightgallery | 2.8.2 | November 28th 2024
|
||||
* http://www.lightgalleryjs.com/
|
||||
* Copyright (c) 2020 Sachin Neravath;
|
||||
* @license GPLv3
|
||||
*/
|
||||
|
||||
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).lgHash=e()}(this,(function(){"use strict";var t=function(){return(t=Object.assign||function(t){for(var e,i=1,o=arguments.length;i<o;i++)for(var s in e=arguments[i])Object.prototype.hasOwnProperty.call(e,s)&&(t[s]=e[s]);return t}).apply(this,arguments)},e="lgAfterSlide",i="lgAfterClose",o={hash:!0,galleryId:"1",customSlideName:!1};return function(){function s(e,i){return this.core=e,this.$LG=i,this.settings=t(t({},o),this.core.settings),this}return s.prototype.init=function(){var t=this;this.settings.hash&&(this.oldHash=window.location.hash,setTimeout((function(){t.buildFromHash()}),100),this.core.LGel.on(e+".hash",this.onAfterSlide.bind(this)),this.core.LGel.on(i+".hash",this.onCloseAfter.bind(this)),this.$LG(window).on("hashchange.lg.hash.global"+this.core.lgId,this.onHashchange.bind(this)))},s.prototype.onAfterSlide=function(t){var e=this.core.galleryItems[t.detail.index].slideName;e=this.settings.customSlideName&&e||t.detail.index,history.replaceState?history.replaceState(null,"",window.location.pathname+window.location.search+"#lg="+this.settings.galleryId+"&slide="+e):window.location.hash="lg="+this.settings.galleryId+"&slide="+e},s.prototype.getIndexFromUrl=function(t){void 0===t&&(t=window.location.hash);var e=t.split("&slide=")[1],i=0;if(this.settings.customSlideName)for(var o=0;o<this.core.galleryItems.length;o++){if(this.core.galleryItems[o].slideName===e){i=o;break}}else i=parseInt(e,10);return isNaN(i)?0:i},s.prototype.buildFromHash=function(){var t=window.location.hash;if(t.indexOf("lg="+this.settings.galleryId)>0){this.$LG(document.body).addClass("lg-from-hash");var e=this.getIndexFromUrl(t);return this.core.openGallery(e),!0}},s.prototype.onCloseAfter=function(){this.oldHash&&this.oldHash.indexOf("lg="+this.settings.galleryId)<0?history.replaceState?history.replaceState(null,"",this.oldHash):window.location.hash=this.oldHash:history.replaceState?history.replaceState(null,document.title,window.location.pathname+window.location.search):window.location.hash=""},s.prototype.onHashchange=function(){if(this.core.lgOpened){var t=window.location.hash,e=this.getIndexFromUrl(t);t.indexOf("lg="+this.settings.galleryId)>-1?this.core.slide(e,!1,!1):this.core.lGalleryOn&&this.core.closeGallery()}},s.prototype.closeGallery=function(){this.settings.hash&&this.$LG(document.body).removeClass("lg-from-hash")},s.prototype.destroy=function(){this.core.LGel.off(".lg.hash"),this.core.LGel.off(".hash"),this.$LG(window).off("hashchange.lg.hash.global"+this.core.lgId)},s}()}));
|
||||
8
blocks/lcp-gallery/assets/js/lg-medium-zoom.min.js
vendored
Normal file
8
blocks/lcp-gallery/assets/js/lg-medium-zoom.min.js
vendored
Normal file
@ -0,0 +1,8 @@
|
||||
/**
|
||||
* lightgallery | 2.8.2 | November 28th 2024
|
||||
* http://www.lightgalleryjs.com/
|
||||
* Copyright (c) 2020 Sachin Neravath;
|
||||
* @license GPLv3
|
||||
*/
|
||||
|
||||
!function(o,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(o="undefined"!=typeof globalThis?globalThis:o||self).lgMediumZoom=t()}(this,(function(){"use strict";var o=function(){return(o=Object.assign||function(o){for(var t,e=1,i=arguments.length;e<i;e++)for(var n in t=arguments[e])Object.prototype.hasOwnProperty.call(t,n)&&(o[n]=t[n]);return o}).apply(this,arguments)},t="lgBeforeOpen",e={margin:40,mediumZoom:!0,backgroundColor:"#000"};return function(){function i(t,i){var n=this;this.core=t,this.$LG=i,this.core.getMediaContainerPosition=function(){return{top:n.settings.margin,bottom:n.settings.margin}};var s={controls:!1,download:!1,counter:!1,showCloseIcon:!1,extraProps:["lgBackgroundColor"],closeOnTap:!1,enableSwipe:!1,enableDrag:!1,swipeToClose:!1,addClass:this.core.settings.addClass+" lg-medium-zoom"};return this.core.settings=o(o({},this.core.settings),s),this.settings=o(o(o({},e),this.core.settings),s),this}return i.prototype.toggleItemClass=function(){for(var o=0;o<this.core.items.length;o++){this.$LG(this.core.items[o]).toggleClass("lg-medium-zoom-item")}},i.prototype.init=function(){var o=this;this.settings.mediumZoom&&(this.core.LGel.on(t+".medium",(function(){o.core.$backdrop.css("background-color",o.core.galleryItems[o.core.index].lgBackgroundColor||o.settings.backgroundColor)})),this.toggleItemClass(),this.core.outer.on("click.lg.medium",(function(){o.core.closeGallery()})))},i.prototype.destroy=function(){this.toggleItemClass()},i}()}));
|
||||
8
blocks/lcp-gallery/assets/js/lg-pager.min.js
vendored
Normal file
8
blocks/lcp-gallery/assets/js/lg-pager.min.js
vendored
Normal file
@ -0,0 +1,8 @@
|
||||
/**
|
||||
* lightgallery | 2.8.2 | November 28th 2024
|
||||
* http://www.lightgalleryjs.com/
|
||||
* Copyright (c) 2020 Sachin Neravath;
|
||||
* @license GPLv3
|
||||
*/
|
||||
|
||||
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).lgPager=t()}(this,(function(){"use strict";var e=function(){return(e=Object.assign||function(e){for(var t,r=1,o=arguments.length;r<o;r++)for(var i in t=arguments[r])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e}).apply(this,arguments)},t="lgUpdateSlides",r="lgBeforeSlide",o={pager:!0};return function(){function i(t,r){return this.core=t,this.$LG=r,this.settings=e(e({},o),this.core.settings),this}return i.prototype.getPagerHtml=function(e){for(var t="",r=0;r<e.length;r++)t+='<span data-lg-item-id="'+r+'" class="lg-pager-cont"> \n <span data-lg-item-id="'+r+'" class="lg-pager"></span>\n <div class="lg-pager-thumb-cont"><span class="lg-caret"></span> <img src="'+e[r].thumb+'" /></div>\n </span>';return t},i.prototype.init=function(){var e=this;if(this.settings.pager){var o;this.core.$lgComponents.prepend('<div class="lg-pager-outer"></div>');var i=this.core.outer.find(".lg-pager-outer");i.html(this.getPagerHtml(this.core.galleryItems)),i.first().on("click.lg touchend.lg",(function(t){var r=e.$LG(t.target);if(r.hasAttribute("data-lg-item-id")){var o=parseInt(r.attr("data-lg-item-id"));e.core.slide(o,!1,!0,!1)}})),i.first().on("mouseover.lg",(function(){clearTimeout(o),i.addClass("lg-pager-hover")})),i.first().on("mouseout.lg",(function(){o=setTimeout((function(){i.removeClass("lg-pager-hover")}))})),this.core.LGel.on(r+".pager",(function(t){var r=t.detail.index;e.manageActiveClass.call(e,r)})),this.core.LGel.on(t+".pager",(function(){i.empty(),i.html(e.getPagerHtml(e.core.galleryItems)),e.manageActiveClass(e.core.index)}))}},i.prototype.manageActiveClass=function(e){var t=this.core.outer.find(".lg-pager-cont");t.removeClass("lg-pager-active"),t.eq(e).addClass("lg-pager-active")},i.prototype.destroy=function(){this.core.outer.find(".lg-pager-outer").remove(),this.core.LGel.off(".lg.pager"),this.core.LGel.off(".pager")},i}()}));
|
||||
8
blocks/lcp-gallery/assets/js/lg-relative-caption.min.js
vendored
Normal file
8
blocks/lcp-gallery/assets/js/lg-relative-caption.min.js
vendored
Normal file
@ -0,0 +1,8 @@
|
||||
/**
|
||||
* lightgallery | 2.8.2 | November 28th 2024
|
||||
* http://www.lightgalleryjs.com/
|
||||
* Copyright (c) 2020 Sachin Neravath;
|
||||
* @license GPLv3
|
||||
*/
|
||||
|
||||
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).lgRelativeCaption=e()}(this,(function(){"use strict";var t=function(){return(t=Object.assign||function(t){for(var e,i=1,o=arguments.length;i<o;i++)for(var n in e=arguments[i])Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t}).apply(this,arguments)},e="lgContainerResize",i="lgSlideItemLoad",o="lgBeforeSlide",n="lgAfterSlide",s={relativeCaption:!1};return function(){function l(e){this.core=e;var i={addClass:this.core.settings.addClass+" lg-relative-caption"};return this.core.settings=t(t({},this.core.settings),i),this.settings=t(t(t({},s),this.core.settings),i),this}return l.prototype.init=function(){var t=this;this.settings.relativeCaption&&(this.core.LGel.on(i+".caption",(function(e){var i=e.detail,o=i.index,n=i.delay;setTimeout((function(){o===t.core.index&&t.setRelativeCaption(o)}),n)})),this.core.LGel.on(n+".caption",(function(e){var i=e.detail.index;setTimeout((function(){t.core.getSlideItem(i).hasClass("lg-complete")&&t.setRelativeCaption(i)}))})),this.core.LGel.on(o+".caption",(function(e){var i=e.detail.index;setTimeout((function(){t.core.getSlideItem(i).removeClass("lg-show-caption")}))})),this.core.LGel.on(e+".caption",(function(e){t.setRelativeCaption(t.core.index)})))},l.prototype.setCaptionStyle=function(t,e,i){var o=this.core.getSlideItem(t).find(".lg-relative-caption-item"),n=this.core.getSlideItem(t).find(".lg-sub-html");n.css("width",e.width+"px").css("left",e.left+"px");var s=o.get().getBoundingClientRect(),l=i.bottom-e.bottom-s.height;n.css("top","auto").css("bottom",Math.max(l,0)+"px")},l.prototype.setRelativeCaption=function(t){var e=this.core.getSlideItem(t);if(e.hasClass("lg-current")){var i=this.core.getSlideItem(t).find(".lg-object").get().getBoundingClientRect(),o=this.core.getSlideItem(t).get().getBoundingClientRect();this.setCaptionStyle(t,i,o),e.addClass("lg-show-caption")}},l.prototype.destroy=function(){this.core.LGel.off(".caption")},l}()}));
|
||||
8
blocks/lcp-gallery/assets/js/lg-rotate.min.js
vendored
Normal file
8
blocks/lcp-gallery/assets/js/lg-rotate.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
8
blocks/lcp-gallery/assets/js/lg-share.min.js
vendored
Normal file
8
blocks/lcp-gallery/assets/js/lg-share.min.js
vendored
Normal file
@ -0,0 +1,8 @@
|
||||
/**
|
||||
* lightgallery | 2.8.2 | November 28th 2024
|
||||
* http://www.lightgalleryjs.com/
|
||||
* Copyright (c) 2020 Sachin Neravath;
|
||||
* @license GPLv3
|
||||
*/
|
||||
|
||||
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).lgShare=e()}(this,(function(){"use strict";var t=function(){return(t=Object.assign||function(t){for(var e,r=1,o=arguments.length;r<o;r++)for(var n in e=arguments[r])Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t}).apply(this,arguments)};function e(){for(var t=0,e=0,r=arguments.length;e<r;e++)t+=arguments[e].length;var o=Array(t),n=0;for(e=0;e<r;e++)for(var i=arguments[e],s=0,a=i.length;s<a;s++,n++)o[n]=i[s];return o}var r={share:!0,facebook:!0,facebookDropdownText:"Facebook",twitter:!0,twitterDropdownText:"Twitter",pinterest:!0,pinterestDropdownText:"Pinterest",additionalShareOptions:[],sharePluginStrings:{share:"Share"}};function o(t){return"//www.facebook.com/sharer/sharer.php?u="+encodeURIComponent(t.facebookShareUrl||window.location.href)}function n(t){var e=encodeURIComponent(t.twitterShareUrl||window.location.href);return"//twitter.com/intent/tweet?text="+t.tweetText+"&url="+e}function i(t){var e=t.pinterestText,r=encodeURIComponent(t.src);return"http://www.pinterest.com/pin/create/button/?url="+encodeURIComponent(t.pinterestShareUrl||window.location.href)+"&media="+r+"&description="+e}var s="lgAfterSlide";return function(){function a(e){return this.shareOptions=[],this.core=e,this.settings=t(t({},r),this.core.settings),this}return a.prototype.init=function(){this.settings.share&&(this.shareOptions=e(this.getDefaultShareOptions(),this.settings.additionalShareOptions),this.setLgShareMarkup(),this.core.outer.find(".lg-share .lg-dropdown").append(this.getShareListHtml()),this.core.LGel.on(s+".share",this.onAfterSlide.bind(this)))},a.prototype.getShareListHtml=function(){var t="";return this.shareOptions.forEach((function(e){t+=e.dropdownHTML})),t},a.prototype.setLgShareMarkup=function(){var t=this;this.core.$toolbar.append('<button type="button" aria-label="'+this.settings.sharePluginStrings.share+'" aria-haspopup="true" aria-expanded="false" class="lg-share lg-icon">\n <ul class="lg-dropdown" style="position: absolute;"></ul></button>'),this.core.outer.append('<div class="lg-dropdown-overlay"></div>'),this.core.outer.find(".lg-share").first().on("click.lg",(function(){t.core.outer.toggleClass("lg-dropdown-active"),t.core.outer.hasClass("lg-dropdown-active")?t.core.outer.attr("aria-expanded",!0):t.core.outer.attr("aria-expanded",!1)})),this.core.outer.find(".lg-dropdown-overlay").first().on("click.lg",(function(){t.core.outer.removeClass("lg-dropdown-active"),t.core.outer.attr("aria-expanded",!1)}))},a.prototype.onAfterSlide=function(t){var e=this,r=t.detail.index,o=this.core.galleryItems[r];setTimeout((function(){e.shareOptions.forEach((function(t){var r=t.selector;e.core.outer.find(r).attr("href",t.generateLink(o))}))}),100)},a.prototype.getShareListItemHTML=function(t,e){return'<li><a class="lg-share-'+t+'" rel="noopener" target="_blank"><span class="lg-icon"></span><span class="lg-dropdown-text">'+e+"</span></a></li>"},a.prototype.getDefaultShareOptions=function(){return e(this.settings.facebook?[{type:"facebook",generateLink:o,dropdownHTML:this.getShareListItemHTML("facebook",this.settings.facebookDropdownText),selector:".lg-share-facebook"}]:[],this.settings.twitter?[{type:"twitter",generateLink:n,dropdownHTML:this.getShareListItemHTML("twitter",this.settings.twitterDropdownText),selector:".lg-share-twitter"}]:[],this.settings.pinterest?[{type:"pinterest",generateLink:i,dropdownHTML:this.getShareListItemHTML("pinterest",this.settings.pinterestDropdownText),selector:".lg-share-pinterest"}]:[])},a.prototype.destroy=function(){this.core.outer.find(".lg-dropdown-overlay").remove(),this.core.outer.find(".lg-share").remove(),this.core.LGel.off(".lg.share"),this.core.LGel.off(".share")},a}()}));
|
||||
8
blocks/lcp-gallery/assets/js/lg-thumbnail.min.js
vendored
Normal file
8
blocks/lcp-gallery/assets/js/lg-thumbnail.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
8
blocks/lcp-gallery/assets/js/lg-video.min.js
vendored
Normal file
8
blocks/lcp-gallery/assets/js/lg-video.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
8
blocks/lcp-gallery/assets/js/lg-vimeo-thumbnail.min.js
vendored
Normal file
8
blocks/lcp-gallery/assets/js/lg-vimeo-thumbnail.min.js
vendored
Normal file
@ -0,0 +1,8 @@
|
||||
/**
|
||||
* lightgallery | 2.8.2 | November 28th 2024
|
||||
* http://www.lightgalleryjs.com/
|
||||
* Copyright (c) 2020 Sachin Neravath;
|
||||
* @license GPLv3
|
||||
*/
|
||||
|
||||
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).lgVimeoThumbnail=e()}(this,(function(){"use strict";var t=function(){return(t=Object.assign||function(t){for(var e,n=1,o=arguments.length;n<o;n++)for(var i in e=arguments[n])Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);return t}).apply(this,arguments)};function e(t,e,n,o){return new(n||(n=Promise))((function(i,r){function u(t){try{a(o.next(t))}catch(t){r(t)}}function l(t){try{a(o.throw(t))}catch(t){r(t)}}function a(t){var e;t.done?i(t.value):(e=t.value,e instanceof n?e:new n((function(t){t(e)}))).then(u,l)}a((o=o.apply(t,e||[])).next())}))}function n(t,e){var n,o,i,r,u={label:0,sent:function(){if(1&i[0])throw i[1];return i[1]},trys:[],ops:[]};return r={next:l(0),throw:l(1),return:l(2)},"function"==typeof Symbol&&(r[Symbol.iterator]=function(){return this}),r;function l(r){return function(l){return function(r){if(n)throw new TypeError("Generator is already executing.");for(;u;)try{if(n=1,o&&(i=2&r[0]?o.return:r[0]?o.throw||((i=o.return)&&i.call(o),0):o.next)&&!(i=i.call(o,r[1])).done)return i;switch(o=0,i&&(r=[2&r[0],i.value]),r[0]){case 0:case 1:i=r;break;case 4:return u.label++,{value:r[1],done:!1};case 5:u.label++,o=r[1],r=[0];continue;case 7:r=u.ops.pop(),u.trys.pop();continue;default:if(!(i=u.trys,(i=i.length>0&&i[i.length-1])||6!==r[0]&&2!==r[0])){u=0;continue}if(3===r[0]&&(!i||r[1]>i[0]&&r[1]<i[3])){u.label=r[1];break}if(6===r[0]&&u.label<i[1]){u.label=i[1],i=r;break}if(i&&u.label<i[2]){u.label=i[2],u.ops.push(r);break}i[2]&&u.ops.pop(),u.trys.pop();continue}r=e.call(t,u)}catch(t){r=[6,t],o=0}finally{n=i=0}if(5&r[0])throw r[1];return{value:r[0]?r[1]:void 0,done:!0}}([r,l])}}}var o="lgInit",i={showVimeoThumbnails:!0,showThumbnailWithPlayButton:!1};return function(){function r(e){return this.core=e,this.settings=t(t({},i),this.core.settings),this}return r.prototype.init=function(){var t=this;this.settings.showVimeoThumbnails&&this.core.LGel.on(o+".vimeothumbnails",(function(e){var n=e.detail.instance;n.$container.find(".lg-thumb-outer").get()&&t.setVimeoThumbnails(n)}))},r.prototype.setVimeoThumbnails=function(t){return e(this,void 0,void 0,(function(){var e,o,i;return n(this,(function(n){switch(n.label){case 0:e=0,n.label=1;case 1:return e<t.galleryItems.length?(o=t.galleryItems[e],(o.__slideVideoInfo||{}).vimeo?[4,fetch("https://vimeo.com/api/oembed.json?url="+encodeURIComponent(o.src))]:[3,4]):[3,5];case 2:return[4,n.sent().json()];case 3:i=n.sent(),t.$container.find(".lg-thumb-item").eq(e).find("img").attr("src",this.settings.showThumbnailWithPlayButton?i.thumbnail_url_with_play_button:i.thumbnail_url),n.label=4;case 4:return e++,[3,1];case 5:return[2]}}))}))},r.prototype.destroy=function(){this.core.LGel.off(".lg.vimeothumbnails"),this.core.LGel.off(".vimeothumbnails")},r}()}));
|
||||
8
blocks/lcp-gallery/assets/js/lg-zoom.min.js
vendored
Normal file
8
blocks/lcp-gallery/assets/js/lg-zoom.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
8
blocks/lcp-gallery/assets/js/lightgallery.min.js
vendored
Normal file
8
blocks/lcp-gallery/assets/js/lightgallery.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
33
blocks/lcp-gallery/components/lightGallery.js
Normal file
33
blocks/lcp-gallery/components/lightGallery.js
Normal file
@ -0,0 +1,33 @@
|
||||
import { FC, useCallback, useEffect, useRef, useState } from 'react';
|
||||
import LightGallery from 'lightgallery/react';
|
||||
import lgZoom from 'lightgallery/plugins/zoom';
|
||||
import lgThumbnail from 'lightgallery/plugins/thumbnail';
|
||||
import { LightGallery as ILightGallery } from 'lightgallery/lightgallery';
|
||||
import '../style.css';
|
||||
|
||||
export const App = () => {
|
||||
|
||||
const dynamicEl = [
|
||||
{
|
||||
src: '...',
|
||||
responsive: '...',
|
||||
thumb: '...',
|
||||
subHtml: `...`,
|
||||
},
|
||||
{
|
||||
src: '...',
|
||||
responsive: '...',
|
||||
subHtml: `...`,
|
||||
},
|
||||
// Add more placeholder images as needed
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<LightGallery
|
||||
dynamic={true}
|
||||
dynamicEl={dynamicEl}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
668
blocks/lcp-gallery/components/style.css
Normal file
668
blocks/lcp-gallery/components/style.css
Normal file
@ -0,0 +1,668 @@
|
||||
@font-face {
|
||||
font-family: "lg";
|
||||
src: url("../fonts/lg.woff2?io9a6k") format("woff2"), url("../fonts/lg.ttf?io9a6k") format("truetype"), url("../fonts/lg.woff?io9a6k") format("woff"), url("../fonts/lg.svg?io9a6k#lg") format("svg");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: block;
|
||||
}
|
||||
.lg-icon {
|
||||
/* use !important to prevent issues with browser extensions that change fonts */
|
||||
font-family: "lg" !important;
|
||||
speak: never;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1;
|
||||
/* Better Font Rendering =========== */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.lg-container {
|
||||
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
}
|
||||
|
||||
.lg-next,
|
||||
.lg-prev {
|
||||
background-color: rgba(0, 0, 0, 0.45);
|
||||
border-radius: 2px;
|
||||
color: #999;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
font-size: 22px;
|
||||
margin-top: -10px;
|
||||
padding: 8px 10px 9px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
z-index: 1084;
|
||||
outline: none;
|
||||
border: none;
|
||||
}
|
||||
.lg-next.disabled,
|
||||
.lg-prev.disabled {
|
||||
opacity: 0 !important;
|
||||
cursor: default;
|
||||
}
|
||||
.lg-next:hover:not(.disabled),
|
||||
.lg-prev:hover:not(.disabled) {
|
||||
color: #fff;
|
||||
}
|
||||
.lg-single-item .lg-next,
|
||||
.lg-single-item .lg-prev {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.lg-next {
|
||||
right: 20px;
|
||||
}
|
||||
.lg-next:before {
|
||||
content: "\e095";
|
||||
}
|
||||
|
||||
.lg-prev {
|
||||
left: 20px;
|
||||
}
|
||||
.lg-prev:after {
|
||||
content: "\e094";
|
||||
}
|
||||
|
||||
@-webkit-keyframes lg-right-end {
|
||||
0% {
|
||||
left: 0;
|
||||
}
|
||||
50% {
|
||||
left: -30px;
|
||||
}
|
||||
100% {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
@-moz-keyframes lg-right-end {
|
||||
0% {
|
||||
left: 0;
|
||||
}
|
||||
50% {
|
||||
left: -30px;
|
||||
}
|
||||
100% {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
@-ms-keyframes lg-right-end {
|
||||
0% {
|
||||
left: 0;
|
||||
}
|
||||
50% {
|
||||
left: -30px;
|
||||
}
|
||||
100% {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
@keyframes lg-right-end {
|
||||
0% {
|
||||
left: 0;
|
||||
}
|
||||
50% {
|
||||
left: -30px;
|
||||
}
|
||||
100% {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes lg-left-end {
|
||||
0% {
|
||||
left: 0;
|
||||
}
|
||||
50% {
|
||||
left: 30px;
|
||||
}
|
||||
100% {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
@-moz-keyframes lg-left-end {
|
||||
0% {
|
||||
left: 0;
|
||||
}
|
||||
50% {
|
||||
left: 30px;
|
||||
}
|
||||
100% {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
@-ms-keyframes lg-left-end {
|
||||
0% {
|
||||
left: 0;
|
||||
}
|
||||
50% {
|
||||
left: 30px;
|
||||
}
|
||||
100% {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
@keyframes lg-left-end {
|
||||
0% {
|
||||
left: 0;
|
||||
}
|
||||
50% {
|
||||
left: 30px;
|
||||
}
|
||||
100% {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
.lg-outer.lg-right-end .lg-object {
|
||||
-webkit-animation: lg-right-end 0.3s;
|
||||
-o-animation: lg-right-end 0.3s;
|
||||
animation: lg-right-end 0.3s;
|
||||
position: relative;
|
||||
}
|
||||
.lg-outer.lg-left-end .lg-object {
|
||||
-webkit-animation: lg-left-end 0.3s;
|
||||
-o-animation: lg-left-end 0.3s;
|
||||
animation: lg-left-end 0.3s;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.lg-toolbar {
|
||||
z-index: 1082;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.lg-media-overlap .lg-toolbar {
|
||||
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
|
||||
}
|
||||
.lg-toolbar .lg-icon {
|
||||
color: #999;
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
font-size: 24px;
|
||||
height: 47px;
|
||||
line-height: 27px;
|
||||
padding: 10px 0;
|
||||
text-align: center;
|
||||
width: 50px;
|
||||
text-decoration: none !important;
|
||||
outline: medium none;
|
||||
will-change: color;
|
||||
-webkit-transition: color 0.2s linear;
|
||||
-o-transition: color 0.2s linear;
|
||||
transition: color 0.2s linear;
|
||||
background: none;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
.lg-toolbar .lg-icon.lg-icon-18 {
|
||||
font-size: 18px;
|
||||
}
|
||||
.lg-toolbar .lg-icon:hover {
|
||||
color: #fff;
|
||||
}
|
||||
.lg-toolbar .lg-close:after {
|
||||
content: "\e070";
|
||||
}
|
||||
.lg-toolbar .lg-maximize {
|
||||
font-size: 22px;
|
||||
}
|
||||
.lg-toolbar .lg-maximize:after {
|
||||
content: "\e90a";
|
||||
}
|
||||
.lg-toolbar .lg-download:after {
|
||||
content: "\e0f2";
|
||||
}
|
||||
|
||||
.lg-sub-html {
|
||||
color: #eee;
|
||||
font-size: 16px;
|
||||
padding: 10px 40px;
|
||||
text-align: center;
|
||||
z-index: 1080;
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.2s ease-out 0s;
|
||||
-o-transition: opacity 0.2s ease-out 0s;
|
||||
transition: opacity 0.2s ease-out 0s;
|
||||
}
|
||||
.lg-sub-html h4 {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.lg-sub-html p {
|
||||
font-size: 12px;
|
||||
margin: 5px 0 0;
|
||||
}
|
||||
.lg-sub-html a {
|
||||
color: inherit;
|
||||
}
|
||||
.lg-sub-html a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.lg-media-overlap .lg-sub-html {
|
||||
background-image: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));
|
||||
}
|
||||
.lg-item .lg-sub-html {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.lg-error-msg {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.lg-counter {
|
||||
color: #999;
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
padding-left: 20px;
|
||||
padding-top: 12px;
|
||||
height: 47px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.lg-closing .lg-toolbar,
|
||||
.lg-closing .lg-prev,
|
||||
.lg-closing .lg-next,
|
||||
.lg-closing .lg-sub-html {
|
||||
opacity: 0;
|
||||
-webkit-transition: -webkit-transform 0.08 cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.08 cubic-bezier(0, 0, 0.25, 1) 0s, color 0.08 linear;
|
||||
-moz-transition: -moz-transform 0.08 cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.08 cubic-bezier(0, 0, 0.25, 1) 0s, color 0.08 linear;
|
||||
-o-transition: -o-transform 0.08 cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.08 cubic-bezier(0, 0, 0.25, 1) 0s, color 0.08 linear;
|
||||
transition: transform 0.08 cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.08 cubic-bezier(0, 0, 0.25, 1) 0s, color 0.08 linear;
|
||||
}
|
||||
|
||||
body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item:not(.lg-zoomable) .lg-img-wrap,
|
||||
body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item:not(.lg-zoomable) .lg-video-cont,
|
||||
body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item:not(.lg-zoomable) .lg-media-cont {
|
||||
opacity: 0;
|
||||
-moz-transform: scale3d(0.5, 0.5, 0.5);
|
||||
-o-transform: scale3d(0.5, 0.5, 0.5);
|
||||
-ms-transform: scale3d(0.5, 0.5, 0.5);
|
||||
-webkit-transform: scale3d(0.5, 0.5, 0.5);
|
||||
transform: scale3d(0.5, 0.5, 0.5);
|
||||
will-change: transform, opacity;
|
||||
-webkit-transition: -webkit-transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important;
|
||||
-moz-transition: -moz-transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important;
|
||||
-o-transition: -o-transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important;
|
||||
transition: transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important;
|
||||
}
|
||||
body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item:not(.lg-zoomable).lg-complete .lg-img-wrap,
|
||||
body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item:not(.lg-zoomable).lg-complete .lg-video-cont,
|
||||
body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item:not(.lg-zoomable).lg-complete .lg-media-cont {
|
||||
opacity: 1;
|
||||
-moz-transform: scale3d(1, 1, 1);
|
||||
-o-transform: scale3d(1, 1, 1);
|
||||
-ms-transform: scale3d(1, 1, 1);
|
||||
-webkit-transform: scale3d(1, 1, 1);
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
|
||||
.lg-icon:focus-visible {
|
||||
color: #fff;
|
||||
border-radius: 3px;
|
||||
outline: 1px dashed rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
.lg-toolbar .lg-icon:focus-visible {
|
||||
border-radius: 8px;
|
||||
outline-offset: -5px;
|
||||
}
|
||||
|
||||
.lg-group:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.lg-container {
|
||||
display: none;
|
||||
outline: none;
|
||||
}
|
||||
.lg-container.lg-show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.lg-on {
|
||||
scroll-behavior: unset;
|
||||
}
|
||||
|
||||
.lg-overlay-open {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.lg-toolbar,
|
||||
.lg-prev,
|
||||
.lg-next,
|
||||
.lg-pager-outer,
|
||||
.lg-hide-sub-html .lg-sub-html {
|
||||
opacity: 0;
|
||||
will-change: transform, opacity;
|
||||
-webkit-transition: -webkit-transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.25s cubic-bezier(0, 0, 0.25, 1) 0s;
|
||||
-moz-transition: -moz-transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.25s cubic-bezier(0, 0, 0.25, 1) 0s;
|
||||
-o-transition: -o-transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.25s cubic-bezier(0, 0, 0.25, 1) 0s;
|
||||
transition: transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.25s cubic-bezier(0, 0, 0.25, 1) 0s;
|
||||
}
|
||||
|
||||
.lg-show-in .lg-toolbar,
|
||||
.lg-show-in .lg-prev,
|
||||
.lg-show-in .lg-next,
|
||||
.lg-show-in .lg-pager-outer {
|
||||
opacity: 1;
|
||||
}
|
||||
.lg-show-in.lg-hide-sub-html .lg-sub-html {
|
||||
opacity: 1;
|
||||
}
|
||||
.lg-show-in .lg-hide-items .lg-prev {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(-10px, 0, 0);
|
||||
transform: translate3d(-10px, 0, 0);
|
||||
}
|
||||
.lg-show-in .lg-hide-items .lg-next {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(10px, 0, 0);
|
||||
transform: translate3d(10px, 0, 0);
|
||||
}
|
||||
.lg-show-in .lg-hide-items .lg-toolbar {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(0, -10px, 0);
|
||||
transform: translate3d(0, -10px, 0);
|
||||
}
|
||||
.lg-show-in .lg-hide-items.lg-hide-sub-html .lg-sub-html {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(0, 20px, 0);
|
||||
transform: translate3d(0, 20px, 0);
|
||||
}
|
||||
|
||||
.lg-outer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1050;
|
||||
text-align: left;
|
||||
opacity: 0.001;
|
||||
outline: none;
|
||||
will-change: auto;
|
||||
overflow: hidden;
|
||||
-webkit-transition: opacity 0.15s ease 0s;
|
||||
-o-transition: opacity 0.15s ease 0s;
|
||||
transition: opacity 0.15s ease 0s;
|
||||
}
|
||||
.lg-outer * {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.lg-outer.lg-zoom-from-image {
|
||||
opacity: 1;
|
||||
}
|
||||
.lg-outer.lg-visible {
|
||||
opacity: 1;
|
||||
}
|
||||
.lg-outer.lg-css3 .lg-item:not(.lg-start-end-progress).lg-prev-slide, .lg-outer.lg-css3 .lg-item:not(.lg-start-end-progress).lg-next-slide, .lg-outer.lg-css3 .lg-item:not(.lg-start-end-progress).lg-current {
|
||||
-webkit-transition-duration: inherit !important;
|
||||
transition-duration: inherit !important;
|
||||
-webkit-transition-timing-function: inherit !important;
|
||||
transition-timing-function: inherit !important;
|
||||
}
|
||||
.lg-outer.lg-css3.lg-dragging .lg-item.lg-prev-slide, .lg-outer.lg-css3.lg-dragging .lg-item.lg-next-slide, .lg-outer.lg-css3.lg-dragging .lg-item.lg-current {
|
||||
-webkit-transition-duration: 0s !important;
|
||||
transition-duration: 0s !important;
|
||||
opacity: 1;
|
||||
}
|
||||
.lg-outer.lg-grab img.lg-object {
|
||||
cursor: -webkit-grab;
|
||||
cursor: -moz-grab;
|
||||
cursor: -o-grab;
|
||||
cursor: -ms-grab;
|
||||
cursor: grab;
|
||||
}
|
||||
.lg-outer.lg-grabbing img.lg-object {
|
||||
cursor: move;
|
||||
cursor: -webkit-grabbing;
|
||||
cursor: -moz-grabbing;
|
||||
cursor: -o-grabbing;
|
||||
cursor: -ms-grabbing;
|
||||
cursor: grabbing;
|
||||
}
|
||||
.lg-outer .lg-content {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.lg-outer .lg-inner {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
-webkit-transition: opacity 0s;
|
||||
-o-transition: opacity 0s;
|
||||
transition: opacity 0s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.lg-outer .lg-item {
|
||||
display: none !important;
|
||||
}
|
||||
.lg-outer .lg-item:not(.lg-start-end-progress) {
|
||||
background: url("../images/loading.gif") no-repeat scroll center center transparent;
|
||||
}
|
||||
.lg-outer.lg-css3 .lg-prev-slide,
|
||||
.lg-outer.lg-css3 .lg-current,
|
||||
.lg-outer.lg-css3 .lg-next-slide {
|
||||
display: inline-block !important;
|
||||
}
|
||||
.lg-outer.lg-css .lg-current {
|
||||
display: inline-block !important;
|
||||
}
|
||||
.lg-outer .lg-item,
|
||||
.lg-outer .lg-img-wrap {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.lg-outer .lg-item:before,
|
||||
.lg-outer .lg-img-wrap:before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.lg-outer .lg-img-wrap {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
white-space: nowrap;
|
||||
font-size: 0;
|
||||
}
|
||||
.lg-outer .lg-item.lg-complete {
|
||||
background-image: none;
|
||||
}
|
||||
.lg-outer .lg-item.lg-current {
|
||||
z-index: 1060;
|
||||
}
|
||||
.lg-outer .lg-object {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
width: auto;
|
||||
height: auto;
|
||||
position: relative;
|
||||
}
|
||||
.lg-outer .lg-empty-html.lg-sub-html,
|
||||
.lg-outer .lg-empty-html .lg-sub-html {
|
||||
display: none;
|
||||
}
|
||||
.lg-outer.lg-hide-download .lg-download {
|
||||
opacity: 0.75;
|
||||
pointer-events: none;
|
||||
}
|
||||
.lg-outer .lg-first-slide .lg-dummy-img {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
}
|
||||
.lg-outer.lg-components-open:not(.lg-zoomed) .lg-components {
|
||||
-webkit-transform: translate3d(0, 0%, 0);
|
||||
transform: translate3d(0, 0%, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
.lg-outer.lg-components-open:not(.lg-zoomed) .lg-sub-html {
|
||||
opacity: 1;
|
||||
transition: opacity 0.2s ease-out 0.15s;
|
||||
}
|
||||
.lg-outer .lg-media-cont {
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
}
|
||||
.lg-outer .lg-media-cont .lg-object {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
.lg-outer .lg-has-iframe .lg-media-cont {
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.lg-backdrop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 1040;
|
||||
background-color: #000;
|
||||
opacity: 0;
|
||||
will-change: auto;
|
||||
-webkit-transition: opacity 333ms ease-in 0s;
|
||||
-o-transition: opacity 333ms ease-in 0s;
|
||||
transition: opacity 333ms ease-in 0s;
|
||||
}
|
||||
.lg-backdrop.in {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.lg-css3.lg-no-trans .lg-prev-slide,
|
||||
.lg-css3.lg-no-trans .lg-next-slide,
|
||||
.lg-css3.lg-no-trans .lg-current {
|
||||
-webkit-transition: none 0s ease 0s !important;
|
||||
-moz-transition: none 0s ease 0s !important;
|
||||
-o-transition: none 0s ease 0s !important;
|
||||
transition: none 0s ease 0s !important;
|
||||
}
|
||||
.lg-css3.lg-use-css3 .lg-item {
|
||||
-webkit-backface-visibility: hidden;
|
||||
-moz-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
.lg-css3.lg-fade .lg-item {
|
||||
opacity: 0;
|
||||
}
|
||||
.lg-css3.lg-fade .lg-item.lg-current {
|
||||
opacity: 1;
|
||||
}
|
||||
.lg-css3.lg-fade .lg-item.lg-prev-slide, .lg-css3.lg-fade .lg-item.lg-next-slide, .lg-css3.lg-fade .lg-item.lg-current {
|
||||
-webkit-transition: opacity 0.1s ease 0s;
|
||||
-moz-transition: opacity 0.1s ease 0s;
|
||||
-o-transition: opacity 0.1s ease 0s;
|
||||
transition: opacity 0.1s ease 0s;
|
||||
}
|
||||
.lg-css3.lg-use-css3 .lg-item.lg-start-progress {
|
||||
-webkit-transition: -webkit-transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
|
||||
-moz-transition: -moz-transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
|
||||
-o-transition: -o-transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
|
||||
transition: transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
|
||||
}
|
||||
.lg-css3.lg-use-css3 .lg-item.lg-start-end-progress {
|
||||
-webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s;
|
||||
-moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s;
|
||||
-o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s;
|
||||
transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s;
|
||||
}
|
||||
.lg-css3.lg-slide.lg-use-css3 .lg-item {
|
||||
opacity: 0;
|
||||
}
|
||||
.lg-css3.lg-slide.lg-use-css3 .lg-item.lg-prev-slide {
|
||||
-webkit-transform: translate3d(-100%, 0, 0);
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
}
|
||||
.lg-css3.lg-slide.lg-use-css3 .lg-item.lg-next-slide {
|
||||
-webkit-transform: translate3d(100%, 0, 0);
|
||||
transform: translate3d(100%, 0, 0);
|
||||
}
|
||||
.lg-css3.lg-slide.lg-use-css3 .lg-item.lg-current {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
.lg-css3.lg-slide.lg-use-css3 .lg-item.lg-prev-slide, .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-next-slide, .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-current {
|
||||
-webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
|
||||
-moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
|
||||
-o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
|
||||
transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
|
||||
}
|
||||
|
||||
.lg-container {
|
||||
display: none;
|
||||
}
|
||||
.lg-container.lg-show {
|
||||
display: block;
|
||||
}
|
||||
.lg-container.lg-dragging-vertical .lg-backdrop {
|
||||
-webkit-transition-duration: 0s !important;
|
||||
transition-duration: 0s !important;
|
||||
}
|
||||
.lg-container.lg-dragging-vertical .lg-css3 .lg-item.lg-current {
|
||||
-webkit-transition-duration: 0s !important;
|
||||
transition-duration: 0s !important;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.lg-inline .lg-backdrop,
|
||||
.lg-inline .lg-outer {
|
||||
position: absolute;
|
||||
}
|
||||
.lg-inline .lg-backdrop {
|
||||
z-index: 1;
|
||||
}
|
||||
.lg-inline .lg-outer {
|
||||
z-index: 2;
|
||||
}
|
||||
.lg-inline .lg-maximize:after {
|
||||
content: "\e909";
|
||||
}
|
||||
|
||||
.lg-components {
|
||||
-webkit-transform: translate3d(0, 100%, 0);
|
||||
transform: translate3d(0, 100%, 0);
|
||||
will-change: transform;
|
||||
-webkit-transition: -webkit-transform 0.35s ease-out 0s;
|
||||
-moz-transition: -moz-transform 0.35s ease-out 0s;
|
||||
-o-transition: -o-transform 0.35s ease-out 0s;
|
||||
transition: transform 0.35s ease-out 0s;
|
||||
z-index: 1080;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=lightgallery.css.map */
|
||||
549
blocks/lcp-gallery/lcp-gallery.php
Normal file
549
blocks/lcp-gallery/lcp-gallery.php
Normal file
@ -0,0 +1,549 @@
|
||||
<?php
|
||||
/**
|
||||
* Plugin Name: Lcp Gallery
|
||||
* Description: Example block scaffolded with Create Block tool.
|
||||
* Requires at least: 6.1
|
||||
* Requires PHP: 7.0
|
||||
* Version: 0.1.0
|
||||
* Author: The WordPress Contributors
|
||||
* License: GPL-2.0-or-later
|
||||
* License URI: https://www.gnu.org/licenses/gpl-2.0.html
|
||||
* Text Domain: lcp
|
||||
*
|
||||
* @package CreateBlock
|
||||
*/
|
||||
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit; // Exit if accessed directly.
|
||||
}
|
||||
|
||||
/**
|
||||
* Registers the block using the metadata loaded from the `block.json` file.
|
||||
* Behind the scenes, it registers also all assets so they can be enqueued
|
||||
* through the block editor in the corresponding context.
|
||||
*
|
||||
* @see https://developer.wordpress.org/reference/functions/register_block_type/
|
||||
*/
|
||||
if (!function_exists('lcp_random_string')) {
|
||||
|
||||
function lcp_random_string($length = 8, $css_compliant = false, $include_character_types = '') {
|
||||
// Define character sets
|
||||
$lowercase = 'abcdefghijklmnopqrstuvwxyz';
|
||||
$uppercase = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
|
||||
$numbers = '0123456789';
|
||||
$special_chars = '!@#$%^&*()_+-=[]{}|;:,.<>?';
|
||||
$all_chars = $lowercase . $uppercase . $numbers . $special_chars;
|
||||
|
||||
// Default to using all characters if no specific types are provided
|
||||
if (empty($include_character_types)) {
|
||||
$include_character_types = 'all';
|
||||
}
|
||||
|
||||
// Build the allowed character set
|
||||
$char_set = '';
|
||||
|
||||
if ($include_character_types === 'all') {
|
||||
// Include everything
|
||||
$char_set = $all_chars;
|
||||
} else {
|
||||
// Add specific types requested
|
||||
if (strpos($include_character_types, 'lowercase') !== false) {
|
||||
$char_set .= $lowercase;
|
||||
}
|
||||
if (strpos($include_character_types, 'uppercase') !== false) {
|
||||
$char_set .= $uppercase;
|
||||
}
|
||||
if (strpos($include_character_types, 'numbers') !== false) {
|
||||
$char_set .= $numbers;
|
||||
}
|
||||
if (strpos($include_character_types, 'special') !== false) {
|
||||
$char_set .= $special_chars;
|
||||
}
|
||||
}
|
||||
|
||||
// Ensure that the string is valid for CSS (starts with a letter and can only include letters, digits, hyphens, or underscores)
|
||||
$css_char_set = $lowercase . $uppercase . $numbers . '-_';
|
||||
|
||||
// Random string generation logic
|
||||
$random_string = '';
|
||||
$first_char = '';
|
||||
|
||||
// If CSS compliant, start with a letter (either lowercase or uppercase)
|
||||
if ($css_compliant) {
|
||||
// Ensure the first character is a letter (CSS compliant start)
|
||||
$first_char = $lowercase[rand(0, strlen($lowercase) - 1)];
|
||||
$random_string .= $first_char;
|
||||
$length--; // Decrease length by 1 as we already added the first char
|
||||
}
|
||||
|
||||
// Fill the rest of the string with random characters from the valid set (CSS compliant)
|
||||
for ($i = 0; $i < $length; $i++) {
|
||||
// Use only characters that are CSS compliant (letters, digits, hyphens, or underscores)
|
||||
$random_string .= $css_char_set[rand(0, strlen($css_char_set) - 1)];
|
||||
}
|
||||
|
||||
// Return the string
|
||||
return $random_string;
|
||||
}
|
||||
}
|
||||
|
||||
// Return an array of Media IDs
|
||||
function get_media_ids($attributes) {
|
||||
// Ensure 'galleryItems' exists in the attributes array
|
||||
if (isset($attributes['galleryItems']) && $attributes['source'] == "manual") {
|
||||
// Extract 'id' from each item in the 'galleryItems' array
|
||||
$media_ids = array_map(function($item) {
|
||||
return $item['id']; // Return the 'id' value from each array item
|
||||
}, $attributes['galleryItems']); // Use $attributes['galleryItems'] here
|
||||
// Check if we need to include the post thumbnail
|
||||
if ($attributes['includePostThumbnail']) {
|
||||
// Get the featured image (post thumbnail) ID
|
||||
$featured_media_id = get_post_thumbnail_id(get_the_ID());
|
||||
if ($featured_media_id) {
|
||||
// Add the featured media ID to the beginning of the array
|
||||
array_unshift($media_ids, $featured_media_id);
|
||||
}
|
||||
}
|
||||
// Return the array of media IDs
|
||||
return $media_ids;
|
||||
}
|
||||
// Return an empty array if 'galleryItems' doesn't exist or 'source' is not 'manual'
|
||||
return [];
|
||||
}
|
||||
|
||||
|
||||
//Get the gallery items from the media IDs
|
||||
function get_gallery_items_data($media_ids) {
|
||||
$gallery_items = array();
|
||||
|
||||
// Loop through each media ID
|
||||
foreach ($media_ids as $media_id) {
|
||||
// Get the full-size image URL
|
||||
$image_url = wp_get_attachment_url($media_id);
|
||||
|
||||
// Get the attachment metadata, including available image sizes
|
||||
$metadata = wp_get_attachment_metadata($media_id);
|
||||
|
||||
// Initialize the `data-lg-size` and `data-responsive` attributes
|
||||
$lg_size = '';
|
||||
$responsive_data = '';
|
||||
|
||||
// Check if metadata exists and extract image sizes
|
||||
if (isset($metadata['sizes'])) {
|
||||
// Loop through the sizes and build the data-lg-size and data-responsive attributes
|
||||
foreach ($metadata['sizes'] as $size_name => $size_info) {
|
||||
// data-lg-size format: width-height-width (for each image size)
|
||||
$lg_size .= $size_info['width'] . '-' . $size_info['height'] . '-'. $size_info['width'] . ', ';
|
||||
|
||||
// Get the URL of the size's image for data-responsive
|
||||
$file_url = wp_get_attachment_image_url($media_id, $size_name); // Get the URL of the size's image
|
||||
|
||||
// Add the image URL and width to the data-responsive string
|
||||
if ($file_url) {
|
||||
$responsive_data .= $file_url . ' ' . $size_info['width'] . ', ';
|
||||
}
|
||||
}
|
||||
|
||||
// Clean up trailing commas and spaces
|
||||
$lg_size = rtrim($lg_size, ', ');
|
||||
$responsive_data = rtrim($responsive_data, ', ');
|
||||
}
|
||||
|
||||
// Get the caption from the media's post (if available)
|
||||
$caption = get_post_field('post_excerpt', $media_id); // Retrieves the caption (if set)
|
||||
|
||||
// Get the alt text from the media's metadata (if available)
|
||||
$alt_text = get_post_meta($media_id, '_wp_attachment_image_alt', true);
|
||||
|
||||
// Use a fallback for alt text if it's empty
|
||||
if (empty($alt_text)) {
|
||||
$alt_text = 'No alt text available';
|
||||
}
|
||||
|
||||
// Add the gallery item to the array
|
||||
$gallery_items[] = array(
|
||||
'src' => esc_url($image_url), // Full-size image URL
|
||||
'responsive' => esc_attr($responsive_data), // Responsive srcset
|
||||
'thumb' => wp_get_attachment_image_url($media_id, 'thumbnail'), // Thumbnail URL
|
||||
'medium' => wp_get_attachment_image_url($media_id, 'medium'), // Medium URL
|
||||
'subHtml' => !empty($caption) ?
|
||||
'<div class="lightGallery-captions"><p>' . esc_html($caption) . '</p></div>' :
|
||||
'<div><h4>' . esc_html($alt_text) . '</h4></div>',
|
||||
'lg_size' => $lg_size, // The data-lg-size string
|
||||
'responsive_data' => $responsive_data, // The data-responsive string
|
||||
'size' => 'full' // Added size attribute for better responsive handling
|
||||
);
|
||||
}
|
||||
|
||||
// Return the array of gallery items
|
||||
return $gallery_items;
|
||||
}
|
||||
|
||||
// Build the HTML for the gallery items
|
||||
function build_gallery_items_html($gallery_items_data, $attributes) {
|
||||
// Initialize an empty string for the HTML output
|
||||
$html = '';
|
||||
|
||||
// If the gallery is set to render dynamically, limit the number of items if applicable
|
||||
// otherwise, return all items
|
||||
if ($attributes['dynamic']) {
|
||||
// Get the value of 'maxInitialItems' from attributes, default to 0 if not set
|
||||
$max_initial_items = isset($attributes['maxInitialItems']) ? (int) $attributes['maxInitialItems'] : 0;
|
||||
// Limit the number of gallery items based on maxInitialItems
|
||||
if ($max_initial_items > 0) {
|
||||
// Slice the array to only include the first $max_initial_items items
|
||||
$gallery_items_data = array_slice($gallery_items_data, 0, $max_initial_items);
|
||||
}
|
||||
}
|
||||
|
||||
// Loop through each gallery item and create the HTML
|
||||
foreach ($gallery_items_data as $item) {
|
||||
$src = $item['src'];
|
||||
$thumb = $item['thumb'];
|
||||
$medium = $item['medium'];
|
||||
$sub_html = $item['subHtml'];
|
||||
$lg_size = $item['lg_size']; // Fetch the lg_size data for the current item
|
||||
$responsive = $item['responsive_data']; // Fetch the responsive data (URLs + widths)
|
||||
|
||||
// Create the HTML structure for each item, including data-responsive
|
||||
$html .= '
|
||||
<a data-lg-size="' . esc_attr($lg_size) . '"
|
||||
data-responsive="' . esc_attr($responsive) . '"
|
||||
class="lcp-gallery-item"
|
||||
data-src="' . esc_url($src) . '"
|
||||
data-sub-html="' . esc_attr($sub_html) . '">
|
||||
<img class="img-fluid" src="' . esc_url($medium) . '" />
|
||||
</a>';
|
||||
}
|
||||
|
||||
// Return the constructed HTML
|
||||
return $html;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Array of required plugins
|
||||
function build_plugins_json($attributes) {
|
||||
// Initialize the plugins array
|
||||
$plugins = array();
|
||||
|
||||
// Check if lgSettings['zoom'] is true and add 'lgShare' to the plugins array
|
||||
if (isset($attributes['lgSettings']['zoom']) && $attributes['lgSettings']['zoom'] === true) {
|
||||
$plugins[] = 'lgZoom';
|
||||
}
|
||||
// Check if lgSettings['share'] is true and add 'lgShare' to the plugins array
|
||||
if (isset($attributes['lgSettings']['share']) && $attributes['lgSettings']['share'] === true) {
|
||||
$plugins[] = 'lgShare';
|
||||
}
|
||||
// Check if lgSettings['share'] is true and add 'lgShare' to the plugins array
|
||||
if (isset($attributes['lgSettings']['autoplay']) && $attributes['lgSettings']['autoplay'] === true) {
|
||||
$plugins[] = 'lgAutoplay';
|
||||
}
|
||||
if (isset($attributes['lgSettings']['fullScreen']) && $attributes['lgSettings']['fullScreen'] === true) {
|
||||
$plugins[] = 'lgFullScreen';
|
||||
}
|
||||
if (isset($attributes['lgSettings']['thumbnail']) && $attributes['lgSettings']['thumbnail'] === true) {
|
||||
$plugins[] = 'lgThumbnail';
|
||||
}
|
||||
if (isset($attributes['lgSettings']['rotate']) && $attributes['lgSettings']['rotate'] === true) {
|
||||
$plugins[] = 'lgRotate';
|
||||
}
|
||||
// JSON encode the plugins array and return the result
|
||||
return ($plugins);
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Build array of dynamic elements - returns an array
|
||||
function build_dynamic_elements_array($gallery_items_data) {
|
||||
$dynamic_elements = [];
|
||||
|
||||
foreach ($gallery_items_data as $item) {
|
||||
$src = $item['src'];
|
||||
$responsive = $item['responsive'] ?: ''; // Fallback if responsive is empty
|
||||
$thumb = $item['thumb'];
|
||||
$subHtml = $item['subHtml'];
|
||||
$alt_text = isset($item['alt_text']) ? $item['alt_text'] : 'No title available';
|
||||
|
||||
$subHtmlContent = '<div class="lightGallery-captions"><h4>' . esc_html($alt_text) . '</h4><p>' . esc_html($subHtml) . '</p></div>';
|
||||
|
||||
$dynamic_elements[] = [
|
||||
'src' => esc_url($src),
|
||||
'responsive' => esc_attr($responsive),
|
||||
'thumb' => esc_url($thumb),
|
||||
'subHtml' => $subHtmlContent,
|
||||
];
|
||||
}
|
||||
|
||||
return $dynamic_elements;
|
||||
}
|
||||
|
||||
// Build the gallery settings JSON
|
||||
function build_gallery_settings_json($attributes,$unique_class) {
|
||||
$container_class = ".". $unique_class;
|
||||
// Step 1: Get the media IDs based on the attributes
|
||||
$media_ids = get_media_ids($attributes);
|
||||
if (empty($media_ids)) {
|
||||
return json_encode(['error' => 'No media IDs found']);
|
||||
}
|
||||
|
||||
// Step 2: Get the gallery items data
|
||||
$gallery_items_data = get_gallery_items_data($media_ids);
|
||||
if (empty($gallery_items_data)) {
|
||||
return json_encode(['error' => 'No gallery items data found']);
|
||||
}
|
||||
|
||||
// Step 3: Build the dynamic elements array
|
||||
$dynamic_elements = build_dynamic_elements_array($gallery_items_data);
|
||||
if (empty($dynamic_elements)) {
|
||||
return json_encode(['error' => 'No dynamic elements found']);
|
||||
}
|
||||
|
||||
// Step 4: Initialize lgSettings from $attributes
|
||||
$lgSettings = isset($attributes['lgSettings']) ? $attributes['lgSettings'] : [];
|
||||
|
||||
// Step 5: Modify lgSettings if initialLayout is "inline"
|
||||
if (isset($attributes['initialLayout']) && $attributes['initialLayout'] == "inline") {
|
||||
$lgSettings['container'] = $container_class;
|
||||
}
|
||||
|
||||
// Step 6: Add dynamic elements to lgSettings if dynamic is true
|
||||
if (isset($lgSettings['dynamic']) && $lgSettings['dynamic']) {
|
||||
$lgSettings['dynamicEl'] = $dynamic_elements;
|
||||
}
|
||||
|
||||
// Step 7: Return the modified lgSettings object as JSON
|
||||
$json = json_encode($lgSettings);
|
||||
|
||||
// Step 8: Check for JSON encoding errors
|
||||
if ($json === false) {
|
||||
return json_encode(['error' => 'JSON encoding failed', 'error_details' => json_last_error_msg()]);
|
||||
}
|
||||
|
||||
return $json;
|
||||
}
|
||||
|
||||
|
||||
// Build the gallery styles based on $attributes and a unique class for rendering multiple galleries on the same page
|
||||
function build_gallery_styles($attributes,$unique_class) {
|
||||
$styles = "<style>";
|
||||
$styles .= "
|
||||
.$unique_class {
|
||||
background-color: $background_color;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: $item_spacing;
|
||||
justify-content: center;
|
||||
background:red;
|
||||
}
|
||||
";
|
||||
|
||||
$styles .= "</style>";
|
||||
|
||||
// Return the generated styles
|
||||
return $styles;
|
||||
}
|
||||
|
||||
// Render the block
|
||||
function render_lcp_gallery_block($attributes) {
|
||||
$unique_class = lcp_random_string(8, true);
|
||||
// Get the media IDs based on the attributes
|
||||
$media_ids = get_media_ids($attributes);
|
||||
|
||||
// Get the gallery items data using the media IDs
|
||||
$gallery_items_data = get_gallery_items_data($media_ids);
|
||||
|
||||
// Generate the HTML for the gallery items
|
||||
$gallery_items_html = build_gallery_items_html($gallery_items_data, $attributes);
|
||||
|
||||
// Generate the gallery settings JSON
|
||||
$gallery_settings_json = build_gallery_settings_json($attributes,$unique_class);
|
||||
|
||||
|
||||
|
||||
|
||||
// Generate styles for the gallery based on the unique class
|
||||
$classes = 'lcp-gallery'; // Start with lcp-gallery class
|
||||
|
||||
// Check if 'initialLayout' is set to 'grid' and add grid column classes if applicable
|
||||
if (isset($attributes['initialLayout']) && $attributes['initialLayout'] === 'grid') {
|
||||
// Image aspect ratios
|
||||
$classes .= ' aspect-' . esc_attr($attributes['itemsAspectRatio']);
|
||||
// Grid classes
|
||||
$classes .= ' grid';
|
||||
// Grid columns
|
||||
if (isset($attributes['gridColumnsLarge'])) {
|
||||
$classes .= ' large-' . esc_attr($attributes['gridColumnsLarge']) . '-columns';
|
||||
}
|
||||
if (isset($attributes['gridColumnsMedium'])) {
|
||||
$classes .= ' medium-' . esc_attr($attributes['gridColumnsMedium']) . '-columns';
|
||||
}
|
||||
if (isset($attributes['gridColumnsSmall'])) {
|
||||
$classes .= ' small-' . esc_attr($attributes['gridColumnsSmall']) . '-columns';
|
||||
}
|
||||
}
|
||||
|
||||
// Add 'initialLayout' class if it exists and isn't 'grid'
|
||||
if (isset($attributes['initialLayout']) && !empty($attributes['initialLayout']) && $attributes['initialLayout'] !== 'grid') {
|
||||
$classes .= ' ' . esc_attr($attributes['initialLayout']);
|
||||
}
|
||||
|
||||
// Build the styles using the unique class (if necessary)
|
||||
$styles = build_gallery_styles($attributes, $unique_class);
|
||||
|
||||
// Return the complete gallery HTML with the unique class and the settings as a JSON string
|
||||
return "
|
||||
<div class= '{$classes}' data-lgSettings='" . esc_attr($gallery_settings_json) . "'>
|
||||
{$gallery_items_html}
|
||||
</div>";
|
||||
}
|
||||
/* Initialize Gallery Block */
|
||||
function lcp_gallery_block_init() {
|
||||
register_block_type( __DIR__ . '/build', array(
|
||||
'render_callback' => 'render_lcp_gallery_block',
|
||||
));
|
||||
|
||||
}
|
||||
add_action( 'init', 'lcp_gallery_block_init' );
|
||||
|
||||
/* Set Block Flag for Dynamic Enqueue */
|
||||
|
||||
|
||||
/* Enqueue scripts and styles */
|
||||
function enqueue_lightgallery_scripts() {
|
||||
// Enqueue styles
|
||||
wp_enqueue_style('lcp-gallery', get_template_directory_uri() . '/blocks/lcp-gallery/assets/css/lcp-gallery.css');
|
||||
wp_enqueue_style('lightgallery-css', get_template_directory_uri() . '/blocks/lcp-gallery/assets/css/lightgallery-bundle.min.css');
|
||||
wp_enqueue_style('lg-transitions-css', get_template_directory_uri() . '/blocks/gallery/assets/css/lg-transitions.css');
|
||||
|
||||
// Enqueue scripts
|
||||
wp_enqueue_script('lightgallery-js', get_template_directory_uri() . '/blocks/lcp-gallery/assets/js/lightgallery.min.js', array(), null, true);
|
||||
wp_enqueue_script('lg-autoplay', get_template_directory_uri() . '/blocks/lcp-gallery/assets/js/lg-autoplay.min.js', array('lightgallery-js'), null, true);
|
||||
wp_enqueue_script('lg-comment', get_template_directory_uri() . '/blocks/lcp-gallery/assets/js/lg-comment.min.js', array('lightgallery-js'), null, true);
|
||||
wp_enqueue_script('lg-fullscreen', get_template_directory_uri() . '/blocks/lcp-gallery/assets/js/lg-fullscreen.min.js', array(), null, true);
|
||||
wp_enqueue_script('lg-hash', get_template_directory_uri() . '/blocks/lcp-gallery/assets/js/lg-hash.min.js', array('lightgallery-js'), null, true);
|
||||
wp_enqueue_script('lg-medium-zoom', get_template_directory_uri() . '/blocks/lcp-gallery/assets/js/lg-medium-zoom.min.js', array('lightgallery-js'), null, true);
|
||||
wp_enqueue_script('lg-pager', get_template_directory_uri() . '/blocks/lcp-gallery/assets/js/lg-pager.min.js', array('lightgallery-js'), null, true);
|
||||
wp_enqueue_script('lg-relative-caption', get_template_directory_uri() . '/blocks/lcp-gallery/assets/js/lg-relative-caption.min.js', array('lightgallery-js'), null, true);
|
||||
wp_enqueue_script('lg-rotate', get_template_directory_uri() . '/blocks/lcp-gallery/assets/js/lg-rotate.min.js', array('lightgallery-js'), null, true);
|
||||
wp_enqueue_script('lg-share', get_template_directory_uri() . '/blocks/lcp-gallery/assets/js/lg-share.min.js', array('lightgallery-js'), null, true);
|
||||
wp_enqueue_script('lg-thumbnail', get_template_directory_uri() . '/blocks/lcp-gallery/assets/js/lg-thumbnail.min.js', array('lightgallery-js'), null, true);
|
||||
wp_enqueue_script('lg-video', get_template_directory_uri() . '/blocks/lcp-gallery/assets/js/lg-video.min.js', array('lightgallery-js'), null, true);
|
||||
wp_enqueue_script('lg-zoom', get_template_directory_uri() . '/blocks/lcp-gallery/assets/js/lg-zoom.min.js', array('lightgallery-js'), null, true);
|
||||
|
||||
// Check for plugins and enqueue if necessary
|
||||
//if ( in_array( 'lg_zoom', $lcp_gallery_enqueue_data['plugins'], true ) ) {
|
||||
// wp_enqueue_script('lg-zoom', get_template_directory_uri() . '/blocks/lcp-gallery/assets/js/lg-zoom.min.js', array('lightgallery-js'), null, true);
|
||||
// }
|
||||
}
|
||||
|
||||
|
||||
add_action('wp_enqueue_scripts', 'enqueue_lightgallery_scripts');
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* REST */
|
||||
add_action('rest_api_init', function () {
|
||||
// Register a custom route
|
||||
register_rest_route('custom/v1', '/get-gallery-supported-plugins-data', [
|
||||
'methods' => 'GET',
|
||||
'callback' => 'get_gallery_supported_plugins_data',
|
||||
'permission_callback' => '__return_true', // Publicly accessible
|
||||
]);
|
||||
});
|
||||
|
||||
// Callback function to get gallery supported plugin data
|
||||
function get_gallery_supported_plugins_data() {
|
||||
// Check if Jet Engine is active
|
||||
if ( ! class_exists( 'Jet_Engine' ) ) {
|
||||
return rest_ensure_response( [ 'jetengine_active' => false ] );
|
||||
}
|
||||
|
||||
global $wpdb;
|
||||
$post_types = [];
|
||||
|
||||
// Query to get all rows with 'content-type' status
|
||||
$results = $wpdb->get_results( "
|
||||
SELECT * FROM {$wpdb->prefix}jet_post_types
|
||||
|
||||
" );
|
||||
|
||||
// Loop through each row
|
||||
foreach ( $results as $row ) {
|
||||
// Unserialize the 'args' column to get the post type details
|
||||
$args = maybe_unserialize( $row->args );
|
||||
$meta_fields = maybe_unserialize( $row->meta_fields );
|
||||
|
||||
// Get the slug value (used for related_table)
|
||||
$related_table = isset( $args['slug'] ) ? $args['slug'] : '';
|
||||
|
||||
// Initialize the post type array
|
||||
$post_type_data = [
|
||||
'status' => $row->status,
|
||||
'args' => $args,
|
||||
'gallery_fields' => [],
|
||||
'related_table' => $related_table, // Add related_table with slug value
|
||||
];
|
||||
|
||||
// If there are meta_fields, filter out the gallery fields
|
||||
if ( isset( $meta_fields ) && is_array( $meta_fields ) ) {
|
||||
foreach ( $meta_fields as $field ) {
|
||||
if ( isset( $field['type'] ) && $field['type'] === 'gallery' ) {
|
||||
$post_type_data['meta_fields'][] = $field;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Add the post type to the array if gallery fields exist
|
||||
if ( ! empty( $post_type_data['meta_fields'] ) ) {
|
||||
$post_types[] = $post_type_data;
|
||||
}
|
||||
}
|
||||
|
||||
return rest_ensure_response( [
|
||||
'jetengine_active' => true,
|
||||
'post_types' => $post_types,
|
||||
] );
|
||||
}
|
||||
|
||||
/* GALLERY CPT */
|
||||
function create_lcp_gallery_cpt() {
|
||||
$labels = array(
|
||||
'name' => 'Galleries',
|
||||
'singular_name' => 'Gallery',
|
||||
'menu_name' => 'Galleries',
|
||||
'name_admin_bar' => 'Gallery',
|
||||
'add_new' => 'Add New',
|
||||
'add_new_item' => 'Add New Gallery',
|
||||
'new_item' => 'New LCP Gallery',
|
||||
'edit_item' => 'Edit LCP Gallery',
|
||||
'view_item' => 'View LCP Gallery',
|
||||
'all_items' => 'All LCP Galleries',
|
||||
'search_items' => 'Search LCP Galleries',
|
||||
'parent_item_colon' => 'Parent LCP Galleries:',
|
||||
'not_found' => 'No LCP Galleries found.',
|
||||
'not_found_in_trash' => 'No LCP Galleries found in Trash.',
|
||||
);
|
||||
|
||||
$args = array(
|
||||
'labels' => $labels,
|
||||
'public' => true, // Makes it public on the front end
|
||||
'has_archive' => true, // Enables the archive page
|
||||
'show_in_rest' => true, // Enables support for the block editor (Gutenberg)
|
||||
'rewrite' => array( 'slug' => 'lcpgallery' ), // Set the custom slug
|
||||
'supports' => array( 'title', 'editor', 'thumbnail', 'excerpt', 'custom-fields' ), // Post type features
|
||||
'menu_icon' => 'dashicons-images-alt2', // Optional icon for admin menu
|
||||
'show_in_menu' => true, // Show it in the admin menu
|
||||
'show_ui' => true, // Ensure it shows in the WordPress admin
|
||||
'hierarchical' => false, // Set to true for hierarchical post type (like Pages)
|
||||
);
|
||||
|
||||
// Register the custom post type
|
||||
register_post_type( 'lcpgallery', $args );
|
||||
}
|
||||
|
||||
// Hook into the 'init' action to register the custom post type
|
||||
add_action( 'init', 'create_lcp_gallery_cpt' );
|
||||
23
blocks/lcp-gallery/package.json
Normal file
23
blocks/lcp-gallery/package.json
Normal file
@ -0,0 +1,23 @@
|
||||
{
|
||||
"name": "gallery",
|
||||
"version": "0.1.0",
|
||||
"description": "Example block scaffolded with Create Block tool.",
|
||||
"author": "The WordPress Contributors",
|
||||
"license": "GPL-2.0-or-later",
|
||||
"main": "build/index.js",
|
||||
"scripts": {
|
||||
"build": "wp-scripts build",
|
||||
"format": "wp-scripts format",
|
||||
"lint:css": "wp-scripts lint-style",
|
||||
"lint:js": "wp-scripts lint-js",
|
||||
"packages-update": "wp-scripts packages-update",
|
||||
"plugin-zip": "wp-scripts plugin-zip",
|
||||
"start": "wp-scripts start"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@wordpress/scripts": "^30.7.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"lightgallery": "^2.8.2"
|
||||
}
|
||||
}
|
||||
55
blocks/lcp-gallery/readme.txt
Normal file
55
blocks/lcp-gallery/readme.txt
Normal file
@ -0,0 +1,55 @@
|
||||
=== Gallery ===
|
||||
Contributors: The WordPress Contributors
|
||||
Tags: block
|
||||
Tested up to: 6.6
|
||||
Stable tag: 0.1.0
|
||||
License: GPL-2.0-or-later
|
||||
License URI: https://www.gnu.org/licenses/gpl-2.0.html
|
||||
|
||||
Example block scaffolded with Create Block tool.
|
||||
|
||||
== Description ==
|
||||
|
||||
This is the long description. No limit, and you can use Markdown (as well as in the following sections).
|
||||
|
||||
For backwards compatibility, if this section is missing, the full length of the short description will be used, and
|
||||
Markdown parsed.
|
||||
|
||||
== Installation ==
|
||||
|
||||
This section describes how to install the plugin and get it working.
|
||||
|
||||
e.g.
|
||||
|
||||
1. Upload the plugin files to the `/wp-content/plugins/gallery` directory, or install the plugin through the WordPress plugins screen directly.
|
||||
1. Activate the plugin through the 'Plugins' screen in WordPress
|
||||
|
||||
|
||||
== Frequently Asked Questions ==
|
||||
|
||||
= A question that someone might have =
|
||||
|
||||
An answer to that question.
|
||||
|
||||
= What about foo bar? =
|
||||
|
||||
Answer to foo bar dilemma.
|
||||
|
||||
== Screenshots ==
|
||||
|
||||
1. This screen shot description corresponds to screenshot-1.(png|jpg|jpeg|gif). Note that the screenshot is taken from
|
||||
the /assets directory or the directory that contains the stable readme.txt (tags or trunk). Screenshots in the /assets
|
||||
directory take precedence. For example, `/assets/screenshot-1.png` would win over `/tags/4.3/screenshot-1.png`
|
||||
(or jpg, jpeg, gif).
|
||||
2. This is the second screen shot
|
||||
|
||||
== Changelog ==
|
||||
|
||||
= 0.1.0 =
|
||||
* Release
|
||||
|
||||
== Arbitrary section ==
|
||||
|
||||
You may provide arbitrary sections, in the same format as the ones above. This may be of use for extremely complicated
|
||||
plugins where more information needs to be conveyed that doesn't fit into the categories of "description" or
|
||||
"installation." Arbitrary sections will be shown below the built-in sections outlined above.
|
||||
409
blocks/lcp-gallery/src/block.json
Normal file
409
blocks/lcp-gallery/src/block.json
Normal file
@ -0,0 +1,409 @@
|
||||
{
|
||||
"$schema": "https://schemas.wp.org/trunk/block.json",
|
||||
"apiVersion": 3,
|
||||
"name": "lcp/lcp-gallery",
|
||||
"version": "0.1.0",
|
||||
"title": "LCP Gallery",
|
||||
"category": "widgets",
|
||||
"icon": "",
|
||||
"description": "A dynamic or static gallery based on the Lightgallery javascript plugin",
|
||||
"example": {},
|
||||
"supports": {
|
||||
"html": false
|
||||
},
|
||||
"attributes": {
|
||||
"lgSettingsOld" :{
|
||||
"type": "object",
|
||||
"default": {
|
||||
"mode": "fade",
|
||||
"cssEasing": "ease",
|
||||
"loop": true,
|
||||
"keyPress": true,
|
||||
"controls": true,
|
||||
"thumbs": false,
|
||||
"zoom": true,
|
||||
"slideEndAnimatoin": true,
|
||||
"fullScreen": true,
|
||||
"autoplay": false,
|
||||
"slideShowAutoplay": false,
|
||||
"autoplayControls": true,
|
||||
"pauseOnHover": false,
|
||||
"progressBar": false,
|
||||
"exThumbImage": "data-exthumbimage",
|
||||
"showThumbByDefault": false,
|
||||
"currentPagerPosition": "middle",
|
||||
"addClass": "",
|
||||
"isMobile": false,
|
||||
"mobileSettings": {
|
||||
"controls": false,
|
||||
"showCloseIcon": true,
|
||||
"enableTouch": true,
|
||||
"enableDrag": true
|
||||
},
|
||||
"imageAutoPlay": true,
|
||||
"slideShowInterval": 5000,
|
||||
"counter": true,
|
||||
"closeOnEscape": true,
|
||||
"showCloseIcon": true,
|
||||
"swipeThreshold": 50,
|
||||
"draggable": true,
|
||||
"slideSpeed": 400,
|
||||
"hideBarsDelay": 3000,
|
||||
"dynamic": true,
|
||||
"dynamicEl": [],
|
||||
"captionDelay": 0,
|
||||
"videoMaxWidth": "100%",
|
||||
"videoAutoplay": true,
|
||||
"videoJS": false,
|
||||
"audio": false,
|
||||
"audioJS": false,
|
||||
"lightboxWidth": "auto",
|
||||
"lightboxHeight": "auto",
|
||||
"videojs": {
|
||||
"autoplay": true,
|
||||
"controls": true
|
||||
},
|
||||
"gestureSettings": {
|
||||
"zoom": true,
|
||||
"drag": true
|
||||
},
|
||||
"ariaLabelledby": "lightgallery-caption",
|
||||
"ariaDescribedby": "lightgallery-description",
|
||||
"thumbnailSelector": ".lg-thumbnail",
|
||||
"galleryClass": "lg-gallery",
|
||||
"selectableThumbs": false,
|
||||
"slideTransition": "ease-in-out",
|
||||
"share": false,
|
||||
"hash": false,
|
||||
"download": false,
|
||||
"allowMediaOverlap": false,
|
||||
"responsive": true,
|
||||
"fullscreenBtn": true,
|
||||
"prevHtml": "",
|
||||
"nextHtml": "",
|
||||
"closeHtml": "",
|
||||
"playHtml": "<i class='lg-icon lg-icon-play'></i>",
|
||||
"pauseHtml": "<i class='lg-icon lg-icon-pause'></i>"
|
||||
}
|
||||
},
|
||||
"parseElementForItems": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"parsedTargetElement": {
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
"parsedExcludedElements": {
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
"lgSettings": {
|
||||
"type": "object",
|
||||
"default": {
|
||||
"zoom": false,
|
||||
"thumbnail": false,
|
||||
"toggleThumb":false,
|
||||
"thumbWidth": 120,
|
||||
"thumbHeight": "80px",
|
||||
"thumbMargin": 4,
|
||||
"hash": false,
|
||||
"galleryId": "1",
|
||||
"dynamic": false,
|
||||
"mode": "lg-fade",
|
||||
"cssEasing": "ease",
|
||||
"rotate": false,
|
||||
"fullScreen": false,
|
||||
"autoplay": false,
|
||||
"download": false,
|
||||
"container": "",
|
||||
"closeable": true,
|
||||
"zoomFromOrigin": false,
|
||||
"plugins": []
|
||||
}
|
||||
},
|
||||
"hashGalleryId": {
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
"source": {
|
||||
"type": "string",
|
||||
"default": "manual"
|
||||
},
|
||||
"galleryItems": {
|
||||
"type": "array"
|
||||
},
|
||||
"sourceMetaField": {
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
"sourceTable": {
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
"sourceColumn": {
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
"includePostThumbnail": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"initialLayout": {
|
||||
"type": "string",
|
||||
"default": "grid"
|
||||
},
|
||||
"initialLayoutLarge": {
|
||||
"type": "string",
|
||||
"default": "inline"
|
||||
},
|
||||
"initialLayoutSmall": {
|
||||
"type": "string",
|
||||
"default": "inline"
|
||||
},
|
||||
"justifiedRowHeightSmall": {
|
||||
"type": "string",
|
||||
"default": "150px"
|
||||
},
|
||||
"justifiedRowHeightMedium": {
|
||||
"type": "string",
|
||||
"default": "150px"
|
||||
},
|
||||
"justifiedRowHeightLarge": {
|
||||
"type": "string",
|
||||
"default": "150px"
|
||||
},
|
||||
"justifiedLastRow": {
|
||||
"type": "string",
|
||||
"default": "justify"
|
||||
},
|
||||
"maxInitialItems": {
|
||||
"type": "number",
|
||||
"default": 0
|
||||
},
|
||||
"initialImageSize": {
|
||||
"type": "string",
|
||||
"default": "medium-large"
|
||||
},
|
||||
"inlineHeightSmall": {
|
||||
"type": "string",
|
||||
"default": "300px"
|
||||
},
|
||||
"inlineHeightMedium": {
|
||||
"type": "string",
|
||||
"default": "400px"
|
||||
},
|
||||
"inlineHeightLarge": {
|
||||
"type": "string",
|
||||
"default": "500px"
|
||||
},
|
||||
"containerWidthDesktop": {
|
||||
"type": "string",
|
||||
"default": "100%"
|
||||
},
|
||||
"containerWidthTablet": {
|
||||
"type": "string",
|
||||
"default": "100%"
|
||||
},
|
||||
"containerWidthMobile": {
|
||||
"type": "string",
|
||||
"default": "100%"
|
||||
},
|
||||
"itemsAspectRatio": {
|
||||
"type": "string",
|
||||
"default": "1-1"
|
||||
},
|
||||
"gridColumns": {
|
||||
"type": "number",
|
||||
"default": 4
|
||||
},
|
||||
"gridColumnsLarge": {
|
||||
"type": "number",
|
||||
"default": 4
|
||||
},
|
||||
"gridColumnsMedium": {
|
||||
"type": "number",
|
||||
"default": 3
|
||||
},
|
||||
"gridColumnsSmall": {
|
||||
"type": "number",
|
||||
"default": 2
|
||||
},
|
||||
"gridGapLarge": {
|
||||
"type": "number",
|
||||
"default": 10
|
||||
},
|
||||
"gridGapMedium": {
|
||||
"type": "number",
|
||||
"default": 10
|
||||
},
|
||||
"gridGapSmall": {
|
||||
"type": "number",
|
||||
"default": 10
|
||||
},
|
||||
"downloadLimitRoles": {
|
||||
"type": "array",
|
||||
"default": ""
|
||||
},
|
||||
"allowHideThumbnails": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"thumbnailsStyle": {
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
"thumbnailActiveStyle": {
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
"thumbnailBorders": {
|
||||
"type": "object"
|
||||
},
|
||||
"thumbnailBordersSelected": {
|
||||
"type": "object"
|
||||
},
|
||||
"showCaptions": {
|
||||
"type": "boolean"
|
||||
},
|
||||
"showItemTitle": {
|
||||
"type": "boolean"
|
||||
},
|
||||
"showItemDescription": {
|
||||
"type": "boolean"
|
||||
},
|
||||
"lgMode": {
|
||||
"type": "string",
|
||||
"default": "lg-slide"
|
||||
},
|
||||
"downloadSize": {
|
||||
"type": "string",
|
||||
"default": "full"
|
||||
},
|
||||
"allowShare": {
|
||||
"type": "boolean",
|
||||
"default": true
|
||||
},
|
||||
"lgVideo": {
|
||||
"type": "boolean",
|
||||
"default": "true"
|
||||
},
|
||||
"dynamic": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
|
||||
"loop": {
|
||||
"type": "boolean",
|
||||
"default": true
|
||||
},
|
||||
|
||||
|
||||
"speed": {
|
||||
"type": "number",
|
||||
"default": 500
|
||||
},
|
||||
"slideDelay": {
|
||||
"type": "number",
|
||||
"default": 200
|
||||
},
|
||||
"hash": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"allowZoom": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"closable": {
|
||||
"type": "boolean",
|
||||
"default": true
|
||||
},
|
||||
"closeOnTap": {
|
||||
"type": "boolean",
|
||||
"default": true
|
||||
},
|
||||
"container": {
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
"showControls": {
|
||||
"type": "boolean",
|
||||
"default": true
|
||||
},
|
||||
"showCounter": {
|
||||
"type": "boolean",
|
||||
"default": true
|
||||
},
|
||||
"showMaximizeIcon": {
|
||||
"type": "boolean",
|
||||
"default": true
|
||||
},
|
||||
"easing": {
|
||||
"type": "string",
|
||||
"default": "ease"
|
||||
},
|
||||
"download": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"thumbnail": {
|
||||
"type": "boolean",
|
||||
"default": true
|
||||
},
|
||||
"appendThumbnailsTo": {
|
||||
"type": "string",
|
||||
"default": ".lg-components"
|
||||
},
|
||||
"appendSubHtmlTo": {
|
||||
"type": "string",
|
||||
"default": ".lg-item"
|
||||
},
|
||||
"thumbWidth": {
|
||||
"type": "string",
|
||||
"default": "80px"
|
||||
},
|
||||
"thumbHeight": {
|
||||
"type": "string",
|
||||
"default": "80px"
|
||||
},
|
||||
"thumbnailsBorders": {
|
||||
"type": "object",
|
||||
"default": {
|
||||
"top": { "color": "#000000", "style": "solid", "width": "10px" },
|
||||
"right": { "color": "#000000", "style": "solid", "width": "10px" },
|
||||
"bottom": { "color": "#000000", "style": "solid", "width": "10px" },
|
||||
"left": { "color": "#000000", "style": "solid", "width": "10px" }
|
||||
}
|
||||
},
|
||||
"thumbnailsBordersSelected": {
|
||||
"type": "object",
|
||||
"default": {
|
||||
"top": { "color": "#000000", "style": "solid", "width": "1px" },
|
||||
"right": { "color": "#000000", "style": "solid", "width": "1px" },
|
||||
"bottom": { "color": "#000000", "style": "solid", "width": "1px" },
|
||||
"left": { "color": "#000000", "style": "solid", "width": "1px" }
|
||||
}
|
||||
},
|
||||
"thumbMargin": {
|
||||
"type": "number",
|
||||
"default": 5
|
||||
},
|
||||
"toggleThumb": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"numberOfSlideItemsInDom": {
|
||||
"type": "number",
|
||||
"default": 10
|
||||
}
|
||||
|
||||
},
|
||||
"textdomain": "lcp",
|
||||
"editorScript": "file:./index.js",
|
||||
"editorStyle": "file:./index.css",
|
||||
"style": "file:./style-index.css",
|
||||
"viewScript": ["file:./view.js"],
|
||||
"viewStyle": [ "file:./lightgallery-bundle.min.css" ]
|
||||
|
||||
}
|
||||
738
blocks/lcp-gallery/src/edit.js
Normal file
738
blocks/lcp-gallery/src/edit.js
Normal file
@ -0,0 +1,738 @@
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { useBlockProps, InspectorControls, MediaUpload, MediaUploadCheck } from '@wordpress/block-editor';
|
||||
import { useState, useEffect } from 'react';
|
||||
import {
|
||||
PanelBody,
|
||||
SelectControl,
|
||||
Button,
|
||||
ToggleControl,
|
||||
TextControl,
|
||||
__experimentalNumberControl as NumberControl,
|
||||
__experimentalUnitControl as UnitControl,
|
||||
TabPanel,
|
||||
__experimentalBorderControl as BorderControl
|
||||
} from '@wordpress/components';
|
||||
import metadata from './block.json';
|
||||
import './editor.scss';
|
||||
|
||||
import LightGallery from 'lightgallery/react';
|
||||
import 'lightgallery/css/lightgallery.css';
|
||||
import 'lightgallery/css/lg-zoom.css';
|
||||
import 'lightgallery/css/lg-thumbnail.css';
|
||||
import lgThumbnail from 'lightgallery/plugins/thumbnail';
|
||||
import lgZoom from 'lightgallery/plugins/zoom';
|
||||
|
||||
|
||||
|
||||
// Check if JetEngine or ACF/SCF are activated and get their gallery field data
|
||||
const { apiFetch } = wp;
|
||||
|
||||
apiFetch({ path: '/custom/v1/get-gallery-supported-plugins-data' })
|
||||
.then((data) => {
|
||||
console.log(data); // Log the entire data object
|
||||
if (data.jetengine_active) {
|
||||
console.log('Jet Engine is activated');
|
||||
// Other logic here
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Error fetching Jet Engine status:', error);
|
||||
});
|
||||
|
||||
|
||||
const MultiMediaUpload = ({ onSelect }) => {
|
||||
const [mediaIds, setMediaIds] = useState([]);
|
||||
|
||||
const handleSelectMedia = (media) => {
|
||||
const selectedMedia = media.map((item) => ({
|
||||
id: item.id,
|
||||
url: item.url,
|
||||
alt: item.alt || ''
|
||||
}));
|
||||
setMediaIds(selectedMedia);
|
||||
onSelect(selectedMedia);
|
||||
};
|
||||
|
||||
return (
|
||||
<MediaUploadCheck>
|
||||
<MediaUpload
|
||||
onSelect={handleSelectMedia}
|
||||
allowedTypes={['image', 'video']}
|
||||
multiple
|
||||
gallery
|
||||
render={({ open }) => (
|
||||
<Button onClick={open} isPrimary>
|
||||
{__('Open Media Library')}
|
||||
</Button>
|
||||
)}
|
||||
/>
|
||||
</MediaUploadCheck>
|
||||
);
|
||||
};
|
||||
|
||||
export default function Edit(props) {
|
||||
const { attributes, setAttributes } = props;
|
||||
const {
|
||||
galleryItems = [],
|
||||
source,
|
||||
sourceMetaField,
|
||||
sourceTable,
|
||||
sourceColumn,
|
||||
includePostThumbnail,
|
||||
initialLayout,
|
||||
itemsAspectRatio,
|
||||
gridColumnsLarge,
|
||||
gridColumnsMedium,
|
||||
gridColumnsSmall,
|
||||
gridGapLarge,
|
||||
gridGapMedium,
|
||||
gridGapSmall,
|
||||
|
||||
download,
|
||||
|
||||
downloadSize,
|
||||
|
||||
maxInitialItems,
|
||||
thumbnail,
|
||||
inlineHeightLarge,
|
||||
inlineHeightMedium,
|
||||
inlineHeightSmall,
|
||||
justifiedRowHeightSmall,
|
||||
justifiedRowHeightMedium,
|
||||
justifiedRowHeightLarge,
|
||||
justifiedLastRow,
|
||||
thumbnailsBorders,
|
||||
thumbnailsBordersSelected,
|
||||
thumbnailsStyle,
|
||||
thumbnailActiveStyle,
|
||||
showCaptions,
|
||||
zoomFromOrigin,
|
||||
|
||||
lgSettings
|
||||
} = attributes;
|
||||
|
||||
// Handle Updating LightGallery settings
|
||||
const [settings, setSettings] = useState(lgSettings);
|
||||
useEffect(() => {
|
||||
// Only update state if lgSettings actually change
|
||||
if (JSON.stringify(settings) !== JSON.stringify(lgSettings)) {
|
||||
setSettings(lgSettings);
|
||||
}
|
||||
}, [lgSettings]); // Runs only when lgSettings change
|
||||
|
||||
const [borders, setBorders] = useState(thumbnailsBorders || {
|
||||
top: { color: '#000000', style: 'solid', width: '1px' },
|
||||
right: { color: '#000000', style: 'solid', width: '1px' },
|
||||
bottom: { color: '#000000', style: 'solid', width: '1px' },
|
||||
left: { color: '#000000', style: 'solid', width: '1px' }
|
||||
});
|
||||
|
||||
const [selectedBorders, setSelectedBorders] = useState(thumbnailsBordersSelected || {
|
||||
top: { color: '#000000', style: 'solid', width: '1px' },
|
||||
right: { color: '#000000', style: 'solid', width: '1px' },
|
||||
bottom: { color: '#000000', style: 'solid', width: '1px' },
|
||||
left: { color: '#000000', style: 'solid', width: '1px' }
|
||||
});
|
||||
|
||||
const handleSelectMedia = (selectedMedia) => {
|
||||
setAttributes({ galleryItems: selectedMedia });
|
||||
};
|
||||
|
||||
const handleBorderChange = (newBorders) => {
|
||||
setBorders(newBorders);
|
||||
setAttributes({ thumbnailsBorders: newBorders });
|
||||
};
|
||||
|
||||
const handleBorderSelectedChange = (newBorders) => {
|
||||
setSelectedBorders(newBorders);
|
||||
setAttributes({ thumbnailsBordersSelected: newBorders });
|
||||
};
|
||||
|
||||
|
||||
|
||||
// lightGallery Transistion Styles
|
||||
const lgTransitionStyles = [
|
||||
{ label: 'lg-slide', value: 'lg-slide' },
|
||||
{ label: 'lg-fade', value: 'lg-fade' },
|
||||
{ label: 'lg-zoom-in', value: 'lg-zoom-in' },
|
||||
{ label: 'lg-zoom-in-big', value: 'lg-zoom-in-big' },
|
||||
{ label: 'lg-zoom-out', value: 'lg-zoom-out' },
|
||||
{ label: 'lg-zoom-out-big', value: 'lg-zoom-out-big' },
|
||||
{ label: 'lg-zoom-out-in', value: 'lg-zoom-out-in' },
|
||||
{ label: 'lg-zoom-in-out', value: 'lg-zoom-in-out' },
|
||||
{ label: 'lg-soft-zoom', value: 'lg-soft-zoom' },
|
||||
{ label: 'lg-scale-up', value: 'lg-scale-up' },
|
||||
{ label: 'lg-slide-circular', value: 'lg-slide-circular' },
|
||||
{ label: 'lg-slide-circular-vertical', value: 'lg-slide-circular-vertical' },
|
||||
{ label: 'lg-slide-vertical', value: 'lg-slide-vertical' },
|
||||
{ label: 'lg-slide-vertical-growth', value: 'lg-slide-vertical-growth' },
|
||||
{ label: 'lg-slide-skew-only', value: 'lg-slide-skew-only' },
|
||||
{ label: 'lg-slide-skew-only-rev', value: 'lg-slide-skew-only-rev' },
|
||||
{ label: 'lg-slide-skew-only-y', value: 'lg-slide-skew-only-y' },
|
||||
{ label: 'lg-slide-skew-only-y-rev', value: 'lg-slide-skew-only-y-rev' },
|
||||
{ label: 'lg-slide-skew', value: 'lg-slide-skew' },
|
||||
{ label: 'lg-slide-skew-rev', value: 'lg-slide-skew-rev' },
|
||||
{ label: 'lg-slide-skew-cross', value: 'lg-slide-skew-cross' },
|
||||
{ label: 'lg-slide-skew-cross-rev', value: 'lg-slide-skew-cross-rev' },
|
||||
{ label: 'lg-slide-skew-ver', value: 'lg-slide-skew-ver' },
|
||||
{ label: 'lg-slide-skew-ver-rev', value: 'lg-slide-skew-ver-rev' },
|
||||
{ label: 'lg-slide-skew-ver-cross', value: 'lg-slide-skew-ver-cross' },
|
||||
{ label: 'lg-slide-skew-ver-cross-rev', value: 'lg-slide-skew-ver-cross-rev' },
|
||||
{ label: 'lg-lollipop', value: 'lg-lollipop' },
|
||||
{ label: 'lg-lollipop-rev', value: 'lg-lollipop-rev' },
|
||||
{ label: 'lg-rotate', value: 'lg-rotate' },
|
||||
{ label: 'lg-rotate-rev', value: 'lg-rotate-rev' },
|
||||
{ label: 'lg-tube', value: 'lg-tube' }
|
||||
];
|
||||
|
||||
const galleryClasses = `lcp-gallery ${initialLayout}`;
|
||||
|
||||
|
||||
const lgPluginRequirements = [
|
||||
{ setting: 'zoom', plugin: 'lgZoom' },
|
||||
{ setting: 'thumbnail', plugin: 'lgThumbnail' },
|
||||
{ setting: 'rotate', plugin: 'lgRotate' },
|
||||
{ setting: 'autoplay', plugin: 'lgAutoplay' },
|
||||
{ setting: 'fullScreen', plugin: 'lgFullScreen' },
|
||||
{ setting: 'download', plugin: 'lgDownload' },
|
||||
// Add more settings and corresponding plugins as needed
|
||||
];
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
// Initialize plugins array
|
||||
const updatedPlugins = [];
|
||||
|
||||
// Loop through the plugin requirements
|
||||
lgPluginRequirements.forEach(({ setting, plugin }) => {
|
||||
// If the setting is enabled, add the corresponding plugin to the plugins array
|
||||
if (lgSettings[setting]) {
|
||||
updatedPlugins.push(plugin);
|
||||
}
|
||||
});
|
||||
|
||||
// Use function-based setAttributes to get the latest lgSettings and update plugins array
|
||||
setAttributes((prevAttributes) => {
|
||||
const updatedLgSettings = {
|
||||
...prevAttributes.lgSettings,
|
||||
plugins: updatedPlugins, // Updated plugins array
|
||||
};
|
||||
|
||||
// Log the lgSettings after update
|
||||
console.log("Updated lgSettings:", updatedLgSettings);
|
||||
|
||||
return {
|
||||
...prevAttributes,
|
||||
lgSettings: updatedLgSettings,
|
||||
};
|
||||
});
|
||||
}, [lgSettings.zoom, lgSettings.thumbnail, lgSettings.rotate, lgSettings.autoplay, lgSettings.fullScreen, lgSettings.download, setAttributes]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<InspectorControls>
|
||||
{/* Settings and Style Tabs */}
|
||||
<TabPanel
|
||||
className="my-tab-panel"
|
||||
activeClass="active-tab"
|
||||
tabs={[
|
||||
{
|
||||
name: 'settings',
|
||||
title: __('Settings'),
|
||||
className: 'settings-tab'
|
||||
},
|
||||
{
|
||||
name: 'style',
|
||||
title: __('Style Settings'),
|
||||
className: 'style-tab'
|
||||
}
|
||||
]}
|
||||
>
|
||||
{({ name }) => {
|
||||
if (name === 'settings') {
|
||||
return (
|
||||
<>
|
||||
{/* Source Settings */}
|
||||
<PanelBody title={__('Source Settings')}>
|
||||
<SelectControl
|
||||
label={__('Gallery Items Source', metadata.textdomain)}
|
||||
value={source}
|
||||
onChange={(newValue) => setAttributes({ source: newValue })}
|
||||
options={[
|
||||
{ value: 'manual', label: __('Manually Select', metadata.textdomain) },
|
||||
{ value: 'lcp_post_gallery', label: __('Post Gallery', metadata.textdomain) },
|
||||
{ value: 'meta_field', label: __('Meta field of current post', metadata.textdomain) },
|
||||
{ value: 'linked_table', label: __('Linked Table', metadata.textdomain) }
|
||||
]}
|
||||
/>
|
||||
{source === 'manual' && <MultiMediaUpload onSelect={handleSelectMedia} />}
|
||||
{source === 'meta_field' && (
|
||||
<TextControl
|
||||
label={__('Meta Field Name')}
|
||||
value={sourceMetaField}
|
||||
onChange={(newValue) => setAttributes({ sourceMetaField: newValue })}
|
||||
/>
|
||||
)}
|
||||
{source === 'linked_table' && (
|
||||
<>
|
||||
<TextControl
|
||||
label={__('Table Name')}
|
||||
value={sourceTable}
|
||||
onChange={(newValue) => setAttributes({ sourceTable: newValue })}
|
||||
/>
|
||||
<TextControl
|
||||
label={__('Column Name')}
|
||||
value={sourceColumn}
|
||||
onChange={(newValue) => setAttributes({ sourceColumn: newValue })}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
{/* Parse an element for gallery items */}
|
||||
<ToggleControl
|
||||
checked={attributes.parseElementForItems}
|
||||
label={__('Parse element for gallery items', metadata.textdomain)}
|
||||
onChange={(value) => {
|
||||
setAttributes({
|
||||
parseElementForItems: value, // Set as a boolean directly
|
||||
});
|
||||
}}
|
||||
/>
|
||||
|
||||
{attributes.parseElementForItems && (
|
||||
<TextControl
|
||||
label={__('Elements to parse')}
|
||||
value={attributes.parsedTargetElement} // Corrected to use string directly
|
||||
onChange={(newValue) => setAttributes({ parsedTargetElement: newValue })}
|
||||
/>
|
||||
)}
|
||||
<ToggleControl
|
||||
onChange={(isChecked) => setAttributes({ includePostThumbnail: isChecked })}
|
||||
checked={includePostThumbnail}
|
||||
label={__('Include Post Thumbnail (Featured Image)', metadata.textdomain)}
|
||||
/>
|
||||
|
||||
</PanelBody>
|
||||
{/* Display Settings */}
|
||||
<PanelBody title={__('Display Settings')}>
|
||||
<SelectControl
|
||||
label={__('Initial Layout', metadata.textdomain)}
|
||||
value={initialLayout}
|
||||
onChange={(newValue) => setAttributes({ initialLayout: newValue })}
|
||||
options={[
|
||||
{ value: 'inline', label: __('Inline', metadata.textdomain) },
|
||||
{ value: 'grid', label: __('Grid', metadata.textdomain) },
|
||||
{ value: 'justified', label: __('Justified', metadata.textdomain) },
|
||||
{ value: 'button', label: __('Button', metadata.textdomain) }
|
||||
]}
|
||||
/>
|
||||
{initialLayout === 'button' && (
|
||||
<TextControl
|
||||
label={__('Button Text')}
|
||||
value={sourceColumn}
|
||||
onChange={(newValue) => setAttributes({ sourceColumn: newValue })}
|
||||
/>
|
||||
)
|
||||
}
|
||||
<ToggleControl
|
||||
onChange={(isChecked) => setAttributes({ thumbnail: isChecked })}
|
||||
checked={thumbnail}
|
||||
label={__('Show Thumbnails', metadata.textdomain)}
|
||||
/>
|
||||
{thumbnail && (
|
||||
<>
|
||||
<SelectControl
|
||||
label={__('Thumbnails Position - Desktop', metadata.textdomain)}
|
||||
value={itemsAspectRatio}
|
||||
onChange={(newValue) => setAttributes({ itemsAspectRatio: newValue })}
|
||||
options={[
|
||||
{ value: 'bottom', label: __('Bottom', metadata.textdomain) },
|
||||
{ value: 'right', label: __('Right', metadata.textdomain) },
|
||||
{ value: 'left', label: __('Left', metadata.textdomain) },
|
||||
{ value: 'hidden', label: __('Hidden', metadata.textdomain) }
|
||||
]}
|
||||
/>
|
||||
<SelectControl
|
||||
label={__('Thumbnails Position - Tablet', metadata.textdomain)}
|
||||
value={itemsAspectRatio}
|
||||
onChange={(newValue) => setAttributes({ itemsAspectRatio: newValue })}
|
||||
options={[
|
||||
{ value: 'bottom', label: __('Bottom', metadata.textdomain) },
|
||||
{ value: 'right', label: __('Right', metadata.textdomain) },
|
||||
{ value: 'left', label: __('Left', metadata.textdomain) },
|
||||
{ value: 'hidden', label: __('Hidden', metadata.textdomain) }
|
||||
]}
|
||||
/>
|
||||
<SelectControl
|
||||
label={__('Thumbnails Position - Mobile', metadata.textdomain)}
|
||||
value={itemsAspectRatio}
|
||||
onChange={(newValue) => setAttributes({ itemsAspectRatio: newValue })}
|
||||
options={[
|
||||
{ value: 'bottom', label: __('Bottom', metadata.textdomain) },
|
||||
{ value: 'right', label: __('Right', metadata.textdomain) },
|
||||
{ value: 'left', label: __('Left', metadata.textdomain) },
|
||||
{ value: 'hidden', label: __('Hidden', metadata.textdomain) }
|
||||
]}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
{initialLayout !== 'inline' && initialLayout !== 'justified' && (
|
||||
<SelectControl
|
||||
label={__('Items Aspect Ratio', metadata.textdomain)}
|
||||
value={itemsAspectRatio}
|
||||
onChange={(newValue) => setAttributes({ itemsAspectRatio: newValue })}
|
||||
options={[
|
||||
{ value: '1-1', label: __('1:1', metadata.textdomain) },
|
||||
{ value: '16-9', label: __('16:9', metadata.textdomain) },
|
||||
{ value: '3-2', label: __('3:2', metadata.textdomain) },
|
||||
{ value: '3-4', label: __('3:4', metadata.textdomain) },
|
||||
{ value: '4-5', label: __('4:5', metadata.textdomain) },
|
||||
{ value: '2-3', label: __('2:3', metadata.textdomain) }
|
||||
]}
|
||||
/>
|
||||
)}
|
||||
{initialLayout !== 'inline' && (
|
||||
<NumberControl
|
||||
label={__('Max Initial Images')}
|
||||
onChange={(newValue) => setAttributes({ maxInitialItems: newValue })}
|
||||
value={maxInitialItems}
|
||||
isShiftStepEnabled
|
||||
shiftStep={1}
|
||||
min={0}
|
||||
/>
|
||||
)}
|
||||
</PanelBody>
|
||||
{/* Gallery Settings */}
|
||||
<PanelBody title={__('Gallery Settings')}>
|
||||
{/* Dynamic Settings */}
|
||||
<ToggleControl
|
||||
label={__('Dynamic Load', 'lcp')}
|
||||
checked={lgSettings.dynamic}
|
||||
onChange={(value) => {
|
||||
// Update autoplay
|
||||
setAttributes({
|
||||
lgSettings: {
|
||||
...lgSettings,
|
||||
['dynamic']: value,
|
||||
}
|
||||
});
|
||||
}}
|
||||
/>
|
||||
{/* Zoom Settings - Zoom requires lgZoom plugin */}
|
||||
<ToggleControl
|
||||
label={__('Enable Zoom', 'lcp')}
|
||||
checked={lgSettings.zoom}
|
||||
onChange={(value) => {
|
||||
setAttributes({
|
||||
lgSettings: {
|
||||
...lgSettings,
|
||||
zoom: value, // Update the zoom setting
|
||||
plugins: value
|
||||
? [...lgSettings.plugins, 'lgZoom'] // Add lgZoom plugin if enabled
|
||||
: lgSettings.plugins.filter(plugin => plugin !== 'lgZoom'), // Remove lgZoom plugin if disabled
|
||||
},
|
||||
});
|
||||
}}
|
||||
/>
|
||||
{/* Fullscreen Settings - fullScreen requires lgFullscreen plugin */}
|
||||
<ToggleControl
|
||||
label={__('Enable Fullscreen', 'lcp')}
|
||||
checked={lgSettings.fullScreen}
|
||||
onChange={(value) => {
|
||||
// Update autoplay
|
||||
setAttributes({
|
||||
lgSettings: {
|
||||
...lgSettings,
|
||||
fullScreen: value, // Update the zoom setting
|
||||
plugins: value
|
||||
? [...lgSettings.plugins, 'lgFullScreen'] // Add lgFullScreen plugin if enabled
|
||||
: lgSettings.plugins.filter(plugin => plugin !== 'lgFullScreen'), // Remove lgFullScreen plugin if disabled
|
||||
},
|
||||
});
|
||||
}}
|
||||
/>
|
||||
{/* Sharing Settings - Sharing requires lgShare plugin */}
|
||||
<ToggleControl
|
||||
label={__('Enable Sharing', 'lcp')}
|
||||
checked={lgSettings.share}
|
||||
onChange={(value) => {
|
||||
// Update autoplay
|
||||
setAttributes({
|
||||
lgSettings: {
|
||||
...lgSettings,
|
||||
share: value, // Update the zoom setting
|
||||
plugins: value
|
||||
? [...lgSettings.plugins, 'lgShare'] // Add lgShare plugin if enabled
|
||||
: lgSettings.plugins.filter(plugin => plugin !== 'lgShare'), // Remove lgShare plugin if disabled
|
||||
},
|
||||
});
|
||||
}}
|
||||
/>
|
||||
{/* Autoplay Settings - Autoplay requires lgAutoplay plugin */}
|
||||
<ToggleControl
|
||||
label={__('Enable Autoplay', 'lcp')}
|
||||
checked={lgSettings.autoplay}
|
||||
onChange={(value) => {
|
||||
// Update autoplay
|
||||
setAttributes({
|
||||
lgSettings: {
|
||||
...lgSettings,
|
||||
autoplay: value, // Update the zoom setting
|
||||
plugins: value
|
||||
? [...lgSettings.plugins, 'lgAutoplay'] // Add lgAutoplay plugin if enabled
|
||||
: lgSettings.plugins.filter(plugin => plugin !== 'lgAutoplay'), // Remove lgAutoplay plugin if disabled
|
||||
},
|
||||
});
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* HASH SETTINGS - Hashrequires lghash plugin */}
|
||||
<ToggleControl
|
||||
label={__('Enable Hash', 'lcp')}
|
||||
checked={lgSettings.hash}
|
||||
onChange={(value) => {
|
||||
// Update autoplay
|
||||
setAttributes({
|
||||
lgSettings: {
|
||||
...lgSettings,
|
||||
hash: value, // Update the zoom setting
|
||||
plugins: value
|
||||
? [...lgSettings.plugins, 'lgHash'] // Add lgAutoplay plugin if enabled
|
||||
: lgSettings.plugins.filter(plugin => plugin !== 'lgHash'), // Remove lgAutoplay plugin if disabled
|
||||
},
|
||||
});
|
||||
}}
|
||||
/>
|
||||
{/* Hash requires a unique id in lgSettings.galleryId */}
|
||||
{lgSettings.hash && (
|
||||
<TextControl
|
||||
label={__('Hash', 'lcp')}
|
||||
value={lgSettings.hashGalleryId} // Use an appropriate value for this input
|
||||
onChange={(newValue) => {
|
||||
setAttributes({
|
||||
lgSettings: {
|
||||
...lgSettings,
|
||||
galleryId: newValue, // Update the hashValue based on the text input
|
||||
}
|
||||
});
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
<ToggleControl
|
||||
label={__('Zoom From Origin', 'lcp')}
|
||||
checked={lgSettings.zoomFromOrigin}
|
||||
onChange={(value) => {
|
||||
// Update autoplay
|
||||
setAttributes({
|
||||
lgSettings: {
|
||||
...lgSettings,
|
||||
zoomFromOrigin: value, // Update the zoomFromOrigin setting
|
||||
},
|
||||
});
|
||||
}}
|
||||
/>
|
||||
{/*Captions Settings */}
|
||||
<ToggleControl
|
||||
onChange={(isChecked) => setAttributes({ showCaptions: isChecked })}
|
||||
checked={showCaptions}
|
||||
label={__('Show Captions', metadata.textdomain)}
|
||||
/>
|
||||
|
||||
{/*Download Controls - If download is true, show options to set download size */}
|
||||
<ToggleControl
|
||||
checked={lgSettings.download}
|
||||
label={__('Allow Download', metadata.textdomain)}
|
||||
onChange={(value) => {
|
||||
// Update autoplay
|
||||
setAttributes({
|
||||
lgSettings: {
|
||||
...lgSettings,
|
||||
['download']: value,
|
||||
},
|
||||
});
|
||||
}}
|
||||
/>
|
||||
{/* Options to set available download size */}
|
||||
{download && (
|
||||
<SelectControl
|
||||
label={__('Download Size', metadata.textdomain)}
|
||||
value={downloadSize}
|
||||
onChange={(newValue) => setAttributes({ downloadSize: newValue })}
|
||||
options={[
|
||||
{ value: 'full', label: __('Full', metadata.textdomain) },
|
||||
{ value: 'medium', label: __('Medium', metadata.textdomain) },
|
||||
{ value: 'large', label: __('Large', metadata.textdomain) }
|
||||
]}
|
||||
/>
|
||||
)}
|
||||
{/* Add the SelectControl for Transition */}
|
||||
<SelectControl
|
||||
label="Transition Style"
|
||||
value={lgSettings.mode || 'lg-slide'} // Default value is 'lg-slide'
|
||||
options={lgTransitionStyles}
|
||||
onChange={(value) => {
|
||||
// Update autoplay
|
||||
setAttributes({
|
||||
lgSettings: {
|
||||
...lgSettings,
|
||||
['mode']: value,
|
||||
}
|
||||
});
|
||||
}}
|
||||
/>
|
||||
{/* Add the TextControl for specific container to open the gallery in*/}
|
||||
{initialLayout != "inline"}{
|
||||
<TextControl
|
||||
label={__('Open gallery in container')}
|
||||
value={lgSettings.container}
|
||||
onChange={(newValue) => setAttributes({ lgSettings: {
|
||||
...lgSettings, // spread the current lgSettings object
|
||||
container: newValue // update only the container property
|
||||
} })}
|
||||
/>
|
||||
}
|
||||
</PanelBody>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
if (name === 'style') {
|
||||
return (
|
||||
<PanelBody title={__('Style Settings')}>
|
||||
{initialLayout === 'inline' && (
|
||||
<>
|
||||
<UnitControl
|
||||
label={__('Inline Height - Desktop')}
|
||||
onChange={(value) => setAttributes({ inlineHeightLarge: value })}
|
||||
value={inlineHeightLarge}
|
||||
/>
|
||||
<UnitControl
|
||||
label={__('Inline Height - Tablet')}
|
||||
onChange={(value) => setAttributes({ inlineHeightMedium: value })}
|
||||
value={inlineHeightMedium}
|
||||
/>
|
||||
<UnitControl
|
||||
label={__('Inline Height - Mobile')}
|
||||
onChange={(value) => setAttributes({ inlineHeightSmall: value })}
|
||||
value={inlineHeightSmall}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
{initialLayout === 'justified' && (
|
||||
<>
|
||||
<SelectControl
|
||||
label={__('Last Row', metadata.textdomain)}
|
||||
value={justifiedLastRow}
|
||||
onChange={(newValue) => setAttributes({ justifiedLastRow: newValue })}
|
||||
options={[
|
||||
{ value: 'justify', label: __('Justify', metadata.textdomain) },
|
||||
{ value: 'nojustify', label: __('Unjustified', metadata.textdomain) },
|
||||
{ value: 'left', label: __('Align Left', metadata.textdomain) },
|
||||
{ value: 'center', label: __('Align Center', metadata.textdomain) },
|
||||
{ value: 'right', label: __('Align Right', metadata.textdomain) },
|
||||
{ value: 'hide', label: __('Hide', metadata.textdomain) }
|
||||
]}
|
||||
/>
|
||||
<UnitControl
|
||||
label={__('Row Height - Desktop')}
|
||||
onChange={(value) => setAttributes({ justifiedRowHeightLarge: value })}
|
||||
value={justifiedRowHeightLarge}
|
||||
/>
|
||||
<UnitControl
|
||||
label={__('Row Height - Tablet')}
|
||||
onChange={(value) => setAttributes({ justifiedRowHeightMedium: value })}
|
||||
value={justifiedRowHeightMedium}
|
||||
/>
|
||||
<UnitControl
|
||||
label={__('Row Height - Mobile')}
|
||||
onChange={(value) => setAttributes({ justifiedRowHeightSmall: value })}
|
||||
value={justifiedRowHeightSmall}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
{initialLayout === 'grid' && (
|
||||
<>
|
||||
<NumberControl
|
||||
label={__('Grid Columns - Desktop')}
|
||||
onChange={(newValue) => setAttributes({ gridColumnsLarge: newValue })}
|
||||
value={gridColumnsLarge}
|
||||
isShiftStepEnabled
|
||||
shiftStep={1}
|
||||
min={1}
|
||||
max={9}
|
||||
/>
|
||||
<NumberControl
|
||||
label={__('Grid Columns - Tablet')}
|
||||
onChange={(newValue) => setAttributes({ gridColumnsMedium: newValue })}
|
||||
value={gridColumnsMedium}
|
||||
isShiftStepEnabled
|
||||
shiftStep={1}
|
||||
min={1}
|
||||
max={9}
|
||||
/>
|
||||
<NumberControl
|
||||
label={__('Grid Columns - Mobile')}
|
||||
onChange={(newValue) => setAttributes({ gridColumnsSmall: newValue })}
|
||||
value={gridColumnsSmall}
|
||||
isShiftStepEnabled
|
||||
shiftStep={1}
|
||||
min={1}
|
||||
max={9}
|
||||
/>
|
||||
<NumberControl
|
||||
label={__('Grid Gap')}
|
||||
onChange={(newValue) => setAttributes({ gridGapLarge: newValue })}
|
||||
value={gridGapLarge}
|
||||
isShiftStepEnabled
|
||||
shiftStep={1}
|
||||
min={0}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
{thumbnail && (
|
||||
<>
|
||||
<BorderControl
|
||||
label={__('Thumbnail Borders')}
|
||||
value={borders}
|
||||
onChange={handleBorderChange}
|
||||
/>
|
||||
<BorderControl
|
||||
label={__('Thumbnail Borders - Selected')}
|
||||
value={thumbnailsBordersSelected}
|
||||
onChange={handleBorderSelectedChange}
|
||||
/>
|
||||
<SelectControl
|
||||
label={__('Thumbnail Style', metadata.textdomain)}
|
||||
value={thumbnailsStyle}
|
||||
onChange={(newValue) => setAttributes({ thumbnailsStyle: newValue })}
|
||||
options={[
|
||||
{ value: '', label: __('None', metadata.textdomain) },
|
||||
{ value: 'lg-thumbnail-blur', label: __('Blur', metadata.textdomain) },
|
||||
{ value: 'lg-thumbnail-grayscale', label: __('Monochrome', metadata.textdomain) }
|
||||
]}
|
||||
/>
|
||||
<SelectControl
|
||||
label={__('Thumbnail Style - Selected', metadata.textdomain)}
|
||||
value={thumbnailActiveStyle}
|
||||
onChange={(newValue) => setAttributes({ thumbnailActiveStyle: newValue })}
|
||||
options={[
|
||||
{ value: '', label: __('None', metadata.textdomain) },
|
||||
{ value: 'lg-thumbnail-active-grayscale', label: __('Monochrome', metadata.textdomain) },
|
||||
{ value: 'lg-thumbnail-active-blur', label: __('Blur', metadata.textdomain) }
|
||||
|
||||
]}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</PanelBody>
|
||||
);
|
||||
}
|
||||
}}
|
||||
</TabPanel>
|
||||
</InspectorControls>
|
||||
|
||||
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
171
blocks/lcp-gallery/src/editor.scss
Normal file
171
blocks/lcp-gallery/src/editor.scss
Normal file
@ -0,0 +1,171 @@
|
||||
/**
|
||||
* The following styles get applied inside the editor only.
|
||||
*
|
||||
* Replace them with your own styles or remove the file completely.
|
||||
*/
|
||||
|
||||
.wp-block-create-block-lcp-gallery {
|
||||
background-color: #21759b;
|
||||
color: #fff;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.lcp-gallery.inline {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.lcp-gallery.inline .gallery-item {
|
||||
display:none
|
||||
}
|
||||
|
||||
|
||||
.lcp-gallery .gallery-item,.lcp-gallery .gallery-item > img {
|
||||
width:100%
|
||||
}
|
||||
|
||||
.lcp-gallery .gallery-item.last:after {content:"";width:100%;height:100%;background:red;position:absolute;top:0;left:0;opacity:.5}
|
||||
|
||||
// Thumbnails
|
||||
.lg-thumbnail-grayscale .lg-thumb-item:not(.active) img {filter: grayscale(100%);}
|
||||
.lg-thumbnail-active-grayscale .lg-thumb-item.active img {filter: grayscale(100%);}
|
||||
.lg-thumbnail-blur .lg-thumb-item:not(.active) img {filter: blur(1px);}
|
||||
.lg-thumbnail-active-blur .lg-thumb-item.active img {filter: blur(1px);}
|
||||
|
||||
.lg-outer {background:none}
|
||||
// Gallery More Images
|
||||
.lcp-display-none {display:none}
|
||||
.gallery-item {position:relative}
|
||||
span.gallery-more {position: absolute;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
z-index: 10;
|
||||
color: #fff;
|
||||
font-size: 40px;
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
color: white;}
|
||||
|
||||
/* Aspect Ratio */
|
||||
.lcp-gallery.aspect-1-1 .gallery-item {aspect-ratio:1/1}
|
||||
.lcp-gallery.aspect-2-3 .gallery-item {aspect-ratio:2/3}
|
||||
.lcp-gallery.aspect-3-4 .gallery-item {aspect-ratio:3/4}
|
||||
.lcp-gallery.aspect-4-5 .gallery-item {aspect-ratio:4/5}
|
||||
.lcp-gallery.aspect-3-2 .gallery-item {aspect-ratio:3/2}
|
||||
.lcp-gallery.aspect-16-9 .gallery-item {aspect-ratio:16/9}
|
||||
|
||||
.gallery-item img {object-fit:cover}
|
||||
/* Container Styles */
|
||||
|
||||
/* Grid Styles */
|
||||
.lcp-gallery.grid {
|
||||
display:grid
|
||||
}
|
||||
.lcp-gallery.grid .gallery-item img{
|
||||
height:100%;
|
||||
object-fit:cover
|
||||
|
||||
}
|
||||
.lcp-gallery.grid {
|
||||
gap:1rem;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr
|
||||
}
|
||||
@media only screen and (min-width: 1167px) {
|
||||
.lcp-gallery.grid.large-1-columns {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.large-2-columns {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.large-3-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.large-4-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.large-5-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.large-6-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.large-7-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.large-8-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.large-9-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* Medium screens (min-width: 768px and max-width: 1166px) */
|
||||
@media only screen and (min-width: 768px) and (max-width: 1166px) {
|
||||
.lcp-gallery.grid.medium-1-columns {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.medium-2-columns {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.medium-3-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.medium-4-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.medium-5-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.medium-6-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.medium-7-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.medium-8-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.medium-9-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* Small screens (max-width: 767px) */
|
||||
@media only screen and (max-width: 767px) {
|
||||
.lcp-gallery.grid.small-1-columns {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.small-2-columns {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.small-3-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.small-4-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.small-5-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.small-6-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.small-7-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.small-8-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.small-9-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
39
blocks/lcp-gallery/src/index.js
Normal file
39
blocks/lcp-gallery/src/index.js
Normal file
@ -0,0 +1,39 @@
|
||||
/**
|
||||
* Registers a new block provided a unique name and an object defining its behavior.
|
||||
*
|
||||
* @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
|
||||
*/
|
||||
import { registerBlockType } from '@wordpress/blocks';
|
||||
|
||||
/**
|
||||
* Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
|
||||
* All files containing `style` keyword are bundled together. The code used
|
||||
* gets applied both to the front of your site and to the editor.
|
||||
*
|
||||
* @see https://www.npmjs.com/package/@wordpress/scripts#using-css
|
||||
*/
|
||||
import './style.scss';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import Edit from './edit';
|
||||
import save from './save';
|
||||
import metadata from './block.json';
|
||||
|
||||
/**
|
||||
* Every block starts by registering a new block type definition.
|
||||
*
|
||||
* @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
|
||||
*/
|
||||
registerBlockType( metadata.name, {
|
||||
/**
|
||||
* @see ./edit.js
|
||||
*/
|
||||
edit: Edit,
|
||||
|
||||
/**
|
||||
* @see ./save.js
|
||||
*/
|
||||
save,
|
||||
} );
|
||||
22
blocks/lcp-gallery/src/save.js
Normal file
22
blocks/lcp-gallery/src/save.js
Normal file
@ -0,0 +1,22 @@
|
||||
/**
|
||||
* React hook that is used to mark the block wrapper element.
|
||||
* It provides all the necessary props like the class name.
|
||||
*
|
||||
* @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
|
||||
*/
|
||||
import { useBlockProps } from '@wordpress/block-editor';
|
||||
|
||||
/**
|
||||
* The save function defines the way in which the different attributes should
|
||||
* be combined into the final markup, which is then serialized by the block
|
||||
* editor into `post_content`.
|
||||
*
|
||||
* @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#save
|
||||
*
|
||||
* @return {Element} Element to render.
|
||||
*/
|
||||
export default function save() {
|
||||
return (
|
||||
null
|
||||
);
|
||||
}
|
||||
187
blocks/lcp-gallery/src/style.scss
Normal file
187
blocks/lcp-gallery/src/style.scss
Normal file
@ -0,0 +1,187 @@
|
||||
/**
|
||||
* The following styles get applied both on the front of your site
|
||||
* and in the editor.
|
||||
*
|
||||
* Replace them with your own styles or remove the file completely.
|
||||
*/
|
||||
|
||||
.wp-block-create-block-gallery {
|
||||
background-color: #21759b;
|
||||
color: #fff;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.lcp-gallery.inline {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.lcp-gallery.inline .gallery-item {
|
||||
display:none
|
||||
}
|
||||
|
||||
|
||||
.lcp-gallery .gallery-item,.lcp-gallery .gallery-item > img {
|
||||
width:100%
|
||||
}
|
||||
|
||||
.lcp-gallery .gallery-item.last:after {content:"";width:100%;height:100%;background:red;position:absolute;top:0;left:0;opacity:.5}
|
||||
|
||||
// Thumbnails
|
||||
.lg-thumbnail-grayscale .lg-thumb-item:not(.active) img {filter: grayscale(100%);}
|
||||
.lg-thumbnail-active-grayscale .lg-thumb-item.active img {filter: grayscale(100%);}
|
||||
.lg-thumbnail-blur .lg-thumb-item:not(.active) img {filter: blur(1px);}
|
||||
.lg-thumbnail-active-blur .lg-thumb-item.active img {filter: blur(1px);}
|
||||
|
||||
.lg-outer {background:none}
|
||||
// Gallery More Images
|
||||
.lcp-display-none {display:none}
|
||||
.gallery-item {position:relative}
|
||||
span.gallery-more {position: absolute;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
z-index: 10;
|
||||
color: #fff;
|
||||
font-size: 40px;
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
color: white;}
|
||||
|
||||
/* Aspect Ratio */
|
||||
.lcp-gallery.aspect-1-1 .lcp-gallery-item {aspect-ratio:1/1}
|
||||
.lcp-gallery.aspect-2-3 .lcp-gallery-item {aspect-ratio:2/3}
|
||||
.lcp-gallery.aspect-3-4 .lcp-gallery-item {aspect-ratio:3/4}
|
||||
.lcp-gallery.aspect-4-5 .lcp-gallery-item {aspect-ratio:4/5}
|
||||
.lcp-gallery.aspect-3-2 .lcp-gallery-item {aspect-ratio:3/2}
|
||||
.lcp-gallery.aspect-16-9 .lcp-gallery-item {aspect-ratio:16/9}
|
||||
|
||||
.gallery-item img {object-fit:cover}
|
||||
/* Container Styles */
|
||||
|
||||
/* Grid Styles */
|
||||
.lcp-gallery.grid {
|
||||
display:grid
|
||||
}
|
||||
.lcp-gallery.grid .gallery-item img{
|
||||
height:100%;
|
||||
object-fit:cover
|
||||
|
||||
}
|
||||
.lcp-gallery.grid {
|
||||
gap:1rem;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr
|
||||
}
|
||||
@media only screen and (min-width: 1167px) {
|
||||
.lcp-gallery.grid.large-1-columns {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.large-2-columns {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.large-3-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.large-4-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.large-5-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.large-6-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.large-7-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.large-8-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.large-9-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* Medium screens (min-width: 768px and max-width: 1166px) */
|
||||
@media only screen and (min-width: 768px) and (max-width: 1166px) {
|
||||
.lcp-gallery.grid.medium-1-columns {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.medium-2-columns {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.medium-3-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.medium-4-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.medium-5-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.medium-6-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.medium-7-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.medium-8-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.medium-9-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* Small screens (max-width: 767px) */
|
||||
@media only screen and (max-width: 767px) {
|
||||
.lcp-gallery.grid.small-1-columns {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.small-2-columns {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.small-3-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.small-4-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.small-5-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.small-6-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.small-7-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.small-8-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.small-9-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.lcp-gallery.grid > a > img {
|
||||
width:100%;
|
||||
height:100%;
|
||||
object-fit:cover
|
||||
}
|
||||
|
||||
.lcp-gallery.grid>a>img {
|
||||
height: 100%;
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
display: block; /* Add this */
|
||||
}
|
||||
71
blocks/lcp-gallery/src/view.js
Normal file
71
blocks/lcp-gallery/src/view.js
Normal file
@ -0,0 +1,71 @@
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// Check if LightGallery is loaded
|
||||
if (typeof lightGallery === 'function') {
|
||||
// Select all elements with the class '.lcp-gallery'
|
||||
const galleryContainers = document.querySelectorAll('.lcp-gallery');
|
||||
|
||||
galleryContainers.forEach(galleryContainer => {
|
||||
// Retrieve the JSON string from the data-lgsettings attribute
|
||||
const lgSettingsAttr = galleryContainer.getAttribute('data-lgsettings');
|
||||
|
||||
if (lgSettingsAttr) {
|
||||
try {
|
||||
// Parse the JSON string to a JavaScript object
|
||||
const lgSettings = JSON.parse(lgSettingsAttr);
|
||||
|
||||
// Log the settings to debug
|
||||
console.log("LightGallery Settings:", lgSettings);
|
||||
|
||||
// Ensure that plugins are mapped to actual functions if available
|
||||
const availablePlugins = {
|
||||
lgZoom: lgZoom,
|
||||
lgThumbnail: lgThumbnail,
|
||||
lgFullScreen: lgFullscreen,
|
||||
lgRotate: lgRotate,
|
||||
lgAutoplay: lgAutoplay,
|
||||
lgShare: lgShare,
|
||||
lgComment: lgComment,
|
||||
lgHash: lgHash,
|
||||
lgPager: lgPager,
|
||||
lgVideo: lgVideo,
|
||||
lgMediumZoom: lgMediumZoom
|
||||
};
|
||||
|
||||
// Map the plugin names to actual plugin functions
|
||||
if (Array.isArray(lgSettings.plugins)) {
|
||||
lgSettings.plugins = lgSettings.plugins.map(pluginName => availablePlugins[pluginName] || pluginName);
|
||||
}
|
||||
|
||||
// Initialize LightGallery for the gallery container (only once)
|
||||
let galleryInstance = null;
|
||||
|
||||
// Initialize the gallery only once per container
|
||||
if (!galleryContainer.classList.contains('lg-initialized')) {
|
||||
galleryInstance = lightGallery(galleryContainer, lgSettings);
|
||||
galleryContainer.classList.add('lg-initialized'); // Mark the gallery as initialized
|
||||
}
|
||||
|
||||
// Add click event listener to the gallery items
|
||||
const galleryItems = galleryContainer.querySelectorAll('.lcp-gallery-item');
|
||||
galleryItems.forEach((item, index) => {
|
||||
item.addEventListener('click', () => {
|
||||
// Check if galleryInstance is valid and open the gallery at the correct index
|
||||
if (galleryInstance && typeof galleryInstance.openGallery === 'function') {
|
||||
galleryInstance.openGallery(index); // Pass the index to open the correct image
|
||||
} else {
|
||||
console.error('LightGallery instance is not initialized correctly or missing openGallery method.');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error parsing data-lgsettings JSON:', error);
|
||||
}
|
||||
} else {
|
||||
console.error('data-lgsettings attribute is missing for a gallery.');
|
||||
}
|
||||
});
|
||||
} else {
|
||||
console.error('LightGallery is not defined');
|
||||
}
|
||||
});
|
||||
18
blocks/lcp-header-container/.editorconfig
Normal file
18
blocks/lcp-header-container/.editorconfig
Normal file
@ -0,0 +1,18 @@
|
||||
# This file is for unifying the coding style for different editors and IDEs
|
||||
# editorconfig.org
|
||||
|
||||
# WordPress Coding Standards
|
||||
# https://make.wordpress.org/core/handbook/coding-standards/
|
||||
|
||||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
end_of_line = lf
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
indent_style = tab
|
||||
|
||||
[*.{yml,yaml}]
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
30
blocks/lcp-header-container/.gitignore
vendored
Normal file
30
blocks/lcp-header-container/.gitignore
vendored
Normal file
@ -0,0 +1,30 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# Coverage directory used by tools like istanbul
|
||||
coverage
|
||||
|
||||
# Compiled binary addons (https://nodejs.org/api/addons.html)
|
||||
build/Release
|
||||
|
||||
# Dependency directories
|
||||
node_modules/
|
||||
|
||||
# Optional npm cache directory
|
||||
.npm
|
||||
|
||||
# Optional eslint cache
|
||||
.eslintcache
|
||||
|
||||
# Output of `npm pack`
|
||||
*.tgz
|
||||
|
||||
# Output of `wp-scripts plugin-zip`
|
||||
*.zip
|
||||
|
||||
# dotenv environment variables file
|
||||
.env
|
||||
33
blocks/lcp-header-container/header-container.php
Normal file
33
blocks/lcp-header-container/header-container.php
Normal file
@ -0,0 +1,33 @@
|
||||
<?php
|
||||
/**
|
||||
* Plugin Name: Lcp Viewport
|
||||
* Description: Example block scaffolded with Create Block tool.
|
||||
* Requires at least: 6.6
|
||||
* Requires PHP: 7.2
|
||||
* Version: 0.1.0
|
||||
* Author: The WordPress Contributors
|
||||
* License: GPL-2.0-or-later
|
||||
* License URI: https://www.gnu.org/licenses/gpl-2.0.html
|
||||
* Text Domain: lcp-viewport
|
||||
*
|
||||
* @package CreateBlock
|
||||
*/
|
||||
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit; // Exit if accessed directly.
|
||||
}
|
||||
|
||||
/**
|
||||
* Registers the block using the metadata loaded from the `block.json` file.
|
||||
* Behind the scenes, it registers also all assets so they can be enqueued
|
||||
* through the block editor in the corresponding context.
|
||||
*
|
||||
* @see https://developer.wordpress.org/reference/functions/register_block_type/
|
||||
*/
|
||||
function header_container_block_init() {
|
||||
register_block_type( __DIR__ . '/build' , array(
|
||||
'parent' => array( 'lcp/viewport', 'lcp/main-area' ), // Only allow this block to be inserted inside the 'lcp/viewport' block
|
||||
)
|
||||
);
|
||||
}
|
||||
add_action( 'init', 'header_container_block_init' );
|
||||
20
blocks/lcp-header-container/package.json
Normal file
20
blocks/lcp-header-container/package.json
Normal file
@ -0,0 +1,20 @@
|
||||
{
|
||||
"name": "lcp-viewport",
|
||||
"version": "0.1.0",
|
||||
"description": "Example block scaffolded with Create Block tool.",
|
||||
"author": "The WordPress Contributors",
|
||||
"license": "GPL-2.0-or-later",
|
||||
"main": "build/index.js",
|
||||
"scripts": {
|
||||
"build": "wp-scripts build",
|
||||
"format": "wp-scripts format",
|
||||
"lint:css": "wp-scripts lint-style",
|
||||
"lint:js": "wp-scripts lint-js",
|
||||
"packages-update": "wp-scripts packages-update",
|
||||
"plugin-zip": "wp-scripts plugin-zip",
|
||||
"start": "wp-scripts start"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@wordpress/scripts": "^30.4.0"
|
||||
}
|
||||
}
|
||||
55
blocks/lcp-header-container/readme.txt
Normal file
55
blocks/lcp-header-container/readme.txt
Normal file
@ -0,0 +1,55 @@
|
||||
=== Lcp Viewport ===
|
||||
Contributors: The WordPress Contributors
|
||||
Tags: block
|
||||
Tested up to: 6.6
|
||||
Stable tag: 0.1.0
|
||||
License: GPL-2.0-or-later
|
||||
License URI: https://www.gnu.org/licenses/gpl-2.0.html
|
||||
|
||||
Example block scaffolded with Create Block tool.
|
||||
|
||||
== Description ==
|
||||
|
||||
This is the long description. No limit, and you can use Markdown (as well as in the following sections).
|
||||
|
||||
For backwards compatibility, if this section is missing, the full length of the short description will be used, and
|
||||
Markdown parsed.
|
||||
|
||||
== Installation ==
|
||||
|
||||
This section describes how to install the plugin and get it working.
|
||||
|
||||
e.g.
|
||||
|
||||
1. Upload the plugin files to the `/wp-content/plugins/lcp-viewport` directory, or install the plugin through the WordPress plugins screen directly.
|
||||
1. Activate the plugin through the 'Plugins' screen in WordPress
|
||||
|
||||
|
||||
== Frequently Asked Questions ==
|
||||
|
||||
= A question that someone might have =
|
||||
|
||||
An answer to that question.
|
||||
|
||||
= What about foo bar? =
|
||||
|
||||
Answer to foo bar dilemma.
|
||||
|
||||
== Screenshots ==
|
||||
|
||||
1. This screen shot description corresponds to screenshot-1.(png|jpg|jpeg|gif). Note that the screenshot is taken from
|
||||
the /assets directory or the directory that contains the stable readme.txt (tags or trunk). Screenshots in the /assets
|
||||
directory take precedence. For example, `/assets/screenshot-1.png` would win over `/tags/4.3/screenshot-1.png`
|
||||
(or jpg, jpeg, gif).
|
||||
2. This is the second screen shot
|
||||
|
||||
== Changelog ==
|
||||
|
||||
= 0.1.0 =
|
||||
* Release
|
||||
|
||||
== Arbitrary section ==
|
||||
|
||||
You may provide arbitrary sections, in the same format as the ones above. This may be of use for extremely complicated
|
||||
plugins where more information needs to be conveyed that doesn't fit into the categories of "description" or
|
||||
"installation." Arbitrary sections will be shown below the built-in sections outlined above.
|
||||
29
blocks/lcp-header-container/src/block.json
Normal file
29
blocks/lcp-header-container/src/block.json
Normal file
@ -0,0 +1,29 @@
|
||||
{
|
||||
"$schema": "https://schemas.wp.org/trunk/block.json",
|
||||
"apiVersion": 3,
|
||||
"name": "lcp/header-container",
|
||||
"version": "0.1.0",
|
||||
"title": "Header Container",
|
||||
"category": "widgets",
|
||||
"icon": "smiley",
|
||||
"description": "Viewport container which is designed to be the parent of all other blocks",
|
||||
"example": {},
|
||||
"supports": {
|
||||
"color": {
|
||||
"background": true,
|
||||
"text": false,
|
||||
"link": false
|
||||
}
|
||||
},
|
||||
"attributes": {
|
||||
"sticky": {
|
||||
"type": "string",
|
||||
"default": "never"
|
||||
}
|
||||
},
|
||||
"textdomain": "lcp-viewport",
|
||||
"editorScript": "file:./index.js",
|
||||
"editorStyle": "file:./index.css",
|
||||
"style": "file:./style-index.css",
|
||||
"viewScript": "file:./view.js"
|
||||
}
|
||||
155
blocks/lcp-header-container/src/edit.js
Normal file
155
blocks/lcp-header-container/src/edit.js
Normal file
@ -0,0 +1,155 @@
|
||||
/**
|
||||
* Retrieves the translation of text.
|
||||
*
|
||||
* @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-i18n/
|
||||
*/
|
||||
import { __ } from '@wordpress/i18n';
|
||||
|
||||
/**
|
||||
* React hook that is used to mark the block wrapper element.
|
||||
* It provides all the necessary props like the class name.
|
||||
*
|
||||
* @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
|
||||
*/
|
||||
import { useBlockProps, InnerBlocks, InspectorControls } from '@wordpress/block-editor';
|
||||
import { SelectControl, BaseControl, ToggleControl,__experimentalUnitControl as UnitControl } from '@wordpress/components';
|
||||
import { useState, useEffect } from 'react';
|
||||
/**
|
||||
* Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
|
||||
* Those files can contain any CSS code that gets applied to the editor.
|
||||
*
|
||||
* @see https://www.npmjs.com/package/@wordpress/scripts#using-css
|
||||
*/
|
||||
import './editor.scss';
|
||||
|
||||
/**
|
||||
* The edit function describes the structure of your block in the context of the
|
||||
* editor. This represents what the editor will render when the block is used.
|
||||
*
|
||||
* @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#edit
|
||||
*
|
||||
* @return {Element} Element to render.
|
||||
*/
|
||||
export default function Edit({ attributes, setAttributes }) {
|
||||
|
||||
const [isIndependentLarge, setIsIndependentLarge] = useState(false);
|
||||
|
||||
const [paddingTop, setPaddingTop] = useState('10px');
|
||||
const [paddingRight, setPaddingRight] = useState('10px');
|
||||
const [paddingBottom, setPaddingBottom] = useState('10px');
|
||||
const [paddingLeft, setPaddingLeft] = useState('10px');
|
||||
|
||||
const { sticky } = attributes;
|
||||
|
||||
// Block props for the outer block
|
||||
const blockProps = useBlockProps();
|
||||
|
||||
// Handle the change of the sticky attribute
|
||||
const handleStickyChange = (value) => {
|
||||
setAttributes({ sticky: value });
|
||||
};
|
||||
const handleToggleChange = () => {
|
||||
setIsIndependentLarge(!isIndependentLarge);
|
||||
};
|
||||
|
||||
const updatePaddingForAllSizes = (newValue) => {
|
||||
const newPadding = {
|
||||
extraLarge: { top: newValue, right: newValue, bottom: newValue, left: newValue },
|
||||
large: { top: newValue, right: newValue, bottom: newValue, left: newValue },
|
||||
medium: { top: newValue, right: newValue, bottom: newValue, left: newValue },
|
||||
small: { top: newValue, right: newValue, bottom: newValue, left: newValue }
|
||||
};
|
||||
|
||||
// Update the padding attribute with the new padding object
|
||||
setAttributes({ padding: newPadding });
|
||||
};
|
||||
return (
|
||||
<div {...blockProps}>
|
||||
{/* Inspector Controls: Add a SelectControl to change the sticky attribute */}
|
||||
<InspectorControls>
|
||||
<SelectControl
|
||||
label={__('Sticky Behavior', 'lcp')}
|
||||
value={sticky}
|
||||
options={[
|
||||
{ label: __('Never', 'lcp'), value: 'never' },
|
||||
{ label: __('On Scroll', 'lcp'), value: 'onScroll' },
|
||||
{ label: __('Always', 'lcp'), value: 'always' },
|
||||
]}
|
||||
onChange={handleStickyChange}
|
||||
/>
|
||||
<BaseControl label="Padding - Desktop">
|
||||
<div style={{ display: 'flex', flexDirection: 'row' }}>
|
||||
<span style={{ marginRight: '10px' }}>Padding</span>
|
||||
<ToggleControl
|
||||
label="Use Independent Padding"
|
||||
checked={isIndependentLarge}
|
||||
onChange={handleToggleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Padding controls */}
|
||||
{isIndependentLarge ? (
|
||||
<div style={{ display: 'grid', padding: '10px', gridTemplateColumns: '1fr 1fr', gap: '10px', justifyItems: 'center' }}>
|
||||
{/* Padding controls for top, left, right, bottom */}
|
||||
<fieldset style={{ gridColumn: 'span 2', width: '116px' }}>
|
||||
<legend>Top</legend>
|
||||
<UnitControl
|
||||
value={paddingTop}
|
||||
onChange={(newValue) => {
|
||||
setPaddingTop(newValue);
|
||||
setAttributes({ paddingTop: newValue });
|
||||
}}
|
||||
/>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>Left</legend>
|
||||
<UnitControl
|
||||
value={paddingLeft}
|
||||
onChange={(newValue) => {
|
||||
setPaddingLeft(newValue);
|
||||
setAttributes({ paddingLeft: newValue });
|
||||
}}
|
||||
/>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>Right</legend>
|
||||
<UnitControl
|
||||
value={paddingRight}
|
||||
onChange={(newValue) => {
|
||||
setPaddingRight(newValue);
|
||||
setAttributes({ paddingRight: newValue });
|
||||
}}
|
||||
/>
|
||||
</fieldset>
|
||||
<fieldset style={{ gridColumn: 'span 2', width: '116px' }}>
|
||||
<legend>Bottom</legend>
|
||||
<UnitControl
|
||||
value={paddingBottom}
|
||||
onChange={(newValue) => {
|
||||
setPaddingBottom(newValue);
|
||||
setAttributes({ paddingBottom: newValue });
|
||||
}}
|
||||
/>
|
||||
</fieldset>
|
||||
</div>
|
||||
) : (
|
||||
<UnitControl
|
||||
label="Padding Value"
|
||||
value={999}
|
||||
onChange={updatePaddingForAllSizes}
|
||||
/>
|
||||
)}
|
||||
</BaseControl>
|
||||
</InspectorControls>
|
||||
|
||||
<p>
|
||||
{__('Lcp Main – hello from the editor!', 'lcp')}
|
||||
</p>
|
||||
|
||||
<InnerBlocks
|
||||
// Optional: You can provide a template or allowed blocks
|
||||
// template={[['core/paragraph'], ['core/image']]}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
9
blocks/lcp-header-container/src/editor.scss
Normal file
9
blocks/lcp-header-container/src/editor.scss
Normal file
@ -0,0 +1,9 @@
|
||||
/**
|
||||
* The following styles get applied inside the editor only.
|
||||
*
|
||||
* Replace them with your own styles or remove the file completely.
|
||||
*/
|
||||
|
||||
.wp-block-create-block-lcp-viewport {
|
||||
border: 1px dotted #f00;
|
||||
}
|
||||
39
blocks/lcp-header-container/src/index.js
Normal file
39
blocks/lcp-header-container/src/index.js
Normal file
@ -0,0 +1,39 @@
|
||||
/**
|
||||
* Registers a new block provided a unique name and an object defining its behavior.
|
||||
*
|
||||
* @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
|
||||
*/
|
||||
import { registerBlockType } from '@wordpress/blocks';
|
||||
|
||||
/**
|
||||
* Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
|
||||
* All files containing `style` keyword are bundled together. The code used
|
||||
* gets applied both to the front of your site and to the editor.
|
||||
*
|
||||
* @see https://www.npmjs.com/package/@wordpress/scripts#using-css
|
||||
*/
|
||||
import './style.scss';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import Edit from './edit';
|
||||
import save from './save';
|
||||
import metadata from './block.json';
|
||||
|
||||
/**
|
||||
* Every block starts by registering a new block type definition.
|
||||
*
|
||||
* @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
|
||||
*/
|
||||
registerBlockType( metadata.name, {
|
||||
/**
|
||||
* @see ./edit.js
|
||||
*/
|
||||
edit: Edit,
|
||||
|
||||
/**
|
||||
* @see ./save.js
|
||||
*/
|
||||
save,
|
||||
} );
|
||||
40
blocks/lcp-header-container/src/save.js
Normal file
40
blocks/lcp-header-container/src/save.js
Normal file
@ -0,0 +1,40 @@
|
||||
/**
|
||||
* React hook that is used to mark the block wrapper element.
|
||||
* It provides all the necessary props like the class name.
|
||||
*
|
||||
* @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
|
||||
*/
|
||||
import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
|
||||
|
||||
/**
|
||||
* The save function defines the way in which the different attributes should
|
||||
* be combined into the final markup, which is then serialized by the block
|
||||
* editor into `post_content`.
|
||||
*
|
||||
* @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#save
|
||||
*
|
||||
* @return {Element} Element to render.
|
||||
*/
|
||||
export default function Save({ attributes }) {
|
||||
// Destructure the 'sticky' attribute from the block attributes
|
||||
const { sticky } = attributes;
|
||||
|
||||
// Block props
|
||||
const blockProps = useBlockProps.save();
|
||||
|
||||
// Define a class based on the 'sticky' attribute
|
||||
let stickyClass = '';
|
||||
if (sticky === 'onScroll') {
|
||||
stickyClass = 'lcp-sticky-on-scroll';
|
||||
} else if (sticky === 'always') {
|
||||
stickyClass = 'lcp-sticky';
|
||||
}
|
||||
// Add the dynamic sticky class to the blockProps className
|
||||
const className = `${blockProps.className} ${stickyClass}`;
|
||||
|
||||
return (
|
||||
<div {...blockProps} className={className} id="lcp-header-container">
|
||||
<InnerBlocks.Content />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
12
blocks/lcp-header-container/src/style.scss
Normal file
12
blocks/lcp-header-container/src/style.scss
Normal file
@ -0,0 +1,12 @@
|
||||
/**
|
||||
* The following styles get applied both on the front of your site
|
||||
* and in the editor.
|
||||
*
|
||||
* Replace them with your own styles or remove the file completely.
|
||||
*/
|
||||
|
||||
.wp-block-create-block-lcp-viewport {
|
||||
background-color: #21759b;
|
||||
color: #fff;
|
||||
padding: 2px;
|
||||
}
|
||||
25
blocks/lcp-header-container/src/view.js
Normal file
25
blocks/lcp-header-container/src/view.js
Normal file
@ -0,0 +1,25 @@
|
||||
/**
|
||||
* Use this file for JavaScript code that you want to run in the front-end
|
||||
* on posts/pages that contain this block.
|
||||
*
|
||||
* When this file is defined as the value of the `viewScript` property
|
||||
* in `block.json` it will be enqueued on the front end of the site.
|
||||
*
|
||||
* Example:
|
||||
*
|
||||
* ```js
|
||||
* {
|
||||
* "viewScript": "file:./view.js"
|
||||
* }
|
||||
* ```
|
||||
*
|
||||
* If you're not making any changes to this file because your project doesn't need any
|
||||
* JavaScript running in the front-end, then you should delete this file and remove
|
||||
* the `viewScript` property from `block.json`.
|
||||
*
|
||||
* @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#view-script
|
||||
*/
|
||||
|
||||
/* eslint-disable no-console */
|
||||
console.log( 'Hello World! (from create-block-lcp-viewport block)' );
|
||||
/* eslint-enable no-console */
|
||||
18
blocks/lcp-key-points/.editorconfig
Normal file
18
blocks/lcp-key-points/.editorconfig
Normal file
@ -0,0 +1,18 @@
|
||||
# This file is for unifying the coding style for different editors and IDEs
|
||||
# editorconfig.org
|
||||
|
||||
# WordPress Coding Standards
|
||||
# https://make.wordpress.org/core/handbook/coding-standards/
|
||||
|
||||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
end_of_line = lf
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
indent_style = tab
|
||||
|
||||
[*.{yml,yaml}]
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
30
blocks/lcp-key-points/.gitignore
vendored
Normal file
30
blocks/lcp-key-points/.gitignore
vendored
Normal file
@ -0,0 +1,30 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# Coverage directory used by tools like istanbul
|
||||
coverage
|
||||
|
||||
# Compiled binary addons (https://nodejs.org/api/addons.html)
|
||||
build/Release
|
||||
|
||||
# Dependency directories
|
||||
node_modules/
|
||||
|
||||
# Optional npm cache directory
|
||||
.npm
|
||||
|
||||
# Optional eslint cache
|
||||
.eslintcache
|
||||
|
||||
# Output of `npm pack`
|
||||
*.tgz
|
||||
|
||||
# Output of `wp-scripts plugin-zip`
|
||||
*.zip
|
||||
|
||||
# dotenv environment variables file
|
||||
.env
|
||||
97
blocks/lcp-key-points/key-points.php
Normal file
97
blocks/lcp-key-points/key-points.php
Normal file
@ -0,0 +1,97 @@
|
||||
<?php
|
||||
/**
|
||||
* Plugin Name: Key Points
|
||||
* Description: Example block scaffolded with Create Block tool.
|
||||
* Requires at least: 6.6
|
||||
* Requires PHP: 7.2
|
||||
* Version: 0.1.0
|
||||
* Author: The WordPress Contributors
|
||||
* License: GPL-2.0-or-later
|
||||
* License URI: https://www.gnu.org/licenses/gpl-2.0.html
|
||||
* Text Domain: key-points
|
||||
*
|
||||
* @package CreateBlock
|
||||
*/
|
||||
|
||||
// Exit if accessed directly
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
// Enqueue block assets for the editor
|
||||
function enqueue_key_points_block_assets() {
|
||||
wp_enqueue_script(
|
||||
'key-points-editor-script', // Handle for the block script
|
||||
plugin_dir_url(__FILE__) . 'block.js', // Path to the block JS file
|
||||
['wp-blocks', 'wp-element', 'wp-editor'], // Dependencies
|
||||
filemtime(plugin_dir_path(__FILE__) . 'block.js'), // Cache-busting
|
||||
true // Load script in the footer
|
||||
);
|
||||
}
|
||||
add_action('enqueue_block_editor_assets', 'enqueue_key_points_block_assets');
|
||||
|
||||
// Render callback function to display the key points
|
||||
// Render callback function to display the key points
|
||||
// Render callback function to display the key points
|
||||
function render_key_points_block($attributes, $content) {
|
||||
// Ensure we're in the correct post context
|
||||
if (!is_single()) {
|
||||
return null; // Only render on single post pages
|
||||
}
|
||||
|
||||
// Get the current post ID (Ensure the correct context)
|
||||
$post_id = get_the_ID();
|
||||
|
||||
// Log for debugging purposes
|
||||
error_log('Current Post ID: ' . $post_id);
|
||||
|
||||
// Get the key points stored as a serialized string in post meta
|
||||
$key_points_serialized = get_post_meta($post_id, 'key_points', true);
|
||||
|
||||
// Log the serialized data
|
||||
error_log('Key Points Serialized Data: ' . var_export($key_points_serialized, true)); // Log to debug
|
||||
|
||||
// Unserialize the data into an array
|
||||
$key_points = !empty($key_points_serialized) ? unserialize($key_points_serialized) : [];
|
||||
|
||||
// Log the unserialized data
|
||||
error_log('Key Points Unserialized Data: ' . var_export($key_points, true)); // Log to debug
|
||||
|
||||
// If no key points are available, return an error message
|
||||
if (empty($key_points)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// Check if the headingTag attribute is set and wrap the heading accordingly
|
||||
$heading_tag = !empty($attributes['headingTag']) ? $attributes['headingTag'] : 'h2'; // Default to h2 if not provided
|
||||
$heading_font_size = !empty($attributes['headingFontSizeLarge']) ? $attributes['headingFontSizeLarge'] : '24px'; // Default size if not provided
|
||||
$points_font_size = !empty($attributes['pointsFontSizeLarge']) ? $attributes['pointsFontSizeLarge'] : '16px'; // Default size if not provided
|
||||
$list_style_type = !empty($attributes['listStyleType']) ? $attributes['listStyleType'] : 'disc'; // Default size if not provided
|
||||
|
||||
// Create the heading with font size applied
|
||||
$heading = "<{$heading_tag} style='font-size: " . esc_attr($heading_font_size) . ";'>" . esc_html($attributes['heading']) . "</{$heading_tag}>";
|
||||
|
||||
// Create the <ul> list and populate it with the key points
|
||||
$output = $heading; // Start with the heading
|
||||
$output .= '<ul id="lcp-key-points" style="list-style-type: ' . esc_attr($list_style_type) . ';">';
|
||||
foreach ($key_points as $point) {
|
||||
// Avoid empty points
|
||||
if (!empty($point)) {
|
||||
$output .= '<li style="font-size: ' . esc_attr($points_font_size) . ';">' . esc_html($point) . '</li>';
|
||||
}
|
||||
}
|
||||
$output .= '</ul>';
|
||||
|
||||
return $output;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Register the block
|
||||
function register_key_points_block() {
|
||||
register_block_type(__DIR__ . '/build', [
|
||||
'editor_script' => 'key-points-editor-script', // Script for the editor
|
||||
'render_callback' => 'render_key_points_block', // PHP callback for frontend rendering
|
||||
]);
|
||||
}
|
||||
add_action('init', 'register_key_points_block');
|
||||
20
blocks/lcp-key-points/package.json
Normal file
20
blocks/lcp-key-points/package.json
Normal file
@ -0,0 +1,20 @@
|
||||
{
|
||||
"name": "key-points",
|
||||
"version": "0.1.0",
|
||||
"description": "Example block scaffolded with Create Block tool.",
|
||||
"author": "The WordPress Contributors",
|
||||
"license": "GPL-2.0-or-later",
|
||||
"main": "build/index.js",
|
||||
"scripts": {
|
||||
"build": "wp-scripts build",
|
||||
"format": "wp-scripts format",
|
||||
"lint:css": "wp-scripts lint-style",
|
||||
"lint:js": "wp-scripts lint-js",
|
||||
"packages-update": "wp-scripts packages-update",
|
||||
"plugin-zip": "wp-scripts plugin-zip",
|
||||
"start": "wp-scripts start"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@wordpress/scripts": "^30.6.0"
|
||||
}
|
||||
}
|
||||
55
blocks/lcp-key-points/readme.txt
Normal file
55
blocks/lcp-key-points/readme.txt
Normal file
@ -0,0 +1,55 @@
|
||||
=== Key Points ===
|
||||
Contributors: The WordPress Contributors
|
||||
Tags: block
|
||||
Tested up to: 6.6
|
||||
Stable tag: 0.1.0
|
||||
License: GPL-2.0-or-later
|
||||
License URI: https://www.gnu.org/licenses/gpl-2.0.html
|
||||
|
||||
Example block scaffolded with Create Block tool.
|
||||
|
||||
== Description ==
|
||||
|
||||
This is the long description. No limit, and you can use Markdown (as well as in the following sections).
|
||||
|
||||
For backwards compatibility, if this section is missing, the full length of the short description will be used, and
|
||||
Markdown parsed.
|
||||
|
||||
== Installation ==
|
||||
|
||||
This section describes how to install the plugin and get it working.
|
||||
|
||||
e.g.
|
||||
|
||||
1. Upload the plugin files to the `/wp-content/plugins/key-points` directory, or install the plugin through the WordPress plugins screen directly.
|
||||
1. Activate the plugin through the 'Plugins' screen in WordPress
|
||||
|
||||
|
||||
== Frequently Asked Questions ==
|
||||
|
||||
= A question that someone might have =
|
||||
|
||||
An answer to that question.
|
||||
|
||||
= What about foo bar? =
|
||||
|
||||
Answer to foo bar dilemma.
|
||||
|
||||
== Screenshots ==
|
||||
|
||||
1. This screen shot description corresponds to screenshot-1.(png|jpg|jpeg|gif). Note that the screenshot is taken from
|
||||
the /assets directory or the directory that contains the stable readme.txt (tags or trunk). Screenshots in the /assets
|
||||
directory take precedence. For example, `/assets/screenshot-1.png` would win over `/tags/4.3/screenshot-1.png`
|
||||
(or jpg, jpeg, gif).
|
||||
2. This is the second screen shot
|
||||
|
||||
== Changelog ==
|
||||
|
||||
= 0.1.0 =
|
||||
* Release
|
||||
|
||||
== Arbitrary section ==
|
||||
|
||||
You may provide arbitrary sections, in the same format as the ones above. This may be of use for extremely complicated
|
||||
plugins where more information needs to be conveyed that doesn't fit into the categories of "description" or
|
||||
"installation." Arbitrary sections will be shown below the built-in sections outlined above.
|
||||
41
blocks/lcp-key-points/src/block.json
Normal file
41
blocks/lcp-key-points/src/block.json
Normal file
@ -0,0 +1,41 @@
|
||||
{
|
||||
"$schema": "https://schemas.wp.org/trunk/block.json",
|
||||
"apiVersion": 3,
|
||||
"name": "lcp/key-points",
|
||||
"version": "0.1.0",
|
||||
"title": "Key Points",
|
||||
"category": "widgets",
|
||||
"icon": "smiley",
|
||||
"description": "Key points meta field for single posts",
|
||||
"example": {},
|
||||
"supports": {
|
||||
"html": false
|
||||
},
|
||||
"attributes": {
|
||||
"heading": {
|
||||
"type": "string",
|
||||
"default": "Key Points"
|
||||
},
|
||||
"headingTag": {
|
||||
"type": "string",
|
||||
"default": "h3"
|
||||
},
|
||||
"headingFontSizeLarge": {
|
||||
"type": "string",
|
||||
"default": "24px"
|
||||
},
|
||||
"pointsFontSizeLarge": {
|
||||
"type": "string",
|
||||
"default": "16px"
|
||||
},
|
||||
"listStyleType": {
|
||||
"type": "string",
|
||||
"default": "disc"
|
||||
}
|
||||
},
|
||||
"textdomain": "key-points",
|
||||
"editorScript": "file:./index.js",
|
||||
"editorStyle": "file:./index.css",
|
||||
"style": "file:./style-index.css",
|
||||
"viewScript": "file:./view.js"
|
||||
}
|
||||
118
blocks/lcp-key-points/src/edit.js
Normal file
118
blocks/lcp-key-points/src/edit.js
Normal file
@ -0,0 +1,118 @@
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
|
||||
import { SelectControl, FontSizePicker, TextControl } from '@wordpress/components';
|
||||
import { useState, useEffect } from 'react';
|
||||
import './editor.scss';
|
||||
|
||||
export default function Edit( { attributes, setAttributes } ) {
|
||||
const { heading, pointsFontSizeLarge, headingFontSizeLarge, listStyleType } = attributes;
|
||||
|
||||
const fontSizes = [
|
||||
{
|
||||
name: __( 'Small', 'key-points' ),
|
||||
slug: 'small',
|
||||
size: '12px',
|
||||
},
|
||||
{
|
||||
name: __( 'Medium', 'key-points' ),
|
||||
slug: 'medium',
|
||||
size: '16px',
|
||||
},
|
||||
{
|
||||
name: __( 'Large', 'key-points' ),
|
||||
slug: 'large',
|
||||
size: '24px',
|
||||
},
|
||||
{
|
||||
name: __( 'Extra Large', 'key-points' ),
|
||||
slug: 'x-large',
|
||||
size: '36px',
|
||||
},
|
||||
];
|
||||
|
||||
const listStyleTypeOptions = [
|
||||
{ label: __( 'Disc', 'lcp' ), value: 'disc' },
|
||||
{ label: __( 'Circle', 'lcp' ), value: 'circle' },
|
||||
{ label: __( 'Square', 'lcp' ), value: 'square' },
|
||||
{ label: __( 'None', 'lcp' ), value: 'none' },
|
||||
];
|
||||
|
||||
// Static Lorem Ipsum key points (5 unique points)
|
||||
const loremIpsumPoints = [
|
||||
"Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
|
||||
"Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
|
||||
"Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
|
||||
"Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
|
||||
"Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
|
||||
];
|
||||
|
||||
const [keyPoints, setKeyPoints] = useState(loremIpsumPoints); // Set initial key points to the Lorem Ipsum array
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Inspector Controls */}
|
||||
<InspectorControls>
|
||||
{/* List Style Dropdown */}
|
||||
<SelectControl
|
||||
label={ __( 'List Style', 'lcp' ) }
|
||||
value={ listStyleType }
|
||||
options={ listStyleTypeOptions }
|
||||
onChange={ ( newValue ) => {
|
||||
setAttributes( { listStyleType: newValue } );
|
||||
} }
|
||||
/>
|
||||
|
||||
{/* Heading Input */}
|
||||
<TextControl
|
||||
label={ __( 'Heading', 'lcp' ) }
|
||||
value={ heading || '' }
|
||||
onChange={ ( newHeading ) => setAttributes( { heading: newHeading } ) }
|
||||
/>
|
||||
|
||||
{/* Font Size Picker for Points */}
|
||||
<FontSizePicker
|
||||
fontSizes={ fontSizes }
|
||||
units={ ['px', 'em', 'rem', 'vw', 'vh'] }
|
||||
value={ pointsFontSizeLarge }
|
||||
onChange={ ( newFontSize ) => {
|
||||
if ( typeof newFontSize === 'string' ) {
|
||||
setAttributes( { pointsFontSizeLarge: newFontSize } );
|
||||
}
|
||||
} }
|
||||
fallbackFontSize={ '16px' }
|
||||
/>
|
||||
|
||||
{/* Font Size Picker for Heading */}
|
||||
<FontSizePicker
|
||||
fontSizes={ fontSizes }
|
||||
units={ ['px', 'em', 'rem', 'vw', 'vh'] }
|
||||
value={ headingFontSizeLarge }
|
||||
onChange={ ( newFontSize ) => {
|
||||
if ( typeof newFontSize === 'string' ) {
|
||||
setAttributes( { headingFontSizeLarge: newFontSize } );
|
||||
}
|
||||
} }
|
||||
fallbackFontSize={ '24px' }
|
||||
/>
|
||||
</InspectorControls>
|
||||
|
||||
{/* Block Content */}
|
||||
<p { ...useBlockProps() }>
|
||||
{ __( 'Key Points – hello from the editor!', 'lcp' ) }
|
||||
</p>
|
||||
{ heading && <h2>{ heading }</h2> }
|
||||
|
||||
{/* Display key points */}
|
||||
{ keyPoints && keyPoints.length > 0 && (
|
||||
<ul style={{ listStyleType: listStyleType }}>
|
||||
{keyPoints.map((point, index) => (
|
||||
<li key={index} style={{ fontSize: pointsFontSizeLarge }}>
|
||||
{point}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
9
blocks/lcp-key-points/src/editor.scss
Normal file
9
blocks/lcp-key-points/src/editor.scss
Normal file
@ -0,0 +1,9 @@
|
||||
/**
|
||||
* The following styles get applied inside the editor only.
|
||||
*
|
||||
* Replace them with your own styles or remove the file completely.
|
||||
*/
|
||||
|
||||
.wp-block-create-block-key-points {
|
||||
border: 1px dotted #f00;
|
||||
}
|
||||
39
blocks/lcp-key-points/src/index.js
Normal file
39
blocks/lcp-key-points/src/index.js
Normal file
@ -0,0 +1,39 @@
|
||||
/**
|
||||
* Registers a new block provided a unique name and an object defining its behavior.
|
||||
*
|
||||
* @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
|
||||
*/
|
||||
import { registerBlockType } from '@wordpress/blocks';
|
||||
|
||||
/**
|
||||
* Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
|
||||
* All files containing `style` keyword are bundled together. The code used
|
||||
* gets applied both to the front of your site and to the editor.
|
||||
*
|
||||
* @see https://www.npmjs.com/package/@wordpress/scripts#using-css
|
||||
*/
|
||||
import './style.scss';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import Edit from './edit';
|
||||
import save from './save';
|
||||
import metadata from './block.json';
|
||||
|
||||
/**
|
||||
* Every block starts by registering a new block type definition.
|
||||
*
|
||||
* @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
|
||||
*/
|
||||
registerBlockType( metadata.name, {
|
||||
/**
|
||||
* @see ./edit.js
|
||||
*/
|
||||
edit: Edit,
|
||||
|
||||
/**
|
||||
* @see ./save.js
|
||||
*/
|
||||
save,
|
||||
} );
|
||||
22
blocks/lcp-key-points/src/save.js
Normal file
22
blocks/lcp-key-points/src/save.js
Normal file
@ -0,0 +1,22 @@
|
||||
/**
|
||||
* React hook that is used to mark the block wrapper element.
|
||||
* It provides all the necessary props like the class name.
|
||||
*
|
||||
* @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
|
||||
*/
|
||||
import { useBlockProps } from '@wordpress/block-editor';
|
||||
|
||||
/**
|
||||
* The save function defines the way in which the different attributes should
|
||||
* be combined into the final markup, which is then serialized by the block
|
||||
* editor into `post_content`.
|
||||
*
|
||||
* @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#save
|
||||
*
|
||||
* @return {Element} Element to render.
|
||||
*/
|
||||
export default function save() {
|
||||
return (
|
||||
null
|
||||
);
|
||||
}
|
||||
12
blocks/lcp-key-points/src/style.scss
Normal file
12
blocks/lcp-key-points/src/style.scss
Normal file
@ -0,0 +1,12 @@
|
||||
/**
|
||||
* The following styles get applied both on the front of your site
|
||||
* and in the editor.
|
||||
*
|
||||
* Replace them with your own styles or remove the file completely.
|
||||
*/
|
||||
|
||||
.wp-block-create-block-key-points {
|
||||
background-color: #21759b;
|
||||
color: #fff;
|
||||
padding: 2px;
|
||||
}
|
||||
25
blocks/lcp-key-points/src/view.js
Normal file
25
blocks/lcp-key-points/src/view.js
Normal file
@ -0,0 +1,25 @@
|
||||
/**
|
||||
* Use this file for JavaScript code that you want to run in the front-end
|
||||
* on posts/pages that contain this block.
|
||||
*
|
||||
* When this file is defined as the value of the `viewScript` property
|
||||
* in `block.json` it will be enqueued on the front end of the site.
|
||||
*
|
||||
* Example:
|
||||
*
|
||||
* ```js
|
||||
* {
|
||||
* "viewScript": "file:./view.js"
|
||||
* }
|
||||
* ```
|
||||
*
|
||||
* If you're not making any changes to this file because your project doesn't need any
|
||||
* JavaScript running in the front-end, then you should delete this file and remove
|
||||
* the `viewScript` property from `block.json`.
|
||||
*
|
||||
* @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#view-script
|
||||
*/
|
||||
|
||||
/* eslint-disable no-console */
|
||||
console.log( 'Hello World! (from create-block-key-points block)' );
|
||||
/* eslint-enable no-console */
|
||||
18
blocks/main-area/.editorconfig
Normal file
18
blocks/main-area/.editorconfig
Normal file
@ -0,0 +1,18 @@
|
||||
# This file is for unifying the coding style for different editors and IDEs
|
||||
# editorconfig.org
|
||||
|
||||
# WordPress Coding Standards
|
||||
# https://make.wordpress.org/core/handbook/coding-standards/
|
||||
|
||||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
end_of_line = lf
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
indent_style = tab
|
||||
|
||||
[*.{yml,yaml}]
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
30
blocks/main-area/.gitignore
vendored
Normal file
30
blocks/main-area/.gitignore
vendored
Normal file
@ -0,0 +1,30 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# Coverage directory used by tools like istanbul
|
||||
coverage
|
||||
|
||||
# Compiled binary addons (https://nodejs.org/api/addons.html)
|
||||
build/Release
|
||||
|
||||
# Dependency directories
|
||||
node_modules/
|
||||
|
||||
# Optional npm cache directory
|
||||
.npm
|
||||
|
||||
# Optional eslint cache
|
||||
.eslintcache
|
||||
|
||||
# Output of `npm pack`
|
||||
*.tgz
|
||||
|
||||
# Output of `wp-scripts plugin-zip`
|
||||
*.zip
|
||||
|
||||
# dotenv environment variables file
|
||||
.env
|
||||
30
blocks/main-area/main-area.php
Normal file
30
blocks/main-area/main-area.php
Normal file
@ -0,0 +1,30 @@
|
||||
<?php
|
||||
/**
|
||||
* Plugin Name: Lcp Viewport
|
||||
* Description: Example block scaffolded with Create Block tool.
|
||||
* Requires at least: 6.6
|
||||
* Requires PHP: 7.2
|
||||
* Version: 0.1.0
|
||||
* Author: The WordPress Contributors
|
||||
* License: GPL-2.0-or-later
|
||||
* License URI: https://www.gnu.org/licenses/gpl-2.0.html
|
||||
* Text Domain: lcp-viewport
|
||||
*
|
||||
* @package CreateBlock
|
||||
*/
|
||||
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit; // Exit if accessed directly.
|
||||
}
|
||||
|
||||
/**
|
||||
* Registers the block using the metadata loaded from the `block.json` file.
|
||||
* Behind the scenes, it registers also all assets so they can be enqueued
|
||||
* through the block editor in the corresponding context.
|
||||
*
|
||||
* @see https://developer.wordpress.org/reference/functions/register_block_type/
|
||||
*/
|
||||
function main_content_init() {
|
||||
register_block_type( __DIR__ . '/build' );
|
||||
}
|
||||
add_action( 'init', 'main_content_init' );
|
||||
20
blocks/main-area/package.json
Normal file
20
blocks/main-area/package.json
Normal file
@ -0,0 +1,20 @@
|
||||
{
|
||||
"name": "lcp-viewport",
|
||||
"version": "0.1.0",
|
||||
"description": "Example block scaffolded with Create Block tool.",
|
||||
"author": "The WordPress Contributors",
|
||||
"license": "GPL-2.0-or-later",
|
||||
"main": "build/index.js",
|
||||
"scripts": {
|
||||
"build": "wp-scripts build",
|
||||
"format": "wp-scripts format",
|
||||
"lint:css": "wp-scripts lint-style",
|
||||
"lint:js": "wp-scripts lint-js",
|
||||
"packages-update": "wp-scripts packages-update",
|
||||
"plugin-zip": "wp-scripts plugin-zip",
|
||||
"start": "wp-scripts start"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@wordpress/scripts": "^30.4.0"
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user