← All changes | admin/templates/popup-settings-preview.php +104 -12 3.3.0 → 4.1.2 View file →

		@@ -1,5 +1,7 @@
1	1	<?php
	2	+if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
	3	+
2	4	/**
3	5	* The preview poupup in the settings page
4	6	* @since 1.0.0
5	7	*/
		@@ -4,26 +6,99 @@
4	6	* @since 1.0.0
5	7	*/
6	8	?>
7	9	<div class="quickwebp-preview">
	10	+ <div class="quickwebp-preview__demo">
	11	+ <div class="quickwebp-preview__demo__top">
	12	+ <div class="quickwebp-preview__demo__top__left">
	13	+ <div class="quickwebp-preview__demo__top__left__image">
	14	+ <img src="<?php echo esc_url( QUICKWEBP_PLUGIN_URL . 'public/assets/img/preview.jpg' ); ?>" alt="Preview" />
	15	+ <div class="quickwebp-preview__demo__top__left__image__edit">
	16	+ <?php echo wp_kses( file_get_contents( QUICKWEBP_PLUGIN_PATH . 'public/assets/svg/edit-square-outline.svg' ), quickwebp_allowed_tags_for_svg_files() ); ?>
	17	+ </div>
	18	+ </div>
	19	+ </div>
	20	+ <div class="quickwebp-preview__demo__top__right">
	21	+ <div class="quickwebp-preview__demo__top__right__title"><?php esc_html_e( 'Preview on your typical photo', 'quickwebp' ); ?></div>
	22	+ <div class="quickwebp-preview__demo__top__right__info"><?php echo esc_html( $preview_image_data['name'] ); ?> · <?php echo esc_html( $preview_image_data['size'] ); ?> · <?php echo esc_html( $preview_image_data['dimensions'] ); ?></div>
	23	+ <div class="quickwebp-preview__demo__top__right__details webp <?php echo ( '1' == $conversion ) ? 'selected' : ''; ?>">
	24	+ <?php echo wp_kses_post( sprintf(
	25	+ // translators: %s is the amount of space saved by converting to WebP format.
	26	+ __( 'WebP saves %s on this photo', 'quickwebp' ), '<span class="value">' . esc_html( $preview_image_data_webp['save'] ) . '</span>'
	27	+ ) ); ?>
	28	+ </div>
	29	+ <div class="quickwebp-preview__demo__top__right__details avif <?php echo ( '2' == $conversion ) ? 'selected' : ''; ?>">
	30	+ <?php echo wp_kses_post( sprintf(
	31	+ // translators: %s is the amount of space saved by converting to AVIF format.
	32	+ __( 'AVIF saves %s on this photo', 'quickwebp' ), '<span class="value">' . esc_html( $preview_image_data_avif['save'] ) . '</span>'
	33	+ ) ); ?>
	34	+ </div>
	35	+ </div>
	36	+ </div>
	37	+ <div class="quickwebp-preview__demo__bottom">
	38	+ <div class="quickwebp-preview__demo__bottom__item">
	39	+ <div class="quickwebp-preview__demo__bottom__item__title"><?php esc_html_e( 'Original', 'quickwebp' ); ?></div>
	40	+ <div class="quickwebp-preview__demo__bottom__item__progress">
	41	+ <div class="quickwebp-preview__demo__bottom__item__progress__bar original"><?php echo esc_html( $preview_image_data['size'] ); ?></div>
	42	+ </div>
	43	+ <div class="quickwebp-preview__demo__bottom__item__info">
	44	+ <div class="quickwebp-preview__demo__bottom__item__info__save"><?php esc_html_e( '0% saved', 'quickwebp' ); ?></div>
	45	+ <div class="quickwebp-preview__demo__bottom__item__info__desc"><?php esc_html_e( 'No compression applied', 'quickwebp' ); ?></div>
	46	+ </div>
	47	+ </div>
