#907

src/web/app/desktop/mixins/index.js

@@ -1 +1,2 @@
 require('./user-preview');
+require('./widget');

src/web/app/desktop/mixins/widget.js

@@ -0,0 +1,27 @@
+import * as riot from 'riot';
+
+// ミックスインにオプションを渡せないのアレ
+// SEE: https://github.com/riot/riot/issues/2434
+
+riot.mixin('widget', {
+	init: function() {
+		this.mixin('i');
+		this.mixin('api');
+
+		this.id = this.opts.id;
+
+		Object.keys(this.data).forEach(prop => {
+			this.data[prop] = this.opts.data.hasOwnProperty(prop) ? this.opts.data[prop] : this.data[prop];
+		});
+	},
+
+	save: function() {
+		this.api('i/update_home', {
+			id: this.id,
+			data: this.data
+		}).then(() => {
+			this.I.client_settings.home.find(w => w.id == this.id).data = this.data;
+			this.I.update();
+		});
+	}
+});

src/web/app/desktop/tags/home-widgets/activity.tag

@@ -2,8 +2,8 @@
 	<p class="title"><i class="fa fa-bar-chart"></i>%i18n:desktop.tags.mk-activity-home-widget.title%</p>
 	<button onclick={ toggle } title="%i18n:desktop.tags.mk-activity-home-widget.toggle%"><i class="fa fa-sort"></i></button>
 	<p class="initializing" if={ initializing }><i class="fa fa-spinner fa-pulse fa-fw"></i>%i18n:common.loading%<mk-ellipsis/></p>
-	<mk-activity-home-widget-calender if={ !initializing && view == 0 } data={ [].concat(data) }/>
+	<mk-activity-home-widget-calender if={ !initializing && data.view == 0 } data={ [].concat(data) }/>
-	<mk-activity-home-widget-chart if={ !initializing && view == 1 } data={ [].concat(data) }/>
+	<mk-activity-home-widget-chart if={ !initializing && data.view == 1 } data={ [].concat(data) }/>
 	<style>
 		:scope
 			display block
@@ -50,11 +50,13 @@
 
 	</style>
 	<script>
-		this.mixin('i');
+		this.data = {
-		this.mixin('api');
+			view: 0
+		};
+
+		this.mixin('widget');
 
 		this.initializing = true;
