@elementor/editor-variables 0.8.0 → 0.10.0

package/src/service.ts

@@ -0,0 +1,154 @@
+import { apiClient } from './api';
+import { OP_RW, Storage, type TVariable, type TVariablesList } from './storage';
+
+const storage = new Storage();
+
+export const service = {
+	variables: (): TVariablesList => {
+		return storage.load();
+	},
+
+	init: () => {
+		service.load();
+	},
+
+	load: () => {
+		return apiClient
+			.list()
+			.then( ( response ) => {
+				const { success, data: payload } = response.data;
+
+				if ( ! success ) {
+					throw new Error( 'Unexpected response from server' );
+				}
+
+				return payload;
+			} )
+			.then( ( data ) => {
+				const { variables, watermark } = data;
+
+				storage.fill( variables, watermark );
+
+				return variables;
+			} );
+	},
+
+	create: ( { type, label, value }: TVariable ) => {
+		return apiClient
+			.create( type, label, value )
+			.then( ( response ) => {
+				const { success, data: payload } = response.data;
+
+				if ( ! success ) {
+					throw new Error( 'Unexpected response from server' );
+				}
+
+				return payload;
+			} )
+			.then( ( data ) => {
+				const { variable, watermark } = data;
+
+				handleWatermark( OP_RW, watermark );
+
+				const { id: variableId, ...createdVariable } = variable;
+
+				storage.add( variableId, createdVariable );
+
+				return {
+					id: variableId,
+					variable: createdVariable,
+				};
+			} );
+	},
+
+	update: ( id: string, { label, value }: TVariable ) => {
+		return apiClient
+			.update( id, label, value )
+			.then( ( response ) => {
+				const { success, data: payload } = response.data;
+
+				if ( ! success ) {
+					throw new Error( 'Unexpected response from server' );
+				}
+
+				return payload;
+			} )
+			.then( ( data ) => {
+				const { variable, watermark } = data;
+
+				handleWatermark( OP_RW, watermark );
+
+				const { id: variableId, ...updatedVariable } = variable;
+
+				storage.update( variableId, updatedVariable );
+
+				return {
+					id: variableId,
+					variable: updatedVariable,
+				};
+			} );
+	},
+
+	delete: ( id: string ) => {
+		return apiClient
+			.delete( id )
+			.then( ( response ) => {
+				const { success, data: payload } = response.data;
+
+				if ( ! success ) {
+					throw new Error( 'Unexpected response from server' );
+				}
+
+				return payload;
+			} )
+			.then( ( data ) => {
+				const { variable, watermark } = data;
+
+				handleWatermark( OP_RW, watermark );
+
+				const { id: variableId, ...deletedVariable } = variable;
+
+				storage.update( variableId, deletedVariable );
+
+				return {
+					id: variableId,
+					variable: deletedVariable,
+				};
+			} );
+	},
+
+	restore: ( id: string ) => {
+		return apiClient
+			.restore( id )
+			.then( ( response ) => {
+				const { success, data: payload } = response.data;
+
+				if ( ! success ) {
+					throw new Error( 'Unexpected response from server' );
+				}
+
+				return payload;
+			} )
+			.then( ( data ) => {
+				const { variable, watermark } = data;
+
+				handleWatermark( OP_RW, watermark );
+
+				const { id: variableId, ...restoredVariable } = variable;
+
+				storage.update( variableId, restoredVariable );
+
+				return {
+					id: variableId,
+					variable: restoredVariable,
+				};
+			} );
+	},
+};
+
+const handleWatermark = ( operation: string, newWatermark: number ) => {
+	if ( storage.watermarkDiff( operation, newWatermark ) ) {
+		setTimeout( () => service.load(), 500 );
+	}
+	storage.watermark( newWatermark );
+};

package/src/storage.ts

@@ -0,0 +1,74 @@
+export type TVariable = {
+	type: string;
+	label: string;
+	value: string;
+	deleted?: boolean;
+	deleted_at?: string;
+};
+
+export type TVariablesList = Record< string, TVariable >;
+
+const STORAGE_KEY = 'elementor-global-variables';
+const STORAGE_WATERMARK_KEY = 'elementor-global-variables-watermark';
+
+export const OP_RW = 'RW';
+const OP_RO = 'RO';
+
+export class Storage {
+	state: {
+		watermark: number;
+		variables: TVariablesList;
+	};
+
+	constructor() {
+		this.state = {
+			watermark: -1,
+			variables: {},
+		};
+	}
+
+	load() {
+		this.state.watermark = parseInt( localStorage.getItem( STORAGE_WATERMARK_KEY ) || '-1' );
+		this.state.variables = JSON.parse( localStorage.getItem( STORAGE_KEY ) || '{}' ) as TVariablesList;
+		return this.state.variables;
+	}
+
+	fill( variables: TVariablesList, watermark: number ) {
+		this.state.watermark = watermark;
+		this.state.variables = variables;
+
+		localStorage.setItem( STORAGE_WATERMARK_KEY, this.state.watermark.toString() );
+		localStorage.setItem( STORAGE_KEY, JSON.stringify( this.state.variables ) );
+	}
+
+	add( id: string, variable: TVariable ) {
+		this.load();
+		this.state.variables[ id ] = variable;
+		localStorage.setItem( STORAGE_KEY, JSON.stringify( this.state.variables ) );
+	}
+
+	update( id: string, variable: TVariable ) {
+		this.load();
+		this.state.variables[ id ] = variable;
+		localStorage.setItem( STORAGE_KEY, JSON.stringify( this.state.variables ) );
+	}
+
+	watermark( watermark: number ) {
+		this.state.watermark = watermark;
+		localStorage.setItem( STORAGE_WATERMARK_KEY, this.state.watermark.toString() );
+	}
+
+	watermarkDiff( operation: string, newWatermark: number ) {
+		const diff = newWatermark - this.state.watermark;
+
+		if ( OP_RW === operation ) {
+			return 1 !== diff;
+		}
+
+		if ( OP_RO === operation ) {
+			return 0 !== diff;
+		}
+
+		return false;
+	}
+}

package/src/style-variables-repository.ts

@@ -0,0 +1,3 @@
+import { createStyleVariablesRepository } from './create-style-variables-repository';
+
+export const styleVariablesRepository = createStyleVariablesRepository();

package/src/sync/get-canvas-iframe-document.ts

@@ -0,0 +1,7 @@
+import type { CanvasExtendedWindow } from './types';
+
+export function getCanvasIframeDocument() {
+	const extendedWindow = window as unknown as CanvasExtendedWindow;
+
+	return extendedWindow.elementor?.$preview?.[ 0 ]?.contentDocument;
+}

package/src/sync/types.ts

@@ -0,0 +1,5 @@
+export type CanvasExtendedWindow = Window & {
+	elementor?: {
+		$preview?: [ HTMLIFrameElement ];
+	};
+};

package/src/types.ts

@@ -1,5 +1,15 @@
+export type VariableKey = string;
+
+export type VariableValue = string;
+
 export type Variable = {
-	value: string;
+	value: VariableValue;
 	label: string;
-	key: string;
+	type: string;
 };
+
+export type Variables = {
+	[ key: VariableKey ]: Variable;
+};
+
+export type StyleVariables = Record< VariableKey, VariableValue >;