-
-
Notifications
You must be signed in to change notification settings - Fork 3.8k
/
PropertyFileView.js
140 lines (125 loc) · 3.33 KB
/
PropertyFileView.js
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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
var Backbone = require('backbone');
var PropertyView = require('./PropertyView');
module.exports = PropertyView.extend({
templateField() {
const pfx = this.pfx;
const ppfx = this.ppfx;
const assetsLabel = this.config.assetsLabel || 'Images';
return `
<div class="${pfx}field ${pfx}file">
<div id='${pfx}input-holder'>
<div class="${pfx}btn-c">
<button class="${pfx}btn" id="${pfx}images" type="button">
${assetsLabel}
</button>
</div>
<div style="clear:both;"></div>
</div>
<div id="${pfx}preview-box">
<div id="${pfx}preview-file"></div>
<div id="${pfx}close">⨯</div>
</div>
</div>
<div style="clear:both"></div>
`;
},
initialize(options) {
PropertyView.prototype.initialize.apply(this, arguments);
this.assets = this.target.get('assets');
this.modal = this.target.get('Modal');
this.am = this.target.get('AssetManager');
this.className = this.className + ' '+ this.pfx +'file';
this.events['click #'+this.pfx+'close'] = 'removeFile';
this.events['click #'+this.pfx+'images'] = 'openAssetManager';
this.delegateEvents();
},
/** @inheritdoc */
renderInput() {
if (!this.$input) {
this.$input = $('<input>', {placeholder: this.model.getDefaultValue(), type: 'text' });
}
if (!this.$preview) {
this.$preview = this.$el.find('#' + this.pfx + 'preview-file');
}
if (!this.$previewBox) {
this.$previewBox = this.$el.find('#' + this.pfx + 'preview-box');
}
this.setValue(this.componentValue, 0);
},
setValue(value, f) {
PropertyView.prototype.setValue.apply(this, arguments);
this.setPreviewView(value && value != this.getDefaultValue());
this.setPreview(value);
},
/**
* Change visibility of the preview box
* @param bool Visibility
*
* @return void
* */
setPreviewView(v) {
if(!this.$previewBox)
return;
if(v)
this.$previewBox.addClass(this.pfx + 'show');
else
this.$previewBox.removeClass(this.pfx + 'show');
},
/**
* Spread url
* @param string Url
*
* @return void
* */
spreadUrl(url) {
this.setValue(url);
this.setPreviewView(1);
},
/**
* Shows file preview
* @param string Value
* */
setPreview(url) {
if(this.$preview)
this.$preview.css('background-image', "url(" + url + ")");
},
/** @inheritdoc */
cleanValue() {
this.setPreviewView(0);
this.model.set({value: ''},{silent: true});
},
/**
* Remove file from input
*
* @return void
* */
removeFile(...args) {
this.model.set('value', this.model.getDefaultValue());
PropertyView.prototype.cleanValue.apply(this, args);
this.setPreviewView(0);
},
/**
* Open dialog for image selecting
* @param {Object} e Event
*
* @return void
* */
openAssetManager(e) {
var that = this;
var em = this.em;
var editor = em ? em.get('Editor') : '';
if(editor) {
this.modal.setTitle('Select image');
this.modal.setContent(this.am.getContainer());
this.am.setTarget(null);
editor.runCommand('open-assets', {
target: this.model,
onSelect(target) {
that.modal.close();
that.spreadUrl(target.get('src'));
that.valueChanged(e);
}
});
}
},
});