@sgalinski/responsive-side-menu/src/js/plugins/search.js

A simple and extendable slide-in menu

/* global alert */

import Plugin from '../plugin';
import Settings from '../settings';

export default class SearchPlugin extends Plugin {

	constructor() {
		super();
		this.setUpMarkup();
		this.setUpEventListeners();
	}

	getPluginName() {
		return 'search-plugin';
	}

	setUpMarkup() {
		let placeholderText = 'Search';

		if (Settings.get.hasOwnProperty('search') && Settings.get.search.hasOwnProperty('placeholderText')) {
			const {placeholderText: configuredPlaceholderText} = Settings.get.search;
			placeholderText = configuredPlaceholderText;
		}

		this.searchInput = document.createElement('INPUT');
		this.searchInput.setAttribute('type', 'text');
		this.searchInput.setAttribute('name', 'query');
		this.searchInput.setAttribute('placeholder', placeholderText);
		this.rootElement.appendChild(this.searchInput);
	}

	setUpEventListeners() {
		this.searchInput.addEventListener('keydown', this.submit.bind(this));
	}

	submit(event) {
		if (event.keyCode === 13) {
			let query = this.searchInput.value;
			if (Settings.get.hasOwnProperty('search') && Settings.get.search.hasOwnProperty('submitCallback')) {
				Settings.get.search.submitCallback.call(this, query);
			} else {
				// eslint-disable-next-line no-alert
				alert(`You searched for ${query}`);
			}
		}
	}
}