import { __ } from '@wordpress/i18n';
import { speak } from '@wordpress/a11y';
import { SELECTORS } from './constants';
import API from './classes/api';
import ControlSync from './classes/control/control-sync';
import ControlStates from './classes/control/control-states';
import ControlMeta from './classes/control/control-meta';
import OptimizationDetails from './classes/optimization-details';
class OptimizationControl {
constructor() {
this.controlSyncRequestInProgress = false;
this.init();
this.controlSync = new ControlSync();
}
init() {
this.initEventListeners();
setInterval( () => this.runStatusCheckLoop(), 5000 );
}
async runStatusCheckLoop() {
if ( this.controlSyncRequestInProgress ) {
return;
}
this.controlSyncRequestInProgress = true;
await this.controlSync.run();
this.controlSyncRequestInProgress = false;
}
initEventListeners() {
document.addEventListener( 'click', ( e ) => this.handleOptimizeButtonClick( e ) );
document.addEventListener( 'click', ( e ) => this.handleReoptimizeButtonClick( e ) );
document.addEventListener( 'click', ( e ) => this.handleRestoreButtonClick( e ) );
document.addEventListener( 'click', ( e ) => this.handleOptimizationDetailsOpen( e ) );
document.addEventListener( 'click', ( e ) => this.handleOptimizationDetailsClick( e ) );
}
async handleOptimizeButtonClick( e ) {
if ( ! e.target.closest( `${ SELECTORS.optimizeButtonSelector }, ${ SELECTORS.tryAgainOptimizeButtonSelector }` ) ) {
return;
}
speak( __( 'Optimization is in progress', 'image-optimization' ), 'assertive' );
const controlWrapper = e.target.closest( SELECTORS.controlWrapperSelector );
const states = new ControlStates( controlWrapper );
states.renderLoading( 'optimize' );
try {
controlWrapper.dataset.isFrozen = true;
await API.optimizeSingleImage( {
imageId: new ControlMeta( controlWrapper ).getImageId(),
reoptimize: false,
} );
} catch ( error ) {
states.renderError( error );
}
}
async handleReoptimizeButtonClick( e ) {
if ( ! e.target.closest( `${ SELECTORS.reoptimizeButtonSelector }, ${ SELECTORS.tryAgainReoptimizeButtonSelector }` ) ) {
return;
}
speak( __( 'Reoptimizing is in progress', 'image-optimization' ), 'assertive' );
const controlWrapper = e.target.closest( SELECTORS.controlWrapperSelector );
const states = new ControlStates( controlWrapper );
states.renderLoading( 'reoptimize' );
try {
controlWrapper.dataset.isFrozen = true;
await API.optimizeSingleImage( {
imageId: new ControlMeta( controlWrapper ).getImageId(),
reoptimize: true,
} );
} catch ( error ) {
states.renderError( error );
}
}
async handleRestoreButtonClick( e ) {
if ( ! e.target.closest( `${ SELECTORS.restoreButtonSelector }, ${ SELECTORS.tryAgainRestoreButtonSelector }` ) ) {
return;
}
speak( __( 'Image restoring is in progress', 'image-optimization' ), 'assertive' );
const controlWrapper = e.target.closest( SELECTORS.controlWrapperSelector );
const states = new ControlStates( controlWrapper );
states.renderLoading( 'restore' );
try {
controlWrapper.dataset.isFrozen = true;
await API.restoreSingleImage( new ControlMeta( controlWrapper ).getImageId() );
} catch ( error ) {
states.renderError( error );
}
}
async handleOptimizationDetailsOpen( e ) {
if ( ! e.target.closest( `${ SELECTORS.optimizationDetailsButtonSelector }` ) ) {
return;
}
const controlWrapper = e.target.closest( SELECTORS.controlWrapperSelector );
const imageId = new ControlMeta( controlWrapper ).getImageId();
try {
OptimizationDetails.initModal();
OptimizationDetails.renderLoading();
const details = await API.getOptimizationDetails( imageId );
OptimizationDetails.openModal();
OptimizationDetails.renderData( imageId, details );
} catch ( error ) {
OptimizationDetails.openModal();
OptimizationDetails.renderError( error.message );
}
}
async handleOptimizationDetailsClick( e ) {
if ( ! e.target.closest( `${ SELECTORS.optimizationDetailsOptimizeButtonSelector }` ) ) {
return;
}
const imageId = parseInt( e.target.dataset?.imageId, 10 );
await API.optimizeSingleImage( { imageId } );
const controlWrapper = document.querySelector( `.image-optimization-control[data-image-optimization-image-id="${ imageId }"]` );
if ( controlWrapper ) {
new ControlStates( controlWrapper ).renderLoading( 'optimize' );
}
OptimizationDetails.closeModal();
}
}
export default OptimizationControl;
{
"name": "woocommerce/product-image",
"title": "Product Image",
"description": "Display the main product image.",
"category": "woocommerce-product-elements",
"attributes": {
"showProductLink": { "type": "boolean", "default": true },
"showSaleBadge": { "type": "boolean", "default": true },
"saleBadgeAlign": { "type": "string", "default": "right" },
"imageSizing": { "type": "string", "default": "single" },
"productId": { "type": "number", "default": 0 },
"isDescendentOfQueryLoop": { "type": "boolean", "default": false },
"isDescendentOfSingleProductBlock": {
"type": "boolean",
"default": false
},
"width": { "type": "string" },
"height": { "type": "string" },
"scale": { "type": "string", "default": "cover" },
"aspectRatio": { "type": "string" }
},
"supports": {
"interactivity": {
"clientNavigation": true
},
"html": false,
"__experimentalBorder": {
"radius": true,
"__experimentalSkipSerialization": true
},
"typography": {
"fontSize": true,
"__experimentalSkipSerialization": true
},
"spacing": {
"margin": true,
"padding": true
},
"dimensions": {
"aspectRatio": true,
"__experimentalSkipSerialization": true
},
"email": true
},
"selectors": {
"root": ".wp-block-woocommerce-product-image.wc-block-components-product-image, .wp-block-woocommerce-product-image .wc-block-components-product-image"
},
"ancestor": [
"woocommerce/all-products",
"woocommerce/single-product",
"woocommerce/product-template",
"core/post-template"
],
"usesContext": [ "imageId", "postId", "query", "queryId" ],
"keywords": [ "WooCommerce" ],
"textdomain": "woocommerce",
"apiVersion": 3,
"$schema": "https://schemas.wp.org/trunk/block.json"
}
Les Filles du Thé - Part 18
Aller au contenu
Nom : Matcha Couleur/type : Thé vert en poudre Lieu de naissance : Japon – province de Shizuoka – Okabe Histoire : Le Matcha (抹茶) est une poudre de thé vert japonais qui est traditionnellement utilisée dans la cérémonie du thé japonaise appelée “Cha no yu”. Son origine date du XIIe … Lire la suite Matcha
Bonjour à tous, C’est l’heure de la première étape de notre challenge “2 thés dans 1 salon” ! Naissance du challenge : “2 thés dans 1 salon” Le mois dernier nous nous sommes réunies en région parisienne pour un long weekend entre sœurs. Notre projet “Les Filles du Thé” déjà commencé, nous avons parcouru la … Lire la suite 1/12 : Les Filles du Thé à Paris, Matcha et Hojicha chez Jugetsudo
Bonjour à tous ! L’une des choses importantes pour nous est de vous apporter des informations claires et ludiques afin de vous réserver le meilleur accueil dans notre univers si Thé ! Pour nous aider, nous avions besoin d’un 3e élément bien spécial… Il fallait qu’il soit à notre image souriant et sympa ! Mais … Lire la suite Présentation du 3e élément : Théa
Le Thé se décline en 6 couleurs . Les plus connues sont le vert et le noir, pour leurs bienfaits sur l’organisme et leurs vertus. Les 4 autres couleurs de thé, ne sont pas en reste, elles apportent tout autant d’éléments et nous permettent de les adapter à notre humeur et au moment de la journée pour les déguster.
C’est du même arbre, le Camélias Sinensis plus communément appelé le théier, que se crée la palette des 6 couleurs de thé. Ce sont les différentes opérations naturelles qui donneront la couleur souhaitée à la feuille et au Thé souhaité.
Lire la suiteDécouvrez les 6 couleurs de Thé
Jugetsudo, maison de thé japonais Nous débutons notre challenge en plaçant la barre très haute. En effet, le salon de thé choisi pour ce premier article est en fait une Maison de thé. (cf art. maison et salon de thé, quelle différence?) La maitresse de maison nous a fait l’honneur de dessiner en kanji japonais … Lire la suite L’esprit du « Cha-Zen » chez Jugetsudo – Paris
Navigation des articles