8	48
9		- <div class="quickwebp-preview__open">
10		- <button class="quickwebp-preview__open__btn button button-secondary"><?php _e( 'Preview', QUICKWEBP_TEXT_DOMAIN ); ?></button>
11		- </div>
	49	+ <div class="quickwebp-preview__demo__bottom__item webp <?php echo ( '1' == $conversion ) ? 'selected' : ''; ?>">
	50	+ <div class="quickwebp-preview__demo__bottom__item__title"><?php esc_html_e( 'WebP', 'quickwebp' ); ?></div>
	51	+ <div class="quickwebp-preview__demo__bottom__item__progress">
	52	+ <div class="quickwebp-preview__demo__bottom__item__progress__bar webp" style="width: <?php echo esc_attr( $preview_image_data_webp['percent'] ); ?>;"><?php echo esc_html( $preview_image_data_webp['size'] ); ?></div>
	53	+ </div>
	54	+ <div class="quickwebp-preview__demo__bottom__item__info">
	55	+ <div class="quickwebp-preview__demo__bottom__item__info__save webp tag">
	56	+ <span class="value"><?php echo esc_html( $preview_image_data_webp['save_percent'] ); ?></span>
	57	+ <span class="small"><?php esc_html_e( 'on this photo', 'quickwebp' ); ?></span>
	58	+ </div>
	59	+ <div class="quickwebp-preview__demo__bottom__item__info__desc"><?php esc_html_e( '≈ −30% on average across a site', 'quickwebp' ); ?></div>
	60	+ </div>
	61	+ <div class="quickwebp-preview__demo__bottom__item__check">
	62	+ <?php echo wp_kses( file_get_contents( QUICKWEBP_PLUGIN_PATH . 'public/assets/svg/check.svg' ), quickwebp_allowed_tags_for_svg_files() ); ?>
	63	+ </div>
	64	+ </div>
12	65
	66	+ <div class="quickwebp-preview__demo__bottom__item avif <?php echo ( '2' == $conversion ) ? 'selected' : ''; ?> <?php echo ( ! $license_valid ) ? 'quickwebp__pro-popup-open' : ''; ?>">
	67	+ <div class="quickwebp-preview__demo__bottom__item__title"><?php esc_html_e( 'AVIF', 'quickwebp' ); ?></div>
	68	+ <div class="quickwebp-preview__demo__bottom__item__progress">
	69	+ <div class="quickwebp-preview__demo__bottom__item__progress__bar avif" style="width: <?php echo esc_attr( $preview_image_data_avif['percent'] ); ?>;"><?php echo esc_html( $preview_image_data_avif['size'] ); ?></div>
	70	+ </div>
	71	+ <div class="quickwebp-preview__demo__bottom__item__info">
	72	+ <div class="quickwebp-preview__demo__bottom__item__info__save avif tag">
	73	+ <span class="value"><?php echo esc_html( $preview_image_data_avif['save_percent'] ); ?></span>
	74	+ <span class="small"><?php esc_html_e( 'on this photo', 'quickwebp' ); ?></span>
	75	+ </div>
	76	+ <div class="quickwebp-preview__demo__bottom__item__info__desc"><?php esc_html_e( '≈ −50% on average across a site', 'quickwebp' ); ?></div>
	77	+ </div>
	78	+ <?php if ( ! $license_valid ): ?>
	79	+ <div class="quickwebp-preview__demo__bottom__item__pro"><?php esc_html_e( 'Pro', 'quickwebp' ); ?></div>
	80	+ <?php endif; ?>
	81	+ <div class="quickwebp-preview__demo__bottom__item__check">
	82	+ <?php echo wp_kses( file_get_contents( QUICKWEBP_PLUGIN_PATH . 'public/assets/svg/check.svg' ), quickwebp_allowed_tags_for_svg_files() ); ?>
	83	+ </div>
	84	+ </div>
	85	+ </div>
	86	+ </div>
	87	+
13	88	<div class="quickwebp-preview__popup">
14	89
15		- <div class="quickwebp-preview__popup__file show">
	90	+ <div class="quickwebp-preview__popup__file">
16	91
17	92	<div class="quickwebp-preview__popup__file__btn">
18		- <?php echo file_get_contents( QUICKWEBP_PLUGIN_PATH . 'public/assets/svg/add-img.svg' ); ?>
19		- <span><?php _e( 'Add image', QUICKWEBP_TEXT_DOMAIN ); ?></span>
	93	+ <?php echo wp_kses( file_get_contents( QUICKWEBP_PLUGIN_PATH . 'public/assets/svg/add-img.svg' ), quickwebp_allowed_tags_for_svg_files() ); ?>
	94	+ <span><?php esc_html_e( 'Add image', 'quickwebp' ); ?></span>
