Antoine/homegrade_blocks_production
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refining focused and focus point operating behaviour

Browse Source
This commit is contained in:
Antoine M 2023-10-12 12:02:52 +02:00
parent ee1a135b42
commit 00b9b57f70
27 changed files with 328 additions and 282 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
blocks/focused-schema/build/focus-point/index.asset.php
View File

@ -1 +1 @@
<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n'), 'version' => '22279f01bc9b3f5d72ab'); <?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n'), 'version' => '1319ed32fb73ad4846fc');

19
blocks/focused-schema/build/focus-point/index.css
View File

@ -1,23 +1,4 @@
/*!****************************************************************************************************************************************************************************************************************************************************!*\ /*!****************************************************************************************************************************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/focus-point/editor.scss ***! !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/focus-point/editor.scss ***!
\****************************************************************************************************************************************************************************************************************************************************/ \****************************************************************************************************************************************************************************************************************************************************/
/**
* The following styles get applied inside the editor only.
*
* Replace them with your own styles or remove the file completely.
*/
.homegrade-blocks-focus-point {
position: absolute !important;
}
.homegrade-blocks-focus-point-caption {
position: relative !important;
}
.components-panel__body .homegrade-blocks-focus-point-bullet {
position: static !important;
margin-top: -16px;
margin-bottom: 10px;
}
/*# sourceMappingURL=index.css.map*/

1
blocks/focused-schema/build/focus-point/index.css.map
View File

@ -1 +0,0 @@
{"version":3,"file":"focus-point/index.css","mappings":";;;AAAA;;;;EAAA;AAKA;EACC;AACD;;AACA;EACC;AAED;;AAAA;EACC;EACA;EACA;AAGD,C","sources":["webpack://multiblocks/./src/focus-point/editor.scss"],"sourcesContent":["/**\n * The following styles get applied inside the editor only.\n *\n * Replace them with your own styles or remove the file completely.\n */\n.homegrade-blocks-focus-point {\n\tposition: absolute !important;\n}\n.homegrade-blocks-focus-point-caption {\n\tposition: relative !important;\n}\n.components-panel__body .homegrade-blocks-focus-point-bullet {\n\tposition: static !important;\n\tmargin-top: -16px;\n\tmargin-bottom: 10px;\n}\n"],"names":[],"sourceRoot":""}

2
blocks/focused-schema/build/focus-point/index.js.map
View File

File diff suppressed because one or more lines are too long

1
blocks/focused-schema/build/frontend.asset.php
View File

@ -1 +0,0 @@
<?php return array('dependencies' => array(), 'version' => '9da7747f701da4b60244');

32
blocks/focused-schema/build/frontend.js
View File

@ -1,32 +0,0 @@
/******/ (() => { // webpackBootstrap
var __webpack_exports__ = {};
/*!*************************!*\
!*** ./src/frontend.js ***!
\*************************/
window.addEventListener("DOMContentLoaded", event => {
alert("Hello from frontend.js");
const focusBulletPoints = document.querySelectorAll(".homegrade-blocks-focus-point-bullet");
focusBulletPoints.forEach(focusPoint => {
const focusPointsContainer = focusPoint.parentElement;
focusPoint.addEventListener("mouseover", event => {
const aleradyHoveredFocusPoint = document.querySelector("[data-hovered]");
console.log(aleradyHoveredFocusPoint);
const focusTitle = focusPoint.getAttribute("data-focus-bullet-title");
const focusPointPopupContainer = document.createElement("div");
focusPointPopupContainer.className = "focus-point-popup-container";
const focusPointPopupTitle = document.createElement("h4");
focusPointPopupTitle.textContent = focusTitle;
focusPointPopupTitle.className = "focus-point-popup-container__title";
focusPointPopupContainer.appendChild(focusPointPopupTitle);
focusPoint.appendChild(focusPointPopupContainer);
focusPoint.setAttribute("data-hovered", "");
});
focusPoint.addEventListener("mouseout", function () {
const focusPointPopupContainer = focusPoint.querySelector(".focus-point-popup-container");
focusPointPopupContainer.remove();
});
});
});
/******/ })()
;
//# sourceMappingURL=frontend.js.map

1
blocks/focused-schema/build/frontend.js.map
View File

