forked from Bremen/ESG
80 lines
3.4 KiB
JavaScript
80 lines
3.4 KiB
JavaScript
"use strict";
|
|
|
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
|
|
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
|
|
|
|
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
|
|
|
|
// Profile Settings Demo
|
|
// =============================================================
|
|
var ProfileSettingsDemo = /*#__PURE__*/function () {
|
|
function ProfileSettingsDemo() {
|
|
_classCallCheck(this, ProfileSettingsDemo);
|
|
|
|
this.init();
|
|
}
|
|
|
|
_createClass(ProfileSettingsDemo, [{
|
|
key: "init",
|
|
value: function init() {
|
|
// event handlers
|
|
this.handleFileUploadAvatar();
|
|
}
|
|
}, {
|
|
key: "handleFileUploadAvatar",
|
|
value: function handleFileUploadAvatar() {
|
|
// Change this to the location of your server-side upload handler:
|
|
var url = '//jquery-file-upload.appspot.com/'; // const url = (window.location.hostname === 'blueimp.github.io') ? '//jquery-file-upload.appspot.com/' : 'server/php/'
|
|
|
|
var $container = $('#fileupload-avatar').parents('.card-body');
|
|
var $avatarWarningContainer = $('<div>').addClass('alert alert-danger alert-dismissible');
|
|
var closeBtn = "<button type=\"button\" class=\"close\" data-dismiss=\"alert\" aria-label=\"Close\">\n <span aria-hidden=\"true\">×</span>\n </button>"; // file upload avatar
|
|
|
|
$('#fileupload-avatar').fileupload({
|
|
url: url,
|
|
dropZone: null,
|
|
dataType: 'json',
|
|
autoUpload: true,
|
|
acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
|
|
maxFileSize: 2000000
|
|
}).on('fileuploadprocessalways', function (e, data) {
|
|
var index = data.index;
|
|
var file = data.files[index];
|
|
$avatarWarningContainer.remove();
|
|
|
|
if (file.error) {
|
|
$avatarWarningContainer.text(file.error).prepend(closeBtn);
|
|
$container.prepend($avatarWarningContainer);
|
|
}
|
|
}).on('fileuploadprogressall', function (e, data) {
|
|
var progress = parseInt(data.loaded / data.total * 100, 10);
|
|
$('#progress-avatar').addClass('show').children().css('width', progress + '%');
|
|
}).on('fileuploaddone', function (e, data) {
|
|
var file = data.result.files[0];
|
|
var $img = $(this).parent().children('img');
|
|
var $old = $img.prop('src');
|
|
|
|
if (file.url) {
|
|
$img.prop('src', file.url); // update your db
|
|
} else if (file.error) {
|
|
$avatarWarningContainer.text(file.error).prepend(closeBtn);
|
|
$container.prepend($avatarWarningContainer);
|
|
}
|
|
|
|
$('#progress-avatar').removeClass('show').children().css('width', 0);
|
|
});
|
|
}
|
|
}]);
|
|
|
|
return ProfileSettingsDemo;
|
|
}();
|
|
/**
|
|
* Keep in mind that your scripts may not always be executed after the theme is completely ready,
|
|
* you might need to observe the `theme:load` event to make sure your scripts are executed after the theme is ready.
|
|
*/
|
|
|
|
|
|
$(document).on('theme:init', function () {
|
|
new ProfileSettingsDemo();
|
|
}); |