[popup] working lib

webpack/lib/popup-controller.js

@@ -5,16 +5,194 @@ export class PopupController{
 	---------------------------------------------------------*/
 	constructor(){
 
-		/* (1) Popups */
+		/* (1) Global
-		this.croom = {
+		---------------------------------------------------------*/
-			active: false,
+		/* (1) Background Visibility */
+		this.filter = false;
+
+		/* (2) Popup set */
+		this.list = {};
+
+		/* (3) Active popup */
+		this.active = null;
+
+
+
+		/* (2) Popups
+		---------------------------------------------------------*/
+		/* (1) Create a new Room */
+		this.register('room.create', {
+			data: {
 				type: 'text',
-			name:   '',
+				name: ''
-			reset(){ this.active = false; this.type = 'text'; this.name = ''; },
+			},
-			submit(){ gs.get.room.create(this.type, this.name) && this.reset(); }
+			reset(){ this.data.type = 'text'; this.data.name = ''; },
+			submit(){ gs.get.room.create(this.data.type, this.data.name) && this.parent.hide(); }
+		});
+		// this.croom = {
+
+		// 	active: false,
+		// 	type:   'text',
+		// 	name:   '',
+
+
+		// }; this.reset.push(this.croom.reset);
+
 	}
 
 
+	/* (2) Regiters a new popup
+	*
+	* @name<String>						Popup name
+	* @data<Object>						Popup structure
+	*
+	*   [data.structure]
+	* {
+	*	reset:  <Function>,
+	*	submit: <Function>,
+	*	active: <bool>, // will be generated automatically
+	*	data:   <Object>
+	* }
+	*
+	---------------------------------------------------------*/
+	register(name, popup){
+
+		/* (1) Error: invalid @name */
+		if( typeof name !== 'string' )
+			return false;
+
+		/* (2) Error: invalid @data */
+		if( typeof popup !== 'object' )
+			return false;
+
+		/* (3) Error: @name already used */
+		if( this.list[name] != null )
+			return false;
+
+		/* (3) Store popup */
+		this.list[name] = popup;
+
+		/* (4) Add @parent ref */
+		this.list[name].parent = this;
+
+		/* (5) Hide by default */
+		this.list[name].active = false;
+
+		return true;
+
 	}
 
+
+
+	/* (3) Unregiters an existing popup
+	*
+	* @name<String>						Popup name
+	*
+	---------------------------------------------------------*/
+	unregister(name){
+
+		/* (1) Error: invalid @name */
+		if( typeof name !== 'string' )
+			return false;
+
+		/* (2) Error: @name not used */
+		if( this.list[name] == null )
+			return false;
+
+		/* (3) If popup is @active -> hide */
+		if( this.active === name )
+			this.hide();
+
+		/* (3) Unregister popup */
+		delete this.list[name];
+
+	}
+
+
+
+	/* (4) Show a popup
+	*
+	* @name<String>						Popup name
+	*
+	---------------------------------------------------------*/
+	show(name){
+
+		/* (1) Error: invalid @name */
+		if( typeof name !== 'string' )
+			return false;
+
+		/* (2) Error: @name not used */
+		if( this.list[name] == null )
+			return false;
+
+		/* (3) Hide @active popup */
+		this.hide();
+
+		/* (4) Active popup */
+		this.active = name;
+
+		/* (5) Show background */
+		this.filter = true;
+
+		/* (6) Reset popup */
+		this.list[name].reset();
+
+		/* (7) Show popup */
+		this.list[name].active = true;
+
+	}
+
+
+
+	/* (5) Hide currently @active popup
+	*
+	---------------------------------------------------------*/
+	hide(){
+
+		/* (1) Error: if no active popup */
+		if( this.active == null )
+			return false;
+
+		/* (2) Error: @active not exists */
+		if( this.list[this.active] == null )
+			return false;
+
+		/* (3) Hide background */
+		this.filter = false;
+
+		/* (4) Hide popup */
+		this.list[this.active].active = false;
+
+		/* (5) Reset popup */
+		this.list[this.active].reset();
+
+		/* (6) Reset @active */
+		this.active = null;
+
+	}
+
+
+	/* (6) Data getter
+	*
+	* @name<String>						Popup name
+	*
+	*
+	---------------------------------------------------------*/
+	get(name){
+
+		/* (1) Error: invalid @name */
+		if( typeof name !== 'string' )
+			return { data: {} };
+
+		/* (2) Error: @name not used */
+		if( this.list[name] == null )
+			return { data: {} };
+
+		/* (3) Return data */
+		return this.list[name];
+
+	}
+
+
+
 }

