zotero-web-library/lib/libraryUi/widgets/FilterGuide.js

Web library from zotero.org

'use strict';

var log = require('libzotero/lib/Log').Logger('zotero-web-library:filterGuide');

var React = require('react');

var FilterGuide = React.createClass({
	displayName: 'FilterGuide',

	componentWillMount: function componentWillMount() {
		var reactInstance = this;
		var library = this.props.library;

		library.listen('displayedItemsChanged', reactInstance.refreshFilters, {});
		library.listen('displayedItemChanged', reactInstance.refreshFilters, {});
		library.listen('updateFilterGuide', reactInstance.refreshFilters, {});
		library.listen('selectedCollectionChanged', reactInstance.refreshFilters, {});
		library.listen('cachedDataLoaded', reactInstance.refreshFilters, {});
		library.listen('libraryCollectionsUpdated', reactInstance.refreshFilters, {});
	},
	getInitialState: function getInitialState() {
		return {
			collectionKey: '',
			tags: [],
			query: ''
		};
	},
	refreshFilters: function refreshFilters(evt) {
		var library = this.props.library;
		var displayConfig = Zotero.ui.getItemsConfig(library);
		this.setState({
			collectionKey: displayConfig['collectionKey'],
			tags: displayConfig['tag'],
			query: displayConfig['q']
		});
	},
	clearFilter: function clearFilter(evt) {
		evt.preventDefault();
		log.debug('widgets.filterGuide.clearFilter', 3);
		var library = this.props.library;
		var target = evt.currentTarget;
		var collectionKey = target.getAttribute('data-collectionkey');
		var tag = target.getAttribute('data-tag');
		var query = target.getAttribute('data-query');
		if (collectionKey) {
			Zotero.state.unsetUrlVar('collectionKey');
			this.setState({ collectionKey: '' });
		}
		if (tag) {
			Zotero.state.toggleTag(tag);
			this.setState({ tags: Zotero.state.getUrlVar('tag') });
		}
		if (query) {
			library.trigger('clearLibraryQuery');
			this.setState({ query: '' });
			return;
		}
		Zotero.state.pushState();
	},
	render: function render() {
		var reactInstance = this;
		var library = this.props.library;
		var collectionNodes = null;
		var tagNodes = null;
		var searchNodes = null;

		if (this.state.collectionKey != '') {
			var collection = library.collections.getCollection(this.state.collectionKey);
			if (collection) {
				collectionNodes = React.createElement(
					'li',
					{ key: 'collection_' + reactInstance.state.collectionKey, className: 'filterguide-entry' },
					React.createElement(
						'a',
						{ onClick: reactInstance.clearFilter, href: '#', 'data-collectionkey': reactInstance.state.collectionKey },
						React.createElement('span', { className: 'glyphicons fonticon glyphicons-folder-open' }),
						React.createElement(
							'span',
							{ className: 'filterguide-label' },
							collection.get('name')
						),
						React.createElement('span', { className: 'glyphicons fonticon glyphicons-remove' })
					)
				);
			}
		}

		var tags = this.state.tags;
		if (typeof tags == 'string') {
			tags = [tags];
		}
		if (tags) {
			tagNodes = tags.map(function (tag) {
				return React.createElement(
					'li',
					{ key: 'tag_' + tag, className: 'filterguide-entry' },
					React.createElement(
						'a',
						{ onClick: reactInstance.clearFilter, href: '#', 'data-tag': tag },
						React.createElement('span', { className: 'glyphicons fonticon glyphicons-tag' }),
						React.createElement(
							'span',
							{ className: 'filterguide-label' },
							tag
						),
						React.createElement('span', { className: 'glyphicons fonticon glyphicons-remove' })
					)
				);
			});
		}
		if (this.state.query) {
			searchNodes = React.createElement(
				'li',
				{ key: 'query_' + reactInstance.state.query, className: 'filterguide-entry' },
				React.createElement(
					'a',
					{ onClick: reactInstance.clearFilter, href: '#', 'data-query': reactInstance.state.query },
					React.createElement('span', { className: 'glyphicons fonticon glyphicons-search' }),
					React.createElement(
						'span',
						{ className: 'filterguide-label' },
						reactInstance.state.query
					),
					React.createElement('span', { className: 'glyphicons fonticon glyphicons-remove' })
				)
			);
		}

		return React.createElement(
			'div',
			{ id: 'filter-guide', className: 'filter-guide col-12' },
			React.createElement(
				'ul',
				{ className: 'filterguide-list' },
				collectionNodes,
				tagNodes,
				searchNodes
			)
		);
	}
});

module.exports = FilterGuide;