From 32f4e9a7b31ab9a4aea39f96292946722fa6044b Mon Sep 17 00:00:00 2001
From: xdrm-brackets <doowap31@gmail.com>
Date: Thu, 29 Mar 2018 12:56:17 +0200
Subject: [PATCH] [lib.popup-controller][scss.global] design for 'loading'
 animation in submit <button> before api response + [lib.*-controller] when
 called from popup will call 'gs.get.popup().hide' to remove the loading
 animation and close the popup

---
 public_html/asset/svg/loader.svg  | 11 +++++++++++
 webpack/lib/channel-controller.js | 10 +++++-----
 webpack/lib/content-controller.js |  4 +++-
 webpack/lib/popup-controller.js   | 32 ++++++++++++++++++-------------
 webpack/lib/room-controller.js    | 10 ++++------
 webpack/scss/global.scss          |  8 +++++++-
 webpack/vue/auth/wrapper.vue      | 16 ++++++++--------
 7 files changed, 57 insertions(+), 34 deletions(-)
 create mode 100644 public_html/asset/svg/loader.svg

diff --git a/public_html/asset/svg/loader.svg b/public_html/asset/svg/loader.svg
new file mode 100644
index 0000000..8cab3b9
--- /dev/null
+++ b/public_html/asset/svg/loader.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="white">
+  <circle transform="translate(8 0)" cx="0" cy="16" r="0"> 
+    <animate attributeName="r" values="0; 4; 0; 0" dur="1.2s" repeatCount="indefinite" begin="0" keytimes="0;0.2;0.7;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.6 0.4 0.8" calcMode="spline"/>
+  </circle>
+  <circle transform="translate(16 0)" cx="0" cy="16" r="0"> 
+    <animate attributeName="r" values="0; 4; 0; 0" dur="1.2s" repeatCount="indefinite" begin="0.3" keytimes="0;0.2;0.7;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.6 0.4 0.8" calcMode="spline"/>
+  </circle>
+  <circle transform="translate(24 0)" cx="0" cy="16" r="0"> 
+    <animate attributeName="r" values="0; 4; 0; 0" dur="1.2s" repeatCount="indefinite" begin="0.6" keytimes="0;0.2;0.7;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.6 0.4 0.8" calcMode="spline"/>
+  </circle>
+</svg>
\ No newline at end of file
diff --git a/webpack/lib/channel-controller.js b/webpack/lib/channel-controller.js
index 3fc054d..582ca2e 100644
--- a/webpack/lib/channel-controller.js
+++ b/webpack/lib/channel-controller.js
@@ -211,16 +211,16 @@ export default class ChannelController{
 		/* (3) Try to create room in API */
 		api.call('POST /channel', { link: link, name: name }, function(rs){
 
-			/* (1) Manage error */
+			/* (1) Hide popup */
+			gs.get.popup.hide();
+
+			/* (2) Manage error */
 			if( rs.error !== 0 || rs.cid == null )
 				return false;
 
-			/* (2) Reload channel list */
+			/* (3) Reload channel list */
 			this.fetch();
 
-			/* (3) Hide popup */
-			gs.get.popup.hide();
-
 		}.bind(this), auth.token);
 
 		return true;
diff --git a/webpack/lib/content-controller.js b/webpack/lib/content-controller.js
index ebe4553..9c5f6d5 100644
--- a/webpack/lib/content-controller.js
+++ b/webpack/lib/content-controller.js
@@ -87,6 +87,8 @@ export default class ContentController{
 		/* (3) Call api UPDATE */
 		api.call(`PUT /user/${this.uid}`, { username: username }, function(rs){
 
+			gs.get.popup.hide();
+
 			// manage error
 			if( rs.error !== 0 )
 				return;
@@ -125,7 +127,7 @@ export default class ContentController{
 			return false;
 
 		/* (3) Call api UPDATE */
-		api.call(`PUT /user/${this.uid}`, { password: password }, () => {}, auth.token);
+		api.call(`PUT /user/${this.uid}`, { password: password }, () => gs.get.popup.hide(), auth.token);
 
 		/* (4) Error */
 		return true;
diff --git a/webpack/lib/popup-controller.js b/webpack/lib/popup-controller.js
index 5382aa9..2cd4806 100644
--- a/webpack/lib/popup-controller.js
+++ b/webpack/lib/popup-controller.js
@@ -16,6 +16,10 @@ export default class PopupController{
 		/* (3) Active popup */
 		this.active = null;
 
+		/* (4) Loading state */
+		this.loading = false;
+
+
 
 
 		/* (2) Popups
@@ -35,8 +39,8 @@ export default class PopupController{
 				if( !this.name.is_valid() )
 					return;
 
-				if( gs.get.room.create(this.type.mutable, this.name.mutable) )
-					return this.parent.hide();
+				// loading
+				this.parent.loading = gs.get.room.create(this.type.mutable, this.name.mutable);
 
 			}
 
@@ -59,8 +63,8 @@ export default class PopupController{
 				if( !this.link.is_valid() )
 					return false;
 
-				if( gs.get.channel.create(this.name.mutable, this.link.mutable) )
-					return this.parent.hide();
+				// loading
+				this.parent.loading = gs.get.channel.create(this.name.mutable, this.link.mutable);
 
 			}
 		});
@@ -75,8 +79,9 @@ export default class PopupController{
 				if( !this.username.is_valid() )
 					return false;
 
-				if( gs.get.content.change_username(this.username.mutable) )
-					this.parent.hide();
+				// loading
+				this.parent.loading = gs.get.content.change_username(this.username.mutable);
+
 
 			}
 		});
@@ -91,8 +96,8 @@ export default class PopupController{
 				if( !this.username.is_valid() )
 					return false;
 
-				if( gs.get.channel.invite(this.username.mutable) )
-					return this.parent.hide();
+				// loading
+				this.parent.loading = gs.get.channel.invite(this.username.mutable);
 
 			}
 		});
@@ -100,7 +105,7 @@ export default class PopupController{
 		/* (5) Remove channel */
 		this.register('channel.remove', {
 			reset(){ },
-			submit(){ gs.get.channel.remove() && this.parent.hide(); }
+			submit(){ this.parent.loading = gs.get.channel.remove(); }
 		});
 
 		/* (6) Remove channel */
@@ -112,13 +117,13 @@ export default class PopupController{
 				messages: []
 			},
 			reset(){ this.data = { id: '', type: '', name: '', messages: [] }; },
-			submit(){ gs.get.room.remove(this.data.type, this.data.id) && this.parent.hide(); }
+			submit(){ this.parent.loading = gs.get.room.remove(this.data.type, this.data.id); }
 		});
 
 		/* (7) Leave channel */
 		this.register('channel.leave', {
 			reset(){ },
-			submit(){ gs.get.channel.remove() && this.parent.hide(); }
+			submit(){ this.parent.loading = gs.get.channel.remove(); }
 		});
 
 		/* (8) Change password */
@@ -139,8 +144,7 @@ export default class PopupController{
 				if( !this.password.is_valid || !this.confirm.is_valid() )
 					return false;
 
-				if( gs.get.content.change_password(this.password.mutable) )
-					return this.parent.hide();
+				this.loading = gs.get.content.change_password(this.password.mutable);
 
 			}
 		});
@@ -243,6 +247,7 @@ export default class PopupController{
 		this.filter = true;
 
 		/* (6) Reset popup */
+		this.loading = false;
 		this.list[name].reset();
 
 		/* (7) Show popup */
@@ -272,6 +277,7 @@ export default class PopupController{
 		this.list[this.active].active = false;
 
 		/* (5) Reset popup */
+		this.loading = false;
 		this.list[this.active].reset();
 
 		/* (6) Reset @active */
diff --git a/webpack/lib/room-controller.js b/webpack/lib/room-controller.js
index 8b2f59f..9df7f3b 100644
--- a/webpack/lib/room-controller.js
+++ b/webpack/lib/room-controller.js
@@ -229,6 +229,8 @@ export default class RoomController{
 		/* (3) Try to create room in API */
 		api.call(`POST /channel/room/${gs.get.content.cid}`, { type: type, name: name }, function(rs){
 
+			gs.get.popup.hide();
+
 			/* (1) Manage error */
 			if( rs.error !== 0 || rs.rid == null )
 				return false;
@@ -236,9 +238,6 @@ export default class RoomController{
 			/* (2) Reload room list */
 			this.fetch();
 
-			/* (3) Hide popup */
-			gs.get.popup.hide();
-
 		}.bind(this), auth.token);
 
 		return true;
@@ -267,6 +266,8 @@ export default class RoomController{
 		/* (3) Try to create room in API */
 		api.call(`DELETE /channel/room/${gs.get.content.cid}/${rid}`, {}, function(rs){
 
+			gs.get.popup.hide();
+
 			/* (1) Manage error */
 			if( rs.error !== 0 )
 				return false;
@@ -274,9 +275,6 @@ export default class RoomController{
 			/* (2) Reload room list */
 			this.fetch();
 
-			/* (3) Hide popup */
-			gs.get.popup.hide();
-
 		}.bind(this), auth.token);
 
 		return true;
diff --git a/webpack/scss/global.scss b/webpack/scss/global.scss
index 6686d54..cd18abf 100644
--- a/webpack/scss/global.scss
+++ b/webpack/scss/global.scss
@@ -153,7 +153,8 @@
 		border: 0;
 		border-radius: 3px / 3px;
 
-		background-color: $main;
+		background: $main center center no-repeat;
+		background-size: contain;
 
 		color: #fff;
 		font-size: .8em;
@@ -172,6 +173,11 @@
 			&:hover{ background-color: darken($main, 5%);}
 			&:active{ background-color: darken($main, 10%);}
 		}
+
+		&[data-loading='1']{
+			background-image: url('../asset/svg/loader.svg');
+			color: transparent;
+		}
 	}
 
 }
diff --git a/webpack/vue/auth/wrapper.vue b/webpack/vue/auth/wrapper.vue
index 872907d..f69c8ff 100644
--- a/webpack/vue/auth/wrapper.vue
+++ b/webpack/vue/auth/wrapper.vue
@@ -31,7 +31,7 @@
 
 			<span class='footer form'>
 				<button @click='gs.popup.hide()'>Cancel</button>
-				<button class='submit' @click='gs.popup.get(`room.create`).submit()'>Create Room</button>
+				<button class='submit' :data-loading='gs.popup.loading?1:0' @click='gs.popup.get(`room.create`).submit()'>Create Room</button>
 			</span>
 		</div>
 
@@ -49,7 +49,7 @@
 
 			<span class='footer form'>
 				<button @click='gs.popup.hide()'>Cancel</button>
-				<button class='submit' @click='gs.popup.get(`channel.create`).submit()'>Create Channel</button>
+				<button class='submit' :data-loading='gs.popup.loading?1:0' @click='gs.popup.get(`channel.create`).submit()'>Create Channel</button>
 			</span>
 		</div>
 
@@ -66,7 +66,7 @@
 
 			<span class='footer form'>
 				<button @click='gs.popup.hide()'>Cancel</button>
-				<button class='submit' @click='gs.popup.get(`username.change`).submit()'>Save</button>
+				<button class='submit' :data-loading='gs.popup.loading?1:0' @click='gs.popup.get(`username.change`).submit()'>Save</button>
 			</span>
 		</div>
 
@@ -81,7 +81,7 @@
 
 			<span class='footer form'>
 				<button @click='gs.popup.hide()'>Cancel</button>
-				<button class='submit' @click='gs.popup.get(`channel.invite`).submit()'>Invite</button>
+				<button class='submit' :data-loading='gs.popup.loading?1:0' @click='gs.popup.get(`channel.invite`).submit()'>Invite</button>
 			</span>
 		</div>
 
@@ -95,7 +95,7 @@
 
 			<span class='footer form'>
 				<button @click='gs.popup.hide()'>Cancel</button>
-				<button class='submit invalid' @click='gs.popup.get(`channel.remove`).submit()'>Remove</button>
+				<button class='submit invalid' :data-loading='gs.popup.loading?1:0' @click='gs.popup.get(`channel.remove`).submit()'>Remove</button>
 			</span>
 		</div>
 
@@ -109,7 +109,7 @@
 
 			<span class='footer form'>
 				<button @click='gs.popup.hide()'>Cancel</button>
-				<button class='submit invalid' @click='gs.popup.get(`room.remove`).submit()'>Remove</button>
+				<button class='submit invalid' :data-loading='gs.popup.loading?1:0' @click='gs.popup.get(`room.remove`).submit()'>Remove</button>
 			</span>
 		</div>
 
@@ -123,7 +123,7 @@
 
 			<span class='footer form'>
 				<button @click='gs.popup.hide()'>Cancel</button>
-				<button class='submit invalid' @click='gs.popup.get(`channel.leave`).submit()'>Leave</button>
+				<button class='submit invalid' :data-loading='gs.popup.loading?1:0' @click='gs.popup.get(`channel.leave`).submit()'>Leave</button>
 			</span>
 		</div>
 
@@ -142,7 +142,7 @@
 
 			<span class='footer form'>
 				<button @click='gs.popup.hide()'>Cancel</button>
-				<button class='submit' @click='gs.popup.get(`password.change`).submit()'>Update</button>
+				<button class='submit' :data-loading='gs.popup.loading?1:0' @click='gs.popup.get(`password.change`).submit()'>Update</button>
 			</span>
 		</div>