Add UI bits for setting backgroundImage

2022-05-14 19:41:47 +02:00
parent 41e2f7006f
commit ae0b5f010b
6 changed files with 109 additions and 1 deletions
@@ -231,6 +231,51 @@ angular.module('Application').controller('ProfileController', ['$scope', '$trans
        }
    };

+    $scope.backgroundImageChange = {
+        busy: false,
+        error: {},
+        pictureChanged: false,
+
+        submit: function () {
+            $scope.backgroundImageChange.error.backgroundImage = null;
+            $scope.backgroundImageChange.busy = true;
+
+            var imageFile = document.getElementById('backgroundImageFileInput').files[0];
+            if (!imageFile) return;
+
+            Client.setBackgroundImage(imageFile, function (error) {
+                if (error) return console.error('Unable to change backgroundImage.', error);
+
+                document.getElementById('mainContentContainer').style.backgroundImage = 'url("' + Client.getBackgroundImageUrl() + '")';
+
+                $('#backgroundImageChangeModal').modal('hide');
+                $scope.backgroundImageChange.reset();
+            });
+        },
+
+        setPreviewBackgroundImage: function (backgroundImageData) {
+            $scope.backgroundImageChange.pictureChanged = true;
+            document.getElementById('previewBackgroundImage').src = backgroundImageData;
+        },
+
+        reset: function () {
+            $scope.backgroundImageChange.error.avatar = null;
+
+            document.getElementById('previewBackgroundImage').src = Client.getBackgroundImageUrl();
+            $scope.backgroundImageChange.pictureChanged = false;
+            $scope.backgroundImageChange.busy = false;
+        },
+
+        show: function () {
+            $scope.backgroundImageChange.reset();
+            $('#backgroundImageChangeModal').modal('show');
+        },
+
+        showCustomBackgroundImageSelector: function () {
+            $('#backgroundImageFileInput').click();
+        }
+    };
+
    $scope.passwordchange = {
        busy: false,
        error: {},
@@ -676,6 +721,16 @@ angular.module('Application').controller('ProfileController', ['$scope', '$trans
        fr.readAsDataURL(event.target.files[0]);
    };

+    $('#backgroundImageFileInput').get(0).onchange = function (event) {
+        var fr = new FileReader();
+        fr.onload = function () {
+            $scope.$apply(function () {
+                $scope.backgroundImageChange.setPreviewBackgroundImage(fr.result);
+            });
+        };
+        fr.readAsDataURL(event.target.files[0]);
+    };
+
    // setup all the dialog focus handling
    ['passwordChangeModal', 'apiTokenAddModal', 'appPasswordAddModal', 'emailChangeModal', 'fallbackEmailChangeModal', 'displayNameChangeModal', 'twoFactorAuthenticationEnableModal', 'twoFactorAuthenticationDisableModal'].forEach(function (id) {
        $('#' + id).on('shown.bs.modal', function () {