-		this.view = this.opts.data.hasOwnProperty('view') ? this.opts.data.view : 0;
 
 		this.on('mount', () => {
 			this.api('aggregation/users/activity', {
@@ -69,19 +71,11 @@
 		});
 
 		this.toggle = () => {
-			this.view++;
+			this.data.view++;
-			if (this.view == 2) this.view = 0;
+			if (this.data.view == 2) this.data.view = 0;
 
 			// Save view state
-			this.api('i/update_home', {
+			this.save();
-				id: this.opts.id,
-				data: {
-					view: this.view
-				}
-			}).then(() => {
-				this.I.client_settings.home.find(w => w.id == this.opts.id).data.view = this.view;
-				this.I.update();
-			});
 		};
 	</script>
 </mk-activity-home-widget>

src/web/app/desktop/tags/home-widgets/channel.tag

@@ -44,28 +44,25 @@
 
 	</style>
 	<script>
-		this.mixin('i');
+		this.data = {
-		this.mixin('api');
+			channel: null
+		};
 
-		this.channelId = this.opts.data.hasOwnProperty('channel') ? this.opts.data.channel : null;
+		this.mixin('widget');
 
 		this.on('mount', () => {
-			if (this.channelId) {
+			if (this.data.channel) {
 				this.zap();
 			}
 		});
 
-		this.on('unmount', () => {
-
-		});
-
 		this.zap = () => {
 			this.update({
 				fetching: true
 			});
 
 			this.api('channels/show', {
-				channel_id: this.channelId
+				channel_id: this.data.channel
 			}).then(channel => {
 				this.update({
 					fetching: false,
@@ -79,19 +76,11 @@
 		this.settings = () => {
 			const id = window.prompt('チャンネルID');
 			if (!id) return;
-			this.channelId = id;
+			this.data.channel = id;
 			this.zap();
 
 			// Save state
-			this.api('i/update_home', {
+			this.save();
-				id: this.opts.id,
-				data: {
-					channel: this.channelId
-				}
-			}).then(() => {
-				this.I.client_settings.home.find(w => w.id == this.opts.id).data.channel = this.channelId;
-				this.I.update();
-			});
 		};
 	</script>
 </mk-channel-home-widget>
@@ -139,10 +128,6 @@
 		this.channel = null;
 		this.posts = [];
 
-		this.on('mount', () => {
-
-		});
-
 		this.on('unmount', () => {
 			if (this.connection) {
 				this.connection.off('post', this.onPost);

src/web/app/desktop/tags/home-widgets/server.tag

@@ -2,12 +2,12 @@
 	<p class="title"><i class="fa fa-server"></i>%i18n:desktop.tags.mk-server-home-widget.title%</p>
 	<button onclick={ toggle } title="%i18n:desktop.tags.mk-server-home-widget.toggle%"><i class="fa fa-sort"></i></button>
 	<p class="initializing" if={ initializing }><i class="fa fa-spinner fa-pulse fa-fw"></i>%i18n:common.loading%<mk-ellipsis/></p>
-	<mk-server-home-widget-cpu-and-memory-usage if={ !initializing } show={ view == 0 } connection={ connection }/>
+	<mk-server-home-widget-cpu-and-memory-usage if={ !initializing } show={ data.view == 0 } connection={ connection }/>
-	<mk-server-home-widget-cpu if={ !initializing } show={ view == 1 } connection={ connection } meta={ meta }/>
+	<mk-server-home-widget-cpu if={ !initializing } show={ data.view == 1 } connection={ connection } meta={ meta }/>
-	<mk-server-home-widget-memory if={ !initializing } show={ view == 2 } connection={ connection }/>
+	<mk-server-home-widget-memory if={ !initializing } show={ data.view == 2 } connection={ connection }/>
-	<mk-server-home-widget-disk if={ !initializing } show={ view == 3 } connection={ connection }/>
+	<mk-server-home-widget-disk if={ !initializing } show={ data.view == 3 } connection={ connection }/>
-	<mk-server-home-widget-uptimes if={ !initializing } show={ view == 4 } connection={ connection }/>
+	<mk-server-home-widget-uptimes if={ !initializing } show={ data.view == 4 } connection={ connection }/>
-	<mk-server-home-widget-info if={ !initializing } show={ view == 5 } connection={ connection } meta={ meta }/>
+	<mk-server-home-widget-info if={ !initializing } show={ data.view == 5 } connection={ connection } meta={ meta }/>
 	<style>
 		:scope
 			display block
@@ -56,11 +56,13 @@
 	<script>
 		import Connection from '../../../common/scripts/server-stream';
 
-		this.mixin('i');
+		this.data = {
-		this.mixin('api');
+			view: 0
+		};
+
+		this.mixin('widget');
 
 		this.initializing = true;
-		this.view = this.opts.data.hasOwnProperty('view') ? this.opts.data.view : 0;
 		this.connection = new Connection();
 
 		this.on('mount', () => {
@@ -77,19 +79,11 @@
 		});
 
 		this.toggle = () => {
-			this.view++;
+			this.data.view++;
-			if (this.view == 6) this.view = 0;
+			if (this.data.view == 6) this.data.view = 0;
 
-			// Save view state
+			// Save widget state
-			this.api('i/update_home', {
+			this.save();
-				id: this.opts.id,
-				data: {
-					view: this.view
-				}
-			}).then(() => {
-				this.I.client_settings.home.find(w => w.id == this.opts.id).data.view = this.view;
-				this.I.update();
-			});
 		};
 	</script>
 </mk-server-home-widget>

src/web/app/desktop/tags/home-widgets/slideshow.tag

@@ -1,7 +1,7 @@
 <mk-slideshow-home-widget>
 	<div onclick={ choose }>
-		<p if={ folder === undefined }>クリックしてフォルダを指定してください</p>
+		<p if={ data.folder === undefined }>クリックしてフォルダを指定してください</p>
-		<p if={ folder !== undefined && images.length == 0 && !fetching }>このフォルダには画像がありません</p>
+		<p if={ data.folder !== undefined && images.length == 0 && !fetching }>このフォルダには画像がありません</p>
 		<div ref="slideA" class="slide a"></div>
 		<div ref="slideB" class="slide b"></div>
 	</div>
@@ -49,18 +49,20 @@
 	<script>
 		import anime from 'animejs';
 
-		this.mixin('i');
+		this.data = {
-		this.mixin('api');
+			folder: undefined,
+			size: 0
+		};
+
+		this.mixin('widget');
 
-		this.size = this.opts.data.hasOwnProperty('size') ? this.opts.data.size : 0;
-		this.folder = this.opts.data.hasOwnProperty('folder') ? this.opts.data.folder : undefined;
 		this.images = [];
 		this.fetching = true;
 
 		this.on('mount', () => {
 			this.applySize();
 
-			if (this.folder !== undefined) {
+			if (this.data.folder !== undefined) {
 				this.fetch();
 			}
 
@@ -74,7 +76,7 @@
 		this.applySize = () => {
 			let h;
 
-			if (this.size == 1) {
+			if (this.data.size == 1) {
 				h = 250;
 			} else {
 				h = 170;
@@ -84,8 +86,8 @@
 		};
 
 		this.resize = () => {
-			this.size++;
+			this.data.size++;
-			if (this.size == 2) this.size = 0;
+			if (this.data.size == 2) this.data.size = 0;
 
 			this.applySize();
 			this.save();
@@ -121,7 +123,7 @@
 			});
 
 			this.api('drive/files', {
-				folder_id: this.folder,
+				folder_id: this.data.folder,
 				type: 'image/*',
 				limit: 100
 			}).then(images => {
@@ -138,26 +140,10 @@
 		this.choose = () => {
 			const i = riot.mount(document.body.appendChild(document.createElement('mk-select-folder-from-drive-window')))[0];
 			i.one('selected', folder => {
-				this.folder = folder ? folder.id : null;
+				this.data.folder = folder ? folder.id : null;
 				this.fetch();
 				this.save();
 			});
 		};
-
-		this.save = () => {
-			// Save state
-			this.api('i/update_home', {
-				id: this.opts.id,
-				data: {
-					folder: this.folder,
-					size: this.size
-				}
-			}).then(() => {
-				const w = this.I.client_settings.home.find(w => w.id == this.opts.id);
-				w.data.folder = this.folder;
-				w.data.size = this.size;
-				this.I.update();
-			});
-		};
 	</script>
 </mk-slideshow-home-widget>