2019-09-16 20:42:33 +02:00
|
|
|
import { View } from 'framework/views/view';
|
2019-09-15 14:16:32 +02:00
|
|
|
import { CopyPaste } from 'comp/browser/copy-paste';
|
|
|
|
import { Tip } from 'util/ui/tip';
|
2019-09-16 19:55:06 +02:00
|
|
|
import template from 'templates/details/field.hbs';
|
2015-10-17 23:49:24 +02:00
|
|
|
|
2019-09-16 19:55:06 +02:00
|
|
|
class FieldView extends View {
|
|
|
|
template = template;
|
2015-10-17 23:49:24 +02:00
|
|
|
|
2019-09-16 19:55:06 +02:00
|
|
|
events = {
|
2015-10-17 23:49:24 +02:00
|
|
|
'click .details__field-label': 'fieldLabelClick',
|
2018-08-22 10:04:48 +02:00
|
|
|
'click .details__field-value': 'fieldValueClick',
|
|
|
|
'dragstart .details__field-label': 'fieldLabelDrag'
|
2019-09-16 19:55:06 +02:00
|
|
|
};
|
|
|
|
|
|
|
|
constructor(model, options) {
|
|
|
|
super(model, options);
|
|
|
|
this.once('remove', () => {
|
|
|
|
if (this.tip) {
|
|
|
|
Tip.hideTip(this.valueEl[0]);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
2015-10-17 23:49:24 +02:00
|
|
|
|
2019-08-18 10:17:09 +02:00
|
|
|
render() {
|
2015-10-17 23:49:24 +02:00
|
|
|
this.value = typeof this.model.value === 'function' ? this.model.value() : this.model.value;
|
2019-09-16 19:55:06 +02:00
|
|
|
super.render({
|
2019-09-08 08:25:15 +02:00
|
|
|
cls: this.cssClass,
|
2019-08-16 23:05:39 +02:00
|
|
|
editable: !this.readonly,
|
|
|
|
multiline: this.model.multiline,
|
|
|
|
title: this.model.title,
|
|
|
|
canEditTitle: this.model.newField,
|
|
|
|
protect: this.value && this.value.isProtected
|
|
|
|
});
|
2015-10-17 23:49:24 +02:00
|
|
|
this.valueEl = this.$el.find('.details__field-value');
|
|
|
|
this.valueEl.html(this.renderValue(this.value));
|
|
|
|
this.labelEl = this.$el.find('.details__field-label');
|
2016-06-04 14:47:56 +02:00
|
|
|
if (this.model.tip) {
|
|
|
|
this.tip = typeof this.model.tip === 'function' ? this.model.tip() : this.model.tip;
|
|
|
|
if (this.tip) {
|
|
|
|
this.valueEl.attr('title', this.tip);
|
|
|
|
Tip.createTip(this.valueEl);
|
|
|
|
}
|
|
|
|
}
|
2019-09-16 19:55:06 +02:00
|
|
|
}
|
2016-06-04 14:47:56 +02:00
|
|
|
|
2019-08-18 10:17:09 +02:00
|
|
|
update() {
|
2015-10-17 23:49:24 +02:00
|
|
|
if (typeof this.model.value === 'function') {
|
2017-01-31 07:50:28 +01:00
|
|
|
const newVal = this.model.value();
|
2019-08-16 23:05:39 +02:00
|
|
|
if (
|
|
|
|
!_.isEqual(newVal, this.value) ||
|
|
|
|
(this.value && newVal && this.value.toString() !== newVal.toString())
|
|
|
|
) {
|
2015-10-17 23:49:24 +02:00
|
|
|
this.render();
|
|
|
|
}
|
|
|
|
}
|
2019-09-16 19:55:06 +02:00
|
|
|
}
|
2015-10-17 23:49:24 +02:00
|
|
|
|
2019-08-18 10:17:09 +02:00
|
|
|
fieldLabelClick(e) {
|
2015-10-17 23:49:24 +02:00
|
|
|
e.stopImmediatePropagation();
|
2017-04-16 12:15:53 +02:00
|
|
|
if (this.preventCopy) {
|
|
|
|
return;
|
|
|
|
}
|
2017-01-31 07:50:28 +01:00
|
|
|
const field = this.model.name;
|
|
|
|
let copyRes;
|
2015-10-17 23:49:24 +02:00
|
|
|
if (field) {
|
2017-01-31 07:50:28 +01:00
|
|
|
const value = this.value || '';
|
2016-01-16 15:19:33 +01:00
|
|
|
if (value && value.isProtected) {
|
2017-01-31 07:50:28 +01:00
|
|
|
const text = value.getText();
|
2016-02-14 13:05:31 +01:00
|
|
|
if (!text) {
|
|
|
|
return;
|
|
|
|
}
|
2016-01-22 18:51:36 +01:00
|
|
|
if (!CopyPaste.simpleCopy) {
|
|
|
|
CopyPaste.createHiddenInput(text);
|
|
|
|
}
|
2016-02-14 13:05:31 +01:00
|
|
|
copyRes = CopyPaste.copy(text);
|
2019-09-16 19:55:06 +02:00
|
|
|
this.emit('copy', { source: this, copyRes });
|
2015-10-17 23:49:24 +02:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
}
|
2016-02-14 13:05:31 +01:00
|
|
|
if (!this.value) {
|
|
|
|
return;
|
|
|
|
}
|
2017-01-31 07:50:28 +01:00
|
|
|
const selection = window.getSelection();
|
|
|
|
const range = document.createRange();
|
2015-10-17 23:49:24 +02:00
|
|
|
range.selectNodeContents(this.valueEl[0]);
|
|
|
|
selection.removeAllRanges();
|
|
|
|
selection.addRange(range);
|
2016-06-11 03:36:58 +02:00
|
|
|
copyRes = CopyPaste.copy(this.valueEl[0].innerText || this.valueEl.text());
|
2016-02-14 13:05:31 +01:00
|
|
|
if (copyRes) {
|
2015-10-17 23:49:24 +02:00
|
|
|
selection.removeAllRanges();
|
2019-09-16 19:55:06 +02:00
|
|
|
this.emit('copy', { source: this, copyRes });
|
2015-10-17 23:49:24 +02:00
|
|
|
}
|
2019-09-16 19:55:06 +02:00
|
|
|
}
|
2015-10-17 23:49:24 +02:00
|
|
|
|
2019-08-18 10:17:09 +02:00
|
|
|
fieldValueClick(e) {
|
2015-10-17 23:49:24 +02:00
|
|
|
if (['a', 'input', 'textarea'].indexOf(e.target.tagName.toLowerCase()) >= 0) {
|
|
|
|
return;
|
|
|
|
}
|
2017-01-31 07:50:28 +01:00
|
|
|
const sel = window.getSelection().toString();
|
2015-10-17 23:49:24 +02:00
|
|
|
if (!sel) {
|
|
|
|
this.edit();
|
|
|
|
}
|
2019-09-16 19:55:06 +02:00
|
|
|
}
|
2015-10-17 23:49:24 +02:00
|
|
|
|
2019-08-18 10:17:09 +02:00
|
|
|
fieldLabelDrag(e) {
|
2018-08-22 10:04:48 +02:00
|
|
|
e.stopPropagation();
|
|
|
|
if (!this.value) {
|
|
|
|
return;
|
|
|
|
}
|
2019-09-16 21:49:21 +02:00
|
|
|
const dt = e.dataTransfer;
|
2018-08-22 10:04:48 +02:00
|
|
|
const txtval = this.value.isProtected ? this.value.getText() : this.value;
|
|
|
|
if (this.valueEl[0].tagName.toLowerCase() === 'a') {
|
|
|
|
dt.setData('text/uri-list', txtval);
|
|
|
|
}
|
|
|
|
dt.setData('text/plain', txtval);
|
|
|
|
dt.effectAllowed = 'copy';
|
2019-09-16 19:55:06 +02:00
|
|
|
}
|
2018-08-22 10:04:48 +02:00
|
|
|
|
2019-08-18 10:17:09 +02:00
|
|
|
edit() {
|
2015-10-17 23:49:24 +02:00
|
|
|
if (this.readonly || this.editing) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
this.$el.addClass('details__field--edit');
|
|
|
|
this.startEdit();
|
|
|
|
this.editing = true;
|
2017-04-16 12:15:53 +02:00
|
|
|
this.preventCopy = true;
|
2018-08-22 10:04:48 +02:00
|
|
|
this.labelEl[0].setAttribute('draggable', 'false');
|
2019-09-16 19:55:06 +02:00
|
|
|
}
|
2015-10-17 23:49:24 +02:00
|
|
|
|
2019-08-18 10:17:09 +02:00
|
|
|
endEdit(newVal, extra) {
|
2015-10-17 23:49:24 +02:00
|
|
|
if (!this.editing) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
this.editing = false;
|
2019-08-16 23:05:39 +02:00
|
|
|
setTimeout(() => {
|
|
|
|
this.preventCopy = false;
|
|
|
|
}, 300);
|
2017-01-31 07:50:28 +01:00
|
|
|
let textEqual;
|
2016-01-17 14:12:35 +01:00
|
|
|
if (this.value && this.value.isProtected) {
|
|
|
|
textEqual = this.value.equals(newVal);
|
|
|
|
} else if (newVal && newVal.isProtected) {
|
|
|
|
textEqual = newVal.equals(this.value);
|
|
|
|
} else {
|
|
|
|
textEqual = _.isEqual(this.value, newVal);
|
|
|
|
}
|
2019-08-18 08:05:38 +02:00
|
|
|
const protectedEqual =
|
|
|
|
(newVal && newVal.isProtected) === (this.value && this.value.isProtected);
|
2017-01-31 07:50:28 +01:00
|
|
|
const nameChanged = extra && extra.newField;
|
|
|
|
let arg;
|
2016-01-16 13:35:34 +01:00
|
|
|
if (newVal !== undefined && (!textEqual || !protectedEqual || nameChanged)) {
|
2015-10-17 23:49:24 +02:00
|
|
|
arg = { val: newVal, field: this.model.name };
|
|
|
|
if (extra) {
|
2019-09-17 22:17:40 +02:00
|
|
|
Object.assign(arg, extra);
|
2015-10-17 23:49:24 +02:00
|
|
|
}
|
|
|
|
} else if (extra) {
|
|
|
|
arg = extra;
|
|
|
|
}
|
|
|
|
if (arg) {
|
2016-06-05 16:49:00 +02:00
|
|
|
this.triggerChange(arg);
|
2015-10-17 23:49:24 +02:00
|
|
|
}
|
|
|
|
this.valueEl.html(this.renderValue(this.value));
|
|
|
|
this.$el.removeClass('details__field--edit');
|
2018-08-22 10:04:48 +02:00
|
|
|
this.labelEl[0].setAttribute('draggable', 'true');
|
2019-09-16 19:55:06 +02:00
|
|
|
}
|
2016-06-05 16:49:00 +02:00
|
|
|
|
2019-08-18 10:17:09 +02:00
|
|
|
triggerChange(arg) {
|
2016-06-05 16:49:00 +02:00
|
|
|
arg.sender = this;
|
2019-09-16 19:55:06 +02:00
|
|
|
this.emit('change', arg);
|
2015-10-17 23:49:24 +02:00
|
|
|
}
|
2019-09-16 19:55:06 +02:00
|
|
|
}
|
2015-10-17 23:49:24 +02:00
|
|
|
|
2019-09-15 14:16:32 +02:00
|
|
|
export { FieldView };
|