@ -1 +0,0 @@
{"version":3,"file":"frontend.js","mappings":";;;;;AAAAA,MAAM,CAACC,gBAAgB,CAAC,kBAAkB,EAAGC,KAAK,IAAK;EACtDC,KAAK,CAAC,wBAAwB,CAAC;EAC/B,MAAMC,iBAAiB,GAAGC,QAAQ,CAACC,gBAAgB,CAClD,sCACD,CAAC;EACDF,iBAAiB,CAACG,OAAO,CAAEC,UAAU,IAAK;IACzC,MAAMC,oBAAoB,GAAGD,UAAU,CAACE,aAAa;IAErDF,UAAU,CAACP,gBAAgB,CAAC,WAAW,EAAGC,KAAK,IAAK;MACnD,MAAMS,wBAAwB,GAAGN,QAAQ,CAACO,aAAa,CAAC,gBAAgB,CAAC;MACzEC,OAAO,CAACC,GAAG,CAACH,wBAAwB,CAAC;MAErC,MAAMI,UAAU,GAAGP,UAAU,CAACQ,YAAY,CAAC,yBAAyB,CAAC;MAErE,MAAMC,wBAAwB,GAAGZ,QAAQ,CAACa,aAAa,CAAC,KAAK,CAAC;MAC9DD,wBAAwB,CAACE,SAAS,GAAG,6BAA6B;MAElE,MAAMC,oBAAoB,GAAGf,QAAQ,CAACa,aAAa,CAAC,IAAI,CAAC;MACzDE,oBAAoB,CAACC,WAAW,GAAGN,UAAU;MAC7CK,oBAAoB,CAACD,SAAS,GAAG,oCAAoC;MAErEF,wBAAwB,CAACK,WAAW,CAACF,oBAAoB,CAAC;MAC1DZ,UAAU,CAACc,WAAW,CAACL,wBAAwB,CAAC;MAChDT,UAAU,CAACe,YAAY,CAAC,cAAc,EAAE,EAAE,CAAC;IAC5C,CAAC,CAAC;IAEFf,UAAU,CAACP,gBAAgB,CAAC,UAAU,EAAE,YAAY;MACnD,MAAMgB,wBAAwB,GAAGT,UAAU,CAACI,aAAa,CACxD,8BACD,CAAC;MACDK,wBAAwB,CAACO,MAAM,CAAC,CAAC;IAClC,CAAC,CAAC;EACH,CAAC,CAAC;AACH,CAAC,CAAC,C","sources":["webpack://multiblocks/./src/frontend.js"],"sourcesContent":["window.addEventListener(\"DOMContentLoaded\", (event) => {\r\n\talert(\"Hello from frontend.js\");\r\n\tconst focusBulletPoints = document.querySelectorAll(\r\n\t\t\".homegrade-blocks-focus-point-bullet\"\r\n\t);\r\n\tfocusBulletPoints.forEach((focusPoint) => {\r\n\t\tconst focusPointsContainer = focusPoint.parentElement;\r\n\r\n\t\tfocusPoint.addEventListener(\"mouseover\", (event) => {\r\n\t\t\tconst aleradyHoveredFocusPoint = document.querySelector(\"[data-hovered]\");\r\n\t\t\tconsole.log(aleradyHoveredFocusPoint);\r\n\r\n\t\t\tconst focusTitle = focusPoint.getAttribute(\"data-focus-bullet-title\");\r\n\r\n\t\t\tconst focusPointPopupContainer = document.createElement(\"div\");\r\n\t\t\tfocusPointPopupContainer.className = \"focus-point-popup-container\";\r\n\r\n\t\t\tconst focusPointPopupTitle = document.createElement(\"h4\");\r\n\t\t\tfocusPointPopupTitle.textContent = focusTitle;\r\n\t\t\tfocusPointPopupTitle.className = \"focus-point-popup-container__title\";\r\n\r\n\t\t\tfocusPointPopupContainer.appendChild(focusPointPopupTitle);\r\n\t\t\tfocusPoint.appendChild(focusPointPopupContainer);\r\n\t\t\tfocusPoint.setAttribute(\"data-hovered\", \"\");\r\n\t\t});\r\n\r\n\t\tfocusPoint.addEventListener(\"mouseout\", function () {\r\n\t\t\tconst focusPointPopupContainer = focusPoint.querySelector(\r\n\t\t\t\t\".focus-point-popup-container\"\r\n\t\t\t);\r\n\t\t\tfocusPointPopupContainer.remove();\r\n\t\t});\r\n\t});\r\n});\r\n"],"names":["window","addEventListener","event","alert","focusBulletPoints","document","querySelectorAll","forEach","focusPoint","focusPointsContainer","parentElement","aleradyHoveredFocusPoint","querySelector","console","log","focusTitle","getAttribute","focusPointPopupContainer","createElement","className","focusPointPopupTitle","textContent","appendChild","setAttribute","remove"],"sourceRoot":""}

2
blocks/focused-schema/build/index.asset.php
View File

@ -1 +1 @@
<?php return array('dependencies' => array('wp-blob', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n'), 'version' => '7ad45d7708e499298c9d'); <?php return array('dependencies' => array('wp-blob', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n'), 'version' => 'b356fc975525a09b1752');

13
blocks/focused-schema/build/index.css
View File

@ -20,14 +20,7 @@
.wpblock-cover-container.is-loading img { .wpblock-cover-container.is-loading img {
opacity: 10%; opacity: 10%;
} }
/*!****************************************************************************************************************************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/focus-point/editor.scss ***!
\****************************************************************************************************************************************************************************************************************************************************/
/**
* The following styles get applied inside the editor only.
*
* Replace them with your own styles or remove the file completely.
*/
.homegrade-blocks-focus-point { .homegrade-blocks-focus-point {
position: absolute !important; position: absolute !important;
} }
@ -41,5 +34,9 @@
margin-top: -16px; margin-top: -16px;
margin-bottom: 10px; margin-bottom: 10px;
} }
/*!****************************************************************************************************************************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/focus-point/editor.scss ***!
\****************************************************************************************************************************************************************************************************************************************************/
/*# sourceMappingURL=index.css.map*/ /*# sourceMappingURL=index.css.map*/

2
blocks/focused-schema/build/index.css.map
View File

@ -1 +1 @@
{"version":3,"file":"index.css","mappings":";;;AACC;;EAEC;AAAF;;AAIA;EACC;AADD;AAGE;EACC;EACA;EACA;EACA;EACA;EACA;AADH;AAGE;EACC;AADH,C;;;;AClBA;;;;EAAA;AAKA;EACC;AACD;;AACA;EACC;AAED;;AAAA;EACC;EACA;EACA;AAGD,C","sources":["webpack://multiblocks/./src/editor.scss","webpack://multiblocks/./src/focus-point/editor.scss"],"sourcesContent":[".homegrade-blocks-focused-schema {\n\t.block-editor-block-list__layout,\n\t.block-editor-block-list__block {\n\t\tposition: unset;\n\t}\n}\n\n.wpblock-cover-container {\n\tposition: relative;\n\t&.is-loading {\n\t\t.components-spinner {\n\t\t\tposition: absolute;\n\t\t\tleft: 50%;\n\t\t\tright: 50%;\n\t\t\tbottom: 0;\n\t\t\ttop: 0;\n\t\t\tmargin: auto;\n\t\t}\n\t\timg {\n\t\t\topacity: 10%;\n\t\t}\n\t}\n}\n","/**\n * The following styles get applied inside the editor only.\n *\n * Replace them with your own styles or remove the file completely.\n */\n.homegrade-blocks-focus-point {\n\tposition: absolute !important;\n}\n.homegrade-blocks-focus-point-caption {\n\tposition: relative !important;\n}\n.components-panel__body .homegrade-blocks-focus-point-bullet {\n\tposition: static !important;\n\tmargin-top: -16px;\n\tmargin-bottom: 10px;\n}\n"],"names":[],"sourceRoot":""} {"version":3,"file":"index.css","mappings":";;;AACC;;EAEC;AAAF;;AAIA;EACC;AADD;AAGE;EACC;EACA;EACA;EACA;EACA;EACA;AADH;AAGE;EACC;AADH;;AAMA;EACC;AAHD;;AAKA;EACC;AAFD;;AAIA;EACC;EACA;EACA;AADD,C","sources":["webpack://multiblocks/./src/editor.scss"],"sourcesContent":[".homegrade-blocks-focused-schema {\n\t.block-editor-block-list__layout,\n\t.block-editor-block-list__block {\n\t\tposition: unset;\n\t}\n}\n\n.wpblock-cover-container {\n\tposition: relative;\n\t&.is-loading {\n\t\t.components-spinner {\n\t\t\tposition: absolute;\n\t\t\tleft: 50%;\n\t\t\tright: 50%;\n\t\t\tbottom: 0;\n\t\t\ttop: 0;\n\t\t\tmargin: auto;\n\t\t}\n\t\timg {\n\t\t\topacity: 10%;\n\t\t}\n\t}\n}\n// POINT\n.homegrade-blocks-focus-point {\n\tposition: absolute !important;\n}\n.homegrade-blocks-focus-point-caption {\n\tposition: relative !important;\n}\n.components-panel__body .homegrade-blocks-focus-point-bullet {\n\tposition: static !important;\n\tmargin-top: -16px;\n\tmargin-bottom: 10px;\n}\n"],"names":[],"sourceRoot":""}

