Commit 397f5d99 authored by Akari Labs's avatar Akari Labs

b

parent 7a49b8cc
......@@ -17,22 +17,53 @@
font-size: 12px;
background-color: #444;
opacity: 0.8;
opacity: 0.85;
color: white;
font-family: sans-serif;
}
.kwm_win.kwm_active {
opacity: 0.85;
}
.kwm_win_hdr {
z-index: 99999;
padding: 2px;
background-color: #888;
background-color: #8300e0;
cursor: default;
}
.kwm_win.kwm_active .kwm_win_hdr {
background-color: #8300e0;
}
.kwm_win_hdr_close {
position: relative;
float: right;
right: 4px;
top: 4px;
width: 14px;
height: 6px;
background-color: white;
border: none;
padding: 0px;
}
.kwm_win_hdr_close:hover {
background-color: #df002d;
}
.kwm_win_hdr_close:active {
background-color: #80001a;
}
.kwm_win_body {
padding: 4px;
padding: 6px;
}
.kwm_win_handle {
......@@ -42,7 +73,7 @@
width: 0px;
height: 0px;
border-right: 8px solid white;
border-right: 8px solid #888;
border-top: 8px solid transparent;
cursor: se-resize;
}
......@@ -52,6 +83,7 @@
margin-right: 0px;
}
/* button */
.kwm_win_body input,
.kwm_win_body button {
display: initial !important;
......@@ -63,7 +95,8 @@
height: initial !important;
box-shadow: initial !important;
}
/* radio boxes */
.kwm_win_body input[type="checkbox"],
.kwm_win_body input[type="radio"] {
position: relative;
......@@ -105,11 +138,11 @@
}
.kwm_win_body input[type="range"]:active::-webkit-slider-thumb {
background-color: #4b0082;
background-color: #4c0080;
}
.kwm_win_body input[type="range"]:active::-moz-range-thumb {
background-color: #4b0082;
background-color: #4c0080;
}
/* button */
......@@ -129,10 +162,10 @@
}
.kwm_win_body button:active {
background-color: #4b0082;
background-color: #4c0080;
}
/* textbox */
/* text input */
.kwm_win_body input[type="text"] {
background-color: #777;
border-style: none;
......@@ -140,4 +173,20 @@
outline: none;
width: 100%;
font-family: sans-serif;
}
/* textarea */
.kwm_win_body textarea {
background-color: #777;
border-style: none;
color: white;
outline: none;
width: 100%;
font-family: sans-serif;
resize: none;
box-sizing: border-box;
}
.kwm_win_body textarea::placeholder {
color: #ccc;
}
\ No newline at end of file
......@@ -20,28 +20,35 @@ function KParent(attr, children) {
}
function KWindowHeader(attr, children) {
return <div class="kwm_win_hdr">{attr.title || 'kwm'}</div>
return <div class="kwm_win_hdr">{attr.title || 'kwm'}{children}</div>
}
function KWindowBody(attr, children) {
return <div class="kwm_win_body">{children}</div>
}
function KWindowHandle(attr, children) {
function KWindowHandle() {
return <div class="kwm_win_handle" />
}
function KWindow(attr, children) {
var hdr, handle;
attr = attr || {};
var header, body, handle;
const element = <div class="kwm_win">
{hdr = <KWindowHeader title={attr.title} />}
<KWindowBody>{children}</KWindowBody>
{header = <KWindowHeader title={attr.title}>{attr.closeable ? <button class="kwm_win_hdr_close" /> : null}</KWindowHeader>}
{body = <KWindowBody>{children}</KWindowBody>}
{handle = attr.resizable ? <KWindowHandle /> : null}
</div>
element.hdr = hdr;
element.handle = handle;
element.kwm = {
parts: {
header, body, handle
},
minWidth: attr.minwidth || 64,
minHeight: attr.minheight || 64
};
element.style.left = (attr.x || 32) + 'px';
element.style.top = (attr.y || 32) + 'px';
......@@ -51,11 +58,30 @@ function KWindow(attr, children) {
return element;
}
var container;
var inited = false, container = null, topmost = null;
function init() {
if (!inited) {
inject.css(require('kwm.css'));
document.body.appendChild(container = <KParent />);
inited = true;
}
}
function updateActive(win) {
if (win === topmost) return;
if (topmost) topmost.classList.remove('kwm_active');
(topmost = win).classList.add('kwm_active');
container.appendChild(topmost);
}
function makeDraggable(win, header, handle) {
function makeDraggable(win) {
var cX, cY, dX, dY;
const minWidth = win.kwm.minWidth || 64;
const minHeight = win.kwm.minHeight || 64;
const { header, handle } = win.kwm.parts || {};
var cX, cY;
function cleanup() {
document.onmouseup = null;
......@@ -79,7 +105,18 @@ function makeDraggable(win, header, handle) {
return { x: cX - e.clientX, y: cY - e.clientY };
}
(header || win).onmousedown = e => {
function doEvent(t) {
const event = new Event(t);
event.currentTarget = win;
event.path = [win];
event.srcElement = win;
event.target = win;
win.dispatchEvent(event);
}
win.addEventListener('mousedown', e => updateActive(win));
(header || win).addEventListener('mousedown', e => {
e.preventDefault();
......@@ -89,8 +126,8 @@ function makeDraggable(win, header, handle) {
e.preventDefault();
const minX = 0, minY = 0,
maxX = window.innerWidth - win.offsetWidth,
const minX = 0, minY = 0,
maxX = window.innerWidth - win.offsetWidth,
maxY = window.innerHeight - win.offsetHeight;
const delta = getDelta(e);
......@@ -104,13 +141,15 @@ function makeDraggable(win, header, handle) {
if (newX >= minX && newX <= maxX) updateClientX(e);
if (newY >= minY && newY <= maxY) updateClientY(e);
doEvent('move');
};
document.onmouseup = cleanup;
};
});
if (handle) handle.onmousedown = e => {
if (handle) handle.addEventListener('mousedown', e => {
e.preventDefault();
......@@ -120,44 +159,35 @@ function makeDraggable(win, header, handle) {
e.preventDefault();
const minW = 64, minH = 64;
const delta = getDelta(e);
const newW = win.offsetWidth - delta.x;
const newH = win.offsetHeight - delta.y;
win.style.width = Math.max(newW, minW) + 'px';
win.style.height = Math.max(newH, minH) + 'px';
win.style.width = Math.max(newW, minWidth) + 'px';
win.style.height = Math.max(newH, minHeight) + 'px';
if (newW >= minWidth) updateClientX(e);
if (newH >= minHeight) updateClientY(e);
if (newW >= minW) updateClientX(e);
if (newH >= minH) updateClientY(e);
doEvent('resize');
};
document.onmouseup = cleanup;
};
});
}
module.exports = {
function append(win) {
if (!inited) init();
makeDraggable(win);
updateActive(win);
return win;
}
module.exports = {
Window: KWindow,
init() {
if (!container) {
inject.css(require('kwm.css'));
document.body.appendChild(container = <KParent />);
}
},
makeDraggable,
append(win) {
container.appendChild(win);
makeDraggable(win, win.hdr, win.handle);
return win;
}
}
\ No newline at end of file
init, append
};
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment