added gallery block for frontend
This commit is contained in:
parent
51859ae136
commit
cacad4ed61
|
|
@ -28,3 +28,6 @@ node_modules/
|
|||
|
||||
# dotenv environment variables file
|
||||
.env
|
||||
|
||||
# component build files
|
||||
build
|
||||
|
|
|
|||
|
|
@ -1,24 +0,0 @@
|
|||
<?php
|
||||
// This file is generated. Do not modify it manually.
|
||||
return array(
|
||||
'theatergf-gallery' => array(
|
||||
'$schema' => 'https://schemas.wp.org/trunk/block.json',
|
||||
'apiVersion' => 3,
|
||||
'name' => 'theatergf/theatergf-gallery',
|
||||
'version' => '0.1.0',
|
||||
'title' => 'Gallery',
|
||||
'category' => 'media',
|
||||
'example' => array(
|
||||
|
||||
),
|
||||
'supports' => array(
|
||||
'html' => false
|
||||
),
|
||||
'textdomain' => 'theatergf-gallery',
|
||||
'editorScript' => 'file:./index.js',
|
||||
'editorStyle' => 'file:./index.css',
|
||||
'style' => 'file:./style-index.css',
|
||||
'render' => 'file:./render.php',
|
||||
'viewScript' => 'file:./view.js'
|
||||
)
|
||||
);
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
{
|
||||
"$schema": "https://schemas.wp.org/trunk/block.json",
|
||||
"apiVersion": 3,
|
||||
"name": "theatergf/theatergf-gallery",
|
||||
"version": "0.1.0",
|
||||
"title": "Gallery",
|
||||
"category": "media",
|
||||
"example": {},
|
||||
"supports": {
|
||||
"html": false
|
||||
},
|
||||
"textdomain": "theatergf-gallery",
|
||||
"editorScript": "file:./index.js",
|
||||
"editorStyle": "file:./index.css",
|
||||
"style": "file:./style-index.css",
|
||||
"render": "file:./render.php",
|
||||
"viewScript": "file:./view.js"
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
.wp-block-theatergf-theatergf-gallery{border:1px dotted red}
|
||||
|
|
@ -1 +0,0 @@
|
|||
<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-i18n'), 'version' => 'cf9890b5e4d67862718c');
|
||||
|
|
@ -1 +0,0 @@
|
|||
.wp-block-theatergf-theatergf-gallery{border:1px dotted red}
|
||||
|
|
@ -1 +0,0 @@
|
|||
(()=>{"use strict";var r,e={640(){const r=window.wp.blocks,e=window.wp.i18n,t=window.wp.blockEditor,o=window.ReactJSXRuntime,l=JSON.parse('{"UU":"theatergf/theatergf-gallery"}');(0,r.registerBlockType)(l.UU,{edit:function(){return(0,o.jsx)("p",{...(0,t.useBlockProps)(),children:(0,e.__)("Gallery – hello from the editor!","theatergf-gallery")})}})}},t={};function o(r){var l=t[r];if(void 0!==l)return l.exports;var a=t[r]={exports:{}};return e[r](a,a.exports,o),a.exports}o.m=e,r=[],o.O=(e,t,l,a)=>{if(!t){var i=1/0;for(p=0;p<r.length;p++){for(var[t,l,a]=r[p],n=!0,s=0;s<t.length;s++)(!1&a||i>=a)&&Object.keys(o.O).every(r=>o.O[r](t[s]))?t.splice(s--,1):(n=!1,a<i&&(i=a));if(n){r.splice(p--,1);var h=l();void 0!==h&&(e=h)}}return e}a=a||0;for(var p=r.length;p>0&&r[p-1][2]>a;p--)r[p]=r[p-1];r[p]=[t,l,a]},o.o=(r,e)=>Object.prototype.hasOwnProperty.call(r,e),(()=>{var r={53:0,513:0};o.O.j=e=>0===r[e];var e=(e,t)=>{var l,a,[i,n,s]=t,h=0;if(i.some(e=>0!==r[e])){for(l in n)o.o(n,l)&&(o.m[l]=n[l]);if(s)var p=s(o)}for(e&&e(t);h<i.length;h++)a=i[h],o.o(r,a)&&r[a]&&r[a][0](),r[a]=0;return o.O(p)},t=globalThis.webpackChunktheatergf_gallery=globalThis.webpackChunktheatergf_gallery||[];t.forEach(e.bind(null,0)),t.push=e.bind(null,t.push.bind(t))})();var l=o.O(void 0,[513],()=>o(640));l=o.O(l)})();
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
<?php
|
||||
/**
|
||||
* PHP file to use when rendering the block type on the server to show on the front end.
|
||||
*
|
||||
* The following variables are exposed to the file:
|
||||
* $attributes (array): The block attributes.
|
||||
* $content (string): The block default content.
|
||||
* $block (WP_Block): The block instance.
|
||||
*
|
||||
* @see https://github.com/WordPress/gutenberg/blob/trunk/docs/reference-guides/block-api/block-metadata.md#render
|
||||
*/
|
||||
?>
|
||||
<p <?php echo get_block_wrapper_attributes(); ?>>
|
||||
<?php esc_html_e( 'Gallery – hello from a dynamic block!', 'theatergf-gallery' ); ?>
|
||||
</p>
|
||||
|
|
@ -1 +0,0 @@
|
|||
.wp-block-theatergf-theatergf-gallery{background-color:#21759b;color:#fff;padding:2px}
|
||||
|
|
@ -1 +0,0 @@
|
|||
.wp-block-theatergf-theatergf-gallery{background-color:#21759b;color:#fff;padding:2px}
|
||||
|
|
@ -1 +0,0 @@
|
|||
<?php return array('dependencies' => array(), 'version' => '58813c89e11ed1cf4a36');
|
||||
|
|
@ -1 +0,0 @@
|
|||
console.log("Hello World! (from theatergf-theatergf-gallery block)");
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -18,6 +18,6 @@
|
|||
"@wordpress/i18n": "latest"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@wordpress/scripts": "^31.6.0"
|
||||
"@wordpress/scripts": "latest"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
{
|
||||
"$schema": "https://schemas.wp.org/trunk/block.json",
|
||||
"apiVersion": 3,
|
||||
"name": "theatergf/theatergf-gallery",
|
||||
"name": "theatergf/gallery",
|
||||
"version": "0.1.0",
|
||||
"title": "Gallery",
|
||||
"category": "media",
|
||||
"icon": "dashicons-images",
|
||||
"example": {},
|
||||
"supports": {
|
||||
"html": false
|
||||
|
|
|
|||
|
|
@ -31,8 +31,8 @@ import './editor.scss';
|
|||
*/
|
||||
export default function Edit() {
|
||||
return (
|
||||
<p { ...useBlockProps() }>
|
||||
{ __( 'Gallery – hello from the editor!', 'theatergf-gallery' ) }
|
||||
</p>
|
||||
<theatergf-gallery { ...useBlockProps() }>
|
||||
{ __( 'Gallery', 'theatergf-gallery' ) }
|
||||
</theatergf-gallery>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,11 @@
|
|||
*
|
||||
* @see https://github.com/WordPress/gutenberg/blob/trunk/docs/reference-guides/block-api/block-metadata.md#render
|
||||
*/
|
||||
|
||||
$images = rest_do_request(new WP_REST_Request( 'GET', '/theatergf/gallery/v1/gallery'));
|
||||
?>
|
||||
<p <?php echo get_block_wrapper_attributes(); ?>>
|
||||
<?php esc_html_e( 'Gallery – hello from a dynamic block!', 'theatergf-gallery' ); ?>
|
||||
</p>
|
||||
<theatergf-gallery <?php echo get_block_wrapper_attributes(); ?>>
|
||||
<?php foreach ( $images->data as $img_src ): ?>
|
||||
<img src="<?= $img_src ?>">
|
||||
<?php endforeach ?>
|
||||
</theatergf-gallery>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,5 @@
|
|||
*/
|
||||
|
||||
.wp-block-theatergf-theatergf-gallery {
|
||||
background-color: #21759b;
|
||||
color: #fff;
|
||||
padding: 2px;
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,6 +20,251 @@
|
|||
* @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#view-script
|
||||
*/
|
||||
|
||||
/* eslint-disable no-console */
|
||||
console.log( 'Hello World! (from theatergf-theatergf-gallery block)' );
|
||||
/* eslint-enable no-console */
|
||||
class RoundRobinCounter {
|
||||
|
||||
get count() { return this._count; }
|
||||
set count(value) { this._count = value; }
|
||||
|
||||
get min() { return this._min; }
|
||||
set min(value) {
|
||||
if (this.count < value) {
|
||||
this.count = this.max;
|
||||
}
|
||||
this._min = value;
|
||||
}
|
||||
get max() { return this._max; }
|
||||
set max(value) {
|
||||
if (this.count > value) {
|
||||
this.count = this.min;
|
||||
}
|
||||
this._max = value;
|
||||
}
|
||||
|
||||
constructor(min = 0, max = 0, value = 0) {
|
||||
this._min = min;
|
||||
this._max = max;
|
||||
|
||||
this._count = value;
|
||||
}
|
||||
|
||||
increment() {
|
||||
if (this.count == this.max) {
|
||||
this.count = this.min
|
||||
} else {
|
||||
this.count += 1
|
||||
}
|
||||
}
|
||||
|
||||
decrement() {
|
||||
if (this.count == this.min) {
|
||||
this.count = this.max
|
||||
} else {
|
||||
this.count -= 1
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class TheaterGFGalleryHTMLElement extends HTMLElement {
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
this.current_slide = new RoundRobinCounter();
|
||||
|
||||
this.observer = new MutationObserver(() => this.update_gallery());
|
||||
|
||||
this.shadow = this.attachShadow({ mode: "open" });
|
||||
|
||||
this.container = document.createElement("div");
|
||||
this.container.classList.add("container");
|
||||
|
||||
this.slide_container = document.createElement("div");
|
||||
this.slide_container.classList.add("slide-container");
|
||||
|
||||
this.button_l = document.createElement("button");
|
||||
this.button_l.classList.add("slide-button", "left");
|
||||
this.button_l.innerHTML = `
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor">
|
||||
<path d="M13 5l-5 5 5 5-1 2-7-7 7-7z"/>
|
||||
</svg>`;
|
||||
this.button_l.addEventListener("click", () => { this.slide_left(); });
|
||||
|
||||
this.button_r = document.createElement("button");
|
||||
this.button_r.classList.add("slide-button", "right");
|
||||
this.button_r.innerHTML = `
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor">
|
||||
<path d="M7 5l5 5-5 5 1 2 7-7-7-7z"/>
|
||||
</svg>`;
|
||||
this.button_r.addEventListener("click", () => { this.slide_right(); });
|
||||
|
||||
this.slide_control = document.createElement("div");
|
||||
this.slide_control.classList.add("slide-control");
|
||||
|
||||
this.container.appendChild(this.slide_container);
|
||||
this.container.appendChild(this.button_l);
|
||||
this.container.appendChild(this.button_r);
|
||||
this.container.appendChild(this.slide_control);
|
||||
|
||||
this.update_gallery()
|
||||
|
||||
const style = document.createElement("style");
|
||||
style.textContent = `
|
||||
.container {
|
||||
position: relative;
|
||||
width: var(--wp--style--global--content-size);
|
||||
aspect-ratio: 2/1;
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.slide-container {
|
||||
height: 100%;
|
||||
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.slide {
|
||||
height: 100%;
|
||||
width: var(--wp--style--global--content-size);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.slide-button {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
|
||||
background: rgba(255, 255, 255, 0.75);
|
||||
border: white;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.slide-button.left {
|
||||
left: 10px;
|
||||
}
|
||||
.slide-button.right {
|
||||
right: 10px;
|
||||
}
|
||||
.slide-button svg {
|
||||
position: relative;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.slide-control {
|
||||
height: 20px;
|
||||
padding: 5px 10px;
|
||||
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
|
||||
background-color: var(--wp--preset--color--base);
|
||||
background: black;
|
||||
|
||||
border-top-left-radius: 15px;
|
||||
border-top-right-radius: 15px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
gap: 5px;
|
||||
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: var(--wp--preset--color--highlight-dark);
|
||||
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.dot.selected {
|
||||
background-color: var(--wp--preset--color--highlight-light);
|
||||
}
|
||||
`;
|
||||
|
||||
this.shadow.appendChild(style);
|
||||
this.shadow.appendChild(this.container);
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this.observer.observe(this, { childList: true });
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
this.observer.disconnect();
|
||||
}
|
||||
|
||||
update_gallery() {
|
||||
const children = [...this.children];
|
||||
|
||||
this.slide_container.replaceChildren();
|
||||
|
||||
children.forEach((img, idx) => {
|
||||
const slide = img.cloneNode();
|
||||
slide.classList.add("slide");
|
||||
|
||||
this.slide_container.appendChild(slide);
|
||||
this.slide_control.appendChild(this.__create_control_dot(idx));
|
||||
});
|
||||
|
||||
this.current_slide.max = children.length - 1;
|
||||
|
||||
this.__got_to_current_slide();
|
||||
}
|
||||
|
||||
slide_left() {
|
||||
this.current_slide.decrement();
|
||||
this.__got_to_current_slide();
|
||||
}
|
||||
slide_right() {
|
||||
this.current_slide.increment();
|
||||
this.__got_to_current_slide();
|
||||
}
|
||||
|
||||
__got_to_current_slide() {
|
||||
const target_position = this.offsetWidth * this.current_slide.count;
|
||||
|
||||
this.slide_container.animate([
|
||||
{ transform: `translateX(-${target_position}px)`}
|
||||
], {
|
||||
duration: 300,
|
||||
fill: "forwards"
|
||||
}).addEventListener("finish", () => {
|
||||
this.slide_control.querySelector(".selected")?.classList?.remove("selected");
|
||||
this.slide_control.querySelector(`[slide='${this.current_slide.count}']`).classList.add("selected");
|
||||
});
|
||||
}
|
||||
|
||||
__create_control_dot(slide_idx) {
|
||||
const div = document.createElement("button");
|
||||
div.classList.add("dot");
|
||||
div.setAttribute("slide", slide_idx);
|
||||
div.addEventListener("click", () => {
|
||||
this.current_slide.count = slide_idx;
|
||||
this.__got_to_current_slide();
|
||||
})
|
||||
return div;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("theatergf-gallery", TheaterGFGalleryHTMLElement);
|
||||
|
|
|
|||
Loading…
Reference in New Issue