[popup] working lib
This commit is contained in:
xdrm-brackets
parent
e7ffcfc152
commit
4269b49a3b
|
|
@ -5,16 +5,194 @@ export class PopupController{
|
|||
---------------------------------------------------------*/
|
||||
constructor(){
|
||||
|
||||
/* (1) Popups */
|
||||
this.croom = {
|
||||
active: false,
|
||||
type: 'text',
|
||||
name: '',
|
||||
reset(){ this.active = false; this.type = 'text'; this.name = ''; },
|
||||
submit(){ gs.get.room.create(this.type, this.name) && this.reset(); }
|
||||
}
|
||||
/* (1) Global
|
||||
---------------------------------------------------------*/
|
||||
/* (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: ''
|
||||
},
|
||||
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];
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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`:``'
|
||||
|
|
|
|||
|
|
@ -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'>
|
||||
<span class='header'>Create {{ gs.popup.croom.type }} channel</span>
|
||||
<div class='popup' v-show='gs.popup.get(`room.create`).active'>
|
||||
<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.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=`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.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.croom.submit()'>Create Channel</button>
|
||||
<button @click='gs.popup.hide()'>Cancel</button>
|
||||
<button @click='gs.popup.get(`room.create`).submit()'>Create Channel</button>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue