You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
383 lines
7.0 KiB
Plaintext
383 lines
7.0 KiB
Plaintext
window
|
|
div(class="wrapper {focused: focused, dragged: dragged}")
|
|
.title
|
|
.title-inner { windowTitle }
|
|
.close
|
|
a(href="#") X
|
|
.outer
|
|
.inner-wrapper
|
|
.inner
|
|
view-manager(router="{opts.router}", view-prefix="openng-view")
|
|
.resizer(show="{opts.resizable}")
|
|
|
|
script.
|
|
const $ = require("jquery");
|
|
const debounce = require("debounce");
|
|
const query = require("riot-query");
|
|
|
|
require("../../lib/jquery/draggable")($);
|
|
|
|
this.mixin(query.mixin);
|
|
this.mixin(require("../../lib/riot/mixins/change"));
|
|
|
|
Object.assign(this, {
|
|
dragged: false,
|
|
focused: false,
|
|
resized: false,
|
|
width: parseInt(opts.width),
|
|
height: parseInt(opts.height),
|
|
windowTitle: opts.windowTitle,
|
|
x: parseInt(opts.x),
|
|
y: parseInt(opts.y),
|
|
z: parseInt(opts.z),
|
|
|
|
focus: () => {
|
|
this.trigger("focused");
|
|
this.change({
|
|
focused: true
|
|
});
|
|
},
|
|
defocus: () => {
|
|
this.trigger("defocused");
|
|
this.change({
|
|
focused: false
|
|
});
|
|
},
|
|
setZIndex: (index) => {
|
|
this.change({
|
|
z: index
|
|
});
|
|
},
|
|
setSize: (width, height) => {
|
|
this.change({
|
|
width: width,
|
|
height: height
|
|
});
|
|
},
|
|
setWidth: (width) => {
|
|
this.change({
|
|
width: width
|
|
});
|
|
},
|
|
setHeight: (height) => {
|
|
this.change({
|
|
height: height
|
|
});
|
|
},
|
|
setTitle: (title) => {
|
|
this.change({
|
|
windowTitle: title
|
|
});
|
|
},
|
|
reportClose: () => {
|
|
this.trigger("closing");
|
|
},
|
|
|
|
_handleMouseDown: (event) => {
|
|
this.focus();
|
|
}
|
|
});
|
|
|
|
let updatePosition = () => {
|
|
$(this.queryOne("//.wrapper")).css({
|
|
left: `${this.x}px`,
|
|
top: `${this.y}px`,
|
|
width: `${this.width}px`,
|
|
height: `${this.height}px`,
|
|
zIndex: this.z
|
|
});
|
|
}
|
|
|
|
this.on("updated", () => {
|
|
updatePosition();
|
|
});
|
|
|
|
this.on("mount", () => {
|
|
let viewManager = this.queryOne("view-manager");
|
|
let resizeHandle = $(this.queryOne("//.resizer"));
|
|
let titleBar = $(this.queryOne("//.title"));
|
|
let closeButton = $(this.queryOne("//.close"));
|
|
|
|
if (opts.url != null) {
|
|
viewManager.get(opts.url);
|
|
}
|
|
|
|
viewManager.on("switched", () => {
|
|
query(viewManager.currentView, "window-meta").forEach((windowMeta) => {
|
|
if (windowMeta.windowTitle != null) {
|
|
this.setTitle(windowMeta.windowTitle);
|
|
}
|
|
|
|
if (windowMeta.requestedWidth != null) {
|
|
this.setWidth(windowMeta.requestedWidth);
|
|
}
|
|
|
|
if (windowMeta.requestedHeight != null) {
|
|
this.setHeight(windowMeta.requestedHeight);
|
|
}
|
|
})
|
|
});
|
|
|
|
closeButton.on("click", (event) => {
|
|
event.stopPropagation();
|
|
event.preventDefault;
|
|
|
|
this.trigger("requestClose");
|
|
})
|
|
|
|
let startWidth, startHeight;
|
|
|
|
resizeHandle.draggable();
|
|
|
|
resizeHandle.on("draggable:start", (event) => {
|
|
startWidth = this.width;
|
|
startHeight = this.height;
|
|
|
|
this.change({
|
|
resized: true
|
|
});
|
|
});
|
|
|
|
resizeHandle.on("draggable:end", (event) => {
|
|
this.change({
|
|
resized: false
|
|
});
|
|
});
|
|
|
|
resizeHandle.on("draggable:move", (event, data) => {
|
|
this.change({
|
|
width: startWidth + data.offsetX,
|
|
height: startHeight + data.offsetY
|
|
});
|
|
});
|
|
|
|
|
|
let startX, startY;
|
|
|
|
titleBar.draggable();
|
|
|
|
titleBar.on("draggable:start", (event) => {
|
|
startX = this.x;
|
|
startY = this.y;
|
|
|
|
this.change({
|
|
dragged: true
|
|
});
|
|
});
|
|
|
|
titleBar.on("draggable:end", (event) => {
|
|
this.change({
|
|
dragged: false
|
|
});
|
|
});
|
|
|
|
titleBar.on("draggable:move", (event, data) => {
|
|
this.change({
|
|
x: startX + data.offsetX,
|
|
y: startY + data.offsetY
|
|
});
|
|
});
|
|
|
|
$(this.queryOne("//.wrapper")).on("mousedown", () => {
|
|
this._handleMouseDown();
|
|
});
|
|
|
|
updatePosition();
|
|
});
|
|
|
|
style(scoped, type="scss").
|
|
.noscroll
|
|
{
|
|
overflow-x: hidden !important;
|
|
overflow-y: hidden !important;
|
|
}
|
|
|
|
/* Common styling */
|
|
|
|
.wrapper
|
|
{
|
|
position: absolute;
|
|
}
|
|
|
|
@mixin shadow
|
|
{
|
|
-webkit-box-shadow: 5px 5px 10px #1a1a1a;
|
|
-moz-box-shadow: 5px 5px 10px #1a1a1a;
|
|
box-shadow: 5px 5px 10px #1a1a1a;
|
|
}
|
|
|
|
.title
|
|
{
|
|
// @include shadow;
|
|
// position: absolute;
|
|
// z-index: 2;
|
|
// left: 0px;
|
|
// right: 0px;
|
|
// top: 0px;
|
|
// cursor: default;
|
|
// text-overflow: ellipsis;
|
|
// overflow: hidden;
|
|
// white-space: nowrap;
|
|
// border-top-left-radius: 10px;
|
|
// border-top-right-radius: 10px;
|
|
// height: 16px;
|
|
// color: white;
|
|
// font-size: 14px;
|
|
// font-weight: bold;
|
|
// padding: 4px;
|
|
// padding-left: 7px;
|
|
// border-top: 1px solid #959595;
|
|
// border-right: 1px solid #959595;
|
|
// border-left: 1px solid #959595;
|
|
// background-image: -webkit-gradient(
|
|
// linear,
|
|
// left bottom,
|
|
// left top,
|
|
// color-stop(0, rgb(82,82,82)),
|
|
// color-stop(1, rgb(145,172,190))
|
|
// );
|
|
// background-image: -moz-linear-gradient(
|
|
// center bottom,
|
|
// rgb(82,82,82) 0%,
|
|
// rgb(145,172,190) 100%
|
|
// );
|
|
// filter:alpha(opacity=95);
|
|
// opacity:0.95;
|
|
}
|
|
|
|
.outer
|
|
{
|
|
// @include shadow;
|
|
// position: absolute;
|
|
// z-index: 3;
|
|
// left: 0px;
|
|
// right: 0px;
|
|
// bottom: 0px;
|
|
// font-size: 13px;
|
|
// top: 25px;
|
|
// border-bottom: 1px solid gray;
|
|
// border-right: 1px solid gray;
|
|
// border-left: 1px solid gray;
|
|
// background-color: #F7F7F0;
|
|
// filter:alpha(opacity=95);
|
|
// opacity:0.95;
|
|
}
|
|
|
|
.inner-wrapper
|
|
{
|
|
// position: absolute;
|
|
// top: 0px;
|
|
// bottom: 0px;
|
|
// left: 0px;
|
|
// right: 0px;
|
|
// overflow-y: auto;
|
|
// overflow-x: auto;
|
|
}
|
|
|
|
.inner
|
|
{
|
|
padding: 7px;
|
|
}
|
|
|
|
.close
|
|
{
|
|
float: right;
|
|
|
|
a
|
|
{
|
|
position: absolute;
|
|
right: 3px;
|
|
top: 2px;
|
|
display: block;
|
|
padding: 1px 4px;
|
|
text-decoration: none;
|
|
font-size: 12px;
|
|
border-radius: 5px;
|
|
color: white;
|
|
border: 1px solid #014D8C;
|
|
|
|
&:hover
|
|
{
|
|
background-color: #014D8C;
|
|
border: 1px solid white;
|
|
}
|
|
}
|
|
}
|
|
|
|
.resizer
|
|
{
|
|
position: absolute;
|
|
width: 12px;
|
|
height: 12px;
|
|
bottom: -6px;
|
|
right: -6px;
|
|
cursor: se-resize;
|
|
}
|
|
|
|
/* Special states */
|
|
|
|
.focused
|
|
{
|
|
.title
|
|
{
|
|
border-top: 1px solid #6262FF;
|
|
border-right: 1px solid #6262FF;
|
|
border-left: 1px solid #6262FF;
|
|
background-image: -webkit-gradient(
|
|
linear,
|
|
left bottom,
|
|
left top,
|
|
color-stop(0, rgb(0,87,179)),
|
|
color-stop(1, rgb(0,153,255))
|
|
);
|
|
background-image: -moz-linear-gradient(
|
|
center bottom,
|
|
rgb(0,87,179) 0%,
|
|
rgb(0,153,255) 100%
|
|
);
|
|
filter:alpha(opacity=85);
|
|
opacity:0.85;
|
|
}
|
|
}
|
|
|
|
@mixin noShadow
|
|
{
|
|
-webkit-box-shadow: none;
|
|
-moz-box-shadow: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
@mixin unselectable {
|
|
cursor: default;
|
|
user-select: none;
|
|
-webkit-user-select: none; /* Chrome/Safari/Opera */
|
|
-moz-user-select: none; /* Firefox */
|
|
-ms-user-select: none; /* IE/Edge */
|
|
-webkit-touch-callout: none; /* iOS Safari */
|
|
}
|
|
|
|
.dragged
|
|
{
|
|
.title
|
|
{
|
|
@include noShadow;
|
|
background-color: #0070D5;
|
|
background-image: none;
|
|
}
|
|
|
|
.outer
|
|
{
|
|
@include noShadow;
|
|
background: none;
|
|
}
|
|
|
|
.inner
|
|
{
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
|
|
.resized {
|
|
@include unselectable;
|
|
}
|