cleanup and backdrop for quickDetail
This commit is contained in:
@@ -30,21 +30,21 @@ Espo.define('Views.Fields.File', 'Views.Fields.Link', function (Dep) {
|
||||
detailTemplate: 'fields.file.detail',
|
||||
|
||||
editTemplate: 'fields.file.edit',
|
||||
|
||||
|
||||
showPreview: false,
|
||||
|
||||
|
||||
accept: false,
|
||||
|
||||
|
||||
previewTypeList: [
|
||||
'image/jpeg',
|
||||
'image/png',
|
||||
'image/gif',
|
||||
],
|
||||
|
||||
|
||||
defaultType: false,
|
||||
|
||||
|
||||
previewSize: 'small',
|
||||
|
||||
|
||||
events: {
|
||||
'click a.remove-attachment': function (e) {
|
||||
var $div = $(e.currentTarget).parent();
|
||||
@@ -71,7 +71,7 @@ Espo.define('Views.Fields.File', 'Views.Fields.Link', function (Dep) {
|
||||
},
|
||||
'click a[data-action="showImagePreview"]': function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
|
||||
var id = this.model.get(this.idName);
|
||||
this.createView('preview', 'Modals.ImagePreview', {
|
||||
id: id,
|
||||
@@ -89,7 +89,7 @@ Espo.define('Views.Fields.File', 'Views.Fields.Link', function (Dep) {
|
||||
acceptAttribue: this.acceptAttribue
|
||||
}, Dep.prototype.data.call(this));
|
||||
},
|
||||
|
||||
|
||||
validateRequired: function () {
|
||||
if (this.params.required || this.model.isRequired(this.name)) {
|
||||
if (this.model.get(this.idName) == null) {
|
||||
@@ -105,21 +105,21 @@ Espo.define('Views.Fields.File', 'Views.Fields.Link', function (Dep) {
|
||||
this.idName = this.name + 'Id';
|
||||
this.typeName = this.name + 'Type';
|
||||
this.foreignScope = 'Attachment';
|
||||
|
||||
|
||||
if ('showPreview' in this.params) {
|
||||
this.showPreview = this.params.showPreview;
|
||||
}
|
||||
|
||||
|
||||
if ('accept' in this.params) {
|
||||
this.accept = this.params.accept;
|
||||
}
|
||||
|
||||
|
||||
if (this.accept) {
|
||||
this.acceptAttribue = this.accept.join('|');
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
|
||||
|
||||
afterRender: function () {
|
||||
if (this.mode == 'edit') {
|
||||
this.$attachment = this.$el.find('div.attachment');
|
||||
@@ -132,10 +132,10 @@ Espo.define('Views.Fields.File', 'Views.Fields.Link', function (Dep) {
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
getDetailPreview: function (name, type, id) {
|
||||
var preview = name;
|
||||
|
||||
|
||||
switch (type) {
|
||||
case 'image/png':
|
||||
case 'image/jpeg':
|
||||
@@ -144,17 +144,17 @@ Espo.define('Views.Fields.File', 'Views.Fields.Link', function (Dep) {
|
||||
}
|
||||
return preview;
|
||||
},
|
||||
|
||||
|
||||
getEditPreview: function (name, type, id) {
|
||||
var preview = name;
|
||||
|
||||
|
||||
switch (type) {
|
||||
case 'image/png':
|
||||
case 'image/jpeg':
|
||||
case 'image/gif':
|
||||
preview = '<img src="?entryPoint=image&size=small&id=' + id + '" title="' + name + '">';
|
||||
}
|
||||
|
||||
|
||||
return preview;
|
||||
},
|
||||
|
||||
@@ -163,13 +163,13 @@ Espo.define('Views.Fields.File', 'Views.Fields.Link', function (Dep) {
|
||||
var name = this.model.get(this.nameName);
|
||||
var type = this.model.get(this.typeName) || this.defaultType;
|
||||
var id = this.model.get(this.idName);
|
||||
|
||||
|
||||
if (!id) {
|
||||
return false;
|
||||
}
|
||||
|
||||
|
||||
var string = '';
|
||||
|
||||
|
||||
if (this.showPreview && ~this.previewTypeList.indexOf(type)) {
|
||||
string = '<div class="attachment-preview">' + this.getDetailPreview(name, type, id) + '</div>';
|
||||
} else {
|
||||
@@ -178,16 +178,16 @@ Espo.define('Views.Fields.File', 'Views.Fields.Link', function (Dep) {
|
||||
return string;
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
deleteAttachment: function () {
|
||||
var id = this.model.get(this.idName);
|
||||
var o = {};
|
||||
o[this.idName] = null;
|
||||
o[this.nameName] = null;
|
||||
this.model.set(o);
|
||||
|
||||
|
||||
this.$attachment.empty();
|
||||
|
||||
|
||||
if (id) {
|
||||
if (this.model.isNew()) {
|
||||
this.getModelFactory().create('Attachment', function (attachment) {
|
||||
@@ -197,7 +197,7 @@ Espo.define('Views.Fields.File', 'Views.Fields.Link', function (Dep) {
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
setAttachment: function (attachment) {
|
||||
var arr = _.clone(this.model.get(this.idsName));
|
||||
var o = {};
|
||||
@@ -208,17 +208,17 @@ Espo.define('Views.Fields.File', 'Views.Fields.Link', function (Dep) {
|
||||
|
||||
uploadFile: function (file) {
|
||||
var isCanceled = false;
|
||||
|
||||
|
||||
this.getModelFactory().create('Attachment', function (attachment) {
|
||||
var $att = this.addAttachmentBox(file.name, file.type);
|
||||
|
||||
|
||||
this.$el.find('.attachment-button').addClass('hidden');
|
||||
|
||||
|
||||
$att.find('.remove-attachment').on('click.uploading', function () {
|
||||
isCanceled = true;
|
||||
this.$el.find('.attachment-button').removeClass('hidden');
|
||||
}.bind(this));
|
||||
|
||||
|
||||
var fileReader = new FileReader();
|
||||
fileReader.onload = function (e) {
|
||||
this.handleFileUpload(file, e.target.result, function (result, fileParams) {
|
||||
@@ -236,7 +236,7 @@ Espo.define('Views.Fields.File', 'Views.Fields.Link', function (Dep) {
|
||||
attachment.set('role', 'Attachment');
|
||||
attachment.set('parentType', this.model.name);
|
||||
attachment.set('parentId', this.model.id);
|
||||
|
||||
|
||||
attachment.once('sync', function () {
|
||||
if (!isCanceled) {
|
||||
$att.trigger('ready');
|
||||
@@ -259,28 +259,28 @@ Espo.define('Views.Fields.File', 'Views.Fields.Link', function (Dep) {
|
||||
};
|
||||
callback(contents, params);
|
||||
},
|
||||
|
||||
|
||||
addAttachmentBox: function (name, type, id) {
|
||||
this.$attachment.empty();
|
||||
|
||||
|
||||
var self = this;
|
||||
|
||||
|
||||
var removeLink = '<a href="javascript:" class="remove-attachment pull-right"><span class="glyphicon glyphicon-remove"></span></a>';
|
||||
|
||||
var preview = name;
|
||||
if (this.showPreview && id) {
|
||||
preview = this.getEditPreview(name, type, id);
|
||||
}
|
||||
|
||||
|
||||
var $att = $('<div>').css('display', 'inline-block')
|
||||
.css('width', '300px')
|
||||
.addClass('gray-box')
|
||||
.append($('<span class="preview">' + preview + '</span>').css('width', '270px'))
|
||||
.append(removeLink);
|
||||
|
||||
|
||||
var $container = $('<div>').append($att);
|
||||
this.$attachment.append($container);
|
||||
|
||||
|
||||
if (!id) {
|
||||
var $loading = $('<span class="small">' + this.translate('Uploading...') + '</span>');
|
||||
$container.append($loading);
|
||||
@@ -288,14 +288,14 @@ Espo.define('Views.Fields.File', 'Views.Fields.Link', function (Dep) {
|
||||
$loading.html(self.translate('Ready'));
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
return $att;
|
||||
},
|
||||
|
||||
|
||||
fetch: function () {
|
||||
return {};
|
||||
},
|
||||
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@@ -24,23 +24,23 @@ Espo.define('Views.Fields.Image', 'Views.Fields.File', function (Dep) {
|
||||
return Dep.extend({
|
||||
|
||||
type: 'image',
|
||||
|
||||
|
||||
showPreview: true,
|
||||
|
||||
|
||||
accept: ['image/*'],
|
||||
|
||||
|
||||
defaultType: 'image/jpeg',
|
||||
|
||||
|
||||
previewSize: 'small',
|
||||
|
||||
|
||||
setup: function () {
|
||||
Dep.prototype.setup.call(this);
|
||||
|
||||
|
||||
if ('previewSize' in this.params && this.params.previewSize) {
|
||||
this.previewSize = this.params.previewSize;
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@@ -22,17 +22,17 @@
|
||||
Espo.define('Views.Modal', 'View', function (Dep) {
|
||||
|
||||
return Dep.extend({
|
||||
|
||||
|
||||
cssName: 'modal-dialog',
|
||||
|
||||
|
||||
header: false,
|
||||
|
||||
|
||||
dialog: null,
|
||||
|
||||
|
||||
containerSelector: null,
|
||||
|
||||
backdrop: 'static',
|
||||
|
||||
|
||||
buttons: [
|
||||
{
|
||||
name: 'cancel',
|
||||
@@ -42,28 +42,28 @@ Espo.define('Views.Modal', 'View', function (Dep) {
|
||||
}
|
||||
}
|
||||
],
|
||||
|
||||
|
||||
width: false,
|
||||
|
||||
|
||||
init: function () {
|
||||
var id = this.cssName + '-container-' + Math.floor((Math.random() * 10000) + 1).toString();
|
||||
var containerSelector = this.containerSelector = '#' + id;
|
||||
|
||||
|
||||
this.options = this.options || {};
|
||||
this.options.el = this.containerSelector;
|
||||
|
||||
|
||||
this.on('render', function () {
|
||||
$(containerSelector).remove();
|
||||
$('<div />').css('display', 'none').attr('id', id).appendTo('body');
|
||||
|
||||
|
||||
var buttons = _.clone(this.buttons);
|
||||
|
||||
|
||||
for (var i in buttons) {
|
||||
if (!('text' in buttons[i]) && ('label' in buttons[i])) {
|
||||
buttons[i].text = this.getLanguage().translate(buttons[i].label);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
this.dialog = new Espo.Ui.Dialog({
|
||||
backdrop: this.backdrop,
|
||||
header: this.header,
|
||||
@@ -77,12 +77,12 @@ Espo.define('Views.Modal', 'View', function (Dep) {
|
||||
});
|
||||
this.setElement(containerSelector + ' .body');
|
||||
}, this);
|
||||
|
||||
|
||||
this.on('after:render', function () {
|
||||
$(containerSelector).show();
|
||||
this.dialog.show();
|
||||
});
|
||||
|
||||
|
||||
this.once('remove', function () {
|
||||
if (this.dialog) {
|
||||
this.dialog.close();
|
||||
@@ -90,7 +90,7 @@ Espo.define('Views.Modal', 'View', function (Dep) {
|
||||
$(containerSelector).remove();
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
close: function () {
|
||||
this.dialog.close();
|
||||
},
|
||||
|
||||
@@ -37,6 +37,8 @@ Espo.define('Views.Modals.Detail', 'Views.Modal', function (Dep) {
|
||||
|
||||
columnCount: 1,
|
||||
|
||||
backdrop: true,
|
||||
|
||||
setup: function () {
|
||||
|
||||
var self = this;
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
*
|
||||
* You should have received a copy of the GNU General Public License
|
||||
* along with EspoCRM. If not, see http://www.gnu.org/licenses/.
|
||||
************************************************************************/
|
||||
************************************************************************/
|
||||
|
||||
Espo.define('Views.Modals.ImagePreview', 'Views.Modal', function (Dep) {
|
||||
|
||||
@@ -28,7 +28,7 @@ Espo.define('Views.Modals.ImagePreview', 'Views.Modal', function (Dep) {
|
||||
header: true,
|
||||
|
||||
template: 'modals.image-preview',
|
||||
|
||||
|
||||
size: 'x-large',
|
||||
|
||||
backdrop: true,
|
||||
@@ -45,11 +45,11 @@ Espo.define('Views.Modals.ImagePreview', 'Views.Modal', function (Dep) {
|
||||
this.buttons = [];
|
||||
this.header = ' ';
|
||||
},
|
||||
|
||||
|
||||
afterRender: function () {
|
||||
$container = this.$el.find('.image-container');
|
||||
$img = this.$el.find('.image-container img');
|
||||
|
||||
|
||||
var manageSize = function () {
|
||||
var width = this.$el.width();
|
||||
if (width < 868) {
|
||||
@@ -58,15 +58,15 @@ Espo.define('Views.Modals.ImagePreview', 'Views.Modal', function (Dep) {
|
||||
$img.removeAttr('width');
|
||||
}
|
||||
}.bind(this);
|
||||
|
||||
|
||||
$(window).on('resize', function () {
|
||||
manageSize();
|
||||
});
|
||||
|
||||
|
||||
setTimeout(function () {
|
||||
manageSize();
|
||||
}, 100);
|
||||
|
||||
|
||||
},
|
||||
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user