/
uniform-file.js
101 lines (80 loc) · 2.82 KB
/
uniform-file.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
define(function(require) {
'use strict';
const AbstractInputWidgetView = require('oroui/js/app/views/input-widget/abstract');
const __ = require('orotranslation/js/translator');
const $ = require('jquery');
const clearButtonTemplate = require('tpl-loader!oroui/templates/clear_button.html');
require('jquery.uniform');
const UniformFileInputWidgetView = AbstractInputWidgetView.extend({
widgetFunctionName: 'uniform',
initializeOptions: {
fileDefaultHtml: __('Please select a file...'),
fileButtonHtml: __('Choose File')
},
refreshOptions: 'update',
containerClassSuffix: 'file',
/** @property {jQuery} */
$clearButton: null,
/**
* @inheritDoc
*/
constructor: function UniformFileInputWidgetView(options) {
UniformFileInputWidgetView.__super__.constructor.call(this, options);
},
/**
* @inheritDoc
*/
initializeWidget: function(options) {
UniformFileInputWidgetView.__super__.initializeWidget.call(this, options);
if (this.$el.is('.error')) {
this.$el.removeClass('error');
this.getContainer().addClass('error');
}
this.getContainer().append(this.getClearButton());
this.toggleEmptyState();
this.$el.on(`change${this.eventNamespace()}`, () => this.toggleEmptyState());
this.getClearButton().on(`click${this.eventNamespace()}`, () => {
this.$el.val('').trigger('change').trigger('focus');
});
},
/**
* @inheritDoc
*/
disposeWidget: function() {
this.getClearButton().off(this.eventNamespace());
this.$el.off(this.eventNamespace());
this.$el.uniform.restore(this.$el);
UniformFileInputWidgetView.__super__.disposeWidget.call(this);
},
/**
* Get widget root element
*
* @returns {jQuery}
*/
getClearButton: function() {
if (this.$clearButton) {
return this.$clearButton;
}
this.$clearButton = $(clearButtonTemplate({
ariaLabel: __('Clear')
}));
return this.$clearButton;
},
toggleEmptyState: function() {
this.getContainer().toggleClass('empty', this.isEmpty());
},
isEmpty: function() {
return !this.$el.val().length;
},
getFilenameButton: function() {
return this.getContainer().find('.filename');
},
/**
* @inheritDoc
*/
findContainer: function() {
return this.$el.parent('.uploader');
}
});
return UniformFileInputWidgetView;
});