Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

realm-icon: Move upload widget to separate file. 

This makes it possible to use the upload widget in the realm icon
organization settings on frontend.
This commit is contained in:
K.Kanakhin 2017-02-21 08:15:22 +06:00 committed by Tim Abbott
parent 5a204d7c84
commit 9ce218154e
4 changed files with 167 additions and 156 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.eslintrc.json
View File

@ -56,6 +56,7 @@
"channel": false,
"components": false,
"viewport": false,
"upload_widget": false,
"avatar": false,
"feature_flags": false,
"search_suggestion": false,

159
static/js/avatar.js
View File

@ -2,21 +2,6 @@ var avatar = (function () {
var exports = {};
function is_image_format(file) {
var type = file.type;
if (!type) {
return false;
}
var supported_types = [
'image/jpeg',
'image/png',
'image/gif',
'image/tiff',
];
return _.indexOf(supported_types, type) >= 0;
}
exports.build_bot_create_widget = function () {
// We have to do strange gyrations with the file input to clear it,
@ -31,7 +16,7 @@ exports.build_bot_create_widget = function () {
var clear_button = $('#bot_avatar_clear_button');
var upload_button = $('#bot_avatar_upload_button');
return exports.build_widget(
return upload_widget.build_widget(
get_file_input,
file_name_field,
input_error,
@ -50,7 +35,7 @@ exports.build_bot_edit_widget = function (li) {
var clear_button = li.find('.edit_bot_avatar_clear_button');
var upload_button = li.find('.edit_bot_avatar_upload_button');
return exports.build_widget(
return upload_widget.build_widget(
get_file_input,
file_name_field,
input_error,
@ -59,89 +44,6 @@ exports.build_bot_edit_widget = function (li) {
);
};
exports.build_widget = function (
get_file_input, // function returns a jQuery file input object
file_name_field, // jQuery object to show file name
input_error, // jQuery object for error text
clear_button, // jQuery button to clear last upload choice
upload_button // jQuery button to open file dialog
) {
function accept(file) {
file_name_field.text(file.name);
input_error.hide();
clear_button.show();
upload_button.hide();
}
function clear() {
var control = get_file_input();
var new_control = control.clone(true);
control.replaceWith(new_control);
file_name_field.text('');
clear_button.hide();
upload_button.show();
}
clear_button.on('click', function (e) {
clear();
e.preventDefault();
});
upload_button.on('drop', function (e) {
var files = e.dataTransfer.files;
if (files === null || files === undefined || files.length === 0) {
return false;
}
get_file_input().get(0).files = files;
e.preventDefault();
return false;
});
get_file_input().on('change', function (e) {
if (e.target.files.length === 0) {
input_error.hide();
} else if (e.target.files.length === 1) {
var file = e.target.files[0];
if (file.size > 5*1024*1024) {
input_error.text('File size must be < 5Mb.');
input_error.show();
clear();
} else if (!is_image_format(file)) {
input_error.text('File type is not supported.');
input_error.show();
clear();
} else {
accept(file);
}
} else {
input_error.text('Please just upload one file.');
}
});
upload_button.on('click', function (e) {
get_file_input().trigger('click');
e.preventDefault();
});
function close() {
clear();
clear_button.off('click');
upload_button.off('drop');
get_file_input().off('change');
upload_button.off('click');
}
return {
// Call back to clear() in situations like adding bots, when
// we want to use the same widget over and over again.
clear: clear,
// Call back to close() when you are truly done with the widget,
// so you can release handlers.
close: close,
};
};
exports.build_user_avatar_widget = function (upload_function) {
var get_file_input = function () {
return $('#user_avatar_file_input').expectOne();
@ -166,7 +68,7 @@ exports.build_user_avatar_widget = function (upload_function) {
});
});
return exports.build_direct_upload_widget(
return upload_widget.build_direct_upload_widget(
get_file_input,
$("#user_avatar_file_input_error").expectOne(),
$("#user_avatar_upload_button").expectOne(),
@ -174,61 +76,6 @@ exports.build_user_avatar_widget = function (upload_function) {
);
};
exports.build_direct_upload_widget = function (
get_file_input, // function returns a jQuery file input object
input_error, // jQuery object for error text
upload_button, // jQuery button to open file dialog
upload_function
) {
function accept() {
input_error.hide();
upload_function(get_file_input());
}
function clear() {
var control = get_file_input();
var new_control = control.clone(true);
control.replaceWith(new_control);
}
upload_button.on('drop', function (e) {
var files = e.dataTransfer.files;
if (files === null || files === undefined || files.length === 0) {
return false;
}
get_file_input().get(0).files = files;
e.preventDefault();
return false;
});
get_file_input().on('change', function (e) {
if (e.target.files.length === 0) {
input_error.hide();
} else if (e.target.files.length === 1) {
var file = e.target.files[0];
if (file.size > 5*1024*1024) {
input_error.text('File size must be < 5Mb.');
input_error.show();
clear();
} else if (!is_image_format(file)) {
input_error.text('File type is not supported.');
input_error.show();
clear();
} else {
accept(file);
}
} else {
input_error.text('Please just upload one file.');
}
});
upload_button.on('click', function (e) {
get_file_input().trigger('click');
e.preventDefault();
});
};
return exports;
}());

162
static/js/upload_widget.js Normal file
View File

@ -0,0 +1,162 @@
var upload_widget = (function () {
var exports = {};
function is_image_format(file) {
var type = file.type;
if (!type) {
return false;
}
var supported_types = [
'image/jpeg',
'image/png',
'image/gif',
'image/tiff',
];
return _.indexOf(supported_types, type) >= 0;
}
exports.build_widget = function (
get_file_input, // function returns a jQuery file input object
file_name_field, // jQuery object to show file name
input_error, // jQuery object for error text
clear_button, // jQuery button to clear last upload choice
upload_button // jQuery button to open file dialog
) {
function accept(file) {
file_name_field.text(file.name);
input_error.hide();
clear_button.show();
upload_button.hide();
}
function clear() {
var control = get_file_input();
var new_control = control.clone(true);
control.replaceWith(new_control);
file_name_field.text('');
clear_button.hide();
upload_button.show();
}
clear_button.on('click', function (e) {
clear();
e.preventDefault();
});
upload_button.on('drop', function (e) {
var files = e.dataTransfer.files;
if (files === null || files === undefined || files.length === 0) {
return false;
}
get_file_input().get(0).files = files;
e.preventDefault();
return false;
});
get_file_input().on('change', function (e) {
if (e.target.files.length === 0) {
input_error.hide();
} else if (e.target.files.length === 1) {
var file = e.target.files[0];
if (file.size > 5 * 1024 * 1024) {
input_error.text('File size must be < 5Mb.');
input_error.show();
clear();
} else if (!is_image_format(file)) {
input_error.text('File type is not supported.');
input_error.show();
clear();
} else {
accept(file);
}
} else {
input_error.text('Please just upload one file.');
}
});
upload_button.on('click', function (e) {
get_file_input().trigger('click');
e.preventDefault();
});
function close() {
clear();
clear_button.off('click');
upload_button.off('drop');
get_file_input().off('change');
upload_button.off('click');
}
return {
// Call back to clear() in situations like adding bots, when
// we want to use the same widget over and over again.
clear: clear,
// Call back to close() when you are truly done with the widget,
// so you can release handlers.
close: close,
};
};
exports.build_direct_upload_widget = function (
get_file_input, // function returns a jQuery file input object
input_error, // jQuery object for error text
upload_button, // jQuery button to open file dialog
upload_function) {
function accept() {
input_error.hide();
upload_function(get_file_input());
}
function clear() {
var control = get_file_input();
var new_control = control.clone(true);
control.replaceWith(new_control);
}
upload_button.on('drop', function (e) {
var files = e.dataTransfer.files;
if (files === null || files === undefined || files.length === 0) {
return false;
}
get_file_input().get(0).files = files;
e.preventDefault();
return false;
});
get_file_input().on('change', function (e) {
if (e.target.files.length === 0) {
input_error.hide();
} else if (e.target.files.length === 1) {
var file = e.target.files[0];
if (file.size > 5 * 1024 * 1024) {
input_error.text('File size must be < 5Mb.');
input_error.show();
clear();
} else if (!is_image_format(file)) {
input_error.text('File type is not supported.');
input_error.show();
clear();
} else {
accept(file);
}
} else {
input_error.text('Please just upload one file.');
}
});
upload_button.on('click', function (e) {
get_file_input().trigger('click');
e.preventDefault();
});
};
return exports;
}());
if (typeof module !== 'undefined') {
module.exports = upload_widget;
}

1
zproject/settings.py
View File

@ -858,6 +858,7 @@ JS_SPECS = {
'js/timerender.js',
'js/tutorial.js',
'js/templates.js',
'js/upload_widget.js',
'js/avatar.js',
'js/settings.js',
'js/tab_bar.js',