[GB.WEB.FORM]
* OPT: Compress style sheet and javascript library. * OPT: Put popup windows inside an intermediate container, so that refreshing a window does not refresh the entire page. git-svn-id: svn://localhost/gambas/trunk@7550 867c0c6c-44f3-4631-809d-bfa615b0a4ec
This commit is contained in:
Benoît Minisini
parent
60d2c8c697
commit
747f1219a2
6 changed files with 747 additions and 988 deletions
504
comp/src/gb.web.form/.hidden/Uncompressed/gw-style.css
Normal file
504
comp/src/gb.web.form/.hidden/Uncompressed/gw-style.css
Normal file
|
|
@ -0,0 +1,504 @@
|
|||
HTML, BODY {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
HTML, BODY, DIV {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
SELECT {
|
||||
min-height: 2rem;
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
INPUT {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
H1,H2,H3,P {
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
/*UL, OL {
|
||||
padding-left: 2em;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
P:first-child,UL:first-child,OL:first-child {
|
||||
margin-top: 0;
|
||||
}*/
|
||||
|
||||
.gw-button {
|
||||
padding: 0;
|
||||
font: inherit;
|
||||
padding: 0 0.25em;
|
||||
/*min-height: 1rem;*/
|
||||
}
|
||||
|
||||
.gw-button.gw-noborder {
|
||||
border: solid 1px transparent;
|
||||
background: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.gw-button.gw-noborder:hover {
|
||||
border: solid 1px #C0C0C0;
|
||||
}
|
||||
|
||||
.gw-button-image {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
.gw-button > IMG {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.gw-button > DIV {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.gw-tab-header {
|
||||
margin-bottom: -1px;
|
||||
z-index: 1;
|
||||
line-height: 2em;
|
||||
}
|
||||
|
||||
.gw-tab-header.gw-noborder {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.gw-tab {
|
||||
color: gray;
|
||||
padding: 0 0.5em;
|
||||
cursor: pointer;
|
||||
border-top: solid transparent 1px;
|
||||
border-right: solid transparent 1px;
|
||||
border-left: solid transparent 1px;
|
||||
}
|
||||
|
||||
.gw-tab:hover {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.gw-tab-selected {
|
||||
padding: 0 0.5em;
|
||||
border-left: solid #C0C0C0 1px;
|
||||
border-top: solid #C0C0C0 1px;
|
||||
border-right: solid #C0C0C0 1px;
|
||||
border-top-left-radius: 0.5em;
|
||||
border-top-right-radius: 0.5em;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.gw-tab-header.gw-noborder > div {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.gw-tab-contents {
|
||||
border: solid #C0C0C0 1px;
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
}
|
||||
|
||||
.gw-tab-contents > DIV {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.gw-tab-contents.gw-noborder {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.gw-checkbox-label,.gw-radiobutton-label {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.gw-checkbox-toggle,.gw-radiobutton-toggle {
|
||||
vertical-align: middle;
|
||||
margin: 0;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
.gw-textbox {
|
||||
min-height: 2rem;
|
||||
box-sizing: border-box;
|
||||
padding: 0 0.25em;
|
||||
}
|
||||
.gw-textbox.gw-noborder {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.gw-combobox {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
min-height: 2rem;
|
||||
}
|
||||
|
||||
.gw-combobox SELECT {
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
opacity: 0;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.gw-combobox INPUT {
|
||||
width: 100%;
|
||||
min-height: 2rem;
|
||||
box-sizing: border-box;
|
||||
padding: 0 2.25em 0 0.25em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.gw-combobox.gw-noborder INPUT {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.gw-combobox-arrow {
|
||||
display: inline-block;
|
||||
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAI0lEQVQYlWNgoAZoYGBg+I8DN+BT1MCABhrwSSIrwilJHgAAbCcP9dwIQGIAAAAASUVORK5CYII=');
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
margin-left: -2rem;
|
||||
/*pointer-events: none;*/
|
||||
vertical-align: middle;
|
||||
border: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.gw-selectbox {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
min-height: 2rem;
|
||||
}
|
||||
|
||||
.gw-selectbox SELECT {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.gw-selectbox.gw-noborder SELECT {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.gw-window {
|
||||
position: fixed;
|
||||
border: solid 1px white;
|
||||
box-shadow: 0 0 0.5em black;
|
||||
border-radius: 0.5em;
|
||||
background: white;
|
||||
z-index: 10;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.gw-window-titlebar {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
background: #2980B9;
|
||||
font-weight: bold;
|
||||
height: 2em;
|
||||
border-top-left-radius: 0.5em;
|
||||
border-top-right-radius: 0.5em;
|
||||
}
|
||||
|
||||
.gw-window-title {
|
||||
flex-grow: 1;
|
||||
color: white;
|
||||
line-height: 2em;
|
||||
padding-left: 0.5em;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.gw-window-button {
|
||||
position: absolute;
|
||||
padding: 0;
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
top: 0.25em;
|
||||
right: 0.25em;
|
||||
}
|
||||
|
||||
/*@-moz-document url-prefix() {
|
||||
.gw-window-button {
|
||||
display: inline-flex;
|
||||
};
|
||||
}*/
|
||||
|
||||
.gw-window-contents {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
flex-grow: 1;
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
.gw-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
#gw-modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: black;
|
||||
opacity: 0.05;
|
||||
}
|
||||
|
||||
.gw-textarea {
|
||||
font-family: inherit;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.gw-textarea.gw-noborder {
|
||||
border: none;
|
||||
}
|
||||
|
||||
|
||||
.gw-menu-title {
|
||||
display: inline-table;
|
||||
padding: 0.5em;
|
||||
padding-top: 0.25em;
|
||||
cursor: default;
|
||||
border-top: solid 1px transparent;
|
||||
border-left: solid 1px transparent;
|
||||
border-right: solid 1px transparent;
|
||||
/*margin-top: 0.25em;
|
||||
margin-bottom: 0.25em;*/
|
||||
}
|
||||
|
||||
.gw-menu:hover > .gw-menu-title {
|
||||
border-top: solid 1px #C0C0C0;
|
||||
border-left: solid 1px #C0C0C0;
|
||||
border-right: solid 1px #C0C0C0;
|
||||
box-shadow: 0 0 0.25em #C0C0C0;
|
||||
background: white;
|
||||
z-index: 1002;
|
||||
}
|
||||
|
||||
.gw-submenu {
|
||||
display: none;
|
||||
position: absolute;
|
||||
border: solid 1px #C0C0C0;
|
||||
background: white;
|
||||
box-shadow: 0 0.125em 0.25em #C0C0C0;
|
||||
margin-top: -0.25em;
|
||||
z-index: 1003;
|
||||
}
|
||||
|
||||
.gw-menuitem > .gw-menu > .gw-submenu {
|
||||
margin-top: 0;
|
||||
top: 0;
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.gw-menu:hover > .gw-submenu {
|
||||
display: table;
|
||||
}
|
||||
|
||||
.gw-menu-tape {
|
||||
display: none;
|
||||
position: relative;
|
||||
background: white;
|
||||
z-index: 1004;
|
||||
height: 4px;
|
||||
margin-top: -4px;
|
||||
margin-left: 1px;
|
||||
margin-right: 1px;
|
||||
top: -2px;
|
||||
}
|
||||
|
||||
.gw-menu:hover > .gw-menu-tape {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.gw-submenu > div:hover {
|
||||
background: #E0E0E0;
|
||||
}
|
||||
|
||||
.gw-menuitem {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
}
|
||||
|
||||
.gw-menuitem > div {
|
||||
display: table-cell !important;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.gw-menuitem-text {
|
||||
flex-grow: 1;
|
||||
padding: 0.125em 0.25em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.gw-menuitem-icon {
|
||||
padding: 0.125em 0.25em;
|
||||
}
|
||||
|
||||
.gw-menuitem-icon > IMG {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.gw-menuitem-shortcut {
|
||||
text-align: right;
|
||||
padding: 0.125em 1em;
|
||||
}
|
||||
|
||||
.gw-separator {
|
||||
position: relative;
|
||||
padding: 0 !important;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.gw-separator-hline {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
align-items: center;
|
||||
height: inherit;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.gw-separator-hline > div {
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
background: #C0C0C0;
|
||||
}
|
||||
|
||||
.gw-separator-vline {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
width: inherit;
|
||||
}
|
||||
|
||||
.gw-separator-vline > div {
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
background: #C0C0C0;
|
||||
}
|
||||
|
||||
.gw-submenu > div {
|
||||
display: flex !important;
|
||||
cursor: default;
|
||||
padding: 0.25em 1em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.gw-submenu > .gw-menuitem {
|
||||
display: table-row !important;
|
||||
table-layout: fixed;
|
||||
cursor: default;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.gw-submenu > .gw-separator {
|
||||
display: table-row !important;
|
||||
cursor: default;
|
||||
margin: 0;
|
||||
width: auto;
|
||||
height: 1em;
|
||||
}
|
||||
|
||||
.gw-menuitem > .gw-menu {
|
||||
display: table-cell !important;
|
||||
position: relative;
|
||||
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAJElEQVQYlWNgQIAGBgLgPyFF/wkp+o9NERMhe0m2AqckAy5JALuADHot/KmNAAAAAElFTkSuQmCC');
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
width: 1em;
|
||||
}
|
||||
|
||||
.gw-spinbox.gw-noborder {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.gw-expander-header + DIV {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
.gw-expander-header > IMG {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.gw-expander-header > DIV {
|
||||
display: inline-table;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.gw-expander-border {
|
||||
border: solid 1px #C0C0C0;
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
.gw-table {
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
min-height: 4em;
|
||||
border: solid 1px #C0C0C0;
|
||||
}
|
||||
|
||||
.gw-table.gw-noborder {
|
||||
border: none;
|
||||
}
|
||||
|
||||
/*.gw-table-header {
|
||||
height: 1.5em;
|
||||
background-color: yellow;
|
||||
}*/
|
||||
|
||||
.gw-table-contents {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.gw-table > DIV > TABLE {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.gw-table > DIV > TABLE > THEAD > TR > TH {
|
||||
text-align: left;
|
||||
background-color: #E0E0E0;
|
||||
padding: 0.25em 0.5em;
|
||||
vertical-align: top;
|
||||
border-bottom: solid 1px #C0C0C0;
|
||||
}
|
||||
|
||||
.gw-table > DIV > TABLE > THEAD > TR > TH:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.gw-table > DIV > TABLE > TBODY > TR > TD {
|
||||
/*border-right: solid 1px #C0C0C0;*/
|
||||
padding: 0.25em 0.5em;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/*.gw-table > DIV > TABLE > TBODY > TR > TD:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.gw-table > DIV > TABLE > TBODY > TR:last-child > TD {
|
||||
border-bottom: solid 1px #C0C0C0;
|
||||
}*/
|
||||
|
||||
.gw-table > DIV > TABLE > TBODY > TR:nth-child(even) {
|
||||
background-color: #F0F0F0;
|
||||
}
|
||||
|
|
@ -129,7 +129,7 @@ gw = {
|
|||
{
|
||||
zIndex: 0,
|
||||
|
||||
open: function(id, resizable, modal)
|
||||
open: function(id, resizable, modal, minw, minh)
|
||||
{
|
||||
gw.window.close(id);
|
||||
|
||||
|
|
@ -146,6 +146,20 @@ gw = {
|
|||
|
||||
$(id).gw_resizable = resizable;
|
||||
$(id).gw_modal = modal;
|
||||
|
||||
if (minw != undefined)
|
||||
{
|
||||
$(id).gw_minw = minw;
|
||||
$(id).gw_minh = minh;
|
||||
}
|
||||
else
|
||||
{
|
||||
$(id).gw_minw = $(id).offsetWidth;
|
||||
$(id).gw_minh = $(id).offsetHeight;
|
||||
}
|
||||
|
||||
//console.log('gw.window.open: minw = ' + $(id).gw_minw + ' minh = ' + $(id).gw_minh);
|
||||
|
||||
// Touch events
|
||||
//pane.addEventListener('touchstart', onTouchDown);
|
||||
//document.addEventListener('touchmove', onTouchMove);
|
||||
|
|
@ -370,7 +384,7 @@ gw = {
|
|||
animate: function()
|
||||
{
|
||||
var id, elt, c, e, x, y, w, h;
|
||||
var minWidth = 120;
|
||||
var minWidth;
|
||||
var minHeight;
|
||||
|
||||
//requestAnimationFrame(gw.window.animate);
|
||||
|
|
@ -379,7 +393,8 @@ gw = {
|
|||
if (!c) return;
|
||||
|
||||
elt = $(c.id);
|
||||
minHeight = $(c.id + '-titlebar').offsetHeight + 2;
|
||||
minWidth = elt.gw_minw;
|
||||
minHeight = elt.gw_minh; //$(c.id + '-titlebar').offsetHeight + 2 + elt.gw_minh;
|
||||
e = gw.window.downEvent;
|
||||
|
||||
if (c && c.isResizing && e)
|
||||
|
|
|
|||
|
|
@ -845,6 +845,10 @@ _AddJavascript
|
|||
M
|
||||
|
||||
(sStr)s
|
||||
_new
|
||||
m
|
||||
|
||||
|
||||
_ready
|
||||
m
|
||||
|
||||
|
|
@ -873,6 +877,10 @@ Show
|
|||
m
|
||||
|
||||
|
||||
_GetWindowContainer
|
||||
m
|
||||
WebContainer
|
||||
|
||||
Move
|
||||
m
|
||||
|
||||
|
|
|
|||
|
|
@ -38,6 +38,8 @@ Private $sX As String
|
|||
Private $sY As String
|
||||
Private $sWidth As String
|
||||
Private $sHeight As String
|
||||
|
||||
Private $hWindowContainer As WebContainer
|
||||
'Private $bCentered As Boolean
|
||||
|
||||
Static Public Sub Main()
|
||||
|
|
@ -132,6 +134,13 @@ Static Public Sub _AddJavascript(sStr As String)
|
|||
|
||||
End
|
||||
|
||||
Public Sub _new()
|
||||
|
||||
$hWindowContainer = New WebContainer(Me)
|
||||
|
||||
End
|
||||
|
||||
|
||||
Public Sub _ready()
|
||||
|
||||
Me._InitProperties
|
||||
|
|
@ -361,7 +370,7 @@ Public Sub Show()
|
|||
|
||||
If _Window Then Return
|
||||
|
||||
hWindow = New WebWindow(WebForm._Current)
|
||||
hWindow = New WebWindow(WebForm._Current._GetWindowContainer())
|
||||
hWindow.Child = Me
|
||||
hWindow.Resizable = $bResizable
|
||||
hWindow.Move($sX, $sY, $sWidth, $sHeight)
|
||||
|
|
@ -491,3 +500,9 @@ Private Sub Height_Write(Value As String)
|
|||
|
||||
End
|
||||
|
||||
Public Sub _GetWindowContainer() As WebContainer
|
||||
|
||||
Return $hWindowContainer
|
||||
|
||||
End
|
||||
|
||||
|
|
|
|||
|
|
@ -1,503 +1,77 @@
|
|||
HTML, BODY {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
HTML, BODY, DIV {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
SELECT {
|
||||
min-height: 2rem;
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
INPUT {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
H1,H2,H3,P {
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
/*UL, OL {
|
||||
padding-left: 2em;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
P:first-child,UL:first-child,OL:first-child {
|
||||
margin-top: 0;
|
||||
}*/
|
||||
|
||||
.gw-button {
|
||||
padding: 0;
|
||||
font: inherit;
|
||||
padding: 0 0.25em;
|
||||
/*min-height: 1rem;*/
|
||||
}
|
||||
|
||||
.gw-button.gw-noborder {
|
||||
border: solid 1px transparent;
|
||||
background: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.gw-button.gw-noborder:hover {
|
||||
border: solid 1px #C0C0C0;
|
||||
}
|
||||
|
||||
.gw-button-image {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
.gw-button > IMG {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.gw-button > DIV {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.gw-tab-header {
|
||||
margin-bottom: -1px;
|
||||
z-index: 1;
|
||||
line-height: 2em;
|
||||
}
|
||||
|
||||
.gw-tab-header.gw-noborder {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.gw-tab {
|
||||
color: gray;
|
||||
padding: 0 0.5em;
|
||||
cursor: pointer;
|
||||
border-top: solid transparent 1px;
|
||||
border-right: solid transparent 1px;
|
||||
border-left: solid transparent 1px;
|
||||
}
|
||||
|
||||
.gw-tab:hover {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.gw-tab-selected {
|
||||
padding: 0 0.5em;
|
||||
border-left: solid #C0C0C0 1px;
|
||||
border-top: solid #C0C0C0 1px;
|
||||
border-right: solid #C0C0C0 1px;
|
||||
border-top-left-radius: 0.5em;
|
||||
border-top-right-radius: 0.5em;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.gw-tab-header.gw-noborder > div {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.gw-tab-contents {
|
||||
border: solid #C0C0C0 1px;
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
}
|
||||
|
||||
.gw-tab-contents > DIV {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.gw-tab-contents.gw-noborder {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.gw-checkbox-label,.gw-radiobutton-label {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.gw-checkbox-toggle,.gw-radiobutton-toggle {
|
||||
vertical-align: middle;
|
||||
margin: 0;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
.gw-textbox {
|
||||
min-height: 2rem;
|
||||
box-sizing: border-box;
|
||||
padding: 0 0.25em;
|
||||
}
|
||||
.gw-textbox.gw-noborder {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.gw-combobox {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
min-height: 2rem;
|
||||
}
|
||||
|
||||
.gw-combobox SELECT {
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
opacity: 0;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.gw-combobox INPUT {
|
||||
width: 100%;
|
||||
min-height: 2rem;
|
||||
box-sizing: border-box;
|
||||
padding: 0 2.25em 0 0.25em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.gw-combobox.gw-noborder INPUT {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.gw-combobox-arrow {
|
||||
display: inline-block;
|
||||
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAI0lEQVQYlWNgoAZoYGBg+I8DN+BT1MCABhrwSSIrwilJHgAAbCcP9dwIQGIAAAAASUVORK5CYII=');
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
margin-left: -2rem;
|
||||
/*pointer-events: none;*/
|
||||
vertical-align: middle;
|
||||
border: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.gw-selectbox {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
min-height: 2rem;
|
||||
}
|
||||
|
||||
.gw-selectbox SELECT {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.gw-selectbox.gw-noborder SELECT {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.gw-window {
|
||||
position: fixed;
|
||||
border: solid 1px white;
|
||||
box-shadow: 0 0 0.5em black;
|
||||
border-radius: 0.5em;
|
||||
background: white;
|
||||
z-index: 10;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.gw-window-titlebar {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
background: #2980B9;
|
||||
font-weight: bold;
|
||||
height: 2em;
|
||||
border-top-left-radius: 0.5em;
|
||||
border-top-right-radius: 0.5em;
|
||||
}
|
||||
|
||||
.gw-window-title {
|
||||
flex-grow: 1;
|
||||
color: white;
|
||||
line-height: 2em;
|
||||
padding-left: 0.5em;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.gw-window-button {
|
||||
padding: 0;
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
top: 0.25em;
|
||||
right: 0.25em;
|
||||
}
|
||||
|
||||
/*@-moz-document url-prefix() {
|
||||
.gw-window-button {
|
||||
display: inline-flex;
|
||||
};
|
||||
}*/
|
||||
|
||||
.gw-window-contents {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
flex-grow: 1;
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
.gw-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
#gw-modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: black;
|
||||
opacity: 0.05;
|
||||
}
|
||||
|
||||
.gw-textarea {
|
||||
font-family: inherit;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.gw-textarea.gw-noborder {
|
||||
border: none;
|
||||
}
|
||||
|
||||
|
||||
.gw-menu-title {
|
||||
display: inline-table;
|
||||
padding: 0.5em;
|
||||
padding-top: 0.25em;
|
||||
cursor: default;
|
||||
border-top: solid 1px transparent;
|
||||
border-left: solid 1px transparent;
|
||||
border-right: solid 1px transparent;
|
||||
/*margin-top: 0.25em;
|
||||
margin-bottom: 0.25em;*/
|
||||
}
|
||||
|
||||
.gw-menu:hover > .gw-menu-title {
|
||||
border-top: solid 1px #C0C0C0;
|
||||
border-left: solid 1px #C0C0C0;
|
||||
border-right: solid 1px #C0C0C0;
|
||||
box-shadow: 0 0 0.25em #C0C0C0;
|
||||
background: white;
|
||||
z-index: 1002;
|
||||
}
|
||||
|
||||
.gw-submenu {
|
||||
display: none;
|
||||
position: absolute;
|
||||
border: solid 1px #C0C0C0;
|
||||
background: white;
|
||||
box-shadow: 0 0.125em 0.25em #C0C0C0;
|
||||
margin-top: -0.25em;
|
||||
z-index: 1003;
|
||||
}
|
||||
|
||||
.gw-menuitem > .gw-menu > .gw-submenu {
|
||||
margin-top: 0;
|
||||
top: 0;
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.gw-menu:hover > .gw-submenu {
|
||||
display: table;
|
||||
}
|
||||
|
||||
.gw-menu-tape {
|
||||
display: none;
|
||||
position: relative;
|
||||
background: white;
|
||||
z-index: 1004;
|
||||
height: 4px;
|
||||
margin-top: -4px;
|
||||
margin-left: 1px;
|
||||
margin-right: 1px;
|
||||
top: -2px;
|
||||
}
|
||||
|
||||
.gw-menu:hover > .gw-menu-tape {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.gw-submenu > div:hover {
|
||||
background: #E0E0E0;
|
||||
}
|
||||
|
||||
.gw-menuitem {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
}
|
||||
|
||||
.gw-menuitem > div {
|
||||
display: table-cell !important;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.gw-menuitem-text {
|
||||
flex-grow: 1;
|
||||
padding: 0.125em 0.25em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.gw-menuitem-icon {
|
||||
padding: 0.125em 0.25em;
|
||||
}
|
||||
|
||||
.gw-menuitem-icon > IMG {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.gw-menuitem-shortcut {
|
||||
text-align: right;
|
||||
padding: 0.125em 1em;
|
||||
}
|
||||
|
||||
.gw-separator {
|
||||
position: relative;
|
||||
padding: 0 !important;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.gw-separator-hline {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
align-items: center;
|
||||
height: inherit;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.gw-separator-hline > div {
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
background: #C0C0C0;
|
||||
}
|
||||
|
||||
.gw-separator-vline {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
width: inherit;
|
||||
}
|
||||
|
||||
.gw-separator-vline > div {
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
background: #C0C0C0;
|
||||
}
|
||||
|
||||
.gw-submenu > div {
|
||||
display: flex !important;
|
||||
cursor: default;
|
||||
padding: 0.25em 1em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.gw-submenu > .gw-menuitem {
|
||||
display: table-row !important;
|
||||
table-layout: fixed;
|
||||
cursor: default;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.gw-submenu > .gw-separator {
|
||||
display: table-row !important;
|
||||
cursor: default;
|
||||
margin: 0;
|
||||
width: auto;
|
||||
height: 1em;
|
||||
}
|
||||
|
||||
.gw-menuitem > .gw-menu {
|
||||
display: table-cell !important;
|
||||
position: relative;
|
||||
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAJElEQVQYlWNgQIAGBgLgPyFF/wkp+o9NERMhe0m2AqckAy5JALuADHot/KmNAAAAAElFTkSuQmCC');
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
width: 1em;
|
||||
}
|
||||
|
||||
.gw-spinbox.gw-noborder {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.gw-expander-header + DIV {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
.gw-expander-header > IMG {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.gw-expander-header > DIV {
|
||||
display: inline-table;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.gw-expander-border {
|
||||
border: solid 1px #C0C0C0;
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
.gw-table {
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
min-height: 4em;
|
||||
border: solid 1px #C0C0C0;
|
||||
}
|
||||
|
||||
.gw-table.gw-noborder {
|
||||
border: none;
|
||||
}
|
||||
|
||||
/*.gw-table-header {
|
||||
height: 1.5em;
|
||||
background-color: yellow;
|
||||
}*/
|
||||
|
||||
.gw-table-contents {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.gw-table > DIV > TABLE {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.gw-table > DIV > TABLE > THEAD > TR > TH {
|
||||
text-align: left;
|
||||
background-color: #E0E0E0;
|
||||
padding: 0.25em 0.5em;
|
||||
vertical-align: top;
|
||||
border-bottom: solid 1px #C0C0C0;
|
||||
}
|
||||
|
||||
.gw-table > DIV > TABLE > THEAD > TR > TH:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.gw-table > DIV > TABLE > TBODY > TR > TD {
|
||||
/*border-right: solid 1px #C0C0C0;*/
|
||||
padding: 0.25em 0.5em;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/*.gw-table > DIV > TABLE > TBODY > TR > TD:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.gw-table > DIV > TABLE > TBODY > TR:last-child > TD {
|
||||
border-bottom: solid 1px #C0C0C0;
|
||||
}*/
|
||||
|
||||
.gw-table > DIV > TABLE > TBODY > TR:nth-child(even) {
|
||||
background-color: #F0F0F0;
|
||||
}
|
||||
HTML,BODY{margin:0;padding:0;height:100%;width:100%;}
|
||||
HTML,BODY,DIV{box-sizing:border-box;}
|
||||
SELECT{min-height:2rem;font-size:inherit;}
|
||||
INPUT{font:inherit;}
|
||||
H1,H2,H3,P{margin-top:0.5rem;margin-bottom:0.25rem;}
|
||||
.gw-button{padding:0;font:inherit;padding:0 0.25em;}
|
||||
.gw-button.gw-noborder{border:solid 1px transparent;background:none;padding:0;}
|
||||
.gw-button.gw-noborder:hover{border:solid 1px #C0C0C0;}
|
||||
.gw-button-image{margin-right:0.5em;}
|
||||
.gw-button>IMG{vertical-align:middle;}
|
||||
.gw-button>DIV{display:inline-block;vertical-align:middle;}
|
||||
.gw-tab-header{margin-bottom:-1px;z-index:1;line-height:2em;}
|
||||
.gw-tab-header.gw-noborder{margin-bottom:0;}
|
||||
.gw-tab{color:gray;padding:0 0.5em;cursor:pointer;border-top:solid transparent 1px;border-right:solid transparent 1px;border-left:solid transparent 1px;}
|
||||
.gw-tab:hover{color:black;}
|
||||
.gw-tab-selected{padding:0 0.5em;border-left:solid #C0C0C0 1px;border-top:solid #C0C0C0 1px;border-right:solid #C0C0C0 1px;border-top-left-radius:0.5em;border-top-right-radius:0.5em;background:white;}
|
||||
.gw-tab-header.gw-noborder>div{border:none;}
|
||||
.gw-tab-contents{border:solid #C0C0C0 1px;flex-grow:1;display:flex;flex-flow:column;}
|
||||
.gw-tab-contents>DIV{flex-grow:1;}
|
||||
.gw-tab-contents.gw-noborder{border:none;}
|
||||
.gw-checkbox-label,.gw-radiobutton-label{vertical-align:middle;}
|
||||
.gw-checkbox-toggle,.gw-radiobutton-toggle{vertical-align:middle;margin:0;margin-right:0.5em;}
|
||||
.gw-textbox{min-height:2rem;box-sizing:border-box;padding:0 0.25em;}
|
||||
.gw-textbox.gw-noborder{border:none;}
|
||||
.gw-combobox{display:inline-block;position:relative;min-height:2rem;}
|
||||
.gw-combobox SELECT{height:100%;z-index:1;opacity:0;float:right;}
|
||||
.gw-combobox INPUT{width:100%;min-height:2rem;box-sizing:border-box;padding:0 2.25em 0 0.25em;vertical-align:middle;}
|
||||
.gw-combobox.gw-noborder INPUT{border:none;}
|
||||
.gw-combobox-arrow{display:inline-block;background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAI0lEQVQYlWNgoAZoYGBg+I8DN+BT1MCABhrwSSIrwilJHgAAbCcP9dwIQGIAAAAASUVORK5CYII=');background-position:center;background-repeat:no-repeat;height:2rem;width:2rem;margin-left:-2rem;vertical-align:middle;border:none;overflow:hidden;}
|
||||
.gw-selectbox{display:inline-block;position:relative;min-height:2rem;}
|
||||
.gw-selectbox SELECT{width:100%;}
|
||||
.gw-selectbox.gw-noborder SELECT{border:none;}
|
||||
.gw-window{position:fixed;border:solid 1px white;box-shadow:0 0 0.5em black;border-radius:0.5em;background:white;z-index:10;overflow:hidden;}
|
||||
.gw-window-titlebar{display:flex;flex-flow:row;background:#2980B9;font-weight:bold;height:2em;border-top-left-radius:0.5em;border-top-right-radius:0.5em;}
|
||||
.gw-window-title{flex-grow:1;color:white;line-height:2em;padding-left:0.5em;pointer-events:none;}
|
||||
.gw-window-button{position:absolute;padding:0;width:1.5em;height:1.5em;top:0.25em;right:0.25em;}
|
||||
.gw-window-contents{display:flex;flex-flow:column;flex-grow:1;padding:0.5em;}
|
||||
.gw-label{display:flex;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
|
||||
#gw-modal{display:none;position:fixed;left:0;right:0;width:100%;height:100%;background:black;opacity:0.05;}
|
||||
.gw-textarea{font-family:inherit;resize:none;}
|
||||
.gw-textarea.gw-noborder{border:none;}
|
||||
.gw-menu-title{display:inline-table;padding:0.5em;padding-top:0.25em;cursor:default;border-top:solid 1px transparent;border-left:solid 1px transparent;border-right:solid 1px transparent;}
|
||||
.gw-menu:hover>.gw-menu-title{border-top:solid 1px #C0C0C0;border-left:solid 1px #C0C0C0;border-right:solid 1px #C0C0C0;box-shadow:0 0 0.25em #C0C0C0;background:white;z-index:1002;}
|
||||
.gw-submenu{display:none;position:absolute;border:solid 1px #C0C0C0;background:white;box-shadow:0 0.125em 0.25em #C0C0C0;margin-top:-0.25em;z-index:1003;}
|
||||
.gw-menuitem>.gw-menu>.gw-submenu{margin-top:0;top:0;left:100%;}
|
||||
.gw-menu:hover>.gw-submenu{display:table;}
|
||||
.gw-menu-tape{display:none;position:relative;background:white;z-index:1004;height:4px;margin-top:-4px;margin-left:1px;margin-right:1px;top:-2px;}
|
||||
.gw-menu:hover>.gw-menu-tape{display:block;}
|
||||
.gw-submenu>div:hover{background:#E0E0E0;}
|
||||
.gw-menuitem{display:flex;flex-flow:column;}
|
||||
.gw-menuitem>div{display:table-cell!important;vertical-align:middle;}
|
||||
.gw-menuitem-text{flex-grow:1;padding:0.125em 0.25em;white-space:nowrap;}
|
||||
.gw-menuitem-icon{padding:0.125em 0.25em;}
|
||||
.gw-menuitem-icon>IMG{vertical-align:middle;}
|
||||
.gw-menuitem-shortcut{text-align:right;padding:0.125em 1em;}
|
||||
.gw-separator{position:relative;padding:0!important;pointer-events:none;}
|
||||
.gw-separator-hline{position:absolute;display:flex;flex-flow:row;align-items:center;height:inherit;width:100%;}
|
||||
.gw-separator-hline>div{height:1px;width:100%;background:#C0C0C0;}
|
||||
.gw-separator-vline{position:absolute;display:flex;flex-flow:column;align-items:center;height:100%;width:inherit;}
|
||||
.gw-separator-vline>div{width:1px;height:100%;background:#C0C0C0;}
|
||||
.gw-submenu>div{display:flex!important;cursor:default;padding:0.25em 1em;margin:0;}
|
||||
.gw-submenu>.gw-menuitem{display:table-row!important;table-layout:fixed;cursor:default;padding:0;margin:0;}
|
||||
.gw-submenu>.gw-separator{display:table-row!important;cursor:default;margin:0;width:auto;height:1em;}
|
||||
.gw-menuitem>.gw-menu{display:table-cell!important;position:relative;background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAJElEQVQYlWNgQIAGBgLgPyFF/wkp+o9NERMhe0m2AqckAy5JALuADHot/KmNAAAAAElFTkSuQmCC');background-position:center;background-repeat:no-repeat;width:1em;}
|
||||
.gw-spinbox.gw-noborder{border:none;}
|
||||
.gw-expander-header+DIV{margin-top:0.5em;}
|
||||
.gw-expander-header>IMG{vertical-align:middle;}
|
||||
.gw-expander-header>DIV{display:inline-table;vertical-align:middle;}
|
||||
.gw-expander-border{border:solid 1px #C0C0C0;padding:0.5em;}
|
||||
.gw-table{position:relative;overflow:auto;min-height:4em;border:solid 1px #C0C0C0;}
|
||||
.gw-table.gw-noborder{border:none;}
|
||||
.gw-table-contents{position:absolute;top:0;left:0;right:0;bottom:0;}
|
||||
.gw-table>DIV>TABLE{border-collapse:collapse;}
|
||||
.gw-table>DIV>TABLE>THEAD>TR>TH{text-align:left;background-color:#E0E0E0;padding:0.25em 0.5em;vertical-align:top;border-bottom:solid 1px #C0C0C0;}
|
||||
.gw-table>DIV>TABLE>THEAD>TR>TH:last-child{border-right:none;}
|
||||
.gw-table>DIV>TABLE>TBODY>TR>TD{padding:0.25em 0.5em;vertical-align:top;}
|
||||
.gw-table>DIV>TABLE>TBODY>TR:nth-child(even){background-color:#F0F0F0;}
|
||||
|
|
|
|||
|
|
@ -1,482 +1,125 @@
|
|||
function $(a)
|
||||
{
|
||||
return document.getElementById(a);
|
||||
}
|
||||
|
||||
gw = {
|
||||
|
||||
timers: {},
|
||||
windows: [],
|
||||
form: '',
|
||||
debug: false,
|
||||
|
||||
log: function(msg)
|
||||
{
|
||||
if (gw.debug)
|
||||
console.log(msg);
|
||||
},
|
||||
|
||||
send: function(command)
|
||||
{
|
||||
var xhr = new XMLHttpRequest();
|
||||
gw.log(command);
|
||||
xhr.open('GET', $root + '/' + encodeURIComponent(gw.form) + '/x?c=' + encodeURIComponent(JSON.stringify(command)), true);
|
||||
xhr.onreadystatechange = function() {
|
||||
//console.log('state = ' + xhr.readyState + ' / status = ' + xhr.status);
|
||||
if (xhr.readyState == 4 && xhr.status == 200 && xhr.responseText)
|
||||
{
|
||||
gw.active = document.activeElement.id;
|
||||
if (gw.active)
|
||||
gw.selection = gw.getSelection($(gw.active));
|
||||
else
|
||||
gw.selection = undefined;
|
||||
|
||||
if (gw.debug)
|
||||
console.log(xhr.responseText);
|
||||
|
||||
eval(xhr.responseText);
|
||||
|
||||
if (gw.active)
|
||||
{
|
||||
if ($(gw.active))
|
||||
{
|
||||
$(gw.active).focus();
|
||||
gw.setSelection($(gw.active), gw.selection);
|
||||
}
|
||||
else
|
||||
gw.active = document.activeElement.id;
|
||||
}
|
||||
}
|
||||
};
|
||||
xhr.send(null);
|
||||
},
|
||||
|
||||
raise: function(id, event, args)
|
||||
{
|
||||
gw.send(['raise', id, event, args]);
|
||||
},
|
||||
|
||||
update: function(id, prop, value)
|
||||
{
|
||||
gw.send(['update', id, prop, value]);
|
||||
},
|
||||
|
||||
getSelection: function(o)
|
||||
{
|
||||
var start, end;
|
||||
|
||||
try
|
||||
{
|
||||
if (o.createTextRange)
|
||||
{
|
||||
var r = document.selection.createRange().duplicate();
|
||||
r.moveEnd('character', o.value.length)
|
||||
if (r.text == '')
|
||||
start = o.value.length;
|
||||
else
|
||||
start = o.value.lastIndexOf(r.text);
|
||||
r.moveStart('character', -o.value.length);
|
||||
end = r.text.length;
|
||||
return [start, end];
|
||||
}
|
||||
|
||||
if (o.selectionStart && o.selectionEnd)
|
||||
return [o.selectionStart, o.selectionEnd];
|
||||
}
|
||||
catch(e) {};
|
||||
|
||||
return undefined;
|
||||
},
|
||||
|
||||
setSelection: function(o, sel)
|
||||
{
|
||||
if (sel)
|
||||
{
|
||||
if (o.setSelectionRange)
|
||||
try { o.setSelectionRange(sel[0], sel[1]) } catch(e) {};
|
||||
}
|
||||
},
|
||||
|
||||
setFocus: function(id)
|
||||
{
|
||||
$(id).focus();
|
||||
gw.active = document.activeElement.id;
|
||||
gw.selection = undefined;
|
||||
},
|
||||
|
||||
resizeComboBox: function(id)
|
||||
{
|
||||
$(id + '-select').onmouseover = function() { $(id + '-select').style.width = $(id).offsetWidth + 'px'; }
|
||||
},
|
||||
|
||||
addTimer: function(id, delay)
|
||||
{
|
||||
gw.removeTimer(id);
|
||||
gw.timers[id] = setInterval(function() { gw.raise(id, 'timer'); }, delay);
|
||||
},
|
||||
|
||||
removeTimer: function(id)
|
||||
{
|
||||
var t = gw.timers[id];
|
||||
if (t)
|
||||
{
|
||||
clearInterval(gw.timers[id]);
|
||||
gw.timers[id] = undefined;
|
||||
}
|
||||
},
|
||||
|
||||
window:
|
||||
{
|
||||
zIndex: 0,
|
||||
|
||||
open: function(id, resizable, modal, minw, minh)
|
||||
{
|
||||
gw.window.close(id);
|
||||
|
||||
if (gw.windows.length == 0)
|
||||
{
|
||||
document.addEventListener('mousemove', gw.window.onMove);
|
||||
document.addEventListener('mouseup', gw.window.onUp);
|
||||
gw.log('document.addEventListener');
|
||||
}
|
||||
|
||||
gw.windows.push(id);
|
||||
|
||||
$(id).addEventListener('mousedown', gw.window.onMouseDown);
|
||||
|
||||
$(id).gw_resizable = resizable;
|
||||
$(id).gw_modal = modal;
|
||||
|
||||
if (minw != undefined)
|
||||
{
|
||||
$(id).gw_minw = minw;
|
||||
$(id).gw_minh = minh;
|
||||
}
|
||||
else
|
||||
{
|
||||
$(id).gw_minw = $(id).offsetWidth;
|
||||
$(id).gw_minh = $(id).offsetHeight;
|
||||
}
|
||||
|
||||
//console.log('gw.window.open: minw = ' + $(id).gw_minw + ' minh = ' + $(id).gw_minh);
|
||||
|
||||
// Touch events
|
||||
//pane.addEventListener('touchstart', onTouchDown);
|
||||
//document.addEventListener('touchmove', onTouchMove);
|
||||
//document.addEventListener('touchend', onTouchEnd);
|
||||
|
||||
gw.window.updateTitleBars();
|
||||
gw.window.refresh();
|
||||
},
|
||||
|
||||
close: function(id)
|
||||
{
|
||||
var i;
|
||||
|
||||
$(id).removeEventListener('mousedown', gw.window.onMouseDown);
|
||||
|
||||
i = gw.windows.indexOf(id);
|
||||
if (i >= 0)
|
||||
{
|
||||
gw.windows.splice(i, 1);
|
||||
gw.window.refresh();
|
||||
}
|
||||
},
|
||||
|
||||
refresh: function()
|
||||
{
|
||||
var i = 0;
|
||||
|
||||
while (i < gw.windows.length)
|
||||
{
|
||||
if ($(gw.windows[i]))
|
||||
{
|
||||
$(gw.windows[i]).style.zIndex = 11 + i * 2;
|
||||
i++;
|
||||
}
|
||||
else
|
||||
gw.windows.splice(i, 1);
|
||||
}
|
||||
|
||||
gw.window.updateModal();
|
||||
|
||||
if (gw.windows.length == 0)
|
||||
{
|
||||
gw.log('document.removeEventListener');
|
||||
document.removeEventListener('mousemove', gw.window.onMove);
|
||||
document.removeEventListener('mouseup', gw.window.onUp);
|
||||
}
|
||||
},
|
||||
|
||||
updateTitleBars: function()
|
||||
{
|
||||
var i;
|
||||
|
||||
for (i = 0; i < gw.windows.length - 1; i++)
|
||||
$(gw.windows[i] + '-titlebar').style.backgroundColor = '#C0C0C0';
|
||||
|
||||
$(gw.windows[gw.windows.length - 1] + '-titlebar').style.backgroundColor = '';
|
||||
},
|
||||
|
||||
raise: function(id, send)
|
||||
{
|
||||
var i = gw.windows.indexOf(id);
|
||||
if (i < 0)
|
||||
return;
|
||||
|
||||
gw.windows.splice(i, 1);
|
||||
gw.windows.push(id);
|
||||
|
||||
for (i = 0; i < gw.windows.length; i++)
|
||||
$(gw.windows[i]).style.zIndex = 11 + i * 2;
|
||||
|
||||
gw.window.updateTitleBars();
|
||||
|
||||
if (send)
|
||||
gw.update('', '#windows', gw.windows);
|
||||
},
|
||||
|
||||
updateModal: function()
|
||||
{
|
||||
var i, elt = $('gw-modal');
|
||||
|
||||
for (i = gw.windows.length - 1; i >= 0; i--)
|
||||
{
|
||||
if ($(gw.windows[i]).gw_modal)
|
||||
{
|
||||
gw.window.zIndex = 10 + i * 2;
|
||||
elt.style.zIndex = 10 + i * 2;
|
||||
elt.style.display = 'block';
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
gw.window.zIndex = 0;
|
||||
elt.style.display = 'none';
|
||||
},
|
||||
|
||||
center: function(id)
|
||||
{
|
||||
$(id).style.left = ((window.innerWidth - $(id).offsetWidth) / 2 + 0) + 'px';
|
||||
$(id).style.top = ((window.innerHeight - $(id).offsetHeight) / 2 + 0) + 'px';
|
||||
gw.window.updateGeometry(id);
|
||||
},
|
||||
|
||||
onMouseDown: function(e)
|
||||
{
|
||||
gw.window.onDown(e);
|
||||
},
|
||||
|
||||
onDown: function(e)
|
||||
{
|
||||
var c;
|
||||
|
||||
gw.window.context = undefined;
|
||||
|
||||
if (e.target.className == 'gw-window-button')
|
||||
return;
|
||||
|
||||
gw.window.onMove(e);
|
||||
|
||||
c = gw.window.context;
|
||||
if (c && (c.isMoving || c.isResizing))
|
||||
{
|
||||
gw.window.raise(c.id);
|
||||
gw.window.downEvent = e;
|
||||
e.preventDefault();
|
||||
}
|
||||
},
|
||||
|
||||
onMove(e)
|
||||
{
|
||||
var i, id, elt, b, x, y, bx, by, bw, bh;
|
||||
var onTopEdge, onLeftEdge, onRightEdge, onBottomEdge, isResizing;
|
||||
var MARGINS = 6;
|
||||
|
||||
if (gw.window.downEvent)
|
||||
{
|
||||
gw.window.context.cx = e.clientX;
|
||||
gw.window.context.cy = e.clientY;
|
||||
gw.window.animate();
|
||||
return;
|
||||
}
|
||||
|
||||
gw.window.context = undefined;
|
||||
|
||||
for (i = 0; i < gw.windows.length; i++)
|
||||
{
|
||||
id = gw.windows[gw.windows.length - i - 1];
|
||||
elt = $(id);
|
||||
|
||||
if (elt.style.zIndex < gw.window.zIndex)
|
||||
continue;
|
||||
|
||||
b = elt.getBoundingClientRect();
|
||||
|
||||
bx = b.left; // - MARGINS;
|
||||
by = b.top; // - MARGINS;
|
||||
bw = b.width; // + MARGINS * 2;
|
||||
bh = b.height; // + MARGINS * 2;
|
||||
|
||||
x = e.clientX - bx;
|
||||
y = e.clientY - by;
|
||||
|
||||
//console.log(x + ',' + y + ' : ' + bx + ',' + by + ',' + bw + ',' + bh);
|
||||
|
||||
if (x >= 0 && x < bw && y >= 0 && y < bh)
|
||||
{
|
||||
if (elt.gw_resizable)
|
||||
{
|
||||
onTopEdge = y < MARGINS;
|
||||
onLeftEdge = x < MARGINS;
|
||||
onRightEdge = x >= (bw - MARGINS);
|
||||
onBottomEdge = y >= (bh - MARGINS);
|
||||
|
||||
isResizing = onTopEdge || onLeftEdge || onRightEdge || onBottomEdge;
|
||||
}
|
||||
else
|
||||
onTopEdge = onLeftEdge = onRightEdge = onBottomEdge = isResizing = false;
|
||||
|
||||
isMoving = !isResizing && y < ($(id + '-titlebar').offsetHeight + MARGINS);
|
||||
|
||||
gw.window.context = {
|
||||
id: id,
|
||||
x: b.left + window.scrollX,
|
||||
y: b.top + window.scrollY,
|
||||
cx: e.clientX,
|
||||
cy: e.clientY,
|
||||
w: b.width,
|
||||
h: b.height,
|
||||
isResizing: isResizing,
|
||||
isMoving: isMoving,
|
||||
onTopEdge: onTopEdge,
|
||||
onLeftEdge: onLeftEdge,
|
||||
onRightEdge: onRightEdge,
|
||||
onBottomEdge: onBottomEdge
|
||||
};
|
||||
gw.window.animate();
|
||||
break;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
updateGeometry: function(id)
|
||||
{
|
||||
var b = $(id).getBoundingClientRect();
|
||||
gw.update(id, '#geometry', [ b.left + 'px', b.top + 'px', b.width + 'px', b.height + 'px']);
|
||||
},
|
||||
|
||||
onUp: function(e)
|
||||
{
|
||||
var c = gw.window.context;
|
||||
|
||||
gw.window.downEvent = undefined;
|
||||
|
||||
if (c && (c.isMoving || c.isResizing))
|
||||
{
|
||||
var id = gw.window.context.id;
|
||||
gw.window.context = undefined;
|
||||
gw.window.raise(id, true);
|
||||
gw.window.updateGeometry(id);
|
||||
}
|
||||
},
|
||||
|
||||
animate: function()
|
||||
{
|
||||
var id, elt, c, e, x, y, w, h;
|
||||
var minWidth;
|
||||
var minHeight;
|
||||
|
||||
//requestAnimationFrame(gw.window.animate);
|
||||
|
||||
c = gw.window.context;
|
||||
if (!c) return;
|
||||
|
||||
elt = $(c.id);
|
||||
minWidth = elt.gw_minw;
|
||||
minHeight = elt.gw_minh; //$(c.id + '-titlebar').offsetHeight + 2 + elt.gw_minh;
|
||||
e = gw.window.downEvent;
|
||||
|
||||
if (c && c.isResizing && e)
|
||||
{
|
||||
if (c.onRightEdge)
|
||||
elt.style.width = Math.max(c.w + c.cx - e.clientX, minWidth) + 'px';
|
||||
|
||||
if (c.onBottomEdge)
|
||||
elt.style.height = Math.max(c.h + c.cy - e.clientY, minHeight) + 'px';
|
||||
|
||||
if (c.onLeftEdge)
|
||||
{
|
||||
x = c.x + c.cx - e.clientX;
|
||||
w = c.x + c.w - x;
|
||||
if (w >= minWidth)
|
||||
{
|
||||
elt.style.width = w + 'px';
|
||||
elt.style.left = x + 'px';
|
||||
}
|
||||
}
|
||||
|
||||
if (c.onTopEdge)
|
||||
{
|
||||
y = c.y + c.cy - e.clientY;
|
||||
h = c.y + c.h - y;
|
||||
if (h >= minHeight)
|
||||
{
|
||||
elt.style.height = h + 'px';
|
||||
elt.style.top = y + 'px';
|
||||
}
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if (c && c.isMoving && e)
|
||||
{
|
||||
elt.style.left = (Math.max(0, c.x + c.cx - e.clientX)) + 'px';
|
||||
elt.style.top = (Math.max(0, c.y + c.cy - e.clientY)) + 'px';
|
||||
return;
|
||||
}
|
||||
|
||||
// This code executes when mouse moves without clicking
|
||||
|
||||
if (c.onRightEdge && c.onBottomEdge || c.onLeftEdge && c.onTopEdge)
|
||||
elt.style.cursor = 'nwse-resize';
|
||||
else if (c.onRightEdge && c.onTopEdge || c.onBottomEdge && c.onLeftEdge)
|
||||
elt.style.cursor = 'nesw-resize';
|
||||
else if (c.onRightEdge || c.onLeftEdge)
|
||||
elt.style.cursor = 'ew-resize';
|
||||
else if (c.onBottomEdge || c.onTopEdge)
|
||||
elt.style.cursor = 'ns-resize';
|
||||
else
|
||||
elt.style.cursor = '';
|
||||
}
|
||||
},
|
||||
|
||||
getTargetId: function(elt)
|
||||
{
|
||||
for(;;)
|
||||
{
|
||||
if (elt.id)
|
||||
return elt.id;
|
||||
elt = elt.parentNode;
|
||||
if (!elt)
|
||||
return;
|
||||
}
|
||||
},
|
||||
|
||||
menu:
|
||||
{
|
||||
hide: function(elt)
|
||||
{
|
||||
elt.style.display = 'none';
|
||||
setTimeout(function() { elt.style.display = ''; }, 150);
|
||||
},
|
||||
|
||||
click: function(name, event)
|
||||
{
|
||||
var id = gw.getTargetId(event.target);
|
||||
gw.update(name, '#click', id);
|
||||
event.stopPropagation();
|
||||
}
|
||||
}
|
||||
}
|
||||
{return document.getElementById(a);}
|
||||
gw={timers:{},windows:[],form:'',debug:false,log:function(d)
|
||||
{if(gw.debug)
|
||||
console.log(d);},send:function(f)
|
||||
{var g=new XMLHttpRequest();gw.log(f);g.open('GET',$root+'/'+encodeURIComponent(gw.form)
|
||||
+'/x?c='+encodeURIComponent(JSON.stringify(f)),true);g.onreadystatechange=function()
|
||||
{if(g.readyState==4&&g.status==200&&g.responseText)
|
||||
{gw.active=document.activeElement.id;if(gw.active)
|
||||
gw.selection=gw.getSelection($(gw.active));else
|
||||
gw.selection=undefined;if(gw.debug)
|
||||
console.log(g.responseText);eval(g.responseText);if(gw.active)
|
||||
{if($(gw.active))
|
||||
{$(gw.active).focus();gw.setSelection($(gw.active),gw.selection);}
|
||||
else
|
||||
gw.active=document.activeElement.id;}}};g.send(null);},raise:function(j,k,l)
|
||||
{gw.send(['raise',j,k,l]);},update:function(j,m,n)
|
||||
{gw.send(['update',j,m,n]);},getSelection:function(o)
|
||||
{var p,q;try
|
||||
{if(o.createTextRange)
|
||||
{var r=document.selection.createRange().duplicate();r.moveEnd('character',o.value.length)
|
||||
if(r.text=='')
|
||||
p=o.value.length;else
|
||||
p=o.value.lastIndexOf(r.text);r.moveStart('character',-o.value.length);q=r.text.length;
|
||||
return[p,q];}
|
||||
if(o.selectionStart&&o.selectionEnd)
|
||||
return[o.selectionStart,o.selectionEnd];}
|
||||
catch(e){};return undefined;},setSelection:function(o,s)
|
||||
{if(s)
|
||||
{if(o.setSelectionRange)
|
||||
try{o.setSelectionRange(s[0],s[1])}
|
||||
catch(e){};}},setFocus:function(j)
|
||||
{$(j).focus();gw.active=document.activeElement.id;gw.selection=undefined;},resizeComboBox:
|
||||
function(j)
|
||||
{$(j+'-select').onmouseover=function(){$(j+'-select').style.width=$(j).offsetWidth
|
||||
+'px';}},addTimer:function(j,u)
|
||||
{gw.removeTimer(j);gw.timers[j]=setInterval(function(){gw.raise(j,'timer');},
|
||||
u);},removeTimer:function(j)
|
||||
{var t=gw.timers[j];if(t)
|
||||
{clearInterval(gw.timers[j]);gw.timers[j]=undefined;}},window:{zIndex:0,open:function(j,v,z,A,B)
|
||||
{gw.window.close(j);if(gw.windows.length==0)
|
||||
{document.addEventListener('mousemove',gw.window.onMove);document.addEventListener('mouseup',
|
||||
gw.window.onUp);gw.log('document.addEventListener');}
|
||||
gw.windows.push(j);$(j).addEventListener('mousedown',gw.window.onMouseDown);$(j).gw_resizable=
|
||||
v;$(j).gw_modal=z;if(A!=undefined)
|
||||
{$(j).gw_minw=A;$(j).gw_minh=B;}
|
||||
else
|
||||
{$(j).gw_minw=$(j).offsetWidth;$(j).gw_minh=$(j).offsetHeight;}
|
||||
gw.window.updateTitleBars();gw.window.refresh();},close:function(j)
|
||||
{var i;$(j).removeEventListener('mousedown',gw.window.onMouseDown);i=gw.windows.indexOf(j);
|
||||
if(i>=0)
|
||||
{gw.windows.splice(i,1);gw.window.refresh();}},refresh:function()
|
||||
{var i=0;while(i<gw.windows.length)
|
||||
{if($(gw.windows[i]))
|
||||
{$(gw.windows[i]).style.zIndex=11+i*2;i++;}
|
||||
else
|
||||
gw.windows.splice(i,1);}
|
||||
gw.window.updateModal();if(gw.windows.length==0)
|
||||
{gw.log('document.removeEventListener');document.removeEventListener('mousemove',
|
||||
gw.window.onMove);document.removeEventListener('mouseup',gw.window.onUp);}},updateTitleBars:function()
|
||||
{var i;for(i=0;i<gw.windows.length-1;i++)
|
||||
$(gw.windows[i]+'-titlebar').style.backgroundColor='#C0C0C0';$(gw.windows[gw.windows.length
|
||||
-1]+'-titlebar').style.backgroundColor='';},raise:function(j,C)
|
||||
{var i=gw.windows.indexOf(j);if(i<0)
|
||||
return;gw.windows.splice(i,1);gw.windows.push(j);for(i=0;i<gw.windows.length;
|
||||
i++)
|
||||
$(gw.windows[i]).style.zIndex=11+i*2;gw.window.updateTitleBars();if(C)
|
||||
gw.update('','#windows',gw.windows);},updateModal:function()
|
||||
{var i,D=$('gw-modal');for(i=gw.windows.length-1;i>=0;i--)
|
||||
{if($(gw.windows[i]).gw_modal)
|
||||
{gw.window.zIndex=10+i*2;D.style.zIndex=10+i*2;D.style.display='block';return;}}
|
||||
gw.window.zIndex=0;D.style.display='none';},center:function(j)
|
||||
{$(j).style.left=((window.innerWidth-$(j).offsetWidth)/2+0)+'px';$(j).style.top=
|
||||
((window.innerHeight-$(j).offsetHeight)/2+0)+'px';gw.window.updateGeometry(j);},onMouseDown:function(e)
|
||||
{gw.window.onDown(e);},onDown:function(e)
|
||||
{var c;gw.window.context=undefined;if(e.target.className=='gw-window-button')
|
||||
return;gw.window.onMove(e);c=gw.window.context;if(c&&(c.isMoving||c.isResizing))
|
||||
{gw.window.raise(c.id);gw.window.downEvent=e;e.preventDefault();}},onMove(e)
|
||||
{var i,j,D,b,x,y,E,F,G,H;var I,J,K,L,M;var N=6;if(gw.window.downEvent)
|
||||
{gw.window.context.cx=e.clientX;gw.window.context.cy=e.clientY;gw.window.animate();
|
||||
return;}
|
||||
gw.window.context=undefined;for(i=0;i<gw.windows.length;i++)
|
||||
{j=gw.windows[gw.windows.length-i-1];D=$(j);if(D.style.zIndex<gw.window.zIndex)
|
||||
continue;b=D.getBoundingClientRect();E=b.left;F=b.top;G=b.width;H=b.height;x=
|
||||
e.clientX-E;y=e.clientY-F;if(x>=0&&x<G&&y>=0&&y<H)
|
||||
{if(D.gw_resizable)
|
||||
{I=y<N;J=x<N;K=x>=(G-N);L=y>=(H-N);M=I||J||K||L;}
|
||||
else
|
||||
I=J=K=L=M=false;isMoving=!M&&y<($(j+'-titlebar').offsetHeight+N);gw.window.context=
|
||||
{id:j,x:b.left+window.scrollX,y:b.top+window.scrollY,cx:e.clientX,cy:e.clientY,
|
||||
w:b.width,h:b.height,isResizing:M,isMoving:isMoving,onTopEdge:I,onLeftEdge:J,
|
||||
onRightEdge:K,onBottomEdge:L};gw.window.animate();break;}}},updateGeometry:function(j)
|
||||
{var b=$(j).getBoundingClientRect();gw.update(j,'#geometry',[b.left+'px',b.top
|
||||
+'px',b.width+'px',b.height+'px']);},onUp:function(e)
|
||||
{var c=gw.window.context;gw.window.downEvent=undefined;if(c&&(c.isMoving||c.isResizing))
|
||||
{var j=gw.window.context.id;gw.window.context=undefined;gw.window.raise(j,true);
|
||||
gw.window.updateGeometry(j);}},animate:function()
|
||||
{var j,D,c,e,x,y,w,h;var O;var P;c=gw.window.context;if(!c)return;D=$(c.id);O=
|
||||
D.gw_minw;P=D.gw_minh;e=gw.window.downEvent;if(c&&c.isResizing&&e)
|
||||
{if(c.onRightEdge)
|
||||
D.style.width=Math.max(c.w+c.cx-e.clientX,O)+'px';if(c.onBottomEdge)
|
||||
D.style.height=Math.max(c.h+c.cy-e.clientY,P)+'px';if(c.onLeftEdge)
|
||||
{x=c.x+c.cx-e.clientX;w=c.x+c.w-x;if(w>=O)
|
||||
{D.style.width=w+'px';D.style.left=x+'px';}}
|
||||
if(c.onTopEdge)
|
||||
{y=c.y+c.cy-e.clientY;h=c.y+c.h-y;if(h>=P)
|
||||
{D.style.height=h+'px';D.style.top=y+'px';}}
|
||||
return;}
|
||||
if(c&&c.isMoving&&e)
|
||||
{D.style.left=(Math.max(0,c.x+c.cx-e.clientX))+'px';D.style.top=(Math.max(0,c.y
|
||||
+c.cy-e.clientY))+'px';return;}
|
||||
if(c.onRightEdge&&c.onBottomEdge||c.onLeftEdge&&c.onTopEdge)
|
||||
D.style.cursor='nwse-resize';else if(c.onRightEdge&&c.onTopEdge||c.onBottomEdge
|
||||
&&c.onLeftEdge)
|
||||
D.style.cursor='nesw-resize';else if(c.onRightEdge||c.onLeftEdge)
|
||||
D.style.cursor='ew-resize';else if(c.onBottomEdge||c.onTopEdge)
|
||||
D.style.cursor='ns-resize';else
|
||||
D.style.cursor='';}},getTargetId:function(D)
|
||||
{for(;;)
|
||||
{if(D.id)
|
||||
return D.id;D=D.parentNode;if(!D)
|
||||
return;}},menu:{hide:function(D)
|
||||
{D.style.display='none';setTimeout(function(){D.style.display='';},150);},click:
|
||||
function(Q,k)
|
||||
{var j=gw.getTargetId(k.target);gw.update(Q,'#click',j);k.stopPropagation();}}}
|
||||
|
|
|
|||
Loading…
Reference in a new issue