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

refining editor js for arrays shortcode + refining plus loin

Browse Source
This commit is contained in:
Antoine M 2023-10-02 11:28:09 +02:00
parent 91ee7f1de0
commit 4ff6398e32
11 changed files with 227 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
css/app.css
View File

@ -652,6 +652,10 @@ video {
display: flex;
}
.table {
display: table;
}
.h-1 {
height: 0.25rem;
}
@ -3955,6 +3959,95 @@ article > *:not(.entry-content, .chapter-header-block),
margin-top: 9px;
}
.wp-block-table thead {
border-radius: 0.75rem;
border-bottom-width: 0px;
background-color: rgb(239, 239, 239, 0.6);
}
.wp-block-table thead th {
border-style: none !important;
padding-top: 2rem;
padding-bottom: 2rem;
}
.wp-block-table thead th:first-child {
border-top-left-radius: 0.75rem;
border-bottom-left-radius: 0.75rem;
}
.wp-block-table thead th:last-child {
border-top-right-radius: 0.75rem;
border-bottom-right-radius: 0.75rem;
}
.wp-block-table tr {
margin-top: 2rem;
}
.wp-block-table tr td:first-child {
border-left-width: 0px;
}
.wp-block-table tr td:last-child {
border-right-width: 0px;
}
.wp-block-table tr:first-child td {
border-top-width: 0px;
}
.wp-block-table tr:last-child td {
border-bottom-width: 0px;
}
.wp-block-table td {
border-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(229 229 229 / var(--tw-border-opacity));
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
.wp-block-table .table-cell-icon {
margin-left: auto;
margin-right: auto;
display: flex;
height: 2rem;
width: 2rem;
align-items: center;
justify-content: center;
border-radius: 9999px;
padding: 0.5rem;
}
.wp-block-table .table-cell-icon:before {
display: flex;
align-items: center;
justify-content: center;
}
.wp-block-table .table-cell-icon--checked {
--tw-bg-opacity: 1;
background-color: rgb(22 163 74 / var(--tw-bg-opacity));
}
.wp-block-table .table-cell-icon--checked:before {
content: url('../resources/img/graphic-assets/table-cell--check.svg');
}
.wp-block-table .table-cell-icon--crossed {
border-width: 2px;
--tw-border-opacity: 1;
border-color: rgb(38 38 38 / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.wp-block-table .table-cell-icon--crossed:before {
content: url('../resources/img/graphic-assets/table-cell--cross.svg');
}
.tooltip-word {
-webkit-text-decoration-line: underline;
text-decoration-line: underline;
@ -4602,9 +4695,11 @@ article > *:not(.entry-content, .chapter-header-block),
margin-top: 0px !important;
font-size: 2.25rem !important;
line-height: 2.5rem !important;
font-weight: 700 !important;
}
.homegrade-blocks-plus-loin p,
.homegrade-blocks-plus-loin h2,
.homegrade-blocks-plus-loin h3,
.homegrade-blocks-plus-loin h4,
.homegrade-blocks-plus-loin h5,

4
css/editor-style.css
View File

@ -99,6 +99,10 @@
display: flex
}
.table {
display: table
}
.h-1 {
height: 0.25rem
}

17
includes/init.php
View File

@ -7,6 +7,7 @@
function tailpress_setup()
{
// ##### Setup 🡒 Navigation
register_nav_menus(
@ -57,9 +58,23 @@ function tailpress_enqueue_scripts()
wp_enqueue_script('gsap', get_template_directory_uri() . '/assets/gsap/gsap.min.js', array(), $theme->get('Version'));
wp_enqueue_style('swipercss', get_template_directory_uri() . '/assets/swiper/swiper-bundle.min.css', array(), $theme->get('Version'));
wp_enqueue_style('tailpress', tailpress_asset('css/app.css'), array(), $theme->get('Version'));
wp_enqueue_script('tailpress', tailpress_asset('js/app.js'), array('gsap', 'jquery'), $theme->get('Version'));
// wp_enqueue_script('tailpress', tailpress_asset('js/app.js'), array('gsap', 'jquery'), $theme->get('Version'));
// wp_register_script('showthematiquejs', get_template_directory_uri() . '/template-blocks/home/show-thematiques/show-thematiques.js', array('swiperjs', 'swipercss'), $theme->get('Version'));
// #PASSING TRANSLATIONS
wp_register_script('main-app-js', tailpress_asset('js/app.js'), array('gsap', 'jquery'), $theme->get('Version'));
$translations_main_app_js = array(
'yes' => __('Oui', 'homegrade-theme__texte-fonctionnel'),
'no' => __('Non', 'homegrade-theme__texte-fonctionnel'),
);
wp_localize_script('main-app-js', 'textTranslationsMainAppJS', $translations_main_app_js);
wp_enqueue_script('main-app-js');
// SHOW THEMATIQUE
wp_register_script('showthematiquejs', get_template_directory_uri() . '/template-blocks/home/show-thematiques/show-thematiques.js', array('swiperjs'), $theme->get('Version'));

19
js/app.js
View File

@ -1,4 +1,21 @@
(() => {
// resources/js/editor.js
function editorInit() {
const tablesCells = document.querySelectorAll(".wp-block-table td");
function filterCells(element, stringToParse) {
return element.textContent.trim() === stringToParse;
}
const checkedCells = Array.from(tablesCells).filter((element) => filterCells(element, "((v))"));
const crossedCells = Array.from(tablesCells).filter((element) => filterCells(element, "((x))"));
checkedCells.forEach((cell) => {
console.log(textTranslationsMainAppJS);
cell.innerHTML = `<span class="table-cell-icon table-cell-icon--checked" aria-label="${textTranslationsMainAppJS.yes}"></span>`;
});
crossedCells.forEach((cell) => {
cell.innerHTML = `<span class="table-cell-icon table-cell-icon--crossed " aria-label="${textTranslationsMainAppJS.no}"></span>`;
});
}
// resources/js/menus.js
function menuInit() {
const header = document.querySelector("#main-header");
@ -279,7 +296,6 @@
const questionsContainerBlocks = document.querySelectorAll(".questions-container-block");
const vocabulaireSummaryBlock = document.querySelector(".homegrade-blocks-vocabulaire-summary");
const allBlocks = [...questionsContainerBlocks, vocabulaireSummaryBlock];
console.log(vocabulaireSummaryBlock);
allBlocks.forEach((el) => {
io.observe(el);
});
@ -289,5 +305,6 @@
window.addEventListener("DOMContentLoaded", (event) => {
menuInit();
singleConseil();
editorInit();
});
})();

3
resources/css/blocks/plus-loin.css
View File

@ -1,9 +1,10 @@
.homegrade-blocks-plus-loin {
@apply bg-primary p-12 rounding-radius my-8;
&__block-title {
@apply !mt-0 !text-4xl;
@apply !mt-0 !text-4xl !font-bold;
}
p,
h2,
h3,
h4,
h5,

55
resources/css/editor-content/gutenberg.css
View File

@ -49,3 +49,58 @@ article > *:not(.entry-content, .chapter-header-block),
margin-top: 9px;
}
}
.wp-block-table {
thead {
@apply bg-gray rounded-xl border-b-0;
th {
@apply !border-none py-8;
}
th:first-child {
@apply rounded-tl-xl rounded-bl-xl;
}
th:last-child {
@apply rounded-tr-xl rounded-br-xl;
}
}
tr {
@apply mt-8;
td:first-child {
@apply border-l-0;
}
td:last-child {
@apply border-r-0;
}
}
tr:first-child {
td {
@apply border-t-0;
}
}
tr:last-child {
td {
@apply border-b-0;
}
}
td {
@apply border border-neutral-200 py-3;
}
.table-cell-icon {
@apply mx-auto w-8 h-8 p-2 rounded-full flex items-center justify-center;
&:before {
@apply flex justify-center items-center;
}
}
.table-cell-icon--checked {
@apply bg-green-600;
&:before {
content: url('../resources/img/graphic-assets/table-cell--check.svg');
}
}
.table-cell-icon--crossed {
@apply bg-white border-2 border-neutral-800;
&:before {
content: url('../resources/img/graphic-assets/table-cell--cross.svg');
}
}
}

3
resources/img/graphic-assets/table-cell--check.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="15.111" height="10.886" viewBox="0 0 15.111 10.886">
<path id="Tracé_3608" data-name="Tracé 3608" d="M-4090.82,6199.981l3.81,3.811,8.472-8.473" transform="translate(4092.234 -6193.905)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 336 B

6
resources/img/graphic-assets/table-cell--cross.svg Normal file
View File

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="11.673" height="11.647" viewBox="0 0 11.673 11.647">
<g id="Groupe_5848" data-name="Groupe 5848" transform="translate(-960.782 -6194.834)">
<path id="Tracé_3611" data-name="Tracé 3611" d="M-3940.772,6207.214l8.845-8.819" transform="translate(4902.969 -2.146)" fill="none" stroke="#000" stroke-linecap="round" stroke-width="2"/>
<path id="Tracé_3612" data-name="Tracé 3612" d="M-3932.928,6207.214l-7.845-8.819" transform="translate(4902.969 -2.146)" fill="none" stroke="#000" stroke-linecap="round" stroke-width="2"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 592 B

2
resources/js/app.js
View File

@ -1,3 +1,4 @@
import editorInit from './editor';
import menuInit from './menus';
import singleConseil from './single-conseil';
@ -6,4 +7,5 @@ import singleConseil from './single-conseil';
window.addEventListener('DOMContentLoaded', (event) => {
menuInit();
singleConseil();
editorInit();
});

26
resources/js/editor.js Normal file
View File

@ -0,0 +1,26 @@
export default function editorInit() {
const tablesCells = document.querySelectorAll('.wp-block-table td');
function filterCells(element, stringToParse) {
return element.textContent.trim() === stringToParse;
}
const checkedCells = Array.from(tablesCells).filter((element) => filterCells(element, '((v))'));
const crossedCells = Array.from(tablesCells).filter((element) => filterCells(element, '((x))'));
checkedCells.forEach((cell) => {
console.log(textTranslationsMainAppJS);
cell.innerHTML = `<span class="table-cell-icon table-cell-icon--checked" aria-label="${textTranslationsMainAppJS.yes}"></span>`;
});
crossedCells.forEach((cell) => {
cell.innerHTML = `<span class="table-cell-icon table-cell-icon--crossed " aria-label="${textTranslationsMainAppJS.no}"></span>`;
});
// tables.forEach((table) => {
// const tableCells = contains('td', '((v))');
// console.log(tableRows);
// tableRows.forEach((row) => {
// console.log(row);
// });
// });
}

1
resources/js/single-conseil.js
View File

@ -69,7 +69,6 @@ export default function singleConseil() {
const vocabulaireSummaryBlock = document.querySelector('.homegrade-blocks-vocabulaire-summary');
const allBlocks = [...questionsContainerBlocks, vocabulaireSummaryBlock];
console.log(vocabulaireSummaryBlock);
allBlocks.forEach((el) => {
io.observe(el);
});