Internal: Header/Footer templates-api [TMZ-276] (#151)

assets/dev/scss/variables/breakpoints.scss

@@ -25,3 +25,14 @@ $screen-tablet-extra-next: -1;
 $screen-laptop-min: -1;
 $screen-laptop-max: -1;
 $screen-widescreen-min: -1;
+
+$editor-screen-xs-max: map_get($breakpoints, sm) - 1;
+$editor-screen-sm-min: map_get($breakpoints, sm);
+$editor-screen-sm-max: map_get($breakpoints, md) - 1;
+$editor-screen-md-min: map_get($breakpoints, md);
+$editor-screen-md-max: map_get($breakpoints, lg) - 1;
+$editor-screen-lg-min: map_get($breakpoints, lg);
+$editor-screen-lg-max: map_get($breakpoints, xl) - 1;
+$editor-screen-xl-min: map_get($breakpoints, xl);
+$editor-screen-xl-max: map_get($breakpoints, xxl) - 1;
+$editor-screen-xxl-min: map_get($breakpoints, xxl);

assets/dev/scss/variables/index.scss

@@ -1,3 +1,4 @@
 @import "./breakpoints";
 @import "./values";
 @import "./global-colors";
+@import "./mixins";

assets/dev/scss/variables/mixins.scss

@@ -0,0 +1,30 @@
+@mixin ellipsis {
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	overflow: hidden;
+}
+
+@mixin absolute-center {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+}
+
+@mixin start($value) {
+	body.rtl & {
+		right: $value;
+	}
+	body:not(.rtl) & {
+		left: $value;
+	}
+}
+
+@mixin end($value) {
+	body.rtl & {
+		left: $value;
+	}
+	body:not(.rtl) & {
+		right: $value;
+	}
+}

hello-plus.php

@@ -44,7 +44,7 @@
 define( 'HELLOPLUS_STYLE_URL', HELLOPLUS_ASSETS_URL . 'css/' );
 define( 'HELLOPLUS_IMAGES_PATH', HELLOPLUS_ASSETS_PATH . 'images/' );
 define( 'HELLOPLUS_IMAGES_URL', HELLOPLUS_ASSETS_URL . 'images/' );
-define( 'HELLOPLUS_MIN_ELEMENTOR_VERSION', '3.26.4' );
+define( 'HELLOPLUS_MIN_ELEMENTOR_VERSION', '3.27.1' );
 
 // Init the Plugin class
 require HELLOPLUS_PATH . '/plugin.php';

modules/template-parts/assets/js/editor/hooks/ui/add-library-tab.js

@@ -0,0 +1,42 @@
+import { __ } from '@wordpress/i18n';
+
+export class EhpAddLibraryTab extends $e.modules.hookUI.Before {
+	getCommand() {
+		return 'library/open';
+	}
+
+	getId() {
+		return 'ehp-add-library-tab';
+	}
+
+	getConditions() {
+		return [ 'ehp-header', 'ehp-footer' ].includes( elementor?.config?.document?.type );
+	}
+
+	getTitle() {
+		switch ( elementor?.config?.document?.type ) {
+			case 'ehp-header':
+				return __( 'Hello+ Header', 'hello-plus' );
+			case 'ehp-footer':
+				return __( 'Hello+ Footer', 'hello-plus' );
+			default:
+				return __( 'Hello Plus', 'elementor' );
+		}
+	}
+
+	apply() {
+		$e.components.get( 'library' ).addTab( 'templates/ehp-elements', {
+			title: this.getTitle(),
+			filter: {
+				source: 'remote-ehp',
+				type: 'block',
+				subtype: elementor?.config?.document?.type,
+			},
+		}, 2 );
+
+		$e.components.get( 'library' ).removeTab( 'templates/blocks' );
+		$e.components.get( 'library' ).removeTab( 'templates/pages' );
+	}
+}
+
+export default EhpAddLibraryTab;

modules/template-parts/assets/js/editor/hooks/ui/index.js

@@ -1,2 +1,5 @@
 export { SelectEhpElementOnOpen } from './attach-preview';
 export { SelectAfterContainer } from './select';
+export { EhpAddLibraryTab } from './add-library-tab';
+export { EhpRemoveLibraryTab } from './remove-library-tab';
+export { EhpOpenLibraryAfterDelete } from './open-library-after-delete';

modules/template-parts/assets/js/editor/hooks/ui/open-library-after-delete.js

@@ -0,0 +1,24 @@
+export class EhpOpenLibraryAfterDelete extends $e.modules.hookUI.After {
+	getCommand() {
+		return 'document/elements/delete';
+	}
+
+	getId() {
+		return 'ehp-open-library-after-delete';
+	}
+
+	getConditions( args ) {
+		let type = args?.container?.document?.config?.type;
+		if ( ! type ) {
+			type = args?.containers[ 0 ]?.document?.config?.type;
+		}
+
+		return [ 'ehp-header', 'ehp-footer' ].includes( type );
+	}
+
+	apply() {
+		$e.run( 'library/open' );
+	}
+}
+
+export default EhpOpenLibraryAfterDelete;

modules/template-parts/assets/js/editor/hooks/ui/remove-library-tab.js

@@ -0,0 +1,23 @@
+export class EhpRemoveLibraryTab extends $e.modules.hookUI.After {
+	getCommand() {
+		return 'editor/documents/unload';
+	}
+
+	getId() {
+		return 'ehp-remove-library-tab';
+	}
+
+	getConditions( args ) {
+		const document = elementor.documents.get( args.id );
+		return [ 'ehp-header', 'ehp-footer' ].includes( document.config.type );
+	}
+
+	apply() {
+		$e.components.get( 'library' ).removeTab( 'templates/ehp-elements' );
+
+		$e.components.get( 'library' ).addTab( 'templates/pages' );
+		$e.components.get( 'library' ).addTab( 'templates/blocks' );
+	}
+}
+
+export default EhpRemoveLibraryTab;

modules/template-parts/assets/js/editor/module.js

@@ -7,9 +7,22 @@ export default class TemplatesModule extends elementorModules.editor.utils.Modul
 		elementor.hooks.addFilter( 'elements/widget/controls/common/default', this.resetCommonControls.bind( this ) );
 		elementor.hooks.addFilter( 'elements/widget/controls/common-optimized/default', this.resetCommonControls.bind( this ) );
 
+		const types = [
+			'core/modal/close/ehp-footer',
+			'core/modal/close/ehp-header',
+		];
+
+		types.forEach( ( type ) => {
+			window.addEventListener( type, this.redirectToHelloPlus );
+		} );
+
 		window.templatesModule = this;
 	}
 