20	95	</div>
21	96
22	97	<input type="file" class="quickwebp-preview__popup__file__input" accept='image/*'>
23	98	</div>
24	99
25		- <div class="quickwebp-preview__popup__compare">
	100	+ <div class="quickwebp-preview__popup__compare show">
26	101
27	102	<div class="quickwebp-preview__popup__compare__images">
28	103	<div class="quickwebp-preview__popup__compare__images__original">
29	104	<div class="image"></div>
		@@ -34,9 +109,9 @@
34	109	</div>
35	110
36	111	<div class="quickwebp-preview__popup__compare__handle">
37	112	<div class="quickwebp-preview__popup__compare__handle__svg">
38		- <?php echo file_get_contents( QUICKWEBP_PLUGIN_PATH . 'public/assets/svg/resize.svg' ); ?>
	113	+ <?php echo wp_kses( file_get_contents( QUICKWEBP_PLUGIN_PATH . 'public/assets/svg/resize.svg' ), quickwebp_allowed_tags_for_svg_files() ); ?>
39	114	</div>
40	115	</div>
41	116
42	117	<div class="quickwebp-preview__popup__compare__data">
		@@ -41,9 +116,9 @@
41	116
42	117	<div class="quickwebp-preview__popup__compare__data">
43	118
44	119	<div class="quickwebp-preview__popup__compare__data__original">
45		- <div class="quickwebp-preview__popup__compare__data__original__type"><?php _e( 'Original Image', QUICKWEBP_TEXT_DOMAIN ); ?></div>
	120	+ <div class="quickwebp-preview__popup__compare__data__original__type"><?php esc_html_e( 'Original Image', 'quickwebp' ); ?></div>
46	121	<div class="quickwebp-preview__popup__compare__data__original__size"></div>
47	122	</div>
48	123
49	124	<div class="quickwebp-preview__popup__compare__data__new">
		@@ -53,8 +128,20 @@
53	128	</div>
54	129
55	130	</div>
56	131
	132	+ <div class="quickwebp-preview__popup__compare__zoom">
	133	+ <div class="quickwebp-preview__popup__compare__zoom__btn minus">
	134	+ <?php echo wp_kses( file_get_contents( QUICKWEBP_PLUGIN_PATH . 'public/assets/svg/minus.svg' ), quickwebp_allowed_tags_for_svg_files() ); ?>
	135	+ </div>
	136	+ <div class="quickwebp-preview__popup__compare__zoom__value">
	137	+ <div class="quickwebp-preview__popup__compare__zoom__value__text">100</div>
	138	+ <div class="quickwebp-preview__popup__compare__zoom__value__unit">%</div>
	139	+ </div>
	140	+ <div class="quickwebp-preview__popup__compare__zoom__btn plus">
	141	+ <?php echo wp_kses( file_get_contents( QUICKWEBP_PLUGIN_PATH . 'public/assets/svg/plus.svg' ), quickwebp_allowed_tags_for_svg_files() ); ?>
	142	+ </div>
	143	+ </div>
57	144	</div>
58	145
59	146	<div class="quickwebp-preview__popup__spiner">
60	147	<div class="quickwebp-preview__popup__spiner__circle"></div>
		@@ -60,10 +147,15 @@
60	147	<div class="quickwebp-preview__popup__spiner__circle"></div>
61	148	</div>
62	149
63	150	<div class="quickwebp-preview__popup__close">
64		- <button class="quickwebp-preview__popup__close__btn"><?php echo file_get_contents( QUICKWEBP_PLUGIN_PATH . 'public/assets/svg/close.svg' ); ?></button>
	151	+ <button class="quickwebp-preview__popup__close__btn"><?php echo wp_kses( file_get_contents( QUICKWEBP_PLUGIN_PATH . 'public/assets/svg/close.svg' ), quickwebp_allowed_tags_for_svg_files() ); ?></button>
65	152	</div>
66	153
	154	+ <div class="quickwebp-preview__popup__replace show">
	155	+ <div class="quickwebp-preview__popup__replace__btn">
	156	+ <?php echo wp_kses( file_get_contents( QUICKWEBP_PLUGIN_PATH . 'public/assets/svg/add-img.svg' ), quickwebp_allowed_tags_for_svg_files() ); ?>
	157	+ <span><?php esc_html_e( 'Replace image', 'quickwebp' ); ?></span>
	158	+ </div>
	159	+ </div>
67	160	</div>
68		-
69		-</div>
	161	+</div>