2
blocks/focused-schema/build/index.js.map
View File

File diff suppressed because one or more lines are too long

59
blocks/focused-schema/build/style-index.css
View File

@ -39,26 +39,17 @@
margin-right: 0.5em; margin-right: 0.5em;
font-weight: 700; font-weight: 700;
} }
/*!***************************************************************************************************************************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/focus-point/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.
*/
.homegrade-blocks-focus-point-bullet:hover {
scale: 1.2;
filter: brightness(1.2) hue-rotate(10deg);
}
.homegrade-blocks-focus-point-bullet__index { .homegrade-blocks-focus-point-bullet {
position: absolute !important;
border-radius: 50%; border-radius: 50%;
transition: scale 0.2s ease-in-out;
z-index: 10;
}
.homegrade-blocks-focus-point-bullet__index {
font-weight: 700; font-weight: 700;
width: 20px; width: 20px;
height: 20px; height: 20px;
position: absolute !important;
top: 0; top: 0;
left: 0; left: 0;
position: relative; position: relative;
@ -67,27 +58,28 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 16px; padding: 16px;
transition: scale 0.2s ease-in-out;
z-index: 1;
} }
.homegrade-blocks-focus-point-bullet__tooltip-container {
.focus-point-popup-container {
background-color: white; background-color: white;
opacity: 0.9999; opacity: 0.9999;
border-radius: 14px; border-radius: 14px;
padding: 10px; padding: 10px;
transform: translate(-34%, -110%);
position: absolute; position: absolute;
top: 0; top: -4px;
left: 0; left: 50%;
max-width: 400px; transform: translate(-50%, -100%);
width: -moz-max-content;
width: max-content;
min-width: 70px;
max-width: 420px;
text-align: center; text-align: center;
display: flex; display: none;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
z-index: 999;
} }
.focus-point-popup-container:after { .homegrade-blocks-focus-point-bullet__tooltip-container:after {
content: ""; content: "";
display: block; display: block;
background-color: white; background-color: white;
@ -98,15 +90,28 @@
height: 10px; height: 10px;
transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg);
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.04); box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.04);
z-index: 999;
} }
.focus-point-popup-container__title { .homegrade-blocks-focus-point-bullet__tooltip-container__title {
width: auto; width: auto;
min-width: 100px; min-width: 100px;
} }
.focus-point-title { .homegrade-blocks-focus-point-bullet:hover {
scale: 1.2;
filter: brightness(1.2) hue-rotate(10deg);
}
.homegrade-blocks-focus-point-bullet:hover .homegrade-blocks-focus-point-bullet__tooltip-container {
display: flex;
}
.tooltip-title {
font-weight: bold; font-weight: bold;
margin-right: 6px; margin-right: 6px;
} }
/*!***************************************************************************************************************************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/focus-point/style.scss ***!
\***************************************************************************************************************************************************************************************************************************************************/
/*# sourceMappingURL=style-index.css.map*/ /*# sourceMappingURL=style-index.css.map*/

2
blocks/focused-schema/build/style-index.css.map
View File

