diff --git a/plugins/carhop-blocks/src/highlight-timeline-step/block.json b/plugins/carhop-blocks/src/highlight-timeline-step/block.json new file mode 100644 index 0000000..43dee75 --- /dev/null +++ b/plugins/carhop-blocks/src/highlight-timeline-step/block.json @@ -0,0 +1,28 @@ +{ + "$schema": "https://schemas.wp.org/trunk/block.json", + "apiVersion": 3, + "name": "carhop-blocks/highlight-timeline-step", + "version": "0.1.0", + "title": "Étape de timeline", + "category": "carhop-blocks", + "icon": "calendar", + "description": "Étape de timeline pour la mise en forme d'une étape de timeline", + "example": {}, + "parent": [ + "carhop-blocks/highlight-timeline" + ], + "supports": { + "html": false + }, + "textdomain": "carhop-blocks", + "editorScript": "file:./index.js", + "editorStyle": "file:./index.css", + "style": "file:./style-index.css", + "viewScript": "file:./view.js", + "attributes": { + "year": { + "type": "number", + "default": 2025 + } + } +} \ No newline at end of file diff --git a/plugins/carhop-blocks/src/highlight-timeline-step/edit.js b/plugins/carhop-blocks/src/highlight-timeline-step/edit.js new file mode 100644 index 0000000..9dd962a --- /dev/null +++ b/plugins/carhop-blocks/src/highlight-timeline-step/edit.js @@ -0,0 +1,81 @@ +import { __ } from "@wordpress/i18n"; +import { useBlockProps, InnerBlocks } from "@wordpress/block-editor"; +import "./editor.scss"; +import { + PanelBody, + Card, + CardBody, + CardHeader, + TextControl, + Button, + __experimentalNumberControl as NumberControl, +} from "@wordpress/components"; +import { InspectorControls } from "@wordpress/block-editor"; + +import { RichText } from "@wordpress/block-editor"; +import TimelineYearBackground from "./timelineYearBackground"; +export default function Edit({ attributes, setAttributes, ...props }) { + const { year } = attributes; + + return ( + <> + + + { + const n = parseInt(value, 10); + setAttributes({ year: Number.isFinite(n) ? n : undefined }); + }} + /> + + +
+
+

{year}

+ +
+
+ +
+
+ + ); +} diff --git a/plugins/carhop-blocks/src/highlight-timeline-step/editor.scss b/plugins/carhop-blocks/src/highlight-timeline-step/editor.scss new file mode 100644 index 0000000..8b13789 --- /dev/null +++ b/plugins/carhop-blocks/src/highlight-timeline-step/editor.scss @@ -0,0 +1 @@ + diff --git a/plugins/carhop-blocks/src/highlight-timeline-step/index.js b/plugins/carhop-blocks/src/highlight-timeline-step/index.js new file mode 100644 index 0000000..1807b0f --- /dev/null +++ b/plugins/carhop-blocks/src/highlight-timeline-step/index.js @@ -0,0 +1,24 @@ +import { registerBlockType } from "@wordpress/blocks"; +import "./style.scss"; + +import Edit from "./edit"; +import save from "./save"; +import metadata from "./block.json"; + +registerBlockType(metadata.name, { + icon: { + foreground: "#136f63", + src: ( + + + + + + ), + }, + edit: Edit, + save, +}); diff --git a/plugins/carhop-blocks/src/highlight-timeline-step/save.js b/plugins/carhop-blocks/src/highlight-timeline-step/save.js new file mode 100644 index 0000000..b1d5921 --- /dev/null +++ b/plugins/carhop-blocks/src/highlight-timeline-step/save.js @@ -0,0 +1,21 @@ +import { useBlockProps, InnerBlocks } from "@wordpress/block-editor"; +import TimelineYearBackground from "./timelineYearBackground"; +export default function save({ attributes }) { + const { year } = attributes; + return ( +
+
+

{year}

+ +
+
+ +
+
+ ); +} diff --git a/plugins/carhop-blocks/src/highlight-timeline-step/style.scss b/plugins/carhop-blocks/src/highlight-timeline-step/style.scss new file mode 100644 index 0000000..9fa210b --- /dev/null +++ b/plugins/carhop-blocks/src/highlight-timeline-step/style.scss @@ -0,0 +1,34 @@ +.highlight-timeline-step__year { + position: relative; + + > * { + z-index: 1; + } + .highlight-timeline-step__year-background { + position: absolute; + top: 10px; + right: 10px; + bottom: 10px; + left: 10px; + z-index: 0; + overflow: visible; + + svg { + overflow: visible; + width: 100%; + height: 100%; + + polygon { + overflow: visible; + fill: #efe8ff; + stroke: white; + stroke-width: 20px; + vector-effect: non-scaling-stroke; + } + } + } + + .highlight-timeline-step__year-text { + line-height: 1 !important; + } +} diff --git a/plugins/carhop-blocks/src/highlight-timeline-step/timeline-year-background.svg b/plugins/carhop-blocks/src/highlight-timeline-step/timeline-year-background.svg new file mode 100644 index 0000000..2853409 --- /dev/null +++ b/plugins/carhop-blocks/src/highlight-timeline-step/timeline-year-background.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/plugins/carhop-blocks/src/highlight-timeline-step/timelineYearBackground.jsx b/plugins/carhop-blocks/src/highlight-timeline-step/timelineYearBackground.jsx new file mode 100644 index 0000000..07811a5 --- /dev/null +++ b/plugins/carhop-blocks/src/highlight-timeline-step/timelineYearBackground.jsx @@ -0,0 +1,21 @@ +import React from "react"; + +export default function ShapeA({}) { + return ( +
+ + + +
+ ); +} diff --git a/plugins/carhop-blocks/src/highlight-timeline-step/view.js b/plugins/carhop-blocks/src/highlight-timeline-step/view.js new file mode 100644 index 0000000..e69de29 diff --git a/plugins/carhop-blocks/src/highlight-timeline/block.json b/plugins/carhop-blocks/src/highlight-timeline/block.json new file mode 100644 index 0000000..7842f3e --- /dev/null +++ b/plugins/carhop-blocks/src/highlight-timeline/block.json @@ -0,0 +1,20 @@ +{ + "$schema": "https://schemas.wp.org/trunk/block.json", + "apiVersion": 3, + "name": "carhop-blocks/highlight-timeline", + "version": "0.1.0", + "title": "Highlight Timeline", + "category": "carhop-blocks", + "icon": "smiley", + "description": "Highlight Timeline pour la mise en forme d'une timeline avec des éléments en surbrillance", + "example": {}, + "supports": { + "html": false + }, + "textdomain": "highlight-timeline", + "editorScript": "file:./index.js", + "editorStyle": "file:./index.css", + "style": "file:./style-index.css", + "viewScript": "file:./view.js", + "render": "file:./render.php" +} \ No newline at end of file diff --git a/plugins/carhop-blocks/src/highlight-timeline/edit.js b/plugins/carhop-blocks/src/highlight-timeline/edit.js new file mode 100644 index 0000000..bb7412f --- /dev/null +++ b/plugins/carhop-blocks/src/highlight-timeline/edit.js @@ -0,0 +1,40 @@ +import { __ } from "@wordpress/i18n"; +import { useBlockProps, InnerBlocks } from "@wordpress/block-editor"; +import "./editor.scss"; +import { useSelect } from "@wordpress/data"; + +export default function Edit({ attributes, setAttributes, ...props }) { + const years = useSelect( + (select) => { + const { getBlocks } = select("core/block-editor"); + const childBlocks = getBlocks(props.clientId) || []; + return childBlocks + .filter((b) => b.name === "carhop-blocks/highlight-timeline-step") + .map((b) => b.attributes?.year) + .filter((y) => y !== undefined && y !== null && y !== ""); + }, + [props.clientId] + ); + + return ( +
+
+ +
+ + +
+ ); +} diff --git a/plugins/carhop-blocks/src/highlight-timeline/editor.scss b/plugins/carhop-blocks/src/highlight-timeline/editor.scss new file mode 100644 index 0000000..e69de29 diff --git a/plugins/carhop-blocks/src/highlight-timeline/index.js b/plugins/carhop-blocks/src/highlight-timeline/index.js new file mode 100644 index 0000000..7262985 --- /dev/null +++ b/plugins/carhop-blocks/src/highlight-timeline/index.js @@ -0,0 +1,18 @@ +import { registerBlockType } from "@wordpress/blocks"; +import "./style.scss"; + +import Edit from "./edit"; +import save from "./save"; +import metadata from "./block.json"; + +registerBlockType(metadata.name, { + icon: { + src: ( + + + + ), + }, + edit: Edit, + save, +}); diff --git a/plugins/carhop-blocks/src/highlight-timeline/render.php b/plugins/carhop-blocks/src/highlight-timeline/render.php new file mode 100644 index 0000000..fc8a60d --- /dev/null +++ b/plugins/carhop-blocks/src/highlight-timeline/render.php @@ -0,0 +1,33 @@ + 'highlight-timeline')); + +$years = array(); +if (isset($block) && is_object($block) && ! empty($block->inner_blocks)) { + foreach ($block->inner_blocks as $inner_block) { + if (isset($inner_block->name) && $inner_block->name === 'carhop-blocks/highlight-timeline-step') { + $y = isset($inner_block->attributes['year']) ? $inner_block->attributes['year'] : null; + if ($y !== null && $y !== '') { + $years[] = $y; + } + } + } +} +?> + +
> + +
+
+ +
+
+ +
+ +
+
+
+
+ + +
\ No newline at end of file diff --git a/plugins/carhop-blocks/src/highlight-timeline/save.js b/plugins/carhop-blocks/src/highlight-timeline/save.js new file mode 100644 index 0000000..bfa118f --- /dev/null +++ b/plugins/carhop-blocks/src/highlight-timeline/save.js @@ -0,0 +1,5 @@ +import { useBlockProps, InnerBlocks } from "@wordpress/block-editor"; + +export default function save({ attributes }) { + return ; +} diff --git a/plugins/carhop-blocks/src/highlight-timeline/style.scss b/plugins/carhop-blocks/src/highlight-timeline/style.scss new file mode 100644 index 0000000..702128a --- /dev/null +++ b/plugins/carhop-blocks/src/highlight-timeline/style.scss @@ -0,0 +1,16 @@ +.highlight-timeline { + &__years { + width: 100%; + + display: flex; + + gap: 20px; + li { + color: #fff; + flex-grow: 1; + text-align: center; + list-style: none !important; + border-bottom: 1px solid #fff; + } + } +} diff --git a/plugins/carhop-blocks/src/highlight-timeline/view.js b/plugins/carhop-blocks/src/highlight-timeline/view.js new file mode 100644 index 0000000..7cd2156 --- /dev/null +++ b/plugins/carhop-blocks/src/highlight-timeline/view.js @@ -0,0 +1,56 @@ +function initiateSwiper() { + const currentBlock = document.querySelector( + ".wp-block-carhop-blocks-highlight-timeline" + ); + if (!currentBlock) return; + + // const swiperFraction = currentBlock.querySelector( + // ".swiper-pagination-fraction" + // ); + const slides = currentBlock.querySelectorAll(".swiper-slide"); + const slideCount = slides.length; + const years = Array.from(slides).map((slide) => { + const yearEl = slide.querySelector(".highlight-timeline-step__year"); + if (yearEl && yearEl.textContent) { + return yearEl.textContent.trim(); + } + const id = slide.id || ""; + const match = id.match(/^year-(.+)$/); + return match ? match[1] : ""; + }); + + highlightTimelineSwiper = new Swiper(".highlight-timeline-swiper", { + slidesPerView: 1, + spaceBetween: 30, + loop: true, + grabCursor: true, + keyboard: { + enabled: true, + onlyInViewport: true, + }, + navigation: { + nextEl: ".swiper-button-next", + prevEl: ".swiper-button-prev", + }, + mousewheel: { + enabled: true, + forceToAxis: true, // Force le scroll dans l'axe du slider + sensitivity: 1, // Sensibilité du scroll (1 = normal) + releaseOnEdges: false, // Continue le scroll même aux bords + }, + pagination: { + el: ".swiper-pagination", + clickable: true, + renderBullet: function (index, className) { + return ``; + }, + }, + }); +} + +window.addEventListener("DOMContentLoaded", (event) => { + initiateSwiper(); + + // swiperCheckBreakpoints(); + // window.addEventListener("resize", swiperCheckBreakpoints); +});