diff --git a/blocks/collapsible/src/render.php b/blocks/collapsible/src/render.php index 1b76ca21f..6a6a115d9 100644 --- a/blocks/collapsible/src/render.php +++ b/blocks/collapsible/src/render.php @@ -37,7 +37,7 @@ do_action('qm/debug', print_r($content, true)); -$icon = \PRC\Platform\Icons\Render('light', 'circle-plus');; +$icon = \PRC\Platform\Icons\Render('light', 'circle-plus'); if ( function_exists( 'apple_news_is_exporting' ) && apple_news_is_exporting() ) { // echo wp_sprintf(); diff --git a/blocks/form-input-select/build/index.css.map b/blocks/form-input-select/build/index.css.map new file mode 100644 index 000000000..6dc90beb2 --- /dev/null +++ b/blocks/form-input-select/build/index.css.map @@ -0,0 +1 @@ +{"version":3,"file":"index.css","mappings":";;;AAAA;;;;EAAA;AAMA;EACC;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,mDACC;AAFF;AAIC;EACC;EACA;EACA;EACA;EACA;EACA;AAFF,C","sources":["webpack://form-input-select/./src/editor.scss"],"sourcesContent":["/**\n * The following styles get applied inside the editor only.\n *\n * Replace them with your own styles or remove the file completely.\n */\n\n.wp-block-prc-block-form-input-select {\n\t--border-color: rgba(0, 0, 0, 0.2);\n\t--wp--custom--border-radius: 3px;\n\n\tflex-grow: 1;\n\ttext-align: left;\n\tvertical-align: top;\n\t-webkit-appearance: none;\n\tpadding: 9px 13px; // cribbed from core/button styling.\n\tborder: 1px solid transparent;\n\tborder-color: var(--border-color);\n\tborder-radius: var(--wp--custom--border-radius);\n\tbox-shadow: inset 0 0 0 0 transparent;\n\tbox-sizing: border-box;\n\twidth: 100%;\n\tmargin: 0;\n\toutline: none;\n\ttransition:\n\t\tcolor 0.1s ease,\n\t\tborder-color 0.1s ease;\n\t&[required]:after {\n\t\tcontent: \"*\";\n\t\tcolor: red;\n\t\tfont-size: 1.1em;\n\t\tposition: absolute;\n\t\ttop: 5px;\n\t\tright: 5px;\n\t}\n}\n"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/blocks/form-input-select/build/render.php b/blocks/form-input-select/build/render.php index e9cc6db41..6acdbd7f7 100644 --- a/blocks/form-input-select/build/render.php +++ b/blocks/form-input-select/build/render.php @@ -25,7 +25,7 @@ $input_attrs = \PRC\Platform\Block_Utils\get_block_html_attributes( array( 'id' => $input_id.'-input', 'role' => 'combobox', - 'type' => 'search', + 'type' => 'text', // we should make this "search" but how do we get rid of the "x" clear button? 'aria-controls' => $input_id.'-input', 'placeholder' => $input_placeholder, 'data-wp-bind--value' => 'context.label', diff --git a/blocks/form-input-select/build/style-index.css.map b/blocks/form-input-select/build/style-index.css.map new file mode 100644 index 000000000..c0d6649b3 --- /dev/null +++ b/blocks/form-input-select/build/style-index.css.map @@ -0,0 +1 @@ +{"version":3,"file":"./style-index.css","mappings":";;;AAAA;;;;;EAAA;AAOA;EAGC;AAFD;AAGC;EACC;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA,mDACC;AAJH;AAOC;EACC;EACA;EACA;EACA;EACA;EACA;AALF;AAQC;EAOC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAZF;AAcE;EACC;EACA;EACA;EACA;EACA;EACA;AAZH;AAaG;EACC;AAXJ;AAaG;EACC;EACA;AAXJ;AAaG;EAGC;EACA;EACA;AAbJ;AAiBC;EACC;AAfF;AAiBC;EACC;AAfF;AAkBC;EACC;UAAA;EACA;EACA;AAhBF;AAmBC;EACC;EACA;EACA;AAjBF,C","sources":["webpack://form-input-select/./src/style.scss"],"sourcesContent":["/**\n * The following styles get applied both on the front of your site\n * and in the editor.\n *\n * Replace them with your own styles or remove the file completely.\n */\n\n.wp-block-prc-block-form-input-select {\n\t// --border-color: rgba(0, 0, 0, 0.2);\n\t// --wp--custom--border-radius: 3px;\n\tposition: relative;\n\tinput {\n\t\tflex-grow: 1;\n\t\ttext-align: left;\n\t\tvertical-align: top;\n\t\t-webkit-appearance: none;\n\t\tpadding: 9px 13px; // cribbed from core/button styling.\n\t\tborder: 1px solid transparent;\n\t\t// border-color: var(--border-color);\n\t\t// border-radius: var(--wp--custom--border-radius);\n\t\tbox-shadow: inset 0 0 0 0 transparent;\n\t\tbox-sizing: border-box;\n\t\twidth: 100%;\n\t\tmargin: 0;\n\t\toutline: none;\n\t\ttransition:\n\t\t\tcolor 0.1s ease,\n\t\t\tborder-color 0.1s ease;\n\t}\n\t&[required]:after {\n\t\tcontent: \"*\";\n\t\tcolor: red;\n\t\tfont-size: 1.1em;\n\t\tposition: absolute;\n\t\ttop: 5px;\n\t\tright: 5px;\n\t}\n\n\t.wp-block-prc-block-form-input-select__list {\n\t\t// write some css for a listbox\n\t\t// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select\n\t\t// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option\n\t\t// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup\n\n\t\t// The listbox is a container for a list of options, which can be collapsed or expanded.\n\t\tposition: absolute;\n\t\tdisplay: inline-block;\n\t\twidth: 100%;\n\t\tmax-height: 200px;\n\t\tborder: 1px solid #ccc;\n\t\tborder-radius: 1px;\n\t\tbox-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15);\n\t\tbackground: var(--wp--preset--color--ui-white);\n\t\toverflow-y: auto;\n\t\tpadding: 0;\n\t\tmargin: 0;\n\t\t// gap: var(--block-gap);\n\t\t.wp-block-prc-block-form-input-select__list-item {\n\t\t\tdisplay: block;\n\t\t\tposition: relative;\n\t\t\tcursor: pointer;\n\t\t\tlist-style: none;\n\t\t\tpadding: 0.5em 1em;\n\t\t\tborder-bottom: 1px solid var(--wp--preset--color--ui-gray-light);\n\t\t\t&:last-of-type {\n\t\t\t\tborder-bottom: none;\n\t\t\t}\n\t\t\t&:hover {\n\t\t\t\tbackground: var(--wp--preset--color--ui-gray-light);\n\t\t\t\tcolor: var(--wp--preset--color--ui-gray-dark);\n\t\t\t}\n\t\t\t&:active,\n\t\t\t&.is-selected,\n\t\t\t&[aria-selected=\"true\"] {\n\t\t\t\tbackground: var(--wp--preset--color--ui-gray-very-light);\n\t\t\t\tcolor: var(--wp--preset--color--ui-text-color);\n\t\t\t\tfont-weight: bold;\n\t\t\t}\n\t\t}\n\t}\n\t&:not(.is-open) > ul[role=\"listbox\"] {\n\t\tdisplay: none;\n\t}\n\t&.is-open > ul[role=\"listbox\"] {\n\t\tz-index: 99999;\n\t}\n\n\tbutton {\n\t\tappearance: none;\n\t\tborder: none;\n\t\tbackground: transparent;\n\t}\n\n\t.wp-block-prc-block-form-input-select__button {\n\t\twidth: 100%;\n\t\tcursor: pointer;\n\t\ttext-align: left;\n\t}\n}\n"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/blocks/form-input-select/build/view.asset.php b/blocks/form-input-select/build/view.asset.php index aff1a1f05..5da956364 100644 --- a/blocks/form-input-select/build/view.asset.php +++ b/blocks/form-input-select/build/view.asset.php @@ -1 +1 @@ - array('@wordpress/interactivity', 'wp-polyfill'), 'version' => '934cd3eaf0f9446eec70', 'type' => 'module'); + array('@wordpress/interactivity', 'wp-polyfill'), 'version' => '6e8ad0a33bdcbbc9865e', 'type' => 'module'); diff --git a/blocks/form-input-select/build/view.js b/blocks/form-input-select/build/view.js index d4805cee1..6f6d199e4 100644 --- a/blocks/form-input-select/build/view.js +++ b/blocks/form-input-select/build/view.js @@ -1,2 +1,2 @@ -import*as e from"@wordpress/interactivity";var t={d:(e,o)=>{for(var n in o)t.o(o,n)&&!t.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:o[n]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)};const o=(l={getContext:()=>e.getContext,getElement:()=>e.getElement,store:()=>e.store},s={},t.d(s,l),s),{actions:n}=(0,o.store)("prc-block/form-input-select",{actions:{onOpen:()=>{(0,o.getContext)().isOpen=!0},onClose:(e=null)=>{null!==e&&e.preventDefault();const t=(0,o.getContext)();let n=!1;n||(n=!0,setTimeout((()=>{t.isOpen=!1,n=!1}),100))},onReset:()=>{const e=(0,o.getContext)();e.activeIndex=0,e.value="",e.label="",e.filteredOptions=e.options},getOptionByValue:e=>{console.log("getOptionByValue",e);const t=(0,o.getContext)(),{options:n}=t,l=n.find((t=>t.value===e));return l?{index:n.findIndex((e=>e.value===l.value)),...l}:null},moveThroughOptions:(e,t)=>{const n=(0,o.getContext)(),{activeIndex:l,filteredOptions:s}=n;let r=null;r=null===l||isNaN(l)?0:l+e,r<0&&(r=s.length-1),r>=s.length&&(r=0),s.forEach((e=>{e.isSelected=!1})),s[r].isSelected=!0,n.activeIndex=r,n.filteredOptions=s,console.log("moveThroughOptions",n,r,e)},setValueOnEnter:()=>{console.log("setting value on enter");const e=(0,o.getContext)(),{activeId:t,filteredOptions:n,options:l}=e;e.filteredOptions=l;const s=n[t];e.value=s.value,e.label=s.label,e.isOpen=!1},onKeyUp:e=>{e.preventDefault();const{value:t}=e.target,l=(0,o.getContext)(),{options:s}=l,{ref:r}=(0,o.getElement)();console.log("onKeyUp",r);const i=r.getAttribute("aria-controls");if(!i)return;if("Escape"===e.key)return n.onReset(),void(!0===l.isOpen&&r.blur());if("Enter"===e.key&&n.setValueOnEnter(i),40===e.keyCode&&"ArrowDown"===e.key)return void n.moveThroughOptions(1,i);if(38===e.keyCode&&"ArrowUp"===e.key)return void n.moveThroughOptions(-1,i);const a=s.filter((e=>{const{label:o}=e;return o.toLowerCase().includes(t.toLowerCase())}));a.length&&(l.filteredOptions=a)},onClick:e=>{e.preventDefault();const{ref:t}=(0,o.getElement)(),l=(0,o.getContext)(),{options:s}=l,r=(t.getAttribute("aria-controls"),t.getAttribute("data-ref-value")),{index:i,label:a,value:c}=n.getOptionByValue(r);l.activeIndex=i,l.label=a,l.value=c,console.log("form-input-select::onClick",l,i,a,c);const u=s;u.forEach((e=>{e.isSelected=!1})),u[i].isSelected=!0,l.filteredOptions=u,n.onClose()}},callbacks:{onInit:()=>{const e=(0,o.getContext)(),{options:t}=e;console.log("form-input-select -> onInit",e,t)},onValueChange:()=>{const{ref:e}=(0,o.getElement)(),t=(0,o.getContext)(),{targetNamespace:n,value:l}=t;if(l&&"prc-block/form-input-select"!==n){const{actions:s}=(0,o.store)(n);s.onSelectChange&&(console.log("onValueChange -> onSelectChange:",t,l,e),s.onSelectChange(l,e))}},getInputValue:()=>{const{ref:e}=(0,o.getElement)(),t=(0,o.getContext)(),{value:n}=t;return console.log("getInputValue",t,n,e),n||null}}});var l,s; +import*as e from"@wordpress/interactivity";var t={d:(e,o)=>{for(var n in o)t.o(o,n)&&!t.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:o[n]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)};const o=(l={getContext:()=>e.getContext,getElement:()=>e.getElement,store:()=>e.store},r={},t.d(r,l),r),{actions:n}=(0,o.store)("prc-block/form-input-select",{actions:{onOpen:()=>{(0,o.getContext)().isOpen=!0},onClose:(e=null)=>{null!==e&&e.preventDefault();const t=(0,o.getContext)();let n=!1;n||(n=!0,setTimeout((()=>{t.isOpen=!1,n=!1}),150))},onReset:()=>{const e=(0,o.getContext)();e.activeIndex=0,e.value="",e.label="",e.filteredOptions=e.options},getOptionByValue:e=>{console.log("form-input-select::getOptionByValue",e);const t=(0,o.getContext)(),{options:n}=t,l=n.find((t=>t.value===e));return l?{index:n.findIndex((e=>e.value===l.value)),...l}:null},moveThroughOptions:(e,t)=>{const n=(0,o.getContext)(),{activeIndex:l,filteredOptions:r}=n;let i=null;i=null===l||isNaN(l)?0:l+e,i<0&&(i=r.length-1),i>=r.length&&(i=0);const s=t.parentElement.parentElement.querySelector(".wp-block-prc-block-form-input-select__list").querySelector(`[data-ref-value="${r[i].value}"]`);s&&s.scrollIntoView({block:"nearest"}),r.forEach((e=>{e.isSelected=!1})),r[i].isSelected=!0,n.activeIndex=i,n.filteredOptions=r,console.log("form-input-select::moveThroughOptions",n,i,e)},setValueOnEnter:()=>{const e=(0,o.getContext)(),{filteredOptions:t,activeIndex:n}=e,l=t[n];console.log("ENTER === ",{filteredOptions:t,activeIndex:n,highlightedOption:l}),e.value=l?.value,e.label=l?.label,e.isOpen=!1},onKeyUp:e=>{e.preventDefault();const{value:t}=e.target,l=(0,o.getContext)(),{options:r}=l,{ref:i}=(0,o.getElement)();if("Escape"===e.key)return n.onReset(),void(!0===l.isOpen&&i.blur());if(40===e.keyCode&&"ArrowDown"===e.key)return void n.moveThroughOptions(1,e.target);if(38===e.keyCode&&"ArrowUp"===e.key)return void n.moveThroughOptions(-1,e.target);if("Enter"===e.key)return void n.setValueOnEnter();const s=r.filter((e=>{const{label:o}=e;return o.toLowerCase().includes(t.toLowerCase())}));s.length&&(l.filteredOptions=s)},onClick:e=>{e.preventDefault();const{ref:t}=(0,o.getElement)(),l=(0,o.getContext)(),{options:r,option:i}=l,s=(t.getAttribute("aria-controls"),t.getAttribute("data-ref-value")),{index:a}=n.getOptionByValue(s),{label:c,value:u}=r[a];l.activeIndex=a,l.label=c,l.value=u,console.log("form-input-select::onClick",{context:l,option:i,options:r,index:a,label:c,value:u});const p=r;p.forEach((e=>{e.isSelected=!1})),p[a].isSelected=!0,l.filteredOptions=p,n.onClose()}},callbacks:{onValueChange:()=>{const{ref:e}=(0,o.getElement)(),t=(0,o.getContext)(),{targetNamespace:n,value:l}=t;if(l&&"prc-block/form-input-select"!==n){const{actions:r}=(0,o.store)(n);r.onSelectChange&&(console.log("form-input-select::onValueChange -> onSelectChange:",t,l),r.onSelectChange(l,e))}}}});var l,r; //# sourceMappingURL=view.js.map \ No newline at end of file diff --git a/blocks/form-input-select/build/view.js.map b/blocks/form-input-select/build/view.js.map index 0170941de..14da8c1bf 100644 --- a/blocks/form-input-select/build/view.js.map +++ b/blocks/form-input-select/build/view.js.map @@ -1 +1 @@ -{"version":3,"file":"view.js","mappings":"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","sources":["webpack://form-input-select/webpack/bootstrap","webpack://form-input-select/webpack/runtime/define property getters","webpack://form-input-select/webpack/runtime/hasOwnProperty shorthand","webpack://form-input-select/external module \"@wordpress/interactivity\"","webpack://form-input-select/./src/view.js"],"sourcesContent":["// The require scope\nvar __webpack_require__ = {};\n\n","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","var x = (y) => {\n\tvar x = {}; __webpack_require__.d(x, y); return x\n} \nvar y = (x) => (() => (x))\nconst __WEBPACK_NAMESPACE_OBJECT__ = x({ [\"getContext\"]: () => (__WEBPACK_EXTERNAL_MODULE__wordpress_interactivity_8e89b257__.getContext), [\"getElement\"]: () => (__WEBPACK_EXTERNAL_MODULE__wordpress_interactivity_8e89b257__.getElement), [\"store\"]: () => (__WEBPACK_EXTERNAL_MODULE__wordpress_interactivity_8e89b257__.store) });","/* eslint-disable @wordpress/no-unused-vars-before-return */\nimport { store, getContext, getElement } from '@wordpress/interactivity';\n\nconst { actions } = store('prc-block/form-input-select', {\n\tactions: {\n\t\tonOpen: () => {\n\t\t\tconst context = getContext();\n\t\t\tcontext.isOpen = true;\n\t\t},\n\t\tonClose: (event = null) => {\n\t\t\t// By default this runs on the on-blur directive on the input element\n\t\t\t// but we also use it as a shortcut to close the listbox on click,\n\t\t\t// so this is a quick check to see if we're using this as a shortcut or not.\n\t\t\tif (null !== event) {\n\t\t\t\tevent.preventDefault();\n\t\t\t}\n\t\t\tconst context = getContext();\n\t\t\t// Because the on-blur event fires before the click event we need to slow things down a bit, 100 ms should do it\n\t\t\tlet isRunning = false;\n\t\t\tif (!isRunning) {\n\t\t\t\tisRunning = true;\n\t\t\t\tsetTimeout(() => {\n\t\t\t\t\tcontext.isOpen = false;\n\t\t\t\t\tisRunning = false;\n\t\t\t\t}, 100);\n\t\t\t}\n\t\t},\n\t\tonReset: () => {\n\t\t\tconst context = getContext();\n\t\t\tcontext.activeIndex = 0;\n\t\t\tcontext.value = '';\n\t\t\tcontext.label = '';\n\t\t\tcontext.filteredOptions = context.options;\n\t\t},\n\t\tgetOptionByValue: (value) => {\n\t\t\tconsole.log('getOptionByValue', value);\n\t\t\tconst context = getContext();\n\t\t\tconst { options } = context;\n\t\t\tconst selectedOption = options.find(\n\t\t\t\t(option) => option.value === value\n\t\t\t);\n\t\t\tif (!selectedOption) {\n\t\t\t\treturn null;\n\t\t\t}\n\t\t\t// find the object in the options array that matches the value\n\t\t\t// then set the activeId to the index of that object\n\t\t\tconst index = options.findIndex(\n\t\t\t\t(option) => option.value === selectedOption.value\n\t\t\t);\n\t\t\treturn {\n\t\t\t\tindex,\n\t\t\t\t...selectedOption,\n\t\t\t};\n\t\t},\n\t\tmoveThroughOptions: (direction, id) => {\n\t\t\tconst context = getContext();\n\t\t\tconst { activeIndex, filteredOptions } = context;\n\t\t\tlet nextActive = null;\n\t\t\tif (activeIndex === null || isNaN(activeIndex)) {\n\t\t\t\tnextActive = 0;\n\t\t\t} else {\n\t\t\t\tnextActive = activeIndex + direction;\n\t\t\t}\n\t\t\tif (nextActive < 0) {\n\t\t\t\tnextActive = filteredOptions.length - 1;\n\t\t\t}\n\t\t\tif (nextActive >= filteredOptions.length) {\n\t\t\t\tnextActive = 0;\n\t\t\t}\n\n\t\t\tfilteredOptions.forEach((option) => {\n\t\t\t\toption.isSelected = false;\n\t\t\t});\n\t\t\tfilteredOptions[nextActive].isSelected = true;\n\n\t\t\tcontext.activeIndex = nextActive;\n\t\t\tcontext.filteredOptions = filteredOptions;\n\t\t\tconsole.log('moveThroughOptions', context, nextActive, direction);\n\t\t},\n\t\tsetValueOnEnter: () => {\n\t\t\tconsole.log('setting value on enter');\n\t\t\tconst context = getContext();\n\t\t\tconst { activeId, filteredOptions, options } = context;\n\t\t\tcontext.filteredOptions = options;\n\n\t\t\tconst highlightedOption = filteredOptions[activeId];\n\t\t\tcontext.value = highlightedOption.value;\n\t\t\tcontext.label = highlightedOption.label;\n\t\t\tcontext.isOpen = false;\n\t\t},\n\t\tonKeyUp: (event) => {\n\t\t\tevent.preventDefault();\n\t\t\tconst { value } = event.target;\n\n\t\t\tconst context = getContext();\n\t\t\tconst { options } = context;\n\t\t\tconst { ref } = getElement();\n\t\t\tconsole.log('onKeyUp', ref);\n\t\t\tconst id = ref.getAttribute('aria-controls');\n\t\t\tif (!id) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif (event.key === 'Escape') {\n\t\t\t\tactions.onReset();\n\t\t\t\tif (true === context.isOpen) {\n\t\t\t\t\tref.blur();\n\t\t\t\t}\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif (event.key === 'Enter') {\n\t\t\t\tactions.setValueOnEnter(id);\n\t\t\t}\n\t\t\tif (event.keyCode === 40 && event.key === 'ArrowDown') {\n\t\t\t\tactions.moveThroughOptions(1, id);\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif (event.keyCode === 38 && event.key === 'ArrowUp') {\n\t\t\t\tactions.moveThroughOptions(-1, id);\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// check if any of the options contain the value of the input\n\t\t\tconst matches = options.filter((option) => {\n\t\t\t\tconst { label } = option;\n\t\t\t\treturn label.toLowerCase().includes(value.toLowerCase());\n\t\t\t});\n\t\t\t// if there are matches set the filteredOptions to the matches\n\t\t\tif (matches.length) {\n\t\t\t\tcontext.filteredOptions = matches;\n\t\t\t}\n\t\t},\n\t\tonClick: (event) => {\n\t\t\tevent.preventDefault();\n\t\t\tconst { ref } = getElement();\n\t\t\tconst context = getContext();\n\t\t\tconst { options } = context;\n\n\t\t\tconst id = ref.getAttribute('aria-controls');\n\t\t\tconst val = ref.getAttribute('data-ref-value');\n\t\t\tconst { index, label, value } = actions.getOptionByValue(val);\n\n\t\t\tcontext.activeIndex = index;\n\t\t\tcontext.label = label;\n\t\t\tcontext.value = value;\n\n\t\t\tconsole.log(\n\t\t\t\t'form-input-select::onClick',\n\t\t\t\tcontext,\n\t\t\t\tindex,\n\t\t\t\tlabel,\n\t\t\t\tvalue\n\t\t\t);\n\n\t\t\t// find any other isSelected and set to false and then set isSelected\n\t\t\t// on the clicked option\n\t\t\t// also, reset the filteredOptions to the original options now that we have a value\n\t\t\tconst filteredOptions = options;\n\t\t\tfilteredOptions.forEach((option) => {\n\t\t\t\toption.isSelected = false;\n\t\t\t});\n\t\t\tfilteredOptions[index].isSelected = true;\n\t\t\tcontext.filteredOptions = filteredOptions;\n\n\t\t\tactions.onClose();\n\t\t},\n\t},\n\tcallbacks: {\n\t\tonInit: () => {\n\t\t\tconst context = getContext();\n\t\t\tconst { options } = context;\n\t\t\tconsole.log('form-input-select -> onInit', context, options);\n\t\t},\n\t\tonValueChange: () => {\n\t\t\tconst { ref } = getElement();\n\t\t\tconst context = getContext();\n\t\t\tconst { targetNamespace, value } = context;\n\t\t\t// if the value is not empty and the targetNamespace is not the same as the current namespace\n\t\t\t// then hoist the value up to the targetNamespace\n\t\t\tif (value && 'prc-block/form-input-select' !== targetNamespace) {\n\t\t\t\tconst { actions: targetActions } = store(targetNamespace);\n\t\t\t\tif (targetActions.onSelectChange) {\n\t\t\t\t\tconsole.log(\n\t\t\t\t\t\t'onValueChange -> onSelectChange:',\n\t\t\t\t\t\tcontext,\n\t\t\t\t\t\tvalue,\n\t\t\t\t\t\tref\n\t\t\t\t\t);\n\t\t\t\t\ttargetActions.onSelectChange(value, ref);\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\tgetInputValue: () => {\n\t\t\tconst { ref } = getElement();\n\t\t\tconst context = getContext();\n\t\t\tconst { value } = context;\n\t\t\tconsole.log('getInputValue', context, value, ref);\n\t\t\tif (!value) {\n\t\t\t\treturn null;\n\t\t\t}\n\t\t\treturn value;\n\t\t},\n\t},\n});\n"],"names":["__webpack_require__","exports","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","y","__WEBPACK_EXTERNAL_MODULE__wordpress_interactivity_8e89b257__","x","d","actions","store","onOpen","getContext","isOpen","onClose","event","preventDefault","context","isRunning","setTimeout","onReset","activeIndex","value","label","filteredOptions","options","getOptionByValue","console","log","selectedOption","find","option","index","findIndex","moveThroughOptions","direction","id","nextActive","isNaN","length","forEach","isSelected","setValueOnEnter","activeId","highlightedOption","onKeyUp","target","ref","getElement","getAttribute","blur","keyCode","matches","filter","toLowerCase","includes","onClick","val","callbacks","onInit","onValueChange","targetNamespace","targetActions","onSelectChange","getInputValue"],"sourceRoot":""} +{"version":3,"file":"view.js","mappings":"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","sources":["webpack://form-input-select/webpack/bootstrap","webpack://form-input-select/webpack/runtime/define property getters","webpack://form-input-select/webpack/runtime/hasOwnProperty shorthand","webpack://form-input-select/external module \"@wordpress/interactivity\"","webpack://form-input-select/./src/view.js"],"sourcesContent":["// The require scope\nvar __webpack_require__ = {};\n\n","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","var x = (y) => {\n\tvar x = {}; __webpack_require__.d(x, y); return x\n} \nvar y = (x) => (() => (x))\nconst __WEBPACK_NAMESPACE_OBJECT__ = x({ [\"getContext\"]: () => (__WEBPACK_EXTERNAL_MODULE__wordpress_interactivity_8e89b257__.getContext), [\"getElement\"]: () => (__WEBPACK_EXTERNAL_MODULE__wordpress_interactivity_8e89b257__.getElement), [\"store\"]: () => (__WEBPACK_EXTERNAL_MODULE__wordpress_interactivity_8e89b257__.store) });","/* eslint-disable @wordpress/no-unused-vars-before-return */\nimport { store, getContext, getElement } from '@wordpress/interactivity';\n\nconst { actions } = store('prc-block/form-input-select', {\n\tactions: {\n\t\tonOpen: () => {\n\t\t\tconst context = getContext();\n\t\t\tcontext.isOpen = true;\n\t\t},\n\t\tonClose: (event = null) => {\n\t\t\t// By default this runs on the on-blur directive on the input element\n\t\t\t// but we also use it as a shortcut to close the listbox on click,\n\t\t\t// so this is a quick check to see if we're using this as a shortcut or not.\n\t\t\tif (null !== event) {\n\t\t\t\tevent.preventDefault();\n\t\t\t}\n\t\t\tconst context = getContext();\n\t\t\t// Because the on-blur event fires before the click event we need to slow things down a bit, 150 ms should do it\n\t\t\tlet isRunning = false;\n\t\t\tif (!isRunning) {\n\t\t\t\tisRunning = true;\n\t\t\t\tsetTimeout(() => {\n\t\t\t\t\tcontext.isOpen = false;\n\t\t\t\t\tisRunning = false;\n\t\t\t\t}, 150);\n\t\t\t}\n\t\t},\n\t\tonReset: () => {\n\t\t\tconst context = getContext();\n\t\t\tcontext.activeIndex = 0;\n\t\t\tcontext.value = '';\n\t\t\tcontext.label = '';\n\t\t\tcontext.filteredOptions = context.options;\n\t\t},\n\t\tgetOptionByValue: (value) => {\n\t\t\tconsole.log('form-input-select::getOptionByValue', value);\n\t\t\tconst context = getContext();\n\t\t\tconst { options } = context;\n\t\t\tconst selectedOption = options.find(\n\t\t\t\t(option) => option.value === value\n\t\t\t);\n\t\t\tif (!selectedOption) {\n\t\t\t\treturn null;\n\t\t\t}\n\t\t\t// find the object in the options array that matches the value\n\t\t\t// then set the activeId to the index of that object\n\t\t\tconst index = options.findIndex(\n\t\t\t\t(option) => option.value === selectedOption.value\n\t\t\t);\n\t\t\treturn {\n\t\t\t\tindex,\n\t\t\t\t...selectedOption,\n\t\t\t};\n\t\t},\n\t\tmoveThroughOptions: (direction, ref) => {\n\t\t\tconst context = getContext();\n\t\t\tconst { activeIndex, filteredOptions } = context;\n\t\t\tlet nextActive = null;\n\t\t\tif (activeIndex === null || isNaN(activeIndex)) {\n\t\t\t\tnextActive = 0;\n\t\t\t} else {\n\t\t\t\tnextActive = activeIndex + direction;\n\t\t\t}\n\t\t\tif (nextActive < 0) {\n\t\t\t\tnextActive = filteredOptions.length - 1;\n\t\t\t}\n\t\t\tif (nextActive >= filteredOptions.length) {\n\t\t\t\tnextActive = 0;\n\t\t\t}\n\n\t\t\t// also scroll the listbox to the active item as you go...\n\t\t\tconst listbox = ref.parentElement.parentElement.querySelector(\n\t\t\t\t'.wp-block-prc-block-form-input-select__list'\n\t\t\t);\n\t\t\tconst activeItem = listbox.querySelector(\n\t\t\t\t`[data-ref-value=\"${filteredOptions[nextActive].value}\"]`\n\t\t\t);\n\t\t\tif (activeItem) {\n\t\t\t\tactiveItem.scrollIntoView({\n\t\t\t\t\tblock: 'nearest',\n\t\t\t\t});\n\t\t\t}\n\n\t\t\tfilteredOptions.forEach((option) => {\n\t\t\t\toption.isSelected = false;\n\t\t\t});\n\t\t\tfilteredOptions[nextActive].isSelected = true;\n\n\t\t\tcontext.activeIndex = nextActive;\n\t\t\tcontext.filteredOptions = filteredOptions;\n\t\t\tconsole.log(\n\t\t\t\t'form-input-select::moveThroughOptions',\n\t\t\t\tcontext,\n\t\t\t\tnextActive,\n\t\t\t\tdirection\n\t\t\t);\n\t\t},\n\t\tsetValueOnEnter: () => {\n\t\t\tconst context = getContext();\n\t\t\tconst { filteredOptions, activeIndex } = context;\n\n\t\t\tconst highlightedOption = filteredOptions[activeIndex];\n\t\t\tconsole.log('ENTER === ', {\n\t\t\t\tfilteredOptions,\n\t\t\t\tactiveIndex,\n\t\t\t\thighlightedOption,\n\t\t\t});\n\n\t\t\tcontext.value = highlightedOption?.value;\n\t\t\tcontext.label = highlightedOption?.label;\n\t\t\tcontext.isOpen = false;\n\n\t\t\t// reset the filtered options\n\t\t\t// context.filteredOptions = options;\n\t\t},\n\t\tonKeyUp: (event) => {\n\t\t\tevent.preventDefault();\n\t\t\t// The input value.\n\t\t\tconst { value } = event.target;\n\n\t\t\tconst context = getContext();\n\t\t\tconst { options } = context;\n\t\t\tconst { ref } = getElement();\n\n\t\t\tif (event.key === 'Escape') {\n\t\t\t\tactions.onReset();\n\t\t\t\tif (true === context.isOpen) {\n\t\t\t\t\tref.blur();\n\t\t\t\t}\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif (event.keyCode === 40 && event.key === 'ArrowDown') {\n\t\t\t\tactions.moveThroughOptions(1, event.target);\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif (event.keyCode === 38 && event.key === 'ArrowUp') {\n\t\t\t\tactions.moveThroughOptions(-1, event.target);\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif (event.key === 'Enter') {\n\t\t\t\tactions.setValueOnEnter();\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// Search options for the value and then set the filteredOptions to any matches...\n\t\t\tconst matches = options.filter((option) => {\n\t\t\t\tconst { label } = option;\n\t\t\t\treturn label.toLowerCase().includes(value.toLowerCase());\n\t\t\t});\n\t\t\tif (matches.length) {\n\t\t\t\tcontext.filteredOptions = matches;\n\t\t\t}\n\t\t},\n\t\tonClick: (event) => {\n\t\t\tevent.preventDefault();\n\t\t\tconst { ref } = getElement();\n\t\t\tconst context = getContext();\n\t\t\tconst { options, option } = context;\n\n\t\t\tconst id = ref.getAttribute('aria-controls');\n\t\t\tconst val = ref.getAttribute('data-ref-value');\n\t\t\tconst { index } = actions.getOptionByValue(val);\n\t\t\tconst { label, value } = options[index];\n\n\t\t\tcontext.activeIndex = index;\n\t\t\tcontext.label = label;\n\t\t\tcontext.value = value;\n\n\t\t\tconsole.log('form-input-select::onClick', {\n\t\t\t\tcontext,\n\t\t\t\toption,\n\t\t\t\toptions,\n\t\t\t\tindex,\n\t\t\t\tlabel,\n\t\t\t\tvalue,\n\t\t\t});\n\n\t\t\t// find any other isSelected and set to false and then set isSelected\n\t\t\t// on the clicked option\n\t\t\t// also, reset the filteredOptions to the original options now that we have a value\n\t\t\tconst filteredOptions = options;\n\t\t\tfilteredOptions.forEach((opt) => {\n\t\t\t\topt.isSelected = false;\n\t\t\t});\n\t\t\tfilteredOptions[index].isSelected = true;\n\t\t\tcontext.filteredOptions = filteredOptions;\n\n\t\t\tactions.onClose();\n\t\t},\n\t},\n\tcallbacks: {\n\t\tonValueChange: () => {\n\t\t\tconst { ref } = getElement();\n\t\t\tconst context = getContext();\n\t\t\tconst { targetNamespace, value } = context;\n\t\t\t// if the value is not empty and the targetNamespace is not the same as the current namespace\n\t\t\t// then hoist the value up to the targetNamespace\n\t\t\tif (value && 'prc-block/form-input-select' !== targetNamespace) {\n\t\t\t\tconst { actions: targetActions } = store(targetNamespace);\n\t\t\t\tif (targetActions.onSelectChange) {\n\t\t\t\t\tconsole.log(\n\t\t\t\t\t\t'form-input-select::onValueChange -> onSelectChange:',\n\t\t\t\t\t\tcontext,\n\t\t\t\t\t\tvalue\n\t\t\t\t\t);\n\t\t\t\t\ttargetActions.onSelectChange(value, ref);\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t},\n});\n"],"names":["__webpack_require__","exports","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","y","__WEBPACK_EXTERNAL_MODULE__wordpress_interactivity_8e89b257__","x","d","actions","store","onOpen","getContext","isOpen","onClose","event","preventDefault","context","isRunning","setTimeout","onReset","activeIndex","value","label","filteredOptions","options","getOptionByValue","console","log","selectedOption","find","option","index","findIndex","moveThroughOptions","direction","ref","nextActive","isNaN","length","activeItem","parentElement","querySelector","scrollIntoView","block","forEach","isSelected","setValueOnEnter","highlightedOption","onKeyUp","target","getElement","blur","keyCode","matches","filter","toLowerCase","includes","onClick","val","getAttribute","opt","callbacks","onValueChange","targetNamespace","targetActions","onSelectChange"],"sourceRoot":""} \ No newline at end of file diff --git a/blocks/form-input-select/src/render.php b/blocks/form-input-select/src/render.php index e9cc6db41..6acdbd7f7 100644 --- a/blocks/form-input-select/src/render.php +++ b/blocks/form-input-select/src/render.php @@ -25,7 +25,7 @@ $input_attrs = \PRC\Platform\Block_Utils\get_block_html_attributes( array( 'id' => $input_id.'-input', 'role' => 'combobox', - 'type' => 'search', + 'type' => 'text', // we should make this "search" but how do we get rid of the "x" clear button? 'aria-controls' => $input_id.'-input', 'placeholder' => $input_placeholder, 'data-wp-bind--value' => 'context.label', diff --git a/blocks/form-input-select/src/view.js b/blocks/form-input-select/src/view.js index 292a4ff65..b68f0a9e0 100644 --- a/blocks/form-input-select/src/view.js +++ b/blocks/form-input-select/src/view.js @@ -15,14 +15,14 @@ const { actions } = store('prc-block/form-input-select', { event.preventDefault(); } const context = getContext(); - // Because the on-blur event fires before the click event we need to slow things down a bit, 100 ms should do it + // Because the on-blur event fires before the click event we need to slow things down a bit, 150 ms should do it let isRunning = false; if (!isRunning) { isRunning = true; setTimeout(() => { context.isOpen = false; isRunning = false; - }, 100); + }, 150); } }, onReset: () => { @@ -33,7 +33,7 @@ const { actions } = store('prc-block/form-input-select', { context.filteredOptions = context.options; }, getOptionByValue: (value) => { - console.log('getOptionByValue', value); + console.log('form-input-select::getOptionByValue', value); const context = getContext(); const { options } = context; const selectedOption = options.find( @@ -52,7 +52,7 @@ const { actions } = store('prc-block/form-input-select', { ...selectedOption, }; }, - moveThroughOptions: (direction, id) => { + moveThroughOptions: (direction, ref) => { const context = getContext(); const { activeIndex, filteredOptions } = context; let nextActive = null; @@ -68,6 +68,19 @@ const { actions } = store('prc-block/form-input-select', { nextActive = 0; } + // also scroll the listbox to the active item as you go... + const listbox = ref.parentElement.parentElement.querySelector( + '.wp-block-prc-block-form-input-select__list' + ); + const activeItem = listbox.querySelector( + `[data-ref-value="${filteredOptions[nextActive].value}"]` + ); + if (activeItem) { + activeItem.scrollIntoView({ + block: 'nearest', + }); + } + filteredOptions.forEach((option) => { option.isSelected = false; }); @@ -75,31 +88,39 @@ const { actions } = store('prc-block/form-input-select', { context.activeIndex = nextActive; context.filteredOptions = filteredOptions; - console.log('moveThroughOptions', context, nextActive, direction); + console.log( + 'form-input-select::moveThroughOptions', + context, + nextActive, + direction + ); }, setValueOnEnter: () => { - console.log('setting value on enter'); const context = getContext(); - const { activeId, filteredOptions, options } = context; - context.filteredOptions = options; + const { filteredOptions, activeIndex } = context; + + const highlightedOption = filteredOptions[activeIndex]; + console.log('ENTER === ', { + filteredOptions, + activeIndex, + highlightedOption, + }); - const highlightedOption = filteredOptions[activeId]; - context.value = highlightedOption.value; - context.label = highlightedOption.label; + context.value = highlightedOption?.value; + context.label = highlightedOption?.label; context.isOpen = false; + + // reset the filtered options + // context.filteredOptions = options; }, onKeyUp: (event) => { event.preventDefault(); + // The input value. const { value } = event.target; const context = getContext(); const { options } = context; const { ref } = getElement(); - console.log('onKeyUp', ref); - const id = ref.getAttribute('aria-controls'); - if (!id) { - return; - } if (event.key === 'Escape') { actions.onReset(); @@ -109,24 +130,24 @@ const { actions } = store('prc-block/form-input-select', { return; } - if (event.key === 'Enter') { - actions.setValueOnEnter(id); - } if (event.keyCode === 40 && event.key === 'ArrowDown') { - actions.moveThroughOptions(1, id); + actions.moveThroughOptions(1, event.target); return; } if (event.keyCode === 38 && event.key === 'ArrowUp') { - actions.moveThroughOptions(-1, id); + actions.moveThroughOptions(-1, event.target); + return; + } + if (event.key === 'Enter') { + actions.setValueOnEnter(); return; } - // check if any of the options contain the value of the input + // Search options for the value and then set the filteredOptions to any matches... const matches = options.filter((option) => { const { label } = option; return label.toLowerCase().includes(value.toLowerCase()); }); - // if there are matches set the filteredOptions to the matches if (matches.length) { context.filteredOptions = matches; } @@ -135,30 +156,32 @@ const { actions } = store('prc-block/form-input-select', { event.preventDefault(); const { ref } = getElement(); const context = getContext(); - const { options } = context; + const { options, option } = context; const id = ref.getAttribute('aria-controls'); const val = ref.getAttribute('data-ref-value'); - const { index, label, value } = actions.getOptionByValue(val); + const { index } = actions.getOptionByValue(val); + const { label, value } = options[index]; context.activeIndex = index; context.label = label; context.value = value; - console.log( - 'form-input-select::onClick', + console.log('form-input-select::onClick', { context, + option, + options, index, label, - value - ); + value, + }); // find any other isSelected and set to false and then set isSelected // on the clicked option // also, reset the filteredOptions to the original options now that we have a value const filteredOptions = options; - filteredOptions.forEach((option) => { - option.isSelected = false; + filteredOptions.forEach((opt) => { + opt.isSelected = false; }); filteredOptions[index].isSelected = true; context.filteredOptions = filteredOptions; @@ -167,11 +190,6 @@ const { actions } = store('prc-block/form-input-select', { }, }, callbacks: { - onInit: () => { - const context = getContext(); - const { options } = context; - console.log('form-input-select -> onInit', context, options); - }, onValueChange: () => { const { ref } = getElement(); const context = getContext(); @@ -182,24 +200,13 @@ const { actions } = store('prc-block/form-input-select', { const { actions: targetActions } = store(targetNamespace); if (targetActions.onSelectChange) { console.log( - 'onValueChange -> onSelectChange:', + 'form-input-select::onValueChange -> onSelectChange:', context, - value, - ref + value ); targetActions.onSelectChange(value, ref); } } }, - getInputValue: () => { - const { ref } = getElement(); - const context = getContext(); - const { value } = context; - console.log('getInputValue', context, value, ref); - if (!value) { - return null; - } - return value; - }, }, });