@ -1 +1 @@
{"version":3,"file":"./style-index.css","mappings":";;;AAAA;;;;;EAAA;AAQC;EACC;AADF;AAIE;EACC;EACA;AAFH;AAIG;EACC;EACA;EACA;EACA;AAFJ;AAIG;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAFJ,C;;;;ACrCA;;;;;EAAA;AAMA;EACC;EACA;AACD;;AAGC;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAAF;;AAIA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AADD;AAIC;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAFF;AAIC;EACC;EACA;AAFF;;AAMA;EACC;EACA;AAHD,C","sources":["webpack://multiblocks/./src/style.scss","webpack://multiblocks/./src/focus-point/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.homegrade-blocks-focused-schema {\n\tfigure {\n\t\tposition: relative;\n\t}\n\tfigcaption {\n\t\tol {\n\t\t\tpadding-top: 20px;\n\t\t\tcounter-reset: myOrderedListItemsCounter;\n\n\t\t\tli {\n\t\t\t\tlist-style-type: none;\n\t\t\t\tposition: relative;\n\t\t\t\tpadding: 8px;\n\t\t\t\tpadding-left: 50px;\n\t\t\t}\n\t\t\tli:before {\n\t\t\t\tcontent: \"\";\n\t\t\t\tleft: 0;\n\t\t\t\ttop: 0;\n\t\t\t\ttransform: translateY(3px);\n\t\t\t\tposition: absolute;\n\t\t\t\twidth: 30px;\n\t\t\t\theight: 30px;\n\t\t\t\tdisplay: flex;\n\t\t\t\tjustify-content: center;\n\t\t\t\talign-items: center;\n\t\t\t\tbackground-color: red;\n\t\t\t\tcolor: white;\n\t\t\t\tborder-radius: 50%;\n\t\t\t\tcounter-increment: myOrderedListItemsCounter;\n\t\t\t\tcontent: counter(myOrderedListItemsCounter);\n\t\t\t\tmargin-right: 0.5em;\n\t\t\t\tfont-weight: 700;\n\t\t\t}\n\t\t}\n\t}\n}\n","/**\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.homegrade-blocks-focus-point-bullet:hover {\n\tscale: 1.2;\n\tfilter: brightness(1.2) hue-rotate(10deg);\n}\n\n.homegrade-blocks-focus-point-bullet {\n\t&__index {\n\t\tborder-radius: 50%;\n\t\tfont-weight: 700;\n\t\twidth: 20px;\n\t\theight: 20px;\n\t\tposition: absolute !important;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\tposition: relative;\n\t\tcolor: white;\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tpadding: 16px;\n\t\ttransition: scale 0.2s ease-in-out;\n\t\tz-index: 1;\n\t\t// display: none;\n\t}\n}\n.focus-point-popup-container {\n\tbackground-color: white;\n\topacity: 0.9999;\n\tborder-radius: 14px;\n\tpadding: 10px;\n\ttransform: translate(-34%, -110%);\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n\tmax-width: 400px;\n\ttext-align: center;\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);\n\t// z-index: 99;\n\n\t&:after {\n\t\tcontent: \"\";\n\t\tdisplay: block;\n\t\tbackground-color: white;\n\t\tposition: absolute;\n\t\ttop: 100%;\n\t\tleft: 50%;\n\t\twidth: 10px;\n\t\theight: 10px;\n\t\ttransform: translate(-50%, -50%) rotate(45deg);\n\t\tbox-shadow: 4px 4px 4px rgba(0, 0, 0, 0.04);\n\t}\n\t&__title {\n\t\twidth: auto;\n\t\tmin-width: 100px;\n\t}\n}\n\n.focus-point-title {\n\tfont-weight: bold;\n\tmargin-right: 6px;\n}\n"],"names":[],"sourceRoot":""} {"version":3,"file":"./style-index.css","mappings":";;;AAAA;;;;;EAAA;AAQC;EACC;AADF;AAKE;EACC;EACA;AAHH;AAKG;EACC;EACA;EACA;EACA;AAHJ;AAKG;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAHJ;;AASA;EACC;EACA;EACA;EACA;AAND;AAOC;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AALF;AAQC;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AANF;AAQE;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AANH;AAQE;EACC;EACA;AANH;;AAUA;EACC;EACA;AAPD;AASC;EACC;AAPF;;AAaA;EACC;EACA;AAVD,C","sources":["webpack://multiblocks/./src/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.homegrade-blocks-focused-schema {\n\tfigure {\n\t\tposition: relative;\n\t}\n\n\tfigcaption {\n\t\tol {\n\t\t\tpadding-top: 20px;\n\t\t\tcounter-reset: myOrderedListItemsCounter;\n\n\t\t\tli {\n\t\t\t\tlist-style-type: none;\n\t\t\t\tposition: relative;\n\t\t\t\tpadding: 8px;\n\t\t\t\tpadding-left: 50px;\n\t\t\t}\n\t\t\tli:before {\n\t\t\t\tcontent: \"\";\n\t\t\t\tleft: 0;\n\t\t\t\ttop: 0;\n\t\t\t\ttransform: translateY(3px);\n\t\t\t\tposition: absolute;\n\t\t\t\twidth: 30px;\n\t\t\t\theight: 30px;\n\t\t\t\tdisplay: flex;\n\t\t\t\tjustify-content: center;\n\t\t\t\talign-items: center;\n\t\t\t\tbackground-color: red;\n\t\t\t\tcolor: white;\n\t\t\t\tborder-radius: 50%;\n\t\t\t\tcounter-increment: myOrderedListItemsCounter;\n\t\t\t\tcontent: counter(myOrderedListItemsCounter);\n\t\t\t\tmargin-right: 0.5em;\n\t\t\t\tfont-weight: 700;\n\t\t\t}\n\t\t}\n\t}\n}\n\n.homegrade-blocks-focus-point-bullet {\n\tposition: absolute !important;\n\tborder-radius: 50%;\n\ttransition: scale 0.2s ease-in-out;\n\tz-index: 10;\n\t&__index {\n\t\tfont-weight: 700;\n\t\twidth: 20px;\n\t\theight: 20px;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\tposition: relative;\n\t\tcolor: white;\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tpadding: 16px;\n\t}\n\n\t&__tooltip-container {\n\t\tbackground-color: white;\n\t\topacity: 0.9999;\n\t\tborder-radius: 14px;\n\t\tpadding: 10px;\n\t\tposition: absolute;\n\t\ttop: -4px;\n\t\tleft: 50%;\n\t\ttransform: translate(-50%, -100%);\n\t\twidth: max-content;\n\t\tmin-width: 70px;\n\t\tmax-width: 420px;\n\t\ttext-align: center;\n\t\tdisplay: none;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tbox-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);\n\t\tz-index: 999;\n\n\t\t&:after {\n\t\t\tcontent: \"\";\n\t\t\tdisplay: block;\n\t\t\tbackground-color: white;\n\t\t\tposition: absolute;\n\t\t\ttop: 100%;\n\t\t\tleft: 50%;\n\t\t\twidth: 10px;\n\t\t\theight: 10px;\n\t\t\ttransform: translate(-50%, -50%) rotate(45deg);\n\t\t\tbox-shadow: 4px 4px 4px rgba(0, 0, 0, 0.04);\n\t\t\tz-index: 999;\n\t\t}\n\t\t&__title {\n\t\t\twidth: auto;\n\t\t\tmin-width: 100px;\n\t\t}\n\t}\n}\n.homegrade-blocks-focus-point-bullet:hover {\n\tscale: 1.2;\n\tfilter: brightness(1.2) hue-rotate(10deg);\n\n\t.homegrade-blocks-focus-point-bullet__tooltip-container {\n\t\tdisplay: flex;\n\t}\n}\n\n//***** TOOLTIP\n\n.tooltip-title {\n\tfont-weight: bold;\n\tmargin-right: 6px;\n}\n"],"names":[],"sourceRoot":""}

12
blocks/focused-schema/src/editor.scss
View File

@ -21,3 +21,15 @@
} }
} }
} }
// POINT
.homegrade-blocks-focus-point {
position: absolute !important;
}
.homegrade-blocks-focus-point-caption {
position: relative !important;
}
.components-panel__body .homegrade-blocks-focus-point-bullet {
position: static !important;
margin-top: -16px;
margin-bottom: 10px;
}

16
blocks/focused-schema/src/focus-point/editor.scss
View File

@ -1,16 +0,0 @@
/**
* The following styles get applied inside the editor only.
*
* Replace them with your own styles or remove the file completely.
*/
.homegrade-blocks-focus-point {
position: absolute !important;
}
.homegrade-blocks-focus-point-caption {
position: relative !important;
}
.components-panel__body .homegrade-blocks-focus-point-bullet {
position: static !important;
margin-top: -16px;
margin-bottom: 10px;
}

70
blocks/focused-schema/src/focus-point/style.scss
View File

