From 9ce218154ef24dcab234c4939c3a7a1d8447c1e7 Mon Sep 17 00:00:00 2001 From: "K.Kanakhin" Date: Tue, 21 Feb 2017 08:15:22 +0600 Subject: [PATCH] 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. --- .eslintrc.json | 1 + static/js/avatar.js | 159 +----------------------------------- static/js/upload_widget.js | 162 +++++++++++++++++++++++++++++++++++++ zproject/settings.py | 1 + 4 files changed, 167 insertions(+), 156 deletions(-) create mode 100644 static/js/upload_widget.js diff --git a/.eslintrc.json b/.eslintrc.json index 3df64ad1a6..d7a9640e07 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -56,6 +56,7 @@ "channel": false, "components": false, "viewport": false, + "upload_widget": false, "avatar": false, "feature_flags": false, "search_suggestion": false, diff --git a/static/js/avatar.js b/static/js/avatar.js index 77ee8aeb0b..5bacb8cf6c 100644 --- a/static/js/avatar.js +++ b/static/js/avatar.js @@ -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; }()); diff --git a/static/js/upload_widget.js b/static/js/upload_widget.js new file mode 100644 index 0000000000..16428054c4 --- /dev/null +++ b/static/js/upload_widget.js @@ -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; +} diff --git a/zproject/settings.py b/zproject/settings.py index 543e0b9646..58745c4a2d 100644 --- a/zproject/settings.py +++ b/zproject/settings.py @@ -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',