searchOption (component)

Description

This blueprint is based on the blueprint of Veams.

Requirements

• Veams#5.0.0

Installation

Installation with Veams from local machine

veams install bp absolute/filepath/to/search-option

Fields

search-option.hbs

Settings

Content

JavaScript Options

The module gives you the possibility to override default JS options:

SASS

Variables

There are multiple variables which you can change:

Modifier Classes

There are modifier classes you can add to c-search-option:

search-option.hjson

{
	"variations": {
		"default": {
			"docs": {
				"variationName": "Default"
			},
			"settings": {
				"searchOptionContextClass": "default",
				"searchOptionClasses": "",
				"searchOptionJsOptions": {}
			},
			"content": {
				"searchoptionradio": [
					{
							"settings": {
								"colClasses": "is-grid-col is-col-tablet-p-12",
								"inputClasses": "is-radios",
								"id": "radios",
								"required": false,
								"typeOf": "radio",
								"attributes" : [
									{
										"attrKey": "data-css",
										"attrValue": "c-form"
									}
								]
							},
							"content": {
								"radios": [
									{
										"settings": {
											"wrapperClass": "is-radio-wrapper",
											"inputClass": false,
											"required": false,
											"dataAttr": false,
											"id": "gsearch-1",
											"value": "gsearch-1",
											"name": "gsearch-t",
											"labelClasses": "is-label",
											"attributes" : [
												{
													"attrKey": "checked",
													"attrValue": "checked"
												}
											]
										},
										"content": {
											"label": "in LMU.de"
										}
									},
									{
										"settings": {
											"wrapperClass": "is-radio-wrapper",
											"inputClass": false,
											"required": false,
											"dataAttr": false,
											"id": "gsearch-2",
											"value": "gsearch-2",
											"name": "gsearch-t",
											"labelClasses": "is-label"
										},
										"content": {
											"label": "in allen LMU-Webseiten"
										}
									}
								]
							}
					}
				]
			}
		},
		"nav": {
			"docs": {
				"variationName": "Radio Nav"
			},
			"settings": {
				"searchOptionContextClass": "nav",
				"searchOptionClasses": "",
				"searchOptionJsOptions": {},
				"searchOptionForm": "yes"
			},
			"content": {
				"searchoptionradio": [
					{
							"settings": {
								"colClasses": "is-grid-col is-col-tablet-p-12",
								"inputClasses": "is-radios",
								"id": "radios",
								"required": false,
								"typeOf": "radio",
								"attributes" : [
									{
										"attrKey": "data-css",
										"attrValue": "c-form"
									}
								]
							},
							"content": {
								"radios": [
									{
										"settings": {
											"wrapperClass": "is-radio-wrapper",
											"inputClass": false,
											"required": false,
											"dataAttr": false,
											"id": "gsearch-detail-1",
											"value": "gsearch-1",
											"name": "gsearch-t",
											"labelClasses": "is-label",
											"attributes" : [
												{
													"attrKey": "checked",
													"attrValue": "checked"
												},
												{
													"attrKey": "data-js-item",
													"attrValue": "js-search-option-radio"
												}
											]
										},
										"content": {
											"label": "in LMU.de"
										}
									},
									{
										"settings": {
											"wrapperClass": "is-radio-wrapper",
											"inputClass": false,
											"required": false,
											"dataAttr": false,
											"id": "gsearch-detail-2",
											"value": "gsearch-2",
											"name": "gsearch-t",
											"labelClasses": "is-label",
											"attributes" : [
												{
													"attrKey": "data-js-item",
													"attrValue": "js-search-option-radio"
												}
											]
										},
										"content": {
											"label": "in allen LMU-Webseiten"
										}
									}
								]
							}
					}
				]
			}
		}
	}
}

search-option.js

/**
 * Description of SearchOption.
 * Class properties and decorators are supported.
 *
 * @module SearchOption
 * @version v1.0.0
 *
 * @author your_name
 */

// Imports
import $ from 'jquery';
import Component from '@veams/component';

class SearchOption extends Component {
	/**
	* Class Properties
	*/
	$el = $(this.el);

