feat: allow to pick an image

adobe · Jun 14, 2022 · c5c2469 · c5c2469
1 parent 6c3e490
commit c5c2469
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 54 deletions.
diff --git a/css/inspect/inspect.css b/css/inspect/inspect.css
@@ -1,28 +1,3 @@
-.inspect .brand {
-  /* display: grid; */
-  /* grid-template-columns: auto auto auto; */
-  /* padding: 10px; */
-}
-
-.inspect .brand > div {
-  /* min-width: 200px; */
-}
-
-.inspect .preview {
-  /* width: 100%; */
-  /* height: 600px; */
-  /* overflow: hidden; */
-}
-
-.inspect iframe {
-  /* height: calc(100% / .50); */
-  /* width: calc(100% / .50); */
-  /* transform: scale(0.45); */
-  /* transform-origin: 0 0; */
-  /* background-color: white; */
-  /* overflow-x: auto; */
-}
-
-.vars {
-  /* margin-left: 20px */
+.inspect sp-asset img {
+  max-height: 300px;
 }
diff --git a/index.html b/index.html
@@ -195,24 +195,15 @@ <h3>Page preview</h3>
                             <sp-tab label="Colors" value="inspect-colors"></sp-tab>
                             <sp-tab label="Fonts & sizes" value="inspect-fonts-sizes"></sp-tab>
                             <sp-tab-panel value="inspect-logo">
-                                <div>
-                                    <sp-dropzone id="inspect-dropzone">
-                                        <sp-illustrated-message heading="Drag&nbsp;and&nbsp;drop your&nbsp;logo">
-                                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 103">
-                                                <path d="M133.7,8.5h-118c-1.9,0-3.5,1.6-3.5,3.5v27c0,0.8,0.7,1.5,1.5,1.5s1.5-0.7,1.5-1.5V23.5h119V92c0,0.3-0.2,0.5-0.5,0.5h-118c-0.3,0-0.5-0.2-0.5-0.5V69c0-0.8-0.7-1.5-1.5-1.5s-1.5,0.7-1.5,1.5v23c0,1.9,1.6,3.5,3.5,3.5h118c1.9,0,3.5-1.6,3.5-3.5V12C137.2,10.1,135.6,8.5,133.7,8.5z M15.2,21.5V12c0-0.3,0.2-0.5,0.5-0.5h118c0.3,0,0.5,0.2,0.5,0.5v9.5H15.2z M32.6,16.5c0,0.6-0.4,1-1,1h-10c-0.6,0-1-0.4-1-1s0.4-1,1-1h10C32.2,15.5,32.6,15.9,32.6,16.5z M13.6,56.1l-8.6,8.5C4.8,65,4.4,65.1,4,65.1c-0.4,0-0.8-0.1-1.1-0.4c-0.6-0.6-0.6-1.5,0-2.1l8.6-8.5l-8.6-8.5c-0.6-0.6-0.6-1.5,0-2.1c0.6-0.6,1.5-0.6,2.1,0l8.6,8.5l8.6-8.5c0.6-0.6,1.5-0.6,2.1,0c0.6,0.6,0.6,1.5,0,2.1L15.8,54l8.6,8.5c0.6,0.6,0.6,1.5,0,2.1c-0.3,0.3-0.7,0.4-1.1,0.4c-0.4,0-0.8-0.1-1.1-0.4L13.6,56.1z"
-                                                ></path>
-                                            </svg>
-                                        </sp-illustrated-message>
-                                        <div>
-                                            <label for="inspect-file-input">
-                                                <sp-link onclick="this.parentElement.nextElementSibling.click()">Select a logo</sp-link> from your computer</label>
-                                            <input type="file" id="file-input" style="display: none" />
-                                        </div>
-                                    </sp-dropzone>
-                                    <sp-asset class="hidden">
-                                        <img/>
-                                    </sp-thumbnail>
-                                </div>
+                              <div class="field-group">
+                                <sp-field-label for="inspect-select-logo" side-aligned="start">Select an image</sp-field-label>
+                                <sp-action-button for="inspect-select-logo" data-picker="img" disabled>
+                                  <sp-icon-anchor-select></sp-icon-anchor-select>
+                                </sp-action-button>
+                                <sp-asset id="inspect-select-logo" class="hidden">
+                                  <img/>
+                                </sp-asset>
+                              </div>
                             </sp-tab-panel>
                             <sp-tab-panel value="inspect-colors">
                                 <div>

diff --git a/js/inspect/inspect.ui.js b/js/inspect/inspect.ui.js
@@ -14,6 +14,8 @@ const CONTENT_FRAME = document.querySelector(`${PARENT_SELECTOR} #inspect-conten
 const VARS_PANEL = document.querySelector(VARS_PARENT_SELECTOR);
 const VARS_FIELDS = document.querySelectorAll(`${VARS_PARENT_SELECTOR} sp-textfield`);
 const PICKERS = document.querySelectorAll(`${VARS_PARENT_SELECTOR} sp-action-button`);
+const LOGO_FIELD = document.querySelector(`${PARENT_SELECTOR} #inspect-select-logo`);
+const LOGO_IMG = document.querySelector(`${PARENT_SELECTOR} #inspect-select-logo img`);
 
 const config = {
   vars: {},
@@ -55,10 +57,10 @@ const doDrop = async () => {
       }
     });
 
-    document.querySelector('sp-dropzone').classList.add('hidden');
-    document.querySelector('sp-asset').classList.remove('hidden');
     COPYCSS_BUTTON.classList.remove('hidden');
-    document.querySelector('sp-asset img').src = vars.logo;
+
+    LOGO_FIELD.value = vars.logo;
+    LOGO_FIELD.handleChange();
 
     enablePickers();
   }, 2000);
