*.jsx -> *.js

dev/Settings/User/Themes.js

@@ -0,0 +1,159 @@
+
+import _ from '_';
+import $ from '$';
+import ko from 'ko';
+
+import Jua from 'Jua';
+
+import {SaveSettingsStep, UploadErrorCode, Capa, Magics} from 'Common/Enums';
+import {changeTheme, convertThemeName} from 'Common/Utils';
+import {userBackground, themePreviewLink, uploadBackground} from 'Common/Links';
+import {i18n} from 'Common/Translator';
+
+import {capa} from 'Storage/Settings';
+
+import ThemeStore from 'Stores/Theme';
+
+import Remote from 'Remote/User/Ajax';
+
+class ThemesUserSettings
+{
+	constructor() {
+		this.theme = ThemeStore.theme;
+		this.themes = ThemeStore.themes;
+		this.themesObjects = ko.observableArray([]);
+
+		this.background = {};
+		this.background.name = ThemeStore.themeBackgroundName;
+		this.background.hash = ThemeStore.themeBackgroundHash;
+		this.background.uploaderButton = ko.observable(null);
+		this.background.loading = ko.observable(false);
+		this.background.error = ko.observable('');
+
+		this.capaUserBackground = ko.observable(capa(Capa.UserBackground));
+
+		this.themeTrigger = ko.observable(SaveSettingsStep.Idle).extend({throttle: Magics.Time100ms});
+
+		this.iTimer = 0;
+		this.oThemeAjaxRequest = null;
+
+		this.theme.subscribe((value) => {
+			_.each(this.themesObjects(), (theme) => {
+				theme.selected(value === theme.name);
+			});
+
+			changeTheme(value, this.themeTrigger);
+
+			Remote.saveSettings(null, {
+				'Theme': value
+			});
+		});
+
+		this.background.hash.subscribe((value) => {
+			const $bg = $('#rl-bg');
+			if (!value)
+			{
+				if ($bg.data('backstretch'))
+				{
+					$bg.backstretch('destroy').attr('style', '');
+				}
+			}
+			else
+			{
+				$bg.attr('style', 'background-image: none !important;').backstretch(userBackground(value), {
+					fade: 1000, centeredX: true, centeredY: true
+				}).removeAttr('style');
+			}
+		});
+	}
+
+	onBuild() {
+		const currentTheme = this.theme();
+
+		this.themesObjects(_.map(this.themes(), (theme) => ({
+			name: theme,
+			nameDisplay: convertThemeName(theme),
+			selected: ko.observable(theme === currentTheme),
+			themePreviewSrc: themePreviewLink(theme)
+		})));
+
+		this.initUploader();
+	}
+
+	onShow() {
+		this.background.error('');
+	}
+
+	clearBackground() {
+		if (this.capaUserBackground())
+		{
+			Remote.clearUserBackground(() => {
+				this.background.name('');
+				this.background.hash('');
+			});
+		}
+	}
+
+	initUploader() {
+		if (this.background.uploaderButton() && this.capaUserBackground())
+		{
+			const
+				oJua = new Jua({
+					'action': uploadBackground(),
+					'name': 'uploader',
+					'queueSize': 1,
+					'multipleSizeLimit': 1,
+					'disableDragAndDrop': true,
+					'disableMultiple': true,
+					'clickElement': this.background.uploaderButton()
+				});
+
+			oJua
+				.on('onStart', () => {
+					this.background.loading(true);
+					this.background.error('');
+					return true;
+				})
+				.on('onComplete', (id, result, data) => {
+					this.background.loading(false);
+
+					if (result && id && data && data.Result && data.Result.Name && data.Result.Hash)
+					{
+						this.background.name(data.Result.Name);
+						this.background.hash(data.Result.Hash);
+					}
+					else
+					{
+						this.background.name('');
+						this.background.hash('');
+
+						let errorMsg = '';
+						if (data.ErrorCode)
+						{
+							switch (data.ErrorCode)
+							{
+								case UploadErrorCode.FileIsTooBig:
+									errorMsg = i18n('SETTINGS_THEMES/ERROR_FILE_IS_TOO_BIG');
+									break;
+								case UploadErrorCode.FileType:
+									errorMsg = i18n('SETTINGS_THEMES/ERROR_FILE_TYPE_ERROR');
+									break;
+								// no default
+							}
+						}
+
+						if (!errorMsg && data.ErrorMessage)
+						{
+							errorMsg = data.ErrorMessage;
+						}
+
+						this.background.error(errorMsg || i18n('SETTINGS_THEMES/ERROR_UNKNOWN'));
+					}
+
+					return true;
+				});
+		}
+	}
+}
+
+export {ThemesUserSettings, ThemesUserSettings as default};