|
//## Vars |
|
let Gui = {}, |
|
frame = ['tl','tr','bl','br','l','t','r','b'], |
|
minimizedSize = 200, |
|
taskbarSize = 40, |
|
snapTolerence = 10 |
|
Gui.tracker = [] |
|
Gui.trackerCount = 0, |
|
Gui.tray = [] |
|
|
|
let selector = '.panel[data-drag="true"]', |
|
el = { |
|
panel:$(selector), |
|
body:$('body'), |
|
all:$('*'), |
|
heading:$(selector).find('.panel-heading'), |
|
snap:$('.snap') |
|
} |
|
|
|
//## Register |
|
Gui.register = (spec)=>{ |
|
Gui.trackerCount++; |
|
let id = '0x'+Gui.trackerCount |
|
$(spec.element).find('.window-title').text($(spec.element).data('title')) |
|
Gui.tracker.push({ |
|
id:id, |
|
title:spec.element.data('title'), |
|
state:'natural' |
|
}) |
|
spec.element.attr('data-id',id) |
|
frame.forEach(function(item){ |
|
spec.element.append('<div class="'+item+' frame"></div>') |
|
}) |
|
} |
|
|
|
Gui.getFrame = (spec)=>{ |
|
let getId = spec.id, |
|
current = Gui.tracker.filter((item)=>{ |
|
return item.id === getId |
|
})[0] |
|
return current |
|
} |
|
|
|
Gui.dimention = (spec)=>{ |
|
let win = { |
|
w:$(window).width(), |
|
h:$(window).height() |
|
} |
|
|
|
let current = Gui.getFrame({id:$(spec.element).data('id')}) |
|
current.position = { |
|
left:spec.left, |
|
right:win.w - spec.width - spec.left, |
|
top:spec.top, |
|
bottom:win.h - spec.height - spec.top, |
|
get width(){ |
|
return win.w - (this.left+this.right) |
|
}, |
|
get height(){ |
|
return win.h - (this.top+this.bottom) |
|
} |
|
} |
|
let styleObj = { |
|
left:current.position.left, |
|
right:current.position.right, |
|
top:current.position.top, |
|
bottom:current.position.bottom |
|
} |
|
//##Init |
|
$(spec.element).css(styleObj) |
|
$(window).resize(function(){ |
|
if(!current.state==='minimized'){ |
|
let win = { |
|
w:$(window).width(), |
|
h:$(window).height() |
|
} |
|
styleObj.right = win.w - spec.width - spec.left |
|
styleObj.botton = win.h - spec.height - spec.bottom |
|
$(spec.element).css(styleObj) |
|
} |
|
}) |
|
} |
|
|
|
//##Resizing |
|
Gui.clearMousemove = ()=>{ |
|
$('body').removeClass('dragging') |
|
$(document).off('mousemove'); |
|
} |
|
|
|
Gui.contextMenu = (spec)=>{ |
|
let self = spec.element |
|
if(!!self.attr('data-context')){ |
|
try{ |
|
let menu = JSON.parse(self.data('data-context')) |
|
} |
|
catch(err){ |
|
if(err) return false; |
|
} |
|
} |
|
} |
|
|
|
//loop each |
|
el.panel.each(function(){ |
|
Gui.register({ |
|
element:$(this) |
|
}) |
|
Gui.dimention({//Starting from |
|
element:$(this), |
|
width:300, |
|
height:$(this).find('.inner').outerHeight(), |
|
left:$(this).data('left')||100, |
|
top:$(this).data('left')||100 |
|
}) |
|
Gui.contextMenu({element:$(this)}) |
|
}) |
|
|
|
//Move |
|
el.heading.mousedown(function(mouse_e){ |
|
let innerOffset = { |
|
x:mouse_e.offsetX, |
|
y:mouse_e.offsetY |
|
}, |
|
self = $(this).closest(selector), |
|
selfData = Gui.getFrame({id:self.data('id')}) |
|
if(selfData.state==='natural'){ |
|
$('body').addClass('dragging') |
|
$(document).mousemove(function(move_e){ |
|
Gui.dimention({ |
|
element:self,//may need changing |
|
width:selfData.position.width, |
|
height:selfData.position.height, |
|
left:move_e.clientX-innerOffset.x, |
|
top:move_e.clientY-innerOffset.y |
|
}) |
|
//snapping |
|
if(move_e.clientX <= snapTolerence){ |
|
selfData.snap = 'left' |
|
|
|
} |
|
else if(move_e.clientX >= $(window).width() - snapTolerence){ |
|
selfData.snap = 'right' |
|
} |
|
else if(move_e.clientY <= snapTolerence){ |
|
selfData.snap = 'top' |
|
} |
|
else{ |
|
selfData.snap = false |
|
} |
|
}) |
|
} |
|
else if(selfData.state === 'minimize'){ |
|
Gui.minimize({ |
|
element:self, |
|
data:selfData |
|
}).restore |
|
} |
|
}).mouseup((e)=>{ |
|
let self = $(e.target).closest(el.panel), |
|
selfData = Gui.getFrame({id:self.data('id')}) |
|
let snap = selfData.snap |
|
|
|
//COMIT TO SNAP |
|
if(snap==='left'){ |
|
|
|
} |
|
else if(snap==='right'){ |
|
|
|
} |
|
else if(snap==='top'){ |
|
console.log('foo') |
|
Gui.maximize({element:self}).expand |
|
} |
|
|
|
Gui.clearMousemove() |
|
}) |
|
|
|
Gui.grappleTest = (conf)=>{ |
|
if(conf.event.target.className.split(' ').indexOf(conf.direction)>=0){ |
|
conf.cb() |
|
} |
|
else{ |
|
return false |
|
} |
|
} |
|
|
|
$('.l, .r, .t, .b, .tl, .tr, .bl, .br') |
|
.mousedown(function(mouse_e){ |
|
$('body').addClass('dragging') |
|
let innerOffset = { |
|
x:mouse_e.offsetX, |
|
y:mouse_e.offsetY |
|
}, |
|
self = $(this).closest(selector), |
|
selfData = Gui.getFrame({id:self.data('id')}) |
|
$(document).mousemove(function(move_e){ |
|
Gui.grappleTest({ |
|
event:mouse_e, |
|
direction:'l', |
|
cb:()=>{ |
|
selfData.position.left = move_e.clientX |
|
self.css({left:selfData.position.left}) |
|
} |
|
}) |
|
Gui.grappleTest({ |
|
event:mouse_e, |
|
direction:'t', |
|
cb:()=>{ |
|
selfData.position.top = move_e.clientY |
|
self.css({top:selfData.position.top}) |
|
} |
|
}) |
|
Gui.grappleTest({ |
|
event:mouse_e, |
|
direction:'r', |
|
cb:()=>{ |
|
selfData.position.right = $(window).width() - move_e.clientX |
|
self.css({right:selfData.position.right}) |
|
} |
|
}) |
|
Gui.grappleTest({ |
|
event:mouse_e, |
|
direction:'b', |
|
cb:()=>{ |
|
selfData.position.bottom = $(window).height() - move_e.clientY |
|
self.css({bottom:selfData.position.bottom}) |
|
} |
|
}) |
|
Gui.grappleTest({ |
|
event:mouse_e, |
|
direction:'tl', |
|
cb:()=>{ |
|
selfData.position.left = move_e.clientX |
|
selfData.position.top = move_e.clientY |
|
self.css({ |
|
top:selfData.position.top, |
|
left:selfData.position.left |
|
}) |
|
} |
|
}) |
|
Gui.grappleTest({ |
|
event:mouse_e, |
|
direction:'tr', |
|
cb:()=>{ |
|
selfData.position.right = $(window).width() - move_e.clientX |
|
selfData.position.top = move_e.clientY |
|
self.css({ |
|
top:selfData.position.top, |
|
right:selfData.position.right |
|
}) |
|
} |
|
}) |
|
Gui.grappleTest({ |
|
event:mouse_e, |
|
direction:'bl', |
|
cb:()=>{ |
|
selfData.position.left = move_e.clientX |
|
selfData.position.bottom = $(window).height() - move_e.clientY |
|
self.css({ |
|
left:selfData.position.left, |
|
bottom:selfData.position.bottom |
|
}) |
|
} |
|
}) |
|
Gui.grappleTest({ |
|
event:mouse_e, |
|
direction:'br', |
|
cb:()=>{ |
|
selfData.position.right = $(window).width() - move_e.clientX |
|
selfData.position.bottom = $(window).height() - move_e.clientY |
|
self.css({ |
|
right:selfData.position.right, |
|
bottom:selfData.position.bottom |
|
}) |
|
} |
|
}) |
|
}) |
|
}) |
|
.mouseup(Gui.clearMousemove) |
|
|
|
//focus |
|
el.panel.mousedown(function(){ |
|
$(this).css({zIndex:10}) |
|
.addClass('focus') |
|
.removeClass('unfocus') |
|
.siblings(selector) |
|
.css({zIndex:9}) |
|
.addClass('unfocus') |
|
.removeClass('focus') |
|
}) |
|
|
|
|
|
Gui.close = (spec)=>{ |
|
spec.element.remove() |
|
} |
|
Gui.restore = (spec)=>{ |
|
TweenMax.to(spec.element,.1,{ |
|
left:spec.data.position.left, |
|
right:spec.data.position.right, |
|
top:spec.data.position.top, |
|
bottom:spec.data.position.bottom |
|
}) |
|
spec.data.state = 'natural' |
|
$(spec.element).find('.window-title').addClass('hide') |
|
} |
|
Gui.maximize = (spec)=>{ |
|
return { |
|
get expand(){ |
|
TweenMax.to(spec.element,.1,{ |
|
left:0, |
|
right:0, |
|
top:0, |
|
bottom:40, |
|
maxWidth:'initial' |
|
}) |
|
spec.data.state = 'maximize' |
|
}, |
|
get restore(){ |
|
Gui.restore(spec) |
|
} |
|
} |
|
|
|
} |
|
Gui.minimize = (spec)=>{ |
|
return { |
|
get colapse(){ |
|
Gui.tray.push(spec.data) |
|
TweenMax.to(spec.element,.1,{ |
|
left:minimizedSize*(Gui.tray.length-1), |
|
right:$(window).width(), |
|
top:$(window).height() - 40, |
|
bottom:0 |
|
}) |
|
//heading |
|
$(spec.element).find('.window-title').removeClass('hide') |
|
|
|
spec.data.state = 'minimize' |
|
$('.minimized').css({maxWidth:minimizedSize+'px'}) |
|
spec.element |
|
.addClass('minimized') |
|
}, |
|
get restore(){ |
|
Gui.tray.shift() |
|
Gui.restore(spec) |
|
spec.data.state = 'natural' |
|
spec.element |
|
.removeClass('minimized') |
|
} |
|
} |
|
} |
|
|
|
$('.window-ctrl > span').click(function(e){ |
|
let self = $(this).closest(el.panel), |
|
current = Gui.getFrame({id:self.data('id')}), |
|
requirements = { |
|
element:self, |
|
data:current |
|
} |
|
if($(this).hasClass('dismiss')){ |
|
Gui.close({element:self}) |
|
} |
|
else if($(this).hasClass('min')){ |
|
Gui.minimize(requirements).colapse |
|
} |
|
else if($(this).hasClass('max')){ |
|
if(current.state==='natural'){ |
|
Gui.maximize(requirements).expand |
|
} |
|
else if(current.state==='maximize'){ |
|
Gui.maximize(requirements).restore |
|
} |
|
} |
|
}) |
