diff --git a/src/web/app/desktop/mixins/index.js b/src/web/app/desktop/mixins/index.js index a7a3eb9485..e0c94ec5ee 100644 --- a/src/web/app/desktop/mixins/index.js +++ b/src/web/app/desktop/mixins/index.js @@ -1 +1,2 @@ require('./user-preview'); +require('./widget'); diff --git a/src/web/app/desktop/mixins/widget.js b/src/web/app/desktop/mixins/widget.js new file mode 100644 index 0000000000..d21811fa2c --- /dev/null +++ b/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(); + }); + } +}); diff --git a/src/web/app/desktop/tags/home-widgets/activity.tag b/src/web/app/desktop/tags/home-widgets/activity.tag index 00cf4ea20b..9c4eeb6154 100644 --- a/src/web/app/desktop/tags/home-widgets/activity.tag +++ b/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-chart if={ !initializing && view == 1 } data={ [].concat(data) }/> + <mk-activity-home-widget-calender if={ !initializing && data.view == 0 } 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.mixin('api'); + this.data = { + 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++; - if (this.view == 2) this.view = 0; + this.data.view++; + if (this.data.view == 2) this.data.view = 0; // Save view state - this.api('i/update_home', { - 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(); - }); + this.save(); }; </script> </mk-activity-home-widget> diff --git a/src/web/app/desktop/tags/home-widgets/channel.tag b/src/web/app/desktop/tags/home-widgets/channel.tag index 2c2b6e7fe3..e663dd3158 100644 --- a/src/web/app/desktop/tags/home-widgets/channel.tag +++ b/src/web/app/desktop/tags/home-widgets/channel.tag @@ -44,28 +44,25 @@ </style> <script> - this.mixin('i'); - this.mixin('api'); + this.data = { + 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', { - 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(); - }); + this.save(); }; </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); diff --git a/src/web/app/desktop/tags/home-widgets/server.tag b/src/web/app/desktop/tags/home-widgets/server.tag index f4e38aea56..5fcaa9b7dd 100644 --- a/src/web/app/desktop/tags/home-widgets/server.tag +++ b/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 if={ !initializing } show={ view == 1 } connection={ connection } meta={ meta }/> - <mk-server-home-widget-memory if={ !initializing } show={ view == 2 } connection={ connection }/> - <mk-server-home-widget-disk if={ !initializing } show={ view == 3 } connection={ connection }/> - <mk-server-home-widget-uptimes if={ !initializing } show={ view == 4 } connection={ connection }/> - <mk-server-home-widget-info if={ !initializing } show={ view == 5 } connection={ connection } meta={ meta }/> + <mk-server-home-widget-cpu-and-memory-usage if={ !initializing } show={ data.view == 0 } connection={ connection }/> + <mk-server-home-widget-cpu if={ !initializing } show={ data.view == 1 } connection={ connection } meta={ meta }/> + <mk-server-home-widget-memory if={ !initializing } show={ data.view == 2 } connection={ connection }/> + <mk-server-home-widget-disk if={ !initializing } show={ data.view == 3 } connection={ connection }/> + <mk-server-home-widget-uptimes if={ !initializing } show={ data.view == 4 } connection={ connection }/> + <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.mixin('api'); + this.data = { + 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++; - if (this.view == 6) this.view = 0; + this.data.view++; + if (this.data.view == 6) this.data.view = 0; - // Save view state - this.api('i/update_home', { - 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(); - }); + // Save widget state + this.save(); }; </script> </mk-server-home-widget> diff --git a/src/web/app/desktop/tags/home-widgets/slideshow.tag b/src/web/app/desktop/tags/home-widgets/slideshow.tag index 9d2c06a272..e0f382b71d 100644 --- a/src/web/app/desktop/tags/home-widgets/slideshow.tag +++ b/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={ folder !== undefined && images.length == 0 && !fetching }>このフォルダには画像がありません</p> + <p if={ data.folder === undefined }>クリックしてフォルダを指定してください</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.mixin('api'); + this.data = { + 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++; - if (this.size == 2) this.size = 0; + this.data.size++; + 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>