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

Web library from zotero.org

'use strict';

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

var React = require('react');
var BootstrapModalWrapper = require('./BootstrapModalWrapper.js');

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

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

		library.listen('settingsLoaded', reactInstance.updateStateFromLibrary, {});
		library.listen('librarySettingsDialog', reactInstance.openDialog, {});
	},
	getInitialState: function getInitialState() {
		return {
			listDisplayedFields: [],
			itemsPerPage: 25,
			showAutomaticTags: true
		};
	},
	openDialog: function openDialog() {
		this.refs.modal.open();
	},
	closeDialog: function closeDialog(evt) {
		this.refs.modal.close();
	},
	updateShowFields: function updateShowFields(evt) {
		log.debug('updateShowFields', 3);
		var library = this.props.library;
		var listDisplayedFields = this.state.listDisplayedFields;
		var fieldName = evt.target.value;
		var display = evt.target.checked;

		if (display) {
			log.debug('adding field ' + fieldName + ' to listDisplayedFields', 3);
			listDisplayedFields.push(fieldName);
		} else {
			log.debug('filtering field ' + fieldName + ' from listDisplayedFields', 3);

			listDisplayedFields = listDisplayedFields.filter(function (val) {
				if (val == fieldName) {
					return false;
				}
				return true;
			});
		}

		this.setState({
			listDisplayedFields: listDisplayedFields
		});

		library.preferences.setPref('listDisplayedFields', listDisplayedFields);
		library.preferences.persist();

		library.trigger('displayedItemsChanged');
	},
	updateShowAutomaticTags: function updateShowAutomaticTags(evt) {
		var library = this.props.library;
		var showAutomaticTags = evt.target.checked;

		this.setState({
			showAutomaticTags: showAutomaticTags
		});
		library.preferences.setPref('showAutomaticTags', showAutomaticTags);
		library.preferences.persist();

		library.trigger('tagsChanged');
	}, /*
    updateItemsPerPage: function(evt) {
    var library = this.props.library;
    var itemsPerPage = evt.target.value;
    this.setState({
    itemsPerPage: itemsPerPage
    });
    library.preferences.setPref('itemsPerPage', itemsPerPage);
    library.preferences.persist();
    library.preferences.setPref("listDisplayedFields", listDisplayedFields);
    },*/
	updateStateFromLibrary: function updateStateFromLibrary() {
		var library = this.props.library;
		this.setState({
			listDisplayedFields: library.preferences.getPref('listDisplayedFields'),
			itemsPerPage: library.preferences.getPref('itemsPerPage'),
			showAutomaticTags: library.preferences.getPref('showAutomaticTags')
		});
	},
	render: function render() {
		var reactInstance = this;
		var library = this.props.library;
		var listDisplayedFields = this.state.listDisplayedFields;
		var itemsPerPage = this.state.itemsPerPage;
		var showAutomaticTags = this.state.showAutomaticTags;
		var fieldMap = Zotero.localizations.fieldMap;

		var displayFieldNodes = Zotero.Library.prototype.displayableColumns.map(function (val, ind) {
			var checked = listDisplayedFields.indexOf(val) != -1;
			return React.createElement(
				'div',
				{ key: val, className: 'checkbox' },
				React.createElement(
					'label',
					{ htmlFor: 'display-column-field-' + val },
					React.createElement('input', { onChange: reactInstance.updateShowFields, type: 'checkbox', checked: checked, name: 'display-column-field', value: val, id: 'display-column-field-' + val, className: 'display-column-field' }),
					fieldMap[val] || val
				)
			);
		});

		return React.createElement(
			BootstrapModalWrapper,
			{ ref: 'modal' },
			React.createElement(
				'div',
				{ id: 'library-settings-dialog', className: 'library-settings-dialog', role: 'dialog', 'aria-hidden': 'true', 'data-keyboard': 'true' },
				React.createElement(
					'div',
					{ className: 'modal-dialog' },
					React.createElement(
						'div',
						{ className: 'modal-content' },
						React.createElement(
							'div',
							{ className: 'modal-header' },
							React.createElement(
								'button',
								{ type: 'button', className: 'close', 'data-dismiss': 'modal', 'aria-hidden': 'true' },
								'×'
							),
							React.createElement(
								'h3',
								{ className: 'modal-title' },
								'Library Settings'
							)
						),
						React.createElement(
							'div',
							{ className: 'modal-body' },
							React.createElement(
								'form',
								{ id: 'library-settings-form', className: 'library-settings-form', role: 'form' },
								React.createElement(
									'fieldset',
									null,
									React.createElement(
										'legend',
										null,
										'Display Columns'
									),
									displayFieldNodes
								),
								React.createElement(
									'div',
									{ className: 'checkbox' },
									React.createElement(
										'label',
										{ htmlFor: 'show-automatic-tags' },
										React.createElement('input', { onChange: this.updateShowAutomaticTags, type: 'checkbox', id: 'show-automatic-tags', name: 'show-automatic-tags' }),
										'Show Automatic Tags'
									),
									React.createElement(
										'p',
										{ className: 'help-block' },
										'Automatic tags are tags added automatically when a reference was imported, rather than by a user.'
									)
								)
							)
						),
						React.createElement(
							'div',
							{ className: 'modal-footer' },
							React.createElement(
								'button',
								{ className: 'btn btn-default', 'data-dismiss': 'modal', 'aria-hidden': 'true' },
								'Close'
							)
						)
					)
				)
			)
		);
	}
});

module.exports = LibrarySettingsDialog;