Tims-Chat/files_wcf/js/Bastelstu.be/Chat/Ui/Settings/SmiliesButton.js

/*
 * Copyright (c) 2010-2018 Tim Düsterhus.
 *
 * Use of this software is governed by the Business Source License
 * included in the LICENSE file.
 *
 * Change Date: 2024-10-20
 *
 * On the date above, in accordance with the Business Source
 * License, use of this software will be governed by version 2
 * or later of the General Public License.
 */

define([ './ToggleButton'
       , 'WoltLabSuite/Core/Ui/Screen'
       ], function (ToggleButton, UiScreen) {
	'use strict';

	const DEPENDENCIES = [ 'UiInput' ].concat(ToggleButton.DEPENDENCIES || [ ])
	class SmiliesButton extends ToggleButton {
		constructor(element, input, ...superDeps) {
			super(element, false, undefined, ...superDeps)

			this.input = input
		}

		bootstrap() {
			this.container   = elById('smileyPickerContainer')

			// Remove this button if smileys are disabled
			if (!this.container) {
				elRemove(this.element.closest('li'))
			}

			this.closeButton = elById('smileyPickerCloseButton')

			// Initialize the smiley picker tab menu
			$('.messageTabMenu').messageTabMenu()

			$('#smilies-text').on('mousedown', '.jsSmiley', this.insertSmiley.bind(this))
			this.closeButton.addEventListener('mousedown', this.disable.bind(this))

			// Start in desktop mode
			this.mobile = false

			// Do not persist the state
			super.bootstrap()

			// Setup media queries
			UiScreen.on('screen-md-down', {
				match:   this.enableMobile.bind(this),
				unmatch: this.disableMobile.bind(this),
				setup:   this.setupMobile.bind(this)
			})
		}

		/**
		 * Initializes and enables the mobile smiley picker UI components.
		 *
		 * A second button mirroring this button’s click handler is
		 * inserted next to the message input while this button will
		 * be hidden.
		 */
		setupMobile() {
			this.shadowToggleButton = document.createElement('span')
			this.shadowToggleButton.classList.add('smiliesToggleMobileButton', 'button', 'small')
			this.shadowToggleButton.innerHTML = '<span class="icon icon24 fa-smile-o"></span>'
			this.shadowToggleButton.addEventListener('mousedown', this.onClick.bind(this))

			const shadowContainer = elBySel('#chatInputContainer > div')
			shadowContainer.insertBefore(this.shadowToggleButton, shadowContainer.firstChild)

			this.enableMobile()
		}

		/**
		 * Enables the mobile smiley picker components.
		 *
		 * Hides this button and shows it’s mirror next to the message input.
		 */
		enableMobile() {
			this.mobile = true

			elHide(this.element)
			elShow(this.shadowToggleButton)

			// Do not show the overlay when the viewport changes
			// and becomes smaller
			this.disable()
		}

		/**
		 * Disables the mobile smiley picker components.
		 *
		 * Shows this button and hides it’s mirror next to the message input.
		 * Also re-enables scrolling of the main body.
		 */
		disableMobile() {
			this.mobile = false

			elShow(this.element)
			elHide(this.shadowToggleButton)

			UiScreen.scrollEnable()
		}

		/**
		 * Event handler to handle the insertion of smilies into the message input.
		 * This handler closes the fulls creen overlay of the mobile view after insertion.
		 *
		 * @param  {Event} event The event bound in the init() function
		 */
		insertSmiley(event) {
			event.preventDefault()
			event.stopPropagation()

			const smileyCode = event.currentTarget.children[0].getAttribute('alt')

			this.input.insertText(` ${smileyCode} `)

			if (this.mobile) {
				this.disable()
			}
		}

		/**
		 * Enables the smiley picker.
		 * If the mobile view is active, scrolling of the main body will be disabled.
		 */
		enable() {
			super.enable()

			elShow(this.container)
			elData(this.container, 'show', 'true')

			if (this.mobile) {
				UiScreen.scrollDisable()
			}
		}

		/**
		 * Disables the smiley picker.
		 * If the mobile view is active, scrolling of the main body will be re-enabled.
		 */
		disable() {
			super.disable()

			elHide(this.container)
			elData(this.container, 'show', 'false')

			if (this.mobile) {
				UiScreen.scrollEnable()
			}
		}
	}
	SmiliesButton.DEPENDENCIES = DEPENDENCIES

	return SmiliesButton
});