periodicjs.ext.asyncadmin/resources/js/filterlist.js

An authentication extension for periodicjs that uses passport to authenticate user sessions.

'use strict';

var util = require('util'),
	events = require('events'),
	classie = require('classie'),
	querystring = require('querystring'),
	extend = require('util-extend');

/**
 * A module that represents a filterlist object, a componentTab is a page composition tool.
 * @{@link https://github.com/typesettin/filterlist}
 * @author Yaw Joseph Etse
 * @copyright Copyright (c) 2014 Typesettin. All rights reserved.
 * @license MIT
 * @constructor filterlist
 * @requires module:events
 * @requires module:util-extend
 * @requires module:util
 * @param {object} options configuration options
 * @example 
		filterlist_id: token(),
		push_state_support: true,
		replacecallback: function (data) {
			console.log(data);
		},
		popcallback: function (data) {
			console.log(data);
		},
		pushcallback: function (data) {
			console.log(data);
		}
 */
var filterlist = function (options) {
	events.EventEmitter.call(this);
	var defaultOptions = {
		element: {},
		filterkeys: []
	};
	this.options = extend(defaultOptions, options);
	this.options.fl_elem_container = this.options.element.querySelector('.ts-filterlist-element-container');
	this.options.forbject_name = this.options.element.getAttribute('data-formelement');
	this.init = this.__init;
	this.init();
	// this.addBinder = this._addBinder;
};

util.inherits(filterlist, events.EventEmitter);

var generate_filter_container = function (elem, e, filterkeyslist, forbject_name, precheked) {
	var filterkeys = filterkeyslist.split(','),
		set_fq_input_val = function (valEvent) {
			var parentElem = valEvent.target.parentElement;
			parentElem.querySelector('.ts-fq-h-name').setAttribute('value', parentElem.querySelector('.ts-fq-key').value + '|||' + parentElem.querySelector('.ts-fq-op').value + '|||' + parentElem.querySelector('.ts-fq-val').value);
			parentElem.querySelector('.ts-fq-h-name').setAttribute('checked', 'checked');
			window.AdminFormies[forbject_name].setFormElements();
			window.AdminFormies[forbject_name].refresh();

		};


	var filter_query_key_select = document.createElement('select'),
		filter_query_key_op = document.createElement('select'),
		filter_query_key_input = document.createElement('input'),
		filter_query_hidden_input = document.createElement('input'),
		filter_query_remove_button = document.createElement('a'),
		filter_query_container = document.createElement('div');

	filter_query_hidden_input.setAttribute('name', 'fq');
	filter_query_hidden_input.setAttribute('type', 'checkbox');
	filter_query_hidden_input.setAttribute('class', 'ts-fq-h-name ts-hidden');
	if (precheked) {
		filter_query_hidden_input.setAttribute('checked', 'checked');
	}
	filter_query_hidden_input.setAttribute('value', '');

	// filter_query_hidden_input.type = 'hidden';

	filter_query_key_select.setAttribute('class', 'ts-fq-key ts-button ts-button-transparent bottom-border ts-col-span4');
	filterkeys.forEach(function (fkey) {
		filter_query_key_select.innerHTML += '<option value="' + fkey + '">' + fkey + '</option>';
	});

	filter_query_key_op.setAttribute('class', 'ts-fq-op ts-button ts-button-transparent bottom-border ts-col-span2');
	filter_query_key_op.innerHTML = '<option value="is"> = </option>';
	filter_query_key_op.innerHTML += '<option value="like"> % like % </option>';
	filter_query_key_op.innerHTML += '<option value="not"> != </option>';
	filter_query_key_op.innerHTML += '<option value="not-like"> % not like % </option>';
	filter_query_key_op.innerHTML += '<option value="lt"> < </option>';
	filter_query_key_op.innerHTML += '<option value="lte"> <= </option>';
	filter_query_key_op.innerHTML += '<option value="gt"> > </option>';
	filter_query_key_op.innerHTML += '<option value="gte"> >= </option>';
	filter_query_key_op.innerHTML += '<option value="in">contains any element</option>';
	filter_query_key_op.innerHTML += '<option value="all">contains every element</option>';
	filter_query_key_op.innerHTML += '<option value="not-in">does not contain any element</option>';
	filter_query_key_op.innerHTML += '<option value="exists">exists</option>';
	filter_query_key_op.innerHTML += '<option value="size">size</option>';
	filter_query_key_op.innerHTML += '<option value="is-date">date</option>';
	filter_query_key_op.innerHTML += '<option value="lte-date">before or same date</option>';
	filter_query_key_op.innerHTML += '<option value="lt-date">before date</option>';
	filter_query_key_op.innerHTML += '<option value="gte-date">after or same date</option>';
	filter_query_key_op.innerHTML += '<option value="gt-date">after  date</option>';
	filter_query_key_input.setAttribute('class', 'ts-fq-val ts-button ts-button-transparent bottom-border ts-col-span4');

	filter_query_remove_button.innerHTML = 'x';
	filter_query_remove_button.setAttribute('class', 'ts-button ts-button-transparent bottom-border remove-ts-filter-button');

	filter_query_container.setAttribute('class', 'ts-form-row ts-row');
	// console.log('e', e);
	// console.log(this.options.filterkeys);
	filter_query_container.appendChild(filter_query_key_select);
	filter_query_container.appendChild(filter_query_key_op);
	filter_query_container.appendChild(filter_query_key_input);
	filter_query_container.appendChild(filter_query_remove_button);
	filter_query_container.appendChild(filter_query_hidden_input);
	elem.appendChild(filter_query_container);
	if (e.generate_from_url) {
		filter_query_key_select.value = e.key_select_from_url;
		filter_query_key_op.value = e.op_select_from_url;
		filter_query_key_input.value = e.input_select_from_url;
		filter_query_hidden_input.value = e.hidden_select_from_url;
	}
	// filter_query_key_select.addEventListener('change', set_fq_input_val, false);
	// filter_query_key_op.addEventListener('change', set_fq_input_val, false);
	filter_query_key_input.addEventListener('change', set_fq_input_val, false);
	filter_query_key_input.addEventListener('blur', set_fq_input_val, false);
};