@ -1,70 +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.
*/
.homegrade-blocks-focus-point-bullet:hover {
scale: 1.2;
filter: brightness(1.2) hue-rotate(10deg);
}
.homegrade-blocks-focus-point-bullet {
&__index {
border-radius: 50%;
font-weight: 700;
width: 20px;
height: 20px;
position: absolute !important;
top: 0;
left: 0;
position: relative;
color: white;
display: flex;
justify-content: center;
align-items: center;
padding: 16px;
transition: scale 0.2s ease-in-out;
z-index: 1;
// display: none;
}
}
.focus-point-popup-container {
background-color: white;
opacity: 0.9999;
border-radius: 14px;
padding: 10px;
transform: translate(-34%, -110%);
position: absolute;
top: 0;
left: 0;
max-width: 400px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
// z-index: 99;
&:after {
content: "";
display: block;
background-color: white;
position: absolute;
top: 100%;
left: 50%;
width: 10px;
height: 10px;
transform: translate(-50%, -50%) rotate(45deg);
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.04);
}
&__title {
width: auto;
min-width: 100px;
}
}
.focus-point-title {
font-weight: bold;
margin-right: 6px;
}

74
blocks/focused-schema/src/style.scss
View File

@ -9,6 +9,7 @@
figure { figure {
position: relative; position: relative;
} }
figcaption { figcaption {
ol { ol {
padding-top: 20px; padding-top: 20px;
@ -42,3 +43,76 @@
} }
} }
} }
.homegrade-blocks-focus-point-bullet {
position: absolute !important;
border-radius: 50%;
transition: scale 0.2s ease-in-out;
z-index: 10;
&__index {
font-weight: 700;
width: 20px;
height: 20px;
top: 0;
left: 0;
position: relative;
color: white;
display: flex;
justify-content: center;
align-items: center;
padding: 16px;
}
&__tooltip-container {
background-color: white;
opacity: 0.9999;
border-radius: 14px;
padding: 10px;
position: absolute;
top: -4px;
left: 50%;
transform: translate(-50%, -100%);
width: max-content;
min-width: 70px;
max-width: 420px;
text-align: center;
display: none;
justify-content: center;
align-items: center;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
z-index: 999;
&:after {
content: "";
display: block;
background-color: white;
position: absolute;
top: 100%;
left: 50%;
width: 10px;
height: 10px;
transform: translate(-50%, -50%) rotate(45deg);
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.04);
z-index: 999;
}
&__title {
width: auto;
min-width: 100px;
}
}
}
.homegrade-blocks-focus-point-bullet:hover {
scale: 1.2;
filter: brightness(1.2) hue-rotate(10deg);
.homegrade-blocks-focus-point-bullet__tooltip-container {
display: flex;
}
}
//***** TOOLTIP
.tooltip-title {
font-weight: bold;
margin-right: 6px;
}

2
blocks/focused-thematique/build/block.json
View File

@ -33,8 +33,8 @@
} }
}, },
"textdomain": "homegrade-theme__bloks-texte-fonctionnel", "textdomain": "homegrade-theme__bloks-texte-fonctionnel",
"viewScript": "file:./viewScript.js",
"editorScript": "file:./index.js", "editorScript": "file:./index.js",
"viewScript": "file:./viewScript.js",
"editorStyle": "file:./index.css", "editorStyle": "file:./index.css",
"style": "file:./style-index.css" "style": "file:./style-index.css"
} }

2
blocks/focused-thematique/build/index.asset.php
View File

@ -1 +1 @@
<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-core-data', 'wp-data', 'wp-element', 'wp-i18n', 'wp-notices'), 'version' => 'f683d8da9de9c4a6d7d1'); <?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-core-data', 'wp-data', 'wp-element', 'wp-i18n', 'wp-notices'), 'version' => '5b519e7f67aa2e01257f');

9
blocks/focused-thematique/build/index.js
View File

