✌️

src/web/app/desktop/views/components/drive-window.vue

@@ -26,7 +26,7 @@ export default Vue.extend({
 	},
 	methods: {
 		popout() {
-			const folder = (this.$refs.browser as any).folder;
+			const folder = (this.$refs.browser as any) ? (this.$refs.browser as any).folder : null;
 			if (folder) {
 				return `${url}/i/drive/folder/${folder.id}`;
 			} else {

src/web/app/desktop/views/components/settings.vue

@@ -23,6 +23,9 @@
 			<mk-switch v-model="os.i.client_settings.fetchOnScroll" @change="onChangeFetchOnScroll" text="スクロールで自動読み込み">
 				<span>ページを下までスクロールしたときに自動で追加のコンテンツを読み込みます。</span>
 			</mk-switch>
+			<mk-switch v-model="autoPopout" text="ウィンドウの自動ポップアウト">
+				<span>ウィンドウが開かれるとき、ポップアウト(ブラウザ外に切り離す)可能なら自動でポップアウトします。この設定はブラウザに記憶されます。</span>
+			</mk-switch>
 		</section>
 
 		<section class="web" v-show="page == 'web'">
@@ -206,6 +209,7 @@ export default Vue.extend({
 			latestVersion: undefined,
 			checkingForUpdate: false,
 			enableSounds: localStorage.getItem('enableSounds') == 'true',
+			autoPopout: localStorage.getItem('autoPopout') == 'true',
 			soundVolume: localStorage.getItem('soundVolume') ? parseInt(localStorage.getItem('soundVolume'), 10) : 100,
 			lang: localStorage.getItem('lang') || '',
 			preventUpdate: localStorage.getItem('preventUpdate') == 'true',
@@ -214,6 +218,9 @@ export default Vue.extend({
 		};
 	},
 	watch: {
+		autoPopout() {
+			localStorage.setItem('autoPopout', this.autoPopout ? 'true' : 'false');
+		},
 		enableSounds() {
 			localStorage.setItem('enableSounds', this.enableSounds ? 'true' : 'false');
 		},

src/web/app/desktop/views/components/window.vue

@@ -72,6 +72,12 @@ export default Vue.extend({
 		}
 	},
 
+	data() {
+		return {
+			preventMount: false
+		};
+	},
+
 	computed: {
 		isFlexible(): boolean {
 			return this.height == null;
@@ -89,11 +95,21 @@ export default Vue.extend({
 	},
 
 	created() {
-		// ウィンドウをウィンドウシステムに登録
-		(this as any).os.windows.add(this);
+		if (localStorage.getItem('autoPopout') == 'true' && this.popoutUrl) {
+			this.popout();
+			this.preventMount = true;
+		} else {
+			// ウィンドウをウィンドウシステムに登録
+			(this as any).os.windows.add(this);
+		}
 	},
 
 	mounted() {
+		if (this.preventMount) {
+			this.$destroy();
+			return;
+		}
+
 		this.$nextTick(() => {
 			const main = this.$refs.main as any;
 			main.style.top = '15%';
@@ -180,21 +196,28 @@ export default Vue.extend({
 		},
 
 		popout() {
-			const main = this.$refs.main as any;
+			const url = typeof this.popoutUrl == 'function' ? this.popoutUrl() : this.popoutUrl;
 
-			const position = main.getBoundingClientRect();
+			const main = this.$refs.main as any;
 
-			const width = parseInt(getComputedStyle(main, '').width, 10);
-			const height = parseInt(getComputedStyle(main, '').height, 10);
-			const x = window.screenX + position.left;
-			const y = window.screenY + position.top;
+			if (main) {
+				const position = main.getBoundingClientRect();
 
-			const url = typeof this.popoutUrl == 'function' ? this.popoutUrl() : this.popoutUrl;
+				const width = parseInt(getComputedStyle(main, '').width, 10);
+				const height = parseInt(getComputedStyle(main, '').height, 10);
+				const x = window.screenX + position.left;
+				const y = window.screenY + position.top;
 
-			window.open(url, url,
-				`height=${height}, width=${width}, left=${x}, top=${y}`);
+				window.open(url, url,
+					`width=${width}, height=${height}, top=${y}, left=${x}`);
 
-			this.close();
+				this.close();
+			} else {
+				const x = window.top.outerHeight / 2 + window.top.screenY - (parseInt(this.height, 10) / 2);
+				const y = window.top.outerWidth / 2 + window.top.screenX - (parseInt(this.width, 10) / 2);
+				window.open(url, url,
+					`width=${this.width}, height=${this.height}, top=${x}, left=${y}`);
+			}
 		},
 
 		// 最前面へ移動