@@ -68,6 +70,10 @@ const doDrop = async () => {
 
 const getStyle = (win, x, y, type) => {
   const element = win.document.elementFromPoint(x, y);
+  if (!element) return null;
+  if (type === 'img' && element.tagName === 'IMG') {
+    return element.src;
+  }
   const style = win.getComputedStyle(element);
   if (type === 'color') {
     return rgb2hex(style.getPropertyValue('color'));
@@ -81,6 +87,13 @@ const getStyle = (win, x, y, type) => {
   if (type === 'size') {
     return style.getPropertyValue('font-size');
   }
+  if (type === 'img') {
+    const bg = style.getPropertyValue('background-image');
+    if (bg.startsWith('url')) {
+      return bg.slice(5, -2);
+    }
+    return bg;
+  }
   return 'Unknown';
 };
 
@@ -97,10 +110,14 @@ const capture = (event) => {
 
 const saveCapture = (event) => {
   if (pickerField) {
-    const style = capture(event);
-    pickerField.value = style;
-    // pickerField.dispatchEvent(new window.top.CustomEvent('change', { value: style }));
-    pickerField.handleChange();
+    try {
+      const style = capture(event);
+      console.log('style', style);
+      pickerField.value = style;
+      pickerField.handleChange();
+    } catch (e) {
+      console.warning(`Error while trying to capture style: ${e.message}`);
+    }
   }
   event.preventDefault();
   event.stopPropagation();
@@ -114,7 +131,7 @@ const stopCapturing = () => {
   currentPicker.removeAttribute('selected');
   currentPicker.removeAttribute('emphasized');
   CONTENT_FRAME.contentDocument.removeEventListener('mousemove', capture);
-  CONTENT_FRAME.contentDocument.removeEventListener('mousedown', saveCapture);
+  CONTENT_FRAME.contentDocument.removeEventListener('click', saveCapture);
 };
 
 const startCapturing = (picker) => {
@@ -137,7 +154,7 @@ const startCapturing = (picker) => {
   currentPicker.setAttribute('selected', 'true');
   currentPicker.setAttribute('emphasized', 'true');
   CONTENT_FRAME.contentDocument.addEventListener('mousemove', capture);
-  CONTENT_FRAME.contentDocument.addEventListener('mousedown', saveCapture);
+  CONTENT_FRAME.contentDocument.addEventListener('click', saveCapture);
 };
 
 const doCopyCSS = async () => {
@@ -184,11 +201,22 @@ const attachListeners = () => {
 
     CONTENT_FRAME.src = `http://localhost:3001${url.pathname}?host=${url.origin}`;
   });
+
   PICKERS.forEach((picker) => {
     picker.addEventListener('click', () => {
       startCapturing(picker);
     });
   });
+
+  LOGO_FIELD.handleChange = () => {
+    const { value } = LOGO_FIELD;
+    if (value && value !== 'none') {
+      LOGO_IMG.src = value;
+      LOGO_FIELD.classList.remove('hidden');
+    } else {
+      LOGO_FIELD.classList.add('hidden');
+    }
+  };
 };
 
 const init = () => {