+	redirectToHelloPlus() {
+		window.location.href = elementor.config.close_modal_redirect_hello_plus;
+	}
+
 	async openSiteIdentity() {
 		await $e.run( 'panel/global/open' );
 		$e.route( 'panel/global/settings-site-identity' );
@@ -22,4 +35,8 @@ export default class TemplatesModule extends elementorModules.editor.utils.Modul
 
 		return commonControls;
 	}
+
+	isEhpDocument() {
+		return [ 'ehp-footer', 'ehp-header' ].includes( elementor.config.document.type );
+	}
 }

modules/template-parts/assets/scss/editor.scss

@@ -0,0 +1,3 @@
+@import "../../../../assets/dev/scss/variables";
+@import 'editor/_template-modal';
+@import 'editor/_hello-plus-template-parts-preview';

modules/template-parts/assets/scss/editor/_template-modal.scss

@@ -0,0 +1,159 @@
+$remote-templates-items-space: 30px;
+
+.elementor-template-library-template-remote-ehp {
+	margin: calc( #{$remote-templates-items-space} / 2 );
+	padding: 8px;
+	border: var(--e-a-border);
+	border-radius: 3px;
+
+	&:hover {
+		background-color: var(--e-a-bg-hover);
+
+		.elementor-template-library-template-name {
+			display: none;
+		}
+	}
+
+	&:not(:hover) {
+
+		.elementor-template-library-template-preview {
+			opacity: 0;
+		}
+
+		.elementor-template-library-favorite,
+		.elementor-template-library-template-action {
+			display: none;
+		}
+	}
+
+	&.elementor-template-library-pro-template {
+
+		.elementor-template-library-template-body:before {
+			content: var( --elementor-template-library-subscription-plan-label );
+			background-color: var(--e-a-color-accent);
+			color: var(--e-a-color-white);
+			position: absolute;
+			text-transform: uppercase;
+			line-height: 1;
+			top: 5px;
+			@include end(5px);
+			padding: 3px 5px;
+			font-size: 8px;
+			border-radius: 2px;
+		}
+	}
+
+	// For blocks
+	&:not(.elementor-template-library-template-page):not(.elementor-template-library-template-lp) {
+		position: relative;
+		width: calc(33.333% - #{$remote-templates-items-space});
+		overflow: hidden;
+
+		img {
+			display: block;
+			width: 100%;
+		}
+
+		.elementor-template-library-template-footer {
+			position: absolute;
+			width: 100%;
+			bottom: 0;
+			@include start(0);
+			padding: 10px;
+			background-color: var(--e-a-bg-default);
+			transition: transform .5s;
+		}
+
+		.elementor-template-library-template-name {
+			display: none;
+		}
+
+		&:not(:hover) {
+
+			.elementor-template-library-template-footer {
+				transform: translateY(100%)
+			}
+		}
+	}
+
+	.elementor-template-library-template-body {
+		position: relative;
+	}
+
+	@media (max-width: $editor-screen-lg-min) {
+
+		.elementor-template-library-template-body {
+			height: 300px;
+		}
+	}
+
+	.elementor-template-library-template-screenshot {
+		height: 100%;
+		background-size: cover;
+		background-position-x: 50%;
+		box-shadow: inset 0px -2px 15px -6px rgba(0, 0, 0, 0.07);
+	}
+
+	.elementor-template-library-template-preview {
+		position: absolute;
+		inset: 0;
+		background-color: rgba(0,0,0,.5);
+		transition: opacity .5s;
+		cursor: pointer;
+
+		i {
+			font-size: 20px;
+			@include absolute-center;
+		}
+	}
+
+	.elementor-template-library-template-footer {
+		display: flex;
+		justify-content: space-between;
+		font-size: 11px;
+		line-height: 1;
+		height: 40px;
+		align-items: center;
+	}
+
+	.elementor-template-library-template-name {
+		text-align: start;
+		flex-grow: 1;
+		@include ellipsis;
+		padding-inline-end: 5px;
+	}
+
+	.elementor-template-library-favorite {
+		margin-inline-start: auto;
+	}
+
+	.elementor-template-library-template-favorite-input {
+		display: none;
+
+		&:checked {
+
+			+ .elementor-template-library-template-favorite-label {
+
+				i {
+
+					&:before {
+						content: '\e93f';
+						color: var(--e-a-color-primary-bold);
+					}
+				}
+			}
+		}
+	}
+
+	.elementor-template-library-template-favorite-label {
+		font-size: 15px;
+		cursor: pointer;
+
+		&:hover {
+
+			i {
+				color: var(--e-a-color-primary-bold);
+			}
+		}
+	}
+}