@blockly/field-grid-dropdown/dist/index.js

A Blockly dropdown field with grid layout.

/*! For license information please see index.js.LICENSE.txt */
!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("blockly/core"));else if("function"==typeof define&&define.amd)define(["blockly/core"],t);else{var o="object"==typeof exports?t(require("blockly/core")):t(e.Blockly);for(var i in o)("object"==typeof exports?exports:e)[i]=o[i]}}(this,(e=>(()=>{"use strict";var t={370:t=>{t.exports=e}},o={};function i(e){var s=o[e];if(void 0!==s)return s.exports;var r=o[e]={exports:{}};return t[e](r,r.exports,i),r.exports}i.d=(e,t)=>{for(var o in t)i.o(t,o)&&!i.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},i.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),i.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var s={};i.r(s),i.d(s,{FieldGridDropdown:()=>d});var r=i(370);class n{constructor(e,t,o,i){this.value=o,this.selected=!1,this.selectionCallback=i,this.element=document.createElement("button"),this.element.id=r.utils.idGenerator.getNextUniqueId(),this.element.className="blocklyFieldGridItem",this.clickHandler=r.browserEvents.conditionalBind(this.element,"click",this,this.onClick,!0),e.appendChild(this.element);const s="string"==typeof t?document.createTextNode(t):t;this.element.appendChild(s),r.utils.aria.setRole(this.element,r.utils.aria.Role.GRIDCELL)}dispose(){this.selectionCallback=null,this.element.remove(),this.clickHandler&&(r.browserEvents.unbind(this.clickHandler),this.clickHandler=null)}getId(){return this.element.id}getValue(){return this.value}isSelected(){return this.selected}setSelected(e){this.selected=e,r.utils.aria.setState(this.element,r.utils.aria.State.SELECTED,this.selected),this.element.classList.toggle("blocklyFieldGridItemSelected",this.selected),this.isSelected()&&this.focus()}onClick(){var e;this.setSelected(!0),null===(e=this.selectionCallback)||void 0===e||e.call(this,this)}focus(){this.element.focus({preventScroll:!0});const e=this.element.offsetParent;if(!e)return;const t=this.element.offsetTop,o=e.scrollTop,i=this.getInterItemSpacing();t<o?e.scrollTo(0,t-i):t+this.element.offsetHeight>o+e.clientHeight&&e.scrollBy(0,t+this.element.clientHeight-(o+e.clientHeight)+i)}getInterItemSpacing(){const e=this.element.closest(".blocklyFieldGrid");if(!e)return 0;const t=[...e.querySelectorAll(".blocklyFieldGridItem")];if(!t.length)return 0;const o=t[0].offsetTop,i=t[0].offsetHeight;for(const e of t)if(e.offsetTop!==o)return e.offsetTop-i-o;return 0}}class l{constructor(e,t,o,i,s){if(this.columns=o,this.rtl=i,this.itemIndices=new Map,this.items=new Array,this.keyDownHandler=null,this.pointerMoveHandler=null,this.selectionCallback=s,this.root=document.createElement("div"),this.root.className="blocklyFieldGrid",this.root.tabIndex=0,r.utils.aria.setRole(this.root,r.utils.aria.Role.GRID),e.appendChild(this.root),this.populateItems(t),this.keyDownHandler=r.browserEvents.conditionalBind(this.root,"keydown",this,this.onKeyDown),this.pointerMoveHandler=r.browserEvents.conditionalBind(this.root,"pointermove",this,this.onPointerMove,!0),!(o>=1))throw new Error(`Number of columns must be >= 1; got ${o}`);this.columns=o,this.root.style.setProperty("--grid-columns",`${this.columns}`)}populateItems(e){let t=document.createElement("div");for(const[o,i]of e.entries()){if(i===r.FieldDropdown.SEPARATOR)continue;o%this.columns===0&&(t=document.createElement("div"),t.className="blocklyFieldGridRow",r.utils.aria.setRole(t,r.utils.aria.Role.ROW),this.root.appendChild(t));const[e,s]=i,l=(()=>{if((t=e)&&"object"==typeof t&&"src"in t&&"string"==typeof t.src&&"alt"in t&&"string"==typeof t.alt&&"width"in t&&"number"==typeof t.width&&"height"in t&&"number"==typeof t.height){const t=new Image(e.width,e.height);return t.src=e.src,t.alt=e.alt||"",t}var t;return e})(),d=new n(t,l,s,(e=>{var t;this.setSelectedValue(e.getValue()),null===(t=this.selectionCallback)||void 0===t||t.call(this,e)}));this.itemIndices.set(d.getId(),this.itemIndices.size),this.items.push(d)}}dispose(){this.selectionCallback=void 0;for(const e of this.items)e.dispose();this.itemIndices.clear(),this.items.length=0,this.keyDownHandler&&(r.browserEvents.unbind(this.keyDownHandler),this.keyDownHandler=null),this.pointerMoveHandler&&(r.browserEvents.unbind(this.pointerMoveHandler),this.pointerMoveHandler=null),this.root.remove()}onKeyDown(e){if(!(!this.items.length||e.shiftKey||e.ctrlKey||e.metaKey||e.altKey)){switch(e.key){case"ArrowUp":this.moveFocus(-1*this.columns,!0);break;case"ArrowDown":this.moveFocus(this.columns,!0);break;case"ArrowLeft":this.moveFocus(-1*(this.rtl?-1:1),!0);break;case"ArrowRight":this.moveFocus(1*(this.rtl?-1:1),!0);break;case"PageUp":case"Home":this.moveFocus(0,!1);break;case"PageDown":case"End":this.moveFocus(this.items.length-1,!1);break;case"Enter":case"Space":return void e.stopPropagation();default:return}e.preventDefault(),e.stopPropagation()}}onPointerMove(e){if(!e.movementX&&!e.movementY||!(e.target instanceof Element))return;const t=e.target.closest(".blocklyFieldGridItem");if(!t)return;const o=t.id,i=this.itemIndices.get(o);void 0!==i&&this.moveFocus(i,!1)}setSelectedValue(e){for(const[t,o]of this.items.entries()){const i=o.getValue()===e;o.setSelected(i),i&&this.moveFocus(t,!1)}}moveFocus(e,t){let o=e;if(t){const e=this.getFocusedItem();if(!e)return;o+=this.indexOfItem(e)}const i=this.itemAtIndex(o);i&&(i.focus(),r.utils.aria.setState(this.root,r.utils.aria.State.ACTIVEDESCENDANT,i.getId()))}indexOfItem(e){var t;return null!==(t=this.itemIndices.get(e.getId()))&&void 0!==t?t:-1}itemAtIndex(e){return this.items[e]}getFocusedItem(){var e;const t=null!==(e=this.root.querySelector(".blocklyFieldGridItem:focus"))&&void 0!==e?e:this.root.querySelector(".blocklyFieldGridItem");if(!t||!t.id)return;const o=this.itemIndices.get(t.id);return void 0!==o?this.itemAtIndex(o):void 0}}class d extends r.FieldDropdown{constructor(e,t,o){super(e,t,o),this.columns=3,(null==o?void 0:o.columns)&&this.setColumns(parseInt(`${o.columns}`)),o&&o.primaryColour&&(this.primaryColour=o.primaryColour),o&&o.borderColour&&(this.borderColour=o.borderColour)}static fromJson(e){if(!e.options)throw new Error("options are required for the dropdown field. The options property must be assigned an array of [humanReadableValue, languageNeutralValue] tuples.");return new this(e.options,void 0,e)}setColumns(e){var t;!isNaN(e)&&e>=1&&(this.columns=e,r.DropDownDiv.getOwner()===this&&r.DropDownDiv.isVisible()&&(null===(t=this.grid)||void 0===t||t.dispose(),this.showEditor_()))}showEditor_(e){var t;r.DropDownDiv.clearContent();const o=!!(null===(t=this.getSourceBlock())||void 0===t?void 0:t.workspace.RTL);this.grid=new l(r.DropDownDiv.getContentDiv(),this.getOptions(!1),this.columns,o,(e=>{r.DropDownDiv.hideIfOwner(this),this.setValue(e.getValue())})),r.DropDownDiv.getContentDiv().classList.add("blocklyFieldGridContainer");const i=this.getColours();i&&i.border&&r.DropDownDiv.setColour(i.primary,i.border),r.DropDownDiv.showPositionedByField(this,this.dropdownDispose_.bind(this));const s=this.getValue();s&&this.grid.setSelectedValue(s)}doValueUpdate_(e){var t;super.doValueUpdate_(e),null===(t=this.grid)||void 0===t||t.setSelectedValue(e)}getColours(){var e,t;if(this.primaryColour&&this.borderColour)return{primary:this.primaryColour,border:this.borderColour};const o=this.getSourceBlock();if(!(o instanceof r.BlockSvg))return;const i=o.isShadow()?o.getParent():o;return i?{primary:null!==(e=this.primaryColour)&&void 0!==e?e:i.getColour(),border:null!==(t=this.borderColour)&&void 0!==t?t:i.getColourTertiary()}:void 0}}return r.fieldRegistry.register("field_grid_dropdown",d),r.Css.register("\n   .blocklyFieldGridContainer {\n     padding: 7px;\n     overflow: auto;\n   }\n   \n  .blocklyFieldGrid {\n    display: grid;\n    grid-gap: 7px;\n    grid-template-columns: repeat(var(--grid-columns), min-content);\n  }\n\n .blocklyFieldGrid .blocklyFieldGridItem {\n   border: 1px solid rgba(1, 1, 1, 0.5);\n   border-radius: 4px;\n   color: white;\n   min-width: auto;\n   background: none;\n   white-space: nowrap;\n   cursor: pointer;\n   padding: 6px 15px;\n }\n \n .blocklyFieldGrid .blocklyFieldGridRow {\n   display: contents;\n }\n \n .blocklyFieldGrid .blocklyFieldGridItem.blocklyFieldGridItemSelected {\n   background-color: rgba(1, 1, 1, 0.25);\n }\n\n .blocklyFieldGrid .blocklyFieldGridItem:focus {\n   box-shadow: 0 0 0 4px hsla(0, 0%, 100%, .2);\n   outline: none;\n }\n "),s})()));
//# sourceMappingURL=index.js.map