img-preview.js
2.29 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
/**
* 图片预览
* @author: liuchuanyang<chuanyang.liu@yoho.cn>
* @date: 2016/10/27
*/
var $ = require('yoho-jquery'),
Handlebars = require('yoho-handlebars'),
Dialog = require('./dialog').Dialog;
var tpl = '<div class="toolbar">' +
'<a class="preview-route-left" href="javascript:void(0);"><i class="iconfont"></i>向左转</a>' +
'<a class="preview-route-right" href="javascript:void(0);"><i class="iconfont"></i>向右转</a>' +
'</div>' +
'<div class="preview-body"><img /></div>';
var tplFn = Handlebars.compile(tpl);
function ImgPreview(url, opt) {
var that = this;
var option = {
content: tplFn(),
className: 'img-preview-dialog'
};
Dialog.call(this, $.extend({}, opt || {}, option));
this._data = {
url: url,
rotate: 0
};
this.$previewBody = this.$el.find('.preview-body');
this.$img = this.$previewBody.find('img');
this.$toolbar = this.$el.find('.toolbar');
this.$toolbar.on('click', '.preview-route-left', function() {
that.rotateLeft();
});
this.$toolbar.on('click', '.preview-route-right', function() {
that.rotateRight();
});
if (this.$mask) {
this.$mask.css({
width: 'auto',
height: 'auto'
});
this.$mask.on('click', function() {
that.close();
});
}
}
ImgPreview.prototype = new Dialog({
inherit: true
});
ImgPreview.prototype.close = function() {
this.$mask && this.$mask.addClass('hide');
this.$el.addClass('hide');
$('body').removeClass('dialog-open');
};
ImgPreview.prototype.preview = function(url) {
if (url) {
this._data.url = url;
}
this._data.rotate = 0;
this.$img.attr('src', this._data.url);
this.refresh();
this.show();
$('body').addClass('dialog-open');
};
ImgPreview.prototype.refresh = function() {
this.$img.css('transform', 'rotate(' + this._data.rotate + 'deg)');
};
ImgPreview.prototype.rotateLeft = function() {
this._data.rotate = this._data.rotate - 90;
this.refresh();
};
ImgPreview.prototype.rotateRight = function() {
this._data.rotate = this._data.rotate + 90;
this.refresh();
};
ImgPreview.prototype.constructor = ImgPreview;
module.exports = ImgPreview;