webpack/scss/pop-up.scss

@@ -1,5 +1,34 @@
 @import 'constants';
 
+@keyframes popup-show{
+	from{ transform: translateX(-50%) translateY(-50%) scale(.8); }
+	to{   transform: translateX(-50%) translateY(-50%) scale(1); }
+}
+
+@keyframes filter-show{
+	from{ opacity: 0; }
+	to{   opacity: 1; }
+}
+
+
+/* (0) Popup Filter Background
+---------------------------------------------------------*/
+#popup-filter-background{
+	display: block;
+	position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+
+	z-index: 700;
+
+	background-color: rgba(0,0,0,.8);
+
+	transition: opacity .2s ease-in-out;
+	animation: filter-show .2s ease-in-out;
+}
+
 
 /* (1) Popup box
 ---------------------------------------------------------*/
@@ -16,15 +45,16 @@
 
 	border-radius: 5px / 5px;
 
-	box-shadow: 0 0 0 100vw rgba(0,0,0,.8);
-
 	background-color: #36393f;
 
 	overflow: hidden;
 
 	z-index: 800;
 
-	transform: translateX(-50%) translateY(-50%);
+	transform: translateX(-50%) translateY(-50%) scale(1);
+
+	transition: transform .2s ease-in-out;
+	animation: popup-show .2s ease-in-out;
 
 }
 

webpack/vue/dialog.vue

@@ -17,7 +17,7 @@
 					@click='rooms.visible=!rooms.visible'>
 						{{ type }} <span>rooms</span>
 					</div>
-				<div class='add' @click='gs.popup.croom.active=true' data-title='Create channel'></div>
+				<div class='add' @click='gs.popup.show(`room.create`)' data-title='Create channel'></div>
 				<ul>
 					<li v-for='r in rooms.list'
 						:class='rooms.current==r.id?`active`:``'

webpack/vue/wrapper.vue

@@ -13,22 +13,25 @@
 		<!-- Container -->
 		<router-view></router-view>
 
+		<!-- Pop-up Filter Background -->
+		<div id='popup-filter-background' v-show='gs.popup.filter' @click='gs.popup.hide()'></div>
+
 		<!-- Pop-up -->
-		<div class='popup' v-show='gs.popup.croom.active'>
+		<div class='popup' v-show='gs.popup.get(`room.create`).active'>
-			<span class='header'>Create {{ gs.popup.croom.type }} channel</span>
+			<span class='header'>Create {{ gs.popup.get(`room.create`).data.type }} channel</span>
 
 			<span class='body'>
 				<label for='channel_name'>Channel Name</label>
-				<input type='text' name='channel_name' v-model='gs.popup.croom.name'>
+				<input type='text' name='channel_name' v-model='gs.popup.get(`room.create`).data.name'>
 
 				<label for='channel_name'>Channel Type</label>
-				<span class='select-box' @click='gs.popup.croom.type=`text`' :data-selected='gs.popup.croom.type==`text`?1:0' data-type='text'>Text Channel</span>
+				<span class='select-box' @click='gs.popup.get(`room.create`).data.type=`text`' :data-selected='gs.popup.get(`room.create`).data.type==`text`?1:0' data-type='text'>Text Channel</span>
-				<span class='select-box' @click='gs.popup.croom.type=`voice`' :data-selected='gs.popup.croom.type==`voice`?1:0' data-type='voice'>Voice Channel</span>
+				<span class='select-box' @click='gs.popup.get(`room.create`).data.type=`voice`' :data-selected='gs.popup.get(`room.create`).data.type==`voice`?1:0' data-type='voice'>Voice Channel</span>
 			</span>
 
 			<span class='footer'>
-				<button @click='gs.popup.croom.reset()'>Cancel</button>
+				<button @click='gs.popup.hide()'>Cancel</button>
-				<button @click='gs.popup.croom.submit()'>Create Channel</button>
+				<button @click='gs.popup.get(`room.create`).submit()'>Create Channel</button>
 			</span>
 		</div>