visual-attribute-color-picker.js — WooCommerce 10.9.4

woocommerce / assets / client / admin / wp-admin-scripts / visual-attribute-color-picker.js

woocommerce / assets / client / admin / wp-admin-scripts Last commit date

visual-attribute-color-picker.js

2 lines

/*! For license information please see visual-attribute-color-picker.js.LICENSE.txt */

(()=>{"use strict";var e={94931:(e,t,n)=>{var r=n(51609),o=Symbol.for("react.element"),a=Symbol.for("react.fragment"),i=Object.prototype.hasOwnProperty,c=r.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,s={key:!0,ref:!0,__self:!0,__source:!0};function l(e,t,n){var r,a={},l=null,u=null;for(r in void 0!==n&&(l=""+n),void 0!==t.key&&(l=""+t.key),void 0!==t.ref&&(u=t.ref),t)i.call(t,r)&&!s.hasOwnProperty(r)&&(a[r]=t[r]);if(e&&e.defaultProps)for(r in t=e.defaultProps)void 0===a[r]&&(a[r]=t[r]);return{$$typeof:o,type:e,key:l,ref:u,props:a,_owner:c.current}}t.Fragment=a,t.jsx=l,t.jsxs=l},39793:(e,t,n)=>{e.exports=n(94931)},51609:e=>{e.exports=window.React}},t={};const n=window.wp.components,r=window.wp.element,o=window.wp.i18n,a="input.wc-admin-visual-attribute-color-input",i="input.wc-admin-visual-attribute-image-input",c=(e,t)=>{const n=HTMLInputElement.prototype,r=Object.getOwnPropertyDescriptor(n,"value");let o=!1;return r?.get&&r.set&&(Object.defineProperty(e,"value",{...r,configurable:!0,set(e){r.set?.call(this,e),t(e)}}),o=!0),()=>{o&&delete e.value}},s=e=>{e.value&&(e.value="",e.dispatchEvent(new Event("input",{bubbles:!0})),e.dispatchEvent(new Event("change",{bubbles:!0})))},l=(e,t)=>{const n=((e,t)=>{const n=(e.closest("form")||e.closest(".wc-add-attribute-term-fields")||document).querySelector(t);return n instanceof HTMLInputElement?n:null})(e,t);n&&s(n)};var u=function n(r){var o=t[r];if(void 0!==o)return o.exports;var a=t[r]={exports:{}};return e[r](a,a.exports,n),a.exports}(39793);const d=e=>(e.value||e.getAttribute("value")||"").trim(),m=({input:e})=>{const[t,n]=(0,r.useState)(()=>d(e)),[i,m]=(0,r.useState)(""),[p,b]=(0,r.useState)(!1),f=(0,r.useRef)(null),v=(0,r.useRef)(null);(0,r.useEffect)(()=>c(e,e=>{const t=e.trim();n(t),t||m("")}),[e]),(0,r.useEffect)(()=>{d(e)!==t&&(e.value=t,e.dispatchEvent(new Event("input",{bubbles:!0})),e.dispatchEvent(new Event("change",{bubbles:!0})))},[t,e]),(0,r.useEffect)(()=>{let e=!0;if(!t)return m(""),()=>{e=!1};const n=Number.parseInt(t,10);if(Number.isNaN(n)||n<=0)return m(""),()=>{e=!1};const r=window.wp.media.attachment(n);return r.fetch().then(()=>{if(!e)return;const t=r.get("sizes"),n=t?.thumbnail?.url||r.get("url")||"";m(n)}).catch(()=>{e&&m("")}),()=>{e=!1}},[t]);const w=Number.parseInt(t,10)>0,y=w?(0,o.__)("Change image","woocommerce"):(0,o.__)("Select an image","woocommerce");return(0,u.jsxs)(u.Fragment,{children:[(0,u.jsxs)("button",{ref:f,type:"button",className:"wc-admin-visual-attribute-image-picker-trigger",onClick:()=>{let t=v.current;t||(t=window.wp.media({title:(0,o.__)("Choose an image","woocommerce"),button:{text:(0,o.__)("Use image","woocommerce")},library:{type:"image"},multiple:!1}),t.on("select",()=>{const r=t?.state().get("selection");if(!r?.first)return;const o=r.first().toJSON();o?.id&&(t=>{const r=String(t.id),o=t.sizes?.thumbnail?.url||t.url||"";n(r),m(o),l(e,a)})(o)}),t.on("open",()=>b(!0)),t.on("close",()=>b(!1)),v.current=t),t.open()},"aria-haspopup":"dialog","aria-expanded":p,children:[(0,u.jsx)("span",{className:"wc-admin-image-swatch"+(i?"":" is-empty"),"aria-hidden":"true",children:i?(0,u.jsx)("img",{src:i,alt:""}):null}),(0,u.jsx)("span",{children:y})]}),w&&(0,u.jsx)("button",{type:"button",className:"button-link wc-admin-visual-attribute-image-picker-clear",onClick:()=>{n(""),m(""),s(e)},children:(0,o.__)("Clear","woocommerce")})]})},p="color",b="image",f=(e,t)=>{const n=e.querySelector(".wc-admin-visual-attribute-color"),r=e.querySelector(".wc-admin-visual-attribute-image");n instanceof HTMLElement&&(n.hidden=t!==p),r instanceof HTMLElement&&(r.hidden=t!==b)},v=e=>"string"==typeof e&&e?e.trim().toLowerCase():"",w=({input:e})=>{const[t,a]=(0,r.useState)(()=>(e=>v(e.value||e.getAttribute("value")||""))(e)),[s,d]=(0,r.useState)(!1),m=(0,r.useRef)(null);(0,r.useEffect)(()=>c(e,e=>{const t=v(e);a(t)}),[e]),(0,r.useEffect)(()=>{v(e.value)!==t&&(e.value=t,e.dispatchEvent(new Event("input",{bubbles:!0})),e.dispatchEvent(new Event("change",{bubbles:!0})))},[t,e]);const p=t?t.toUpperCase():(0,o.__)("Select a color","woocommerce"),b=t||"#000000";return(0,u.jsxs)(u.Fragment,{children:[(0,u.jsxs)("button",{ref:m,type:"button",className:"wc-admin-visual-attribute-color-picker-trigger",onClick:()=>d(!0),"aria-haspopup":"dialog","aria-expanded":s,children:[(0,u.jsx)("span",{className:"wc-admin-color-swatch"+(t?"":" is-empty"),style:t?{backgroundColor:t}:void 0,"aria-hidden":"true"}),(0,u.jsx)("span",{children:p})]}),t&&(0,u.jsx)("button",{type:"button",className:"button-link wc-admin-visual-attribute-color-picker-clear",onClick:()=>{a(""),d(!1)},children:(0,o.__)("Clear","woocommerce")}),s&&m.current&&(0,u.jsx)(n.Popover,{anchor:m.current,onClose:()=>d(!1),placement:"bottom-start",children:(0,u.jsx)(n.ColorPicker,{color:b,onChange:t=>{const n=v(t);n&&l(e,i),a(n)}})})]})},y=(e=document)=>{((e=document)=>{e.querySelectorAll(a).forEach(e=>{e instanceof HTMLInputElement&&(e=>{if("1"===e.dataset.wcColorPickerMounted)return;e.dataset.wcColorPickerMounted="1",e.style.height="0",e.style.width="0",e.style.position="absolute",e.style.top="0",e.style.left="0",e.style.opacity="0",e.style.visibility="hidden",e.style.pointerEvents="none",e.style.userSelect="none";const t=document.createElement("div");t.className="wc-admin-visual-attribute-color-picker-root",e.insertAdjacentElement("beforebegin",t),(0,r.createRoot)(t).render((0,u.jsx)(w,{input:e})),(e.labels?Array.from(e.labels):[]).forEach(e=>{e.addEventListener("click",e=>{e.preventDefault();const n=t.querySelector(".wc-admin-visual-attribute-color-picker-trigger");n?.click()})})})(e)})})(e),((e=document)=>{e.querySelectorAll(i).forEach(e=>{e instanceof HTMLInputElement&&(e=>{if("1"===e.dataset.wcImagePickerMounted)return;e.dataset.wcImagePickerMounted="1",e.style.height="0",e.style.width="0",e.style.position="absolute",e.style.top="0",e.style.left="0",e.style.opacity="0",e.style.visibility="hidden",e.style.pointerEvents="none",e.style.userSelect="none";const t=document.createElement("div");t.className="wc-admin-visual-attribute-image-picker-root",e.insertAdjacentElement("beforebegin",t),(0,r.createRoot)(t).render((0,u.jsx)(m,{input:e})),(e.labels?Array.from(e.labels):[]).forEach(e=>{e.addEventListener("click",e=>{e.preventDefault();const n=t.querySelector(".wc-admin-visual-attribute-image-picker-trigger");n?.click()})})})(e)})})(e),((e=document)=>{e.querySelectorAll(".wc-admin-visual-attribute-type").forEach(e=>{e instanceof HTMLElement&&(e=>{const t=e.closest("form");if(!t)return;const n=t.querySelector(i),r=Array.from(t.querySelectorAll('input[name="wc_visual_attribute_type"]'));if(!(n instanceof HTMLInputElement)||0===r.length)return;const o=(e=>{const t=e.value||e.getAttribute("value")||"";return Number.parseInt(t,10)>0})(n)?b:p;r.forEach(e=>{e.checked=e.value===o,e.addEventListener("change",()=>{const n=e.value===b?b:p;e.checked&&f(t,n)})}),f(t,o)})(e)})})(e)};y(),new MutationObserver(e=>{e.forEach(e=>{e.addedNodes.forEach(e=>{e instanceof HTMLElement&&y(e)})})}).observe(document.body,{childList:!0,subtree:!0}),(window.wc=window.wc||{}).visualAttributeColorPicker={}})();