feat(SLB-442): improve preview ui

AmazeeLabs · Jun 27, 2024 · 8b89c58 · 8b89c58
1 parent 0da6caf
commit 8b89c58
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 33 deletions.
diff --git a/packages/drupal/gutenberg_blocks/css/edit.css b/packages/drupal/gutenberg_blocks/css/edit.css
@@ -129,3 +129,40 @@
 .gutenberg__editor .drupal-preview-sidebar--header button {
   margin-right: 5px;
 }
+
+.gutenberg__editor .drupal-preview-sidebar--header select {
+  min-width: 350px;
+  position: relative;
+  appearance: none;
+  -webkit-appearance: none;
+  padding: 0.455em 6em 0.575em 1em;
+  background-color: #fff;
+  border: 1px solid #caced1;
+  border-radius: 0.25rem;
+  color: #000;
+  cursor: pointer;
+}
+
+/* Preview select */
+.gutenberg__editor .drupal-preview-sidebar--header select::before,
+.gutenberg__editor .drupal-preview-sidebar--header select::after {
+  --size: 0.3rem;
+  content: "";
+  position: absolute;
+  right: 1rem;
+  pointer-events: none;
+}
+
+.gutenberg__editor .drupal-preview-sidebar--header select::before {
+  border-left: var(--size) solid transparent;
+  border-right: var(--size) solid transparent;
+  border-bottom: var(--size) solid black;
+  top: 40%;
+}
+
+.gutenberg__editor .drupal-preview-sidebar--header select::after {
+  border-left: var(--size) solid transparent;
+  border-right: var(--size) solid transparent;
+  border-top: var(--size) solid black;
+  top: 55%;
+}
diff --git a/packages/drupal/gutenberg_blocks/src/preview.ts b/packages/drupal/gutenberg_blocks/src/preview.ts
@@ -22,42 +22,35 @@
                 id: 'tablet',
                 width: 768,
                 height: 1024,
-                iconPath:
-                  '/modules/contrib/silverback_external_preview/icons/tablet.svg',
               },
               {
                 label: Drupal.t('Laptop'),
                 id: 'laptop',
                 width: 1366,
                 height: 786,
-                iconPath:
-                  '/modules/contrib/silverback_external_preview/icons/laptop.svg',
               },
               {
                 label: Drupal.t('Desktop'),
                 id: 'desktop',
                 width: 1920,
                 height: 1080,
-                iconPath:
-                  '/modules/contrib/silverback_external_preview/icons/desktop.svg',
-              },
-              {
-                label: Drupal.t('Full'),
-                id: 'full',
-                width: -1,
-                height: -1,
-                iconPath:
-                  '/modules/contrib/silverback_external_preview/icons/full.svg',
               },
             ];
 
-            let previewButtons = '';
-            previewSizes.forEach((size) => {
-              previewButtons += `
-                <button
-                  class="components-button is-primary drupal-preview-sidebar--button__${size.id}" 
-                >${size.label}</button>`;
-            });
+            const previewButton = `<button class="components-button is-primary external-preview">${Drupal.t('Preview')} ↗</button>`
+
+            const getPreviewSelect = () => {
+              let previewSelect = '<select class="external-preview">';
+              previewSizes.forEach((size) => {
+                if (size.width <= window.screen.width) {
+                  const selectOption = `<option value="${size.id}">${size.label} (${size.width} x ${size.height})</option>`;
+                  previewSelect += selectOption;
+                }
+              });
+              previewSelect += '</select>';
+              return previewSelect;
+            }
+            const previewSelect = getPreviewSelect();
 
             const previewSidebarMarkup = `
               <div class="interface-interface-skeleton__secondary-sidebar drupal-preview-sidebar" role="region" aria-label="Drupal preview" tabindex="-1">
@@ -80,7 +73,7 @@
                   </div>
                   <div class="drupal-preview-sidebar components-panel">
                     <div class="drupal-preview-sidebar--header">
-                      ${previewButtons}
+                      ${previewSelect} ${previewButton}
                     </div>
                     <div class="drupal-preview-sidebar--iframe-wrapper">
                       <iframe width="100%" height="800px" 
@@ -102,17 +95,26 @@
                   $('.drupal-preview-sidebar').remove();
                 },
               );
-              previewSizes.forEach((size) => {
-                $('.drupal-preview-sidebar--button__' + size.id).on(
-                  'click',
-                  function () {
-                    const windowFeatures =
-                      size.width !== -1 && size.height !== -1
-                        ? `resizable,height=${size.height},width=${size.width}`
-                        : `resizable,height=${screen.height},width=${screen.width}`;
-                    window.open(previewUrl, 'preview', windowFeatures);
-                  },
-                );
+
+              const $previewButton = $('button.external-preview');
+              $('select.external-preview').on(
+                'change',
+                function (event: Event) {
+                  const selectedSize = $(event.target).val();
+                  const size = previewSizes.find((size) => size.id === selectedSize);
+                  if (!size) {
+                    return;
+                  }
+                  $previewButton.data('windowHeight', size.height);
+                  $previewButton.data('windowWidth', size.width);
+                },
+              ).trigger('change');
+              $previewButton.on('click', function (event: Event) {
+                const target = $(event.target);
+                const windowWidth = target.data('windowWidth');
+                const windowHeight = target.data('windowHeight');
+                const windowFeatures = `resizable,height=${windowHeight},width=${windowWidth}`;
+                window.open(previewUrl, 'preview', windowFeatures);
               });
             } else {
               $('.drupal-preview-sidebar').remove();