From 790ab2065caacb9c3d377c70f07c23e2c019661e Mon Sep 17 00:00:00 2001
From: cutls <web-pro@cutls.com>
Date: Tue, 17 Nov 2020 01:36:07 +0900
Subject: [PATCH] when in offline

---
 app/css/master.css                      | 33 +++++++++++++++++++------
 app/js/platform/end.js                  | 10 +++++---
 app/js/post/post.js                     |  9 +++++++
 app/js/post/secure.js                   |  4 +--
 app/package.json                        |  2 +-
 app/view/make/index.sample.html         |  6 +++++
 app/view/make/language/en/index.json    |  2 ++
 app/view/make/language/en/main.json     |  1 +
 app/view/make/language/ja-KS/index.json |  2 ++
 app/view/make/language/ja-KS/main.json  |  1 +
 app/view/make/language/ja/index.json    |  2 ++
 app/view/make/language/ja/main.json     |  1 +
 12 files changed, 59 insertions(+), 14 deletions(-)

diff --git a/app/css/master.css b/app/css/master.css
index d357ab90..c91623f9 100644
--- a/app/css/master.css
+++ b/app/css/master.css
@@ -21,7 +21,8 @@ html {
 .action-menu-item:hover {
 	filter: brightness(80%) !important;
 }
-.btn, .btn-flat {
+.btn,
+.btn-flat {
 	font-size: 1.1rem;
 	margin: 0.4rem;
 	text-transform: none;
@@ -340,16 +341,16 @@ blockquote:before,
 	flex-wrap: wrap;
 	flex-direction: column;
 }
-input[type="color"] {
+input[type='color'] {
 	-webkit-appearance: none;
 	border: none;
 	width: 32px;
 	height: 32px;
 }
-input[type="color"]::-webkit-color-swatch-wrapper {
+input[type='color']::-webkit-color-swatch-wrapper {
 	padding: 0;
 }
-input[type="color"]::-webkit-color-swatch {
+input[type='color']::-webkit-color-swatch {
 	border: none;
 }
 #menu {
@@ -631,6 +632,24 @@ button {
 }
 .via-dropdown {
 	text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow-x: hidden;
-}
\ No newline at end of file
+	white-space: nowrap;
+	overflow-x: hidden;
+}
+#re-online {
+	background-color: rgb(38, 92, 153);
+	position: fixed;
+	width: 100vw;
+	height: 2rem;
+	padding: 0.25rem;
+	color: white;
+	z-index: 1000;
+}
+#offline {
+	background-color: rgb(153, 38, 38);
+	position: fixed;
+	width: 100vw;
+	height: 2rem;
+	padding: 0.25rem;
+	color: white;
+	z-index: 999;
+}
diff --git a/app/js/platform/end.js b/app/js/platform/end.js
index 4e9eb1a8..32b828a6 100644
--- a/app/js/platform/end.js
+++ b/app/js/platform/end.js
@@ -219,10 +219,12 @@ if(pwa) {
 const connection = function (event) {
 	console.log(navigator.onLine, 'network state')
 	if(!navigator.onLine) {
-		$('#toot-post-btn').addClass('disabled')
-	} else {
-		$('#toot-post-btn').removeClass('disabled')
+		$('#re-online').addClass('hide')
+		$('#offline').removeClass('hide')
+	} else if(!$('#offline').hasClass('hide')) {
+		$('#offline').addClass('hide')
+		$('#re-online').removeClass('hide')
 	}
 }
 window.onoffline = connection
-window.ononline = connection
\ No newline at end of file
+window.ononline = connection
diff --git a/app/js/post/post.js b/app/js/post/post.js
index 5f1aa237..3a3e3aaf 100644
--- a/app/js/post/post.js
+++ b/app/js/post/post.js
@@ -10,6 +10,15 @@ function sec() {
 	post(null, mode)
 }
 function post(mode, postvis, dry) {
+	if(!navigator.onLine && !dry) {
+		draftToggle(true)
+		addToDraft()
+		M.toast({
+			html: lang.lang_post_offline,
+			displayLength: 3000
+		})
+		return false
+	}
 	if ($('#toot-post-btn').prop('disabled')) {
 		return false
 	}
diff --git a/app/js/post/secure.js b/app/js/post/secure.js
index 9ea56518..9e7351d9 100644
--- a/app/js/post/secure.js
+++ b/app/js/post/secure.js
@@ -128,8 +128,8 @@ function schedule() {
 }
 
 //下書き機能
-function draftToggle() {
-	if ($('#draft').hasClass('hide')) {
+function draftToggle(force) {
+	if ($('#draft').hasClass('hide') || force) {
 		$('#draft').removeClass('hide')
 		$('#right-side').show()
 		$('#right-side').css('width', '300px')
diff --git a/app/package.json b/app/package.json
index b01f462b..7151db7e 100644
--- a/app/package.json
+++ b/app/package.json
@@ -1,6 +1,6 @@
 {
     "name": "thedesk",
-    "version": "21.2.4",
+    "version": "21.2.5",
     "codename": "Mayu",
     "description": "TheDesk is a Mastodon client for PC.",
     "repository": "https://github.com/cutls/TheDesk",
diff --git a/app/view/make/index.sample.html b/app/view/make/index.sample.html
index 51e5f325..17ffb5c1 100644
--- a/app/view/make/index.sample.html
+++ b/app/view/make/index.sample.html
@@ -43,6 +43,12 @@
 			<i class="material-icons">chat</i>
 		</button>
 	</div>
+	<div id="offline" class="hide">
+		@@nowOffline@@
+	</div>
+	<div id="re-online" class="hide">
+		@@reOnline@@
+	</div>
 	<div id="tl">
 		<!--TL-->
 		<!--スターター-->
diff --git a/app/view/make/language/en/index.json b/app/view/make/language/en/index.json
index 2c8e3446..c7109f34 100644
--- a/app/view/make/language/en/index.json
+++ b/app/view/make/language/en/index.json
@@ -1,5 +1,7 @@
 {
     "draghere":"Drag here to upload",
+    "nowOffline":"OFFLINE: all of your post is in the draft box and you should reload after re-connect to the Internet",
+    "reOnline":"Now we are in the Internet, you should reload...",
     "close":"Close",
     "webSrc": "Search on Web",
     "tsSrc": "Search on tootsearch",
diff --git a/app/view/make/language/en/main.json b/app/view/make/language/en/main.json
index 67576efc..fb72507d 100644
--- a/app/view/make/language/en/main.json
+++ b/app/view/make/language/en/main.json
@@ -71,6 +71,7 @@
     "lang_post_btn3": "Continue to post",
     "lang_post_unfinishedMedia": "The server has not finished processing your media. Retry.",
     "lang_post_retry": "Retry",
+    "lang_post_offline": "Add to the drafts because of offline",
     "lang_status_favWarn": "It will take a miunte to favourite a remote toot.",
     "lang_status_btWarn": "It will take a miunte to boost a remote toot.",
     "lang_status_follow": "Follow",
diff --git a/app/view/make/language/ja-KS/index.json b/app/view/make/language/ja-KS/index.json
index 8f6e6e86..2b6a97c5 100644
--- a/app/view/make/language/ja-KS/index.json
+++ b/app/view/make/language/ja-KS/index.json
@@ -1,5 +1,7 @@
 {
     "draghere":"ドラッグしてみ？(ドラッグしたらすぐアップロードされるで)",
+    "nowOffline":"オフラインやで。投稿は全部下書きに行くし、もしオンラインなったら再読み込みしたらええで。",
+    "reOnline":"オンライン戻ったから再読み込みしてな。",
     "close":"Close",
     "webSrc": "Webでさがす",
     "tsSrc": "tootsearchでさがす",
diff --git a/app/view/make/language/ja-KS/main.json b/app/view/make/language/ja-KS/main.json
index 6fc69537..16fb80e8 100644
--- a/app/view/make/language/ja-KS/main.json
+++ b/app/view/make/language/ja-KS/main.json
@@ -72,6 +72,7 @@
     "lang_status_btWarn": "ブーストしたんやけどインスタンスがちゃうときは時間がかかるで、知らんけど。",
     "lang_post_unfinishedMedia": "処理未了のメディアがあります。再試行してください。",
     "lang_post_retry": "再試行",
+    "lang_post_offline": "オフラインやったし下書きいれといたで",
     "lang_status_follow": "フォロー",
     "lang_status_unfollow": "フォロー解除",
     "lang_status_block": "ブロック",
diff --git a/app/view/make/language/ja/index.json b/app/view/make/language/ja/index.json
index 9b6a8c05..3f6be5b1 100644
--- a/app/view/make/language/ja/index.json
+++ b/app/view/make/language/ja/index.json
@@ -1,5 +1,7 @@
 {
     "draghere":"ここにドラッグして添付(ドラッグと同時にアップロードされます)",
+    "nowOffline":"オフラインです。投稿はすべて下書きに追加されます。オンライン復帰時には再読み込みを推奨します。",
+    "reOnline": "オンラインに復帰しました。再読み込みを推奨します。",
     "webSrc": "Webで検索",
     "tsSrc": "tootsearchで検索",
     "close":"Close",
diff --git a/app/view/make/language/ja/main.json b/app/view/make/language/ja/main.json
index e46644fd..3ff366d7 100644
--- a/app/view/make/language/ja/main.json
+++ b/app/view/make/language/ja/main.json
@@ -72,6 +72,7 @@
     "lang_post_btn3": "そのまま投稿",
     "lang_post_unfinishedMedia": "処理未了のメディアがあります。再試行してください。",
     "lang_post_retry": "再試行",
+    "lang_post_offline": "オフラインのため下書きに追加しました。",
     "lang_status_favWarn": "お気に入り登録しました。インスタンスが違うときは時間がかかる場合があります。",
     "lang_status_btWarn": "ブーストしました。インスタンスが違うときは時間がかかる場合があります。",
     "lang_status_follow": "フォロー",