var addFilterEventHandler = function (e) {
	// console.log('addFilterEventHandler this.options', this.options);
	if (!this.options) {
		this.options = e.contextVar;
	}
	// console.log('addFilterEventHandler this.options', this.options);


	if (classie.has(e.target, 'remove-ts-filter-button')) {
		e.target.parentElement.parentElement.removeChild(e.target.parentElement);

		window.AdminFormies[this.options.forbject_name].setFormElements();
		window.AdminFormies[this.options.forbject_name].refresh();
	}
	else if (classie.has(e.target, 'add-filterlist-button') || e.generate_from_url) {
		generate_filter_container(this.options.fl_elem_container, e, this.options.filterkeys, this.options.forbject_name);
		// AdminFormies["search-options-form"].setFormElements()
	}
};

/**
 * sets detects support for history push/pop/replace state and can set initial data
 * @emits initialized
 */
filterlist.prototype.__init = function () {
	var windowqueryobj = querystring.parse(window.location.search);

	this.options.element.addEventListener('click', addFilterEventHandler.bind(this), false);
	if (windowqueryobj.fq) {
		if (Array.isArray(windowqueryobj.fq) === false) {
			windowqueryobj.fq = new Array(windowqueryobj.fq);
		}
		for (var w = 0; w < windowqueryobj.fq.length; w++) {
			var fquery = windowqueryobj.fq[w],
				fqueryarray = fquery.split('|||'),
				e = ({
					generate_from_url: true,
					key_select_from_url: fqueryarray[0],
					op_select_from_url: fqueryarray[1],
					input_select_from_url: fqueryarray[2],
					hidden_select_from_url: fquery,
				});
			generate_filter_container(this.options.fl_elem_container, e, this.options.filterkeys, this.options.forbject_name, true);
		}
	}
	generate_filter_container(this.options.fl_elem_container, {}, this.options.filterkeys, this.options.forbject_name);

	this.emit('initialized');
};
module.exports = filterlist;