Completed
Push — master ( 438040...5636b9 )
by Xu
414:38 queued 374:43
created

resources/assets/yuncms-upload/js/upload.js   B

Complexity

Conditions 1
Paths 8

Size

Total Lines 181

Duplication

Lines 0
Ratio 0 %

Importance

Changes 1
Bugs 0 Features 0
Metric Value
cc 1
c 1
b 0
f 0
nc 8
nop 1
dl 0
loc 181
rs 8.2857

1 Function

Rating   Name   Duplication   Size   Complexity  
B jQuery.fn.attachmentUpload 0 178 1

How to fix   Long Method   

Long Method

Small methods make your code easier to understand, in particular if combined with a good name. Besides, if your method is small, finding a good name is usually much easier.

For example, if you find yourself adding comments to a method's body, this is usually a good sign to extract the commented part to a new method, and use the comment as a starting point when coming up with a good name for this new method.

Commonly applied refactorings include:

1
(function( $ ) {
2
    jQuery.fn.attachmentUpload = function(options) {
3
        var options = $.extend({
4
            'url':"",
5
            'sortable': false,
6
            "multiple":false,
7
            "maxNumberOfFiles": 0,
8
            "maxFileSize":null, // 5 MB
9
            "acceptFileTypes": null,
10
            "files":[]
11
        }, options);
12
13
        var $input = this;
14
        var $container = $input.parent('div');
15
        var $files = $('<ul>', {"class":"files"}).insertAfter($input);
16
17
        var methods = {
18
            init: function(){
19
                if (options.multiple == true) {
20
                    $input.attr('multiple', true);
21
                    $input.attr('name', $input.attr('name') + '[]');
22
                }
23
24
                if (options.sortable == true) {
25
                    $files.sortable({
26
                        placeholder: "upload-kit-item sortable-placeholder",
27
                        tolerance: "pointer",
28
                        forcePlaceholderSize: true,
29
                        update: function () {
30
                            methods.updateOrder()
31
                        }
32
                    })
33
                }
34
35
                $input.wrapAll($('<div class="upload-kit-input"></div>'))
36
                    .after($('<span class="glyphicon glyphicon-plus-sign add"></span>'))
37
                    .after($('<span class="glyphicon glyphicon-circle-arrow-down drag"></span>'))
38
                    .after($('<span/>', {"data-toggle":"popover", "class":"glyphicon glyphicon-exclamation-sign error-popover"}))
39
                    .after(
40
                        '<div class="progress">'+
41
                        '<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>'+
42
                        '</div>'
43
                    );
44
                $files.on('click', '.upload-kit-item .remove', methods.removeItem);
45
                methods.checkInputVisibility();
46
                methods.fileuploadInit();
47
                methods.dragInit();
48
            },
49
            fileuploadInit: function(){
50
                var $fileupload = $input.fileupload({
51
                    url: options.url,
52
                    dropZone: $input.parents('.upload-kit-input'),
53
                    dataType: 'json',
54
                    singleFileUploads: false,
55
                    multiple: options.multiple,
56
                    maxNumberOfFiles: options.maxNumberOfFiles,
57
                    maxFileSize: options.maxFileSize, // 5 MB
58
                    acceptFileTypes: options.acceptFileTypes
59
                        ? new RegExp(options.acceptFileTypes)
60
                        : null,
61
                    process: true,
62
                    getNumberOfFiles: methods.getNumberOfFiles,
63
                    start: function (e, data) {
0 ignored issues
show
Unused Code introduced by
The parameter e is not used and could be removed.

This check looks for parameters in functions that are not used in the function body and are not followed by other parameters which are used inside the function.

Loading history...
Unused Code introduced by
The parameter data is not used and could be removed.

This check looks for parameters in functions that are not used in the function body and are not followed by other parameters which are used inside the function.

Loading history...
64
                        $container.find('.upload-kit-input')
65
                            .removeClass('error')
66
                            .addClass('in-progress')
67
                    },
68
                    processfail: function(e, data) {
69
                        if (data.files.error) {
70
                            methods.showError(data.files[0].error);
71
                        }
72
                    },
73
                    progressall: function (e, data) {
74
                        var progress = parseInt(data.loaded / data.total * 100, 10);
75
                        $container.find('.progress-bar').attr('aria-valuenow', progress).css(
76
                            'width',
77
                            progress + '%'
78
                        ).text(progress + '%');
79
                    },
80
                    done: function (e, data) {
81
                        $.each(data.result.files, function (index, file) {
82
                            if (!file.error) {
83
                                var item = methods.createItem(file);
84
                                item.appendTo($files);
85
                            } else {
86
                                methods.showError(file.errors)
87
                            }
88
89
                        });
90
                        methods.checkInputVisibility();
91
                        if (options.sortable) {
92
                            methods.updateOrder();
93
                        }
94
                    },
95
                    fail: function (e, data) {
96
                        methods.showError(data.errorThrown)
97
                    },
98
                    always: function (e, data) {
0 ignored issues
show
Unused Code introduced by
The parameter e is not used and could be removed.

This check looks for parameters in functions that are not used in the function body and are not followed by other parameters which are used inside the function.

Loading history...
Unused Code introduced by
The parameter data is not used and could be removed.

This check looks for parameters in functions that are not used in the function body and are not followed by other parameters which are used inside the function.

Loading history...
99
                        $container.find('.upload-kit-input').removeClass('in-progress')
100
                    }
101
102
                });
103
                if (options.files) {
104
                    options.files.sort(function(a, b){
105
                        return parseInt(a.order) - parseInt(b.order);
106
                    });
107
                    $fileupload.fileupload('option', 'done').call($fileupload, $.Event('done'), {result: {files: options.files}});
108
                    methods.checkInputVisibility();
109
                }
110
            },
111
            dragInit: function(){
112
                $(document).on('dragover', function ()
113
                {
114
                    $('.upload-kit-input').addClass('drag-highlight');
115
                });
116
                $(document).on('dragleave drop', function ()
117
                {
118
                    $('.upload-kit-input').removeClass('drag-highlight');
119
                });
120
            },
121
            showError: function(error){
122
                if ($.fn.popover) {
123
                    $container.find('.error-popover').attr('data-content', error).popover({html:true,trigger:"hover"});
124
                }
125
                $container.find('.upload-kit-input').addClass('error');
126
            },
127
            removeItem: function(e){ //删除图片项目
0 ignored issues
show
Unused Code introduced by
The parameter e is not used and could be removed.

This check looks for parameters in functions that are not used in the function body and are not followed by other parameters which are used inside the function.

Loading history...
128
                var $this = $(this);
129
                var url = $this.data('url');
130
                if (url) {
131
                    $.ajax({
132
                        url: url,
133
                        type: 'DELETE'
134
                    })
135
                }
136
                $this.parents('.upload-kit-item').remove();
137
                methods.checkInputVisibility();
138
            },
139
            createItem: function(file){ //新建图片项目
140
                var name = options.name;
141
                var index = methods.getNumberOfFiles();
142
                if (options.multiple) {
143
                    name += '[' + index + ']';
144
                }
145
                var item = $('<li>', {"class": "upload-kit-item done"})
146
                        .append($('<input/>', {"name": name,"value": file.url, "type":"hidden"}))
147
                        .append($('<span/>', {"class": "fa fa-trash remove", "data-url": file.deleteUrl}));
148
                if (!file.type || file.type.search(/image\/.*/g) !== -1) {
149
                    item.removeClass('not-image').addClass('image');
150
                    item.prepend($('<img/>', {src: file.url}));
151
                    item.find('span.type').text('');
152
                } else {
153
                    item.removeClass('image').addClass('not-image');
154
                    item.css('backgroundImage', '');
155
                    item.append($('<span/>', {"class": "name"}).text(file.filename));
156
                }
157
                return item;
158
            },
159
            checkInputVisibility: function(){
160
                var inputContainer = $container.find('.upload-kit-input');
161
                if (options.maxNumberOfFiles && (methods.getNumberOfFiles() >= options.maxNumberOfFiles)) {
162
                    inputContainer.hide();
163
                } else {
164
                    inputContainer.show();
165
                }
166
            },
167
            getNumberOfFiles: function() {
168
                return $container.find('.files .upload-kit-item').length;
169
            },
170
            updateOrder: function () {
171
                $files.find('.upload-kit-item').each(function(index, item){
172
                    $(item).find('input[data-role=order]').val(index);
173
                })
174
            }
175
        };
176
177
        methods.init.apply(this);
178
        return this;
179
    };
180
181
})(jQuery);