	/**
	 * Constructor for our class
	 *
	 * @see module.js
	 *
	 * @param {Object} obj - Object which is passed to our class
	 * @param {Object} obj.el - element which will be saved in this.el
	 * @param {Object} obj.options - options which will be passed in as JSON object
	 */
	constructor(obj) {
		let options = {
			selectors: {
				radioButton: '[data-js-item="js-search-option-radio"]'
			},
			classes: {},
			searchOptionRadioButtons: [],
			searchOptionForm: "",
			searchOptionHidden: "",
			searchOptionSearchBox: "",
			searchOptionGoogleInput: ""
		};

		super(obj, options);
	}

	didMount() {
		console.log('Component SearchOption mounted!');


		this.options.searchOptionForm = document.querySelector(
			'[data-js-item="js-search-option-form"]'
		);

		if(this.options.searchOptionForm !== null) {
			this.options.searchOptionRadioButtons = [].slice.call(
				this.options.searchOptionForm.querySelectorAll(
					'[data-js-item="js-search-option-radio"]'
				)
			);
			if (this.options.searchOptionRadioButtons.length > 0) {
				this.options.searchOptionRadioButtons.forEach(searchradiobutton => {
					searchradiobutton.checked = false;
				});
				let radiobuttonvalue = this.getQueryStringarameterByName('gsearch-t');
				if(radiobuttonvalue !== null) {
					let isactive = false;
					this.options.searchOptionRadioButtons.forEach(searchradiobutton => {
						if(searchradiobutton.value == radiobuttonvalue) {
							searchradiobutton.checked = true;
							isactive = true;
						}
					});
					if (!isactive){
						this.options.searchOptionRadioButtons[0].checked = true;
					}
				} else {
					this.options.searchOptionRadioButtons[0].checked = true;
				}
			}

		}

	}

	/**
	 * Render class
	 */
	render() {
		return this;
	}

	get events() {
		return {
			'{{context.EVENTS.click}} {{this.options.selectors.radioButton}}': 'radioButtonChangeSearch'
		};
	}

	/** =================================================
	 * CUSTOM OVERLAY METHODS
	 * ================================================= */

	 /**
	 * Change radiobutton and send new Search request.
	 *
	 * @param {object} e - Event object.
	 * @param {object} currentTarget - Target to which listener was attached.
	 */
	radioButtonChangeSearch(e, currentTarget) {

		if(this.options.searchOptionForm !== null) {
			this.options.searchOptionHidden = this.options.searchOptionForm.querySelector(
				'[data-js-item="js-search-option-input-hidden"]'
			);

			this.options.searchOptionSearchBox = document.querySelector(
				'[data-js-item="js-search-box-google"]'
			);

			if(this.options.searchOptionSearchBox !== null) {
				this.options.searchOptionGoogleInput= this.options.searchOptionSearchBox.querySelector(
					'[name="search"]'
				);
			}

			if(this.options.searchOptionGoogleInput !== null) {
				if (this.options.searchOptionRadioButtons.length > 0) {
					this.options.searchOptionRadioButtons.forEach(searchradiobutton => {
						searchradiobutton.checked = false;
					});
				}
				currentTarget.checked = true;
				this.options.searchOptionHidden.value = this.options.searchOptionGoogleInput.value;
				this.options.searchOptionForm.submit();

			}
		}
	}

	/**
	 * Get the Parameter for the radiobuttons.
	 *
	 * @param {string} nameparam - Parameter to search for.
	 * @param {string} url - The URL from the website with all get-Parameters
	 */
	getQueryStringarameterByName(nameparam, url) {

		if(!url){
			url = window.location.href;
		}
        nameparam = nameparam.replace(/[\[\]]/g, "\\$&");
        var regex = new RegExp("[?&]" + nameparam + "(=([^&#]*)|&|#|$)"),
            results = regex.exec(url);
        if (!results) return null;
        if (!results[2]) return '';
        return decodeURIComponent(results[2].replace(/\+/g, " "));

    }
}

export default SearchOption;