Compare commits
18 Commits
2cee49d71e
...
9554d760fa
| Author | SHA1 | Date | |
|---|---|---|---|
|
9554d760fa | ||
|
|
965b708b76 | ||
|
|
3c93f01b72 | ||
|
|
bfc6241a1a | ||
|
|
ecc664ad61 | ||
|
|
3520d637dc | ||
|
|
20f4b9fe73 | ||
|
|
a8028c4c6f | ||
|
|
c4d9b895d3 | ||
|
|
d2d06f04e2 | ||
|
|
88bf8e4c64 | ||
|
|
8c6114e17f | ||
|
|
6384af7175 | ||
|
|
c41db977d6 | ||
|
|
19dcaeb338 | ||
|
|
08ae57586e | ||
|
|
8f28d999a2 | ||
|
|
05ba550d9f |
26
mu-plugins/carhop-post-types-supports.php
Normal file
26
mu-plugins/carhop-post-types-supports.php
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
<?php
|
||||
|
||||
/**
|
||||
* Bouton « Citer » dans le header d’article : opt-in par type de contenu.
|
||||
* Les types non listés (ex. actualités) n’affichent pas le bouton.
|
||||
*
|
||||
* @see post_type_supports( $post_type, 'carhop-citations' ) dans post-header.php
|
||||
*/
|
||||
function carhop_register_citation_support_for_post_types()
|
||||
{
|
||||
$types_with_citations = array(
|
||||
'analyses-etudes',
|
||||
'recherches',
|
||||
'expositions',
|
||||
'actualites',
|
||||
'outils-pedagogiques',
|
||||
'activites',
|
||||
);
|
||||
|
||||
foreach ($types_with_citations as $post_type) {
|
||||
if (post_type_exists($post_type)) {
|
||||
add_post_type_support($post_type, 'carhop-citations');
|
||||
}
|
||||
}
|
||||
}
|
||||
add_action('init', 'carhop_register_citation_support_for_post_types', 11);
|
||||
|
|
@ -230,3 +230,12 @@ function carhop_create_posttype()
|
|||
);
|
||||
}
|
||||
add_action('init', 'carhop_create_posttype');
|
||||
|
||||
|
||||
//hide defaukt post type from admin menu
|
||||
function carhop_hide_default_post_type()
|
||||
{
|
||||
remove_menu_page('edit.php');
|
||||
remove_menu_page('edit-comments.php');
|
||||
}
|
||||
add_action('admin_menu', 'carhop_hide_default_post_type');
|
||||
|
|
|
|||
|
|
@ -361,7 +361,13 @@ return array(
|
|||
),
|
||||
'blockVariant' => array(
|
||||
'type' => 'string',
|
||||
'default' => 'framed'
|
||||
'default' => 'backgrounded',
|
||||
'enum' => array(
|
||||
'nude',
|
||||
'framed',
|
||||
'framed-backgrounded',
|
||||
'backgrounded'
|
||||
)
|
||||
),
|
||||
'shapeType' => array(
|
||||
'type' => 'string',
|
||||
|
|
|
|||
|
|
@ -4,3 +4,17 @@
|
|||
.wp-block-carhop-blocks-chapter-section {
|
||||
margin: 2rem calc(50% - 50vw);
|
||||
}
|
||||
|
||||
.chapter-section--bg-light {
|
||||
--cta-current-color: var(--wp--preset--color--carhop-green, inherit);
|
||||
}
|
||||
|
||||
.chapter-section--bg-light .wp-block-carhop-blocks-cta {
|
||||
--cta-current-color: var(--wp--preset--color--carhop-green, inherit);
|
||||
}
|
||||
|
||||
.chapter-section--bg-light .wp-block-carhop-blocks-cta svg,
|
||||
.chapter-section--bg-light .wp-block-carhop-blocks-cta path,
|
||||
.chapter-section--bg-light .wp-block-carhop-blocks-cta circle {
|
||||
stroke: var(--wp--preset--color--carhop-green, inherit);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
<?php return array('dependencies' => array('react', 'react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-i18n', 'wp-primitives'), 'version' => '9272ca653d58c468069b');
|
||||
<?php return array('dependencies' => array('react', 'react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-i18n', 'wp-primitives'), 'version' => '214b3911267e4d3bf438');
|
||||
|
|
|
|||
|
|
@ -5,4 +5,18 @@
|
|||
margin: 2rem calc(50% - 50vw);
|
||||
}
|
||||
|
||||
.chapter-section--bg-light {
|
||||
--cta-current-color: var(--wp--preset--color--carhop-green, inherit);
|
||||
}
|
||||
|
||||
.chapter-section--bg-light .wp-block-carhop-blocks-cta {
|
||||
--cta-current-color: var(--wp--preset--color--carhop-green, inherit);
|
||||
}
|
||||
|
||||
.chapter-section--bg-light .wp-block-carhop-blocks-cta svg,
|
||||
.chapter-section--bg-light .wp-block-carhop-blocks-cta path,
|
||||
.chapter-section--bg-light .wp-block-carhop-blocks-cta circle {
|
||||
stroke: var(--wp--preset--color--carhop-green, inherit);
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=index.css.map*/
|
||||
|
|
@ -1 +1 @@
|
|||
{"version":3,"file":"chapter-section/index.css","mappings":";;;AAAA;EACC;AACD,C","sources":["webpack://carhop-blocks/./src/chapter-section/editor.scss"],"sourcesContent":[".wp-block-carhop-blocks-chapter-section {\n\tmargin: 2rem calc(50% - 50vw);\n}\n"],"names":[],"ignoreList":[],"sourceRoot":""}
|
||||
{"version":3,"file":"chapter-section/index.css","mappings":";;;AAAA;EACC;AACD;;AAEA;EACC;AACD;;AACC;EACC;AACF;;AAAE;;;EAGC;AAEH,C","sources":["webpack://carhop-blocks/./src/chapter-section/editor.scss"],"sourcesContent":[".wp-block-carhop-blocks-chapter-section {\n\tmargin: 2rem calc(50% - 50vw);\n}\n\n.chapter-section--bg-light {\n\t--cta-current-color: var(--wp--preset--color--carhop-green, inherit);\n\n\t.wp-block-carhop-blocks-cta {\n\t\t--cta-current-color: var(--wp--preset--color--carhop-green, inherit);\n\t\tsvg,\n\t\tpath,\n\t\tcircle {\n\t\t\tstroke: var(--wp--preset--color--carhop-green, inherit);\n\t\t}\n\t}\n}\n"],"names":[],"ignoreList":[],"sourceRoot":""}
|
||||
|
|
@ -502,9 +502,9 @@ function save({
|
|||
className: `deligraph-blocks-chapter-section chapter-section chapter-section--${disposition} chapter-section--${blockVariant}
|
||||
${blockWidth === "full" ? "chapter-section--width-full" : "chapter-section--width-contained"}
|
||||
|
||||
${hasLightBackground ? "chapter-section--bg-light" : " "}`,
|
||||
${hasLightBackground ? "chapter-section--bg-light" : "chapter-section--bg-dark"}`,
|
||||
style: {
|
||||
"--chapter-section-text-color": textColor ? textColor : "#136f63",
|
||||
"--chapter-section-text-color": textColor ? textColor : "var(--advised-text-color)",
|
||||
"--cta-current-color": blockVariant === "backgrounded" ? "inherit" : "var(--wp--preset--color--primary) !important"
|
||||
}
|
||||
}),
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -44,7 +44,13 @@
|
|||
},
|
||||
"blockVariant": {
|
||||
"type": "string",
|
||||
"default": "framed"
|
||||
"default": "backgrounded",
|
||||
"enum": [
|
||||
"nude",
|
||||
"framed",
|
||||
"framed-backgrounded",
|
||||
"backgrounded"
|
||||
]
|
||||
},
|
||||
"shapeType": {
|
||||
"type": "string",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,22 @@
|
|||
/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
|
||||
!*** css ./node_modules/.pnpm/css-loader@6.11.0_webpack@5.103.0/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/.pnpm/postcss-loader@6.2.1_postcss@8.5.6_webpack@5.103.0/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/.pnpm/sass-loader@16.0.6_sass@1.94.1_webpack@5.103.0/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/content-box/editor.scss ***!
|
||||
\*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
|
||||
.content-box {
|
||||
padding-right: 2.5rem !important;
|
||||
padding-left: 2.5rem !important;
|
||||
}
|
||||
.content-box a {
|
||||
color: var(--content-box-text-color) !important;
|
||||
}
|
||||
.editor-styles-wrapper .deligraph-blocks-chapter-section {
|
||||
padding-right: 2.5rem !important;
|
||||
padding-left: 2.5rem !important;
|
||||
}
|
||||
.content-box .wp-block-columns {
|
||||
margin-top: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
.content-box .block-editor-block-list__layout > .wp-block-columns {
|
||||
margin-top: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
<?php return array('dependencies' => array('react', 'react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-i18n'), 'version' => '1e2c2d08d328ea46924d');
|
||||
<?php return array('dependencies' => array('react', 'react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-i18n'), 'version' => '4627138f4496bef9907c');
|
||||
|
|
|
|||
|
|
@ -1,8 +1,24 @@
|
|||
/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
|
||||
!*** css ./node_modules/.pnpm/css-loader@6.11.0_webpack@5.103.0/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/.pnpm/postcss-loader@6.2.1_postcss@8.5.6_webpack@5.103.0/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/.pnpm/sass-loader@16.0.6_sass@1.94.1_webpack@5.103.0/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/content-box/editor.scss ***!
|
||||
\*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
|
||||
.content-box {
|
||||
padding-left: 2.5rem !important;
|
||||
padding-right: 2.5rem !important;
|
||||
}
|
||||
.content-box a {
|
||||
color: var(--content-box-text-color) !important;
|
||||
}
|
||||
.editor-styles-wrapper .deligraph-blocks-chapter-section {
|
||||
padding-left: 2.5rem !important;
|
||||
padding-right: 2.5rem !important;
|
||||
}
|
||||
.content-box .wp-block-columns {
|
||||
margin-top: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
.content-box .block-editor-block-list__layout > .wp-block-columns {
|
||||
margin-top: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=index.css.map*/
|
||||
|
|
@ -1 +1 @@
|
|||
{"version":3,"file":"content-box/index.css","mappings":";;;AACC;EACC;AAAF,C","sources":["webpack://carhop-blocks/./src/content-box/editor.scss"],"sourcesContent":[".content-box {\n\ta {\n\t\tcolor: var(--content-box-text-color) !important;\n\t}\n}\n"],"names":[],"ignoreList":[],"sourceRoot":""}
|
||||
{"version":3,"file":"content-box/index.css","mappings":";;;AAAA;EACC;EACA;AACD;AACC;EACC;AACF;AAGA;EACC;EACA;AAAD;AAIC;EACC;EACA;AADF;AAGC;EACC;EACA;AADF,C","sources":["webpack://carhop-blocks/./src/content-box/editor.scss"],"sourcesContent":[".content-box {\n\tpadding-left: 2.5rem !important;\n\tpadding-right: 2.5rem !important;\n\n\ta {\n\t\tcolor: var(--content-box-text-color) !important;\n\t}\n}\n\n.editor-styles-wrapper .deligraph-blocks-chapter-section {\n\tpadding-left: 2.5rem !important;\n\tpadding-right: 2.5rem !important;\n}\n\n.content-box {\n\t.wp-block-columns {\n\t\tmargin-top: 0 !important;\n\t\tmargin-bottom: 0 !important;\n\t}\n\t.block-editor-block-list__layout > .wp-block-columns {\n\t\tmargin-top: 0 !important;\n\t\tmargin-bottom: 0 !important;\n\t}\n}\n"],"names":[],"ignoreList":[],"sourceRoot":""}
|
||||
|
|
@ -41,7 +41,7 @@ function isColorLight(color) {
|
|||
\************************************/
|
||||
/***/ ((module) => {
|
||||
|
||||
module.exports = /*#__PURE__*/JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":3,"name":"carhop-blocks/content-box","version":"0.1.0","title":"Boite de contenu","category":"carhop-blocks","icon":"smiley","description":"Boite de contenu pour la mise en forme d\'éléments de contenu","example":{},"supports":{"html":false,"anchor":true,"align":["wide","full"]},"textdomain":"carhop-blocks","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","viewScript":"file:./view.js","attributes":{"hasBackgroundColor":{"type":"boolean","default":false},"backgroundColor":{"type":"string","default":"#f1fcf9"},"hasLightBackground":{"type":"boolean","default":true},"textColor":{"type":"string","default":"inherit"},"borderColor":{"type":"string","default":null},"blockVariant":{"type":"string","default":"framed"},"shapeType":{"type":"string","default":"straight","enum":["straight","shapeA","shapeB","shapeC"]},"blockWidth":{"type":"string","default":"full","enum":["contained","wide","full"]}}}');
|
||||
module.exports = /*#__PURE__*/JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":3,"name":"carhop-blocks/content-box","version":"0.1.0","title":"Boite de contenu","category":"carhop-blocks","icon":"smiley","description":"Boite de contenu pour la mise en forme d\'éléments de contenu","example":{},"supports":{"html":false,"anchor":true,"align":["wide","full"]},"textdomain":"carhop-blocks","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","viewScript":"file:./view.js","attributes":{"hasBackgroundColor":{"type":"boolean","default":false},"backgroundColor":{"type":"string","default":"#f1fcf9"},"hasLightBackground":{"type":"boolean","default":true},"textColor":{"type":"string","default":"inherit"},"borderColor":{"type":"string","default":null},"blockVariant":{"type":"string","default":"backgrounded","enum":["nude","framed","framed-backgrounded","backgrounded"]},"shapeType":{"type":"string","default":"straight","enum":["straight","shapeA","shapeB","shapeC"]},"blockWidth":{"type":"string","default":"full","enum":["contained","wide","full"]}}}');
|
||||
|
||||
/***/ }),
|
||||
|
||||
|
|
@ -91,11 +91,11 @@ function Edit({
|
|||
const colors = (0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useSetting)("color.palette.theme");
|
||||
const {
|
||||
hasBackgroundColor,
|
||||
align,
|
||||
backgroundColor,
|
||||
textColor,
|
||||
hasLightBackground,
|
||||
blockVariant,
|
||||
blockWidth,
|
||||
shapeType,
|
||||
borderColor
|
||||
} = attributes;
|
||||
|
|
@ -160,8 +160,8 @@ function Edit({
|
|||
});
|
||||
}
|
||||
}
|
||||
console.log(shapeType);
|
||||
console.log(blockVariant);
|
||||
const alignClass = align === "full" ? "alignfull" : align === "wide" ? "alignwide" : "aligncontained";
|
||||
console.log(align);
|
||||
return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.Fragment, {
|
||||
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.InspectorControls, {
|
||||
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.PanelBody, {
|
||||
|
|
@ -188,15 +188,15 @@ function Edit({
|
|||
})]
|
||||
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.__experimentalToggleGroupControl, {
|
||||
label: "Largeur du bloc",
|
||||
value: blockWidth,
|
||||
value: align,
|
||||
onChange: value => setAttributes({
|
||||
blockWidth: value
|
||||
align: value
|
||||
}),
|
||||
isBlock: true,
|
||||
__nextHasNoMarginBottom: true,
|
||||
__next40pxDefaultSize: true,
|
||||
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.__experimentalToggleGroupControlOption, {
|
||||
value: "contained",
|
||||
value: "",
|
||||
label: "Contenue"
|
||||
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.__experimentalToggleGroupControlOption, {
|
||||
value: "wide",
|
||||
|
|
@ -206,7 +206,7 @@ function Edit({
|
|||
label: "Pleine largeur"
|
||||
})]
|
||||
})]
|
||||
}), (blockVariant === "backgrounded" || blockVariant === "framed-backgrounded") && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.PanelBody, {
|
||||
}), blockVariant !== "nude" && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.PanelBody, {
|
||||
className: "deligraph-blocks-components-image__panel-body",
|
||||
title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_0__.__)("Arrière plan", "deligraph-blocks"),
|
||||
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.__experimentalToggleGroupControl, {
|
||||
|
|
@ -270,8 +270,7 @@ function Edit({
|
|||
})]
|
||||
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)("section", {
|
||||
...(0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useBlockProps)({
|
||||
className: `${postType !== "articles" && "alignfull"} content-box content-box--variant-${blockVariant} content-box--${shapeType} ${hasLightBackground ? "content-box--bg-light" : "content-box--bg-dark"}
|
||||
${blockWidth === "contained" ? "aligncontained" : blockWidth === "wide" ? "alignwide" : "alignfull"}`,
|
||||
className: `${postType !== "articles" && "alignfull"} content-box content-box--variant-${blockVariant} content-box--${shapeType} ${hasLightBackground ? "content-box--bg-light" : "content-box--bg-dark"} ${alignClass}`,
|
||||
style: {
|
||||
"--content-box-text-color": textColor !== null && textColor !== void 0 ? textColor : "inherit",
|
||||
"--content-box-background-color": blockVariant === "backgrounded" || blockVariant === "framed-backgrounded" ? backgroundColor : "transparent"
|
||||
|
|
@ -295,6 +294,15 @@ function Edit({
|
|||
}), blockVariant === "framed" && backgroundColor && shapeType === "shapeC" && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(_shapeC_jsx__WEBPACK_IMPORTED_MODULE_8__["default"], {
|
||||
backgroundColor: "none",
|
||||
borderColor: borderColor
|
||||
}), blockVariant === "framed-backgrounded" && backgroundColor && shapeType === "shapeA" && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(_shapeA_jsx__WEBPACK_IMPORTED_MODULE_6__["default"], {
|
||||
backgroundColor: backgroundColor,
|
||||
borderColor: borderColor
|
||||
}), blockVariant === "framed-backgrounded" && backgroundColor && shapeType === "shapeB" && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(_shapeB_jsx__WEBPACK_IMPORTED_MODULE_7__["default"], {
|
||||
backgroundColor: backgroundColor,
|
||||
borderColor: borderColor
|
||||
}), blockVariant === "framed-backgrounded" && backgroundColor && shapeType === "shapeC" && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(_shapeC_jsx__WEBPACK_IMPORTED_MODULE_8__["default"], {
|
||||
backgroundColor: backgroundColor,
|
||||
borderColor: borderColor
|
||||
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)("div", {
|
||||
className: "content-box__innerblocks",
|
||||
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.InnerBlocks, {
|
||||
|
|
@ -396,14 +404,15 @@ function save({
|
|||
hasLightBackground,
|
||||
hasBackgroundColor,
|
||||
blockVariant,
|
||||
blockWidth,
|
||||
align,
|
||||
shapeType,
|
||||
borderColor
|
||||
} = attributes;
|
||||
const lightnessClass = hasLightBackground ? "content-box--bg-light" : "content-box--bg-dark";
|
||||
const alignClass = align === "full" ? "alignfull" : align === "wide" ? "alignwide" : "aligncontained";
|
||||
return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)("section", {
|
||||
..._wordpress_block_editor__WEBPACK_IMPORTED_MODULE_0__.useBlockProps.save({
|
||||
className: `content-box content-box--variant-${blockVariant} content-box--${shapeType} ${hasLightBackground ? "content-box--bg-light" : "content-box--bg-dark"}
|
||||
${blockWidth === "contained" ? "aligncontained" : blockWidth === "wide" ? "alignwide" : "alignfull"}`,
|
||||
className: `content-box content-box--variant-${blockVariant} content-box--${shapeType} ${lightnessClass} ${alignClass}`,
|
||||
style: {
|
||||
"--content-box-text-color": textColor !== null && textColor !== void 0 ? textColor : "inherit",
|
||||
"--content-box-background-color": blockVariant === "backgrounded" || blockVariant === "framed-backgrounded" ? backgroundColor : "transparent"
|
||||
|
|
@ -427,6 +436,15 @@ function save({
|
|||
}), blockVariant === "framed" && backgroundColor && shapeType === "shapeC" && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_shapeC_jsx__WEBPACK_IMPORTED_MODULE_3__["default"], {
|
||||
backgroundColor: "none",
|
||||
borderColor: borderColor
|
||||
}), blockVariant === "framed-backgrounded" && backgroundColor && shapeType === "shapeA" && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_shapeA_jsx__WEBPACK_IMPORTED_MODULE_1__["default"], {
|
||||
backgroundColor: backgroundColor,
|
||||
borderColor: borderColor
|
||||
}), blockVariant === "framed-backgrounded" && backgroundColor && shapeType === "shapeB" && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_shapeB_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
|
||||
backgroundColor: backgroundColor,
|
||||
borderColor: borderColor
|
||||
}), blockVariant === "framed-backgrounded" && backgroundColor && shapeType === "shapeC" && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_shapeC_jsx__WEBPACK_IMPORTED_MODULE_3__["default"], {
|
||||
backgroundColor: backgroundColor,
|
||||
borderColor: borderColor
|
||||
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("div", {
|
||||
className: "content-box__innerblocks",
|
||||
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_0__.InnerBlocks.Content, {})
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -7,6 +7,15 @@
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 2rem;
|
||||
row-gap: 1rem;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.cta-group {
|
||||
row-gap: 1.5rem;
|
||||
}
|
||||
}
|
||||
.cta-group .wp-block-carhop-blocks-cta {
|
||||
margin: 0 !important;
|
||||
}
|
||||
.cta-group--align-left {
|
||||
justify-content: flex-start;
|
||||
|
|
|
|||
|
|
@ -7,6 +7,15 @@
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 2rem;
|
||||
row-gap: 1rem;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.cta-group {
|
||||
row-gap: 1.5rem;
|
||||
}
|
||||
}
|
||||
.cta-group .wp-block-carhop-blocks-cta {
|
||||
margin: 0 !important;
|
||||
}
|
||||
.cta-group--align-left {
|
||||
justify-content: flex-start;
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
{"version":3,"file":"cta-group/style-index.css","mappings":";;;AAAA;EACC;EACA;EACA;EACA;EACA;AACD;AACC;EACC;AACF;AAEC;EACC;AAAF;AAGC;EACC;AADF,C","sources":["webpack://carhop-blocks/./src/cta-group/style.scss"],"sourcesContent":[".cta-group {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tjustify-content: center;\n\talign-items: center;\n\tgap: 2rem;\n\n\t&--align-left {\n\t\tjustify-content: flex-start;\n\t}\n\n\t&--align-center {\n\t\tjustify-content: center;\n\t}\n\n\t&--align-right {\n\t\tjustify-content: flex-end;\n\t}\n}\n"],"names":[],"ignoreList":[],"sourceRoot":""}
|
||||
{"version":3,"file":"cta-group/style-index.css","mappings":";;;AAAA;EACC;EACA;EACA;EACA;EACA;EACA;AACD;AACC;EARD;IASE;EAEA;AACF;AAAC;EACC;AAEF;AACC;EACC;AACF;AAEC;EACC;AAAF;AAGC;EACC;AADF,C","sources":["webpack://carhop-blocks/./src/cta-group/style.scss"],"sourcesContent":[".cta-group {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tjustify-content: center;\n\talign-items: center;\n\tgap: 2rem;\n\trow-gap: 1rem;\n\n\t@media (max-width: 768px) {\n\t\trow-gap: 1.5rem;\n\t}\n\n\t.wp-block-carhop-blocks-cta {\n\t\tmargin: 0 !important;\n\t}\n\n\t&--align-left {\n\t\tjustify-content: flex-start;\n\t}\n\n\t&--align-center {\n\t\tjustify-content: center;\n\t}\n\n\t&--align-right {\n\t\tjustify-content: flex-end;\n\t}\n}\n"],"names":[],"ignoreList":[],"sourceRoot":""}
|
||||
|
|
@ -1,18 +1,15 @@
|
|||
/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
|
||||
!*** css ./node_modules/.pnpm/css-loader@6.11.0_webpack@5.103.0/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/.pnpm/postcss-loader@6.2.1_postcss@8.5.6_webpack@5.103.0/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/.pnpm/sass-loader@16.0.6_sass@1.94.1_webpack@5.103.0/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/cta/editor.scss ***!
|
||||
\*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
|
||||
.wp-block-carhop-blocks-cta {
|
||||
color: var(--cta-current-color);
|
||||
}
|
||||
.wp-block-carhop-blocks-cta a {
|
||||
color: var(--cta-current-color) !important;
|
||||
padding-bottom: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
.wp-block-carhop-blocks-cta {
|
||||
padding: 2px;
|
||||
display: block;
|
||||
width: -moz-fit-content;
|
||||
width: fit-content;
|
||||
display: flex;
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
line-height: normal;
|
||||
|
|
@ -23,7 +20,7 @@
|
|||
}
|
||||
.wp-block-carhop-blocks-cta .icon svg path,
|
||||
.wp-block-carhop-blocks-cta .icon svg circle {
|
||||
stroke: var(--cta-current-color);
|
||||
stroke: currentColor;
|
||||
}
|
||||
.wp-block-carhop-blocks-cta.align--left {
|
||||
margin-right: 0;
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
<?php return array('dependencies' => array('react', 'react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-i18n'), 'version' => '1a1c96d4851a5a9d92ea');
|
||||
<?php return array('dependencies' => array('react', 'react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-i18n'), 'version' => 'b611b7ff4b53bdf52fa8');
|
||||
|
|
|
|||
|
|
@ -1,18 +1,15 @@
|
|||
/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
|
||||
!*** css ./node_modules/.pnpm/css-loader@6.11.0_webpack@5.103.0/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/.pnpm/postcss-loader@6.2.1_postcss@8.5.6_webpack@5.103.0/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/.pnpm/sass-loader@16.0.6_sass@1.94.1_webpack@5.103.0/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/cta/editor.scss ***!
|
||||
\*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
|
||||
.wp-block-carhop-blocks-cta {
|
||||
color: var(--cta-current-color);
|
||||
}
|
||||
.wp-block-carhop-blocks-cta a {
|
||||
color: var(--cta-current-color) !important;
|
||||
padding-bottom: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
.wp-block-carhop-blocks-cta {
|
||||
padding: 2px;
|
||||
display: block;
|
||||
width: -moz-fit-content;
|
||||
width: fit-content;
|
||||
display: flex;
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
line-height: normal;
|
||||
|
|
@ -23,7 +20,7 @@
|
|||
}
|
||||
.wp-block-carhop-blocks-cta .icon svg path,
|
||||
.wp-block-carhop-blocks-cta .icon svg circle {
|
||||
stroke: var(--cta-current-color);
|
||||
stroke: currentColor;
|
||||
}
|
||||
.wp-block-carhop-blocks-cta.align--left {
|
||||
margin-left: 0;
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
{"version":3,"file":"cta/index.css","mappings":";;;AAAA;EACC;AACD;AAAC;EACC;AAEF;AALA;EAOC;EACA;EACA;EAAA;EACA;EACA;EACA;EACA;AACD;AAEE;EACC;EACA;AAAH;AAEE;;EAEC;AAAH;AAIC;EACC;AAFF;AAIC;EACC;EACA;AAFF;AAIC;EACC;AAFF,C","sources":["webpack://carhop-blocks/./src/cta/editor.scss"],"sourcesContent":[".wp-block-carhop-blocks-cta {\n\tcolor: var(--cta-current-color);\n\ta {\n\t\tcolor: var(--cta-current-color) !important;\n\n\t\t&:after{}\n\t}\n\tpadding: 2px;\n\tdisplay: block;\n\twidth: fit-content;\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 10px;\n\tline-height: normal;\n\n\t.icon {\n\t\tsvg {\n\t\t\twidth: 30px;\n\t\t\theight: 30px;\n\t\t}\n\t\tsvg path,\n\t\tsvg circle {\n\t\t\tstroke: var(--cta-current-color);\n\t\t}\n\t}\n\n\t&.align--left {\n\t\tmargin-left: 0;\n\t}\n\t&.align--right {\n\t\tmargin-right: 0;\n\t\tmargin-left: auto;\n\t}\n\t&.align--center {\n\t\tmargin: 0 auto;\n\t}\n}\n"],"names":[],"ignoreList":[],"sourceRoot":""}
|
||||
{"version":3,"file":"cta/index.css","mappings":";;;AAEC;EAGC;EACA;AAHF;AAHA;EAQC;EAEA;EAAA;EACA;EACA;EACA;EACA;AAHD;AAME;EACC;EACA;AAJH;AAME;;EAEC;AAJH;AASC;EACC;AAPF;AASC;EACC;EACA;AAPF;AASC;EACC;AAPF,C","sources":["webpack://carhop-blocks/./src/cta/editor.scss"],"sourcesContent":[".wp-block-carhop-blocks-cta {\n\t// color: var(--cta-current-color);\n\ta {\n\t\t// color: var(--cta-current-color) !important;\n\n\t\tpadding-bottom: 0 !important;\n\t\tmargin-bottom: 0 !important;\n\t}\n\tpadding: 2px;\n\n\twidth: fit-content;\n\tdisplay: flex !important;\n\talign-items: center;\n\tgap: 10px;\n\tline-height: normal;\n\n\t.icon {\n\t\tsvg {\n\t\t\twidth: 30px;\n\t\t\theight: 30px;\n\t\t}\n\t\tsvg path,\n\t\tsvg circle {\n\t\t\tstroke: currentColor;\n\t\t\t// stroke: var(--cta-current-color);\n\t\t}\n\t}\n\n\t&.align--left {\n\t\tmargin-left: 0;\n\t}\n\t&.align--right {\n\t\tmargin-right: 0;\n\t\tmargin-left: auto;\n\t}\n\t&.align--center {\n\t\tmargin: 0 auto;\n\t}\n}\n"],"names":[],"ignoreList":[],"sourceRoot":""}
|
||||
|
|
@ -30,8 +30,10 @@ __webpack_require__.r(__webpack_exports__);
|
|||
/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__);
|
||||
/* harmony import */ var _editor_scss__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./editor.scss */ "./src/cta/editor.scss");
|
||||
/* harmony import */ var _img_carhop_fleche_lien_externe_full_svg__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./img/carhop-fleche-lien-externe-full.svg */ "./src/cta/img/carhop-fleche-lien-externe-full.svg");
|
||||
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
|
||||
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__);
|
||||
/* harmony import */ var _img_carhop_fleche_ancre_page_svg__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./img/carhop-fleche-ancre-page.svg */ "./src/cta/img/carhop-fleche-ancre-page.svg");
|
||||
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
|
||||
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__);
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -50,37 +52,58 @@ function Edit({
|
|||
link
|
||||
} = attributes;
|
||||
const colors = (0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useSetting)("color.palette.theme");
|
||||
const isHashLink = typeof link?.url === "string" && link.url.startsWith("#");
|
||||
function handleColorChange(value) {
|
||||
setAttributes({
|
||||
color: value
|
||||
});
|
||||
}
|
||||
return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.Fragment, {
|
||||
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.BlockControls, {
|
||||
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.AlignmentToolbar, {
|
||||
console.log(attributes);
|
||||
console.log(link);
|
||||
function handleLinkChange(newLink) {
|
||||
if (!newLink) {
|
||||
setAttributes({
|
||||
link: undefined
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (newLink.url) {
|
||||
newLink.title = newLink.url;
|
||||
}
|
||||
console.log(newLink);
|
||||
setAttributes({
|
||||
link: newLink
|
||||
});
|
||||
}
|
||||
return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.Fragment, {
|
||||
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.BlockControls, {
|
||||
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.AlignmentToolbar, {
|
||||
value: attributes.align,
|
||||
onChange: value => setAttributes({
|
||||
align: value
|
||||
})
|
||||
})
|
||||
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.InspectorControls, {
|
||||
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.PanelBody, {
|
||||
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.InspectorControls, {
|
||||
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.PanelBody, {
|
||||
title: "Lien",
|
||||
initialOpen: true,
|
||||
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("div", {
|
||||
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.__experimentalLinkControl, {
|
||||
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)("div", {
|
||||
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.__experimentalLinkControl, {
|
||||
value: attributes.link,
|
||||
onChange: value => {
|
||||
setAttributes({
|
||||
link: value
|
||||
});
|
||||
label: "Lien",
|
||||
onSelect: value => {
|
||||
console.log("onSelect");
|
||||
console.log(value);
|
||||
},
|
||||
onChange: newlink => {
|
||||
handleLinkChange(newlink);
|
||||
}
|
||||
})
|
||||
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.PanelBody, {
|
||||
}, "link-control")
|
||||
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.PanelBody, {
|
||||
title: "Couleur",
|
||||
initialOpen: true,
|
||||
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.PanelRow, {
|
||||
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.ColorPalette, {
|
||||
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.PanelRow, {
|
||||
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.ColorPalette, {
|
||||
value: color,
|
||||
onChange: value => {
|
||||
handleColorChange(value);
|
||||
|
|
@ -91,14 +114,14 @@ function Edit({
|
|||
})
|
||||
})]
|
||||
})
|
||||
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("div", {
|
||||
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)("div", {
|
||||
...(0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useBlockProps)({
|
||||
className: `cta align--${attributes.align}`,
|
||||
className: `cta align--${attributes.align}${isHashLink ? " cta--hash-link" : ""}`,
|
||||
style: {
|
||||
"--cta-current-color": color
|
||||
}
|
||||
}),
|
||||
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.RichText, {
|
||||
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.RichText, {
|
||||
tagName: "a",
|
||||
placeholder: "Ajouter un lien",
|
||||
value: attributes.text,
|
||||
|
|
@ -106,7 +129,15 @@ function Edit({
|
|||
text
|
||||
}),
|
||||
allowedFormats: []
|
||||
})
|
||||
}), isHashLink ? /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_img_carhop_fleche_ancre_page_svg__WEBPACK_IMPORTED_MODULE_5__.ReactComponent, {
|
||||
style: {
|
||||
color
|
||||
}
|
||||
}) : /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_img_carhop_fleche_lien_externe_full_svg__WEBPACK_IMPORTED_MODULE_4__.ReactComponent, {
|
||||
style: {
|
||||
color
|
||||
}
|
||||
})]
|
||||
})]
|
||||
});
|
||||
}
|
||||
|
|
@ -123,6 +154,48 @@ __webpack_require__.r(__webpack_exports__);
|
|||
// extracted by mini-css-extract-plugin
|
||||
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ "./src/cta/img/carhop-fleche-ancre-page.svg":
|
||||
/*!**************************************************!*\
|
||||
!*** ./src/cta/img/carhop-fleche-ancre-page.svg ***!
|
||||
\**************************************************/
|
||||
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
||||
|
||||
__webpack_require__.r(__webpack_exports__);
|
||||
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
|
||||
/* harmony export */ ReactComponent: () => (/* binding */ SvgCarhopFlecheAncrePage),
|
||||
/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)
|
||||
/* harmony export */ });
|
||||
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
|
||||
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
|
||||
var _circle, _path;
|
||||
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
||||
|
||||
var SvgCarhopFlecheAncrePage = function SvgCarhopFlecheAncrePage(props) {
|
||||
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("svg", _extends({
|
||||
xmlns: "http://www.w3.org/2000/svg",
|
||||
"aria-hidden": "true",
|
||||
viewBox: "0 0 32 32"
|
||||
}, props), _circle || (_circle = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("circle", {
|
||||
cx: 16,
|
||||
cy: 16,
|
||||
r: 15,
|
||||
fill: "none",
|
||||
stroke: "currentColor",
|
||||
strokeWidth: 2
|
||||
})), _path || (_path = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
|
||||
fill: "none",
|
||||
stroke: "currentColor",
|
||||
strokeLinecap: "round",
|
||||
strokeLinejoin: "round",
|
||||
strokeWidth: 2,
|
||||
d: "M16 9v11m-5-3 5 6 5-6"
|
||||
})));
|
||||
};
|
||||
|
||||
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiIgZm9jdXNhYmxlPSJmYWxzZSIgYXJpYS1oaWRkZW49InRydWUiPg0KCTxjaXJjbGUgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgY3g9IjE2IiBjeT0iMTYiIHI9IjE1Ii8+DQoJPHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBkPSJNMTYgOXYxMU0xMSAxN2w1IDYgNS02Ii8+DQo8L3N2Zz4NCg==");
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ "./src/cta/img/carhop-fleche-lien-externe-full.svg":
|
||||
|
|
@ -138,26 +211,31 @@ __webpack_require__.r(__webpack_exports__);
|
|||
/* harmony export */ });
|
||||
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
|
||||
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
|
||||
var _defs, _path, _circle;
|
||||
var _g, _circle;
|
||||
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
||||
|
||||
var SvgCarhopFlecheLienExterneFull = function SvgCarhopFlecheLienExterneFull(props) {
|
||||
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("svg", _extends({
|
||||
xmlns: "http://www.w3.org/2000/svg",
|
||||
id: "carhop-fleche-lien-externe-full_svg__fleche-lien-externe-full",
|
||||
"aria-hidden": "true",
|
||||
viewBox: "0 0 32 32"
|
||||
}, props), _defs || (_defs = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("defs", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("style", null, ".carhop-fleche-lien-externe-full_svg__cls-1{fill:none;stroke:#000;stroke-width:2px}"))), _path || (_path = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
|
||||
d: "m21.15 10.59-9.38 10.02M21.15 21.4V10.59H10.83",
|
||||
className: "carhop-fleche-lien-externe-full_svg__cls-1"
|
||||
})), _circle || (_circle = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("circle", {
|
||||
}, props), _g || (_g = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("g", {
|
||||
fill: "none",
|
||||
stroke: "currentColor",
|
||||
strokeWidth: 2
|
||||
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
|
||||
d: "m21.15 10.59-9.38 10.02M21.15 21.4V10.59H10.83"
|
||||
}))), _circle || (_circle = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("circle", {
|
||||
cx: 16,
|
||||
cy: 16,
|
||||
r: 15,
|
||||
className: "carhop-fleche-lien-externe-full_svg__cls-1"
|
||||
fill: "none",
|
||||
stroke: "currentColor",
|
||||
strokeWidth: 2
|
||||
})));
|
||||
};
|
||||
|
||||
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iZmxlY2hlLWxpZW4tZXh0ZXJuZS1mdWxsIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiI+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5jbHMtMSB7CiAgICAgICAgZmlsbDogbm9uZTsKICAgICAgICBzdHJva2U6ICMwMDA7CiAgICAgICAgc3Ryb2tlLXdpZHRoOiAycHg7CiAgICAgIH0KICAgIDwvc3R5bGU+CiAgPC9kZWZzPgogIDxnPgogICAgPHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMjEuMTUsMTAuNTlsLTkuMzgsMTAuMDIiLz4KICAgIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTIxLjE1LDIxLjR2LTEwLjgxaC0xMC4zMiIvPgogIDwvZz4KICA8Y2lyY2xlIGNsYXNzPSJjbHMtMSIgY3g9IjE2IiBjeT0iMTYiIHI9IjE1Ii8+Cjwvc3ZnPg==");
|
||||
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiIgZm9jdXNhYmxlPSJmYWxzZSIgYXJpYS1oaWRkZW49InRydWUiPgoJPGcgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiI+CgkJPHBhdGggZD0iTTIxLjE1LDEwLjU5bC05LjM4LDEwLjAyIi8+CgkJPHBhdGggZD0iTTIxLjE1LDIxLjR2LTEwLjgxaC0xMC4zMiIvPgoJPC9nPgoJPGNpcmNsZSBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBjeD0iMTYiIGN5PSIxNiIgcj0iMTUiLz4KPC9zdmc+Cg==");
|
||||
|
||||
/***/ }),
|
||||
|
||||
|
|
@ -229,37 +307,12 @@ __webpack_require__.r(__webpack_exports__);
|
|||
/* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/block-editor */ "@wordpress/block-editor");
|
||||
/* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_0__);
|
||||
/* harmony import */ var _img_carhop_fleche_lien_externe_full_svg__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./img/carhop-fleche-lien-externe-full.svg */ "./src/cta/img/carhop-fleche-lien-externe-full.svg");
|
||||
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
|
||||
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__);
|
||||
|
||||
|
||||
|
||||
function save({
|
||||
attributes
|
||||
}) {
|
||||
const {
|
||||
align,
|
||||
link,
|
||||
text,
|
||||
color
|
||||
} = attributes;
|
||||
return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.Fragment, {})
|
||||
// <a
|
||||
// href={link?.url}
|
||||
// {...useBlockProps.save({
|
||||
// className: `align--${align}`,
|
||||
// style: {
|
||||
// color: color,
|
||||
// "--cta-current-color": color,
|
||||
// },
|
||||
// })}
|
||||
// >
|
||||
// {text}
|
||||
// <div className="icon">
|
||||
// <ArrowIcon style={{ "--cta-current-color": color }} />
|
||||
// </div>
|
||||
// </a>
|
||||
;
|
||||
return;
|
||||
}
|
||||
|
||||
/***/ }),
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -5,6 +5,10 @@ $text = isset($attributes['text']) ? $attributes['text'] : '';
|
|||
$color = isset($attributes['color']) ? $attributes['color'] : '';
|
||||
$target = isset($link) && $link['opensInNewTab'] ? '_blank' : '_self';
|
||||
|
||||
$raw_url = isset($link['url']) ? $link['url'] : '';
|
||||
$is_inner_page_link = is_string($raw_url) && strpos($raw_url, '#') === 0;
|
||||
|
||||
|
||||
$styles = [];
|
||||
if ($color) {
|
||||
$styles[] = 'color: ' . esc_attr($color);
|
||||
|
|
@ -12,7 +16,7 @@ if ($color) {
|
|||
}
|
||||
|
||||
$wrapper_attributes = get_block_wrapper_attributes([
|
||||
'class' => 'align--' . esc_attr($align),
|
||||
'class' => 'align--' . esc_attr($align) . ($is_inner_page_link ? ' cta--inner-page-link' : ' cta--external-page-link'),
|
||||
'style' => implode('; ', $styles)
|
||||
]);
|
||||
|
||||
|
|
@ -21,4 +25,38 @@ $link_url = isset($link['url']) ? esc_url($link['url']) : '#';
|
|||
|
||||
<a href="<?php echo $link_url; ?>" <?php echo $wrapper_attributes; ?> target="<?php echo $target; ?>">
|
||||
<?php echo esc_html($text); ?>
|
||||
<?php if ($is_inner_page_link) : ?>
|
||||
<svg id="arrow-internal-link" class="cta-icon" width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_2159_20039)">
|
||||
<path d="M14.5469 20.4253L14.5469 10.5" stroke="#136F63" stroke-width="2" />
|
||||
<path d="M8.53276 14.1263L14.5536 20.4253L20.5684 14.1263" stroke="#136F63" stroke-width="2" />
|
||||
</g>
|
||||
<circle cx="15" cy="15" r="14" transform="rotate(90 15 15)" stroke="#136F63" stroke-width="2" />
|
||||
<defs>
|
||||
<clipPath id="clip0_2159_20039">
|
||||
<rect width="10.8" height="12.9" fill="white" transform="translate(21 10.5) rotate(90)" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
|
||||
<?php else : ?>
|
||||
<svg id="arrow-external-link" class="cta-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1 {
|
||||
fill: none;
|
||||
stroke: <?php echo esc_attr($color); ?>;
|
||||
stroke-width: 2px;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<circle class="cls-1" cx="16" cy="16" r="15" />
|
||||
<g>
|
||||
<path class="cls-1" d="M21.15,10.59l-9.38,10.02" />
|
||||
<path class="cls-1" d="M21.15,21.4v-10.81h-10.32" />
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
<?php endif; ?>
|
||||
</a>
|
||||
|
|
@ -1,8 +1,10 @@
|
|||
<?php
|
||||
|
||||
$initialPostDisplayAmount = 10;
|
||||
|
||||
$args = array(
|
||||
'post_type' => 'dbmob',
|
||||
'posts_per_page' => -1,
|
||||
'posts_per_page' => $initialPostDisplayAmount,
|
||||
);
|
||||
$query = new WP_Query($args);
|
||||
$post_count = $query->found_posts;
|
||||
|
|
@ -10,7 +12,7 @@ $post_count = $query->found_posts;
|
|||
<section <?php echo get_block_wrapper_attributes(); ?>>
|
||||
<h2>Les notices rédigées par le CARHOP</h2>
|
||||
|
||||
<div class="notice-toolbar">
|
||||
<div class="notices-toolbar" data-post-type="dbmob">
|
||||
<h2 class="post-count">
|
||||
<span class="post-count__count">
|
||||
<?php echo $post_count; ?>
|
||||
|
|
@ -20,14 +22,18 @@ $post_count = $query->found_posts;
|
|||
</span>
|
||||
</h2>
|
||||
|
||||
<select class="sort_by" name="sort_by" id="sort_by">
|
||||
<option value="date_desc" selected><?php _e('Voir les dernières notices en premier', 'carhop-blocks'); ?></option>
|
||||
<option value="date_asc"><?php _e('Voir les plus anciennes notices en premier', 'carhop-blocks'); ?></option>
|
||||
</select>
|
||||
|
||||
|
||||
<div class="search-bar">
|
||||
|
||||
<label for="search-input"><?php _e('Rechercher une notice par nom', 'carhop-blocks'); ?></label>
|
||||
<input type="text" placeholder="<?php _e('Rechercher par nom', 'carhop-blocks'); ?>">
|
||||
|
||||
<input type="text" placeholder="<?php _e('Rechercher par nom', 'carhop-blocks'); ?>" name="search">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<?php if ($query->have_posts()) : ?>
|
||||
<div class="dbmob-grid">
|
||||
<?php while ($query->have_posts()) : $query->the_post(); ?>
|
||||
|
|
@ -40,10 +46,16 @@ $post_count = $query->found_posts;
|
|||
'external_link' => $maitron_url,
|
||||
'external_link_text' => 'Voir la notice',
|
||||
)); ?>
|
||||
|
||||
<?php endwhile; ?>
|
||||
</ul>
|
||||
<?php endif; ?>
|
||||
<?php wp_reset_postdata(); ?>
|
||||
</div>
|
||||
|
||||
<?php if ($post_count > $initialPostDisplayAmount) : ?>
|
||||
<button class="load-more-button" data-offset="0" data-posts-per-page="-1">Afficher plus</button>
|
||||
<?php endif; ?>
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
<?php return array('dependencies' => array(), 'version' => '402a8fd622dd4bbb3e35');
|
||||
<?php return array('dependencies' => array(), 'version' => '9561c72bdfe7bbd52265');
|
||||
|
|
|
|||
|
|
@ -2,6 +2,86 @@
|
|||
/*!************************************!*\
|
||||
!*** ./src/dbmob-archives/view.js ***!
|
||||
\************************************/
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const block = document.querySelector(".wp-block-carhop-blocks-dbmob-archives");
|
||||
if (!block) return;
|
||||
const toolbar = block.querySelector(".notices-toolbar");
|
||||
if (!toolbar) return;
|
||||
const searchInput = toolbar.querySelector("input[name='search']");
|
||||
const sortBySelect = toolbar.querySelector("select[name='sort_by']");
|
||||
const loadMoreButton = block.querySelector(".load-more-button");
|
||||
|
||||
// Évite les courses: annule les requêtes précédentes et ignore les réponses obsolètes
|
||||
let currentAbortController = null;
|
||||
let lastRequestId = 0;
|
||||
function updatePostCount(count) {
|
||||
const el = block.querySelector(".post-count__count");
|
||||
if (el != null && count != null) {
|
||||
el.textContent = String(count);
|
||||
}
|
||||
}
|
||||
|
||||
// Debounce simple pour la recherche
|
||||
function debounce(fn, waitMs) {
|
||||
let timeoutId;
|
||||
return (...args) => {
|
||||
if (timeoutId) window.clearTimeout(timeoutId);
|
||||
timeoutId = window.setTimeout(() => fn(...args), waitMs);
|
||||
};
|
||||
}
|
||||
async function hydratePosts() {
|
||||
var _searchInput$value, _sortBySelect$value;
|
||||
const searchValue = (_searchInput$value = searchInput?.value) !== null && _searchInput$value !== void 0 ? _searchInput$value : "";
|
||||
const offset = 0;
|
||||
const postsPerPage = -1;
|
||||
const sortBy = (_sortBySelect$value = sortBySelect?.value) !== null && _sortBySelect$value !== void 0 ? _sortBySelect$value : "date_desc";
|
||||
const params = new URLSearchParams({
|
||||
sort_by: sortBy,
|
||||
recherche: searchValue,
|
||||
post_type: "dbmob",
|
||||
offset: String(offset),
|
||||
posts_per_page: String(postsPerPage)
|
||||
});
|
||||
const url = `/wp-json/carhop-datas/v1/build/posts?${params.toString()}`;
|
||||
if (currentAbortController) currentAbortController.abort();
|
||||
currentAbortController = new AbortController();
|
||||
const requestId = ++lastRequestId;
|
||||
try {
|
||||
const response = await fetch(url, {
|
||||
signal: currentAbortController.signal
|
||||
});
|
||||
if (!response.ok) throw new Error(`HTTP ${response.status}`);
|
||||
const data = await response.json();
|
||||
if (requestId !== lastRequestId) return;
|
||||
const articlesContainer = block.querySelector(".dbmob-grid");
|
||||
if (!articlesContainer) return;
|
||||
articlesContainer.innerHTML = data.html_template;
|
||||
updatePostCount(data.post_count);
|
||||
} catch (error) {
|
||||
if (error?.name === "AbortError") return;
|
||||
console.error("Erreur lors de la récupération des articles:", error);
|
||||
}
|
||||
}
|
||||
const hydratePostsDebounced = debounce(hydratePosts, 150);
|
||||
if (sortBySelect) {
|
||||
sortBySelect.addEventListener("change", value => {
|
||||
const sortByValue = value.target.value;
|
||||
hydratePosts(sortByValue);
|
||||
});
|
||||
}
|
||||
if (searchInput) {
|
||||
searchInput.addEventListener("input", () => {
|
||||
hydratePostsDebounced();
|
||||
});
|
||||
}
|
||||
if (loadMoreButton) {
|
||||
loadMoreButton.addEventListener("click", () => {
|
||||
const offset = loadMoreButton.dataset.offset;
|
||||
const postsPerPage = loadMoreButton.dataset.postsPerPage;
|
||||
hydratePosts(postsPerPage);
|
||||
});
|
||||
}
|
||||
});
|
||||
/******/ })()
|
||||
;
|
||||
//# sourceMappingURL=view.js.map
|
||||
1
plugins/carhop-blocks/build/dbmob-archives/view.js.map
Normal file
1
plugins/carhop-blocks/build/dbmob-archives/view.js.map
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -64,7 +64,7 @@ $featured_items = \array_slice($featured_items, 0, $limit);
|
|||
|
||||
|
||||
?>
|
||||
<section class="featured-news alignfull" <?php echo get_block_wrapper_attributes(); ?>>
|
||||
<section class="featured-news alignfull has-background" <?php echo get_block_wrapper_attributes(); ?>>
|
||||
<div class="featured-news__inner">
|
||||
|
||||
<div class="featured-news__header">
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-i18n'), 'version' => 'ce820c62032b1c2239d6');
|
||||
<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-i18n'), 'version' => 'bbda0ab9a635b61b04f3');
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@ function Edit() {
|
|||
template: [["core/paragraph", {
|
||||
placeholder: "Ajouter ici le texte"
|
||||
}]],
|
||||
allowedBlocks: ["core/paragraph", "core/list", "core/button", "core/buttons", "core/heading", "carhop-blocks/cta", "carhop-blocks/heading"]
|
||||
allowedBlocks: ["core/paragraph", "core/list", "core/button", "core/buttons", "core/heading", "carhop-blocks/cta-group", "carhop-blocks/cta", "carhop-blocks/heading", "carhop-blocks/decorative-shapes"]
|
||||
})
|
||||
})
|
||||
});
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1 +1 @@
|
|||
<?php return array('dependencies' => array('react', 'react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-i18n'), 'version' => '06b28d02530a4fded8fe');
|
||||
<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-i18n'), 'version' => '7ce3ac49451a0aa713b0');
|
||||
|
|
|
|||
|
|
@ -29,11 +29,8 @@ __webpack_require__.r(__webpack_exports__);
|
|||
/* harmony import */ var _editor_scss__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./editor.scss */ "./src/highlight-timeline-step/editor.scss");
|
||||
/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @wordpress/components */ "@wordpress/components");
|
||||
/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_wordpress_components__WEBPACK_IMPORTED_MODULE_3__);
|
||||
/* harmony import */ var _timelineYearBackground__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./timelineYearBackground */ "./src/highlight-timeline-step/timelineYearBackground.jsx");
|
||||
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
|
||||
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__);
|
||||
|
||||
|
||||
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
|
||||
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__);
|
||||
|
||||
|
||||
|
||||
|
|
@ -48,11 +45,11 @@ function Edit({
|
|||
const {
|
||||
year
|
||||
} = attributes;
|
||||
return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.Fragment, {
|
||||
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.InspectorControls, {
|
||||
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_3__.PanelBody, {
|
||||
return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.Fragment, {
|
||||
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.InspectorControls, {
|
||||
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_3__.PanelBody, {
|
||||
title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_0__.__)("Étape de timeline", "carhop-blocks"),
|
||||
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_3__.__experimentalNumberControl, {
|
||||
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_3__.__experimentalNumberControl, {
|
||||
label: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_0__.__)("Année", "carhop-blocks"),
|
||||
value: year,
|
||||
onChange: value => {
|
||||
|
|
@ -63,20 +60,20 @@ function Edit({
|
|||
}
|
||||
})
|
||||
})
|
||||
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)("div", {
|
||||
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)("div", {
|
||||
...(0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useBlockProps)({
|
||||
className: `highlight-timeline-step`,
|
||||
id: `year-${year}`
|
||||
}),
|
||||
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)("div", {
|
||||
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("div", {
|
||||
className: "highlight-timeline-step__year",
|
||||
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("p", {
|
||||
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("p", {
|
||||
className: "highlight-timeline-step__year-text",
|
||||
children: year
|
||||
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_timelineYearBackground__WEBPACK_IMPORTED_MODULE_4__["default"], {})]
|
||||
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("div", {
|
||||
})
|
||||
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("div", {
|
||||
className: "highlight-timeline-step__innerblocks",
|
||||
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.InnerBlocks, {
|
||||
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.InnerBlocks, {
|
||||
allowedBlocks: ["core/heading", "core/paragraph", "core/group", "core/list", "core/button", "core/image", "core/buttons", "core/columns", "core/post-title", "core/embed", "core/quote", "core/pullquote", "core/media-text", "core/table", "carhop-blocks/image-stack", "carhop-blocks/heading", "carhop-blocks/decorative-shapes", "carhop-blocks/scroll-highlight-block", "carhop-blocks/cta-group", "carhop-blocks/audio-player", "carhop-blocks/localisation-map", "carhop-blocks/notice-panel", "acf/statistics-datas", "ninja-forms/form", "gravityforms/form", "dynamiques-blocks/sitemap", "mailpoet/subscription-form-block", "shortcode"]
|
||||
})
|
||||
})]
|
||||
|
|
@ -155,10 +152,8 @@ __webpack_require__.r(__webpack_exports__);
|
|||
/* harmony export */ });
|
||||
/* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/block-editor */ "@wordpress/block-editor");
|
||||
/* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_0__);
|
||||
/* harmony import */ var _timelineYearBackground__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./timelineYearBackground */ "./src/highlight-timeline-step/timelineYearBackground.jsx");
|
||||
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
|
||||
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__);
|
||||
|
||||
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
|
||||
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__);
|
||||
|
||||
|
||||
function save({
|
||||
|
|
@ -167,20 +162,20 @@ function save({
|
|||
const {
|
||||
year
|
||||
} = attributes;
|
||||
return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)("div", {
|
||||
return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)("div", {
|
||||
..._wordpress_block_editor__WEBPACK_IMPORTED_MODULE_0__.useBlockProps.save({
|
||||
className: `highlight-timeline-step swiper-slide`,
|
||||
id: `year-${year}`
|
||||
}),
|
||||
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)("div", {
|
||||
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("div", {
|
||||
className: "highlight-timeline-step__year",
|
||||
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("p", {
|
||||
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("p", {
|
||||
className: "highlight-timeline-step__year-text",
|
||||
children: year
|
||||
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_timelineYearBackground__WEBPACK_IMPORTED_MODULE_1__["default"], {})]
|
||||
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("div", {
|
||||
})
|
||||
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("div", {
|
||||
className: "highlight-timeline-step__innerblocks",
|
||||
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_0__.InnerBlocks.Content, {})
|
||||
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_0__.InnerBlocks.Content, {})
|
||||
})]
|
||||
});
|
||||
}
|
||||
|
|
@ -197,42 +192,6 @@ __webpack_require__.r(__webpack_exports__);
|
|||
// extracted by mini-css-extract-plugin
|
||||
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ "./src/highlight-timeline-step/timelineYearBackground.jsx":
|
||||
/*!****************************************************************!*\
|
||||
!*** ./src/highlight-timeline-step/timelineYearBackground.jsx ***!
|
||||
\****************************************************************/
|
||||
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
||||
|
||||
__webpack_require__.r(__webpack_exports__);
|
||||
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
|
||||
/* harmony export */ "default": () => (/* binding */ ShapeA)
|
||||
/* harmony export */ });
|
||||
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
|
||||
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
|
||||
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
|
||||
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__);
|
||||
|
||||
|
||||
function ShapeA({}) {
|
||||
return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("div", {
|
||||
className: "highlight-timeline-step__year-background",
|
||||
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("svg", {
|
||||
xmlns: "http://www.w3.org/2000/svg",
|
||||
width: "772.1",
|
||||
height: "653.3",
|
||||
viewBox: "0 0 772.1 653.3",
|
||||
preserveAspectRatio: "none",
|
||||
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("polygon", {
|
||||
preserveAspectRatio: "none",
|
||||
points: "14.2 10.6 762.1 53.5 757.9 642.7 10.1 599.8 14.2 10.6",
|
||||
vectorEffect: "non-scaling-stroke"
|
||||
})
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ "@wordpress/block-editor":
|
||||
|
|
@ -275,16 +234,6 @@ module.exports = window["wp"]["i18n"];
|
|||
|
||||
/***/ }),
|
||||
|
||||
/***/ "react":
|
||||
/*!************************!*\
|
||||
!*** external "React" ***!
|
||||
\************************/
|
||||
/***/ ((module) => {
|
||||
|
||||
module.exports = window["React"];
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ "react/jsx-runtime":
|
||||
/*!**********************************!*\
|
||||
!*** external "ReactJSXRuntime" ***!
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1 +1 @@
|
|||
<?php return array('dependencies' => array(), 'version' => 'c298fc5fc604ace72a5f');
|
||||
<?php return array('dependencies' => array(), 'version' => '054f6a88679bf2c2681c');
|
||||
|
|
|
|||
|
|
@ -2,26 +2,29 @@
|
|||
/*!****************************************!*\
|
||||
!*** ./src/scroll-story-block/view.js ***!
|
||||
\****************************************/
|
||||
const cards = gsap.utils.toArray(".scroll-story-block .narrative-card");
|
||||
|
||||
// Ajouter des classes alternées pour le styling
|
||||
cards.forEach((card, index) => {
|
||||
const MOBILE_BREAKPOINT = 768;
|
||||
let scrollTriggers = [];
|
||||
let stickDistance = 0;
|
||||
function getBlocks() {
|
||||
return gsap.utils.toArray(".scroll-story-block");
|
||||
}
|
||||
function getBlockCards(block) {
|
||||
return gsap.utils.toArray(block.querySelectorAll(".narrative-card"));
|
||||
}
|
||||
function applyEvenOddClasses() {
|
||||
getBlocks().forEach(block => {
|
||||
getBlockCards(block).forEach((card, index) => {
|
||||
card.classList.remove("narrative-card--even", "narrative-card--odd");
|
||||
if (index % 2 === 0) {
|
||||
card.classList.add("narrative-card--even");
|
||||
} else {
|
||||
card.classList.add("narrative-card--odd");
|
||||
}
|
||||
});
|
||||
|
||||
// Définir le breakpoint pour mobile/desktop (vous pouvez l'ajuster selon vos besoins)
|
||||
const MOBILE_BREAKPOINT = 768;
|
||||
let scrollTriggers = [];
|
||||
let stickDistance = 0;
|
||||
|
||||
// Fonction pour initialiser les ScrollTriggers (desktop)
|
||||
function initScrollTriggers() {
|
||||
// Nettoyer d'abord les ScrollTriggers existants
|
||||
killScrollTriggers();
|
||||
});
|
||||
});
|
||||
}
|
||||
function initScrollTriggersForBlock(block) {
|
||||
const cards = getBlockCards(block);
|
||||
if (cards.length === 0) return;
|
||||
let firstCardST = ScrollTrigger.create({
|
||||
trigger: cards[0],
|
||||
|
|
@ -36,16 +39,18 @@ function initScrollTriggers() {
|
|||
cards.forEach((card, index) => {
|
||||
var scale = 1 - (cards.length - index) * 0.025;
|
||||
let scaleDown = gsap.to(card, {
|
||||
scale: scale,
|
||||
"transform-origin": '"50% ' + (lastCardST.start + stickDistance) + '"'
|
||||
scale: scale
|
||||
// transformOrigin: "50% " + (lastCardST.start + stickDistance),
|
||||
// transformOrigin: "center top",
|
||||
});
|
||||
let cardST = ScrollTrigger.create({
|
||||
trigger: card,
|
||||
start: "top 10%",
|
||||
end: () => lastCardST.start + stickDistance,
|
||||
pin: true,
|
||||
// markers: true,
|
||||
markers: true,
|
||||
pinSpacing: false,
|
||||
// pinSpacing: true,
|
||||
ease: "none",
|
||||
animation: scaleDown,
|
||||
toggleActions: "restart none none reverse"
|
||||
|
|
@ -53,38 +58,41 @@ function initScrollTriggers() {
|
|||
scrollTriggers.push(cardST);
|
||||
});
|
||||
}
|
||||
|
||||
// Fonction pour détruire tous les ScrollTriggers
|
||||
function initScrollTriggers() {
|
||||
killScrollTriggers();
|
||||
getBlocks().forEach(block => {
|
||||
initScrollTriggersForBlock(block);
|
||||
});
|
||||
ScrollTrigger.refresh();
|
||||
}
|
||||
function killScrollTriggers() {
|
||||
scrollTriggers.forEach(st => st.kill());
|
||||
scrollTriggers = [];
|
||||
|
||||
// Réinitialiser les styles inline des cartes
|
||||
cards.forEach(card => {
|
||||
gsap.utils.toArray(".scroll-story-block .narrative-card").forEach(card => {
|
||||
gsap.set(card, {
|
||||
clearProps: "all"
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Fonction pour gérer le responsive
|
||||
function handleResize() {
|
||||
const isMobile = window.innerWidth < MOBILE_BREAKPOINT;
|
||||
if (isMobile) {
|
||||
// Sur mobile : détruire les ScrollTriggers
|
||||
killScrollTriggers();
|
||||
} else {
|
||||
// Sur desktop : créer les ScrollTriggers s'ils n'existent pas
|
||||
if (scrollTriggers.length === 0) {
|
||||
initScrollTriggers();
|
||||
} else {
|
||||
ScrollTrigger.refresh();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Initialisation au chargement
|
||||
applyEvenOddClasses();
|
||||
handleResize();
|
||||
|
||||
// Écouter les événements de resize avec debounce pour optimiser les performances
|
||||
window.addEventListener("load", () => {
|
||||
if (window.innerWidth >= MOBILE_BREAKPOINT && scrollTriggers.length > 0) {
|
||||
ScrollTrigger.refresh();
|
||||
}
|
||||
});
|
||||
let resizeTimer;
|
||||
window.addEventListener("resize", () => {
|
||||
clearTimeout(resizeTimer);
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,14 +1,4 @@
|
|||
/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
|
||||
!*** css ./node_modules/.pnpm/css-loader@6.11.0_webpack@5.103.0/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/.pnpm/postcss-loader@6.2.1_postcss@8.5.6_webpack@5.103.0/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/.pnpm/sass-loader@16.0.6_sass@1.94.1_webpack@5.103.0/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/subscribe-infolettre/style.scss ***!
|
||||
\*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
|
||||
/**
|
||||
* 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-subscribe-infolettre {
|
||||
background-color: #21759b;
|
||||
color: #fff;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,16 +1,4 @@
|
|||
/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
|
||||
!*** css ./node_modules/.pnpm/css-loader@6.11.0_webpack@5.103.0/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/.pnpm/postcss-loader@6.2.1_postcss@8.5.6_webpack@5.103.0/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/.pnpm/sass-loader@16.0.6_sass@1.94.1_webpack@5.103.0/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/subscribe-infolettre/style.scss ***!
|
||||
\*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
|
||||
/**
|
||||
* 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-subscribe-infolettre {
|
||||
background-color: #21759b;
|
||||
color: #fff;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=style-index.css.map*/
|
||||
|
|
@ -1 +0,0 @@
|
|||
{"version":3,"file":"subscribe-infolettre/style-index.css","mappings":";;;AAAA;;;;;EAAA;AAOA;EACC;EACA;EACA;AAAD,C","sources":["webpack://carhop-blocks/./src/subscribe-infolettre/style.scss"],"sourcesContent":["/**\n * The following styles get applied both on the front of your site\n * and in the editor.\n *\n * Replace them with your own styles or remove the file completely.\n */\n\n.wp-block-create-block-subscribe-infolettre {\n\tbackground-color: #21759b;\n\tcolor: #fff;\n\tpadding: 2px;\n}\n"],"names":[],"ignoreList":[],"sourceRoot":""}
|
||||
|
|
@ -1 +1 @@
|
|||
<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-element', 'wp-hooks', 'wp-i18n'), 'version' => '68b168a627a6aa2a24d6');
|
||||
<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-element', 'wp-hooks', 'wp-i18n'), 'version' => '9351ef08403e5d3a4db5');
|
||||
|
|
|
|||
|
|
@ -347,6 +347,20 @@ __webpack_require__.r(__webpack_exports__);
|
|||
|
||||
/***/ }),
|
||||
|
||||
/***/ "./src/core-variants/core-pullquote/editor.js":
|
||||
/*!****************************************************!*\
|
||||
!*** ./src/core-variants/core-pullquote/editor.js ***!
|
||||
\****************************************************/
|
||||
/***/ (() => {
|
||||
|
||||
wp.blocks.registerBlockStyle("core/pullquote", {
|
||||
name: "testimony",
|
||||
label: "Témoignage",
|
||||
isDefault: false
|
||||
});
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ "./src/core-variants/variants.scss":
|
||||
/*!*****************************************!*\
|
||||
!*** ./src/core-variants/variants.scss ***!
|
||||
|
|
@ -534,7 +548,10 @@ __webpack_require__.r(__webpack_exports__);
|
|||
/* harmony import */ var _core_buttons_editor_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./core-buttons/editor.js */ "./src/core-variants/core-buttons/editor.js");
|
||||
/* harmony import */ var _core_buttons_editor_js__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_core_buttons_editor_js__WEBPACK_IMPORTED_MODULE_4__);
|
||||
/* harmony import */ var _core_columns_editor_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./core-columns/editor.js */ "./src/core-variants/core-columns/editor.js");
|
||||
/* harmony import */ var _variants_scss__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./variants.scss */ "./src/core-variants/variants.scss");
|
||||
/* harmony import */ var _core_pullquote_editor_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./core-pullquote/editor.js */ "./src/core-variants/core-pullquote/editor.js");
|
||||
/* harmony import */ var _core_pullquote_editor_js__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_core_pullquote_editor_js__WEBPACK_IMPORTED_MODULE_6__);
|
||||
/* harmony import */ var _variants_scss__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./variants.scss */ "./src/core-variants/variants.scss");
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
4
plugins/carhop-blocks/img/carhop-fleche-ancre-page.svg
Normal file
4
plugins/carhop-blocks/img/carhop-fleche-ancre-page.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" focusable="false" aria-hidden="true">
|
||||
<circle fill="none" stroke="currentColor" stroke-width="2" cx="16" cy="16" r="15"/>
|
||||
<path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M16 9v11M11 17l5 6 5-6"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 328 B |
|
|
@ -0,0 +1,17 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="fleche-lien-externe-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1 {
|
||||
fill: none;
|
||||
stroke: #136F63;
|
||||
stroke-width: 2px;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<circle class="cls-1" cx="16" cy="16" r="15"/>
|
||||
<g>
|
||||
<path class="cls-1" d="M21.15,10.59l-9.38,10.02"/>
|
||||
<path class="cls-1" d="M21.15,21.4v-10.81h-10.32"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 448 B |
|
|
@ -0,0 +1,7 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" focusable="false" aria-hidden="true">
|
||||
<g fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M21.15,10.59l-9.38,10.02"/>
|
||||
<path d="M21.15,21.4v-10.81h-10.32"/>
|
||||
</g>
|
||||
<circle fill="none" stroke="currentColor" stroke-width="2" cx="16" cy="16" r="15"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 338 B |
|
|
@ -35,7 +35,6 @@ export default function Edit({ attributes, setAttributes, ...props }) {
|
|||
coverId,
|
||||
coverSize,
|
||||
backgroundColor,
|
||||
|
||||
blockWidth,
|
||||
textColor,
|
||||
shapeType,
|
||||
|
|
|
|||
|
|
@ -1,3 +1,16 @@
|
|||
.wp-block-carhop-blocks-chapter-section {
|
||||
margin: 2rem calc(50% - 50vw);
|
||||
}
|
||||
|
||||
.chapter-section--bg-light {
|
||||
--cta-current-color: var(--wp--preset--color--carhop-green, inherit);
|
||||
|
||||
.wp-block-carhop-blocks-cta {
|
||||
--cta-current-color: var(--wp--preset--color--carhop-green, inherit);
|
||||
svg,
|
||||
path,
|
||||
circle {
|
||||
stroke: var(--wp--preset--color--carhop-green, inherit);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -30,10 +30,12 @@ export default function save({ attributes }) {
|
|||
${
|
||||
hasLightBackground
|
||||
? "chapter-section--bg-light"
|
||||
: " "
|
||||
: "chapter-section--bg-dark"
|
||||
}`,
|
||||
style: {
|
||||
"--chapter-section-text-color": textColor ? textColor : "#136f63",
|
||||
"--chapter-section-text-color": textColor
|
||||
? textColor
|
||||
: "var(--advised-text-color)",
|
||||
"--cta-current-color":
|
||||
blockVariant === "backgrounded"
|
||||
? "inherit"
|
||||
|
|
|
|||
|
|
@ -44,7 +44,13 @@
|
|||
},
|
||||
"blockVariant": {
|
||||
"type": "string",
|
||||
"default": "framed"
|
||||
"default": "backgrounded",
|
||||
"enum": [
|
||||
"nude",
|
||||
"framed",
|
||||
"framed-backgrounded",
|
||||
"backgrounded"
|
||||
]
|
||||
},
|
||||
"shapeType": {
|
||||
"type": "string",
|
||||
|
|
|
|||
95
plugins/carhop-blocks/src/content-box/deprecated-save.js
Normal file
95
plugins/carhop-blocks/src/content-box/deprecated-save.js
Normal file
|
|
@ -0,0 +1,95 @@
|
|||
import { useBlockProps, InnerBlocks } from "@wordpress/block-editor";
|
||||
import ShapeA from "./shapeA.jsx";
|
||||
import ShapeB from "./shapeB.jsx";
|
||||
import ShapeC from "./shapeC.jsx";
|
||||
|
||||
/**
|
||||
* Ancien save (blockWidth) — conservé pour la migration des blocs.
|
||||
*/
|
||||
export default function deprecatedSave({ attributes }) {
|
||||
const {
|
||||
backgroundColor,
|
||||
textColor,
|
||||
hasLightBackground,
|
||||
blockVariant,
|
||||
blockWidth,
|
||||
shapeType,
|
||||
borderColor,
|
||||
} = attributes;
|
||||
|
||||
const blockWidthClass =
|
||||
blockWidth === "contained"
|
||||
? "aligncontained"
|
||||
: blockWidth === "wide"
|
||||
? "alignwide"
|
||||
: "alignfull";
|
||||
|
||||
const lightnessClass = hasLightBackground
|
||||
? "content-box--bg-light"
|
||||
: "content-box--bg-dark";
|
||||
|
||||
return (
|
||||
<section
|
||||
{...useBlockProps.save({
|
||||
className: `content-box content-box--variant-${blockVariant} content-box--${shapeType} ${lightnessClass} ${blockWidthClass}`,
|
||||
style: {
|
||||
"--content-box-text-color": textColor ?? "inherit",
|
||||
"--content-box-background-color":
|
||||
blockVariant === "backgrounded" ||
|
||||
blockVariant === "framed-backgrounded"
|
||||
? backgroundColor
|
||||
: "transparent",
|
||||
},
|
||||
})}
|
||||
>
|
||||
{blockVariant === "backgrounded" &&
|
||||
backgroundColor &&
|
||||
shapeType === "shapeA" && (
|
||||
<ShapeA backgroundColor={backgroundColor} borderColor={"none"} />
|
||||
)}
|
||||
{blockVariant === "backgrounded" &&
|
||||
backgroundColor &&
|
||||
shapeType === "shapeB" && (
|
||||
<ShapeB backgroundColor={backgroundColor} borderColor={"none"} />
|
||||
)}
|
||||
{blockVariant === "backgrounded" &&
|
||||
backgroundColor &&
|
||||
shapeType === "shapeC" && (
|
||||
<ShapeC backgroundColor={backgroundColor} borderColor={"none"} />
|
||||
)}
|
||||
{blockVariant === "framed" &&
|
||||
backgroundColor &&
|
||||
shapeType === "shapeA" && (
|
||||
<ShapeA backgroundColor={"none"} borderColor={borderColor} />
|
||||
)}
|
||||
{blockVariant === "framed" &&
|
||||
backgroundColor &&
|
||||
shapeType === "shapeB" && (
|
||||
<ShapeB backgroundColor={"none"} borderColor={borderColor} />
|
||||
)}
|
||||
{blockVariant === "framed" &&
|
||||
backgroundColor &&
|
||||
shapeType === "shapeC" && (
|
||||
<ShapeC backgroundColor={"none"} borderColor={borderColor} />
|
||||
)}
|
||||
{blockVariant === "framed-backgrounded" &&
|
||||
backgroundColor &&
|
||||
shapeType === "shapeA" && (
|
||||
<ShapeA backgroundColor={backgroundColor} borderColor={borderColor} />
|
||||
)}
|
||||
{blockVariant === "framed-backgrounded" &&
|
||||
backgroundColor &&
|
||||
shapeType === "shapeB" && (
|
||||
<ShapeB backgroundColor={backgroundColor} borderColor={borderColor} />
|
||||
)}
|
||||
{blockVariant === "framed-backgrounded" &&
|
||||
backgroundColor &&
|
||||
shapeType === "shapeC" && (
|
||||
<ShapeC backgroundColor={backgroundColor} borderColor={borderColor} />
|
||||
)}
|
||||
<div className="content-box__innerblocks">
|
||||
<InnerBlocks.Content />
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
|
@ -37,11 +37,11 @@ export default function Edit({ attributes, setAttributes, ...props }) {
|
|||
|
||||
const {
|
||||
hasBackgroundColor,
|
||||
align,
|
||||
backgroundColor,
|
||||
textColor,
|
||||
hasLightBackground,
|
||||
blockVariant,
|
||||
blockWidth,
|
||||
shapeType,
|
||||
borderColor,
|
||||
} = attributes;
|
||||
|
|
@ -91,8 +91,14 @@ export default function Edit({ attributes, setAttributes, ...props }) {
|
|||
}
|
||||
}
|
||||
|
||||
console.log(shapeType);
|
||||
console.log(blockVariant);
|
||||
const alignClass =
|
||||
align === "full"
|
||||
? "alignfull"
|
||||
: align === "wide"
|
||||
? "alignwide"
|
||||
: "aligncontained";
|
||||
|
||||
console.log(align);
|
||||
return (
|
||||
<>
|
||||
<InspectorControls>
|
||||
|
|
@ -118,20 +124,19 @@ export default function Edit({ attributes, setAttributes, ...props }) {
|
|||
</ToggleGroupControl>
|
||||
<ToggleGroupControl
|
||||
label="Largeur du bloc"
|
||||
value={blockWidth}
|
||||
onChange={(value) => setAttributes({ blockWidth: value })}
|
||||
value={align}
|
||||
onChange={(value) => setAttributes({ align: value })}
|
||||
isBlock
|
||||
__nextHasNoMarginBottom
|
||||
__next40pxDefaultSize
|
||||
>
|
||||
<ToggleGroupControlOption value="contained" label="Contenue" />
|
||||
<ToggleGroupControlOption value="" label="Contenue" />
|
||||
<ToggleGroupControlOption value="wide" label="Large" />
|
||||
<ToggleGroupControlOption value="full" label="Pleine largeur" />
|
||||
</ToggleGroupControl>
|
||||
</PanelBody>
|
||||
|
||||
{(blockVariant === "backgrounded" ||
|
||||
blockVariant === "framed-backgrounded") && (
|
||||
{blockVariant !== "nude" && (
|
||||
<PanelBody
|
||||
className="deligraph-blocks-components-image__panel-body"
|
||||
title={__("Arrière plan", "deligraph-blocks")}
|
||||
|
|
@ -210,8 +215,7 @@ export default function Edit({ attributes, setAttributes, ...props }) {
|
|||
hasLightBackground
|
||||
? "content-box--bg-light"
|
||||
: "content-box--bg-dark"
|
||||
}
|
||||
${blockWidth === "contained" ? "aligncontained" : blockWidth === "wide" ? "alignwide" : "alignfull"}`,
|
||||
} ${alignClass}`,
|
||||
style: {
|
||||
"--content-box-text-color": textColor ?? "inherit",
|
||||
"--content-box-background-color":
|
||||
|
|
@ -252,6 +256,30 @@ export default function Edit({ attributes, setAttributes, ...props }) {
|
|||
shapeType === "shapeC" && (
|
||||
<ShapeC backgroundColor={"none"} borderColor={borderColor} />
|
||||
)}
|
||||
{blockVariant === "framed-backgrounded" &&
|
||||
backgroundColor &&
|
||||
shapeType === "shapeA" && (
|
||||
<ShapeA
|
||||
backgroundColor={backgroundColor}
|
||||
borderColor={borderColor}
|
||||
/>
|
||||
)}
|
||||
{blockVariant === "framed-backgrounded" &&
|
||||
backgroundColor &&
|
||||
shapeType === "shapeB" && (
|
||||
<ShapeB
|
||||
backgroundColor={backgroundColor}
|
||||
borderColor={borderColor}
|
||||
/>
|
||||
)}
|
||||
{blockVariant === "framed-backgrounded" &&
|
||||
backgroundColor &&
|
||||
shapeType === "shapeC" && (
|
||||
<ShapeC
|
||||
backgroundColor={backgroundColor}
|
||||
borderColor={borderColor}
|
||||
/>
|
||||
)}
|
||||
<div className="content-box__innerblocks">
|
||||
<InnerBlocks
|
||||
template={[
|
||||
|
|
|
|||
|
|
@ -1,5 +1,24 @@
|
|||
.content-box {
|
||||
padding-left: 2.5rem !important;
|
||||
padding-right: 2.5rem !important;
|
||||
|
||||
a {
|
||||
color: var(--content-box-text-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.editor-styles-wrapper .deligraph-blocks-chapter-section {
|
||||
padding-left: 2.5rem !important;
|
||||
padding-right: 2.5rem !important;
|
||||
}
|
||||
|
||||
.content-box {
|
||||
.wp-block-columns {
|
||||
margin-top: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
.block-editor-block-list__layout > .wp-block-columns {
|
||||
margin-top: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,18 +9,26 @@ export default function save({ attributes }) {
|
|||
hasLightBackground,
|
||||
hasBackgroundColor,
|
||||
blockVariant,
|
||||
blockWidth,
|
||||
align,
|
||||
shapeType,
|
||||
borderColor,
|
||||
} = attributes;
|
||||
|
||||
const lightnessClass = hasLightBackground
|
||||
? "content-box--bg-light"
|
||||
: "content-box--bg-dark";
|
||||
|
||||
const alignClass =
|
||||
align === "full"
|
||||
? "alignfull"
|
||||
: align === "wide"
|
||||
? "alignwide"
|
||||
: "aligncontained";
|
||||
|
||||
return (
|
||||
<section
|
||||
{...useBlockProps.save({
|
||||
className: `content-box content-box--variant-${blockVariant} content-box--${shapeType} ${
|
||||
hasLightBackground ? "content-box--bg-light" : "content-box--bg-dark"
|
||||
}
|
||||
${blockWidth === "contained" ? "aligncontained" : blockWidth === "wide" ? "alignwide" : "alignfull"}`,
|
||||
className: `content-box content-box--variant-${blockVariant} content-box--${shapeType} ${lightnessClass} ${alignClass}`,
|
||||
style: {
|
||||
"--content-box-text-color": textColor ?? "inherit",
|
||||
"--content-box-background-color":
|
||||
|
|
@ -61,6 +69,21 @@ export default function save({ attributes }) {
|
|||
shapeType === "shapeC" && (
|
||||
<ShapeC backgroundColor={"none"} borderColor={borderColor} />
|
||||
)}
|
||||
{blockVariant === "framed-backgrounded" &&
|
||||
backgroundColor &&
|
||||
shapeType === "shapeA" && (
|
||||
<ShapeA backgroundColor={backgroundColor} borderColor={borderColor} />
|
||||
)}
|
||||
{blockVariant === "framed-backgrounded" &&
|
||||
backgroundColor &&
|
||||
shapeType === "shapeB" && (
|
||||
<ShapeB backgroundColor={backgroundColor} borderColor={borderColor} />
|
||||
)}
|
||||
{blockVariant === "framed-backgrounded" &&
|
||||
backgroundColor &&
|
||||
shapeType === "shapeC" && (
|
||||
<ShapeC backgroundColor={backgroundColor} borderColor={borderColor} />
|
||||
)}
|
||||
<div className="content-box__innerblocks">
|
||||
<InnerBlocks.Content />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
wp.blocks.registerBlockStyle("core/pullquote", {
|
||||
name: "testimony",
|
||||
label: "Témoignage",
|
||||
isDefault: false,
|
||||
});
|
||||
|
|
@ -4,5 +4,5 @@ import "./core-embed-variant/editor.js";
|
|||
import "./core-list-variant/editor.js";
|
||||
import "./core-buttons/editor.js";
|
||||
import "./core-columns/editor.js";
|
||||
|
||||
import "./core-pullquote/editor.js";
|
||||
import "./variants.scss";
|
||||
|
|
|
|||
|
|
@ -4,6 +4,15 @@
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 2rem;
|
||||
row-gap: 1rem;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
row-gap: 1.5rem;
|
||||
}
|
||||
|
||||
.wp-block-carhop-blocks-cta {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
&--align-left {
|
||||
justify-content: flex-start;
|
||||
|
|
|
|||
|
|
@ -12,15 +12,33 @@ import { BlockControls, AlignmentToolbar } from "@wordpress/block-editor";
|
|||
import { ColorPalette, PanelRow } from "@wordpress/components";
|
||||
import { Tip } from "@wordpress/components";
|
||||
import { ReactComponent as ArrowIcon } from "./img/carhop-fleche-lien-externe-full.svg";
|
||||
import { ReactComponent as AnchorIcon } from "./img/carhop-fleche-ancre-page.svg";
|
||||
|
||||
export default function Edit({ attributes, setAttributes }) {
|
||||
const { color, link } = attributes;
|
||||
const colors = useSetting("color.palette.theme");
|
||||
const isHashLink = typeof link?.url === "string" && link.url.startsWith("#");
|
||||
|
||||
function handleColorChange(value) {
|
||||
setAttributes({ color: value });
|
||||
}
|
||||
|
||||
console.log(attributes);
|
||||
console.log(link);
|
||||
|
||||
function handleLinkChange(newLink) {
|
||||
if (!newLink) {
|
||||
setAttributes({ link: undefined });
|
||||
return;
|
||||
}
|
||||
|
||||
if (newLink.url) {
|
||||
newLink.title = newLink.url;
|
||||
}
|
||||
|
||||
console.log(newLink);
|
||||
setAttributes({ link: newLink });
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<BlockControls>
|
||||
|
|
@ -33,9 +51,15 @@ export default function Edit({ attributes, setAttributes }) {
|
|||
<PanelBody title="Lien" initialOpen={true}>
|
||||
<div>
|
||||
<LinkControl
|
||||
key="link-control"
|
||||
value={attributes.link}
|
||||
onChange={(value) => {
|
||||
setAttributes({ link: value });
|
||||
label="Lien"
|
||||
onSelect={(value) => {
|
||||
console.log("onSelect");
|
||||
console.log(value);
|
||||
}}
|
||||
onChange={(newlink) => {
|
||||
handleLinkChange(newlink);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -56,7 +80,9 @@ export default function Edit({ attributes, setAttributes }) {
|
|||
</InspectorControls>
|
||||
<div
|
||||
{...useBlockProps({
|
||||
className: `cta align--${attributes.align}`,
|
||||
className: `cta align--${attributes.align}${
|
||||
isHashLink ? " cta--hash-link" : ""
|
||||
}`,
|
||||
style: {
|
||||
"--cta-current-color": color,
|
||||
},
|
||||
|
|
@ -69,9 +95,12 @@ export default function Edit({ attributes, setAttributes }) {
|
|||
onChange={(text) => setAttributes({ text })}
|
||||
allowedFormats={[]}
|
||||
/>
|
||||
{/* <div className="icon">
|
||||
<ArrowIcon style={{ "--cta-current-color": color }} />
|
||||
</div> */}
|
||||
|
||||
{isHashLink ? (
|
||||
<AnchorIcon style={{ color }} />
|
||||
) : (
|
||||
<ArrowIcon style={{ color }} />
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,14 +1,15 @@
|
|||
.wp-block-carhop-blocks-cta {
|
||||
color: var(--cta-current-color);
|
||||
// color: var(--cta-current-color);
|
||||
a {
|
||||
color: var(--cta-current-color) !important;
|
||||
// color: var(--cta-current-color) !important;
|
||||
|
||||
&:after{}
|
||||
padding-bottom: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
padding: 2px;
|
||||
display: block;
|
||||
|
||||
width: fit-content;
|
||||
display: flex;
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
line-height: normal;
|
||||
|
|
@ -20,7 +21,8 @@
|
|||
}
|
||||
svg path,
|
||||
svg circle {
|
||||
stroke: var(--cta-current-color);
|
||||
stroke: currentColor;
|
||||
// stroke: var(--cta-current-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" focusable="false" aria-hidden="true">
|
||||
<circle fill="none" stroke="currentColor" stroke-width="2" cx="16" cy="16" r="15"/>
|
||||
<path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M16 9v11M11 17l5 6 5-6"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 328 B |
|
|
@ -1,17 +1,7 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="fleche-lien-externe-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1 {
|
||||
fill: none;
|
||||
stroke: #000;
|
||||
stroke-width: 2px;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<g>
|
||||
<path class="cls-1" d="M21.15,10.59l-9.38,10.02"/>
|
||||
<path class="cls-1" d="M21.15,21.4v-10.81h-10.32"/>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" focusable="false" aria-hidden="true">
|
||||
<g fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M21.15,10.59l-9.38,10.02"/>
|
||||
<path d="M21.15,21.4v-10.81h-10.32"/>
|
||||
</g>
|
||||
<circle class="cls-1" cx="16" cy="16" r="15"/>
|
||||
<circle fill="none" stroke="currentColor" stroke-width="2" cx="16" cy="16" r="15"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 445 B After Width: | Height: | Size: 331 B |
|
|
@ -5,6 +5,10 @@ $text = isset($attributes['text']) ? $attributes['text'] : '';
|
|||
$color = isset($attributes['color']) ? $attributes['color'] : '';
|
||||
$target = isset($link) && $link['opensInNewTab'] ? '_blank' : '_self';
|
||||
|
||||
$raw_url = isset($link['url']) ? $link['url'] : '';
|
||||
$is_inner_page_link = is_string($raw_url) && strpos($raw_url, '#') === 0;
|
||||
|
||||
|
||||
$styles = [];
|
||||
if ($color) {
|
||||
$styles[] = 'color: ' . esc_attr($color);
|
||||
|
|
@ -12,7 +16,7 @@ if ($color) {
|
|||
}
|
||||
|
||||
$wrapper_attributes = get_block_wrapper_attributes([
|
||||
'class' => 'align--' . esc_attr($align),
|
||||
'class' => 'align--' . esc_attr($align) . ($is_inner_page_link ? ' cta--inner-page-link' : ' cta--external-page-link'),
|
||||
'style' => implode('; ', $styles)
|
||||
]);
|
||||
|
||||
|
|
@ -21,4 +25,38 @@ $link_url = isset($link['url']) ? esc_url($link['url']) : '#';
|
|||
|
||||
<a href="<?php echo $link_url; ?>" <?php echo $wrapper_attributes; ?> target="<?php echo $target; ?>">
|
||||
<?php echo esc_html($text); ?>
|
||||
<?php if ($is_inner_page_link) : ?>
|
||||
<svg id="arrow-internal-link" class="cta-icon" width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_2159_20039)">
|
||||
<path d="M14.5469 20.4253L14.5469 10.5" stroke="#136F63" stroke-width="2" />
|
||||
<path d="M8.53276 14.1263L14.5536 20.4253L20.5684 14.1263" stroke="#136F63" stroke-width="2" />
|
||||
</g>
|
||||
<circle cx="15" cy="15" r="14" transform="rotate(90 15 15)" stroke="#136F63" stroke-width="2" />
|
||||
<defs>
|
||||
<clipPath id="clip0_2159_20039">
|
||||
<rect width="10.8" height="12.9" fill="white" transform="translate(21 10.5) rotate(90)" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
|
||||
<?php else : ?>
|
||||
<svg id="arrow-external-link" class="cta-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1 {
|
||||
fill: none;
|
||||
stroke: <?php echo esc_attr($color); ?>;
|
||||
stroke-width: 2px;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<circle class="cls-1" cx="16" cy="16" r="15" />
|
||||
<g>
|
||||
<path class="cls-1" d="M21.15,10.59l-9.38,10.02" />
|
||||
<path class="cls-1" d="M21.15,21.4v-10.81h-10.32" />
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
<?php endif; ?>
|
||||
</a>
|
||||
|
|
@ -2,23 +2,5 @@ import { useBlockProps } from "@wordpress/block-editor";
|
|||
import { ReactComponent as ArrowIcon } from "./img/carhop-fleche-lien-externe-full.svg";
|
||||
|
||||
export default function save({ attributes }) {
|
||||
const { align, link, text, color } = attributes;
|
||||
return (
|
||||
<></>
|
||||
// <a
|
||||
// href={link?.url}
|
||||
// {...useBlockProps.save({
|
||||
// className: `align--${align}`,
|
||||
// style: {
|
||||
// color: color,
|
||||
// "--cta-current-color": color,
|
||||
// },
|
||||
// })}
|
||||
// >
|
||||
// {text}
|
||||
// <div className="icon">
|
||||
// <ArrowIcon style={{ "--cta-current-color": color }} />
|
||||
// </div>
|
||||
// </a>
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,10 @@
|
|||
<?php
|
||||
|
||||
$initialPostDisplayAmount = 10;
|
||||
|
||||
$args = array(
|
||||
'post_type' => 'dbmob',
|
||||
'posts_per_page' => -1,
|
||||
'posts_per_page' => $initialPostDisplayAmount,
|
||||
);
|
||||
$query = new WP_Query($args);
|
||||
$post_count = $query->found_posts;
|
||||
|
|
@ -10,7 +12,7 @@ $post_count = $query->found_posts;
|
|||
<section <?php echo get_block_wrapper_attributes(); ?>>
|
||||
<h2>Les notices rédigées par le CARHOP</h2>
|
||||
|
||||
<div class="notice-toolbar">
|
||||
<div class="notices-toolbar" data-post-type="dbmob">
|
||||
<h2 class="post-count">
|
||||
<span class="post-count__count">
|
||||
<?php echo $post_count; ?>
|
||||
|
|
@ -20,14 +22,18 @@ $post_count = $query->found_posts;
|
|||
</span>
|
||||
</h2>
|
||||
|
||||
<select class="sort_by" name="sort_by" id="sort_by">
|
||||
<option value="date_desc" selected><?php _e('Voir les dernières notices en premier', 'carhop-blocks'); ?></option>
|
||||
<option value="date_asc"><?php _e('Voir les plus anciennes notices en premier', 'carhop-blocks'); ?></option>
|
||||
</select>
|
||||
|
||||
|
||||
<div class="search-bar">
|
||||
|
||||
<label for="search-input"><?php _e('Rechercher une notice par nom', 'carhop-blocks'); ?></label>
|
||||
<input type="text" placeholder="<?php _e('Rechercher par nom', 'carhop-blocks'); ?>">
|
||||
|
||||
<input type="text" placeholder="<?php _e('Rechercher par nom', 'carhop-blocks'); ?>" name="search">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<?php if ($query->have_posts()) : ?>
|
||||
<div class="dbmob-grid">
|
||||
<?php while ($query->have_posts()) : $query->the_post(); ?>
|
||||
|
|
@ -40,10 +46,16 @@ $post_count = $query->found_posts;
|
|||
'external_link' => $maitron_url,
|
||||
'external_link_text' => 'Voir la notice',
|
||||
)); ?>
|
||||
|
||||
<?php endwhile; ?>
|
||||
</ul>
|
||||
<?php endif; ?>
|
||||
<?php wp_reset_postdata(); ?>
|
||||
</div>
|
||||
|
||||
<?php if ($post_count > $initialPostDisplayAmount) : ?>
|
||||
<button class="load-more-button" data-offset="0" data-posts-per-page="-1">Afficher plus</button>
|
||||
<?php endif; ?>
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,94 @@
|
|||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const block = document.querySelector(
|
||||
".wp-block-carhop-blocks-dbmob-archives",
|
||||
);
|
||||
if (!block) return;
|
||||
|
||||
const toolbar = block.querySelector(".notices-toolbar");
|
||||
if (!toolbar) return;
|
||||
|
||||
const searchInput = toolbar.querySelector("input[name='search']");
|
||||
const sortBySelect = toolbar.querySelector("select[name='sort_by']");
|
||||
const loadMoreButton = block.querySelector(".load-more-button");
|
||||
|
||||
// Évite les courses: annule les requêtes précédentes et ignore les réponses obsolètes
|
||||
let currentAbortController = null;
|
||||
let lastRequestId = 0;
|
||||
|
||||
function updatePostCount(count) {
|
||||
const el = block.querySelector(".post-count__count");
|
||||
if (el != null && count != null) {
|
||||
el.textContent = String(count);
|
||||
}
|
||||
}
|
||||
|
||||
// Debounce simple pour la recherche
|
||||
function debounce(fn, waitMs) {
|
||||
let timeoutId;
|
||||
return (...args) => {
|
||||
if (timeoutId) window.clearTimeout(timeoutId);
|
||||
timeoutId = window.setTimeout(() => fn(...args), waitMs);
|
||||
};
|
||||
}
|
||||
|
||||
async function hydratePosts() {
|
||||
const searchValue = searchInput?.value ?? "";
|
||||
const offset = 0;
|
||||
const postsPerPage = -1;
|
||||
const sortBy = sortBySelect?.value ?? "date_desc";
|
||||
|
||||
const params = new URLSearchParams({
|
||||
sort_by: sortBy,
|
||||
recherche: searchValue,
|
||||
post_type: "dbmob",
|
||||
offset: String(offset),
|
||||
posts_per_page: String(postsPerPage),
|
||||
});
|
||||
|
||||
const url = `/wp-json/carhop-datas/v1/build/posts?${params.toString()}`;
|
||||
|
||||
if (currentAbortController) currentAbortController.abort();
|
||||
currentAbortController = new AbortController();
|
||||
const requestId = ++lastRequestId;
|
||||
|
||||
try {
|
||||
const response = await fetch(url, {
|
||||
signal: currentAbortController.signal,
|
||||
});
|
||||
if (!response.ok) throw new Error(`HTTP ${response.status}`);
|
||||
const data = await response.json();
|
||||
|
||||
if (requestId !== lastRequestId) return;
|
||||
|
||||
const articlesContainer = block.querySelector(".dbmob-grid");
|
||||
if (!articlesContainer) return;
|
||||
articlesContainer.innerHTML = data.html_template;
|
||||
|
||||
updatePostCount(data.post_count);
|
||||
} catch (error) {
|
||||
if (error?.name === "AbortError") return;
|
||||
console.error("Erreur lors de la récupération des articles:", error);
|
||||
}
|
||||
}
|
||||
|
||||
const hydratePostsDebounced = debounce(hydratePosts, 150);
|
||||
|
||||
if (sortBySelect) {
|
||||
sortBySelect.addEventListener("change", (value) => {
|
||||
const sortByValue = value.target.value;
|
||||
hydratePosts(sortByValue);
|
||||
});
|
||||
}
|
||||
if (searchInput) {
|
||||
searchInput.addEventListener("input", () => {
|
||||
hydratePostsDebounced();
|
||||
});
|
||||
}
|
||||
if (loadMoreButton) {
|
||||
loadMoreButton.addEventListener("click", () => {
|
||||
const offset = loadMoreButton.dataset.offset;
|
||||
const postsPerPage = loadMoreButton.dataset.postsPerPage;
|
||||
hydratePosts(postsPerPage);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
@ -64,7 +64,7 @@ $featured_items = \array_slice($featured_items, 0, $limit);
|
|||
|
||||
|
||||
?>
|
||||
<section class="featured-news alignfull" <?php echo get_block_wrapper_attributes(); ?>>
|
||||
<section class="featured-news alignfull has-background" <?php echo get_block_wrapper_attributes(); ?>>
|
||||
<div class="featured-news__inner">
|
||||
|
||||
<div class="featured-news__header">
|
||||
|
|
|
|||
|
|
@ -20,8 +20,10 @@ export default function Edit() {
|
|||
"core/button",
|
||||
"core/buttons",
|
||||
"core/heading",
|
||||
"carhop-blocks/cta-group",
|
||||
"carhop-blocks/cta",
|
||||
"carhop-blocks/heading",
|
||||
"carhop-blocks/decorative-shapes",
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -12,8 +12,6 @@ import {
|
|||
} 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;
|
||||
|
||||
|
|
@ -39,7 +37,6 @@ export default function Edit({ attributes, setAttributes, ...props }) {
|
|||
>
|
||||
<div className="highlight-timeline-step__year">
|
||||
<p className="highlight-timeline-step__year-text">{year}</p>
|
||||
<TimelineYearBackground />
|
||||
</div>
|
||||
<div className="highlight-timeline-step__innerblocks">
|
||||
<InnerBlocks
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { useBlockProps, InnerBlocks } from "@wordpress/block-editor";
|
||||
import TimelineYearBackground from "./timelineYearBackground";
|
||||
|
||||
export default function save({ attributes }) {
|
||||
const { year } = attributes;
|
||||
return (
|
||||
|
|
@ -11,7 +11,6 @@ export default function save({ attributes }) {
|
|||
>
|
||||
<div className="highlight-timeline-step__year">
|
||||
<p className="highlight-timeline-step__year-text">{year}</p>
|
||||
<TimelineYearBackground />
|
||||
</div>
|
||||
<div className="highlight-timeline-step__innerblocks">
|
||||
<InnerBlocks.Content />
|
||||
|
|
|
|||
96
plugins/carhop-blocks/src/scroll-story-block/view-old.js
Normal file
96
plugins/carhop-blocks/src/scroll-story-block/view-old.js
Normal file
|
|
@ -0,0 +1,96 @@
|
|||
const cards = gsap.utils.toArray(".scroll-story-block .narrative-card");
|
||||
|
||||
// Ajouter des classes alternées pour le styling
|
||||
cards.forEach((card, index) => {
|
||||
if (index % 2 === 0) {
|
||||
card.classList.add("narrative-card--even");
|
||||
} else {
|
||||
card.classList.add("narrative-card--odd");
|
||||
}
|
||||
});
|
||||
|
||||
// Définir le breakpoint pour mobile/desktop (vous pouvez l'ajuster selon vos besoins)
|
||||
const MOBILE_BREAKPOINT = 768;
|
||||
|
||||
let scrollTriggers = [];
|
||||
let stickDistance = 0;
|
||||
|
||||
// Fonction pour initialiser les ScrollTriggers (desktop)
|
||||
function initScrollTriggers() {
|
||||
// Nettoyer d'abord les ScrollTriggers existants
|
||||
killScrollTriggers();
|
||||
|
||||
if (cards.length === 0) return;
|
||||
|
||||
let firstCardST = ScrollTrigger.create({
|
||||
trigger: cards[0],
|
||||
start: "top 10%",
|
||||
});
|
||||
scrollTriggers.push(firstCardST);
|
||||
|
||||
let lastCardST = ScrollTrigger.create({
|
||||
trigger: cards[cards.length - 1],
|
||||
start: "top 10%",
|
||||
});
|
||||
scrollTriggers.push(lastCardST);
|
||||
|
||||
cards.forEach((card, index) => {
|
||||
var scale = 1 - (cards.length - index) * 0.025;
|
||||
let scaleDown = gsap.to(card, {
|
||||
scale: scale,
|
||||
"transform-origin": '"50% ' + (lastCardST.start + stickDistance) + '"',
|
||||
});
|
||||
|
||||
let cardST = ScrollTrigger.create({
|
||||
trigger: card,
|
||||
start: "top 10%",
|
||||
end: () => lastCardST.start + stickDistance,
|
||||
pin: true,
|
||||
// markers: true,
|
||||
pinSpacing: false,
|
||||
ease: "none",
|
||||
animation: scaleDown,
|
||||
toggleActions: "restart none none reverse",
|
||||
});
|
||||
|
||||
scrollTriggers.push(cardST);
|
||||
});
|
||||
}
|
||||
|
||||
// Fonction pour détruire tous les ScrollTriggers
|
||||
function killScrollTriggers() {
|
||||
scrollTriggers.forEach((st) => st.kill());
|
||||
scrollTriggers = [];
|
||||
|
||||
// Réinitialiser les styles inline des cartes
|
||||
cards.forEach((card) => {
|
||||
gsap.set(card, { clearProps: "all" });
|
||||
});
|
||||
}
|
||||
|
||||
// Fonction pour gérer le responsive
|
||||
function handleResize() {
|
||||
const isMobile = window.innerWidth < MOBILE_BREAKPOINT;
|
||||
|
||||
if (isMobile) {
|
||||
// Sur mobile : détruire les ScrollTriggers
|
||||
killScrollTriggers();
|
||||
} else {
|
||||
// Sur desktop : créer les ScrollTriggers s'ils n'existent pas
|
||||
if (scrollTriggers.length === 0) {
|
||||
initScrollTriggers();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Initialisation au chargement
|
||||
handleResize();
|
||||
|
||||
// Écouter les événements de resize avec debounce pour optimiser les performances
|
||||
let resizeTimer;
|
||||
window.addEventListener("resize", () => {
|
||||
clearTimeout(resizeTimer);
|
||||
resizeTimer = setTimeout(() => {
|
||||
handleResize();
|
||||
}, 250);
|
||||
});
|
||||
|
|
@ -1,25 +1,31 @@
|
|||
const cards = gsap.utils.toArray(".scroll-story-block .narrative-card");
|
||||
|
||||
// Ajouter des classes alternées pour le styling
|
||||
cards.forEach((card, index) => {
|
||||
if (index % 2 === 0) {
|
||||
card.classList.add("narrative-card--even");
|
||||
} else {
|
||||
card.classList.add("narrative-card--odd");
|
||||
}
|
||||
});
|
||||
|
||||
// Définir le breakpoint pour mobile/desktop (vous pouvez l'ajuster selon vos besoins)
|
||||
const MOBILE_BREAKPOINT = 768;
|
||||
|
||||
let scrollTriggers = [];
|
||||
let stickDistance = 0;
|
||||
|
||||
// Fonction pour initialiser les ScrollTriggers (desktop)
|
||||
function initScrollTriggers() {
|
||||
// Nettoyer d'abord les ScrollTriggers existants
|
||||
killScrollTriggers();
|
||||
function getBlocks() {
|
||||
return gsap.utils.toArray(".scroll-story-block");
|
||||
}
|
||||
|
||||
function getBlockCards(block) {
|
||||
return gsap.utils.toArray(block.querySelectorAll(".narrative-card"));
|
||||
}
|
||||
|
||||
function applyEvenOddClasses() {
|
||||
getBlocks().forEach((block) => {
|
||||
getBlockCards(block).forEach((card, index) => {
|
||||
card.classList.remove("narrative-card--even", "narrative-card--odd");
|
||||
if (index % 2 === 0) {
|
||||
card.classList.add("narrative-card--even");
|
||||
} else {
|
||||
card.classList.add("narrative-card--odd");
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function initScrollTriggersForBlock(block) {
|
||||
const cards = getBlockCards(block);
|
||||
if (cards.length === 0) return;
|
||||
|
||||
let firstCardST = ScrollTrigger.create({
|
||||
|
|
@ -38,7 +44,8 @@ function initScrollTriggers() {
|
|||
var scale = 1 - (cards.length - index) * 0.025;
|
||||
let scaleDown = gsap.to(card, {
|
||||
scale: scale,
|
||||
"transform-origin": '"50% ' + (lastCardST.start + stickDistance) + '"',
|
||||
// transformOrigin: "50% " + (lastCardST.start + stickDistance),
|
||||
// transformOrigin: "center top",
|
||||
});
|
||||
|
||||
let cardST = ScrollTrigger.create({
|
||||
|
|
@ -46,8 +53,9 @@ function initScrollTriggers() {
|
|||
start: "top 10%",
|
||||
end: () => lastCardST.start + stickDistance,
|
||||
pin: true,
|
||||
// markers: true,
|
||||
markers: true,
|
||||
pinSpacing: false,
|
||||
// pinSpacing: true,
|
||||
ease: "none",
|
||||
animation: scaleDown,
|
||||
toggleActions: "restart none none reverse",
|
||||
|
|
@ -57,36 +65,48 @@ function initScrollTriggers() {
|
|||
});
|
||||
}
|
||||
|
||||
// Fonction pour détruire tous les ScrollTriggers
|
||||
function initScrollTriggers() {
|
||||
killScrollTriggers();
|
||||
|
||||
getBlocks().forEach((block) => {
|
||||
initScrollTriggersForBlock(block);
|
||||
});
|
||||
|
||||
ScrollTrigger.refresh();
|
||||
}
|
||||
|
||||
function killScrollTriggers() {
|
||||
scrollTriggers.forEach((st) => st.kill());
|
||||
scrollTriggers = [];
|
||||
|
||||
// Réinitialiser les styles inline des cartes
|
||||
cards.forEach((card) => {
|
||||
gsap.utils.toArray(".scroll-story-block .narrative-card").forEach((card) => {
|
||||
gsap.set(card, { clearProps: "all" });
|
||||
});
|
||||
}
|
||||
|
||||
// Fonction pour gérer le responsive
|
||||
function handleResize() {
|
||||
const isMobile = window.innerWidth < MOBILE_BREAKPOINT;
|
||||
|
||||
if (isMobile) {
|
||||
// Sur mobile : détruire les ScrollTriggers
|
||||
killScrollTriggers();
|
||||
} else {
|
||||
// Sur desktop : créer les ScrollTriggers s'ils n'existent pas
|
||||
if (scrollTriggers.length === 0) {
|
||||
initScrollTriggers();
|
||||
} else {
|
||||
ScrollTrigger.refresh();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Initialisation au chargement
|
||||
applyEvenOddClasses();
|
||||
handleResize();
|
||||
|
||||
// Écouter les événements de resize avec debounce pour optimiser les performances
|
||||
window.addEventListener("load", () => {
|
||||
if (window.innerWidth >= MOBILE_BREAKPOINT && scrollTriggers.length > 0) {
|
||||
ScrollTrigger.refresh();
|
||||
}
|
||||
});
|
||||
|
||||
let resizeTimer;
|
||||
window.addEventListener("resize", () => {
|
||||
clearTimeout(resizeTimer);
|
||||
|
|
|
|||
116
plugins/carhop-blocks/src/scroll-story-block/view_test-fix.js
Normal file
116
plugins/carhop-blocks/src/scroll-story-block/view_test-fix.js
Normal file
|
|
@ -0,0 +1,116 @@
|
|||
const MOBILE_BREAKPOINT = 768;
|
||||
|
||||
let scrollTriggers = [];
|
||||
let stickDistance = 0;
|
||||
|
||||
function getBlocks() {
|
||||
return gsap.utils.toArray(".scroll-story-block");
|
||||
}
|
||||
|
||||
function getBlockCards(block) {
|
||||
return gsap.utils.toArray(block.querySelectorAll(".narrative-card"));
|
||||
}
|
||||
|
||||
function applyEvenOddClasses() {
|
||||
getBlocks().forEach((block) => {
|
||||
getBlockCards(block).forEach((card, index) => {
|
||||
card.classList.remove("narrative-card--even", "narrative-card--odd");
|
||||
if (index % 2 === 0) {
|
||||
card.classList.add("narrative-card--even");
|
||||
} else {
|
||||
card.classList.add("narrative-card--odd");
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function initScrollTriggersForBlock(block) {
|
||||
const cards = getBlockCards(block);
|
||||
if (cards.length === 0) return;
|
||||
|
||||
let firstCardST = ScrollTrigger.create({
|
||||
trigger: cards[0],
|
||||
start: "top 10%",
|
||||
});
|
||||
scrollTriggers.push(firstCardST);
|
||||
|
||||
let lastCardST = ScrollTrigger.create({
|
||||
trigger: cards[cards.length - 1],
|
||||
start: "top 10%",
|
||||
});
|
||||
scrollTriggers.push(lastCardST);
|
||||
|
||||
cards.forEach((card, index) => {
|
||||
var scale = 1 - (cards.length - index) * 0.025;
|
||||
let scaleDown = gsap.to(card, {
|
||||
scale: scale,
|
||||
// transformOrigin: "50% " + (lastCardST.start + stickDistance),
|
||||
// transformOrigin: "center top",
|
||||
});
|
||||
|
||||
let cardST = ScrollTrigger.create({
|
||||
trigger: card,
|
||||
start: "top 10%",
|
||||
end: () => lastCardST.start + stickDistance,
|
||||
pin: true,
|
||||
markers: true,
|
||||
pinSpacing: false,
|
||||
// pinSpacing: true,
|
||||
ease: "none",
|
||||
animation: scaleDown,
|
||||
toggleActions: "restart none none reverse",
|
||||
});
|
||||
|
||||
scrollTriggers.push(cardST);
|
||||
});
|
||||
}
|
||||
|
||||
function initScrollTriggers() {
|
||||
killScrollTriggers();
|
||||
|
||||
getBlocks().forEach((block) => {
|
||||
initScrollTriggersForBlock(block);
|
||||
});
|
||||
|
||||
ScrollTrigger.refresh();
|
||||
}
|
||||
|
||||
function killScrollTriggers() {
|
||||
scrollTriggers.forEach((st) => st.kill());
|
||||
scrollTriggers = [];
|
||||
|
||||
gsap.utils.toArray(".scroll-story-block .narrative-card").forEach((card) => {
|
||||
gsap.set(card, { clearProps: "all" });
|
||||
});
|
||||
}
|
||||
|
||||
function handleResize() {
|
||||
const isMobile = window.innerWidth < MOBILE_BREAKPOINT;
|
||||
|
||||
if (isMobile) {
|
||||
killScrollTriggers();
|
||||
} else {
|
||||
if (scrollTriggers.length === 0) {
|
||||
initScrollTriggers();
|
||||
} else {
|
||||
ScrollTrigger.refresh();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
applyEvenOddClasses();
|
||||
handleResize();
|
||||
|
||||
window.addEventListener("load", () => {
|
||||
if (window.innerWidth >= MOBILE_BREAKPOINT && scrollTriggers.length > 0) {
|
||||
ScrollTrigger.refresh();
|
||||
}
|
||||
});
|
||||
|
||||
let resizeTimer;
|
||||
window.addEventListener("resize", () => {
|
||||
clearTimeout(resizeTimer);
|
||||
resizeTimer = setTimeout(() => {
|
||||
handleResize();
|
||||
}, 250);
|
||||
});
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
/**
|
||||
* 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-subscribe-infolettre {
|
||||
background-color: #21759b;
|
||||
color: #fff;
|
||||
padding: 2px;
|
||||
}
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
{
|
||||
"name": "acf/random-collection-image",
|
||||
"title": "Random Collection Image",
|
||||
"category": "Image aléatoire de collection",
|
||||
"multiple": false,
|
||||
"icon": {
|
||||
"foreground": "#136f63",
|
||||
"src": "groups"
|
||||
},
|
||||
"keywords": [
|
||||
"image",
|
||||
"aléatoire",
|
||||
"collection"
|
||||
],
|
||||
"supports": {
|
||||
"align": [
|
||||
"full",
|
||||
"wide"
|
||||
]
|
||||
},
|
||||
"acf": {
|
||||
"mode": "auto",
|
||||
"renderTemplate": "random-collection-image.php"
|
||||
},
|
||||
"align": [
|
||||
"wide"
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<?php
|
||||
$image_collection = get_field('image_collection');
|
||||
$random_image_index = rand(0, count($image_collection) - 1);
|
||||
$random_image = $image_collection[$random_image_index];
|
||||
|
||||
$random_image_ratio = $random_image['width'] / $random_image['height'];
|
||||
$random_image_ratio_class = '';
|
||||
$caption = $random_image['caption'];
|
||||
|
||||
|
||||
switch ($random_image_ratio) {
|
||||
case $random_image_ratio > 1.2:
|
||||
$random_image_ratio_class = 'random-collection-image--landscape';
|
||||
break;
|
||||
case $random_image_ratio < 0.8:
|
||||
$random_image_ratio_class = 'random-collection-image--portrait';
|
||||
break;
|
||||
default:
|
||||
$random_image_ratio_class = 'random-collection-image--square';
|
||||
break;
|
||||
}
|
||||
?>
|
||||
<figure class="random-collection-image-container prev-overlap-image">
|
||||
<img src="<?php echo $random_image['url']; ?>" alt="<?php echo $random_image['alt']; ?>" class="random-collection-image prev-overlap-image <?php echo $random_image_ratio_class; ?>" width="<?php echo $random_image['width']; ?>" height="<?php echo $random_image['height']; ?>">
|
||||
<?php if ($caption) : ?>
|
||||
<figcaption class="random-collection-image-caption">
|
||||
<?php echo $caption; ?>
|
||||
</figcaption>
|
||||
<?php endif; ?>
|
||||
</figure>
|
||||
|
|
@ -29,7 +29,7 @@ function create_block_dynamiques_blocks_block_init()
|
|||
register_block_type(__DIR__ . '/acf-blocks/team-authors');
|
||||
register_block_type(__DIR__ . '/acf-blocks/team-dynamiques');
|
||||
register_block_type(__DIR__ . '/acf-blocks/statistics-datas');
|
||||
|
||||
register_block_type(__DIR__ . '/acf-blocks/random-collection-image');
|
||||
|
||||
if (function_exists('wp_register_block_metadata_collection')) {
|
||||
wp_register_block_metadata_collection(__DIR__ . '/build', __DIR__ . '/build/blocks-manifest.php');
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user