@ -164,7 +164,6 @@ function Edit({
} }
function handleBulletClick(index) { function handleBulletClick(index) {
if (currentBlockDatas && currentBlockDatas.innerBlocks) { if (currentBlockDatas && currentBlockDatas.innerBlocks) {
console.log(currentBlockDatas.innerBlocks[index].clientId);
(0,_wordpress_data__WEBPACK_IMPORTED_MODULE_4__.dispatch)("core/block-editor").selectBlock(currentBlockDatas.innerBlocks[index].clientId); (0,_wordpress_data__WEBPACK_IMPORTED_MODULE_4__.dispatch)("core/block-editor").selectBlock(currentBlockDatas.innerBlocks[index].clientId);
} }
} }
@ -179,7 +178,7 @@ function Edit({
onClick: () => handleBulletClick(index) onClick: () => handleBulletClick(index)
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("span", { }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("span", {
className: "homegrade-blocks-focus-point-bullet__index" className: "homegrade-blocks-focus-point-bullet__index"
})); }, index + 1), " ");
}); });
(0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => { (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
if (thematiqueCover && thematiqueCover.source_url) { if (thematiqueCover && thematiqueCover.source_url) {
@ -495,7 +494,9 @@ function save({
top: `${focusBullet.y * 100}%`, top: `${focusBullet.y * 100}%`,
left: `${focusBullet.x * 100}%` left: `${focusBullet.x * 100}%`
} }
}); }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("span", {
className: "homegrade-blocks-focus-point-bullet__index"
}, index + 1));
}); });
return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("section", { return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("section", {
..._wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useBlockProps.save({ ..._wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useBlockProps.save({
@ -664,7 +665,7 @@ module.exports = window["wp"]["notices"];
\************************/ \************************/
/***/ ((module) => { /***/ ((module) => {
module.exports = JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":2,"name":"homegrade-content-blocks/focused-thematique","version":"0.1.0","title":"Schéma de thématique avec points de focus","category":"homegrade-blocks","description":"Bloc en tête thématique avec points de focus","supports":{"html":false,"reusable":false},"attributes":{"coverId":{"type":"number"},"coverAlt":{"type":"string","source":"attribute","selector":"img","attribute":"alt","default":""},"coverUrl":{"type":"string","source":"attribute","selector":"img","attribute":"src"},"focusBullets":{"type":"array","default":[]}},"textdomain":"homegrade-theme__bloks-texte-fonctionnel","viewScript":"file:./viewScript.js","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css"}'); module.exports = JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":2,"name":"homegrade-content-blocks/focused-thematique","version":"0.1.0","title":"Schéma de thématique avec points de focus","category":"homegrade-blocks","description":"Bloc en tête thématique avec points de focus","supports":{"html":false,"reusable":false},"attributes":{"coverId":{"type":"number"},"coverAlt":{"type":"string","source":"attribute","selector":"img","attribute":"alt","default":""},"coverUrl":{"type":"string","source":"attribute","selector":"img","attribute":"src"},"focusBullets":{"type":"array","default":[]}},"textdomain":"homegrade-theme__bloks-texte-fonctionnel","editorScript":"file:./index.js","viewScript":"file:./viewScript.js","editorStyle":"file:./index.css","style":"file:./style-index.css"}');
/***/ }), /***/ }),

2
blocks/focused-thematique/build/index.js.map
View File

File diff suppressed because one or more lines are too long

73
blocks/focused-thematique/build/style-index.css
View File

@ -33,56 +33,46 @@
height: 0; height: 0;
} }
.homegrade-blocks-focus-point-bullet:hover {
scale: 1.2;
filter: brightness(1.2) hue-rotate(10deg);
}
.homegrade-blocks-focus-point-bullet { .homegrade-blocks-focus-point-bullet {
background-color: red;
border-radius: 50%;
width: 6px;
height: 6px;
position: absolute !important; position: absolute !important;
border-radius: 50%;
transition: scale 0.2s ease-in-out;
z-index: 10;
}
.homegrade-blocks-focus-point-bullet__index {
font-weight: 700;
width: 20px;
height: 20px;
top: 0; top: 0;
left: 0; left: 0;
z-index: 99; position: relative;
color: white; color: white;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 10px; padding: 16px;
transition: scale 0.2s ease-in-out;
} }
.homegrade-blocks-focus-point-bullet:after { .homegrade-blocks-focus-point-bullet__tooltip-container {
position: absolute;
content: "";
display: block;
width: 100%;
height: 100%;
border-radius: 50%;
background-color: red;
opacity: 0.2;
width: 200%;
height: 200%;
}
.focus-point-popup-container {
background-color: white; background-color: white;
opacity: 0.9999;
border-radius: 14px; border-radius: 14px;
padding: 10px; padding: 10px;
transform: translate(-34%, -110%);
position: absolute; position: absolute;
top: 0; top: -4px;
left: 0; left: 50%;
max-width: 400px; transform: translate(-50%, -100%);
width: -moz-max-content;
width: max-content;
min-width: 70px;
max-width: 220px;
text-align: center; text-align: center;
display: flex; display: none;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
z-index: 999;
} }
.focus-point-popup-container:after { .homegrade-blocks-focus-point-bullet__tooltip-container:after {
content: ""; content: "";
display: block; display: block;
background-color: white; background-color: white;
@ -93,11 +83,28 @@
height: 10px; height: 10px;
transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg);
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.04); box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.04);
z-index: 999;
} }
.focus-point-popup-container__title { .homegrade-blocks-focus-point-bullet__tooltip-container__title {
width: auto; width: auto;
min-width: 100px; min-width: 100px;
} }
.homegrade-blocks-focus-point-bullet:hover {
scale: 1.2;
filter: brightness(1.2) hue-rotate(10deg);
z-index: 1;
}
.homegrade-blocks-focus-point-bullet:hover .homegrade-blocks-focus-point-bullet__tooltip-container {
display: flex;
z-index: 999;
position: absolute;
}
.tooltip-title {
font-weight: bold;
margin-right: 6px;
}
/*!**************************************************************************************************************************************************************************************************************************************************************!*\ /*!**************************************************************************************************************************************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/focus-point-thematique/style.scss ***! !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/focus-point-thematique/style.scss ***!
\**************************************************************************************************************************************************************************************************************************************************************/ \**************************************************************************************************************************************************************************************************************************************************************/

2
blocks/focused-thematique/build/style-index.css.map
View File

@ -1 +1 @@
{"version":3,"file":"./style-index.css","mappings":";;;AACC;EACC;AAAF;;AAIA;EACC;AADD;AAEC;EACC;AAAF;AAEC;EACC;EACA;EACA;EACA;AAAF;AACE;EACC;EACA;EACA;EACA;EACA;EACA;AACH;AACE;EACC;AACH;AAEC;EACC;EACA;AAAF;;AAGA;EACC;EACA;AAAD;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AACD;AAAC;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAEF;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAED;AAAC;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAEF;AAAC;EACC;EACA;AAEF,C","sources":["webpack://multiblocks/./src/style.scss"],"sourcesContent":[".homegrade-blocks-focused-thematique-cover {\n\tfigure {\n\t\tposition: relative;\n\t}\n}\n\n.homegrade-blocks-focused-thematique {\n\tpadding-bottom: 100px;\n\tfigure {\n\t\tpadding-bottom: 50px;\n\t}\n\t&__figcaption-toggle {\n\t\topacity: 0.9999;\n\t\tfont-weight: bold;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\timg {\n\t\t\theight: 8px;\n\t\t\twidth: auto;\n\t\t\tmargin-top: 2px;\n\t\t\tmargin-left: 10px;\n\t\t\ttransition: all 0.3s ease-out;\n\t\t\ttransform: rotate(0deg);\n\t\t}\n\t\t&[aria-expanded=\"true\"] img {\n\t\t\ttransform: rotate(-180deg);\n\t\t}\n\t}\n\tfigcaption[aria-hidden=\"true\"] {\n\t\tdisplay: none;\n\t\theight: 0;\n\t}\n}\n.homegrade-blocks-focus-point-bullet:hover {\n\tscale: 1.2;\n\tfilter: brightness(1.2) hue-rotate(10deg);\n}\n.homegrade-blocks-focus-point-bullet {\n\tbackground-color: red;\n\tborder-radius: 50%;\n\twidth: 6px;\n\theight: 6px;\n\tposition: absolute !important;\n\ttop: 0;\n\tleft: 0;\n\tz-index: 99;\n\tcolor: white;\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tpadding: 10px;\n\ttransition: scale 0.2s ease-in-out;\n\t&:after {\n\t\tposition: absolute;\n\t\tcontent: \"\";\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tborder-radius: 50%;\n\t\tbackground-color: red;\n\t\topacity: 0.2;\n\t\twidth: 200%;\n\t\theight: 200%;\n\t}\n}\n.focus-point-popup-container {\n\tbackground-color: white;\n\tborder-radius: 14px;\n\tpadding: 10px;\n\ttransform: translate(-34%, -110%);\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n\tmax-width: 400px;\n\ttext-align: center;\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);\n\n\t&:after {\n\t\tcontent: \"\";\n\t\tdisplay: block;\n\t\tbackground-color: white;\n\t\tposition: absolute;\n\t\ttop: 100%;\n\t\tleft: 50%;\n\t\twidth: 10px;\n\t\theight: 10px;\n\t\ttransform: translate(-50%, -50%) rotate(45deg);\n\t\tbox-shadow: 4px 4px 4px rgba(0, 0, 0, 0.04);\n\t}\n\t&__title {\n\t\twidth: auto;\n\t\tmin-width: 100px;\n\t}\n}\n"],"names":[],"sourceRoot":""} {"version":3,"file":"./style-index.css","mappings":";;;AACC;EACC;AAAF;;AAIA;EACC;AADD;AAEC;EACC;AAAF;AAEC;EACC;EACA;EACA;EACA;AAAF;AACE;EACC;EACA;EACA;EACA;EACA;EACA;AACH;AACE;EACC;AACH;AAEC;EACC;EACA;AAAF;;AAoEA;EACC;EACA;EACA;EACA;AAjED;AAkEC;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAhEF;AAmEC;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAjEF;AAmEE;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAjEH;AAmEE;EACC;EACA;AAjEH;;AA2EA;EACC;EACA;EACA;AAxED;AA6EC;EACC;EACA;EACA;AA3EF;;AAiFA;EACC;EACA;AA9ED,C","sources":["webpack://multiblocks/./src/style.scss"],"sourcesContent":[".homegrade-blocks-focused-thematique-cover {\n\tfigure {\n\t\tposition: relative;\n\t}\n}\n\n.homegrade-blocks-focused-thematique {\n\tpadding-bottom: 100px;\n\tfigure {\n\t\tpadding-bottom: 50px;\n\t}\n\t&__figcaption-toggle {\n\t\topacity: 0.9999;\n\t\tfont-weight: bold;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\timg {\n\t\t\theight: 8px;\n\t\t\twidth: auto;\n\t\t\tmargin-top: 2px;\n\t\t\tmargin-left: 10px;\n\t\t\ttransition: all 0.3s ease-out;\n\t\t\ttransform: rotate(0deg);\n\t\t}\n\t\t&[aria-expanded=\"true\"] img {\n\t\t\ttransform: rotate(-180deg);\n\t\t}\n\t}\n\tfigcaption[aria-hidden=\"true\"] {\n\t\tdisplay: none;\n\t\theight: 0;\n\t}\n}\n// .homegrade-blocks-focus-point-bullet:hover {\n// \tscale: 1.2;\n// \tfilter: brightness(1.2) hue-rotate(10deg);\n// }\n// .homegrade-blocks-focus-point-bullet {\n// \tbackground-color: red;\n// \tborder-radius: 50%;\n// \t// width: 6px;\n// \t// height: 6px;\n// \tposition: absolute !important;\n// \ttop: 0;\n// \tleft: 0;\n// \tz-index: 99;\n// \tcolor: white;\n// \tdisplay: flex;\n// \tjustify-content: center;\n// \talign-items: center;\n// \tpadding: 10px;\n// \ttransition: scale 0.2s ease-in-out;\n// \t&:after {\n// \t\tposition: absolute;\n// \t\tcontent: \"\";\n// \t\tdisplay: block;\n// \t\twidth: 100%;\n// \t\theight: 100%;\n// \t\tborder-radius: 50%;\n// \t\tbackground-color: red;\n// \t\topacity: 0.2;\n// \t\twidth: 200%;\n// \t\theight: 200%;\n// \t}\n// }\n// .focus-point-popup-container {\n// \tbackground-color: white;\n// \tborder-radius: 14px;\n// \tpadding: 10px;\n// \ttransform: translate(-34%, -110%);\n// \tposition: absolute;\n// \ttop: 0;\n// \tleft: 0;\n// \tmax-width: 400px;\n// \ttext-align: center;\n// \tdisplay: flex;\n// \tjustify-content: center;\n// \talign-items: center;\n// \tbox-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);\n\n// \t&:after {\n// \t\tcontent: \"\";\n// \t\tdisplay: block;\n// \t\tbackground-color: white;\n// \t\tposition: absolute;\n// \t\ttop: 100%;\n// \t\tleft: 50%;\n// \t\twidth: 10px;\n// \t\theight: 10px;\n// \t\ttransform: translate(-50%, -50%) rotate(45deg);\n// \t\tbox-shadow: 4px 4px 4px rgba(0, 0, 0, 0.04);\n// \t}\n// \t&__title {\n// \t\twidth: auto;\n// \t\tmin-width: 100px;\n// \t}\n// }\n\n.homegrade-blocks-focus-point-bullet {\n\tposition: absolute !important;\n\tborder-radius: 50%;\n\ttransition: scale 0.2s ease-in-out;\n\tz-index: 10;\n\t&__index {\n\t\tfont-weight: 700;\n\t\twidth: 20px;\n\t\theight: 20px;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\tposition: relative;\n\t\tcolor: white;\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tpadding: 16px;\n\t}\n\n\t&__tooltip-container {\n\t\tbackground-color: white;\n\t\topacity: 0.9999;\n\t\tborder-radius: 14px;\n\t\tpadding: 10px;\n\t\tposition: absolute;\n\t\ttop: -4px;\n\t\tleft: 50%;\n\t\ttransform: translate(-50%, -100%);\n\t\twidth: max-content;\n\t\tmin-width: 70px;\n\t\tmax-width: 220px;\n\t\ttext-align: center;\n\t\tdisplay: none;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tbox-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);\n\t\tz-index: 999;\n\n\t\t&:after {\n\t\t\tcontent: \"\";\n\t\t\tdisplay: block;\n\t\t\tbackground-color: white;\n\t\t\tposition: absolute;\n\t\t\ttop: 100%;\n\t\t\tleft: 50%;\n\t\t\twidth: 10px;\n\t\t\theight: 10px;\n\t\t\ttransform: translate(-50%, -50%) rotate(45deg);\n\t\t\tbox-shadow: 4px 4px 4px rgba(0, 0, 0, 0.04);\n\t\t\tz-index: 999;\n\t\t}\n\t\t&__title {\n\t\t\twidth: auto;\n\t\t\tmin-width: 100px;\n\t\t}\n\t}\n}\n// .homegrade-blocks-focus-point-bullet:hover {\n// \t.homegrade-blocks-focus-point-bullet__tooltip-container:not(:hover) {\n// \t\tbackground-color: yellow !important;\n// \t}\n// }\n\n.homegrade-blocks-focus-point-bullet:hover {\n\tscale: 1.2;\n\tfilter: brightness(1.2) hue-rotate(10deg);\n\tz-index: 1;\n\t// ~ .homegrade-blocks-focus-point-bullet {\n\t// \t// background-color: yellow !important;\n\t// \tz-index: 1;\n\t// }\n\t.homegrade-blocks-focus-point-bullet__tooltip-container {\n\t\tdisplay: flex;\n\t\tz-index: 999;\n\t\tposition: absolute;\n\t}\n}\n\n//***** TOOLTIP\n\n.tooltip-title {\n\tfont-weight: bold;\n\tmargin-right: 6px;\n}\n"],"names":[],"sourceRoot":""}

2
blocks/focused-thematique/src/block.json
View File

@ -33,8 +33,8 @@
} }
}, },
"textdomain": "homegrade-theme__bloks-texte-fonctionnel", "textdomain": "homegrade-theme__bloks-texte-fonctionnel",
"viewScript": "file:./viewScript.js",
"editorScript": "file:./index.js", "editorScript": "file:./index.js",
"viewScript": "file:./viewScript.js",
"editorStyle": "file:./index.css", "editorStyle": "file:./index.css",
"style": "file:./style-index.css" "style": "file:./style-index.css"
} }

