{"version":3,"file":"emoji_controller-z7QB-Cc2.js","sources":["../../../app/javascript/controllers/compose/toolbar/emoji_controller.js"],"sourcesContent":["import {Picker, init} from 'emoji-mart'\nimport data from '@emoji-mart/data'\n\nimport ApplicationController from '../../application_controller'\nimport {Current} from '../../models/current'\n\nexport default class extends ApplicationController {\n static values = {\n size: { type: Number, default: 24 },\n perLine: { type: Number, default: 9 }\n }\n\n static targets = [\n 'menu',\n 'button'\n ]\n\n initialize() {\n this.onEmojiSelect = this.onEmojiSelect.bind(this)\n\n super.initialize()\n }\n\n connect() {\n init({data})\n this.buildAndAppendPicker()\n\n super.connect()\n }\n\n onDropdownOpen() {\n this.focus(this.pickerElement.querySelector('input'), {moveCursorToEnd: true})\n this.dispatch('opened')\n }\n\n onDropdownHide() {\n // this.menuTarget.innerHTML = ''\n // this.buildAndAppendPicker()\n }\n\n onEmojiSelect(emoji) {\n this.dispatch('selected', {\n detail: emoji\n })\n\n this.buttonTarget.click()\n }\n\n enable() {\n super.enable(this.buttonTarget)\n }\n\n disable() {\n super.disable(this.buttonTarget)\n }\n\n hideIfOpen() {\n if(this.isInvisible(this.menuTarget)) return\n\n this.dispatch('hidden')\n this.buttonTarget.click()\n }\n\n // private\n\n buildAndAppendPicker() {\n this.menuTarget.appendChild(this.pickerObject)\n this.overridePickerDefaultStylesFromShadowRoot()\n this.setupEscapeListener()\n }\n\n\n overridePickerDefaultStylesFromShadowRoot() {\n setTimeout(() => {\n const style = document.createElement('style')\n style.innerHTML = this.styleOverrides\n\n this.pickerElement.appendChild(style)\n\n this.pickerElement.querySelectorAll('.category').forEach(category => {\n category.firstElementChild.classList.add('caption')\n })\n }, 200)\n }\n\n // Emoji-mart stops the propagation of Escape keydown event\n // Which prevents us from closing the component when the user presses the Escape key\n // When the input blurs as a result of clicking inside the picker\n // We don't want to close the picker, only when the user presses the Escape key\n setupEscapeListener() {\n this.pickerElement.addEventListener('click', () => {\n this.clickedInside = true\n this.nextTick(() => this.clickedInside = false, 100)\n })\n\n // this.nextTick(() => {\n // this.pickerElement.querySelector('input').addEventListener('blur', () => {\n // this.nextTick(() => {\n // if (!this.clickedInside) {\n // this.dispatch('hidden')\n //\n // if(this.isVisible(this.menuTarget)) {\n // this.buttonTarget.click()\n // }\n // }\n // }, 100)\n // })\n // }, 200)\n }\n\n get pickerElement() {\n return this.element.querySelector(\"em-emoji-picker\").shadowRoot\n }\n\n get pickerObject() {\n return new Picker({\n onEmojiSelect: this.onEmojiSelect,\n theme: 'light',\n dynamicWidth: true,\n locale: Current.locale,\n previewPosition: 'none',\n skinTonePosition: 'none',\n emojiSize: this.sizeValue,\n perLine: this.perLineValue\n })\n }\n\n get styleOverrides() {\n return `\n .caption {\n font-size: 0.875rem;\n line-height: 1.25rem; \n letter-spacing: 0.025em; \n text-transform: uppercase; \n color: var(--night-40)\n }\n \n input {\n border-radius: 0.75rem !important; \n border: 1px !important; \n border-color: var(--lavender-light) !important;\n outline-style: none !important; \n font-size: 1rem !important;\n line-height: 1.5rem !important; \n transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms; \n transition-duration: 100ms;\n padding-top: 0.5rem !important;\n padding-bottom: 0.5rem !important; \n padding-left: 0.75rem !important;\n padding-right: 0.75rem !important; \n }\n \n input:focus {\n outline: none; /* focus:outline-none */\n border-color: var(--indigo-60) !important; /* focus:border-indigo-60 */\n box-shadow: 0 0 0 4px var(--lavender-light) !important; /* focus:ring-4 focus:ring-lavender-light */\n }\n \n input:hover {\n border-color: var(--night-20) !important; /* hover:border-night-20 */\n }\n \n span.icon { display: none !important; }\n \n #nav .bar {\n height: 1px !important;\n border-radius: 0 !important;\n background-color: var(--tiger) !important;\n }\n `\n }\n}\n"],"names":["emoji_controller","ApplicationController","init","data","emoji","style","category","Picker","Current","__publicField"],"mappings":"gRAMe,MAAKA,UAASC,CAAsB,CAWjD,YAAa,CACX,KAAK,cAAgB,KAAK,cAAc,KAAK,IAAI,EAEjD,MAAM,WAAU,CACpB,CAEE,SAAU,CACRC,EAAK,CAAC,KAAAC,CAAI,CAAC,EACX,KAAK,qBAAoB,EAEzB,MAAM,QAAO,CACjB,CAEE,gBAAiB,CACf,KAAK,MAAM,KAAK,cAAc,cAAc,OAAO,EAAG,CAAC,gBAAiB,EAAI,CAAC,EAC7E,KAAK,SAAS,QAAQ,CAC1B,CAEE,gBAAiB,CAGnB,CAEE,cAAcC,EAAO,CACnB,KAAK,SAAS,WAAY,CACxB,OAAQA,CACT,CAAA,EAED,KAAK,aAAa,MAAK,CAC3B,CAEE,QAAS,CACP,MAAM,OAAO,KAAK,YAAY,CAClC,CAEE,SAAU,CACR,MAAM,QAAQ,KAAK,YAAY,CACnC,CAEE,YAAa,CACR,KAAK,YAAY,KAAK,UAAU,IAEnC,KAAK,SAAS,QAAQ,EACtB,KAAK,aAAa,MAAK,EAC3B,CAIE,sBAAuB,CACrB,KAAK,WAAW,YAAY,KAAK,YAAY,EAC7C,KAAK,0CAAyC,EAC9C,KAAK,oBAAmB,CAC5B,CAGE,2CAA4C,CAC1C,WAAW,IAAM,CACf,MAAMC,EAAQ,SAAS,cAAc,OAAO,EAC5CA,EAAM,UAAY,KAAK,eAEvB,KAAK,cAAc,YAAYA,CAAK,EAEpC,KAAK,cAAc,iBAAiB,WAAW,EAAE,QAAQC,GAAY,CACnEA,EAAS,kBAAkB,UAAU,IAAI,SAAS,CACnD,CAAA,CACP,EAAO,GAAG,CACV,CAME,qBAAsB,CACpB,KAAK,cAAc,iBAAiB,QAAS,IAAM,CACjD,KAAK,cAAgB,GACrB,KAAK,SAAS,IAAM,KAAK,cAAgB,GAAO,GAAG,CACpD,CAAA,CAeL,CAEE,IAAI,eAAgB,CAClB,OAAO,KAAK,QAAQ,cAAc,iBAAiB,EAAE,UACzD,CAEE,IAAI,cAAe,CACjB,OAAO,IAAIC,EAAO,CAChB,cAAe,KAAK,cACpB,MAAO,QACP,aAAc,GACd,OAAQC,EAAQ,OAChB,gBAAiB,OACjB,iBAAkB,OAClB,UAAW,KAAK,UAChB,QAAS,KAAK,YACf,CAAA,CACL,CAEE,IAAI,gBAAiB,CACnB,MAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OA4CZ,CACA,CAtKEC,EADkBT,EACX,SAAS,CACd,KAAM,CAAE,KAAM,OAAQ,QAAS,EAAI,EACnC,QAAS,CAAE,KAAM,OAAQ,QAAS,CAAC,CACvC,GAEES,EANkBT,EAMX,UAAU,CACf,OACA,QACJ"}