espocrm-extensions/espocrm-base
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

image preview orientation

Browse Source
This commit is contained in:
yuri
2018-12-26 16:29:15 +02:00
parent 8fbfce086c
commit 94a6c8d525
3 changed files with 91 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/lib/exif-js.js
+8
View File
File diff suppressed because one or more lines are too long
client/src/views/modals/image-preview.js
+54 -3
View File
@@ -26,7 +26,7 @@
* these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
************************************************************************/
Espo.define('views/modals/image-preview', 'views/modal', function (Dep) {
Espo.define('views/modals/image-preview', ['views/modal', 'lib!client/lib/exif-js.js'], function (Dep) {
return Dep.extend({
@@ -40,6 +40,16 @@ Espo.define('views/modals/image-preview', 'views/modal', function (Dep) {
backdrop: true,
transformClassList: [
'transform-flip',
'transform-rotate-180',
'transform-flip-and-rotate-180',
'transform-flip-and-rotate-270',
'transform-rotate-90',
'transform-flip-and-rotate-90',
'transform-rotate-270',
],
data: function () {
return {
name: this.options.name,
@@ -81,9 +91,46 @@ Espo.define('views/modals/image-preview', 'views/modal', function (Dep) {
return url;
},
onImageLoad: function () {
console.log(1);
},
afterRender: function () {
$container = this.$el.find('.image-container');
$img = this.$el.find('.image-container img');
$img = this.$img = this.$el.find('.image-container img');
$img.on('load', function () {
var self = this;
EXIF.getData($img.get(0), function () {
var orientation = EXIF.getTag(this, 'Orientation');
switch (orientation) {
case 2:
$img.addClass('transform-flip');
break;
case 3:
$img.addClass('transform-rotate-180');
break;
case 4:
$img.addClass('transform-rotate-180');
$img.addClass('transform-flip');
break;
case 5:
$img.addClass('transform-rotate-270');
$img.addClass('transform-flip');
break;
case 6:
$img.addClass('transform-rotate-90');
break;
case 7:
$img.addClass('transform-rotate-90');
$img.addClass('transform-flip');
break;
case 8:
$img.addClass('transform-rotate-270');
break;
}
});
}.bind(this));
if (this.navigationEnabled) {
$img.css('cursor', 'pointer');
@@ -108,6 +155,11 @@ Espo.define('views/modals/image-preview', 'views/modal', function (Dep) {
},
switchToNext: function () {
this.transformClassList.forEach(function (item) {
this.$img.removeClass(item);
}, this);
var index = -1;
this.imageList.forEach(function (d, i) {
if (d.id === this.options.id) {
@@ -127,4 +179,3 @@ Espo.define('views/modals/image-preview', 'views/modal', function (Dep) {
});
});
frontend/less/espo/custom.less
+29
View File
@@ -2830,4 +2830,33 @@ a.field-info > span.fa-info-circle {
.grid-auto-fill-md {
grid-template-columns: repeat(auto-fill, minmax(@grid-column-width-medium, 1fr));
}
}
.transform-flip {
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
.transform-rotate-90 {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.transform-rotate-180 {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
.transform-rotate-270 {
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-o-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
}