field-grid-dropdown-custom/dist/index.js

A Blockly dropdown field with grid layout and search.

/*! 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 n in o)("object"==typeof exports?exports:e)[n]=o[n]}}(this,(e=>(()=>{"use strict";var t={370:t=>{t.exports=e}},o={};function n(e){var i=o[e];if(void 0!==i)return i.exports;var r=o[e]={exports:{}};return t[e](r,r.exports,n),r.exports}n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var o in t)n.o(t,o)&&!n.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var i={};return(()=>{n.r(i),n.d(i,{FieldGridDropdown:()=>t});var e=n(370);class t extends e.FieldDropdown{constructor(e,t,o){super(e,t,o),this.columns=3,this.searchInputDiv=null,this.listener=!1,this.searchString="",this.cursor=0,this.option_function=e,(null==o?void 0:o.columns)&&this.setColumnsInternal(o.columns),o&&o.primaryColour&&(this.primaryColour=o.primaryColour),o&&o.borderColour&&(this.borderColour=o.borderColour),this.originalOptions=this.getOptions()}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){this.setColumnsInternal(e),this.updateColumnsStyling_()}setColumnsInternal(e){const t="string"==typeof e?parseInt(e):e;!isNaN(t)&&t>=1&&(this.columns=t)}showEditor_(t){var o,n;super.showEditor_(t),this.originalOptions.length>=10&&(this.searchInputDiv=this.dropdownCreateSearch_()),this.setFocusToInput(),this.searchString="",this.listener||(this.dropdownDiv=e.DropDownDiv.getContentDiv(),this.inputEventFunction=this.dropdownSearchOnChange_.bind(this),this.keydownEventFunction=this.handleKeyEvent_.bind(this),this.dropdownDiv.addEventListener("input",this.inputEventFunction),this.dropdownDiv.addEventListener("keydown",this.keydownEventFunction),this.listener=!0);const i=this.getColours();i&&i.border&&e.DropDownDiv.setColour(i.primary,i.border);const r=null!==(n=null===(o=this.menu_)||void 0===o?void 0:o.getElement())&&void 0!==n?n:null;r&&e.utils.dom.addClass(r,"fieldGridDropDownContainer"),this.updateColumnsStyling_(),e.DropDownDiv.showPositionedByField(this,this.dropdownDispose_.bind(this))}dropdownCreateSearch_(){var t=document.createElement("input");return t.setAttribute("type","search"),t.setAttribute("placeholder","Search..."),t.setAttribute("autocomplete","off"),t.style.width="100%",t.setAttribute("value",this.searchString),e.DropDownDiv.getContentDiv().insertBefore(t,e.DropDownDiv.getContentDiv().firstChild),t}dropdownSearchOnChange_(e){const t=e.target.value.toLowerCase().replaceAll("_"," ");this.filteredOptions=this.getOptions().filter((function(e){let o=!0;const n=t.split(" ");for(var i=0;i<n.length;i++){const t=n[i];o=o&&-1!==e[0].toLowerCase().indexOf(t)}return o})),0==this.filteredOptions.length&&(this.filteredOptions=[["no matches","no matches"]]),this.searchString=e.target.value,this.cursor=e.target.selectionStart,this.updateOptions_(this.filteredOptions)}setFocusToInput(){if(this.searchInputDiv){this.searchInputDiv.focus();var e=this.cursor;this.searchInputDiv.setSelectionRange(e,e)}}updateOptions_(t){this.menuGenerator_=t,this.dropdownDispose_(),e.DropDownDiv.clearContent(),this.showEditor_(),this.menuGenerator_=this.option_function}handleKeyEvent_(t){const o=t.which||t.keyCode;if(13==o){const t=this.filteredOptions||this.getOptions();t.length>=1&&(this.setValue(t[0][1]),this.searchString="",e.DropDownDiv.hideIfOwner(this,!0))}else if(40==o){if((this.filteredOptions||this.getOptions()).length>0){const e=this.menu_;e.highlightFirst(),e.focus()}}else 27==o?e.DropDownDiv.hideIfOwner(this,!0):this.searchInputDiv&&this.searchInputDiv.focus()}dropdownDispose_(){super.dropdownDispose_(),this.dropdownDiv.removeEventListener("input",this.inputEventFunction),this.dropdownDiv.removeEventListener("keydown",this.keydownEventFunction),this.listener=!1}updateColumnsStyling_(){const e=this.menu_?this.menu_.getElement():null;e&&(e.style.gridTemplateColumns=`repeat(${this.columns}, min-content)`)}getColours(){var t,o;if(this.primaryColour&&this.borderColour)return{primary:this.primaryColour,border:this.borderColour};const n=this.getSourceBlock();if(!(n instanceof e.BlockSvg))return;const i=n.isShadow()?n.getParent():n;return i?{primary:null!==(t=this.primaryColour)&&void 0!==t?t:i.getColour(),border:null!==(o=this.borderColour)&&void 0!==o?o:i.getColourTertiary()}:void 0}}e.fieldRegistry.register("field_grid_dropdown",t),e.Css.register("\n /** Setup grid layout of DropDown */\n .fieldGridDropDownContainer.blocklyMenu {\n   display: grid;\n   grid-gap: 7px;\n   }\n /* Change look of cells (add border, sizing, padding, and text color) */\n .fieldGridDropDownContainer.blocklyMenu .blocklyMenuItem {\n   border: 1px solid rgba(1, 1, 1, 0.5);\n   border-radius: 4px;\n   color: white;\n   min-width: auto;\n   padding-left: 15px; /* override padding-left now that checkmark is hidden */\n }\n /* Change look of selected cell */\n .fieldGridDropDownContainer .blocklyMenuItem .blocklyMenuItemCheckbox {\n   display: none; /* Hide checkmark */\n }\n .fieldGridDropDownContainer .blocklyMenuItem.blocklyMenuItemSelected {\n   background-color: rgba(1, 1, 1, 0.25);\n }\n /* Change look of focus/highlighted cell */\n .fieldGridDropDownContainer .blocklyMenuItem.blocklyMenuItemHighlight {\n   box-shadow: 0 0 0 4px hsla(0, 0%, 100%, .2);\n }\n .fieldGridDropDownContainer .blocklyMenuItemHighlight {\n   /* Uses less selectors so as to not affect blocklyMenuItemSelected */\n   background-color: inherit;\n }\n .fieldGridDropDownContainer {\n   margin: 7px; /* needed for highlight */\n }\n ")})(),i})()));
//# sourceMappingURL=index.js.map