/*
* Copyright 2016 Anyware Services
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/**
* This class provides a widget to select one or more tags.<br>
* See {@link Ametys.cms.uihelper.ChooseTag}<br>
*
* This widget is registered for fields of type Ametys.form.WidgetManager#TYPE_STRING.
*/
Ext.define('Ametys.cms.form.widget.Tag', {
extend : 'Ametys.form.AbstractField',
canDisplayComparisons: true,
/**
* @cfg {String} chooseTagWindowTitle Title of the dialog box to choose tags. See {@link Ametys.cms.uihelper.ChooseTag#open}.
*/
/**
* @cfg {String} chooseTagWindowIcon The full icon path the dialog box to choose tags. See {@link Ametys.cms.uihelper.ChooseTag#open}.
*/
/**
* @cfg {String} chooseTagHelpMessage The help message to display on top of dialog box to choose tags. See {@link Ametys.cms.uihelper.ChooseTag#open}.
*/
/**
* @cfg {String} [buttonIcon] The full path to the button icon (in 16x16 pixels)
*/
/**
* @cfg {String} [buttonIconCls=ametysicon-tag25] The separated CSS classes to apply to button
*/
buttonIconCls: 'ametysicon-tag25',
/**
* @cfg {String} buttonTooltipText The button tooltip text
*/
buttonTooltipText : "{{i18n WIDGET_TAG_ADD_BUTTON_TOOLTIP}}",
/**
* @cfg {String} deleteButtonIcon The full path to the delete button icon (in 16x16 pixels)
*/
/**
* @cfg {String} [deleteButtonIconCls=ametysicon-delete30] The separated CSS classes to apply to delete button
*/
deleteButtonIconCls: 'ametysicon-delete30',
/**
* @cfg {String} deleteTooltipText The delete button tooltip text
*/
deleteTooltipText : "{{i18n WIDGET_TAG_DELETE_BUTTON_TOOLTIP}}",
/**
* @cfg {String} deletePopupTitle The title of the delete confirmation popup
*/
deleteTitle : "{{i18n WIDGET_TAG_DELETE_CONFIRM_TITLE}}",
/**
* @cfg {String} deleteConfirm The text of the delete confirmation popup
*/
deleteConfirm : "{{i18n WIDGET_TAG_DELETE_CONFIRM_CONTENT}}",
/**
* @cfg {String} emptyText The text for empty field
*/
emptyText: "{{i18n WIDGET_TAG_NO_TAG}}",
/**
* @cfg {String} buttonAutopostingEnabledIconCls The separated CSS classes to apply to button for autoposting enabled
*/
buttonAutopostingEnabledIconCls: 'ametysicon-text decorator-ametysicon-check34 tag-autoposting tag-autoposting-enabled',
/**
* @cfg {String} buttonAutopostingDisabledIconCls The separated CSS classes to apply to button for autoposting disabled
*/
buttonAutopostingDisabledIconCls: 'ametysicon-text decorator-ametysicon-delete30 tag-autoposting tag-autoposting-disabled',
/**
* @cfg {Number} buttonOffset The number of pixels of space reserved between
* the button and the text field (defaults to 5).
*/
buttonOffset: 5,
/**
* @cfg {Boolean} multiple True to allow multi-selection and display checkboxes (defaults to false).
*/
multiple: false,
/**
* @cfg {Boolean} [onlyCustomTags=false] If true, only custom tags (JCR) will be shown.
*/
onlyCustomTags: false,
/**
* @cfg {Boolean} [onlyTagsWithChildren=false] If true, only tags with children will be checkable.
*/
onlyTagsWithChildren: false,
/**
* @cfg {Boolean} [allowToggleAutoposting=false] Set to `true` to allow autoposting during search.
*/
allowToggleAutoposting: false,
/**
* @property {Boolean} _activeAutoposting Is the autoposting is currently active. See {#cfg-allowToggleAutoposting}
* @private
*/
/**
* @cfg {Boolean} [allowProviders=false] If true, tag providers will also be checkable.
*/
allowProviders: false,
/**
* @cfg {Boolean} [allowCreation=false] If true, a link at the dialog bottom proposes to add a new page (defaults to false).
*/
allowCreation: false,
/**
* @cfg {String} [targetType=null] The type of tags to display. Set to the type of target to display only tags of this type. Set to null to display all tags.
*/
targetType: null,
/**
* @cfg {String} [plugin] The name of plugin used to retrieve tags list. If null the default one will be used.
*/
plugin: null,
/**
* @cfg {String} [url] The url used to retrieve tags list. If null the default one will be used.
*/
url: null,
/**
* @cfg {String} [currentSelectionMessageTargetType] The type of taggable objects to search in current selection.
* This will determines the value of 'taggableObject' configuration parameters pass to {@link Ametys.cms.uihelper.ChooseTag} helper : the user rights will be tested on these objects.
* Use this configuration option if the widget is used to tag an object from current selection.
*/
currentSelectionMessageTargetType: null,
/**
* @cfg {Number} width The text field width in pixel(defaults to 470)
*/
width: 470,
xtype: 'edition.tag',
/**
* @inheritdoc
* Initializes the tags field and button
*/
initComponent : function()
{
var items = [], me = this;
var tagsConfig = Ext.applyIf(this.tagsConfig || {}, {
cls: Ametys.form.AbstractField.READABLE_TEXT_CLS,
html: '',
flex: 1
});
this.tagsField = Ext.create('Ext.Component', tagsConfig);
items.push(this.tagsField);
// Button to open the dialog box for choosing tags
var tagPopupConfig = Ext.applyIf(this.tagPopupConfig || {}, {
icon: this.buttonIcon,
iconCls: this.buttonIcon ? null : this.buttonIconCls,
tooltip: this.buttonTooltipText,
handler : Ext.bind(this._showTagPopup, this),
width: 24,
scope : this
});
this._tagPopupButton = Ext.create('Ext.button.Button', tagPopupConfig);
items.push(this._tagPopupButton);
// Button which deletes the value.
var deleteButtonConfig = Ext.applyIf(this.deleteButtonConfig || {}, {
icon: this.deleteButtonIcon,
iconCls: this.deleteButtonIcon ? null: this.deleteButtonIconCls,
tooltip: this.deleteTooltipText,
handler: this._deleteValue,
width: 24,
scope: this,
hidden: true
});
this._deleteButton = Ext.create('Ext.button.Button', deleteButtonConfig);
items.push(this._deleteButton);
if (this.allowToggleAutoposting == true || this.allowToggleAutoposting == 'true')
{
this._activeAutoposting = false;
items.push(Ext.create('Ext.button.Button', {
itemId: 'toggle-autoposting',
text: '',
iconCls: this.buttonAutopostingDisabledIconCls,
tooltip: "{{i18n WIDGET_TAG_AUTOPOSTING_DISABLED}}",
enableToggle: true,
width: 24,
pressed: this._activeAutoposting,
toggleHandler: function (btn, state) {
this._activeAutoposting = state;
if (this._activeAutoposting)
{
btn.setIconCls(this.buttonAutopostingEnabledIconCls);
btn.setTooltip("{{i18n WIDGET_TAG_AUTOPOSTING_ENABLED}}")
}
else
{
btn.setIconCls(this.buttonAutopostingDisabledIconCls);
btn.setTooltip("{{i18n WIDGET_TAG_AUTOPOSTING_DISABLED}}");
}
},
scope: this
}));
}
this.items = items;
this.layout = 'hbox';
this.cls = [this.emptyCls, 'ametys-tags-field'];
this.callParent(arguments);
},
constructor: function (config)
{
config.allowCreation = config.allowCreation === true || config.allowCreation == 'true';
config.allowProviders = config.allowProviders === true || config.allowProviders == 'true';
config.multiple = config.multiple === true || config.multiple == 'true';
config.onlyCustomTags = config.onlyCustomTags === true || config.onlyCustomTags == 'true';
config.onlyTagsWithChildren = config.onlyTagsWithChildren === true || config.onlyTagsWithChildren == 'true';
config.targetType = config.targetType || null;
config.url = config.url || 'tags.json';
config.plugin = config.plugin || 'cms';
this.callParent(arguments);
},
/**
* Delete the current widget value
* @private
*/
_deleteValue: function()
{
this.setValue([]);
this._updateUI();
},
afterRender: function()
{
this.callParent(arguments);
this._updateUI();
},
/**
* Update UI
* @private
*/
_updateUI: function()
{
if (!this.rendered)
{
return;
}
var value = this._getTagValueAsArray();
if (value.length === 0)
{
this._deleteButton.hide();
this._tagPopupButton.setVisible(!this.readOnly);
}
else
{
if (!this.multiple)
{
this._deleteButton.setVisible(!this.readOnly);
this._tagPopupButton.hide();
}
else
{
this._tagPopupButton.setVisible(!this.readOnly);
}
}
this._updateDisplayField();
},
/**
* Update the display field as a understanding value for the end user
* @private
*/
_updateDisplayField: function()
{
if (!this.rendered)
{
return;
}
value = this._getTagValueAsArray();
if (value.length > 0)
{
this._getTagsTitle(value, this._updateDisplayFieldCb);
this.removeCls(this.emptyCls);
}
else
{
this._updateDisplayFieldCb([]);
this.addCls(this.emptyCls);
}
},
/**
* @protected
* Get the tags's title
* @param {String[]} values The tags' values
* @param {Function} callback The callback to invoke after retrieving titles
* @param {Object} [scope] the scope
*/
_getTagsTitle: function(values, callback, scope)
{
Ametys.data.ServerComm.callMethod({
role: "org.ametys.cms.tag.TagsDAO",
methodName: 'getTagsTitle',
parameters: [values, this.getContextualParameters() ],
errorMessage: "{{i18n PLUGINS_CMS_HANDLE_TAGS_TAG_ERROR}}",
callback: {
handler: callback,
scope: scope || this
}
});
},
/**
* Retrieves the contextual parameters for the tag widget
* @return {Object} The contextual parameters
*/
getContextualParameters: function()
{
return Ametys.getAppParameters();
},
/**
* transform the widget value in a human readable string
* @return {String} a human readable string
*/
getReadableValue: function ()
{
var value = this._getTagValueAsArray();
if (value.length > 0)
{
var result = this._readableValue || value;
return (Ext.isArray(result) ? result.join(", ") : result);
}
else if (this.readOnly)
{
return '';
}
else
{
return this.emptyText;
}
},
/**
* Extract the tag values from current value
* @return {String[]} the current tags as array
*/
_getTagValueAsArray: function()
{
var value = Ext.clone(this.value);
if (!value)
{
return [];
}
if (Ext.isObject(value) && value.value)
{
value = value.value;
}
return Ext.Array.from(value);
},
/**
* @inheritdoc
* Sets a data value into the field and updates the display field
* @param {Object} value The value to set.
*/
setValue: function (value)
{
if (Ext.isObject(value) && value.value)
{
this.items.get('toggle-autoposting').toggle(value.autoposting || false);
value = value.value;
}
value = Ext.Array.from(value);
value = this.multiple ? value : value[0];
this.callParent([value]);
this._updateUI();
},
getValue: function ()
{
var value = this.callParent(arguments);
if (this.allowToggleAutoposting == true || this.allowToggleAutoposting == 'true')
{
if (!Ext.isEmpty(value))
{
return {
value: value,
autoposting: this._activeAutoposting
};
}
}
return value;
},
getSubmitValue: function ()
{
return this.multiple || (this.allowToggleAutoposting == true || this.allowToggleAutoposting == 'true') ? Ext.encode(this.getValue()) : this.getValue();
},
/**
* @protected
* The launcher for the tags popup window.
*/
_showTagPopup : function()
{
Ametys.cms.uihelper.ChooseTag.open(this._getTagPopUpConfiguration());
},
/**
* @protected
* Get the configuration to use for the pop-up allowing to choose tag(s).
* @return {Object} the configuration object to use for the choose tag pop-up
*/
_getTagPopUpConfiguration: function()
{
var values = this.value ? Ext.Array.clone(this.value) : [];
var taggableObjects = [];
if (this.currentSelectionMessageTargetType != null)
{
var targets = Ametys.message.MessageBus.getCurrentSelectionMessage().getTargets(this.currentSelectionMessageTargetType);
Ext.Array.forEach (targets, function (target) {
taggableObjects.push(target.getParameters().id)
});
}
return {
title: this.chooseTagWindowTitle,
icon: this.chooseTagWindowIcon,
helpMessage: this.chooseTagHelpMessage,
values: values,
multiple: this.multiple,
onlyCustomTags: this.onlyCustomTags,
allowProviders: this.allowProviders,
allowCreation: this.allowCreation,
onlyTagsWithChildren: this.onlyTagsWithChildren,
targetType: this.targetType,
callback: Ext.bind(this._chooseTagCallback, this),
url: this.url,
taggableObjects: this.currentSelectionMessageTargetType != null ? taggableObjects : null,
contextualParameters: this.getContextualParameters()
};
},
/**
* @protected
* Callback function called after choosing the tag.
* Update the field value.
* @param {String|String[]} tags The selected tags
* @param {Object} params additional parameters
*/
_chooseTagCallback: function (tags, params)
{
this.setValue(tags);
},
/**
* Set the readable value from a list of title
* @param {Object} result the server JSON response
* @param {Array} result.titles the list of titles
* @private
*/
_updateDisplayFieldCb: function (result)
{
if (result)
{
this._readableValue = Ext.Array.map(result.titles || [], v => Ext.String.escapeHtml(v));
}
this.tagsField.update("<span>" + this.getReadableValue() + "</span>");
},
setComparisonValue: function(otherValue, base)
{
this.toggleCls("ametys-tags-comparable", true);
}
});