2015-10-17 23:49:24 +02:00
|
|
|
'use strict';
|
|
|
|
|
|
|
|
var FieldView = require('./field-view'),
|
2015-10-20 21:58:07 +02:00
|
|
|
GeneratorView = require('../generator-view'),
|
2015-10-17 23:49:24 +02:00
|
|
|
Keys = require('../../const/keys'),
|
2015-10-25 10:44:19 +01:00
|
|
|
PasswordGenerator = require('../../util/password-generator'),
|
2015-10-17 23:49:24 +02:00
|
|
|
kdbxweb = require('kdbxweb');
|
|
|
|
|
|
|
|
var FieldViewText = FieldView.extend({
|
|
|
|
renderValue: function(value) {
|
2015-10-26 22:07:19 +01:00
|
|
|
return value && typeof value.byteLength === 'number' ? PasswordGenerator.present(value.byteLength) :
|
|
|
|
_.escape(value || '').replace(/\n/g, '<br/>');
|
2015-10-17 23:49:24 +02:00
|
|
|
},
|
|
|
|
|
|
|
|
getEditValue: function(value) {
|
|
|
|
return value && value.getText ? value.getText() : value || '';
|
|
|
|
},
|
|
|
|
|
|
|
|
startEdit: function() {
|
|
|
|
var text = this.getEditValue(this.value);
|
|
|
|
this.input = $(document.createElement(this.model.multiline ? 'textarea' : 'input'));
|
|
|
|
this.valueEl.html('').append(this.input);
|
|
|
|
this.input.attr({ autocomplete: 'off', spellcheck: 'false' })
|
|
|
|
.val(text).focus()[0].setSelectionRange(text.length, text.length);
|
|
|
|
this.input.bind({
|
|
|
|
blur: this.fieldValueBlur.bind(this),
|
|
|
|
input: this.fieldValueInput.bind(this),
|
|
|
|
keydown: this.fieldValueKeydown.bind(this),
|
2015-10-20 21:58:07 +02:00
|
|
|
keypress: this.fieldValueInput.bind(this),
|
|
|
|
click: this.fieldValueInputClick.bind(this)
|
2015-10-17 23:49:24 +02:00
|
|
|
});
|
|
|
|
if (this.model.multiline) {
|
|
|
|
this.setInputHeight();
|
|
|
|
}
|
2015-10-20 21:58:07 +02:00
|
|
|
if (this.value && this.value.byteLength) {
|
|
|
|
$('<div/>').addClass('details__field-value-gen-btn').appendTo(this.valueEl)
|
|
|
|
.click(this.showGeneratorClick.bind(this))
|
|
|
|
.mousedown(this.showGenerator.bind(this));
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
showGeneratorClick: function(e) {
|
|
|
|
e.stopPropagation();
|
|
|
|
if (!this.gen) {
|
|
|
|
this.input.focus();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
showGenerator: function() {
|
|
|
|
if (this.gen) {
|
|
|
|
this.hideGenerator();
|
|
|
|
} else {
|
|
|
|
var fieldRect = this.input[0].getBoundingClientRect();
|
|
|
|
this.gen = new GeneratorView({model: {pos: {left: fieldRect.left, top: fieldRect.bottom}}}).render();
|
|
|
|
this.gen.once('remove', this.generatorClosed.bind(this));
|
|
|
|
this.gen.once('result', this.generatorResult.bind(this));
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
hideGenerator: function() {
|
|
|
|
if (this.gen) {
|
|
|
|
var gen = this.gen;
|
|
|
|
delete this.gen;
|
|
|
|
gen.remove();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
generatorClosed: function() {
|
|
|
|
if (this.gen) {
|
|
|
|
delete this.gen;
|
|
|
|
this.endEdit();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
generatorResult: function(password) {
|
|
|
|
if (this.gen) {
|
|
|
|
delete this.gen;
|
|
|
|
this.endEdit(password);
|
|
|
|
}
|
2015-10-17 23:49:24 +02:00
|
|
|
},
|
|
|
|
|
|
|
|
setInputHeight: function() {
|
|
|
|
var MinHeight = 20;
|
|
|
|
this.input.height(MinHeight);
|
|
|
|
var newHeight = this.input[0].scrollHeight;
|
|
|
|
if (newHeight <= MinHeight) {
|
|
|
|
newHeight = MinHeight;
|
|
|
|
} else {
|
|
|
|
newHeight += 2;
|
|
|
|
}
|
|
|
|
this.input.height(newHeight);
|
|
|
|
},
|
|
|
|
|
|
|
|
fieldValueBlur: function(e) {
|
2015-10-20 21:58:07 +02:00
|
|
|
if (!this.gen) {
|
|
|
|
this.endEdit(e.target.value);
|
|
|
|
}
|
2015-10-17 23:49:24 +02:00
|
|
|
},
|
|
|
|
|
|
|
|
fieldValueInput: function(e) {
|
|
|
|
e.stopPropagation();
|
|
|
|
if (this.model.multiline) {
|
|
|
|
this.setInputHeight();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2015-10-20 21:58:07 +02:00
|
|
|
fieldValueInputClick: function() {
|
|
|
|
if (this.gen) {
|
|
|
|
this.hideGenerator();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2015-10-17 23:49:24 +02:00
|
|
|
fieldValueKeydown: function(e) {
|
|
|
|
e.stopPropagation();
|
|
|
|
var code = e.keyCode || e.which;
|
|
|
|
if (code === Keys.DOM_VK_RETURN) {
|
|
|
|
if (!this.model.multiline || (!e.altKey && !e.shiftKey)) {
|
|
|
|
$(e.target).unbind('blur');
|
|
|
|
this.endEdit(e.target.value);
|
|
|
|
}
|
|
|
|
} else if (code === Keys.DOM_VK_ESCAPE) {
|
|
|
|
$(e.target).unbind('blur');
|
|
|
|
this.endEdit();
|
|
|
|
} else if (code === Keys.DOM_VK_TAB) {
|
|
|
|
e.preventDefault();
|
|
|
|
$(e.target).unbind('blur');
|
|
|
|
this.endEdit(e.target.value, { tab: { field: this.model.name, prev: e.shiftKey } });
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
endEdit: function(newVal, extra) {
|
2015-10-20 21:58:07 +02:00
|
|
|
if (this.gen) {
|
|
|
|
this.hideGenerator();
|
|
|
|
}
|
2015-10-17 23:49:24 +02:00
|
|
|
if (!this.editing) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
delete this.input;
|
|
|
|
if (typeof newVal === 'string' && this.value instanceof kdbxweb.ProtectedValue) {
|
|
|
|
newVal = kdbxweb.ProtectedValue.fromString(newVal);
|
|
|
|
}
|
|
|
|
if (typeof newVal === 'string') {
|
|
|
|
newVal = $.trim(newVal);
|
|
|
|
}
|
|
|
|
FieldView.prototype.endEdit.call(this, newVal, extra);
|
2015-10-20 21:58:07 +02:00
|
|
|
},
|
|
|
|
|
|
|
|
render: function() {
|
|
|
|
FieldView.prototype.render.call(this);
|
2015-10-17 23:49:24 +02:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
module.exports = FieldViewText;
|