5
blocks/focused-thematique/src/edit.js
View File

@ -133,7 +133,6 @@ function Edit({
function handleBulletClick(index) { function handleBulletClick(index) {
if (currentBlockDatas && currentBlockDatas.innerBlocks) { if (currentBlockDatas && currentBlockDatas.innerBlocks) {
console.log(currentBlockDatas.innerBlocks[index].clientId);
dispatch("core/block-editor").selectBlock( dispatch("core/block-editor").selectBlock(
currentBlockDatas.innerBlocks[index].clientId currentBlockDatas.innerBlocks[index].clientId
); );
@ -151,7 +150,9 @@ function Edit({
}} }}
onClick={() => handleBulletClick(index)} onClick={() => handleBulletClick(index)}
> >
<span className="homegrade-blocks-focus-point-bullet__index"></span> <span className="homegrade-blocks-focus-point-bullet__index">
{index + 1}
</span>{" "}
</div> </div>
); );
}); });

6
blocks/focused-thematique/src/save.js
View File

@ -23,7 +23,11 @@ export default function save({ attributes }) {
top: `${focusBullet.y * 100}%`, top: `${focusBullet.y * 100}%`,
left: `${focusBullet.x * 100}%`, left: `${focusBullet.x * 100}%`,
}} }}
></div> >
<span className="homegrade-blocks-focus-point-bullet__index">
{index + 1}
</span>
</div>
); );
}); });
return ( return (

143
blocks/focused-thematique/src/style.scss
View File

@ -31,52 +31,108 @@
height: 0; height: 0;
} }
} }
.homegrade-blocks-focus-point-bullet:hover { // .homegrade-blocks-focus-point-bullet:hover {
scale: 1.2; // scale: 1.2;
filter: brightness(1.2) hue-rotate(10deg); // filter: brightness(1.2) hue-rotate(10deg);
} // }
// .homegrade-blocks-focus-point-bullet {
// background-color: red;
// border-radius: 50%;
// // width: 6px;
// // height: 6px;
// position: absolute !important;
// top: 0;
// left: 0;
// z-index: 99;
// color: white;
// display: flex;
// justify-content: center;
// align-items: center;
// padding: 10px;
// transition: scale 0.2s ease-in-out;
// &:after {
// position: absolute;
// content: "";
// display: block;
// width: 100%;
// height: 100%;
// border-radius: 50%;
// background-color: red;
// opacity: 0.2;
// width: 200%;
// height: 200%;
// }
// }
// .focus-point-popup-container {
// background-color: white;
// border-radius: 14px;
// padding: 10px;
// transform: translate(-34%, -110%);
// position: absolute;
// top: 0;
// left: 0;
// max-width: 400px;
// text-align: center;
// display: flex;
// justify-content: center;
// align-items: center;
// box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
// &:after {
// content: "";
// display: block;
// background-color: white;
// position: absolute;
// top: 100%;
// left: 50%;
// width: 10px;
// height: 10px;
// transform: translate(-50%, -50%) rotate(45deg);
// box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.04);
// }
// &__title {
// width: auto;
// min-width: 100px;
// }
// }
.homegrade-blocks-focus-point-bullet { .homegrade-blocks-focus-point-bullet {
background-color: red;
border-radius: 50%;
width: 6px;
height: 6px;
position: absolute !important; position: absolute !important;
border-radius: 50%;
transition: scale 0.2s ease-in-out;
z-index: 10;
&__index {
font-weight: 700;
width: 20px;
height: 20px;
top: 0; top: 0;
left: 0; left: 0;
z-index: 99; position: relative;
color: white; color: white;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 10px; padding: 16px;
transition: scale 0.2s ease-in-out;
&:after {
position: absolute;
content: "";
display: block;
width: 100%;
height: 100%;
border-radius: 50%;
background-color: red;
opacity: 0.2;
width: 200%;
height: 200%;
} }
}
.focus-point-popup-container { &__tooltip-container {
background-color: white; background-color: white;
opacity: 0.9999;
border-radius: 14px; border-radius: 14px;
padding: 10px; padding: 10px;
transform: translate(-34%, -110%);
position: absolute; position: absolute;
top: 0; top: -4px;
left: 0; left: 50%;
max-width: 400px; transform: translate(-50%, -100%);
width: max-content;
min-width: 70px;
max-width: 220px;
text-align: center; text-align: center;
display: flex; display: none;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
z-index: 999;
&:after { &:after {
content: ""; content: "";
@ -89,9 +145,38 @@
height: 10px; height: 10px;
transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg);
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.04); box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.04);
z-index: 999;
} }
&__title { &__title {
width: auto; width: auto;
min-width: 100px; min-width: 100px;
} }
} }
}
// .homegrade-blocks-focus-point-bullet:hover {
// .homegrade-blocks-focus-point-bullet__tooltip-container:not(:hover) {
// background-color: yellow !important;
// }
// }
.homegrade-blocks-focus-point-bullet:hover {
scale: 1.2;
filter: brightness(1.2) hue-rotate(10deg);
z-index: 1;
// ~ .homegrade-blocks-focus-point-bullet {
// // background-color: yellow !important;
// z-index: 1;
// }
.homegrade-blocks-focus-point-bullet__tooltip-container {
display: flex;
z-index: 999;
position: absolute;
}
}
//***** TOOLTIP
.tooltip-title {
font-weight: bold;
margin-right: 6px;
}