mirror of
https://github.com/esiur/iui.git
synced 2025-05-06 06:42:58 +00:00
initial commit
This commit is contained in:
commit
e82f4bc4cf
2
.gitignore
vendored
Normal file
2
.gitignore
vendored
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
node_modules/
|
||||||
|
.vscode
|
||||||
21
LICENSE
Normal file
21
LICENSE
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
MIT License
|
||||||
|
|
||||||
|
Copyright (c) 2020-2021 Esiur Foundation
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all
|
||||||
|
copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||||
|
SOFTWARE.
|
||||||
154
css/default.css
Normal file
154
css/default.css
Normal file
@ -0,0 +1,154 @@
|
|||||||
|
:root {
|
||||||
|
--default-background-color: #ffffff;
|
||||||
|
--default-background-color-light: rgba(255, 255, 255, 0.86);
|
||||||
|
--default-text-color: #2f4d5e;
|
||||||
|
--default-link-color: #41b3e2;
|
||||||
|
--default-graph-color: #5ac9af;
|
||||||
|
--default-graph-color-light: rgba(90, 201, 175, 0.5);
|
||||||
|
--default-graph-color-dim: rgba(245, 227, 179, 0.5);
|
||||||
|
--default-path-color: #f2796b;
|
||||||
|
--default-point-color: #5ac9af;
|
||||||
|
--button-color: white;
|
||||||
|
--button-background-image: linear-gradient(to bottom, rgb(100, 209, 253), #41b3e2);
|
||||||
|
--button-box-shadow: inset 0 0 0.1em 2px rgba(255, 255, 255, 0.1), 0 2px rgba(0, 0, 0, 0.12);
|
||||||
|
--button-text-shadow: 0 0.1em rgba(0, 0, 0, 0.2);
|
||||||
|
--button-border: 1px solid #215a96;
|
||||||
|
--button-background-image-hover: linear-gradient(to bottom, #f1796b, #f2796b);
|
||||||
|
--button-background-image-disabled: linear-gradient(to bottom, rgb(230, 230, 230), #bfbfbf);
|
||||||
|
--button-color-disabled: #7c7c7c;
|
||||||
|
--button-border-color-disabled: #b7b7b7;
|
||||||
|
--button-close-color: #aaa;
|
||||||
|
--button-close-color-hover: #000;
|
||||||
|
--window-background: #fff;
|
||||||
|
--window-border: 1px solid #BBBABA;
|
||||||
|
--dialog-box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.506);
|
||||||
|
--window-active-background: rgb(167, 227, 252);
|
||||||
|
--background-background: rgba(0, 0, 0, 0);
|
||||||
|
--background-visible-background: rgba(0, 0, 0, 0.6);
|
||||||
|
--window-title-color: #444;
|
||||||
|
--window-tools-close-background: linear-gradient(to bottom, #f1796b, #d66255);
|
||||||
|
--window-tools-close-border: 1px solid #f1786b;
|
||||||
|
--window-tools-close-background-hover: #f03242;
|
||||||
|
--dialog-loading-background: rgb(167, 227, 252);
|
||||||
|
--dialog-loading-content-border: 10px solid #fff;
|
||||||
|
--dialog-loading-content-border-top: 10px solid #ffe3e3;
|
||||||
|
--dialog-loading-content-border-right: 10px solid #f2796b;
|
||||||
|
--dialog-loading-content-border-bottom: 10px solid #f2786b;
|
||||||
|
--window-header-background: #e6e6e6;
|
||||||
|
--window-footer-border-top: #eee solid 1px;
|
||||||
|
--window-footer-background: linear-gradient(to bottom, white, #e1e2eb);
|
||||||
|
--panel-border: 1px solid #BBBABA;
|
||||||
|
--panel-title-color: #444;
|
||||||
|
--table-td-border-bottom: 1px solid #e0e0e0;
|
||||||
|
--table-td-border: 0;
|
||||||
|
--table-header-background: linear-gradient(to bottom, white, #e1e2eb);
|
||||||
|
--table-header-text-background-up: url(img/sort-up.png) no-repeat right;
|
||||||
|
--table-header-text-background-down: url(img/sort-down.png) no-repeat right;
|
||||||
|
--table-header-text-background-up-rtl: url(img/sort-up.png) no-repeat left;
|
||||||
|
--table-header-text-background-down-rtl: url(img/sort-down.png) no-repeat left;
|
||||||
|
--table-header-sort-background: url(img/sort_16.png) no-repeat;
|
||||||
|
--table-tree-background-image: url(img/plus.png);
|
||||||
|
--table-tree-background-image-hover: url(img/plus-hover.png);
|
||||||
|
--table-tree-background-image-expanded: url(img/minus.png);
|
||||||
|
--table-tree-background-image-expanded-hover: url(img/minus-hover.png);
|
||||||
|
--table-row-level-1-background: rgba(221, 221, 221, 0.5);
|
||||||
|
--table-row-level-2-background: rgba(121, 121, 121, 0.3);
|
||||||
|
--table-row-level-3-background: darkkhaki;
|
||||||
|
--table-row-background-hover: rgb(217, 243, 253);
|
||||||
|
--table-row-selected-background: rgb(167, 227, 252);
|
||||||
|
--table-row-selected-box-shadow: #cecbcb 0 1px 10px 0 inset;
|
||||||
|
--table-header-wrap-border: 1px solid #c9c9c9;
|
||||||
|
--table-resizer-background: #dde2e3;
|
||||||
|
--button-flat-background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 5%, rgb(246, 246, 246) 100%);
|
||||||
|
--button-flat-border: 1px solid rgba(220, 220, 220, 0.51);
|
||||||
|
--button-flat-color: #666666;
|
||||||
|
--button-flat-border-hover: #ffcbcb;
|
||||||
|
--button-flat-background-hover: rgb(167, 227, 252);
|
||||||
|
--colorpicker-button-checked-border: 3px rgb(255, 40, 40) solid;
|
||||||
|
--colorpicker-button-checked-box-shadow: 0 .0 1em 1px #747373;
|
||||||
|
--colorpicker-button-hover-border-color: red;
|
||||||
|
--menu-li-hover-background: rgb(167, 227, 252);
|
||||||
|
--menu-li-hover-box-shadow: #cecbcb 0 1px 1px 0;
|
||||||
|
--checkbutton-checked-background: rgb(245, 227, 179);
|
||||||
|
--checkbutton-checked-box-shdow: #ffffff 0 1px 10px 0 inset;
|
||||||
|
--tabs-content-border: 1px solid #dcdcdc;
|
||||||
|
--tabs-button-background: #e7e7e7;
|
||||||
|
--tabs-button-border: 1px solid #dcdcdc;
|
||||||
|
--tabs-button-color: #666666;
|
||||||
|
--tabs-button-hover-border: 1px #6ed5ff solid;
|
||||||
|
--tabs-button-checked-box-shadow: 0 2px rgb(255, 255, 255);
|
||||||
|
--tabs-button-checked-background: #fff;
|
||||||
|
--tabs-button-checked-color: #000000;
|
||||||
|
--dropdown-arrow-up-background-image: url(img/dropdown-arrow-up.png);
|
||||||
|
--dropdown-arrow-down-background-image: url(img/dropdown-arrow-down.png);
|
||||||
|
--listview-li-hover-background: #eee;
|
||||||
|
--menu-border: 1px solid #CCC;
|
||||||
|
--menu-background: #FFF;
|
||||||
|
--menu-color: #333;
|
||||||
|
--menu-box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.506);
|
||||||
|
--textbox-color: black;
|
||||||
|
--textbox-background: white;
|
||||||
|
|
||||||
|
--textbox-border: 2px solid #dadada;
|
||||||
|
--textbox-border-color-focus: #a7e3fc;
|
||||||
|
--textbox-box-shadow-focus: 0 0 10px #8bddff;
|
||||||
|
--resizer-horizontal-background: #dde2e3;
|
||||||
|
--resizer-vertical-background: #dde2e3;
|
||||||
|
--selectlist-arrow-hover-background-image: url(img/arrow-down-hover.png);
|
||||||
|
--selectlist-label-background: #fff;
|
||||||
|
--selectlist-arrow-background-color: #fff;
|
||||||
|
--selectlist-arrow-border: 2px solid #dadada;
|
||||||
|
--selectlist-arrow-background-image: url(img/arrow-down.png);
|
||||||
|
--searchlist-menu-border: 1px solid #CCC;
|
||||||
|
--searchlist-menu-background: rgba(255, 255, 255, 0.44);
|
||||||
|
--searchlist-menu-color: #333;
|
||||||
|
--lazylist-more-background-image: url(img/arrow-down-hover.png);
|
||||||
|
--button-arrow-background-color: #f3f3f3;
|
||||||
|
--button-arrow-background-border: 1px solid #dadada;
|
||||||
|
--button-arrow-background-color-hover: #f3f3f3;
|
||||||
|
--separator-background: #dedede;
|
||||||
|
--separator-box-shadow: inset 0 0 15px #ffffff;
|
||||||
|
--dropdown-visible-img-filter: drop-shadow(0px 0px 8px #45c8ff);
|
||||||
|
--dropdown-visible-badge: drop-shadow(1px 1px 5px #a7e3fc);
|
||||||
|
--range-background: rgba(0,0,0,0);
|
||||||
|
--range-track-box-shadow: 0px 0px 0px rgba(95, 153, 86, 0.7), 0px 0px 0px rgba(107, 167, 98, 0.7);
|
||||||
|
--range-track-background: rgba(192, 192, 192, 0.75);
|
||||||
|
--range-track-border: 0px solid rgba(26, 93, 157, 0.35);
|
||||||
|
--range-thumb-box-shadow: 2.2px 2.2px 8.6px rgb(167, 227, 252), 0px 0px 2.2px rgba(167, 227, 252, 0.83);
|
||||||
|
--range-thumb-border: 2px solid rgb(70, 183, 230);
|
||||||
|
--range-thumb-background: rgb(94, 204, 248);
|
||||||
|
--range-track-background-focus: rgba(210, 210, 210, 0.75);
|
||||||
|
--bar-arrow-left-background-image: url(img/arrow-left.png);
|
||||||
|
--bar-arrow-right-background-image: url(img/arrow-right.png);
|
||||||
|
--bar-arrow-left-inactive-background-image: url(img/arrow-left-inactive.png);
|
||||||
|
--bar-arrow-right-inactive-background-image: url(img/arrow-right-inactive.png);
|
||||||
|
--bar-item-background: rgba(235, 240, 242, 0.69);
|
||||||
|
--bar-item-border: 1px solid #dcdcdc;
|
||||||
|
--bar-item-color: #666666;
|
||||||
|
--bar-item-background-hover: rgba(255, 255, 255, 0.87);
|
||||||
|
--bar-item-checked-border-bottom: 3px solid #46b6e4;
|
||||||
|
--bar-item-checked-box-shadow: #cecbcb 0 1px 10px 0 inset;
|
||||||
|
--multiselect-add-background-image: url(img/add.png);
|
||||||
|
--multiselect-add-background-image-hover: url(img/add-hover.png);
|
||||||
|
--multiselect-list-li-border-bottom: 2px dotted #dadada;
|
||||||
|
--multiselect-list-remove-background-image: url(img/remove.png);
|
||||||
|
--multiselect-list-remove-background-image-hover: url(img/remove-hover.png);
|
||||||
|
--grid-window-over-border: #e13946 dotted 3px;
|
||||||
|
--grid-window-drag-border: #46b7e6 dotted 3px;
|
||||||
|
--datetimepicker-calendar-border-right: 3px solid pink;
|
||||||
|
--datetimepicker-clock-background: gainsboro;
|
||||||
|
--datetimepicker-different-month-color: #bebebe;
|
||||||
|
--datetimepicker-day-background-hover: #a7e3fc;
|
||||||
|
--datetimepicker-day-selected-background: #46b7e6;
|
||||||
|
--datetimepicker-day-selected-color: #fff;
|
||||||
|
--datetimepicker-day-today-border-bottom: 3px solid #f2796b;
|
||||||
|
--scrollbar-background: #ebebeb;
|
||||||
|
--scrollbar-track-border: 1px #dadada solid;
|
||||||
|
--scrollbar-track-box-shadow: 0 0 6px #c8c8c8 inset;
|
||||||
|
--scrollbar-thumb-background: #49bae8;
|
||||||
|
--scrollbar-thumb-border: 1px solid #dadada;
|
||||||
|
--scrollbar-thumb-background-hover: #2996c3;
|
||||||
|
--scrollbar-thumb-border-hover: 1px solid #dadada;
|
||||||
|
--scrollbar-thumb-background-active: #48b9e7;
|
||||||
|
--scrollbar-thumb-border-active: 1px solid #dadada;
|
||||||
|
}
|
||||||
155
css/desert.css
Normal file
155
css/desert.css
Normal file
@ -0,0 +1,155 @@
|
|||||||
|
:root
|
||||||
|
{
|
||||||
|
--default-background-color: #fff6e5;
|
||||||
|
--default-background-color-light: rgba(255, 232, 197, 0.62);
|
||||||
|
--default-text-color: black;
|
||||||
|
--default-link-color: #795548;
|
||||||
|
--default-graph-color: #34ffc2;
|
||||||
|
--default-graph-color-light: rgba(255, 235, 59, 0.59);
|
||||||
|
--default-graph-color-dim: rgba(245, 227, 179, 0.5);
|
||||||
|
--default-path-color: #f2796b;
|
||||||
|
--default-point-color: #FFC107;
|
||||||
|
--button-color: white;
|
||||||
|
--button-background-image: linear-gradient(to bottom, #FF9800, #FF9800);
|
||||||
|
--button-box-shadow: inset 0 0 0.1em 2px rgba(255, 255, 255, 0.1), 0 2px rgba(0, 0, 0, 0.12);
|
||||||
|
--button-text-shadow: 0 0.1em rgba(0, 0, 0, 0.2);
|
||||||
|
--button-border: 1px solid #795548;
|
||||||
|
--button-background-image-hover: linear-gradient(to bottom, #FF5722, #F44336);
|
||||||
|
--button-background-image-disabled: linear-gradient(to bottom, rgb(230, 230, 230), #bfbfbf);
|
||||||
|
--button-color-disabled: #7c7c7c;
|
||||||
|
--button-border-color-disabled: #b7b7b7;
|
||||||
|
--button-close-color: #aaa;
|
||||||
|
--button-close-color-hover: #000;
|
||||||
|
--window-background: #ffe1b3;
|
||||||
|
--window-border: 1px solid #6a6a6a;
|
||||||
|
--dialog-box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.506);
|
||||||
|
--window-active-background: #ffb03b;
|
||||||
|
--background-background: rgba(73, 60, 57, 0.74);
|
||||||
|
--background-visible-background: rgba(0, 0, 0, 0.6);
|
||||||
|
--window-title-color: #000;
|
||||||
|
--window-tools-close-background: linear-gradient(to bottom, #e8616c, #dd202f);
|
||||||
|
--window-tools-close-border: 1px solid #911f28;
|
||||||
|
--window-tools-close-background-hover: #ff7d88;
|
||||||
|
--dialog-loading-background: rgb(255, 225, 179);
|
||||||
|
--dialog-loading-content-border: 10px solid #fff;
|
||||||
|
--dialog-loading-content-border-top: 10px solid #ffe1b4;
|
||||||
|
--dialog-loading-content-border-right: 10px solid #ffc570;
|
||||||
|
--dialog-loading-content-border-bottom: 10px solid #ffb03b;
|
||||||
|
--window-header-background: #dac19b;
|
||||||
|
--window-footer-border-top: 0;
|
||||||
|
--window-footer-background: linear-gradient(to bottom, #ffe1b3, #ffffff);
|
||||||
|
--panel-border: 1px solid #BBBABA;
|
||||||
|
--panel-title-color: #444;
|
||||||
|
--table-td-border-bottom: 1px solid #ffae37;
|
||||||
|
--table-td-border: 0;
|
||||||
|
--table-header-background: linear-gradient(to bottom, #ffca7c, #ffdead);
|
||||||
|
--table-header-text-background-up: url(img/sort-up.png) no-repeat right;
|
||||||
|
--table-header-text-background-down: url(img/sort-down.png) no-repeat right;
|
||||||
|
--table-header-text-background-up-rtl: url(img/sort-up.png) no-repeat left;
|
||||||
|
--table-header-text-background-down-rtl: url(img/sort-down.png) no-repeat left;
|
||||||
|
--table-header-sort-background: url(img/sort_16.png) no-repeat;
|
||||||
|
--table-tree-background-image: url(img/plus.png);
|
||||||
|
--table-tree-background-image-hover: url(img/plus-hover.png);
|
||||||
|
--table-tree-background-image-expanded: url(img/minus.png);
|
||||||
|
--table-tree-background-image-expanded-hover: url(img/minus-hover.png);
|
||||||
|
--table-row-level-1-background: rgba(221, 221, 221, 0.5);
|
||||||
|
--table-row-level-2-background: rgba(121, 121, 121, 0.3);
|
||||||
|
--table-row-level-3-background: darkkhaki;
|
||||||
|
--table-row-background-hover: rgb(255, 234, 201);
|
||||||
|
--table-row-selected-background: #ffb03b;
|
||||||
|
--table-row-selected-box-shadow: #ff7676 0 1px 10px 0 inset;
|
||||||
|
--table-header-wrap-border: 1px solid #f0d299;
|
||||||
|
--table-resizer-background: #cccccc;
|
||||||
|
--button-flat-background: linear-gradient(to bottom, rgb(255, 225, 179) 5%, rgb(255, 225, 179) 100%);
|
||||||
|
--button-flat-border: 1px solid rgb(255, 176, 59);
|
||||||
|
--button-flat-color: #000000;
|
||||||
|
--button-flat-border-hover: #ffb03b;
|
||||||
|
--button-flat-background-hover: rgb(255, 255, 255);
|
||||||
|
--button-flat-color-hover: black;
|
||||||
|
--colorpicker-button-checked-border: 3px rgb(255, 40, 40) solid;
|
||||||
|
--colorpicker-button-checked-box-shadow: 0 0 1em 1px #747373;
|
||||||
|
--colorpicker-button-hover-border-color: red;
|
||||||
|
--menu-li-hover-background: rgb(255, 176, 59);
|
||||||
|
--menu-li-hover-box-shadow: #cecbcb 0 1px 1px 0;
|
||||||
|
--checkbutton-checked-background: rgb(255, 255, 255);
|
||||||
|
--checkbutton-checked-box-shdow: #ffa71f 0 1px 15px 0 inset;
|
||||||
|
--checkbutton-checked-color: black;
|
||||||
|
--tabs-content-border: 1px solid #ffb03b;
|
||||||
|
--tabs-button-background: linear-gradient(to bottom, rgb(255, 176, 59) 5%, rgb(255, 225, 179) 100%);
|
||||||
|
--tabs-button-border: 1px solid #ffb03b;
|
||||||
|
--tabs-button-color: #000000;
|
||||||
|
--tabs-button-hover-border: 1px #d9ecff solid;
|
||||||
|
--tabs-button-checked-box-shadow: 0 2px rgb(255, 255, 255);
|
||||||
|
--tabs-button-checked-background: linear-gradient(to bottom, rgb(255, 225, 179) 10%, #ffe1b3);
|
||||||
|
--tabs-button-checked-color: #000000;
|
||||||
|
--dropdown-arrow-up-background-image: url(img/dropdown-arrow-up.png);
|
||||||
|
--dropdown-arrow-down-background-image: url(img/dropdown-arrow-down.png);
|
||||||
|
--listview-li-hover-background: #ffe1b3;
|
||||||
|
--menu-border: 1px solid #ffe1b3;
|
||||||
|
--menu-background: #ffecd0;
|
||||||
|
--menu-color: #333;
|
||||||
|
--menu-box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.506);
|
||||||
|
--textbox-color: black;
|
||||||
|
--textbox-background: #fff4e4;
|
||||||
|
--textbox-border: 2px solid #ffdaa2;
|
||||||
|
--textbox-border-color-focus: #e36872;
|
||||||
|
--textbox-box-shadow-focus: 0 0 10px #e34956;
|
||||||
|
--resizer-horizontal-background: #ffb03b;
|
||||||
|
--resizer-vertical-background: #ffb03b;
|
||||||
|
--selectlist-arrow-hover-background-image: url(img/arrow-down-hover.png);
|
||||||
|
--selectlist-label-background: #fff4e4;
|
||||||
|
--selectlist-arrow-background-color: #fff;
|
||||||
|
--selectlist-arrow-border: 2px solid #ffdaa2;
|
||||||
|
--selectlist-arrow-background-image: url(img/arrow-down.png);
|
||||||
|
--searchlist-menu-border: 1px solid #CCC;
|
||||||
|
--searchlist-menu-background: rgb(255, 225, 179);
|
||||||
|
--searchlist-menu-color: #333;
|
||||||
|
--lazylist-more-background-image: url(img/arrow-down-hover.png);
|
||||||
|
--button-arrow-background-color: #ffffff;
|
||||||
|
--button-arrow-background-border: 1px solid #0984ff;
|
||||||
|
--separator-background: #ffd38f;
|
||||||
|
--separator-box-shadow: inset 0 0 15px #ffd38f;
|
||||||
|
--dropdown-visible-img-filter: drop-shadow(0px 0px 8px #ffffff);
|
||||||
|
--dropdown-visible-badge: drop-shadow(1px 1px 5px #ffa1a1);
|
||||||
|
--range-background: rgba(0,0,0,0);
|
||||||
|
--range-track-box-shadow: 0px 0px 0px rgba(95, 153, 86, 0.7), 0px 0px 0px rgba(107, 167, 98, 0.7);
|
||||||
|
--range-track-background: rgba(255, 255, 255, 0.75);
|
||||||
|
--range-track-border: 0px solid rgba(26, 93, 157, 0.35);
|
||||||
|
--range-thumb-box-shadow: 2.2px 2.2px 8.6px rgb(202, 150, 71), 0px 0px 2.2px rgba(255, 255, 255, 0.78);
|
||||||
|
--range-thumb-border: 2px solid rgb(191, 134, 48);
|
||||||
|
--range-thumb-background: rgb(255, 152, 0);
|
||||||
|
--range-track-background-focus: rgba(210, 210, 210, 0.75);
|
||||||
|
--bar-arrow-left-background-image: url(img/arrow-left.png);
|
||||||
|
--bar-arrow-right-background-image: url(img/arrow-right.png);
|
||||||
|
--bar-arrow-left-inactive-background-image: url(img/arrow-left-inactive.png);
|
||||||
|
--bar-arrow-right-inactive-background-image: url(img/arrow-right-inactive.png);
|
||||||
|
--bar-item-background: rgba(235, 240, 242, 0.69);
|
||||||
|
--bar-item-border: 1px solid #dcdcdc;
|
||||||
|
--bar-item-color: #666666;
|
||||||
|
--bar-item-background-hover: rgba(255, 255, 255, 0.87);
|
||||||
|
--bar-item-checked-border-bottom: 3px solid #e03d4a;
|
||||||
|
--bar-item-checked-box-shadow: #6a6a6a 0 1px 10px 0 inset;
|
||||||
|
--multiselect-add-background-image: url(img/add.png);
|
||||||
|
--multiselect-add-background-image-hover: url(img/add-hover.png);
|
||||||
|
--multiselect-list-li-border-bottom: 2px dotted #dadada;
|
||||||
|
--multiselect-list-remove-background-image: url(img/remove.png);
|
||||||
|
--multiselect-list-remove-background-image-hover: url(img/remove-hover.png);
|
||||||
|
--grid-window-over-border: #e13946 dotted 3px;
|
||||||
|
--grid-window-drag-border: #75c6ff dotted 3px;
|
||||||
|
--datetimepicker-calendar-border-right: 3px solid pink;
|
||||||
|
--datetimepicker-clock-background: #ffdeac;
|
||||||
|
--datetimepicker-different-month-color: #bebebe;
|
||||||
|
--datetimepicker-day-background-hover: #ffe1b3;
|
||||||
|
--datetimepicker-day-selected-background: #ffb03b;
|
||||||
|
--datetimepicker-day-selected-color: #fff;
|
||||||
|
--datetimepicker-day-today-border-bottom: 3px solid #f65314;
|
||||||
|
--scrollbar-background: #ebebeb;
|
||||||
|
--scrollbar-track-border: 1px #dadada solid;
|
||||||
|
--scrollbar-track-box-shadow: 0 0 6px #c8c8c8 inset;
|
||||||
|
--scrollbar-thumb-background: #ababab;
|
||||||
|
--scrollbar-thumb-border: 1px solid #dadada;
|
||||||
|
--scrollbar-thumb-background-hover: #43be99;
|
||||||
|
--scrollbar-thumb-border-hover: 1px solid #dadada;
|
||||||
|
--scrollbar-thumb-background-active: #5cc7a7;
|
||||||
|
--scrollbar-thumb-border-active: 1px solid #dadada;
|
||||||
|
}
|
||||||
157
css/farm.css
Normal file
157
css/farm.css
Normal file
@ -0,0 +1,157 @@
|
|||||||
|
:root {
|
||||||
|
--default-background-color: #ffffff;
|
||||||
|
--default-background-color-light: rgba(209, 209, 209, 0.5);
|
||||||
|
--default-text-color: black;
|
||||||
|
--default-link-color: #6dcfb8;
|
||||||
|
--default-graph-color: #5ac9af;
|
||||||
|
--default-graph-color-light: rgba(90, 201, 175, 0.5);
|
||||||
|
--default-graph-color-dim: rgba(245, 227, 179, 0.5);
|
||||||
|
--default-path-color: #f2796b;
|
||||||
|
--default-point-color: #5ac9af;
|
||||||
|
|
||||||
|
--button-color: white;
|
||||||
|
--button-background-image: linear-gradient(to bottom, rgb(109, 207, 184), #00d6a4);
|
||||||
|
--button-box-shadow: inset 0 0 0.1em 2px rgba(255, 255, 255, 0.1), 0 2px rgba(0, 0, 0, 0.12);
|
||||||
|
--button-text-shadow: 0 0.1em rgba(0, 0, 0, 0.2);
|
||||||
|
--button-border: 1px solid #215a96;
|
||||||
|
--button-background-image-hover: linear-gradient(to bottom, #f2796b, #f48a7e);
|
||||||
|
--button-background-image-disabled: linear-gradient(to bottom, rgb(230, 230, 230), #bfbfbf);
|
||||||
|
--button-color-disabled: #7c7c7c;
|
||||||
|
--button-border-color-disabled: #b7b7b7;
|
||||||
|
--button-close-color: #aaa;
|
||||||
|
--button-close-color-hover: #000;
|
||||||
|
--window-background: #fff;
|
||||||
|
--window-border: 1px solid #BBBABA;
|
||||||
|
--dialog-box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.506);
|
||||||
|
--window-active-background: rgb(176, 233, 220);
|
||||||
|
--background-background: rgba(0, 0, 0, 0);
|
||||||
|
--background-visible-background: rgba(0, 0, 0, 0.6);
|
||||||
|
--window-title-color: #444;
|
||||||
|
--window-tools-close-background: linear-gradient(to bottom, #e8616c, #f2796b);
|
||||||
|
--window-tools-close-border: 1px solid #7b8f9d;
|
||||||
|
--window-tools-close-background-hover: #f0a1a8;
|
||||||
|
--dialog-loading-background: rgb(185, 223, 255);
|
||||||
|
--dialog-loading-content-border: 10px solid #fff;
|
||||||
|
--dialog-loading-content-border-top: 10px solid #d2fff5;
|
||||||
|
--dialog-loading-content-border-right: 10px solid #60fad6;
|
||||||
|
--dialog-loading-content-border-bottom: 10px solid #13d5a7;
|
||||||
|
--window-header-background: #e6e6e6;
|
||||||
|
--window-footer-border-top: #eee solid 1px;
|
||||||
|
--window-footer-background: linear-gradient(to bottom, white, #e1e2eb);
|
||||||
|
--panel-border: 1px solid #BBBABA;
|
||||||
|
--panel-title-color: #444;
|
||||||
|
|
||||||
|
--table-td-border-bottom: 1px solid #e0e0e0;
|
||||||
|
--table-td-border: 0;
|
||||||
|
|
||||||
|
--table-header-background: linear-gradient(to bottom, white, #e1e2eb);
|
||||||
|
--table-header-text-background-up: url(img/sort-up.png) no-repeat right;
|
||||||
|
--table-header-text-background-down: url(img/sort-down.png) no-repeat right;
|
||||||
|
--table-header-text-background-up-rtl: url(img/sort-up.png) no-repeat left;
|
||||||
|
--table-header-text-background-down-rtl: url(img/sort-down.png) no-repeat left;
|
||||||
|
--table-header-sort-background: url(img/sort_16.png) no-repeat;
|
||||||
|
--table-tree-background-image: url(img/plus.png);
|
||||||
|
--table-tree-background-image-hover: url(img/plus-hover.png);
|
||||||
|
--table-tree-background-image-expanded: url(img/minus.png);
|
||||||
|
--table-tree-background-image-expanded-hover: url(img/minus-hover.png);
|
||||||
|
--table-row-level-1-background: rgba(221, 221, 221, 0.5);
|
||||||
|
--table-row-level-2-background: rgba(121, 121, 121, 0.3);
|
||||||
|
--table-row-level-3-background: darkkhaki;
|
||||||
|
--table-row-background-hover: #d0fef3;
|
||||||
|
--table-row-selected-background: rgb(180, 238, 224);
|
||||||
|
--table-row-selected-box-shadow: #cecbcb 0 1px 10px 0 inset;
|
||||||
|
--table-header-wrap-border: 1px solid #c9c9c9;
|
||||||
|
--table-resizer-background: #dde2e3;
|
||||||
|
--button-flat-background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 5%, rgb(246, 246, 246) 100%);
|
||||||
|
--button-flat-border: 1px solid rgba(220, 220, 220, 0.51);
|
||||||
|
--button-flat-color: #666666;
|
||||||
|
--button-flat-border-hover: #ffcbcb;
|
||||||
|
--button-flat-background-hover: rgb(170, 226, 213);
|
||||||
|
--colorpicker-button-checked-border: 3px rgb(255, 40, 40) solid;
|
||||||
|
--colorpicker-button-checked-box-shadow: 0 .0 1em 1px #747373;
|
||||||
|
--colorpicker-button-hover-border-color: red;
|
||||||
|
--menu-li-hover-background: rgb(176, 233, 220);
|
||||||
|
--menu-li-hover-box-shadow: #cecbcb 0 1px 1px 0;
|
||||||
|
--checkbutton-checked-background: rgb(182, 223, 213);
|
||||||
|
--checkbutton-checked-box-shdow: #ffffff 0 1px 10px 0 inset;
|
||||||
|
--tabs-content-border: 1px solid #dcdcdc;
|
||||||
|
--tabs-button-background: linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
|
||||||
|
--tabs-button-border: 1px solid #dcdcdc;
|
||||||
|
--tabs-button-color: #666666;
|
||||||
|
--tabs-button-hover-border: 1px red solid;
|
||||||
|
--tabs-button-checked-box-shadow: 0 2px rgb(109, 207, 184);
|
||||||
|
--tabs-button-checked-background: linear-gradient(to bottom, rgb(174, 233, 219) 10%, #c6f2e8);
|
||||||
|
--tabs-button-checked-color: #000000;
|
||||||
|
--dropdown-arrow-up-background-image: url(img/dropdown-arrow-up.png);
|
||||||
|
--dropdown-arrow-down-background-image: url(img/dropdown-arrow-down.png);
|
||||||
|
--listview-li-hover-background: #eee;
|
||||||
|
--menu-border: 1px solid #CCC;
|
||||||
|
--menu-background: #FFF;
|
||||||
|
--menu-color: #333;
|
||||||
|
--menu-box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.506);
|
||||||
|
--textbox-color: black;
|
||||||
|
--textbox-background: white;
|
||||||
|
|
||||||
|
--textbox-border: 2px solid #dadada;
|
||||||
|
--textbox-border-color-focus: #b4ebde;
|
||||||
|
--textbox-box-shadow-focus: 0 0 10px #b0e9dc;
|
||||||
|
--resizer-horizontal-background: #dde2e3;
|
||||||
|
--resizer-vertical-background: #dde2e3;
|
||||||
|
--selectlist-arrow-hover-background-image: url(img/arrow-down-hover.png);
|
||||||
|
--selectlist-label-background: #fff;
|
||||||
|
--selectlist-arrow-background-color: #fff;
|
||||||
|
--selectlist-arrow-border: 2px solid #dadada;
|
||||||
|
--selectlist-arrow-background-image: url(img/arrow-down.png);
|
||||||
|
--searchlist-menu-border: 1px solid #CCC;
|
||||||
|
--searchlist-menu-background: rgba(255, 255, 255, 0.44);
|
||||||
|
--searchlist-menu-color: #333;
|
||||||
|
--lazylist-more-background-image: url(img/arrow-down-hover.png);
|
||||||
|
--button-arrow-background-color: #f3f3f3;
|
||||||
|
--button-arrow-background-border: 1px solid #dadada;
|
||||||
|
--button-arrow-background-color-hover: #f3f3f3;
|
||||||
|
--separator-background: rgba(82, 82, 82, 0.38);
|
||||||
|
--separator-box-shadow: inset 0 0 15px #ffffff;
|
||||||
|
--dropdown-visible-img-filter: drop-shadow(0px 0px 8px #26ffcb);
|
||||||
|
--dropdown-visible-badge: drop-shadow(1px 1px 5px #42e8c1);
|
||||||
|
--range-background: rgba(0,0,0,0);
|
||||||
|
--range-track-box-shadow: 0px 0px 0px rgba(95, 153, 86, 0.7), 0px 0px 0px rgba(107, 167, 98, 0.7);
|
||||||
|
--range-track-background: rgba(192, 192, 192, 0.75);
|
||||||
|
--range-track-border: 0px solid rgba(26, 93, 157, 0.35);
|
||||||
|
--range-thumb-box-shadow: 2.2px 2.2px 8.6px rgb(159, 247, 227), 0px 0px 2.2px rgba(177, 255, 237, 0.78);
|
||||||
|
--range-thumb-border: 2px solid rgba(82, 209, 179, 0.73);
|
||||||
|
--range-thumb-background: rgb(88, 208, 180);
|
||||||
|
--range-track-background-focus: rgba(210, 210, 210, 0.75);
|
||||||
|
--bar-arrow-left-background-image: url(img/arrow-left.png);
|
||||||
|
--bar-arrow-right-background-image: url(img/arrow-right.png);
|
||||||
|
--bar-arrow-left-inactive-background-image: url(img/arrow-left-inactive.png);
|
||||||
|
--bar-arrow-right-inactive-background-image: url(img/arrow-right-inactive.png);
|
||||||
|
--bar-item-background: rgba(235, 240, 242, 0.69);
|
||||||
|
--bar-item-border: 1px solid #dcdcdc;
|
||||||
|
--bar-item-color: #666666;
|
||||||
|
--bar-item-background-hover: rgba(255, 255, 255, 0.87);
|
||||||
|
--bar-item-checked-border-bottom: 3px solid #5bd0b5;
|
||||||
|
--bar-item-checked-box-shadow: #cecbcb 0 1px 10px 0 inset;
|
||||||
|
--multiselect-add-background-image: url(img/add.png);
|
||||||
|
--multiselect-add-background-image-hover: url(img/add-hover.png);
|
||||||
|
--multiselect-list-li-border-bottom: 2px dotted #dadada;
|
||||||
|
--multiselect-list-remove-background-image: url(img/remove.png);
|
||||||
|
--multiselect-list-remove-background-image-hover: url(img/remove-hover.png);
|
||||||
|
--grid-window-over-border: #e13946 dotted 3px;
|
||||||
|
--grid-window-drag-border: #1cd4a9 dotted 3px;
|
||||||
|
--datetimepicker-calendar-border-right: 3px solid pink;
|
||||||
|
--datetimepicker-clock-background: gainsboro;
|
||||||
|
--datetimepicker-different-month-color: #bebebe;
|
||||||
|
--datetimepicker-day-background-hover: #b0e9dc;
|
||||||
|
--datetimepicker-day-selected-background: #0cd5a6;
|
||||||
|
--datetimepicker-day-selected-color: #fff;
|
||||||
|
--datetimepicker-day-today-border-bottom: 3px solid #f65314;
|
||||||
|
--scrollbar-background: #ebebeb;
|
||||||
|
--scrollbar-track-border: 1px #dadada solid;
|
||||||
|
--scrollbar-track-box-shadow: 0 0 6px #c8c8c8 inset;
|
||||||
|
--scrollbar-thumb-background: #60bfa8;
|
||||||
|
--scrollbar-thumb-border: 1px solid #dadada;
|
||||||
|
--scrollbar-thumb-background-hover: #019472;
|
||||||
|
--scrollbar-thumb-border-hover: 1px solid #dadada;
|
||||||
|
--scrollbar-thumb-background-active: #b4eee0;
|
||||||
|
--scrollbar-thumb-border-active: 1px solid #dadada;
|
||||||
|
}
|
||||||
154
css/ground.css
Normal file
154
css/ground.css
Normal file
@ -0,0 +1,154 @@
|
|||||||
|
:root
|
||||||
|
{
|
||||||
|
--default-background-color: #a99a97;
|
||||||
|
--default-background-color-light: rgba(104, 71, 70, 0.63);
|
||||||
|
--default-text-color: black;
|
||||||
|
--default-link-color: #730000;
|
||||||
|
--default-graph-color: #37abff;
|
||||||
|
--default-graph-color-light: rgba(98, 66, 64, 0.55);
|
||||||
|
--default-graph-color-dim: rgba(245, 227, 179, 0.5);
|
||||||
|
--default-path-color: #f2796b;
|
||||||
|
--default-point-color: #5ac9af;
|
||||||
|
--button-color: white;
|
||||||
|
--button-background-image: linear-gradient(to bottom, rgb(84, 184, 255), #33aaff);
|
||||||
|
--button-box-shadow: inset 0 0 0.1em 2px rgba(255, 255, 255, 0.1), 0 2px rgba(0, 0, 0, 0.12);
|
||||||
|
--button-text-shadow: 0 0.1em rgba(0, 0, 0, 0.2);
|
||||||
|
--button-border: 1px solid #215a96;
|
||||||
|
--button-background-image-hover: linear-gradient(to bottom, #FF5722, #F44336);
|
||||||
|
--button-background-image-disabled: linear-gradient(to bottom, rgb(230, 230, 230), #bfbfbf);
|
||||||
|
--button-color-disabled: #7c7c7c;
|
||||||
|
--button-border-color-disabled: #b7b7b7;
|
||||||
|
--button-close-color: #aaa;
|
||||||
|
--button-close-color-hover: #000;
|
||||||
|
--window-background: #cdbeb9;
|
||||||
|
--window-border: 1px solid #BBBABA;
|
||||||
|
--dialog-box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.506);
|
||||||
|
--window-active-background: rgb(75, 57, 53);
|
||||||
|
--background-background: rgba(73, 60, 57, 0.74);
|
||||||
|
--background-visible-background: rgba(0, 0, 0, 0.6);
|
||||||
|
--window-title-color: #fff;
|
||||||
|
--window-tools-close-background: linear-gradient(to bottom, #e8616c, #dd202f);
|
||||||
|
--window-tools-close-border: 1px solid #911f28;
|
||||||
|
--window-tools-close-background-hover: #ff7d88;
|
||||||
|
--dialog-loading-background: rgb(185, 223, 255);
|
||||||
|
--dialog-loading-content-border: 10px solid #fff;
|
||||||
|
--dialog-loading-content-border-top: 10px solid #ffe4da;
|
||||||
|
--dialog-loading-content-border-right: 10px solid #967f7a;
|
||||||
|
--dialog-loading-content-border-bottom: 10px solid #4b3935;
|
||||||
|
--window-header-background: #45403a;
|
||||||
|
--window-footer-border-top: 0;
|
||||||
|
--window-footer-background: linear-gradient(to bottom, #cdbeb9, #7d635d);
|
||||||
|
--panel-border: 1px solid #BBBABA;
|
||||||
|
--panel-title-color: #444;
|
||||||
|
--table-td-border-bottom: 1px solid #755e59;
|
||||||
|
--table-td-border: 1px solid #9b8985;
|
||||||
|
--table-header-background: linear-gradient(to bottom, white, #cdc2bf);
|
||||||
|
--table-header-text-background-up: url(img/sort-up.png) no-repeat right;
|
||||||
|
--table-header-text-background-down: url(img/sort-down.png) no-repeat right;
|
||||||
|
--table-header-text-background-up-rtl: url(img/sort-up.png) no-repeat left;
|
||||||
|
--table-header-text-background-down-rtl: url(img/sort-down.png) no-repeat left;
|
||||||
|
--table-header-sort-background: url(img/sort_16.png) no-repeat;
|
||||||
|
--table-tree-background-image: url(img/plus.png);
|
||||||
|
--table-tree-background-image-hover: url(img/plus-hover.png);
|
||||||
|
--table-tree-background-image-expanded: url(img/minus.png);
|
||||||
|
--table-tree-background-image-expanded-hover: url(img/minus-hover.png);
|
||||||
|
--table-row-level-1-background: rgba(221, 221, 221, 0.5);
|
||||||
|
--table-row-level-2-background: rgba(121, 121, 121, 0.3);
|
||||||
|
--table-row-level-3-background: darkkhaki;
|
||||||
|
--table-row-background-hover: rgb(205, 190, 185);
|
||||||
|
--table-row-selected-background: rgb(55, 171, 255);
|
||||||
|
--table-row-selected-box-shadow: #cecbcb 0 1px 10px 0 inset;
|
||||||
|
--table-header-wrap-border: 1px solid #a56c5f;
|
||||||
|
--table-resizer-background: #dde2e3;
|
||||||
|
--button-flat-background: linear-gradient(to bottom, rgb(114, 91, 86) 5%, rgb(164, 140, 134) 100%);
|
||||||
|
--button-flat-border: 1px solid rgb(104, 82, 82);
|
||||||
|
--button-flat-color: #f2f2f2;
|
||||||
|
--button-flat-border-hover: #9c8c8c;
|
||||||
|
--button-flat-background-hover: rgb(241, 120, 107);
|
||||||
|
--colorpicker-button-checked-border: 3px rgb(255, 40, 40) solid;
|
||||||
|
--colorpicker-button-checked-box-shadow: 0 0 1em 1px #747373;
|
||||||
|
--colorpicker-button-hover-border-color: red;
|
||||||
|
--menu-li-hover-background: rgb(55, 171, 255);
|
||||||
|
--menu-li-hover-box-shadow: #cecbcb 0 1px 1px 0;
|
||||||
|
--checkbutton-checked-background: rgb(56, 41, 38);
|
||||||
|
--checkbutton-checked-box-shdow: #815757 0 1px 10px 0 inset;
|
||||||
|
--checkbutton-checked-color: #fff;
|
||||||
|
--tabs-content-border: 1px solid #baa8a3;
|
||||||
|
--tabs-button-background: linear-gradient(to bottom, #4b3935 5%, #9a8780 100%);
|
||||||
|
--tabs-button-border: 1px solid #4b3935;
|
||||||
|
--tabs-button-color: #ffffff;
|
||||||
|
--tabs-button-hover-border: 1px #91726b solid;
|
||||||
|
--tabs-button-checked-box-shadow: 0 2px rgb(255, 255, 255);
|
||||||
|
--tabs-button-checked-background: linear-gradient(to bottom, rgb(75, 57, 53) 10%, #594642);
|
||||||
|
--tabs-button-checked-color: #ffffff;
|
||||||
|
--dropdown-arrow-up-background-image: url(img/dropdown-arrow-up.png);
|
||||||
|
--dropdown-arrow-down-background-image: url(img/dropdown-arrow-down.png);
|
||||||
|
--listview-li-hover-background: #c1bdbd;
|
||||||
|
--menu-border: 1px solid #CCC;
|
||||||
|
--menu-background: #FFF;
|
||||||
|
--menu-color: #333;
|
||||||
|
--menu-box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.506);
|
||||||
|
--textbox-color: black;
|
||||||
|
--textbox-background: white;
|
||||||
|
--textbox-border: 2px solid #9f8781;
|
||||||
|
--textbox-border-color-focus: #37abff;
|
||||||
|
--textbox-box-shadow-focus: 0 0 10px #6faee0;
|
||||||
|
--resizer-horizontal-background: #5a413c;
|
||||||
|
--resizer-vertical-background: #5a413c;
|
||||||
|
--selectlist-arrow-hover-background-image: url(img/arrow-down-hover.png);
|
||||||
|
--selectlist-label-background: #fff;
|
||||||
|
--selectlist-arrow-background-color: #fff;
|
||||||
|
--selectlist-arrow-border: 2px solid #9f8781;
|
||||||
|
--selectlist-arrow-background-image: url(img/arrow-down.png);
|
||||||
|
--searchlist-menu-border: 1px solid #CCC;
|
||||||
|
--searchlist-menu-background: rgba(227, 224, 224, 0.44);
|
||||||
|
--searchlist-menu-color: #333;
|
||||||
|
--lazylist-more-background-image: url(img/arrow-down-hover.png);
|
||||||
|
--button-arrow-background-color: #f3f3f3;
|
||||||
|
--button-arrow-background-border: 1px solid #dadada;
|
||||||
|
--separator-background: rgba(82, 82, 82, 0.38);
|
||||||
|
--separator-box-shadow: inset 0 0 15px #ffffff;
|
||||||
|
--dropdown-visible-img-filter: drop-shadow(0px 0px 8px #3b8de2);
|
||||||
|
--dropdown-visible-badge: drop-shadow(1px 1px 5px #3b8de2);
|
||||||
|
--range-background: rgba(0,0,0,0);
|
||||||
|
--range-track-box-shadow: 0px 0px 0px rgba(95, 153, 86, 0.7), 0px 0px 0px rgba(107, 167, 98, 0.7);
|
||||||
|
--range-track-background: rgba(192, 192, 192, 0.75);
|
||||||
|
--range-track-border: 0px solid rgba(26, 93, 157, 0.35);
|
||||||
|
--range-thumb-box-shadow: 2.2px 2.2px 8.6px rgba(139, 188, 255, 0.78), 0px 0px 2.2px rgba(164, 203, 255, 0.78);
|
||||||
|
--range-thumb-border: 2px solid rgba(115, 163, 255, 0.51);
|
||||||
|
--range-thumb-background: rgba(101, 196, 255, 0.94);
|
||||||
|
--range-track-background-focus: rgba(210, 210, 210, 0.75);
|
||||||
|
--bar-arrow-left-background-image: url(img/arrow-left.png);
|
||||||
|
--bar-arrow-right-background-image: url(img/arrow-right.png);
|
||||||
|
--bar-arrow-left-inactive-background-image: url(img/arrow-left-inactive.png);
|
||||||
|
--bar-arrow-right-inactive-background-image: url(img/arrow-right-inactive.png);
|
||||||
|
--bar-item-background: rgba(235, 240, 242, 0.69);
|
||||||
|
--bar-item-border: 1px solid #dcdcdc;
|
||||||
|
--bar-item-color: #666666;
|
||||||
|
--bar-item-background-hover: rgba(255, 255, 255, 0.87);
|
||||||
|
--bar-item-checked-border-bottom: 3px solid #47abff;
|
||||||
|
--bar-item-checked-box-shadow: #cecbcb 0 1px 10px 0 inset;
|
||||||
|
--multiselect-add-background-image: url(img/add.png);
|
||||||
|
--multiselect-add-background-image-hover: url(img/add-hover.png);
|
||||||
|
--multiselect-list-li-border-bottom: 2px dotted #dadada;
|
||||||
|
--multiselect-list-remove-background-image: url(img/remove.png);
|
||||||
|
--multiselect-list-remove-background-image-hover: url(img/remove-hover.png);
|
||||||
|
--grid-window-over-border: #e13946 dotted 3px;
|
||||||
|
--grid-window-drag-border: #75c6ff dotted 3px;
|
||||||
|
--datetimepicker-calendar-border-right: 3px solid pink;
|
||||||
|
--datetimepicker-clock-background: gainsboro;
|
||||||
|
--datetimepicker-different-month-color: #bebebe;
|
||||||
|
--datetimepicker-day-background-hover: #b9dfff;
|
||||||
|
--datetimepicker-day-selected-background: #4ea3df;
|
||||||
|
--datetimepicker-day-selected-color: #fff;
|
||||||
|
--datetimepicker-day-today-border-bottom: 3px solid #f65314;
|
||||||
|
--scrollbar-background: #ebebeb;
|
||||||
|
--scrollbar-track-border: 1px #dadada solid;
|
||||||
|
--scrollbar-track-box-shadow: 0 0 6px #c8c8c8 inset;
|
||||||
|
--scrollbar-thumb-background: #4ea3df;
|
||||||
|
--scrollbar-thumb-border: 1px solid #dadada;
|
||||||
|
--scrollbar-thumb-background-hover: #59cfff;
|
||||||
|
--scrollbar-thumb-border-hover: 1px solid #dadada;
|
||||||
|
--scrollbar-thumb-background-active: #59cfff;
|
||||||
|
--scrollbar-thumb-border-active: 1px solid #dadada;
|
||||||
|
}
|
||||||
2840
css/iui.css
Normal file
2840
css/iui.css
Normal file
File diff suppressed because one or more lines are too long
1826
css/iui.default.css
Normal file
1826
css/iui.default.css
Normal file
File diff suppressed because it is too large
Load Diff
157
css/night.css
Normal file
157
css/night.css
Normal file
@ -0,0 +1,157 @@
|
|||||||
|
:root
|
||||||
|
{
|
||||||
|
--default-background-color: #5f616c;
|
||||||
|
--default-background-color-light: rgba(95,97,108, 0.8);
|
||||||
|
--default-text-color: white;
|
||||||
|
--default-link-color: #8ddcff;
|
||||||
|
--default-graph-color: #5ac9af;
|
||||||
|
--default-graph-color-light: rgba(255, 87, 34, 0.5);
|
||||||
|
--default-graph-color-dim: rgba(65, 179, 226, 0.5);
|
||||||
|
--default-path-color: #f2796b;
|
||||||
|
--default-point-color: #5ac9af;
|
||||||
|
--default-marker-color: rgba(255, 87, 34);
|
||||||
|
--button-color: white;
|
||||||
|
--button-background-image: linear-gradient(to bottom, rgb(84, 184, 255), #33aaff);
|
||||||
|
--button-box-shadow: inset 0 0 0.1em 2px rgba(255, 255, 255, 0.1), 0 2px rgba(0, 0, 0, 0.12);
|
||||||
|
--button-text-shadow: 0 0.1em rgba(0, 0, 0, 0.2);
|
||||||
|
--button-border: 1px solid #215a96;
|
||||||
|
--button-background-image-hover: linear-gradient(to bottom, #FF5722, #F44336);
|
||||||
|
--button-background-image-disabled: linear-gradient(to bottom, rgb(230, 230, 230), #bfbfbf);
|
||||||
|
--button-color-disabled: #7c7c7c;
|
||||||
|
--button-border-color-disabled: #b7b7b7;
|
||||||
|
--button-close-color: #aaa;
|
||||||
|
--button-close-color-hover: #000;
|
||||||
|
--window-background: #babbc4;
|
||||||
|
--window-border: 1px solid #BBBABA;
|
||||||
|
--dialog-box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.506);
|
||||||
|
--window-active-background: #FF5722;
|
||||||
|
--background-background: rgba(0, 0, 0, 0);
|
||||||
|
--background-visible-background: rgba(0, 0, 0, 0.6);
|
||||||
|
--window-title-color: #fff;
|
||||||
|
--window-tools-close-background: linear-gradient(to bottom, #e8616c, #ff0000);
|
||||||
|
--window-tools-close-border: 1px solid #911f28;
|
||||||
|
--window-tools-close-background-hover: #ff7d88;
|
||||||
|
--dialog-loading-background: #babbc4;
|
||||||
|
--dialog-loading-content-border: 10px solid #fff;
|
||||||
|
--dialog-loading-content-border-top: 10px solid #ffe3e3;
|
||||||
|
--dialog-loading-content-border-right: 10px solid #ffb4b4;
|
||||||
|
--dialog-loading-content-border-bottom: 10px solid #ff4d4d;
|
||||||
|
--window-header-background: #e6e6e6;
|
||||||
|
--window-footer-border-top: #eee solid 1px;
|
||||||
|
--window-footer-background: linear-gradient(to bottom, #babbc4, #e1e2eb);
|
||||||
|
--panel-border: 1px solid #BBBABA;
|
||||||
|
--panel-title-color: #444;
|
||||||
|
--table-td-border-bottom: 1px solid #5d5d5d;
|
||||||
|
--table-td-border: 0;
|
||||||
|
--table-header-background: linear-gradient(to bottom, #ff5722, #fe7043);
|
||||||
|
--table-header-text-background-up: url(img/sort-up.png) no-repeat right;
|
||||||
|
--table-header-text-background-down: url(img/sort-down.png) no-repeat right;
|
||||||
|
--table-header-text-background-up-rtl: url(img/sort-up.png) no-repeat left;
|
||||||
|
--table-header-text-background-down-rtl: url(img/sort-down.png) no-repeat left;
|
||||||
|
--table-header-sort-background: url(img/sort_16.png) no-repeat;
|
||||||
|
--table-tree-background-image: url(img/plus.png);
|
||||||
|
--table-tree-background-image-hover: url(img/plus-hover.png);
|
||||||
|
--table-tree-background-image-expanded: url(img/minus.png);
|
||||||
|
--table-tree-background-image-expanded-hover: url(img/minus-hover.png);
|
||||||
|
--table-row-level-1-background: rgba(221, 221, 221, 0.5);
|
||||||
|
--table-row-level-2-background: rgba(121, 121, 121, 0.3);
|
||||||
|
--table-row-level-3-background: darkkhaki;
|
||||||
|
--table-row-background-hover: #6dceff;
|
||||||
|
--table-row-selected-background: rgb(0, 161, 241);
|
||||||
|
--table-row-selected-box-shadow: #cecbcb 0 1px 10px 0 inset;
|
||||||
|
--table-header-wrap-border: 1px solid #c9c9c9;
|
||||||
|
--table-resizer-background: #ff8c68;
|
||||||
|
--button-flat-background: #5f616c;
|
||||||
|
--button-flat-border: 1px solid rgba(220, 220, 220, 0.51);
|
||||||
|
--button-flat-color: #ffffff;
|
||||||
|
--button-flat-border-hover: #a10808;
|
||||||
|
--button-flat-background-hover: rgb(139, 139, 139);
|
||||||
|
--button-flat-color-hover: black;
|
||||||
|
--colorpicker-button-checked-border: 3px rgb(255, 40, 40) solid;
|
||||||
|
--colorpicker-button-checked-box-shadow: 0 0 1em 1px #747373;
|
||||||
|
--colorpicker-button-hover-border-color: red;
|
||||||
|
--menu-li-hover-background: rgb(255, 87, 34);
|
||||||
|
--menu-li-hover-box-shadow: #cecbcb 0 1px 1px 0;
|
||||||
|
--checkbutton-checked-background: rgb(72, 72, 72);
|
||||||
|
--checkbutton-checked-box-shdow: #ffffff 0 1px 10px 0 inset;
|
||||||
|
--checkbutton-checked-color: white;
|
||||||
|
--tabs-content-border: 1px solid #dcdcdc;
|
||||||
|
--tabs-button-background: linear-gradient(to bottom, #e1e2eb 5%, #babbc4 100%);
|
||||||
|
--tabs-button-border: 1px solid #dcdcdc;
|
||||||
|
--tabs-button-color: #080808;
|
||||||
|
--tabs-button-hover-border: 1px red solid;
|
||||||
|
--tabs-button-checked-box-shadow: 0 2px rgb(255, 255, 255);
|
||||||
|
--tabs-button-checked-background: #babbc4;
|
||||||
|
--tabs-button-checked-color: #fff;
|
||||||
|
--dropdown-arrow-up-background-image: url(img/dropdown-arrow-up.png);
|
||||||
|
--dropdown-arrow-down-background-image: url(img/dropdown-arrow-down.png);
|
||||||
|
--listview-li-hover-background: #eee;
|
||||||
|
--menu-border: 1px solid #787878;
|
||||||
|
--menu-background: #5f616c;
|
||||||
|
--menu-color: #fff;
|
||||||
|
--menu-box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.506);
|
||||||
|
--textbox-color: white;
|
||||||
|
--textbox-background: #939393;
|
||||||
|
--textbox-border: 2px solid #5f616c;
|
||||||
|
--textbox-border-color-focus: #ff5722;
|
||||||
|
--textbox-box-shadow-focus: 0 0 10px #ff5722;
|
||||||
|
--resizer-horizontal-background: #5f616c;
|
||||||
|
--resizer-vertical-background: #5f616c;
|
||||||
|
--selectlist-arrow-hover-background-image: url(img/arrow-down-hover.png);
|
||||||
|
--selectlist-label-background: #939393;
|
||||||
|
--selectlist-arrow-background-color: #5f616c;
|
||||||
|
--selectlist-arrow-border: 2px solid #5f616c;
|
||||||
|
--selectlist-arrow-background-image: url(img/arrow-down.png);
|
||||||
|
--searchlist-menu-border: 1px solid #CCC;
|
||||||
|
--searchlist-menu-background: rgba(95, 97, 108, 0.7);
|
||||||
|
--searchlist-menu-color: #333;
|
||||||
|
--lazylist-more-background-image: url(img/arrow-down-hover.png);
|
||||||
|
--button-arrow-background-color: #72747c;
|
||||||
|
--button-arrow-background-border: 1px solid #717171;
|
||||||
|
--separator-background: #5f616c;
|
||||||
|
--separator-box-shadow: inset 0 0 15px #4b4b4b;
|
||||||
|
--dropdown-visible-img-filter: drop-shadow(0px 0px 8px #3b8de2);
|
||||||
|
--dropdown-visible-badge: drop-shadow(1px 1px 5px #3b8de2);
|
||||||
|
--range-background: rgba(0,0,0,0);
|
||||||
|
--range-track-box-shadow: 0px 0px 0px rgba(95, 153, 86, 0.7), 0px 0px 0px rgba(107, 167, 98, 0.7);
|
||||||
|
--range-track-background: rgba(192, 192, 192, 0.75);
|
||||||
|
--range-track-border: 0px solid rgba(26, 93, 157, 0.35);
|
||||||
|
--range-thumb-box-shadow: 2.2px 2.2px 8.6px rgba(139, 188, 255, 0.78), 0px 0px 2.2px rgba(164, 203, 255, 0.78);
|
||||||
|
--range-thumb-border: 2px solid rgba(115, 163, 255, 0.51);
|
||||||
|
--range-thumb-background: rgba(101, 196, 255, 0.94);
|
||||||
|
--range-track-background-focus: rgba(210, 210, 210, 0.75);
|
||||||
|
--bar-arrow-left-background-image: url(img/arrow-left.png);
|
||||||
|
--bar-arrow-right-background-image: url(img/arrow-right.png);
|
||||||
|
--bar-arrow-left-inactive-background-image: url(img/arrow-left-inactive.png);
|
||||||
|
--bar-arrow-right-inactive-background-image: url(img/arrow-right-inactive.png);
|
||||||
|
--bar-item-background: rgb(125, 127, 137);
|
||||||
|
--bar-item-border: 1px solid #686868;
|
||||||
|
--bar-item-color: #eee;
|
||||||
|
--bar-item-background-hover: rgb(186, 187, 196);
|
||||||
|
--bar-item-checked-border-bottom: 3px solid #ff5722;
|
||||||
|
--bar-item-checked-box-shadow: #ffffff 0 1px 10px 0 inset;
|
||||||
|
--multiselect-add-background-image: url(img/add.png);
|
||||||
|
--multiselect-add-background-image-hover: url(img/add-hover.png);
|
||||||
|
--multiselect-list-li-border-bottom: 2px dotted #dadada;
|
||||||
|
--multiselect-list-remove-background-image: url(img/remove.png);
|
||||||
|
--multiselect-list-remove-background-image-hover: url(img/remove-hover.png);
|
||||||
|
--grid-window-over-border: #e13946 dotted 3px;
|
||||||
|
--grid-window-drag-border: #75c6ff dotted 3px;
|
||||||
|
--datetimepicker-calendar-border-right: 3px solid pink;
|
||||||
|
--datetimepicker-clock-background: #71767a;
|
||||||
|
--datetimepicker-different-month-color: #bebebe;
|
||||||
|
--datetimepicker-day-background-hover: #b9dfff;
|
||||||
|
--datetimepicker-day-selected-background: #4ea3df;
|
||||||
|
--datetimepicker-day-selected-color: #fff;
|
||||||
|
--datetimepicker-day-today-border-bottom: 3px solid #f65314;
|
||||||
|
--scrollbar-background: #ebebeb;
|
||||||
|
--scrollbar-track-border: 1px #dadada solid;
|
||||||
|
--scrollbar-track-box-shadow: 0 0 6px #c8c8c8 inset;
|
||||||
|
--scrollbar-thumb-background: #4ea3df;
|
||||||
|
--scrollbar-thumb-border: 1px solid #dadada;
|
||||||
|
--scrollbar-thumb-background-hover: #59cfff;
|
||||||
|
--scrollbar-thumb-border-hover: 1px solid #dadada;
|
||||||
|
--scrollbar-thumb-background-active: #59cfff;
|
||||||
|
--scrollbar-thumb-border-active: 1px solid #dadada;
|
||||||
|
--button-arrow-background-color-hover: #f3f3f3;
|
||||||
|
}
|
||||||
154
css/sea.css
Normal file
154
css/sea.css
Normal file
@ -0,0 +1,154 @@
|
|||||||
|
:root {
|
||||||
|
--default-background-color: rgb(96, 104, 113);
|
||||||
|
--default-background-color-light: rgb(114, 121, 129);
|
||||||
|
--default-text-color: white;
|
||||||
|
--default-link-color: #5badff;
|
||||||
|
--default-graph-color: #37abff;
|
||||||
|
--default-graph-color-light: rgba(9, 132, 255, 0.47);
|
||||||
|
--default-graph-color-dim: rgba(245, 227, 179, 0.5);
|
||||||
|
--default-path-color: #f2796b;
|
||||||
|
--default-point-color: #4c7ab4;
|
||||||
|
--button-color: white;
|
||||||
|
--button-background-image: linear-gradient(to bottom, rgb(9, 132, 255), #0984ff);
|
||||||
|
--button-box-shadow: inset 0 0 0.1em 2px rgba(255, 255, 255, 0.1), 0 2px rgba(0, 0, 0, 0.12);
|
||||||
|
--button-text-shadow: 0 0.1em rgba(0, 0, 0, 0.2);
|
||||||
|
--button-border: 1px solid #215a96;
|
||||||
|
--button-background-image-hover: linear-gradient(to bottom, #FF5722, #F44336);
|
||||||
|
--button-background-image-disabled: linear-gradient(to bottom, rgb(230, 230, 230), #bfbfbf);
|
||||||
|
--button-color-disabled: #7c7c7c;
|
||||||
|
--button-border-color-disabled: #b7b7b7;
|
||||||
|
--button-close-color: #aaa;
|
||||||
|
--button-close-color-hover: #000;
|
||||||
|
--window-background: #6a6a6a;
|
||||||
|
--window-border: 1px solid #6a6a6a;
|
||||||
|
--dialog-box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.506);
|
||||||
|
--window-active-background: #0984FF;
|
||||||
|
--background-background: rgba(73, 60, 57, 0.74);
|
||||||
|
--background-visible-background: rgba(0, 0, 0, 0.6);
|
||||||
|
--window-title-color: #fff;
|
||||||
|
--window-tools-close-background: linear-gradient(to bottom, #e8616c, #dd202f);
|
||||||
|
--window-tools-close-border: 1px solid #911f28;
|
||||||
|
--window-tools-close-background-hover: #ff7d88;
|
||||||
|
--dialog-loading-background: rgb(185, 223, 255);
|
||||||
|
--dialog-loading-content-border: 10px solid #fff;
|
||||||
|
--dialog-loading-content-border-top: 10px solid #87c0f9;
|
||||||
|
--dialog-loading-content-border-right: 10px solid #5fa4e9;
|
||||||
|
--dialog-loading-content-border-bottom: 10px solid #0984FF;
|
||||||
|
--window-header-background: #9c9c9c;
|
||||||
|
--window-footer-border-top: 0;
|
||||||
|
--window-footer-background: linear-gradient(to bottom, #6a6a6a, #9e9e9e);
|
||||||
|
--panel-border: 1px solid #BBBABA;
|
||||||
|
--panel-title-color: #444;
|
||||||
|
--table-td-border-bottom: 1px solid #878c93;
|
||||||
|
--table-td-border: 0;
|
||||||
|
--table-header-background: linear-gradient(to bottom, #555a60, #6e757d);
|
||||||
|
--table-header-text-background-up: url(img/sort-up.png) no-repeat right;
|
||||||
|
--table-header-text-background-down: url(img/sort-down.png) no-repeat right;
|
||||||
|
--table-header-text-background-up-rtl: url(img/sort-up.png) no-repeat left;
|
||||||
|
--table-header-text-background-down-rtl: url(img/sort-down.png) no-repeat left;
|
||||||
|
--table-header-sort-background: url(img/sort_16.png) no-repeat;
|
||||||
|
--table-tree-background-image: url(img/plus.png);
|
||||||
|
--table-tree-background-image-hover: url(img/plus-hover.png);
|
||||||
|
--table-tree-background-image-expanded: url(img/minus.png);
|
||||||
|
--table-tree-background-image-expanded-hover: url(img/minus-hover.png);
|
||||||
|
--table-row-level-1-background: rgba(221, 221, 221, 0.5);
|
||||||
|
--table-row-level-2-background: rgba(121, 121, 121, 0.3);
|
||||||
|
--table-row-level-3-background: darkkhaki;
|
||||||
|
--table-row-background-hover: rgb(156, 156, 156);
|
||||||
|
--table-row-selected-background: rgb(9, 132, 255);
|
||||||
|
--table-row-selected-box-shadow: #cecbcb 0 1px 10px 0 inset;
|
||||||
|
--table-header-wrap-border: 1px solid #0984ff;
|
||||||
|
--table-resizer-background: #cccccc;
|
||||||
|
--button-flat-background: linear-gradient(to bottom, rgb(9, 132, 255) 5%, rgb(9, 132, 255) 100%);
|
||||||
|
--button-flat-border: 1px solid rgb(60, 152, 244);
|
||||||
|
--button-flat-color: #f2f2f2;
|
||||||
|
--button-flat-border-hover: #838383;
|
||||||
|
--button-flat-background-hover: rgb(255, 255, 255);
|
||||||
|
--button-flat-color-hover: black;
|
||||||
|
--colorpicker-button-checked-border: 3px rgb(255, 40, 40) solid;
|
||||||
|
--colorpicker-button-checked-box-shadow: 0 0 1em 1px #747373;
|
||||||
|
--colorpicker-button-hover-border-color: red;
|
||||||
|
--menu-li-hover-background: rgb(55, 171, 255);
|
||||||
|
--menu-li-hover-box-shadow: #cecbcb 0 1px 1px 0;
|
||||||
|
--checkbutton-checked-background: rgb(194, 194, 194);
|
||||||
|
--checkbutton-checked-box-shdow: #393939 0 1px 15px 0 inset;
|
||||||
|
--checkbutton-checked-color: black;
|
||||||
|
--tabs-content-border: 1px solid #0984ff;
|
||||||
|
--tabs-button-background: linear-gradient(to bottom, #0158af 5%, #6a6a6a 100%);
|
||||||
|
--tabs-button-border: 1px solid #0984ff;
|
||||||
|
--tabs-button-color: #ffffff;
|
||||||
|
--tabs-button-hover-border: 1px #d9ecff solid;
|
||||||
|
--tabs-button-checked-box-shadow: 0 2px rgb(255, 255, 255);
|
||||||
|
--tabs-button-checked-background: linear-gradient(to bottom, rgb(9, 132, 255) 10%, #0984ff);
|
||||||
|
--tabs-button-checked-color: #ffffff;
|
||||||
|
--dropdown-arrow-up-background-image: url(img/dropdown-arrow-up.png);
|
||||||
|
--dropdown-arrow-down-background-image: url(img/dropdown-arrow-down.png);
|
||||||
|
--listview-li-hover-background: #d2d2d2;
|
||||||
|
--menu-border: 1px solid #CCC;
|
||||||
|
--menu-background: #efefef;
|
||||||
|
--menu-color: #333;
|
||||||
|
--menu-box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.506);
|
||||||
|
--textbox-color: black;
|
||||||
|
--textbox-background: white;
|
||||||
|
--textbox-border: 2px solid #0984ff;
|
||||||
|
--textbox-border-color-focus: #e36872;
|
||||||
|
--textbox-box-shadow-focus: 0 0 10px #e34956;
|
||||||
|
--resizer-horizontal-background: #0984ff;
|
||||||
|
--resizer-vertical-background: #0984ff;
|
||||||
|
--selectlist-arrow-hover-background-image: url(img/arrow-down-hover.png);
|
||||||
|
--selectlist-label-background: #fff;
|
||||||
|
--selectlist-arrow-background-color: #fff;
|
||||||
|
--selectlist-arrow-border: 2px solid #0984ff;
|
||||||
|
--selectlist-arrow-background-image: url(img/arrow-down.png);
|
||||||
|
--searchlist-menu-border: 1px solid #CCC;
|
||||||
|
--searchlist-menu-background: rgba(227, 224, 224, 0.44);
|
||||||
|
--searchlist-menu-color: #333;
|
||||||
|
--lazylist-more-background-image: url(img/arrow-down-hover.png);
|
||||||
|
--button-arrow-background-color: #ffffff;
|
||||||
|
--button-arrow-background-border: 1px solid #0984ff;
|
||||||
|
--separator-background: rgb(100, 178, 255);
|
||||||
|
--separator-box-shadow: inset 0 0 15px #41a0ff;
|
||||||
|
--dropdown-visible-img-filter: drop-shadow(0px 0px 8px #ffffff);
|
||||||
|
--dropdown-visible-badge: drop-shadow(1px 1px 5px #ffa1a1);
|
||||||
|
--range-background: rgba(0,0,0,0);
|
||||||
|
--range-track-box-shadow: 0px 0px 0px rgba(95, 153, 86, 0.7), 0px 0px 0px rgba(107, 167, 98, 0.7);
|
||||||
|
--range-track-background: rgba(192, 192, 192, 0.75);
|
||||||
|
--range-track-border: 0px solid rgba(26, 93, 157, 0.35);
|
||||||
|
--range-thumb-box-shadow: 2.2px 2.2px 8.6px rgba(139, 188, 255, 0.78), 0px 0px 2.2px rgba(164, 203, 255, 0.78);
|
||||||
|
--range-thumb-border: 2px solid rgba(115, 163, 255, 0.51);
|
||||||
|
--range-thumb-background: rgba(101, 196, 255, 0.94);
|
||||||
|
--range-track-background-focus: rgba(210, 210, 210, 0.75);
|
||||||
|
--bar-arrow-left-background-image: url(img/arrow-left.png);
|
||||||
|
--bar-arrow-right-background-image: url(img/arrow-right.png);
|
||||||
|
--bar-arrow-left-inactive-background-image: url(img/arrow-left-inactive.png);
|
||||||
|
--bar-arrow-right-inactive-background-image: url(img/arrow-right-inactive.png);
|
||||||
|
--bar-item-background: rgba(235, 240, 242, 0.69);
|
||||||
|
--bar-item-border: 1px solid #dcdcdc;
|
||||||
|
--bar-item-color: #666666;
|
||||||
|
--bar-item-background-hover: rgba(255, 255, 255, 0.87);
|
||||||
|
--bar-item-checked-border-bottom: 3px solid #e03d4a;
|
||||||
|
--bar-item-checked-box-shadow: #6a6a6a 0 1px 10px 0 inset;
|
||||||
|
--multiselect-add-background-image: url(img/add.png);
|
||||||
|
--multiselect-add-background-image-hover: url(img/add-hover.png);
|
||||||
|
--multiselect-list-li-border-bottom: 2px dotted #dadada;
|
||||||
|
--multiselect-list-remove-background-image: url(img/remove.png);
|
||||||
|
--multiselect-list-remove-background-image-hover: url(img/remove-hover.png);
|
||||||
|
--grid-window-over-border: #e13946 dotted 3px;
|
||||||
|
--grid-window-drag-border: #75c6ff dotted 3px;
|
||||||
|
--datetimepicker-calendar-border-right: 3px solid pink;
|
||||||
|
--datetimepicker-clock-background: gainsboro;
|
||||||
|
--datetimepicker-different-month-color: #bebebe;
|
||||||
|
--datetimepicker-day-background-hover: #b9dfff;
|
||||||
|
--datetimepicker-day-selected-background: #4ea3df;
|
||||||
|
--datetimepicker-day-selected-color: #fff;
|
||||||
|
--datetimepicker-day-today-border-bottom: 3px solid #f65314;
|
||||||
|
--scrollbar-background: #ebebeb;
|
||||||
|
--scrollbar-track-border: 1px #dadada solid;
|
||||||
|
--scrollbar-track-box-shadow: 0 0 6px #c8c8c8 inset;
|
||||||
|
--scrollbar-thumb-background: #ababab;
|
||||||
|
--scrollbar-thumb-border: 1px solid #dadada;
|
||||||
|
--scrollbar-thumb-background-hover: #53a9ff;
|
||||||
|
--scrollbar-thumb-border-hover: 1px solid #dadada;
|
||||||
|
--scrollbar-thumb-background-active: #59cfff;
|
||||||
|
--scrollbar-thumb-border-active: 1px solid #dadada;
|
||||||
|
}
|
||||||
201
css/sky.css
Normal file
201
css/sky.css
Normal file
@ -0,0 +1,201 @@
|
|||||||
|
|
||||||
|
:root {
|
||||||
|
--default-background-color: #ffffff;
|
||||||
|
--default-background-color-light: rgba(209, 209, 209, 0.5);
|
||||||
|
--default-text-color: black;
|
||||||
|
--default-link-color: #0099d5;
|
||||||
|
--default-graph-color: #5ac9af;
|
||||||
|
--default-graph-color-light: rgba(90, 201, 175, 0.5);
|
||||||
|
--default-graph-color-dim: rgba(245, 227, 179, 0.5);
|
||||||
|
--default-path-color: #f2796b;
|
||||||
|
--default-point-color: #5ac9af;
|
||||||
|
|
||||||
|
--button-color: white;
|
||||||
|
--button-background-image: linear-gradient(to bottom, rgb(84, 184, 255), #33aaff);
|
||||||
|
--button-box-shadow:inset 0 0 0.1em 2px rgba(255, 255, 255, 0.1), 0 2px rgba(0, 0, 0, 0.12);
|
||||||
|
--button-text-shadow: 0 0.1em rgba(0, 0, 0, 0.2);
|
||||||
|
--button-border:1px solid #215a96;
|
||||||
|
--button-background-image-hover: linear-gradient(to bottom, #FF5722, #F44336);
|
||||||
|
--button-background-image-disabled: linear-gradient(to bottom, rgb(230, 230, 230), #bfbfbf);
|
||||||
|
--button-color-disabled: #7c7c7c;
|
||||||
|
--button-border-color-disabled: #b7b7b7;
|
||||||
|
--button-close-color: #aaa;
|
||||||
|
--button-close-color-hover: #000;
|
||||||
|
--window-background: #fff;
|
||||||
|
--window-border: 1px solid #BBBABA;
|
||||||
|
--dialog-box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.506);
|
||||||
|
--window-active-background: rgb(185, 223, 255);
|
||||||
|
--background-background:rgba(0, 0, 0, 0);
|
||||||
|
--background-visible-background: rgba(0, 0, 0, 0.6);
|
||||||
|
|
||||||
|
--window-title-color: #444;
|
||||||
|
--window-tools-close-background: linear-gradient(to bottom, #e8616c, #dd202f);
|
||||||
|
--window-tools-close-border:1px solid #911f28;
|
||||||
|
|
||||||
|
--window-tools-close-background-hover: #ff7d88;
|
||||||
|
--dialog-loading-background:rgb(185, 223, 255);
|
||||||
|
|
||||||
|
--dialog-loading-content-border: 10px solid #fff;
|
||||||
|
--dialog-loading-content-border-top: 10px solid #ffe3e3;
|
||||||
|
--dialog-loading-content-border-right: 10px solid #ffb4b4;
|
||||||
|
--dialog-loading-content-border-bottom: 10px solid #ff4d4d;
|
||||||
|
|
||||||
|
--window-header-background: #e6e6e6;
|
||||||
|
--window-footer-border-top: #eee solid 1px;
|
||||||
|
--window-footer-background: linear-gradient(to bottom, white, #e1e2eb);
|
||||||
|
|
||||||
|
--panel-border: 1px solid #BBBABA;
|
||||||
|
--panel-title-color: #444;
|
||||||
|
--table-td-border: 1px solid #c9c9c9;
|
||||||
|
|
||||||
|
--table-header-background: linear-gradient(to bottom, white, #e1e2eb);
|
||||||
|
--table-header-text-background-up: url(img/"sort-up.png") no-repeat right;
|
||||||
|
--table-header-text-background-down:url(img/"sort-down.png") no-repeat right;
|
||||||
|
--table-header-text-background-up-rtl: url(img/"sort-up.png") no-repeat left;
|
||||||
|
--table-header-text-background-down-rtl:url(img/"sort-down.png") no-repeat left;
|
||||||
|
|
||||||
|
--table-header-sort-background: url(img/"sort_16.png") no-repeat;
|
||||||
|
|
||||||
|
--table-tree-background-image: url(img/"plus.png");
|
||||||
|
--table-tree-background-image-hover: url(img/"plus-hover.png");
|
||||||
|
|
||||||
|
--table-tree-background-image-expanded: url(img/"minus.png");
|
||||||
|
--table-tree-background-image-expanded-hover: url(img/"minus-hover.png");
|
||||||
|
|
||||||
|
--table-row-level-1-background: rgba(221, 221, 221, 0.5);
|
||||||
|
--table-row-level-2-background: rgba(121, 121, 121, 0.3);
|
||||||
|
--table-row-level-3-background: darkkhaki;
|
||||||
|
--table-row-background-hover: #DEF;
|
||||||
|
--table-row-selected-background: rgb(185, 223, 255);
|
||||||
|
--table-row-selected-box-shadow: #cecbcb 0 1px 10px 0 inset;
|
||||||
|
|
||||||
|
--table-header-wrap-border: 1px solid #c9c9c9;
|
||||||
|
--table-resizer-background: #dde2e3;
|
||||||
|
|
||||||
|
--button-flat-background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 5%, rgb(246, 246, 246) 100%);
|
||||||
|
--button-flat-border: 1px solid rgba(220, 220, 220, 0.51);
|
||||||
|
--button-flat-color: #666666;
|
||||||
|
--button-flat-border-hover:#ffcbcb;
|
||||||
|
--button-flat-background-hover: rgb(184, 218, 255);
|
||||||
|
|
||||||
|
--colorpicker-button-checked-border: 3px rgb(255, 40, 40) solid;
|
||||||
|
--colorpicker-button-checked-box-shadow: 0 .0 1em 1px #747373;
|
||||||
|
--colorpicker-button-hover-border-color: red;
|
||||||
|
|
||||||
|
--menu-li-hover-background:rgb(185, 223, 255);
|
||||||
|
--menu-li-hover-box-shadow:#cecbcb 0 1px 1px 0;
|
||||||
|
|
||||||
|
--checkbutton-checked-background:rgb(185, 223, 255);
|
||||||
|
--checkbutton-checked-box-shdow:#ffffff 0 1px 10px 0 inset;
|
||||||
|
|
||||||
|
--tabs-content-border: 1px solid #dcdcdc;
|
||||||
|
|
||||||
|
--tabs-button-background: linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
|
||||||
|
--tabs-button-border: 1px solid #dcdcdc;
|
||||||
|
--tabs-button-color: #666666;
|
||||||
|
|
||||||
|
--tabs-button-hover-border:1px red solid;
|
||||||
|
--tabs-button-checked-box-shadow:0 2px rgb(255, 255, 255);
|
||||||
|
--tabs-button-checked-background:linear-gradient(to bottom, rgba(173, 213, 255, 0.86) 10%, #ffffff);
|
||||||
|
--tabs-button-checked-color:#000000;
|
||||||
|
|
||||||
|
--dropdown-arrow-up-background-image: url(img/"dropdown-arrow-up.png");
|
||||||
|
--dropdown-arrow-down-background-image: url(img/"dropdown-arrow-down.png");
|
||||||
|
|
||||||
|
--listview-li-hover-background: #eee;
|
||||||
|
--menu-border:1px solid #CCC;
|
||||||
|
--menu-background: #FFF;
|
||||||
|
--menu-color: #333;
|
||||||
|
--menu-box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.506);
|
||||||
|
|
||||||
|
--textbox-color: black;
|
||||||
|
--textbox-background: white;
|
||||||
|
|
||||||
|
--textbox-border:2px solid #dadada;
|
||||||
|
--textbox-border-color-focus: #9ecaed;
|
||||||
|
|
||||||
|
--textbox-box-shadow-focus:0 0 10px #9ecaed;
|
||||||
|
|
||||||
|
--resizer-horizontal-background:#dde2e3;
|
||||||
|
--resizer-vertical-background:#dde2e3;
|
||||||
|
|
||||||
|
--selectlist-arrow-hover-background-image: url(img/arrow-down-hover.png);
|
||||||
|
|
||||||
|
--selectlist-label-background: #fff;
|
||||||
|
|
||||||
|
--selectlist-arrow-background-color:#fff;
|
||||||
|
--selectlist-arrow-border: 2px solid #dadada;
|
||||||
|
--selectlist-arrow-background-image: url(img/arrow-down.png);
|
||||||
|
|
||||||
|
--searchlist-menu-border: 1px solid #CCC;
|
||||||
|
--searchlist-menu-background: rgba(255, 255, 255, 0.44);
|
||||||
|
--searchlist-menu-color: #333;
|
||||||
|
|
||||||
|
--lazylist-more-background-image:url(img/arrow-down-hover.png);
|
||||||
|
|
||||||
|
--button-arrow-background-color:#f3f3f3;
|
||||||
|
--button-arrow-background-border: 1px solid #dadada;
|
||||||
|
--button-arrow-background-color-hover:#f3f3f3;;
|
||||||
|
|
||||||
|
|
||||||
|
--separator-background: rgba(82, 82, 82, 0.38);
|
||||||
|
--separator-box-shadow: inset 0 0 15px #ffffff;
|
||||||
|
|
||||||
|
--dropdown-visible-img-filter: drop-shadow(0px 0px 8px #3b8de2);
|
||||||
|
--dropdown-visible-badge: drop-shadow(1px 1px 5px #3b8de2);
|
||||||
|
|
||||||
|
--range-background: rgba(0,0,0,0);
|
||||||
|
--range-track-box-shadow: 0px 0px 0px rgba(95, 153, 86, 0.7), 0px 0px 0px rgba(107, 167, 98, 0.7);
|
||||||
|
--range-track-background: rgba(192, 192, 192, 0.75);
|
||||||
|
--range-track-border: 0px solid rgba(26, 93, 157, 0.35);
|
||||||
|
--range-thumb-box-shadow: 2.2px 2.2px 8.6px rgba(139, 188, 255, 0.78), 0px 0px 2.2px rgba(164, 203, 255, 0.78);
|
||||||
|
--range-thumb-border: 2px solid rgba(115, 163, 255, 0.51);
|
||||||
|
--range-thumb-background: rgba(101, 196, 255, 0.94);
|
||||||
|
|
||||||
|
--range-track-background-focus: rgba(210, 210, 210, 0.75);
|
||||||
|
|
||||||
|
--bar-arrow-left-background-image: url(img/arrow-left.png);
|
||||||
|
--bar-arrow-right-background-image: url(img/arrow-right.png);
|
||||||
|
--bar-arrow-left-inactive-background-image: url(img/arrow-left-inactive.png);
|
||||||
|
--bar-arrow-right-inactive-background-image: url(img/arrow-right-inactive.png);
|
||||||
|
|
||||||
|
--bar-item-background: rgba(235, 240, 242, 0.69);
|
||||||
|
--bar-item-border: 1px solid #dcdcdc;
|
||||||
|
--bar-item-color: #666666;
|
||||||
|
--bar-item-background-hover: rgba(255, 255, 255, 0.87);
|
||||||
|
|
||||||
|
--bar-item-checked-border-bottom: 3px solid #47abff;
|
||||||
|
--bar-item-checked-box-shadow: #cecbcb 0 1px 10px 0 inset;
|
||||||
|
|
||||||
|
--multiselect-add-background-image: url(img/add.png);
|
||||||
|
--multiselect-add-background-image-hover: url(img/add-hover.png);
|
||||||
|
--multiselect-list-li-border-bottom: 2px dotted #dadada;
|
||||||
|
|
||||||
|
--multiselect-list-remove-background-image: url(img/remove.png);
|
||||||
|
--multiselect-list-remove-background-image-hover: url(img/remove-hover.png);
|
||||||
|
|
||||||
|
|
||||||
|
--grid-window-over-border: #e13946 dotted 3px;
|
||||||
|
--grid-window-drag-border: #75c6ff dotted 3px;
|
||||||
|
|
||||||
|
--datetimepicker-calendar-border-right: 3px solid pink;
|
||||||
|
--datetimepicker-clock-background: gainsboro;
|
||||||
|
|
||||||
|
--datetimepicker-different-month-color: #bebebe;
|
||||||
|
|
||||||
|
--datetimepicker-day-background-hover: #b9dfff;
|
||||||
|
|
||||||
|
--datetimepicker-day-selected-background: #4ea3df;
|
||||||
|
--datetimepicker-day-selected-color: #fff;
|
||||||
|
--datetimepicker-day-today-border-bottom: 3px solid #f65314;
|
||||||
|
|
||||||
|
--scrollbar-background: #ebebeb;
|
||||||
|
--scrollbar-track-border:1px #dadada solid;
|
||||||
|
--scrollbar-track-box-shadow:0 0 6px #c8c8c8 inset;
|
||||||
|
--scrollbar-thumb-background:#4ea3df;
|
||||||
|
--scrollbar-thumb-border:1px solid #dadada;
|
||||||
|
--scrollbar-thumb-background-hover:#59cfff;
|
||||||
|
--scrollbar-thumb-border-hover: 1px solid #dadada;
|
||||||
|
--scrollbar-thumb-background-active:#59cfff;
|
||||||
|
--scrollbar-thumb-border-active:1px solid #dadada;
|
||||||
|
}
|
||||||
157
css/space.css
Normal file
157
css/space.css
Normal file
@ -0,0 +1,157 @@
|
|||||||
|
:root
|
||||||
|
{
|
||||||
|
--background-background: rgba(79, 71, 103, 0.76);
|
||||||
|
--background-visible-background: rgba(59, 50, 84, 0.83);
|
||||||
|
--bar-arrow-left-background-image: url(img/arrow-left.png);
|
||||||
|
--bar-arrow-left-inactive-background-image: url(img/arrow-left-inactive.png);
|
||||||
|
--bar-arrow-right-background-image: url(img/arrow-right.png);
|
||||||
|
--bar-arrow-right-inactive-background-image: url(img/arrow-right-inactive.png);
|
||||||
|
--bar-item-background-hover: rgb(51, 43, 74);
|
||||||
|
--bar-item-background: rgb(102, 177, 215);
|
||||||
|
--bar-item-border: 1px solid #2fc3ba;
|
||||||
|
--bar-item-checked-border-bottom: 3px solid #8070ad;
|
||||||
|
--bar-item-checked-box-shadow: #211544 0 1px 10px 0 inset;
|
||||||
|
--bar-item-color: #666666;
|
||||||
|
--button-arrow-background-border: 1px solid rgba(46, 194, 186, 0);
|
||||||
|
--button-arrow-background-color-hover: #71c5db;
|
||||||
|
--button-arrow-background-color: rgba(255, 255, 255, 0);
|
||||||
|
--button-background-image-disabled: linear-gradient(to bottom, rgb(163, 163, 163), #bfbfbf);
|
||||||
|
--button-background-image-hover: linear-gradient(to bottom, #8070ad, #9988c9);
|
||||||
|
--button-background-image: linear-gradient(to bottom, #009688, #2bc3b9);
|
||||||
|
--button-border-color-disabled: #b7b7b7;
|
||||||
|
--button-border: 1px solid #215a96;
|
||||||
|
--button-box-shadow: inset 0 0 0.1em 2px rgba(255, 255, 255, 0.1), 0 2px rgba(0, 0, 0, 0.12);
|
||||||
|
--button-close-color-hover: #000;
|
||||||
|
--button-close-color: #aaa;
|
||||||
|
--button-color-disabled: #7c7c7c;
|
||||||
|
--button-color: white;
|
||||||
|
--button-flat-background-hover: rgb(51, 43, 74);
|
||||||
|
--button-flat-background: linear-gradient(to bottom,#8070ad 5%, #8070ad 100%);
|
||||||
|
--button-flat-border-hover: #8070ad;
|
||||||
|
--button-flat-border: 1px solid rgba(220, 220, 220, 0.51);
|
||||||
|
--button-flat-color-hover: white;
|
||||||
|
--button-flat-color: #ffffff;
|
||||||
|
--button-text-shadow: 0 0.1em rgba(0, 0, 0, 0.2);
|
||||||
|
--checkbutton-checked-background: rgb(51, 43, 74);
|
||||||
|
--checkbutton-checked-box-shdow: #8070ad 0 1px 10px 0 inset;
|
||||||
|
--checkbutton-checked-color: #a9f6ff;
|
||||||
|
--colorpicker-button-checked-border: 3px rgb(255, 40, 40) solid;
|
||||||
|
--colorpicker-button-checked-box-shadow: 0 0 1em 1px #747373;
|
||||||
|
--colorpicker-button-hover-border-color: red;
|
||||||
|
--datetimepicker-calendar-border-right: 3px solid pink;
|
||||||
|
--datetimepicker-clock-background: #685992;
|
||||||
|
--datetimepicker-day-background-hover: #67b3d8;
|
||||||
|
--datetimepicker-day-selected-background: #27c2b7;
|
||||||
|
--datetimepicker-day-selected-color: #fff;
|
||||||
|
--datetimepicker-day-today-border-bottom: 3px solid #f65314;
|
||||||
|
--datetimepicker-different-month-color: #bebebe;
|
||||||
|
--default-background-color-light: rgba(103, 184, 229, 0.91);
|
||||||
|
--default-graph-color-dim: rgba(245, 227, 179, 0.5);
|
||||||
|
--default-graph-color-light: rgba(103, 58, 183, 0.72);
|
||||||
|
--default-graph-color: #673AB7;
|
||||||
|
--default-link-color: #5a2daa;
|
||||||
|
--default-path-color: #f2796b;
|
||||||
|
--default-point-color: #5ac9af;
|
||||||
|
--default-text-color: black;
|
||||||
|
--dialog-box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.506);
|
||||||
|
--dialog-loading-background: rgb(185, 223, 255);
|
||||||
|
--dialog-loading-content-border-bottom: 10px solid #13d5a7;
|
||||||
|
--dialog-loading-content-border-right: 10px solid #60fad6;
|
||||||
|
--dialog-loading-content-border-top: 10px solid #d2fff5;
|
||||||
|
--dialog-loading-content-border: 10px solid #fff;
|
||||||
|
--dropdown-arrow-down-background-image: url(img/dropdown-arrow-down.png);
|
||||||
|
--dropdown-arrow-up-background-image: url(img/dropdown-arrow-up.png);
|
||||||
|
--dropdown-visible-badge: drop-shadow(1px 1px 5px #42e8c1);
|
||||||
|
--dropdown-visible-img-filter: drop-shadow(0px 0px 8px #26ffcb);
|
||||||
|
--grid-window-drag-border: #1cd4a9 dotted 3px;
|
||||||
|
--grid-window-over-border: #e13946 dotted 3px;
|
||||||
|
--lazylist-more-background-image: url(img/arrow-down-hover.png);
|
||||||
|
--listview-li-hover-background: #eee;
|
||||||
|
--menu-background: #8070ad;
|
||||||
|
--menu-border: 1px solid #584b7b;
|
||||||
|
--menu-box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.506);
|
||||||
|
--menu-color: #fff;
|
||||||
|
--menu-li-hover-background: rgb(51, 43, 74);
|
||||||
|
--menu-li-hover-box-shadow: #322c2c 0 1px 1px 0;
|
||||||
|
--multiselect-add-background-image-hover: url(img/add-hover.png);
|
||||||
|
--multiselect-add-background-image: url(img/add.png);
|
||||||
|
--multiselect-list-li-border-bottom: 2px dotted #dadada;
|
||||||
|
--multiselect-list-remove-background-image-hover: url(img/remove-hover.png);
|
||||||
|
--multiselect-list-remove-background-image: url(img/remove.png);
|
||||||
|
--panel-border: 1px solid #BBBABA;
|
||||||
|
--panel-title-color: #444;
|
||||||
|
--range-background: rgba(0,0,0,0);
|
||||||
|
--range-thumb-background: rgb(42, 194, 184);
|
||||||
|
--range-thumb-border: 2px solid rgba(82, 209, 179, 0.73);
|
||||||
|
--range-thumb-box-shadow: 2.2px 2.2px 8.6px rgb(159, 247, 227), 0px 0px 2.2px rgba(177, 255, 237, 0.78);
|
||||||
|
--range-track-background-focus: rgba(210, 210, 210, 0.75);
|
||||||
|
--range-track-background: rgba(192, 192, 192, 0.75);
|
||||||
|
--range-track-border: 0px solid rgba(26, 93, 157, 0.35);
|
||||||
|
--range-track-box-shadow: 0px 0px 0px rgba(95, 153, 86, 0.7), 0px 0px 0px rgba(107, 167, 98, 0.7);
|
||||||
|
--resizer-horizontal-background: #60b3d4;
|
||||||
|
--resizer-vertical-background: #60b3d4;
|
||||||
|
--scrollbar-background: #ebebeb;
|
||||||
|
--scrollbar-thumb-background-active: #8070ad;
|
||||||
|
--scrollbar-thumb-background-hover: #28a29b;
|
||||||
|
--scrollbar-thumb-background: #31c3bc;
|
||||||
|
--scrollbar-thumb-border-active: 1px solid #dadada;
|
||||||
|
--scrollbar-thumb-border-hover: 1px solid #dadada;
|
||||||
|
--scrollbar-thumb-border: 1px solid #dadada;
|
||||||
|
--scrollbar-track-border: 1px #dadada solid;
|
||||||
|
--scrollbar-track-box-shadow: 0 0 6px #c8c8c8 inset;
|
||||||
|
--searchlist-menu-background: rgba(255, 255, 255, 0.11);
|
||||||
|
--searchlist-menu-border: 1px solid #CCC;
|
||||||
|
--searchlist-menu-color: #333;
|
||||||
|
--selectlist-arrow-background-color: #fff;
|
||||||
|
--selectlist-arrow-background-image: url(img/arrow-down.png);
|
||||||
|
--selectlist-arrow-border: 2px solid #45c9c1;
|
||||||
|
--selectlist-arrow-hover-background-image: url(img/arrow-down-hover.png);
|
||||||
|
--selectlist-label-background: #fff;
|
||||||
|
--separator-background: rgb(128, 112, 173);
|
||||||
|
--separator-box-shadow: inset 0 0 15px #695a93;
|
||||||
|
--table-header-background: linear-gradient(to bottom, #8070ad 60%, #2ac2b9);
|
||||||
|
--table-header-color: #fff;
|
||||||
|
--table-header-sort-background: url(img/sort_16.png) no-repeat;
|
||||||
|
--table-header-text-background-down-rtl: url(img/sort-down.png) no-repeat left;
|
||||||
|
--table-header-text-background-down: url(img/sort-down.png) no-repeat right;
|
||||||
|
--table-header-text-background-up-rtl: url(img/sort-up.png) no-repeat left;
|
||||||
|
--table-header-text-background-up: url(img/sort-up.png) no-repeat right;
|
||||||
|
--table-header-wrap-border: 1px solid #8070ad;
|
||||||
|
--table-resizer-background: #968ab7;
|
||||||
|
--table-row-background-hover: #8070ad;
|
||||||
|
--table-row-level-1-background: rgba(221, 221, 221, 0.5);
|
||||||
|
--table-row-level-2-background: rgba(121, 121, 121, 0.3);
|
||||||
|
--table-row-level-3-background: darkkhaki;
|
||||||
|
--table-row-selected-background: rgb(128, 112, 173);
|
||||||
|
--table-row-selected-box-shadow: #33bfbd 0 1px 10px 0 inset;
|
||||||
|
--table-td-border-bottom: 1px solid #2b9894;
|
||||||
|
--table-td-border: 0;
|
||||||
|
--table-tree-background-image-expanded-hover: url(img/minus-hover.png);
|
||||||
|
--table-tree-background-image-expanded: url(img/minus.png);
|
||||||
|
--table-tree-background-image-hover: url(img/plus-hover.png);
|
||||||
|
--table-tree-background-image: url(img/plus.png);
|
||||||
|
--tabs-button-background: linear-gradient(to bottom, #8070ad 5%, #8070ad 100%);
|
||||||
|
--tabs-button-border: 1px solid #85efe8;
|
||||||
|
--tabs-button-checked-background: linear-gradient(to bottom, rgb(139, 198, 231) 5%, #8bc6e7);
|
||||||
|
--tabs-button-checked-box-shadow: 0 2px rgb(109, 207, 184);
|
||||||
|
--tabs-button-checked-color: #000000;
|
||||||
|
--tabs-button-color: #ffffff;
|
||||||
|
--tabs-button-hover-border: 1px #8070ad solid;
|
||||||
|
--tabs-content-border: 1px solid #85efe8;
|
||||||
|
--textbox-background: white;
|
||||||
|
--textbox-border-color-focus: #8070ad;
|
||||||
|
--textbox-border: 2px solid #29c1b8;
|
||||||
|
--textbox-box-shadow-focus: 0 0 10px #8070ad;
|
||||||
|
--textbox-color: black;
|
||||||
|
--window-active-background: rgb(133, 239, 232);
|
||||||
|
--window-background: rgb(139, 198, 231);
|
||||||
|
--window-border: 1px solid #BBBABA;
|
||||||
|
--window-footer-background: linear-gradient(to bottom, #8bc6e7, #21c3b4);
|
||||||
|
--window-footer-border-top: #eee solid 1px;
|
||||||
|
--window-header-background: #8070ad;
|
||||||
|
--window-title-color: #444;
|
||||||
|
--window-tools-close-background-hover: #f0a1a8;
|
||||||
|
--window-tools-close-background: linear-gradient(to bottom, #e8616c, #f2796b);
|
||||||
|
--window-tools-close-border: 1px solid #7b8f9d;
|
||||||
|
--default-background-color: #21c3b4;
|
||||||
|
}
|
||||||
155
css/stone.css
Normal file
155
css/stone.css
Normal file
@ -0,0 +1,155 @@
|
|||||||
|
:root
|
||||||
|
{
|
||||||
|
--default-background-color: #989898;
|
||||||
|
--default-background-color-light: rgba(183, 183, 183, 0.62);
|
||||||
|
--default-text-color: black;
|
||||||
|
--default-link-color: #ffffff;
|
||||||
|
--default-graph-color: #34ffc2;
|
||||||
|
--default-graph-color-light: rgba(163, 163, 163, 0.59);
|
||||||
|
--default-graph-color-dim: rgba(245, 227, 179, 0.5);
|
||||||
|
--default-path-color: #f2796b;
|
||||||
|
--default-point-color: #262626;
|
||||||
|
--button-color: white;
|
||||||
|
--button-background-image: linear-gradient(to bottom, #626262, #313131);
|
||||||
|
--button-box-shadow: inset 0 0 0.1em 2px rgba(255, 255, 255, 0.1), 0 2px rgba(0, 0, 0, 0.12);
|
||||||
|
--button-text-shadow: 0 0.1em rgba(0, 0, 0, 0.2);
|
||||||
|
--button-border: 1px solid #757575;
|
||||||
|
--button-background-image-hover: linear-gradient(to bottom, #FF5722, #F44336);
|
||||||
|
--button-background-image-disabled: linear-gradient(to bottom, rgb(230, 230, 230), #bfbfbf);
|
||||||
|
--button-color-disabled: #7c7c7c;
|
||||||
|
--button-border-color-disabled: #b7b7b7;
|
||||||
|
--button-close-color: #aaa;
|
||||||
|
--button-close-color-hover: #000;
|
||||||
|
--window-background: #e0e0e0;
|
||||||
|
--window-border: 1px solid #bdbdbd;
|
||||||
|
--dialog-box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.506);
|
||||||
|
--window-active-background: #ffffff;
|
||||||
|
--background-background: rgba(73, 60, 57, 0.74);
|
||||||
|
--background-visible-background: rgba(0, 0, 0, 0.6);
|
||||||
|
--window-title-color: #000;
|
||||||
|
--window-tools-close-background: linear-gradient(to bottom, #e8616c, #dd202f);
|
||||||
|
--window-tools-close-border: 1px solid #911f28;
|
||||||
|
--window-tools-close-background-hover: #ff7d88;
|
||||||
|
--dialog-loading-background: rgb(224, 224, 224);
|
||||||
|
--dialog-loading-content-border: 10px solid #fff;
|
||||||
|
--dialog-loading-content-border-top: 10px solid #c4c4c4;
|
||||||
|
--dialog-loading-content-border-right: 10px solid #8d8d8d;
|
||||||
|
--dialog-loading-content-border-bottom: 10px solid #5f5f5f;
|
||||||
|
--window-header-background: #c9c8c8;
|
||||||
|
--window-footer-border-top: 0;
|
||||||
|
--window-footer-background: linear-gradient(to bottom, #e0e0e0, #ffffff);
|
||||||
|
--panel-border: 1px solid #BBBABA;
|
||||||
|
--panel-title-color: #444;
|
||||||
|
--table-td-border-bottom: 1px solid #b3b3b3;
|
||||||
|
--table-td-border: 0;
|
||||||
|
--table-header-background: linear-gradient(to bottom, #ffffff, #cacaca);
|
||||||
|
--table-header-text-background-up: url(img/sort-up.png) no-repeat right;
|
||||||
|
--table-header-text-background-down: url(img/sort-down.png) no-repeat right;
|
||||||
|
--table-header-text-background-up-rtl: url(img/sort-up.png) no-repeat left;
|
||||||
|
--table-header-text-background-down-rtl: url(img/sort-down.png) no-repeat left;
|
||||||
|
--table-header-sort-background: url(img/sort_16.png) no-repeat;
|
||||||
|
--table-tree-background-image: url(img/plus.png);
|
||||||
|
--table-tree-background-image-hover: url(img/plus-hover.png);
|
||||||
|
--table-tree-background-image-expanded: url(img/minus.png);
|
||||||
|
--table-tree-background-image-expanded-hover: url(img/minus-hover.png);
|
||||||
|
--table-row-level-1-background: rgba(221, 221, 221, 0.5);
|
||||||
|
--table-row-level-2-background: rgba(121, 121, 121, 0.3);
|
||||||
|
--table-row-level-3-background: darkkhaki;
|
||||||
|
--table-row-background-hover: rgb(239, 239, 239);
|
||||||
|
--table-row-selected-background: #e7e7e7;
|
||||||
|
--table-row-selected-box-shadow: #ff7676 0 1px 10px 0 inset;
|
||||||
|
--table-header-wrap-border: 1px solid #b0b0b0;
|
||||||
|
--table-resizer-background: #cccccc;
|
||||||
|
--button-flat-background: linear-gradient(to bottom, rgb(177, 177, 177) 5%, rgb(255, 255, 255) 100%);
|
||||||
|
--button-flat-border: 1px solid rgb(180, 180, 180);
|
||||||
|
--button-flat-color: #000000;
|
||||||
|
--button-flat-border-hover: #cacaca;
|
||||||
|
--button-flat-background-hover: rgb(255, 255, 255);
|
||||||
|
--button-flat-color-hover: black;
|
||||||
|
--colorpicker-button-checked-border: 3px rgb(255, 40, 40) solid;
|
||||||
|
--colorpicker-button-checked-box-shadow: 0 0 1em 1px #747373;
|
||||||
|
--colorpicker-button-hover-border-color: red;
|
||||||
|
--menu-li-hover-background: rgb(193, 193, 193);
|
||||||
|
--menu-li-hover-box-shadow: #cecbcb 0 1px 1px 0;
|
||||||
|
--checkbutton-checked-background: rgb(255, 255, 255);
|
||||||
|
--checkbutton-checked-box-shdow: #6a6a6a 0 1px 15px 0 inset;
|
||||||
|
--checkbutton-checked-color: black;
|
||||||
|
--tabs-content-border: 1px solid #ffffff;
|
||||||
|
--tabs-button-background: linear-gradient(to bottom, rgb(255, 255, 255) 5%, rgb(224, 224, 224) 100%);
|
||||||
|
--tabs-button-border: 1px solid #ffffff;
|
||||||
|
--tabs-button-color: #000000;
|
||||||
|
--tabs-button-hover-border: 1px #c7c7c7 solid;
|
||||||
|
--tabs-button-checked-box-shadow: 0 2px rgb(255, 255, 255);
|
||||||
|
--tabs-button-checked-background: linear-gradient(to bottom, rgb(224, 224, 224) 10%, #e0e0e0);
|
||||||
|
--tabs-button-checked-color: #000000;
|
||||||
|
--dropdown-arrow-up-background-image: url(img/dropdown-arrow-up.png);
|
||||||
|
--dropdown-arrow-down-background-image: url(img/dropdown-arrow-down.png);
|
||||||
|
--listview-li-hover-background: #dfdfdf;
|
||||||
|
--menu-border: 1px solid #a5a5a5;
|
||||||
|
--menu-background: #d4d4d4;
|
||||||
|
--menu-color: #333;
|
||||||
|
--menu-box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.71);
|
||||||
|
--textbox-color: black;
|
||||||
|
--textbox-background: #fff;
|
||||||
|
--textbox-border: 2px solid #c9c8c8;
|
||||||
|
--textbox-border-color-focus: #e36872;
|
||||||
|
--textbox-box-shadow-focus: 0 0 10px #e34956;
|
||||||
|
--resizer-horizontal-background: #9d9d9d;
|
||||||
|
--resizer-vertical-background: #9d9d9d;
|
||||||
|
--selectlist-arrow-hover-background-image: url(img/arrow-down-hover.png);
|
||||||
|
--selectlist-label-background: #fff;
|
||||||
|
--selectlist-arrow-background-color: #fff;
|
||||||
|
--selectlist-arrow-border: 2px solid #c9c8c8;
|
||||||
|
--selectlist-arrow-background-image: url(img/arrow-down.png);
|
||||||
|
--searchlist-menu-border: 1px solid #CCC;
|
||||||
|
--searchlist-menu-background: rgb(255, 255, 255);
|
||||||
|
--searchlist-menu-color: #333;
|
||||||
|
--lazylist-more-background-image: url(img/arrow-down-hover.png);
|
||||||
|
--button-arrow-background-color: #cfcfcf;
|
||||||
|
--button-arrow-background-border: 1px solid #b5b5b5;
|
||||||
|
--separator-background: #ffffff;
|
||||||
|
--separator-box-shadow: inset 0 0 15px #ffffff;
|
||||||
|
--dropdown-visible-img-filter: drop-shadow(0px 0px 8px #ff6e6e);
|
||||||
|
--dropdown-visible-badge: drop-shadow(1px 1px 5px #ffa1a1);
|
||||||
|
--range-background: rgba(0,0,0,0);
|
||||||
|
--range-track-box-shadow: 0px 0px 0px rgba(95, 153, 86, 0.7), 0px 0px 0px rgba(107, 167, 98, 0.7);
|
||||||
|
--range-track-background: rgba(255, 255, 255, 0.75);
|
||||||
|
--range-track-border: 0px solid rgba(26, 93, 157, 0.35);
|
||||||
|
--range-thumb-box-shadow: 2.2px 2.2px 8.6px rgb(198, 198, 198), 0px 0px 2.2px rgba(255, 255, 255, 0.78);
|
||||||
|
--range-thumb-border: 2px solid rgb(115, 115, 115);
|
||||||
|
--range-thumb-background: rgb(212, 212, 212);
|
||||||
|
--range-track-background-focus: rgba(210, 210, 210, 0.75);
|
||||||
|
--bar-arrow-left-background-image: url(img/arrow-left.png);
|
||||||
|
--bar-arrow-right-background-image: url(img/arrow-right.png);
|
||||||
|
--bar-arrow-left-inactive-background-image: url(img/arrow-left-inactive.png);
|
||||||
|
--bar-arrow-right-inactive-background-image: url(img/arrow-right-inactive.png);
|
||||||
|
--bar-item-background: rgba(235, 240, 242, 0.69);
|
||||||
|
--bar-item-border: 1px solid #dcdcdc;
|
||||||
|
--bar-item-color: #666666;
|
||||||
|
--bar-item-background-hover: rgba(255, 255, 255, 0.87);
|
||||||
|
--bar-item-checked-border-bottom: 3px solid #e03d4a;
|
||||||
|
--bar-item-checked-box-shadow: #6a6a6a 0 1px 10px 0 inset;
|
||||||
|
--multiselect-add-background-image: url(img/add.png);
|
||||||
|
--multiselect-add-background-image-hover: url(img/add-hover.png);
|
||||||
|
--multiselect-list-li-border-bottom: 2px dotted #dadada;
|
||||||
|
--multiselect-list-remove-background-image: url(img/remove.png);
|
||||||
|
--multiselect-list-remove-background-image-hover: url(img/remove-hover.png);
|
||||||
|
--grid-window-over-border: #e13946 dotted 3px;
|
||||||
|
--grid-window-drag-border: #75c6ff dotted 3px;
|
||||||
|
--datetimepicker-calendar-border-right: 3px solid pink;
|
||||||
|
--datetimepicker-clock-background: #ffdeac;
|
||||||
|
--datetimepicker-different-month-color: #bebebe;
|
||||||
|
--datetimepicker-day-background-hover: #ffe1b3;
|
||||||
|
--datetimepicker-day-selected-background: #ffb03b;
|
||||||
|
--datetimepicker-day-selected-color: #fff;
|
||||||
|
--datetimepicker-day-today-border-bottom: 3px solid #f65314;
|
||||||
|
--scrollbar-background: #ebebeb;
|
||||||
|
--scrollbar-track-border: 1px #dadada solid;
|
||||||
|
--scrollbar-track-box-shadow: 0 0 6px #c8c8c8 inset;
|
||||||
|
--scrollbar-thumb-background: #ababab;
|
||||||
|
--scrollbar-thumb-border: 1px solid #dadada;
|
||||||
|
--scrollbar-thumb-background-hover: #43be99;
|
||||||
|
--scrollbar-thumb-border-hover: 1px solid #dadada;
|
||||||
|
--scrollbar-thumb-background-active: #5cc7a7;
|
||||||
|
--scrollbar-thumb-border-active: 1px solid #dadada;
|
||||||
|
}
|
||||||
201
css/volcano.css
Normal file
201
css/volcano.css
Normal file
@ -0,0 +1,201 @@
|
|||||||
|
|
||||||
|
:root {
|
||||||
|
--default-background-color: #ffffff;
|
||||||
|
--default-background-color-light: rgba(209, 209, 209, 0.5);
|
||||||
|
--default-text-color: black;
|
||||||
|
--default-link-color: #0099d5;
|
||||||
|
--default-graph-color: #5ac9af;
|
||||||
|
--default-graph-color-light: rgba(90, 201, 175, 0.5);
|
||||||
|
--default-graph-color-dim: rgba(245, 227, 179, 0.5);
|
||||||
|
--default-path-color: #f2796b;
|
||||||
|
--default-point-color: #5ac9af;
|
||||||
|
|
||||||
|
--button-color: white;
|
||||||
|
--button-background-image: linear-gradient(to bottom, rgb(84, 184, 255), #33aaff);
|
||||||
|
--button-box-shadow:inset 0 0 0.1em 2px rgba(255, 255, 255, 0.1), 0 2px rgba(0, 0, 0, 0.12);
|
||||||
|
--button-text-shadow: 0 0.1em rgba(0, 0, 0, 0.2);
|
||||||
|
--button-border:1px solid #215a96;
|
||||||
|
--button-background-image-hover: linear-gradient(to bottom, #FF5722, #F44336);
|
||||||
|
--button-background-image-disabled: linear-gradient(to bottom, rgb(230, 230, 230), #bfbfbf);
|
||||||
|
--button-color-disabled: #7c7c7c;
|
||||||
|
--button-border-color-disabled: #b7b7b7;
|
||||||
|
--button-close-color: #aaa;
|
||||||
|
--button-close-color-hover: #000;
|
||||||
|
--window-background: #fff;
|
||||||
|
--window-border: 1px solid #BBBABA;
|
||||||
|
--dialog-box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.506);
|
||||||
|
--window-active-background: rgb(185, 223, 255);
|
||||||
|
--background-background:rgba(0, 0, 0, 0);
|
||||||
|
--background-visible-background: rgba(0, 0, 0, 0.6);
|
||||||
|
|
||||||
|
--window-title-color: #444;
|
||||||
|
--window-tools-close-background: linear-gradient(to bottom, #e8616c, #dd202f);
|
||||||
|
--window-tools-close-border:1px solid #911f28;
|
||||||
|
|
||||||
|
--window-tools-close-background-hover: #ff7d88;
|
||||||
|
--dialog-loading-background:rgb(185, 223, 255);
|
||||||
|
|
||||||
|
--dialog-loading-content-border: 10px solid #fff;
|
||||||
|
--dialog-loading-content-border-top: 10px solid #ffe3e3;
|
||||||
|
--dialog-loading-content-border-right: 10px solid #ffb4b4;
|
||||||
|
--dialog-loading-content-border-bottom: 10px solid #ff4d4d;
|
||||||
|
|
||||||
|
--window-header-background: #e6e6e6;
|
||||||
|
--window-footer-border-top: #eee solid 1px;
|
||||||
|
--window-footer-background: linear-gradient(to bottom, white, #e1e2eb);
|
||||||
|
|
||||||
|
--panel-border: 1px solid #BBBABA;
|
||||||
|
--panel-title-color: #444;
|
||||||
|
--table-td-border: 1px solid #c9c9c9;
|
||||||
|
|
||||||
|
--table-header-background: linear-gradient(to bottom, white, #e1e2eb);
|
||||||
|
--table-header-text-background-up: url(img/"sort-up.png") no-repeat right;
|
||||||
|
--table-header-text-background-down:url(img/"sort-down.png") no-repeat right;
|
||||||
|
--table-header-text-background-up-rtl: url(img/"sort-up.png") no-repeat left;
|
||||||
|
--table-header-text-background-down-rtl:url(img/"sort-down.png") no-repeat left;
|
||||||
|
|
||||||
|
--table-header-sort-background: url(img/"sort_16.png") no-repeat;
|
||||||
|
|
||||||
|
--table-tree-background-image: url(img/"plus.png");
|
||||||
|
--table-tree-background-image-hover: url(img/"plus-hover.png");
|
||||||
|
|
||||||
|
--table-tree-background-image-expanded: url(img/"minus.png");
|
||||||
|
--table-tree-background-image-expanded-hover: url(img/"minus-hover.png");
|
||||||
|
|
||||||
|
--table-row-level-1-background: rgba(221, 221, 221, 0.5);
|
||||||
|
--table-row-level-2-background: rgba(121, 121, 121, 0.3);
|
||||||
|
--table-row-level-3-background: darkkhaki;
|
||||||
|
--table-row-background-hover: #DEF;
|
||||||
|
--table-row-selected-background: rgb(185, 223, 255);
|
||||||
|
--table-row-selected-box-shadow: #cecbcb 0 1px 10px 0 inset;
|
||||||
|
|
||||||
|
--table-header-wrap-border: 1px solid #c9c9c9;
|
||||||
|
--table-resizer-background: #dde2e3;
|
||||||
|
|
||||||
|
--button-flat-background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 5%, rgb(246, 246, 246) 100%);
|
||||||
|
--button-flat-border: 1px solid rgba(220, 220, 220, 0.51);
|
||||||
|
--button-flat-color: #666666;
|
||||||
|
--button-flat-border-hover:#ffcbcb;
|
||||||
|
--button-flat-background-hover: rgb(184, 218, 255);
|
||||||
|
|
||||||
|
--colorpicker-button-checked-border: 3px rgb(255, 40, 40) solid;
|
||||||
|
--colorpicker-button-checked-box-shadow: 0 .0 1em 1px #747373;
|
||||||
|
--colorpicker-button-hover-border-color: red;
|
||||||
|
|
||||||
|
--menu-li-hover-background:rgb(185, 223, 255);
|
||||||
|
--menu-li-hover-box-shadow:#cecbcb 0 1px 1px 0;
|
||||||
|
|
||||||
|
--checkbutton-checked-background:rgb(185, 223, 255);
|
||||||
|
--checkbutton-checked-box-shdow:#ffffff 0 1px 10px 0 inset;
|
||||||
|
|
||||||
|
--tabs-content-border: 1px solid #dcdcdc;
|
||||||
|
|
||||||
|
--tabs-button-background: linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
|
||||||
|
--tabs-button-border: 1px solid #dcdcdc;
|
||||||
|
--tabs-button-color: #666666;
|
||||||
|
|
||||||
|
--tabs-button-hover-border:1px red solid;
|
||||||
|
--tabs-button-checked-box-shadow:0 2px rgb(255, 255, 255);
|
||||||
|
--tabs-button-checked-background:linear-gradient(to bottom, rgba(173, 213, 255, 0.86) 10%, #ffffff);
|
||||||
|
--tabs-button-checked-color:#000000;
|
||||||
|
|
||||||
|
--dropdown-arrow-up-background-image: url(img/"dropdown-arrow-up.png");
|
||||||
|
--dropdown-arrow-down-background-image: url(img/"dropdown-arrow-down.png");
|
||||||
|
|
||||||
|
--listview-li-hover-background: #eee;
|
||||||
|
--menu-border:1px solid #CCC;
|
||||||
|
--menu-background: #FFF;
|
||||||
|
--menu-color: #333;
|
||||||
|
--menu-box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.506);
|
||||||
|
|
||||||
|
--textbox-color: black;
|
||||||
|
--textbox-background: white;
|
||||||
|
|
||||||
|
--textbox-border:2px solid #dadada;
|
||||||
|
--textbox-border-color-focus: #9ecaed;
|
||||||
|
|
||||||
|
--textbox-box-shadow-focus:0 0 10px #9ecaed;
|
||||||
|
|
||||||
|
--resizer-horizontal-background:#dde2e3;
|
||||||
|
--resizer-vertical-background:#dde2e3;
|
||||||
|
|
||||||
|
--selectlist-arrow-hover-background-image: url(img/arrow-down-hover.png);
|
||||||
|
|
||||||
|
--selectlist-label-background: #fff;
|
||||||
|
|
||||||
|
--selectlist-arrow-background-color:#fff;
|
||||||
|
--selectlist-arrow-border: 2px solid #dadada;
|
||||||
|
--selectlist-arrow-background-image: url(img/arrow-down.png);
|
||||||
|
|
||||||
|
--searchlist-menu-border: 1px solid #CCC;
|
||||||
|
--searchlist-menu-background: rgba(255, 255, 255, 0.44);
|
||||||
|
--searchlist-menu-color: #333;
|
||||||
|
|
||||||
|
--lazylist-more-background-image:url(img/arrow-down-hover.png);
|
||||||
|
|
||||||
|
--button-arrow-background-color:#f3f3f3;
|
||||||
|
--button-arrow-background-border: 1px solid #dadada;
|
||||||
|
--button-arrow-background-color-hover:#f3f3f3;;
|
||||||
|
|
||||||
|
|
||||||
|
--separator-background: rgba(82, 82, 82, 0.38);
|
||||||
|
--separator-box-shadow: inset 0 0 15px #ffffff;
|
||||||
|
|
||||||
|
--dropdown-visible-img-filter: drop-shadow(0px 0px 8px #3b8de2);
|
||||||
|
--dropdown-visible-badge: drop-shadow(1px 1px 5px #3b8de2);
|
||||||
|
|
||||||
|
--range-background: rgba(0,0,0,0);
|
||||||
|
--range-track-box-shadow: 0px 0px 0px rgba(95, 153, 86, 0.7), 0px 0px 0px rgba(107, 167, 98, 0.7);
|
||||||
|
--range-track-background: rgba(192, 192, 192, 0.75);
|
||||||
|
--range-track-border: 0px solid rgba(26, 93, 157, 0.35);
|
||||||
|
--range-thumb-box-shadow: 2.2px 2.2px 8.6px rgba(139, 188, 255, 0.78), 0px 0px 2.2px rgba(164, 203, 255, 0.78);
|
||||||
|
--range-thumb-border: 2px solid rgba(115, 163, 255, 0.51);
|
||||||
|
--range-thumb-background: rgba(101, 196, 255, 0.94);
|
||||||
|
|
||||||
|
--range-track-background-focus: rgba(210, 210, 210, 0.75);
|
||||||
|
|
||||||
|
--bar-arrow-left-background-image: url(img/arrow-left.png);
|
||||||
|
--bar-arrow-right-background-image: url(img/arrow-right.png);
|
||||||
|
--bar-arrow-left-inactive-background-image: url(img/arrow-left-inactive.png);
|
||||||
|
--bar-arrow-right-inactive-background-image: url(img/arrow-right-inactive.png);
|
||||||
|
|
||||||
|
--bar-item-background: rgba(235, 240, 242, 0.69);
|
||||||
|
--bar-item-border: 1px solid #dcdcdc;
|
||||||
|
--bar-item-color: #666666;
|
||||||
|
--bar-item-background-hover: rgba(255, 255, 255, 0.87);
|
||||||
|
|
||||||
|
--bar-item-checked-border-bottom: 3px solid #47abff;
|
||||||
|
--bar-item-checked-box-shadow: #cecbcb 0 1px 10px 0 inset;
|
||||||
|
|
||||||
|
--multiselect-add-background-image: url(img/add.png);
|
||||||
|
--multiselect-add-background-image-hover: url(img/add-hover.png);
|
||||||
|
--multiselect-list-li-border-bottom: 2px dotted #dadada;
|
||||||
|
|
||||||
|
--multiselect-list-remove-background-image: url(img/remove.png);
|
||||||
|
--multiselect-list-remove-background-image-hover: url(img/remove-hover.png);
|
||||||
|
|
||||||
|
|
||||||
|
--grid-window-over-border: #e13946 dotted 3px;
|
||||||
|
--grid-window-drag-border: #75c6ff dotted 3px;
|
||||||
|
|
||||||
|
--datetimepicker-calendar-border-right: 3px solid pink;
|
||||||
|
--datetimepicker-clock-background: gainsboro;
|
||||||
|
|
||||||
|
--datetimepicker-different-month-color: #bebebe;
|
||||||
|
|
||||||
|
--datetimepicker-day-background-hover: #b9dfff;
|
||||||
|
|
||||||
|
--datetimepicker-day-selected-background: #4ea3df;
|
||||||
|
--datetimepicker-day-selected-color: #fff;
|
||||||
|
--datetimepicker-day-today-border-bottom: 3px solid #f65314;
|
||||||
|
|
||||||
|
--scrollbar-background: #ebebeb;
|
||||||
|
--scrollbar-track-border:1px #dadada solid;
|
||||||
|
--scrollbar-track-box-shadow:0 0 6px #c8c8c8 inset;
|
||||||
|
--scrollbar-thumb-background:#4ea3df;
|
||||||
|
--scrollbar-thumb-border:1px solid #dadada;
|
||||||
|
--scrollbar-thumb-background-hover:#59cfff;
|
||||||
|
--scrollbar-thumb-border-hover: 1px solid #dadada;
|
||||||
|
--scrollbar-thumb-background-active:#59cfff;
|
||||||
|
--scrollbar-thumb-border-active:1px solid #dadada;
|
||||||
|
}
|
||||||
BIN
img/add-hover.png
Normal file
BIN
img/add-hover.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 749 B |
BIN
img/add.png
Normal file
BIN
img/add.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 725 B |
BIN
img/arrow - Copy.png
Normal file
BIN
img/arrow - Copy.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
BIN
img/arrow-down-hover.png
Normal file
BIN
img/arrow-down-hover.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 750 B |
BIN
img/arrow-down.png
Normal file
BIN
img/arrow-down.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 959 B |
BIN
img/arrow-left-inactive.png
Normal file
BIN
img/arrow-left-inactive.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 977 B |
BIN
img/arrow-left.png
Normal file
BIN
img/arrow-left.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 770 B |
BIN
img/arrow-right-inactive.png
Normal file
BIN
img/arrow-right-inactive.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 991 B |
BIN
img/arrow-right.png
Normal file
BIN
img/arrow-right.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 757 B |
BIN
img/arrow-up-hover.png
Normal file
BIN
img/arrow-up-hover.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 811 B |
BIN
img/down-arrow-circle-hi.png
Normal file
BIN
img/down-arrow-circle-hi.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
BIN
img/dropdown-arrow-down.png
Normal file
BIN
img/dropdown-arrow-down.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 256 B |
BIN
img/dropdown-arrow-up.png
Normal file
BIN
img/dropdown-arrow-up.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 313 B |
BIN
img/filter_16.png
Normal file
BIN
img/filter_16.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 484 B |
BIN
img/icon.png
Normal file
BIN
img/icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
BIN
img/minus-hover.png
Normal file
BIN
img/minus-hover.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 748 B |
BIN
img/minus.green.png
Normal file
BIN
img/minus.green.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 891 B |
BIN
img/minus.png
Normal file
BIN
img/minus.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 716 B |
BIN
img/plus-hover.png
Normal file
BIN
img/plus-hover.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 749 B |
BIN
img/plus.green.png
Normal file
BIN
img/plus.green.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 938 B |
BIN
img/plus.png
Normal file
BIN
img/plus.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 725 B |
BIN
img/remove-hover.png
Normal file
BIN
img/remove-hover.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 748 B |
BIN
img/remove.png
Normal file
BIN
img/remove.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 716 B |
BIN
img/ripple.gif
Normal file
BIN
img/ripple.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
BIN
img/sort-down.png
Normal file
BIN
img/sort-down.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 763 B |
BIN
img/sort-up.png
Normal file
BIN
img/sort-up.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 697 B |
BIN
img/sort_16.png
Normal file
BIN
img/sort_16.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 779 B |
BIN
img/sort_down_16.png
Normal file
BIN
img/sort_down_16.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 741 B |
BIN
img/sort_up_16.png
Normal file
BIN
img/sort_up_16.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 749 B |
105
mapkit/package-lock.json
generated
Normal file
105
mapkit/package-lock.json
generated
Normal file
@ -0,0 +1,105 @@
|
|||||||
|
{
|
||||||
|
"requires": true,
|
||||||
|
"lockfileVersion": 1,
|
||||||
|
"dependencies": {
|
||||||
|
"buffer-equal-constant-time": {
|
||||||
|
"version": "1.0.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz",
|
||||||
|
"integrity": "sha1-+OcRMvf/5uAaXJaXpMbz5I1cyBk="
|
||||||
|
},
|
||||||
|
"ecdsa-sig-formatter": {
|
||||||
|
"version": "1.0.11",
|
||||||
|
"resolved": "https://registry.npmjs.org/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz",
|
||||||
|
"integrity": "sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==",
|
||||||
|
"requires": {
|
||||||
|
"safe-buffer": "^5.0.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"jsonwebtoken": {
|
||||||
|
"version": "8.5.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/jsonwebtoken/-/jsonwebtoken-8.5.1.tgz",
|
||||||
|
"integrity": "sha512-XjwVfRS6jTMsqYs0EsuJ4LGxXV14zQybNd4L2r0UvbVnSF9Af8x7p5MzbJ90Ioz/9TI41/hTCvznF/loiSzn8w==",
|
||||||
|
"requires": {
|
||||||
|
"jws": "^3.2.2",
|
||||||
|
"lodash.includes": "^4.3.0",
|
||||||
|
"lodash.isboolean": "^3.0.3",
|
||||||
|
"lodash.isinteger": "^4.0.4",
|
||||||
|
"lodash.isnumber": "^3.0.3",
|
||||||
|
"lodash.isplainobject": "^4.0.6",
|
||||||
|
"lodash.isstring": "^4.0.1",
|
||||||
|
"lodash.once": "^4.0.0",
|
||||||
|
"ms": "^2.1.1",
|
||||||
|
"semver": "^5.6.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"jwa": {
|
||||||
|
"version": "1.4.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/jwa/-/jwa-1.4.1.tgz",
|
||||||
|
"integrity": "sha512-qiLX/xhEEFKUAJ6FiBMbes3w9ATzyk5W7Hvzpa/SLYdxNtng+gcurvrI7TbACjIXlsJyr05/S1oUhZrc63evQA==",
|
||||||
|
"requires": {
|
||||||
|
"buffer-equal-constant-time": "1.0.1",
|
||||||
|
"ecdsa-sig-formatter": "1.0.11",
|
||||||
|
"safe-buffer": "^5.0.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"jws": {
|
||||||
|
"version": "3.2.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/jws/-/jws-3.2.2.tgz",
|
||||||
|
"integrity": "sha512-YHlZCB6lMTllWDtSPHz/ZXTsi8S00usEV6v1tjq8tOUZzw7DpSDWVXjXDre6ed1w/pd495ODpHZYSdkRTsa0HA==",
|
||||||
|
"requires": {
|
||||||
|
"jwa": "^1.4.1",
|
||||||
|
"safe-buffer": "^5.0.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"lodash.includes": {
|
||||||
|
"version": "4.3.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/lodash.includes/-/lodash.includes-4.3.0.tgz",
|
||||||
|
"integrity": "sha1-YLuYqHy5I8aMoeUTJUgzFISfVT8="
|
||||||
|
},
|
||||||
|
"lodash.isboolean": {
|
||||||
|
"version": "3.0.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz",
|
||||||
|
"integrity": "sha1-bC4XHbKiV82WgC/UOwGyDV9YcPY="
|
||||||
|
},
|
||||||
|
"lodash.isinteger": {
|
||||||
|
"version": "4.0.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz",
|
||||||
|
"integrity": "sha1-YZwK89A/iwTDH1iChAt3sRzWg0M="
|
||||||
|
},
|
||||||
|
"lodash.isnumber": {
|
||||||
|
"version": "3.0.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/lodash.isnumber/-/lodash.isnumber-3.0.3.tgz",
|
||||||
|
"integrity": "sha1-POdoEMWSjQM1IwGsKHMX8RwLH/w="
|
||||||
|
},
|
||||||
|
"lodash.isplainobject": {
|
||||||
|
"version": "4.0.6",
|
||||||
|
"resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
|
||||||
|
"integrity": "sha1-fFJqUtibRcRcxpC4gWO+BJf1UMs="
|
||||||
|
},
|
||||||
|
"lodash.isstring": {
|
||||||
|
"version": "4.0.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/lodash.isstring/-/lodash.isstring-4.0.1.tgz",
|
||||||
|
"integrity": "sha1-1SfftUVuynzJu5XV2ur4i6VKVFE="
|
||||||
|
},
|
||||||
|
"lodash.once": {
|
||||||
|
"version": "4.1.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz",
|
||||||
|
"integrity": "sha1-DdOXEhPHxW34gJd9UEyI+0cal6w="
|
||||||
|
},
|
||||||
|
"ms": {
|
||||||
|
"version": "2.1.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
|
||||||
|
"integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg=="
|
||||||
|
},
|
||||||
|
"safe-buffer": {
|
||||||
|
"version": "5.1.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
|
||||||
|
"integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
|
||||||
|
},
|
||||||
|
"semver": {
|
||||||
|
"version": "5.7.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.0.tgz",
|
||||||
|
"integrity": "sha512-Ya52jSX2u7QKghxeoFGpLwCtGlt7j0oY9DYb5apt9nPlJ42ID+ulTXESnt/qAQcoSERyZ5sl3LDIOw0nAn/5DA=="
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
27
package-lock.json
generated
Normal file
27
package-lock.json
generated
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
{
|
||||||
|
"requires": true,
|
||||||
|
"lockfileVersion": 1,
|
||||||
|
"dependencies": {
|
||||||
|
"async-limiter": {
|
||||||
|
"version": "1.0.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.1.tgz",
|
||||||
|
"integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ=="
|
||||||
|
},
|
||||||
|
"Esyur": {
|
||||||
|
"version": "1.3.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/Esyur/-/Esyur-1.3.0.tgz",
|
||||||
|
"integrity": "sha512-1TZ3oftiK0Sb99qHT36ElwoRGKrCobyL1WXPvv8dNheOQmljdbJeu3/XNOViJi9SQiS/97E3AgKHUxuGGceMMA==",
|
||||||
|
"requires": {
|
||||||
|
"ws": "^6.2.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"ws": {
|
||||||
|
"version": "6.2.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/ws/-/ws-6.2.1.tgz",
|
||||||
|
"integrity": "sha512-GIyAXC2cB7LjvpgMt9EKS2ldqr0MTrORaleiOno6TweZ6r3TKtoFQWay/2PceJ3RuBasOHzXNn5Lrw1X0bEjqA==",
|
||||||
|
"requires": {
|
||||||
|
"async-limiter": "~1.0.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
24
src/Core/App.js
Normal file
24
src/Core/App.js
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
import IUIElement from "../Core/IUIElement.js";
|
||||||
|
import { IUI } from "../Core/IUI.js";
|
||||||
|
|
||||||
|
export default IUI.module(class App extends IUIElement {
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
}
|
||||||
|
|
||||||
|
create() {
|
||||||
|
this._register("load");
|
||||||
|
window.app = this;
|
||||||
|
}
|
||||||
|
|
||||||
|
created() {
|
||||||
|
this.updateBindings();
|
||||||
|
this.render();
|
||||||
|
this._emit("load", { app: this });
|
||||||
|
|
||||||
|
this.loaded = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
});
|
||||||
351
src/Core/Binding.js
Normal file
351
src/Core/Binding.js
Normal file
@ -0,0 +1,351 @@
|
|||||||
|
import IUIElement from "./IUIElement.js";
|
||||||
|
|
||||||
|
export const BindingType = {
|
||||||
|
IUIElement: 0, // this will never happen !
|
||||||
|
TextNode: 1,
|
||||||
|
ContentAttribute: 2,
|
||||||
|
Attribute: 3,
|
||||||
|
HTMLElementDataAttribute: 4,
|
||||||
|
IUIElementDataAttribute: 5,
|
||||||
|
IfAttribute: 6,
|
||||||
|
RevertAttribute: 7
|
||||||
|
};
|
||||||
|
|
||||||
|
export const AttributeBindingDestination = {
|
||||||
|
Field: 0,
|
||||||
|
Attribute: 1
|
||||||
|
};
|
||||||
|
|
||||||
|
const AsyncFunction = Object.getPrototypeOf(async function () { }).constructor;
|
||||||
|
|
||||||
|
export class Binding {
|
||||||
|
static create(nodeOrAttributeOrIUIElement) {
|
||||||
|
var code, isAsync, type, attrType, attrKey, func, script;
|
||||||
|
|
||||||
|
//if (nodeOrAttributeOrIUIElement.created)
|
||||||
|
// debugger;
|
||||||
|
|
||||||
|
if (nodeOrAttributeOrIUIElement instanceof IUIElement) {
|
||||||
|
isAsync = nodeOrAttributeOrIUIElement.hasAttribute("async");
|
||||||
|
type = BindingType.IUIElement;
|
||||||
|
} else if (nodeOrAttributeOrIUIElement instanceof Text) {// nodeOrAttribute.nodeType == 3) {
|
||||||
|
if (!nodeOrAttributeOrIUIElement.wholeText.match(/\${.*}/))
|
||||||
|
return null;
|
||||||
|
type = BindingType.TextNode;
|
||||||
|
isAsync = nodeOrAttributeOrIUIElement.parentElement.hasAttribute("async");
|
||||||
|
//code = "return `" + nodeOrAttributeOrIUIElement.wholeText + "`;";
|
||||||
|
|
||||||
|
script = nodeOrAttributeOrIUIElement.wholeText;
|
||||||
|
|
||||||
|
code = `try {\r\n context.value = \`${script}\`\r\n}\r\n catch(ex) { context.error = ex; }`
|
||||||
|
|
||||||
|
|
||||||
|
nodeOrAttributeOrIUIElement.data = "";
|
||||||
|
nodeOrAttributeOrIUIElement.created = true;
|
||||||
|
} else if (nodeOrAttributeOrIUIElement instanceof Attr) {
|
||||||
|
|
||||||
|
if (nodeOrAttributeOrIUIElement.name.startsWith("async::")) {
|
||||||
|
isAsync = true;
|
||||||
|
attrType = AttributeBindingDestination.Attribute;
|
||||||
|
attrKey = nodeOrAttributeOrIUIElement.name.substr(7);
|
||||||
|
}
|
||||||
|
else if (nodeOrAttributeOrIUIElement.name.startsWith("::")) {
|
||||||
|
isAsync = false;
|
||||||
|
attrType = AttributeBindingDestination.Attribute;
|
||||||
|
attrKey = nodeOrAttributeOrIUIElement.name.substr(2);
|
||||||
|
}
|
||||||
|
else if (nodeOrAttributeOrIUIElement.name.startsWith("async:")) {
|
||||||
|
isAsync = true;
|
||||||
|
attrType = AttributeBindingDestination.Field;
|
||||||
|
attrKey = nodeOrAttributeOrIUIElement.name.substr(6);
|
||||||
|
}
|
||||||
|
else if (nodeOrAttributeOrIUIElement.name.startsWith(":")) {
|
||||||
|
isAsync = false;
|
||||||
|
attrType = AttributeBindingDestination.Field;
|
||||||
|
attrKey = nodeOrAttributeOrIUIElement.name.substr(1);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
// isAsync = nodeOrAttributeOrIUIElement.value.search("await");
|
||||||
|
|
||||||
|
// code = "return " + nodeOrAttributeOrIUIElement.value + ";";
|
||||||
|
|
||||||
|
script = nodeOrAttributeOrIUIElement.value
|
||||||
|
code = `try {\r\n context.value = ${script}; \r\n}\r\n catch(ex) { context.error = ex; }`
|
||||||
|
|
||||||
|
let sentence = attrKey.split("-");
|
||||||
|
for (var i = 1; i < sentence.length; i++)
|
||||||
|
sentence[i] = sentence[i].charAt(0).toUpperCase() + sentence[i].slice(1);
|
||||||
|
attrKey = sentence.join("");
|
||||||
|
|
||||||
|
if (attrKey == "content")
|
||||||
|
type = BindingType.ContentAttribute;
|
||||||
|
else if (attrKey == "if") {
|
||||||
|
type = BindingType.IfAttribute;
|
||||||
|
//displayMode =
|
||||||
|
}
|
||||||
|
else if (attrKey == "revert")
|
||||||
|
type = BindingType.RevertAttribute;
|
||||||
|
else if (attrKey != "data")
|
||||||
|
type = BindingType.Attribute;
|
||||||
|
else if (nodeOrAttributeOrIUIElement.ownerElement instanceof IUIElement)
|
||||||
|
type = BindingType.IUIElementDataAttribute;
|
||||||
|
else
|
||||||
|
type = BindingType.HTMLElementDataAttribute;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// test the function
|
||||||
|
|
||||||
|
try {
|
||||||
|
if (isAsync)
|
||||||
|
func = new AsyncFunction("data", "d", "context", "_test", code);
|
||||||
|
else
|
||||||
|
func = new Function("data", "d", "context", "_test", code);
|
||||||
|
}
|
||||||
|
catch (ex) {
|
||||||
|
console.log("Test failed: " + ex, code);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
let rt = new Binding();
|
||||||
|
Object.assign(rt, { isAsync, type, attrType, attrKey, func, target: nodeOrAttributeOrIUIElement, checked: false, script });
|
||||||
|
return rt;
|
||||||
|
}
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
this.watchList = [];
|
||||||
|
let self = this;
|
||||||
|
this.listener = function (name, value) {
|
||||||
|
self.render(self.data);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
_findMap(thisArg) {
|
||||||
|
|
||||||
|
// @TODO: Map thisArg too
|
||||||
|
let map = {};
|
||||||
|
|
||||||
|
let detector = {
|
||||||
|
get: function (obj, prop) {
|
||||||
|
if (typeof prop == "string") {
|
||||||
|
obj[prop] = {};
|
||||||
|
return new Proxy(obj[prop], detector);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
this.checked = true;
|
||||||
|
|
||||||
|
let proxy = new Proxy(map, detector);
|
||||||
|
|
||||||
|
try {
|
||||||
|
let d = this.func.apply(thisArg, [proxy, proxy, {}, true]);
|
||||||
|
this.map = map;
|
||||||
|
return d;
|
||||||
|
}
|
||||||
|
catch (ex) {
|
||||||
|
//console.log("Proxy failed", ex);
|
||||||
|
this.map = map;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async _execute(thisArg, data) {
|
||||||
|
if (!this.checked)
|
||||||
|
this._findMap(thisArg);
|
||||||
|
|
||||||
|
|
||||||
|
let context = {};
|
||||||
|
var rt = this.func.apply(thisArg, [data, data, context, false]);
|
||||||
|
|
||||||
|
//console.log(rt);
|
||||||
|
if (rt instanceof Promise)
|
||||||
|
await rt;
|
||||||
|
|
||||||
|
if (context.error != undefined)
|
||||||
|
{
|
||||||
|
console.log("Execution failed", context.error.name + ": " + context.error.message, this.script, this.target);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
else if (context.value == undefined)
|
||||||
|
{
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
else if (context.value instanceof Promise)
|
||||||
|
{
|
||||||
|
try
|
||||||
|
{
|
||||||
|
return await context.value;
|
||||||
|
} catch(ex) {
|
||||||
|
console.log("Execution failed", ex.name + ": " + ex.message, this.script, this.target);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
return context.value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
unbind() {
|
||||||
|
this.data = null;
|
||||||
|
for (var i = 0; i < this.watchList.length; i++)
|
||||||
|
this.watchList[i].data.off(this.watchList[i].event, this.listener);
|
||||||
|
this.watchList = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
bind(data, map) {
|
||||||
|
if (data == null)
|
||||||
|
return;
|
||||||
|
|
||||||
|
if (data?.on) {
|
||||||
|
|
||||||
|
for (var p in map) {
|
||||||
|
let event = ":" + p;
|
||||||
|
data.on(":" + p, this.listener);
|
||||||
|
this.watchList.push({ data, event});
|
||||||
|
|
||||||
|
this.bind(data[p], map[p]);
|
||||||
|
}
|
||||||
|
|
||||||
|
//if (this.watchList.includes(data))
|
||||||
|
// this.watchList.push({ data, event : });
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
for (var p in map) {
|
||||||
|
this.bind(data[p], map[p]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
async render(data) {
|
||||||
|
|
||||||
|
// @TODO: Checking properties bindings moved here
|
||||||
|
if (data != this.data)
|
||||||
|
this.unbind();
|
||||||
|
|
||||||
|
try {
|
||||||
|
if (this.type === BindingType.IUIElement) {
|
||||||
|
let d = this.func.apply(this.target, [data, data]);
|
||||||
|
if (d instanceof Promise)
|
||||||
|
d = await d;
|
||||||
|
await this.target.setData(d);
|
||||||
|
}
|
||||||
|
else if (this.type === BindingType.TextNode) {
|
||||||
|
|
||||||
|
try {
|
||||||
|
|
||||||
|
let d = await this._execute(this.target.parentElement, data);
|
||||||
|
|
||||||
|
if (d === undefined)
|
||||||
|
return false;
|
||||||
|
//if (d instanceof Promise)
|
||||||
|
// d = await d;
|
||||||
|
|
||||||
|
this.target.data = d;// (d === undefined) ? "" : d;
|
||||||
|
|
||||||
|
if (data != this.data) {
|
||||||
|
this.data = data;
|
||||||
|
this.bind(data, this.map);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
catch (ex) {
|
||||||
|
this.target.data = "";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// Content Attribute
|
||||||
|
else if (this.type == BindingType.ContentAttribute) {
|
||||||
|
let d = await this._execute(this.target.ownerElement, data);
|
||||||
|
|
||||||
|
if (d === undefined)
|
||||||
|
return false;
|
||||||
|
|
||||||
|
//if (d instanceof Promise)
|
||||||
|
// d = await d;
|
||||||
|
|
||||||
|
this.target.ownerElement.innerHTML = d;
|
||||||
|
}
|
||||||
|
else if (this.type == BindingType.IfAttribute)
|
||||||
|
{
|
||||||
|
let d = await this._execute(this.target.ownerElement, data);
|
||||||
|
|
||||||
|
if (d === undefined)
|
||||||
|
return false;
|
||||||
|
|
||||||
|
//if (d instanceof Promise)
|
||||||
|
// d = await d;
|
||||||
|
|
||||||
|
this.target.ownerElement.style.display = d ? "" : "none";
|
||||||
|
}
|
||||||
|
else if (this.type == BindingType.RevertAttribute)
|
||||||
|
{
|
||||||
|
let d = await this._execute(this.target.ownerElement, data);
|
||||||
|
if (d === undefined)
|
||||||
|
return false;
|
||||||
|
//if (d instanceof Promise)
|
||||||
|
// d = await d;
|
||||||
|
|
||||||
|
}
|
||||||
|
// Attribute
|
||||||
|
else if (this.type === BindingType.Attribute) {
|
||||||
|
|
||||||
|
//if (this.target.ownerElement.hasAttribute("debug"))
|
||||||
|
// debugger;
|
||||||
|
|
||||||
|
let d = await this._execute(this.target.ownerElement, data);
|
||||||
|
|
||||||
|
if (d === undefined)
|
||||||
|
return false;
|
||||||
|
|
||||||
|
//if (d instanceof Promise)
|
||||||
|
// d = await d;
|
||||||
|
|
||||||
|
if (this.attrType == AttributeBindingDestination.Field)
|
||||||
|
this.target.ownerElement[this.attrKey] = d;
|
||||||
|
else
|
||||||
|
this.target.ownerElement.setAttribute(this.attrKey, d);
|
||||||
|
|
||||||
|
if (data != this.data) {
|
||||||
|
this.data = data;
|
||||||
|
this.bind(data, this.map);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Data Attribute of IUI Element
|
||||||
|
else if (this.type === BindingType.IUIElementDataAttribute) {
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
let d = await this._execute(this.target.ownerElement, data);
|
||||||
|
//if (d === undefined)
|
||||||
|
// return false;
|
||||||
|
|
||||||
|
//if (d instanceof Promise)
|
||||||
|
// d = await d;
|
||||||
|
await this.target.ownerElement.setData(d);
|
||||||
|
}
|
||||||
|
// Data Attribute of HTML Element
|
||||||
|
else if (this.type == BindingType.HTMLElementDataAttribute) {
|
||||||
|
|
||||||
|
let d = await this._execute(this.target.ownerElement, data);
|
||||||
|
if (d === undefined)
|
||||||
|
return false;
|
||||||
|
//if (d instanceof Promise)
|
||||||
|
// d = await d;
|
||||||
|
this.target.ownerElement.data = d;
|
||||||
|
}
|
||||||
|
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
catch (ex) {
|
||||||
|
// console.log(ex);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
310
src/Core/IUI.js
Normal file
310
src/Core/IUI.js
Normal file
@ -0,0 +1,310 @@
|
|||||||
|
import IUIElement from "./IUIElement.js";
|
||||||
|
|
||||||
|
export const IUI = {
|
||||||
|
format: function (input) {
|
||||||
|
if (typeof input == "string" || input instanceof String) {
|
||||||
|
let template = document.createElement("template");
|
||||||
|
template.innerHTML = input;
|
||||||
|
let nodes = template.content.cloneNode(true).childNodes;
|
||||||
|
return nodes;
|
||||||
|
}
|
||||||
|
else if (input instanceof HTMLCollection)
|
||||||
|
return input;
|
||||||
|
else if (input instanceof HTMLElement)
|
||||||
|
return [input];
|
||||||
|
else
|
||||||
|
return [];
|
||||||
|
},
|
||||||
|
_menus: [],
|
||||||
|
views: [],
|
||||||
|
modules: {},
|
||||||
|
registry : [],
|
||||||
|
observer: new IntersectionObserver(function(entries) {
|
||||||
|
// isIntersecting is true when element and viewport are overlapping
|
||||||
|
// isIntersecting is false when element and viewport don't overlap
|
||||||
|
for(var i = 0; i < entries.length; i++)
|
||||||
|
{
|
||||||
|
if (entries[i].isIntersecting)
|
||||||
|
{
|
||||||
|
if (entries[i]._require_update)
|
||||||
|
entries[i].update();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}, { threshold: [0] }),
|
||||||
|
created: async function (element) {
|
||||||
|
|
||||||
|
for (var i = 0; i < element.children.length; i++) {
|
||||||
|
let e = element.children[i];
|
||||||
|
if (e instanceof IUIElement)
|
||||||
|
await e.created();
|
||||||
|
await IUI.created(e);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
create: async function(element)
|
||||||
|
{
|
||||||
|
|
||||||
|
for (let i = 0; i < element.children.length; i++) {
|
||||||
|
let e = element.children[i];
|
||||||
|
if (e instanceof IUIElement) {
|
||||||
|
await e.create();
|
||||||
|
// e.updateBindings();
|
||||||
|
}
|
||||||
|
|
||||||
|
await IUI.create(e);
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
let router = document.getElementsByTagName("i-router")[0];
|
||||||
|
|
||||||
|
await router.create();
|
||||||
|
|
||||||
|
let elements = document.querySelectorAll("*");
|
||||||
|
for (var i = 0; i < elements.length; i++)
|
||||||
|
if (elements[i] instanceof IUIElement && elements[i].tagName != "I-ROUTER") {
|
||||||
|
console.log(elements[i]);
|
||||||
|
await elements[i].create();
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
|
||||||
|
//for(var i = 0; i < IUI.registry.length; i++)
|
||||||
|
//{
|
||||||
|
// IUI.extend(IUI.registry[i], IUI.registry[i].properties);
|
||||||
|
// await IUI.registry[i].create();
|
||||||
|
// //await IUI.registry[i].updateAttributes();
|
||||||
|
//}
|
||||||
|
//return;
|
||||||
|
},
|
||||||
|
get : function(o)
|
||||||
|
{
|
||||||
|
return document.getElementById(o);
|
||||||
|
|
||||||
|
//for(var i = 0; i < IUI.registry.length; i++)
|
||||||
|
// if (IUI.registry[i].id == o)
|
||||||
|
// return IUI.registry[i];
|
||||||
|
//return null;
|
||||||
|
},
|
||||||
|
put: function(o)
|
||||||
|
{
|
||||||
|
IUI.registry.push(o);
|
||||||
|
},
|
||||||
|
remove: function(id)
|
||||||
|
{
|
||||||
|
for(var i = 0; i < IUI.registry.length; i++)
|
||||||
|
if (IUI.registry[i].el.id == id)
|
||||||
|
{
|
||||||
|
IUI.registry.splice(i, 1);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
module: function(objectClass)
|
||||||
|
{
|
||||||
|
let moduleName = objectClass.moduleName;
|
||||||
|
|
||||||
|
if (IUI.modules[moduleName] === undefined) {
|
||||||
|
customElements.define("i-" + moduleName, objectClass);
|
||||||
|
IUI.modules[moduleName] = {
|
||||||
|
cls: objectClass, init: function (properties) {
|
||||||
|
return new objectClass(properties);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
return objectClass;
|
||||||
|
},
|
||||||
|
extend: function(properties, defaults, force)
|
||||||
|
{
|
||||||
|
if (properties == null)
|
||||||
|
properties = defaults;
|
||||||
|
else
|
||||||
|
for(var i in defaults)
|
||||||
|
if (force)
|
||||||
|
properties[i] = defaults[i];
|
||||||
|
else if (properties[i] === undefined)
|
||||||
|
properties[i] = defaults[i];
|
||||||
|
return properties;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export function iui(selector)
|
||||||
|
{
|
||||||
|
return IUI.get(selector);
|
||||||
|
|
||||||
|
/*
|
||||||
|
if ((typeof selector === 'string' || selector instanceof String) && selector.length > 0)
|
||||||
|
{
|
||||||
|
var els = document.querySelectorAll(selector);
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
var els = IUI.get(selector);
|
||||||
|
if (els != null)
|
||||||
|
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
|
||||||
|
if (typeof(this) == "undefined" || this == window)
|
||||||
|
{
|
||||||
|
var o = IUI.get(selector);
|
||||||
|
if (o)
|
||||||
|
return o;
|
||||||
|
else
|
||||||
|
{
|
||||||
|
var el;
|
||||||
|
|
||||||
|
if (typeof Node === "object" ? o instanceof Node : (
|
||||||
|
selector && typeof selector === "object" && typeof selector.nodeType === "number" && typeof selector.nodeName==="string") || selector === window)
|
||||||
|
{
|
||||||
|
el = selector;
|
||||||
|
}
|
||||||
|
else if (typeof selector === 'string' || selector instanceof String)
|
||||||
|
{
|
||||||
|
if (selector[0] == ".")
|
||||||
|
el = document.getElementsByClassName(selector.substr(1));
|
||||||
|
else
|
||||||
|
el = document.getElementById(selector);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (el)
|
||||||
|
{
|
||||||
|
var rt = {};
|
||||||
|
var makeFunc = function(module){
|
||||||
|
return function(){
|
||||||
|
if (el instanceof HTMLCollection)
|
||||||
|
{
|
||||||
|
let rt = [];
|
||||||
|
for(var i = 0; i < el.length; i++)
|
||||||
|
{
|
||||||
|
var args = [el[i]];
|
||||||
|
for(var j = 0; j < arguments.length; j++)
|
||||||
|
args.push(arguments[j]);
|
||||||
|
rt.push(IUI.modules[module].init.apply(this, args));
|
||||||
|
}
|
||||||
|
return rt;
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
var args = [el];
|
||||||
|
for(var i = 0; i < arguments.length; i++)
|
||||||
|
args.push(arguments[i]);
|
||||||
|
return IUI.modules[module].init.apply(this, args);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
for(var m in IUI.modules)
|
||||||
|
rt[m] = makeFunc(m);
|
||||||
|
|
||||||
|
return rt;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
IUI.registry.push(this);
|
||||||
|
|
||||||
|
|
||||||
|
if (selector)
|
||||||
|
{
|
||||||
|
if( Object.prototype.toString.call( selector ) === '[object Array]' )
|
||||||
|
{
|
||||||
|
this.el = [];
|
||||||
|
selector.forEach(function(i){
|
||||||
|
this.el.push(query(i));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
else
|
||||||
|
this.el = query(selector);
|
||||||
|
|
||||||
|
this.events = {};
|
||||||
|
this.id = this.el.id;
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
Array.prototype.each = function(func)
|
||||||
|
{
|
||||||
|
if (this instanceof Array)
|
||||||
|
{
|
||||||
|
for(var i = 0; i < this.length; i++)
|
||||||
|
if (func(this[i], i))
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
else
|
||||||
|
for(var i in this)
|
||||||
|
if(func(this[i], i))
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
Array.prototype.distinct = function(field)
|
||||||
|
{
|
||||||
|
var rt = [];
|
||||||
|
|
||||||
|
this.forEach(function(item)
|
||||||
|
{
|
||||||
|
if (rt.indexOf(item[field]) == -1)
|
||||||
|
rt.push(item[field]);
|
||||||
|
});
|
||||||
|
|
||||||
|
return rt;
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
iui.prototype.ec = function(className, parent)
|
||||||
|
{
|
||||||
|
if (parent)
|
||||||
|
return parent.getElementsByClassName(className);
|
||||||
|
else
|
||||||
|
return document.getElementsByClassName(className);
|
||||||
|
}
|
||||||
|
|
||||||
|
iui.prototype.ne = function(tag)
|
||||||
|
{
|
||||||
|
return document.createElement(tag);
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
iui.prototype.destroy = function()
|
||||||
|
{
|
||||||
|
IUI.registry.splice(IUI.registry.indexOf(this.el), 1);
|
||||||
|
};
|
||||||
|
|
||||||
|
iui.prototype.register = function(event)
|
||||||
|
{
|
||||||
|
this.events[event] = [];
|
||||||
|
return this;
|
||||||
|
};
|
||||||
|
|
||||||
|
iui.prototype.emit = function(event)
|
||||||
|
{
|
||||||
|
var args = Array.prototype.slice.call(arguments, 1);
|
||||||
|
if (this.events && this.events[event])
|
||||||
|
for(var i = 0; i < this.events[event].length; i++)
|
||||||
|
this.events[event][i].apply(this, args);
|
||||||
|
|
||||||
|
return this;
|
||||||
|
};
|
||||||
|
|
||||||
|
iui.prototype.on = function(event, fn)
|
||||||
|
{
|
||||||
|
if (this.events && this.events[event])
|
||||||
|
this.events[event].push(fn);
|
||||||
|
else if (document.attachEvent)
|
||||||
|
this.el.attachEvent('on' + event, fn)
|
||||||
|
else // if (document.addEventListener)
|
||||||
|
this.el.addEventListener(event, fn, !0);
|
||||||
|
|
||||||
|
return this;
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
||||||
|
/*
|
||||||
|
window.addEventListener("load", function(){
|
||||||
|
for(var m in IUI.modules)
|
||||||
|
{
|
||||||
|
var elements = document.getElementsByTagName(m);
|
||||||
|
|
||||||
|
}
|
||||||
|
});
|
||||||
|
*/
|
||||||
313
src/Core/IUIElement.js
Normal file
313
src/Core/IUIElement.js
Normal file
@ -0,0 +1,313 @@
|
|||||||
|
import { IUI } from "./IUI.js";
|
||||||
|
import { Binding, BindingType, AttributeBindingDestination } from "./Binding.js";
|
||||||
|
|
||||||
|
export default class IUIElement extends HTMLElement {
|
||||||
|
constructor(defaults) {
|
||||||
|
super();
|
||||||
|
|
||||||
|
this._events = [];
|
||||||
|
this._data = null;
|
||||||
|
|
||||||
|
for (var i in defaults)
|
||||||
|
if (this[i] == undefined)
|
||||||
|
this[i] = defaults[i];
|
||||||
|
|
||||||
|
this._register("data");
|
||||||
|
}
|
||||||
|
|
||||||
|
static get moduleName(){
|
||||||
|
return this.name.toLowerCase();
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
get cssClass(){
|
||||||
|
if (this.hasAttribute("css-class"))
|
||||||
|
return this.getAttribute("css-class");
|
||||||
|
//else
|
||||||
|
// return this.constructor.moduleName;
|
||||||
|
}
|
||||||
|
|
||||||
|
set cssClass(value)
|
||||||
|
{
|
||||||
|
this.classList.remove(this.cssClass);
|
||||||
|
this.setAttribute("css-class", value);
|
||||||
|
this.classList.add(value);
|
||||||
|
}
|
||||||
|
|
||||||
|
async render() {
|
||||||
|
await this._renderElement(this, this._data);
|
||||||
|
}
|
||||||
|
|
||||||
|
_getParentData() {
|
||||||
|
var p = this.parentElement;
|
||||||
|
do {
|
||||||
|
if (p.data !== undefined)
|
||||||
|
return p.data;
|
||||||
|
} while (p = p.parentElement);
|
||||||
|
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
async setData(value) {
|
||||||
|
//if (this.bindings === undefined)
|
||||||
|
// this.updateBindings();
|
||||||
|
|
||||||
|
|
||||||
|
this._data = value;
|
||||||
|
this._emit("data", {data: value});
|
||||||
|
await this._renderElement(this, value);
|
||||||
|
|
||||||
|
//console.log("IUI: SetData", value, this.tagName);
|
||||||
|
}
|
||||||
|
|
||||||
|
get data() {
|
||||||
|
return this._data;
|
||||||
|
}
|
||||||
|
|
||||||
|
async revert(){
|
||||||
|
//if (this.revertMap != null)
|
||||||
|
//{
|
||||||
|
//if (data == undefined)
|
||||||
|
// await this.revertMap.render(this._getParentData());
|
||||||
|
//else
|
||||||
|
// await this.revertMap.render(data);
|
||||||
|
// revert parents
|
||||||
|
|
||||||
|
let e = this;
|
||||||
|
|
||||||
|
do {
|
||||||
|
var p = e.parentElement;
|
||||||
|
|
||||||
|
if (e.revertMap != null)
|
||||||
|
await e.revertMap.render(p?.data);
|
||||||
|
} while (e = p);
|
||||||
|
//}
|
||||||
|
}
|
||||||
|
|
||||||
|
async update(data) {
|
||||||
|
if (data == undefined) {
|
||||||
|
// get parent data
|
||||||
|
if (this.dataMap != null) {
|
||||||
|
await this.dataMap.render(this._getParentData());
|
||||||
|
} else
|
||||||
|
await this.setData(this.data);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
// apply specified data
|
||||||
|
if (this.dataMap != null) {
|
||||||
|
await this.dataMap.render(data);
|
||||||
|
} else
|
||||||
|
await this.setData(data);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async _renderElement(element, data) {
|
||||||
|
if (!element.bindings) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//console.log("_renderElement " + element.getAttribute("ref"), element);
|
||||||
|
|
||||||
|
//if (element.hasAttribute("debug"))
|
||||||
|
// debugger;
|
||||||
|
|
||||||
|
// render attributes & text nodes
|
||||||
|
for (var i = 0; i < element.bindings.length; i++)
|
||||||
|
await element.bindings[i].render(data);
|
||||||
|
|
||||||
|
// render children
|
||||||
|
for (var i = 0; i < element.children.length; i++) {
|
||||||
|
let e = element.children[i];
|
||||||
|
if (e instanceof IUIElement)
|
||||||
|
// @TODO should check if the element depends on parent or not
|
||||||
|
if (e.dataMap != null) {
|
||||||
|
// if map function failed to call setData, we will render without it
|
||||||
|
if (!(await e.dataMap.render(data)))
|
||||||
|
await e.render();
|
||||||
|
}
|
||||||
|
else
|
||||||
|
await e.setData(data);
|
||||||
|
else {
|
||||||
|
if (e.dataMap != null)
|
||||||
|
await e.dataMap.render(data);
|
||||||
|
else
|
||||||
|
e.data = data;
|
||||||
|
|
||||||
|
//let data = e.mapData(data);
|
||||||
|
await this._renderElement(e, e.data);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// this meant to be inherited
|
||||||
|
modified() {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
get data() {
|
||||||
|
return this._data;
|
||||||
|
}
|
||||||
|
|
||||||
|
connectedCallback() {
|
||||||
|
|
||||||
|
if (this.hasAttribute("css-class"))
|
||||||
|
this.classList.add(this.getAttribute("css-class"));
|
||||||
|
else
|
||||||
|
{
|
||||||
|
let className = this.constructor.moduleName;
|
||||||
|
|
||||||
|
this.setAttribute("css-class", className);
|
||||||
|
this.classList.add(className);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
disconnectedCallback() {
|
||||||
|
// console.log("removed", this);
|
||||||
|
}
|
||||||
|
|
||||||
|
adoptedCallback() {
|
||||||
|
|
||||||
|
//console.log("adopted", this);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
//appendChild(node) {
|
||||||
|
// // do some bindings
|
||||||
|
// super.appendChild(node);
|
||||||
|
//}
|
||||||
|
|
||||||
|
created() {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
create() {
|
||||||
|
//this.updateBindings();
|
||||||
|
}
|
||||||
|
|
||||||
|
destroy() {
|
||||||
|
|
||||||
|
console.log("Destroy", this);
|
||||||
|
IUI.registry.splice(IUI.registry.indexOf(this), 1);
|
||||||
|
if (this.parentNode)
|
||||||
|
this.parentNode.removeChild(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
_make_bindings(element) {
|
||||||
|
|
||||||
|
// ::Attribute
|
||||||
|
// : Field
|
||||||
|
// async:: Async Attribute
|
||||||
|
// async: Async Field
|
||||||
|
// @ Event
|
||||||
|
|
||||||
|
let bindings = [];
|
||||||
|
|
||||||
|
|
||||||
|
//if (element.hasAttribute("debug"))
|
||||||
|
// debugger;
|
||||||
|
|
||||||
|
// compile attributes
|
||||||
|
for (var i = 0; i < element.attributes.length; i++) {
|
||||||
|
|
||||||
|
let b = Binding.create(element.attributes[i]);
|
||||||
|
|
||||||
|
if (b != null) {
|
||||||
|
if (b.type == BindingType.HTMLElementDataAttribute || b.type == BindingType.IUIElementDataAttribute)
|
||||||
|
element.dataMap = b;
|
||||||
|
else if (b.type == BindingType.RevertAttribute)
|
||||||
|
element.revertMap = b;
|
||||||
|
else
|
||||||
|
bindings.push(b);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// compile nodes
|
||||||
|
for (var i = 0; i < element.childNodes.length; i++) {
|
||||||
|
let e = element.childNodes[i];
|
||||||
|
if (e instanceof IUIElement) {
|
||||||
|
// @TODO: check if the IUI element handles the binding
|
||||||
|
this._make_bindings(e);
|
||||||
|
}
|
||||||
|
else if (e instanceof HTMLElement) {
|
||||||
|
this._make_bindings(e);
|
||||||
|
}
|
||||||
|
else if (e instanceof Text) {
|
||||||
|
let b = Binding.create(e);
|
||||||
|
if (b != null)
|
||||||
|
bindings.push(b);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
element.bindings = bindings;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
_emit(event, values) {
|
||||||
|
//var args = Array.prototype.slice.call(arguments, 1);
|
||||||
|
var e = new CustomEvent(event, values);
|
||||||
|
for (var i in values) {
|
||||||
|
if (e[i] === undefined)
|
||||||
|
e[i] = values[i];
|
||||||
|
}
|
||||||
|
|
||||||
|
try
|
||||||
|
{
|
||||||
|
return this.dispatchEvent(e);
|
||||||
|
}
|
||||||
|
catch(ex)
|
||||||
|
{
|
||||||
|
console.log(ex);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
updateBindings() {
|
||||||
|
this._make_bindings(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
_encapsulateEvent(code){
|
||||||
|
return `try {\r\n ${code} \r\n}\r\n catch(ex) { console.log(ex.name + ":" + ex.message, this); }`;
|
||||||
|
}
|
||||||
|
|
||||||
|
_register(event) {
|
||||||
|
this._events.push(event);
|
||||||
|
|
||||||
|
if (this.hasAttribute("@" + event)) {
|
||||||
|
let handler = this.getAttribute("@" + event);
|
||||||
|
if (handler.match(/^[A-Za-z\$_]+(?:[\$_][A-Za-z0-9]+)*$/g) === null) {
|
||||||
|
try
|
||||||
|
{
|
||||||
|
let func = new Function("event", this._encapsulateEvent(this.getAttribute("@" + event)));
|
||||||
|
this.addEventListener(event, func);
|
||||||
|
} catch (ex)
|
||||||
|
{
|
||||||
|
console.log(ex);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
let func = this[handler];
|
||||||
|
if (func instanceof Function) {
|
||||||
|
this.addEventListener(event, func, false);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
// might be added in the future
|
||||||
|
let func = new Function("event", `this["${handler}"](event)`);
|
||||||
|
this.addEventListener(event, func, false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
off(event, fn) {
|
||||||
|
this.removeEventListener(event, fn);
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
on(event, fn) {
|
||||||
|
this.addEventListener(event, fn, false);
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
}
|
||||||
14
src/Data/DataList.js
Normal file
14
src/Data/DataList.js
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
import IUIElement from "../Core/IUIElement.js";
|
||||||
|
|
||||||
|
export default IUI.module(class DataList extends IUIElement
|
||||||
|
{
|
||||||
|
constructor(properties)
|
||||||
|
{
|
||||||
|
super(properties);
|
||||||
|
}
|
||||||
|
|
||||||
|
create()
|
||||||
|
{
|
||||||
|
this.style.display = "none";
|
||||||
|
}
|
||||||
|
});
|
||||||
62
src/Data/Field.js
Normal file
62
src/Data/Field.js
Normal file
@ -0,0 +1,62 @@
|
|||||||
|
import IUIElement from "../Core/IUIElement.js";
|
||||||
|
import { IUI } from "../Core/IUI.js";
|
||||||
|
|
||||||
|
|
||||||
|
export default IUI.module(class Field extends HTMLElement
|
||||||
|
{
|
||||||
|
constructor()
|
||||||
|
{
|
||||||
|
super();
|
||||||
|
}
|
||||||
|
|
||||||
|
static get moduleName(){
|
||||||
|
return this.name.toLowerCase();
|
||||||
|
}
|
||||||
|
|
||||||
|
create()
|
||||||
|
{
|
||||||
|
// if (this.formatter === undefined) {
|
||||||
|
// // load script
|
||||||
|
// for (var i = 0; i < this.children.length; i++)
|
||||||
|
// if (this.children[i] instanceof HTMLScriptElement) {
|
||||||
|
// //this.formatter = new Function this.children[i].
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
//this.style.display = "none";
|
||||||
|
}
|
||||||
|
|
||||||
|
get name() {
|
||||||
|
return this.getAttribute("name");
|
||||||
|
}
|
||||||
|
|
||||||
|
set name(value) {
|
||||||
|
this.setAttribute("name", value);
|
||||||
|
}
|
||||||
|
|
||||||
|
serialize(tag) {
|
||||||
|
|
||||||
|
let template = document.createElement("template");
|
||||||
|
let node = document.createElement(tag ?? "div");
|
||||||
|
let width = null, name = null, type = null;
|
||||||
|
|
||||||
|
// copy attributes
|
||||||
|
for (var i = 0; i < this.attributes.length; i++) {
|
||||||
|
let attr = this.attributes[i];
|
||||||
|
if (attr.name == "width")
|
||||||
|
width = attr.value;
|
||||||
|
else if (attr.name == "name")
|
||||||
|
name = attr.value;
|
||||||
|
else if (attr.name == "type")
|
||||||
|
type = attr.value;
|
||||||
|
else
|
||||||
|
node.setAttribute(attr.name, attr.value);
|
||||||
|
}
|
||||||
|
|
||||||
|
// copy html
|
||||||
|
|
||||||
|
node.innerHTML = this.innerHTML;
|
||||||
|
|
||||||
|
return { node, width, name, type };
|
||||||
|
}
|
||||||
|
});
|
||||||
82
src/Data/Form.js
Normal file
82
src/Data/Form.js
Normal file
@ -0,0 +1,82 @@
|
|||||||
|
import IUIElement from "../Core/IUIElement.js";
|
||||||
|
import { IUI } from "../Core/IUI.js";
|
||||||
|
|
||||||
|
export default IUI.module(class Form extends IUIElement {
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
//this.form = {};
|
||||||
|
}
|
||||||
|
|
||||||
|
static _copy(val){
|
||||||
|
if (typeof val === 'object' && val !== null)
|
||||||
|
{
|
||||||
|
let rt = {};
|
||||||
|
for(var i in val)
|
||||||
|
if (val[i] instanceof Array)
|
||||||
|
// copy array
|
||||||
|
rt[i] = [...val[i]];
|
||||||
|
else
|
||||||
|
rt[i] = val[i];
|
||||||
|
|
||||||
|
return rt;
|
||||||
|
}
|
||||||
|
else
|
||||||
|
return val;
|
||||||
|
}
|
||||||
|
|
||||||
|
async create() {
|
||||||
|
//var elements = this.querySelectorAll("*[field]");
|
||||||
|
//for (var i = 0; i < elements.length; i++)
|
||||||
|
// this.form[elements[i].getAttribute("field")] = elements[i];
|
||||||
|
}
|
||||||
|
|
||||||
|
async setData(value) {
|
||||||
|
this.original = value;
|
||||||
|
//var copy = {};
|
||||||
|
//Object.assign(copy, value);
|
||||||
|
super.setData(Form._copy(this.original));
|
||||||
|
//super.setData({ ...this.original });
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
async reset() {
|
||||||
|
//super.setData({ ...this.original });
|
||||||
|
super.setData(Form._copy(this.original));
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
// @TODO: Remove this when esiur adds suport to partially modified arrays with modified flag
|
||||||
|
static _areEqual(ar1, ar2)
|
||||||
|
{
|
||||||
|
if (!(ar1 instanceof Array) || !( ar2 instanceof Array))
|
||||||
|
return false;
|
||||||
|
|
||||||
|
if (ar1.length != ar2.length)
|
||||||
|
return false;
|
||||||
|
|
||||||
|
for(var i = 0; i < ar1.length; i++)
|
||||||
|
if (ar1[i] != ar2[i])
|
||||||
|
return false;
|
||||||
|
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
get diff() {
|
||||||
|
if (this.original == null)
|
||||||
|
return this._data;
|
||||||
|
|
||||||
|
|
||||||
|
var rt = {};
|
||||||
|
for (var i in this._data)
|
||||||
|
if (this._data[i] != this.original[i])
|
||||||
|
{
|
||||||
|
if (this._data[i] instanceof Array && Form._areEqual(this._data[i], this.original[i]))
|
||||||
|
continue;
|
||||||
|
else
|
||||||
|
rt[i] = this._data[i];
|
||||||
|
}
|
||||||
|
|
||||||
|
return rt;
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
68
src/Data/Include.js
Normal file
68
src/Data/Include.js
Normal file
@ -0,0 +1,68 @@
|
|||||||
|
import IUIElement from "../Core/IUIElement.js";
|
||||||
|
import { IUI } from "../Core/IUI.js";
|
||||||
|
|
||||||
|
export default IUI.module(class Include extends IUIElement
|
||||||
|
{
|
||||||
|
constructor()
|
||||||
|
{
|
||||||
|
super();
|
||||||
|
this.refs = {};
|
||||||
|
}
|
||||||
|
|
||||||
|
async create()
|
||||||
|
{
|
||||||
|
//console.log("Create ...", this.getAttribute("src"));
|
||||||
|
|
||||||
|
if (this.getAttribute("src") == "views/studio/realestate.html")
|
||||||
|
console.log("Create include");
|
||||||
|
|
||||||
|
if (this.hasAttribute("src")) {
|
||||||
|
|
||||||
|
let src = this.getAttribute("src").replace(/^\/+|\/+$/g, '');
|
||||||
|
let x = await fetch(src);
|
||||||
|
|
||||||
|
if (x.status !== 200)
|
||||||
|
return;
|
||||||
|
|
||||||
|
let t = await x.text();
|
||||||
|
|
||||||
|
this.innerHTML = t;
|
||||||
|
|
||||||
|
let xeval = (code) => eval(code);
|
||||||
|
|
||||||
|
// call create for the new elements
|
||||||
|
var newElements = this.querySelectorAll("*");
|
||||||
|
for (var i = 0; i < newElements.length; i++) {
|
||||||
|
var el = newElements[i];
|
||||||
|
|
||||||
|
// set route for all elements
|
||||||
|
//newElements[i].route = this.route;
|
||||||
|
el.route = this.route;
|
||||||
|
el.view = this;
|
||||||
|
if (el.hasAttribute("ref")) {
|
||||||
|
this.refs[el.getAttribute("ref")] = el;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (el instanceof HTMLScriptElement) {
|
||||||
|
// this because HTML parser don't evaluate script tag
|
||||||
|
let func = new Function("//# sourceURL=iui://" + src + "-" + Math.round(Math.random() * 10000) + "\r\n return " + el.text.trim());// "return " + el.text + ";");
|
||||||
|
|
||||||
|
let rt = func.call(el.parentElement);
|
||||||
|
|
||||||
|
//let rt = xeval.call(el.parentElement, "//# sourceURL=iui://" + src + Math.round(Math.random() * 10000) + "\r\n (" + el.text + ")");
|
||||||
|
if (typeof (rt) === "object") {
|
||||||
|
for (var k in rt)
|
||||||
|
el.parentElement[k] = rt[k];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//this.updateBindings();
|
||||||
|
}
|
||||||
|
|
||||||
|
get src()
|
||||||
|
{
|
||||||
|
return this._src;
|
||||||
|
}
|
||||||
|
});
|
||||||
64
src/Data/Layout.js
Normal file
64
src/Data/Layout.js
Normal file
@ -0,0 +1,64 @@
|
|||||||
|
import IUIElement from "../Core/IUIElement.js";
|
||||||
|
import Field from './Field.js';
|
||||||
|
import { IUI } from "../Core/IUI.js";
|
||||||
|
|
||||||
|
export default IUI.module(class Layout extends HTMLElement// IUIElement
|
||||||
|
{
|
||||||
|
constructor()
|
||||||
|
{
|
||||||
|
super();
|
||||||
|
}
|
||||||
|
|
||||||
|
static get moduleName(){
|
||||||
|
return this.name.toLowerCase();
|
||||||
|
}
|
||||||
|
|
||||||
|
//create()
|
||||||
|
//{
|
||||||
|
// for (var i = 0; i < this.children.length; i++)
|
||||||
|
// if (this.children[i] instanceof Field) {
|
||||||
|
// this[this.children[i].name] = this.children[i];
|
||||||
|
// this.fields.push(this.children[i]);
|
||||||
|
// }
|
||||||
|
|
||||||
|
// this.style.display = "none";
|
||||||
|
//}
|
||||||
|
|
||||||
|
static getHTML(el, removeSelf = false) {
|
||||||
|
for (var i = 0; i < el.children.length; i++)
|
||||||
|
if (el.children[i] instanceof Layout) {
|
||||||
|
let layout = el.children[i];
|
||||||
|
let rt = layout.innerHTML;
|
||||||
|
|
||||||
|
if (removeSelf)
|
||||||
|
el.removeChild(layout);
|
||||||
|
return rt;
|
||||||
|
}
|
||||||
|
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
static get(el, tag, removeSelf = false, collection = false) {
|
||||||
|
|
||||||
|
for (var i = 0; i < el.children.length; i++)
|
||||||
|
if (el.children[i] instanceof Layout) {
|
||||||
|
let layout = el.children[i];
|
||||||
|
let rt = collection ? {} : [];
|
||||||
|
for (var j = 0; j < layout.children.length; j++) {
|
||||||
|
if (layout.children[j] instanceof Field) {
|
||||||
|
let fd = layout.children[j].serialize(tag);
|
||||||
|
if (collection)
|
||||||
|
rt[fd.name] = fd;
|
||||||
|
else
|
||||||
|
rt.push(fd);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (removeSelf)
|
||||||
|
layout.parentElement.removeChild(layout);
|
||||||
|
return rt;
|
||||||
|
}
|
||||||
|
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
});
|
||||||
273
src/Data/Repeat.js
Normal file
273
src/Data/Repeat.js
Normal file
@ -0,0 +1,273 @@
|
|||||||
|
import IUIElement from "../Core/IUIElement.js";
|
||||||
|
import { IUI } from "../Core/IUI.js";
|
||||||
|
|
||||||
|
export default IUI.module(class Repeat extends IUIElement
|
||||||
|
{
|
||||||
|
constructor()
|
||||||
|
{
|
||||||
|
super({ _data: [] });
|
||||||
|
this.list = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
_isDirectDecedent(x){
|
||||||
|
while(x = x.parentElement)
|
||||||
|
if (x == this)
|
||||||
|
return true;
|
||||||
|
else if (x instanceof Repeat && x != this)
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
create()
|
||||||
|
{
|
||||||
|
//////////////
|
||||||
|
/// Create ///
|
||||||
|
//////////////
|
||||||
|
|
||||||
|
if (this._created)
|
||||||
|
debugger;
|
||||||
|
|
||||||
|
this._created = true;
|
||||||
|
|
||||||
|
// create template to speed avoid HTML parsing each time.
|
||||||
|
let repeatables = this.querySelectorAll("*[repeat]");
|
||||||
|
|
||||||
|
repeatables = Array.from(repeatables).filter(x=>this._isDirectDecedent(x));
|
||||||
|
|
||||||
|
if (repeatables.length > 0)
|
||||||
|
{
|
||||||
|
|
||||||
|
this._repeatNode = repeatables[0].cloneNode(true);
|
||||||
|
this._container = repeatables[0].parentElement;
|
||||||
|
this._beforeNode = repeatables[0].nextSibling;
|
||||||
|
repeatables[0].parentElement.removeChild(repeatables[0]);
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
if (this.children.length > 0)
|
||||||
|
this._repeatNode = this.children[0].cloneNode(true);
|
||||||
|
else
|
||||||
|
this._repeatNode = document.createElement("div");
|
||||||
|
|
||||||
|
this.innerHTML = "";
|
||||||
|
this._container = this;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
var newElements = this.querySelectorAll("*");
|
||||||
|
for (var i = 0; i < newElements.length; i++)
|
||||||
|
newElements[i].repeat = this;
|
||||||
|
|
||||||
|
var self = this;
|
||||||
|
|
||||||
|
/*
|
||||||
|
this._repeatModified = function(propertyName, value)
|
||||||
|
{
|
||||||
|
|
||||||
|
var bindings = self._repeatBindings.get(this);
|
||||||
|
|
||||||
|
// update view
|
||||||
|
for(var i = 0; i < bindings.length; i++)
|
||||||
|
{
|
||||||
|
if (bindings[i].props)
|
||||||
|
{
|
||||||
|
for(var j = 0; j < bindings[i].props.length; j++)
|
||||||
|
{
|
||||||
|
if (bindings[i].props[j] == propertyName)
|
||||||
|
{
|
||||||
|
bindings[i].node.data = bindings[i].func.apply(self,
|
||||||
|
[this, this, this, this, 0, 0]);
|
||||||
|
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
clear()
|
||||||
|
{
|
||||||
|
for (var i = 0; i < this.list.length; i++)
|
||||||
|
this._container.removeChild(this.list[i]);
|
||||||
|
this.list = [];
|
||||||
|
this._data = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
get data() {
|
||||||
|
return super.data;
|
||||||
|
}
|
||||||
|
|
||||||
|
get length() {
|
||||||
|
return this._data.length;
|
||||||
|
}
|
||||||
|
|
||||||
|
_assign(node, index) {
|
||||||
|
|
||||||
|
// update fields
|
||||||
|
|
||||||
|
// this so we won't mess with i-include view
|
||||||
|
if (node.view == undefined)
|
||||||
|
node.view = this.view;
|
||||||
|
|
||||||
|
node.rotue = this.route;
|
||||||
|
node.index = index;
|
||||||
|
|
||||||
|
// update references
|
||||||
|
if (node.hasAttribute("ref"))
|
||||||
|
{
|
||||||
|
let ref = node.getAttribute("ref");
|
||||||
|
// create new array
|
||||||
|
if (!(this.view.refs[ref] instanceof Array))
|
||||||
|
this.view.refs[ref] = [];
|
||||||
|
this.view.refs[ref][index] = node;
|
||||||
|
}
|
||||||
|
|
||||||
|
//Object.assign(node, customFields);
|
||||||
|
for (var i = 0; i < node.children.length; i++)
|
||||||
|
this._assign(node.children[i], index);
|
||||||
|
}
|
||||||
|
|
||||||
|
async setData(value)
|
||||||
|
{
|
||||||
|
|
||||||
|
|
||||||
|
// this to avoid interruption by an event
|
||||||
|
if (this._busy)
|
||||||
|
{
|
||||||
|
console.log("Busy", this);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
//console.log("RPT: SetData", value);
|
||||||
|
this._busy = true;
|
||||||
|
|
||||||
|
// var id = Math.random();
|
||||||
|
|
||||||
|
//console.log("SetData " + this.getAttribute("ref") + " " + id, value);
|
||||||
|
//console.trace();
|
||||||
|
// clear
|
||||||
|
this.clear();
|
||||||
|
|
||||||
|
if (value instanceof Structure)
|
||||||
|
value = value.toPairs();
|
||||||
|
else if (value == null || !(value instanceof Array || value instanceof Int32Array))
|
||||||
|
value = [];
|
||||||
|
|
||||||
|
|
||||||
|
//debugger;
|
||||||
|
await super.setData(value);
|
||||||
|
|
||||||
|
|
||||||
|
for (let i = 0; i < value.length; i++) {
|
||||||
|
|
||||||
|
///console.log("ST1");
|
||||||
|
//let content = this.template.content.cloneNode(true);
|
||||||
|
//let nodes = content.childNodes;
|
||||||
|
|
||||||
|
let e = this._repeatNode.cloneNode(true);
|
||||||
|
|
||||||
|
this.list.push(e);
|
||||||
|
|
||||||
|
|
||||||
|
//console.log("ST2");
|
||||||
|
|
||||||
|
|
||||||
|
// Create node
|
||||||
|
if (e instanceof IUIElement)
|
||||||
|
await e.create();
|
||||||
|
|
||||||
|
// console.log("ST3");
|
||||||
|
// Create children
|
||||||
|
//console.log("Create repeat " + i, this, e);
|
||||||
|
|
||||||
|
await IUI.create(e);
|
||||||
|
|
||||||
|
//console.log("Created repeat " + i, this, e);
|
||||||
|
|
||||||
|
|
||||||
|
//console.log("ST4");
|
||||||
|
|
||||||
|
this._make_bindings(e)
|
||||||
|
this._container.insertBefore(e, this._beforeNode);
|
||||||
|
|
||||||
|
this._assign(e, i);// { view: this.view, route: this.route, index: i });
|
||||||
|
|
||||||
|
|
||||||
|
//console.log("ST5");
|
||||||
|
|
||||||
|
if (e instanceof IUIElement) {
|
||||||
|
// @TODO should check if the element depends on parent or not
|
||||||
|
if (e.dataMap != null) {
|
||||||
|
// if map function failed to call setData, we will render without it
|
||||||
|
if (!(await e.dataMap.render(value[i])))
|
||||||
|
await e.render();
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
await e.setData(value[i]);
|
||||||
|
// console.log("ST6.1");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
if (e.dataMap != null)
|
||||||
|
await e.dataMap.render(value[i]);
|
||||||
|
else
|
||||||
|
e.data = value[i];
|
||||||
|
|
||||||
|
// console.log("ST6.2", e);
|
||||||
|
await this._renderElement(e, e.data);
|
||||||
|
// console.log("ST6.3");
|
||||||
|
}
|
||||||
|
|
||||||
|
// if (node.dataMap != null) {
|
||||||
|
// await node.dataMap.render(value[i]);
|
||||||
|
// this._renderElement(node, node.data);
|
||||||
|
// }
|
||||||
|
// else {
|
||||||
|
|
||||||
|
// node.data = value[i];
|
||||||
|
// this._renderElement(node, node.data);
|
||||||
|
// }
|
||||||
|
|
||||||
|
/*
|
||||||
|
|
||||||
|
var newElements = content.querySelectorAll("*");
|
||||||
|
|
||||||
|
while (nodes.length > 0) {
|
||||||
|
let n = nodes[0];
|
||||||
|
//n.index = i;
|
||||||
|
if (n instanceof HTMLElement)
|
||||||
|
n.setAttribute(":data", `d[${i}]`);
|
||||||
|
this._container.appendChild(n);
|
||||||
|
}
|
||||||
|
|
||||||
|
// this has to be called after appending the child otherwise node will be HTMLElement and not IUIElement , bug maybe in webkit ?
|
||||||
|
for (var j = 0; j < newElements.length; j++) {
|
||||||
|
let el = newElements[j];
|
||||||
|
|
||||||
|
// set route for all elements
|
||||||
|
el.index = i;
|
||||||
|
el.view = this;
|
||||||
|
el.route = this.route;
|
||||||
|
//newElements[j].route = this.route;
|
||||||
|
if (el instanceof IUIElement)
|
||||||
|
el.create();
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//super._uiBindings = null;
|
||||||
|
//super.updateBindings();
|
||||||
|
|
||||||
|
this._emit("modified", { data: value, property: "data" });
|
||||||
|
|
||||||
|
// console.log("SetDataEnd " + this.getAttribute("ref") + " " + id);
|
||||||
|
|
||||||
|
this._busy = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
15
src/Data/TableRow.js
Normal file
15
src/Data/TableRow.js
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
import IUIElement from "../Core/IUIElement.js";
|
||||||
|
import { IUI } from "../Core/IUI.js";
|
||||||
|
|
||||||
|
|
||||||
|
export default IUI.module(class TableRow extends IUIElement {
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
}
|
||||||
|
|
||||||
|
create() {
|
||||||
|
//this.style.display = "none";
|
||||||
|
this.style.display = "table-row";
|
||||||
|
console.log("TR");
|
||||||
|
}
|
||||||
|
});
|
||||||
70
src/Router/Link.js
Normal file
70
src/Router/Link.js
Normal file
@ -0,0 +1,70 @@
|
|||||||
|
import IUIElement from "../Core/IUIElement.js";
|
||||||
|
import { IUI } from "../Core/IUI.js";
|
||||||
|
|
||||||
|
export default IUI.module(class Link extends IUIElement
|
||||||
|
{
|
||||||
|
constructor()
|
||||||
|
{
|
||||||
|
//debugger;
|
||||||
|
super({ cssClass: 'link' });
|
||||||
|
|
||||||
|
// super({ cssClass: 'link' });
|
||||||
|
this._register("route");
|
||||||
|
this.addEventListener("click",
|
||||||
|
(e) => {
|
||||||
|
|
||||||
|
var r = this.getBoundingClientRect();
|
||||||
|
this.style.setProperty("--x", (e.x - r.x) + "px");
|
||||||
|
this.style.setProperty("--y", (e.y - r.y) + "px");
|
||||||
|
|
||||||
|
this.style.setProperty("--w", r.width + "px");
|
||||||
|
this.style.setProperty("--h", r.height + "px");
|
||||||
|
|
||||||
|
this.classList.remove(this.cssClass + "-clicked");
|
||||||
|
void this.offsetWidth;
|
||||||
|
this.classList.add(this.cssClass + "-clicked");
|
||||||
|
|
||||||
|
let url = this.getAttribute("href");
|
||||||
|
|
||||||
|
let ok = this._emit("route", { url, cancelable: true, query: this.query});
|
||||||
|
if (!ok)
|
||||||
|
return;
|
||||||
|
|
||||||
|
|
||||||
|
//if (url == "#")
|
||||||
|
// url = router.current.link;
|
||||||
|
// return;
|
||||||
|
|
||||||
|
let target = this.hasAttribute("target") ? document.getElementById(this.getAttribute("target")) : null;
|
||||||
|
|
||||||
|
|
||||||
|
if (url == ":back") {
|
||||||
|
window.router.back();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
if (this.query)// || this.hasAttribute(":data"))
|
||||||
|
window.router.navigate(url || router.current.url, this.query, target);
|
||||||
|
else if (url != null)
|
||||||
|
window.router.navigate(url, undefined, target);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
//this._register("click");
|
||||||
|
}
|
||||||
|
|
||||||
|
get link() {
|
||||||
|
return this.getAttribute("href");
|
||||||
|
}
|
||||||
|
|
||||||
|
set link(value) {
|
||||||
|
this.setAttribute("href", value);
|
||||||
|
}
|
||||||
|
|
||||||
|
create()
|
||||||
|
{
|
||||||
|
|
||||||
|
}
|
||||||
|
});
|
||||||
159
src/Router/Route.js
Normal file
159
src/Router/Route.js
Normal file
@ -0,0 +1,159 @@
|
|||||||
|
import IUIElement from "../Core/IUIElement.js";
|
||||||
|
import { IUI } from "../Core/IUI.js";
|
||||||
|
import Router from "./Router.js";
|
||||||
|
|
||||||
|
export default IUI.module(class Route extends IUIElement {
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
|
||||||
|
this.routes = [];
|
||||||
|
this.refs = {};
|
||||||
|
|
||||||
|
this._register("show");
|
||||||
|
this._register("hide");
|
||||||
|
}
|
||||||
|
|
||||||
|
async setData(value) {
|
||||||
|
if (this.hasAttribute("debug"))
|
||||||
|
debugger;
|
||||||
|
|
||||||
|
return await super.setData(value);
|
||||||
|
}
|
||||||
|
|
||||||
|
_updateLinks() {
|
||||||
|
for (var i = 0; i < this.children.length; i++) {
|
||||||
|
if (this.children[i] instanceof Route) {
|
||||||
|
this.routes.push(this.children[i]);
|
||||||
|
window.router.add(this.children[i], this);
|
||||||
|
i--;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
get link() {
|
||||||
|
var link = this.name;
|
||||||
|
var parent = this.parent;
|
||||||
|
while (parent != null) {
|
||||||
|
link = parent.name + "/" + link;
|
||||||
|
parent = parent.parent;
|
||||||
|
}
|
||||||
|
|
||||||
|
return link;
|
||||||
|
}
|
||||||
|
|
||||||
|
get name() {
|
||||||
|
return this.getAttribute("name");
|
||||||
|
}
|
||||||
|
|
||||||
|
get src() {
|
||||||
|
return this.getAttribute("src");
|
||||||
|
}
|
||||||
|
|
||||||
|
get dst() {
|
||||||
|
return this._dst || this.getAttribute("dst");
|
||||||
|
}
|
||||||
|
|
||||||
|
set dst(value){
|
||||||
|
this._dst = value;
|
||||||
|
}
|
||||||
|
|
||||||
|
get caption() {
|
||||||
|
return this.getAttribute("caption");
|
||||||
|
}
|
||||||
|
|
||||||
|
get private() {
|
||||||
|
return this.hasAttribute("private");
|
||||||
|
}
|
||||||
|
|
||||||
|
get icon() {
|
||||||
|
return this.getAttribute("icon");
|
||||||
|
}
|
||||||
|
|
||||||
|
_getParent() {
|
||||||
|
let e = null;//this.parentElement;
|
||||||
|
while (e = this.parentElement) {
|
||||||
|
if (e instanceof Route || e instanceof Router)
|
||||||
|
return e;
|
||||||
|
}
|
||||||
|
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
async create() {
|
||||||
|
|
||||||
|
//window.router.add(this);
|
||||||
|
this._updateLinks();
|
||||||
|
|
||||||
|
if (this.hasAttribute("src")) {
|
||||||
|
|
||||||
|
let src = this.getAttribute("src").replace(/^\/+|\/+$/g, '');
|
||||||
|
let x = await fetch(src);
|
||||||
|
if (x.status != 200)
|
||||||
|
return;
|
||||||
|
|
||||||
|
let t = await x.text();
|
||||||
|
|
||||||
|
this.innerHTML = t;
|
||||||
|
|
||||||
|
//let xeval = (code) => eval(code);
|
||||||
|
}
|
||||||
|
|
||||||
|
// call create for the new elements
|
||||||
|
var newElements = this.querySelectorAll("*");
|
||||||
|
for (var i = 0; i < newElements.length; i++) {
|
||||||
|
// set route for all elements
|
||||||
|
var el = newElements[i];
|
||||||
|
// newElements[i].route = this;
|
||||||
|
el.view = this;
|
||||||
|
el.route = this;
|
||||||
|
|
||||||
|
if (el.hasAttribute("ref")) {
|
||||||
|
this.refs[el.getAttribute("ref")] = el;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (el instanceof HTMLScriptElement) {
|
||||||
|
// this because HTML parsers don't evaluate script tag
|
||||||
|
// xeval.call(el.parentElement, "//# sourceURL=iui://" + src + "\r\n" + el.text);
|
||||||
|
|
||||||
|
//let func = new Function("//# sourceURL=iui://" +
|
||||||
|
// src + "-" + Math.round(Math.random() * 10000) + "\r\n return " + el.text.trim());
|
||||||
|
|
||||||
|
let func = new Function("//# sourceURL=iui://" + this.link
|
||||||
|
+ "\r\n return " + el.text.trim());
|
||||||
|
|
||||||
|
let rt = func.call(el.parentElement);
|
||||||
|
|
||||||
|
if (typeof (rt) === "object") {
|
||||||
|
for (var k in rt)
|
||||||
|
el.parentElement[k] = rt[k];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
created() {
|
||||||
|
//this.updateBindings();
|
||||||
|
}
|
||||||
|
|
||||||
|
set(value) {
|
||||||
|
if (value == this.visible)
|
||||||
|
return;
|
||||||
|
|
||||||
|
if (value) {
|
||||||
|
|
||||||
|
this.setAttribute("selected", "");
|
||||||
|
this._emit("show");
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
this.removeAttribute("selected");
|
||||||
|
this._emit("hide");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
get visible() { return this.hasAttribute("selected"); }
|
||||||
|
set visible(value) { this.set(value); }
|
||||||
|
|
||||||
|
});
|
||||||
334
src/Router/Router.js
Normal file
334
src/Router/Router.js
Normal file
@ -0,0 +1,334 @@
|
|||||||
|
import IUIElement from "../Core/IUIElement.js";
|
||||||
|
import Route from "./Route.js"
|
||||||
|
import Target from "./Target.js";
|
||||||
|
import { IUI } from "../Core/IUI.js";
|
||||||
|
|
||||||
|
|
||||||
|
export default IUI.module(class Router extends Target
|
||||||
|
{
|
||||||
|
|
||||||
|
constructor()
|
||||||
|
{
|
||||||
|
super({routes: [], _states: new Map(), active: null, cssClass: "router"});
|
||||||
|
|
||||||
|
this._history = [];
|
||||||
|
|
||||||
|
|
||||||
|
//IUI._router = this;
|
||||||
|
|
||||||
|
//Object.defineProperty(window, "router", {
|
||||||
|
// get() {
|
||||||
|
// if (!IUI._router.isConnected)
|
||||||
|
// IUI._router = document.getElementsByTagName("i-router")[0];
|
||||||
|
// return IUI._router;
|
||||||
|
// }
|
||||||
|
//});
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
_getRouteParent(route) {
|
||||||
|
let e = null;
|
||||||
|
|
||||||
|
while (e = route.parentElement) {
|
||||||
|
if (e instanceof Route || e instanceof Router)
|
||||||
|
return e;
|
||||||
|
}
|
||||||
|
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
add(route, parent = null) {
|
||||||
|
if (parent == null) {
|
||||||
|
this.routes.push(route);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
route.parent = parent;
|
||||||
|
this.appendChild(route);
|
||||||
|
//parent.routes.push(route);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
_routeInPath(name, routes)
|
||||||
|
{
|
||||||
|
for (var i = 0; i < routes.length; i++)
|
||||||
|
if (routes[i].name == name)
|
||||||
|
return routes[i];
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
getRoute(url, data) {
|
||||||
|
let p = url.split("/");
|
||||||
|
|
||||||
|
let searchRoutes = this.routes;
|
||||||
|
|
||||||
|
for (var i = 0; i < p.length; i++) {
|
||||||
|
var route = this._routeInPath(p[i], searchRoutes);
|
||||||
|
|
||||||
|
if (route == null)
|
||||||
|
return [null, null];
|
||||||
|
|
||||||
|
if (i == p.length - 1) {
|
||||||
|
// return [destination state route (link, icon,..etc) , actual route to view]
|
||||||
|
if (route.dst == null)
|
||||||
|
return [route, route];
|
||||||
|
else {
|
||||||
|
|
||||||
|
let dst = route.dst instanceof Function ? route.dst(data) : route.dst;
|
||||||
|
let url = dst.replace(/^[/]*(.*?)[/]*$/g, '$1').trim();
|
||||||
|
return [route, this.getRoute(url)[1]];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
searchRoutes = route.routes;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
back() {
|
||||||
|
//if (this._history.length > 1) {
|
||||||
|
// let last = this._history[this._history.length - 2];
|
||||||
|
// this.navigate(last.url, last.data, last.target);
|
||||||
|
//}
|
||||||
|
|
||||||
|
window.history.back();
|
||||||
|
}
|
||||||
|
|
||||||
|
_toQuery(o) {
|
||||||
|
let rt = [];
|
||||||
|
for (let i in o)
|
||||||
|
if (o[i] == undefined)
|
||||||
|
rt.push(i);
|
||||||
|
else
|
||||||
|
rt.push(i + "=" + encodeURI(o[i].toString().replace("&", "&&")));///encodeURIComponent(o[i]));
|
||||||
|
return rt.join("&");
|
||||||
|
}
|
||||||
|
|
||||||
|
_fromQuery(q) {
|
||||||
|
let kv = q.replace("&&", "\0").split('&');
|
||||||
|
let rt = {};
|
||||||
|
for (let i = 0; i < kv.length; i++) {
|
||||||
|
let d = kv[i].replace("\0", "&").split('=', 2);
|
||||||
|
let v = decodeURI(d[1] || ''); //decodeURIComponent(d[1] || '');
|
||||||
|
if (v != null && v.trim() != '' && !isNaN(v))
|
||||||
|
v = new Number(v);
|
||||||
|
rt[d[0]] = v;
|
||||||
|
}
|
||||||
|
return JSON.parse(JSON.stringify(rt));
|
||||||
|
}
|
||||||
|
|
||||||
|
async navigate(url, data, target, state)
|
||||||
|
{
|
||||||
|
let q = url.match(/^\/*(.*?)\?(.*)$|^\/*(.*)$/);
|
||||||
|
|
||||||
|
//debugger;
|
||||||
|
|
||||||
|
var path;
|
||||||
|
|
||||||
|
// do we have a query string ?
|
||||||
|
if (q[2] !== undefined) {
|
||||||
|
path = q[1];
|
||||||
|
data = this._fromQuery(q[2]);
|
||||||
|
url = path + "?" + q[2];
|
||||||
|
}
|
||||||
|
// do we have data ?
|
||||||
|
else if (data !== undefined) {
|
||||||
|
path = q[3];
|
||||||
|
url = path + "?" + this._toQuery(data);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
path = q[3];
|
||||||
|
url = path;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
let [stateRoute, viewRoute] = this.getRoute(path, data);
|
||||||
|
|
||||||
|
if (stateRoute == null)
|
||||||
|
return;
|
||||||
|
|
||||||
|
let ok = this._emit("navigate", { url, stateRoute, viewRoute, base: path, data, cancelable: true });
|
||||||
|
|
||||||
|
if (!ok)
|
||||||
|
return;
|
||||||
|
|
||||||
|
// destination view not found
|
||||||
|
if (viewRoute == null) {
|
||||||
|
console.log(`Destination route not found ${stateRoute.dst}`);
|
||||||
|
viewRoute = stateRoute;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//let state = null;
|
||||||
|
|
||||||
|
//if (data !== undefined) {
|
||||||
|
// for (let [k, v] of this._states)
|
||||||
|
// if (v == data) {
|
||||||
|
// state = k;
|
||||||
|
// break;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// if (state == null) {
|
||||||
|
// state = Math.random().toString(36).substr(2, 10);
|
||||||
|
// this._states.set(state, data);
|
||||||
|
// }
|
||||||
|
//}
|
||||||
|
|
||||||
|
|
||||||
|
if (!(target instanceof Target))
|
||||||
|
target = this;
|
||||||
|
|
||||||
|
|
||||||
|
if (state == null) {
|
||||||
|
let id = Math.random().toString(36).substr(2, 10);
|
||||||
|
state = { id, url, data, target, stateRoute, viewRoute };
|
||||||
|
this._states.set(id, state);
|
||||||
|
history.pushState(id, stateRoute.caption, this._hash ? "#" + url : "/" + url);
|
||||||
|
}
|
||||||
|
|
||||||
|
this._history.push(state.id);// { url, data, target, stateRoute, viewRoute });
|
||||||
|
|
||||||
|
target.show(viewRoute, this.active);
|
||||||
|
viewRoute.set(true);
|
||||||
|
|
||||||
|
|
||||||
|
this.active = viewRoute;
|
||||||
|
|
||||||
|
|
||||||
|
//{ url: "/", data: null, target: null };
|
||||||
|
this._emit("route", { route: stateRoute });
|
||||||
|
|
||||||
|
viewRoute.query = data || {};
|
||||||
|
stateRoute.query = viewRoute.query;
|
||||||
|
|
||||||
|
|
||||||
|
target.setLoading(true);
|
||||||
|
|
||||||
|
if (stateRoute.dataMap != null) {
|
||||||
|
// if map function failed to call setData, we will render without it
|
||||||
|
if (!(await stateRoute.dataMap.render(data || {})))
|
||||||
|
await stateRoute.render();
|
||||||
|
|
||||||
|
if (viewRoute != stateRoute)
|
||||||
|
await viewRoute.setData(stateRoute.data);
|
||||||
|
}
|
||||||
|
else //if (data !== undefined)
|
||||||
|
await viewRoute.setData(data);
|
||||||
|
|
||||||
|
target.setLoading(false);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
hide() {
|
||||||
|
// do nothing, we're not here to hide.
|
||||||
|
}
|
||||||
|
|
||||||
|
refresh() {
|
||||||
|
|
||||||
|
let state = this.current;
|
||||||
|
this.navigate(state.url, state.data, state.target, state);
|
||||||
|
|
||||||
|
//this.current.render();
|
||||||
|
//this.current.data = this.current.data;
|
||||||
|
//if (updateAttributes)
|
||||||
|
// this.current.updateAttributes(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
show(route, active) {
|
||||||
|
super.show(route, active);
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
get current() {
|
||||||
|
return this._states.get(history.state);//.viewRoute;
|
||||||
|
//return this._history[this._history.length - 1].viewRoute;
|
||||||
|
}
|
||||||
|
|
||||||
|
get previous() {
|
||||||
|
|
||||||
|
if (this._history.length > 2)
|
||||||
|
return this._states.get(this._history[this._history.length - 2]);//.viewRoute;
|
||||||
|
else
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
create() {
|
||||||
|
|
||||||
|
// save origin
|
||||||
|
this.origin = window.location.pathname + window.location.search;
|
||||||
|
}
|
||||||
|
|
||||||
|
destroy() {
|
||||||
|
console.log("Destroyed", this);
|
||||||
|
}
|
||||||
|
|
||||||
|
created()
|
||||||
|
{
|
||||||
|
|
||||||
|
if (this.hasAttribute("type") && this.getAttribute("type").toLowerCase() == "hash")
|
||||||
|
this._hash = true;
|
||||||
|
|
||||||
|
|
||||||
|
/// find all children
|
||||||
|
for (var i = 0; i < this.children.length; i++) {
|
||||||
|
let e = this.children[i];
|
||||||
|
if (e instanceof Route) {
|
||||||
|
this.add(e);
|
||||||
|
if (e.visible)
|
||||||
|
this.navigate(e.name);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this._emit("created");
|
||||||
|
|
||||||
|
//console.log("Router created", this);
|
||||||
|
}
|
||||||
|
|
||||||
|
connectedCallback() {
|
||||||
|
//console.log("New router", this);
|
||||||
|
|
||||||
|
window.router = this;
|
||||||
|
|
||||||
|
let self = this;
|
||||||
|
|
||||||
|
window.addEventListener("popstate", function (event) {
|
||||||
|
|
||||||
|
//console.log(event);
|
||||||
|
let stateId = event.state;
|
||||||
|
let path;
|
||||||
|
|
||||||
|
if (self._hash) {
|
||||||
|
path = window.location.hash;
|
||||||
|
|
||||||
|
if (path.length > 0)
|
||||||
|
path = path.substr(1);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
path = window.location.pathname;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (stateId != null) {
|
||||||
|
|
||||||
|
if (stateId != self._history[self._history.length -1]) {
|
||||||
|
//this._lastStateId = stateId;
|
||||||
|
let state = self._states.get(stateId);
|
||||||
|
self.navigate(path, state.data, state.target, state);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
console.log("SAME");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
this._lastState = null;
|
||||||
|
self.navigate(path, undefined, undefined, {});
|
||||||
|
}
|
||||||
|
//alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
|
||||||
|
console.log(document.location.hash, event.state);
|
||||||
|
});
|
||||||
|
|
||||||
|
this._register("navigate");
|
||||||
|
this._register("route");
|
||||||
|
this._register("created");
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
60
src/Router/Target.js
Normal file
60
src/Router/Target.js
Normal file
@ -0,0 +1,60 @@
|
|||||||
|
import IUIElement from "../Core/IUIElement.js";
|
||||||
|
import { IUI } from "../Core/IUI.js";
|
||||||
|
import Route from "./Route.js";
|
||||||
|
|
||||||
|
export default IUI.module(class Target extends IUIElement {
|
||||||
|
constructor(properties) {
|
||||||
|
super(IUI.extend(properties, { cssClass: 'target' }));
|
||||||
|
|
||||||
|
this._register("show");
|
||||||
|
this._register("hide");
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
setLoading(value)
|
||||||
|
{
|
||||||
|
if (value)
|
||||||
|
this.classList.add(this.cssClass + "-loading");
|
||||||
|
else
|
||||||
|
this.classList.remove(this.cssClass + "-loading");
|
||||||
|
}
|
||||||
|
|
||||||
|
create() {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
show(route, previous) {
|
||||||
|
|
||||||
|
let previousTarget = previous?.target;
|
||||||
|
|
||||||
|
route.target = this;
|
||||||
|
|
||||||
|
for (var i = 0; i < this.children.length; i++)
|
||||||
|
if (this.children[i] instanceof Route && this.children[i] != route) {
|
||||||
|
this.children[i].set(false);
|
||||||
|
}
|
||||||
|
|
||||||
|
//if (previous != null && previous != route && previous.target == this) {
|
||||||
|
// previous.set(false);
|
||||||
|
//}
|
||||||
|
//else
|
||||||
|
if (previousTarget != null && previousTarget != this) {
|
||||||
|
previousTarget.hide(this.active);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
if (route.parentElement != this)
|
||||||
|
this.appendChild(route);
|
||||||
|
|
||||||
|
this._emit("show", { route, previous});
|
||||||
|
}
|
||||||
|
|
||||||
|
hide(route) {
|
||||||
|
for (var i = 0; i < this.children.length; i++)
|
||||||
|
if (this.children[i] instanceof Route) {
|
||||||
|
this.children[i].set(false);
|
||||||
|
}
|
||||||
|
|
||||||
|
this._emit("hide", { route });
|
||||||
|
}
|
||||||
|
});
|
||||||
40
src/UI/Background.js
Normal file
40
src/UI/Background.js
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
import IUIElement from "../Core/IUIElement.js";
|
||||||
|
import { IUI } from "../Core/IUI.js";
|
||||||
|
|
||||||
|
export default IUI.module(class Background extends IUIElement {
|
||||||
|
constructor() {
|
||||||
|
super({ cssClass: 'background' });
|
||||||
|
|
||||||
|
|
||||||
|
this.classList.add(this.cssClass);
|
||||||
|
this._register("visible");
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
create() {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
hide() {
|
||||||
|
return this.setVisible(false);
|
||||||
|
}
|
||||||
|
|
||||||
|
show() {
|
||||||
|
return this.setVisible(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
setVisible(value) {
|
||||||
|
this.visible = value;
|
||||||
|
if (value) {
|
||||||
|
this.classList.add(this.cssClass + "-visible");
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
this.classList.remove(this.cssClass + "-visible");
|
||||||
|
}
|
||||||
|
|
||||||
|
this._emit("visible", value);
|
||||||
|
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
});
|
||||||
70
src/UI/Button.js
Normal file
70
src/UI/Button.js
Normal file
@ -0,0 +1,70 @@
|
|||||||
|
import IUIElement from "../Core/IUIElement.js";
|
||||||
|
import { IUI } from "../Core/IUI.js";
|
||||||
|
|
||||||
|
export default IUI.module(class Button extends IUIElement {
|
||||||
|
constructor() {
|
||||||
|
super({ cssClass: 'button' });
|
||||||
|
|
||||||
|
this.addEventListener("mousedown", (e)=>{
|
||||||
|
|
||||||
|
var r = this.getBoundingClientRect();
|
||||||
|
this.style.setProperty("--x", (e.x - r.x) + "px");
|
||||||
|
this.style.setProperty("--y", (e.y - r.y) + "px");
|
||||||
|
|
||||||
|
this.style.setProperty("--w", r.width + "px");
|
||||||
|
this.style.setProperty("--h", r.height + "px");
|
||||||
|
|
||||||
|
this.classList.remove(this.cssClass + "-clicked");
|
||||||
|
void this.offsetWidth;
|
||||||
|
this.classList.add(this.cssClass + "-clicked");
|
||||||
|
|
||||||
|
}, true);
|
||||||
|
|
||||||
|
this._register("check");
|
||||||
|
}
|
||||||
|
|
||||||
|
get type() {
|
||||||
|
return this.getAttribute("type");
|
||||||
|
}
|
||||||
|
|
||||||
|
set type(value)
|
||||||
|
{
|
||||||
|
this.setAttribute("type", value);
|
||||||
|
}
|
||||||
|
|
||||||
|
get checked() {
|
||||||
|
return this.hasAttribute("checked");
|
||||||
|
}
|
||||||
|
|
||||||
|
set checked(value)
|
||||||
|
{
|
||||||
|
if (value)
|
||||||
|
this.setAttribute("checked", "");
|
||||||
|
else
|
||||||
|
this.removeAttribute("checked");
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
get disabled() {
|
||||||
|
return this.getAttribute("disabled");
|
||||||
|
}
|
||||||
|
|
||||||
|
set disabled(value) {
|
||||||
|
this.setAttribute("disabled", value);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
create() {
|
||||||
|
|
||||||
|
if (this.type == "check")
|
||||||
|
{
|
||||||
|
this.addEventListener("click", ()=>{
|
||||||
|
let checked = !this.checked;
|
||||||
|
this.checked = checked;
|
||||||
|
this._emit("check", {checked});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
//this.classList.add(this.cssClass);
|
||||||
|
}
|
||||||
|
});
|
||||||
58
src/UI/Check.js
Normal file
58
src/UI/Check.js
Normal file
@ -0,0 +1,58 @@
|
|||||||
|
import IUIElement from "../Core/IUIElement.js";
|
||||||
|
import { IUI } from "../Core/IUI.js";
|
||||||
|
|
||||||
|
export default IUI.module(class Check extends IUIElement {
|
||||||
|
constructor(properties) {
|
||||||
|
super(IUI.extend(properties, { cssClass: 'check' }));
|
||||||
|
|
||||||
|
this._register("check");
|
||||||
|
|
||||||
|
this.on("click", () => {
|
||||||
|
this.checked = !this.checked;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
get checked() {
|
||||||
|
return this.hasAttribute("checked");
|
||||||
|
}
|
||||||
|
|
||||||
|
set checked(value) {
|
||||||
|
this.check(value);
|
||||||
|
this._emit("check", { checked: value });
|
||||||
|
}
|
||||||
|
|
||||||
|
check(value) {
|
||||||
|
if (value)
|
||||||
|
this.setAttribute("checked", "checked");
|
||||||
|
else
|
||||||
|
this.removeAttribute("checked");
|
||||||
|
}
|
||||||
|
|
||||||
|
create() {
|
||||||
|
this.field = this.getAttribute("field");
|
||||||
|
}
|
||||||
|
|
||||||
|
async setData(value) {
|
||||||
|
await super.setData(value);
|
||||||
|
if (value != null && this.field != null)
|
||||||
|
this.value = value[this.field];
|
||||||
|
else if (this.field != null)
|
||||||
|
this.value = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
modified(name, value) {
|
||||||
|
if (name == this.field) {
|
||||||
|
this.value = value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
get value() {
|
||||||
|
return this.checked;
|
||||||
|
}
|
||||||
|
|
||||||
|
set value(value) {
|
||||||
|
this.checked = value;
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
314
src/UI/DateTimePicker.js
Normal file
314
src/UI/DateTimePicker.js
Normal file
@ -0,0 +1,314 @@
|
|||||||
|
import IUIElement from "../Core/IUIElement.js";
|
||||||
|
import { IUI } from "../Core/IUI.js";
|
||||||
|
|
||||||
|
export default IUI.module(class DateTimePicker extends IUIElement {
|
||||||
|
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
get layout() {
|
||||||
|
return this._layout;
|
||||||
|
}
|
||||||
|
|
||||||
|
set layout(value) {
|
||||||
|
|
||||||
|
if (value == this._layout)
|
||||||
|
return;
|
||||||
|
|
||||||
|
this.innerHTML = "";
|
||||||
|
|
||||||
|
this._layout = value;
|
||||||
|
|
||||||
|
this.calendar = document.createElement("div");
|
||||||
|
this.calendar.className = this.cssClass + "-calendar";
|
||||||
|
|
||||||
|
|
||||||
|
this.calendarContent = document.createElement("div");
|
||||||
|
this.calendarContent.className = this.cssClass + "-calendar-content";
|
||||||
|
|
||||||
|
this.table = document.createElement("table");
|
||||||
|
this.header = this.table.createTHead();
|
||||||
|
this.body = this.table.createTBody();
|
||||||
|
|
||||||
|
this.calendarContent.appendChild(this.table);
|
||||||
|
|
||||||
|
var tr = this.header.insertRow();
|
||||||
|
|
||||||
|
for (var i = 0; i < 7; i++) {
|
||||||
|
var td = tr.insertCell();
|
||||||
|
td.innerHTML = this.layout.day.formatter((i + this.layout.weekStart) % 7);
|
||||||
|
td.className = this.cssClass + "-day";
|
||||||
|
}
|
||||||
|
|
||||||
|
this.tools = document.createElement("div");
|
||||||
|
this.tools.className = this.cssClass + "-tools";
|
||||||
|
|
||||||
|
this.month = document.createElement("div");
|
||||||
|
this.month.className = this.cssClass + "-month";
|
||||||
|
this.monthName = document.createElement("div");
|
||||||
|
this.monthName.className = this.cssClass + "-name";
|
||||||
|
this.nextMonth = document.createElement("div");
|
||||||
|
this.nextMonth.className = this.cssClass + "-next";
|
||||||
|
this.previousMonth = document.createElement("div");;
|
||||||
|
this.previousMonth.className = this.cssClass + "-previous";
|
||||||
|
|
||||||
|
this.month.appendChild(this.previousMonth);
|
||||||
|
this.month.appendChild(this.monthName);
|
||||||
|
this.month.appendChild(this.nextMonth);
|
||||||
|
|
||||||
|
this.year = document.createElement("div");
|
||||||
|
this.year.className = this.cssClass + "-year";
|
||||||
|
this.yearName = document.createElement("div");
|
||||||
|
this.yearName.className = this.cssClass + "-name";
|
||||||
|
this.nextYear = document.createElement("div");
|
||||||
|
this.nextYear.className = this.cssClass + "-next";
|
||||||
|
this.previousYear = document.createElement("div");
|
||||||
|
this.previousYear.className = this.cssClass + "-previous";
|
||||||
|
|
||||||
|
this.year.appendChild(this.previousYear);
|
||||||
|
this.year.appendChild(this.yearName);
|
||||||
|
this.year.appendChild(this.nextYear);
|
||||||
|
|
||||||
|
this.tools.appendChild(this.month);
|
||||||
|
this.tools.appendChild(this.year);
|
||||||
|
|
||||||
|
let self = this;
|
||||||
|
|
||||||
|
this.nextMonth.addEventListener("click", function () {
|
||||||
|
self._month = (self._month + 1) % 12;
|
||||||
|
self.render();
|
||||||
|
});
|
||||||
|
|
||||||
|
this.previousMonth.addEventListener("click", function () {
|
||||||
|
self._month = (self._month + 11) % 12;
|
||||||
|
self.render();
|
||||||
|
});
|
||||||
|
|
||||||
|
this.nextYear.addEventListener("click", function () {
|
||||||
|
self._year++;
|
||||||
|
self.render();
|
||||||
|
});
|
||||||
|
|
||||||
|
this.previousYear.addEventListener("click", function () {
|
||||||
|
self._year--;
|
||||||
|
self.render();
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
for (let i = 0; i < 6; i++) {
|
||||||
|
tr = this.body.insertRow();
|
||||||
|
|
||||||
|
for (var j = 0; j < 7; j++) {
|
||||||
|
let td = tr.insertCell(tr);
|
||||||
|
td.className = this.cssClass + "-day";
|
||||||
|
td.innerHTML = i + "x" + j;
|
||||||
|
td.addEventListener("click", function () {
|
||||||
|
self._day = parseInt(this.getAttribute("data-day"));
|
||||||
|
self._month = parseInt(this.getAttribute("data-month"));
|
||||||
|
self._year = parseInt(this.getAttribute("data-year"));
|
||||||
|
self._value.setDate(self._day);
|
||||||
|
self._value.setFullYear(self._year);
|
||||||
|
self._value.setMonth(self._month);
|
||||||
|
self.render();
|
||||||
|
self._emit("select", { value: self._value });
|
||||||
|
self._emit("modified", { value, property: "value" });
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.calendar.appendChild(this.tools);
|
||||||
|
this.calendar.appendChild(this.calendarContent);
|
||||||
|
|
||||||
|
/*
|
||||||
|
this.minutes = document.createElement("div");
|
||||||
|
this.minutes.className = this.cssClass + "-clock";
|
||||||
|
|
||||||
|
for (var i = 1; i < 61; i++) {
|
||||||
|
var range = document.createElement("div");
|
||||||
|
|
||||||
|
range.className = this.cssClass + "-time";
|
||||||
|
range.innerHTML = i;
|
||||||
|
this.minutes.appendChild(range);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
this.hours = document.createElement("div");
|
||||||
|
this.hours.className = this.cssClass + "-clock";
|
||||||
|
|
||||||
|
for (var i = 1; i < 25; i++) {
|
||||||
|
var range = document.createElement("div");
|
||||||
|
|
||||||
|
range.className = this.cssClass + "-time";
|
||||||
|
range.innerHTML = i;
|
||||||
|
this.hours.appendChild(range);
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
this.clock = document.createElement("div");
|
||||||
|
this.clock.className = this.cssClass + "-clock";
|
||||||
|
|
||||||
|
for (let i = 0; i < 1440; i += this.layout.time.range) {
|
||||||
|
var range = document.createElement("div");
|
||||||
|
range.className = this.cssClass + "-time";
|
||||||
|
range.innerHTML = this.layout.time.formatter(i);
|
||||||
|
range.setAttribute("data-time", i);
|
||||||
|
this.clock.appendChild(range);
|
||||||
|
|
||||||
|
range.addEventListener("click", function () {
|
||||||
|
var t = parseInt(this.getAttribute("data-time"));
|
||||||
|
var h = Math.floor(t / 60);
|
||||||
|
var m = Math.floor(t % 60);
|
||||||
|
self._value.setHours(h);
|
||||||
|
self._value.setMinutes(m);
|
||||||
|
self._emit("select", self._value);
|
||||||
|
self.render();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
//this.timeList = document.createElement("div");
|
||||||
|
//this.timeList =
|
||||||
|
this.appendChild(this.calendar);
|
||||||
|
this.appendChild(this.clock);
|
||||||
|
// this.appendChild(this.minutes);
|
||||||
|
// this.appendChild(this.hours);
|
||||||
|
|
||||||
|
this.value = new Date();
|
||||||
|
}
|
||||||
|
|
||||||
|
create() {
|
||||||
|
|
||||||
|
var self = this;
|
||||||
|
|
||||||
|
|
||||||
|
this._register("select");
|
||||||
|
|
||||||
|
this.classList.add(this.cssClass);
|
||||||
|
|
||||||
|
this.layout = {
|
||||||
|
day: {
|
||||||
|
formatter: function (index) {
|
||||||
|
return ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'][index];
|
||||||
|
//return ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'][index];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
month: {
|
||||||
|
formatter: function (index) {
|
||||||
|
return ["January", "February", "March", "April", "May", "June",
|
||||||
|
"July", "August", "September", "October", "November", "December"][index];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
year: {
|
||||||
|
formatter: function (value) {
|
||||||
|
return value;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
time: {
|
||||||
|
formatter: function (value) {
|
||||||
|
var formatDigit = function (d) { return (d < 10) ? "0" + d : d; };
|
||||||
|
var h = Math.floor(value / 60);
|
||||||
|
var m = Math.floor(value % 60);
|
||||||
|
return formatDigit(h) + ":" + formatDigit(m);
|
||||||
|
},
|
||||||
|
range: 15
|
||||||
|
},
|
||||||
|
|
||||||
|
weekStart: 5
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
|
||||||
|
var start = new Date(this._year, this._month, 1);
|
||||||
|
var offset = 1 - start.getDay() - (7 - this.layout.weekStart) % 7;//(this.weekStart > 3 ? (this.weekStart - 7) : this.weekStart);
|
||||||
|
|
||||||
|
this.yearName.innerHTML = this.layout.year.formatter(this._year);
|
||||||
|
this.monthName.innerHTML = this.layout.month.formatter(this._month);
|
||||||
|
|
||||||
|
var today = new Date();
|
||||||
|
|
||||||
|
for (var i = 0; i < 42; i++) {
|
||||||
|
var rowIndex = Math.floor(i / 7);
|
||||||
|
var cellIndex = i % 7;
|
||||||
|
|
||||||
|
var td = this.body.rows[rowIndex].cells[cellIndex];
|
||||||
|
|
||||||
|
var d = new Date(this._year, this._month, offset + i);
|
||||||
|
|
||||||
|
td.classList.remove(this.cssClass + "-different-month");
|
||||||
|
|
||||||
|
// gray it
|
||||||
|
if (d.getMonth() != this._month)
|
||||||
|
td.classList.add(this.cssClass + "-different-month");
|
||||||
|
|
||||||
|
if (d.getDate() == today.getDate() && d.getMonth() == today.getMonth() && d.getFullYear() == today.getFullYear())
|
||||||
|
td.classList.add(this.cssClass + "-day-today");
|
||||||
|
else
|
||||||
|
td.classList.remove(this.cssClass + "-day-today");
|
||||||
|
|
||||||
|
if (d.getDate() == this._value.getDate()
|
||||||
|
&& d.getFullYear() == this._value.getFullYear()
|
||||||
|
&& d.getMonth() == this._value.getMonth())
|
||||||
|
td.classList.add(this.cssClass + "-day-selected");
|
||||||
|
else
|
||||||
|
td.classList.remove(this.cssClass + "-day-selected");
|
||||||
|
|
||||||
|
|
||||||
|
td.setAttribute("data-day", d.getDate());
|
||||||
|
td.setAttribute("data-month", d.getMonth());
|
||||||
|
td.setAttribute("data-year", d.getFullYear());
|
||||||
|
|
||||||
|
td.innerHTML = d.getDate();
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
for (var i = 0; i < this.clock.children.length; i++)
|
||||||
|
this.clock.children[i].classList.remove(this.cssClass + "-time-selected");
|
||||||
|
|
||||||
|
var time = (this._value.getHours() * 60) + this._value.getMinutes();
|
||||||
|
|
||||||
|
if (time % this.layout.time.range == 0)
|
||||||
|
this.clock.children[time / this.layout.time.range].classList.add(this.cssClass + "-time-selected");
|
||||||
|
}
|
||||||
|
|
||||||
|
async setData(value) {
|
||||||
|
|
||||||
|
await super.setData(value);
|
||||||
|
|
||||||
|
|
||||||
|
if (value != null && this.field != null)
|
||||||
|
this.value = this.data[this.field];
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
get data() {
|
||||||
|
return super.data;
|
||||||
|
}
|
||||||
|
|
||||||
|
modified(name, value) {
|
||||||
|
if (name == this.field)
|
||||||
|
this.value = value;
|
||||||
|
}
|
||||||
|
|
||||||
|
set value(value) {
|
||||||
|
if (value && !isNaN(value.getTime())) {
|
||||||
|
this._value = value;
|
||||||
|
this._month = value.getMonth();
|
||||||
|
this._year = value.getFullYear();
|
||||||
|
this._day = value.getDate();
|
||||||
|
this.render();
|
||||||
|
this._emit("select", { value });
|
||||||
|
this._emit("modified", { value, property: "value" });
|
||||||
|
//this.modified("value", );
|
||||||
|
//this.modified("modified", { value });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
get value() {
|
||||||
|
return this._value;
|
||||||
|
}
|
||||||
|
});
|
||||||
308
src/UI/Dialog.js
Normal file
308
src/UI/Dialog.js
Normal file
@ -0,0 +1,308 @@
|
|||||||
|
import IUIElement from "../Core/IUIElement.js";
|
||||||
|
import { IUI } from "../Core/IUI.js";
|
||||||
|
import IUIWindow from "./Window.js";
|
||||||
|
|
||||||
|
export default IUI.module(class IUIDialog extends IUIWindow
|
||||||
|
{
|
||||||
|
static moduleName = "dialog";
|
||||||
|
|
||||||
|
constructor()
|
||||||
|
{
|
||||||
|
super({
|
||||||
|
closeable: true,
|
||||||
|
resizeable: true,
|
||||||
|
draggable: false,
|
||||||
|
_dragging: false,
|
||||||
|
_expanding: false,
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
visible: false,
|
||||||
|
modal: false
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
var self = this;
|
||||||
|
|
||||||
|
this._register("visible");
|
||||||
|
this._register("resize");
|
||||||
|
|
||||||
|
this.on("close", function(){
|
||||||
|
self.hide();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
create()
|
||||||
|
{
|
||||||
|
|
||||||
|
super.create();
|
||||||
|
var self = this;
|
||||||
|
|
||||||
|
if (this.modal)
|
||||||
|
{
|
||||||
|
this.background = iui("iui_app_background");
|
||||||
|
if (!this.background)
|
||||||
|
{
|
||||||
|
var bg = document.createElement("div");
|
||||||
|
bg.id="iui_app_background";
|
||||||
|
document.body.insertAdjacentElement("afterBegin", bg);
|
||||||
|
this.background = iui(bg).background();
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// this.modal.className = this.customClass + "-modal-background";
|
||||||
|
|
||||||
|
this.classList.add(this.customClass + "-modal");
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
this.loading = document.createElement("div");
|
||||||
|
this.loading.className = this.customClass + "-loading";
|
||||||
|
|
||||||
|
if (this.loadingText)
|
||||||
|
this.loading.innerHTML = this.loadingText;
|
||||||
|
else
|
||||||
|
{
|
||||||
|
var lc = document.createElement("div");
|
||||||
|
lc.className = this.customClass + "-loading-content";
|
||||||
|
this.loading.appendChild(lc);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.body.appendChild(this.loading);
|
||||||
|
|
||||||
|
|
||||||
|
if (this.draggable)
|
||||||
|
{
|
||||||
|
this.addEventListener("mousedown", function(e){
|
||||||
|
self._startDragging(e);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
this.header.addEventListener('mousedown', function (e) {
|
||||||
|
self._startDragging(e);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener('mouseup', function () {
|
||||||
|
self._stopDragging();
|
||||||
|
self._stopExpanding();
|
||||||
|
});
|
||||||
|
|
||||||
|
document.addEventListener('mousemove', function (e) {
|
||||||
|
if (self._dragging)
|
||||||
|
self._drag(e);
|
||||||
|
else if (self._expanding)
|
||||||
|
self._expand(e);
|
||||||
|
});
|
||||||
|
|
||||||
|
this.addEventListener("mousedown", function(e){
|
||||||
|
if (self.style.cursor == "nwse-resize")
|
||||||
|
self._startExpanding(e);
|
||||||
|
});
|
||||||
|
|
||||||
|
this.addEventListener("mousemove", function(e)
|
||||||
|
{
|
||||||
|
if (self._dragging)
|
||||||
|
return;
|
||||||
|
|
||||||
|
if (!self._expanding)
|
||||||
|
{
|
||||||
|
var x = (e.pageX || e.clientX + (document.documentElement.scrollLeft ?
|
||||||
|
document.documentElement.scrollLeft :
|
||||||
|
document.body.scrollLeft)) - self.offsetLeft;
|
||||||
|
var y = (e.pageY || e.clientY + (document.documentElement.scrollTop ?
|
||||||
|
document.documentElement.scrollTop :
|
||||||
|
document.body.scrollTop) ) - self.offsetTop;
|
||||||
|
|
||||||
|
if (self.clientWidth - x < 5 && self.clientHeight - y < 5)
|
||||||
|
{
|
||||||
|
self.style.cursor = "nwse-resize";
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
self.style.cursor = "";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
_startDragging(e)
|
||||||
|
{
|
||||||
|
this._dragging = true;
|
||||||
|
|
||||||
|
this._dragX = (e.pageX || e.clientX + (document.documentElement.scrollLeft ?
|
||||||
|
document.documentElement.scrollLeft :
|
||||||
|
document.body.scrollLeft)) - this.offsetLeft;
|
||||||
|
this._dragY = (e.pageY || e.clientY + (document.documentElement.scrollTop ?
|
||||||
|
document.documentElement.scrollTop :
|
||||||
|
document.body.scrollTop) ) - this.offsetTop;
|
||||||
|
|
||||||
|
//corssbrowser mouse pointer values
|
||||||
|
document.onselectstart = function() {return false};
|
||||||
|
}
|
||||||
|
|
||||||
|
_drag(e)
|
||||||
|
{
|
||||||
|
var x = e.pageX || e.clientX + (document.documentElement.scrollLeft ?
|
||||||
|
document.documentElement.scrollLeft :
|
||||||
|
document.body.scrollLeft);
|
||||||
|
var y = e.pageY || e.clientY + (document.documentElement.scrollTop ?
|
||||||
|
document.documentElement.scrollTop :
|
||||||
|
document.body.scrollTop);
|
||||||
|
this.style.top = (y - this._dragY ) + "px";// (y - self.y) + "px";
|
||||||
|
this.style.left = (x -this._dragX ) + "px";//(x - self.x) + "px";
|
||||||
|
this._emit("move", {left: this.offsetLeft, top: this.offsetTop});
|
||||||
|
}
|
||||||
|
|
||||||
|
_stopDragging()
|
||||||
|
{
|
||||||
|
this._dragging = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
_startExpanding(e)
|
||||||
|
{
|
||||||
|
document.onselectstart = function() {return false};
|
||||||
|
this._expanding = true;
|
||||||
|
this._dragX = (e.pageX || e.clientX + (document.documentElement.scrollLeft ?
|
||||||
|
document.documentElement.scrollLeft :
|
||||||
|
document.body.scrollLeft)) - this.offsetLeft;
|
||||||
|
this._dragY = (e.pageY || e.clientY + (document.documentElement.scrollTop ?
|
||||||
|
document.documentElement.scrollTop :
|
||||||
|
document.body.scrollTop) ) - this.offsetTop;
|
||||||
|
this._width = this.clientWidth;
|
||||||
|
this._height = this.clientHeight;
|
||||||
|
}
|
||||||
|
|
||||||
|
_expand(e)
|
||||||
|
{
|
||||||
|
var x = (e.pageX || e.clientX + (document.documentElement.scrollLeft ?
|
||||||
|
document.documentElement.scrollLeft :
|
||||||
|
document.body.scrollLeft)) - this.offsetLeft;
|
||||||
|
var y = (e.pageY || e.clientY + (document.documentElement.scrollTop ?
|
||||||
|
document.documentElement.scrollTop :
|
||||||
|
document.body.scrollTop)) - this.offsetTop;
|
||||||
|
|
||||||
|
|
||||||
|
this.resize(this._width + x -this._dragX, this._height + y - this._dragY);
|
||||||
|
}
|
||||||
|
|
||||||
|
_stopExpanding()
|
||||||
|
{
|
||||||
|
this._expanding = false;
|
||||||
|
this.style.cursor = "";
|
||||||
|
this._width = this.clientWidth;
|
||||||
|
this._height = this.clientHeight;
|
||||||
|
document.onselectstart = function() {return true};
|
||||||
|
}
|
||||||
|
|
||||||
|
setLoading(visible)
|
||||||
|
{
|
||||||
|
if (this.footer)
|
||||||
|
for(var i = 0; i < this.footer.children.length; i++)
|
||||||
|
if (this.footer.children[i].nodeName == "BUTTON")
|
||||||
|
this.footer.children[i].disabled = visible;
|
||||||
|
|
||||||
|
if (visible)
|
||||||
|
this.loading.classList.add(this.customClass + "-loading-visible");
|
||||||
|
else
|
||||||
|
this.loading.classList.remove(this.customClass + "-loading-visible");
|
||||||
|
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
center()
|
||||||
|
{
|
||||||
|
this._updateSize();
|
||||||
|
return this.move(window.pageXOffset + (window.innerWidth / 2) - (this.offsetWidth / 2),
|
||||||
|
window.pageYOffset + (window.innerHeight / 2) - (this.offsetHeight / 2));
|
||||||
|
}
|
||||||
|
|
||||||
|
setVisible(visible)
|
||||||
|
{
|
||||||
|
|
||||||
|
if (visible == this.visible)
|
||||||
|
return;
|
||||||
|
|
||||||
|
this.visible = visible;
|
||||||
|
|
||||||
|
if (visible)
|
||||||
|
{
|
||||||
|
this.classList.add(this.customClass + "-visible");
|
||||||
|
|
||||||
|
if (this.background)
|
||||||
|
{
|
||||||
|
this.background.setVisible(true);
|
||||||
|
|
||||||
|
}
|
||||||
|
//else
|
||||||
|
if (!this._shown)
|
||||||
|
{
|
||||||
|
this._updateSize();
|
||||||
|
this._shown = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.setFocus(true);
|
||||||
|
|
||||||
|
this._updateSize();
|
||||||
|
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
this._updateSize();
|
||||||
|
|
||||||
|
this.classList.remove(this.customClass + "-visible");
|
||||||
|
this.classList.remove(this.customClass + "-active");
|
||||||
|
|
||||||
|
if (this.background)
|
||||||
|
this.background.setVisible(false);
|
||||||
|
|
||||||
|
//this.modal.classList.remove(this.customClass + "-modal-background-visible");
|
||||||
|
|
||||||
|
this.setFocus(false);
|
||||||
|
|
||||||
|
var i = IUI._nav_list.indexOf(this);
|
||||||
|
if (i > -1)
|
||||||
|
IUI._nav_list.splice(i, 1);
|
||||||
|
|
||||||
|
/*
|
||||||
|
IUI._nav_list.pop
|
||||||
|
if (IUI._previousWindow)
|
||||||
|
if (IUI._previousWindow.visible)
|
||||||
|
IUI._previousWindow.focus();
|
||||||
|
else
|
||||||
|
window.location.hash = "";
|
||||||
|
else
|
||||||
|
window.location.hash = "";
|
||||||
|
*/
|
||||||
|
}
|
||||||
|
|
||||||
|
this._emit("visible", {visible});
|
||||||
|
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
hide()
|
||||||
|
{
|
||||||
|
this.setVisible(false);
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
show()
|
||||||
|
{
|
||||||
|
this.setVisible(true);
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
document.addEventListener("keydown", function (e) {
|
||||||
|
if ( e.keyCode === 27 ) { // ESC
|
||||||
|
var dialogs = IUI.registry.filter(function(o){ return ( o instanceof IUIDialog); }).filter(function(x){return x.focus;});
|
||||||
|
for(var i = 0; i < dialogs.length; i++)
|
||||||
|
dialogs[i].hide();
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
//IUI.module("dialog", IUIDialog, function(el, modal, properties){ return new IUIDialog(el, modal, properties);});
|
||||||
196
src/UI/DropDown.js
Normal file
196
src/UI/DropDown.js
Normal file
@ -0,0 +1,196 @@
|
|||||||
|
import IUIElement from "../Core/IUIElement.js";
|
||||||
|
import { IUI } from "../Core/IUI.js";
|
||||||
|
|
||||||
|
export default IUI.module(class DropDown extends IUIElement {
|
||||||
|
constructor() {
|
||||||
|
super({"direction": "down" });
|
||||||
|
|
||||||
|
var self = this;
|
||||||
|
|
||||||
|
this._register("visible");
|
||||||
|
|
||||||
|
this.visible = false;
|
||||||
|
|
||||||
|
// this.classList.add(this.cssClass + "-" + this.direction);
|
||||||
|
|
||||||
|
this.menu = this.getElementsByClassName(this.cssClass + "-menu")[0];
|
||||||
|
|
||||||
|
|
||||||
|
//this.arrow = document.createElement("div");
|
||||||
|
//this.arrow.className = this.customClass + "-arrow";
|
||||||
|
|
||||||
|
|
||||||
|
//this.el.appendChild(this.arrow);
|
||||||
|
|
||||||
|
if (this.getAttribute("fixed"))
|
||||||
|
{
|
||||||
|
this._fixed = true;
|
||||||
|
document.body.appendChild(this.menu);
|
||||||
|
}
|
||||||
|
|
||||||
|
//this.el.appendChild(this.menu);
|
||||||
|
|
||||||
|
this.addEventListener("click", function (e) {
|
||||||
|
var t = e.target
|
||||||
|
do {
|
||||||
|
if (t == self.menu)
|
||||||
|
return;
|
||||||
|
} while (t = t.parentElement)
|
||||||
|
|
||||||
|
self.setVisible(!self.visible);
|
||||||
|
});
|
||||||
|
|
||||||
|
IUI._menus.push(this);
|
||||||
|
|
||||||
|
/*
|
||||||
|
document.body.addEventListener("click", function(e)
|
||||||
|
{
|
||||||
|
if (!self.visible)
|
||||||
|
return;
|
||||||
|
|
||||||
|
var x = e.target;
|
||||||
|
do {
|
||||||
|
if (x == self.menu || x == self.el)
|
||||||
|
return;
|
||||||
|
} while (x = x.parentNode)
|
||||||
|
|
||||||
|
if (e.target.id == "iui_app_background")
|
||||||
|
return;
|
||||||
|
|
||||||
|
self.setVisible(false);
|
||||||
|
});*/
|
||||||
|
}
|
||||||
|
|
||||||
|
set fixed(value) {
|
||||||
|
if (value)
|
||||||
|
document.body.appendChild(this.menu);
|
||||||
|
this._fixed = value;
|
||||||
|
}
|
||||||
|
|
||||||
|
get fixed() {
|
||||||
|
return this._fixed;
|
||||||
|
}
|
||||||
|
|
||||||
|
hide() {
|
||||||
|
return this.setVisible(false);
|
||||||
|
}
|
||||||
|
|
||||||
|
show() {
|
||||||
|
return this.setVisible(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
getOffset() {
|
||||||
|
var el = this;
|
||||||
|
var _x = 0;
|
||||||
|
var _y = 0;
|
||||||
|
while (!isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) {
|
||||||
|
_x += el.offsetLeft - el.scrollLeft;
|
||||||
|
_y += el.offsetTop - el.scrollTop;
|
||||||
|
el = el.offsetParent;
|
||||||
|
}
|
||||||
|
_x += window.pageXOffset;
|
||||||
|
_y += window.pageYOffset;
|
||||||
|
|
||||||
|
return { top: _y, left: _x, width: this.clientWidth, height: this.clientHeight };
|
||||||
|
}
|
||||||
|
|
||||||
|
set data(value) {
|
||||||
|
// console.log("DD", value);
|
||||||
|
super.data = value;
|
||||||
|
// console.log("VV", this._uiBindings, this._dataBindings);
|
||||||
|
}
|
||||||
|
setVisible(visible) {
|
||||||
|
this.visible = visible;
|
||||||
|
|
||||||
|
if (!this.fixed) {
|
||||||
|
if (visible) {
|
||||||
|
this.menu.classList.add(this.cssClass + "-menu-visible");
|
||||||
|
this.classList.add(this.cssClass + "-visible");
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
this.menu.classList.remove(this.cssClass + "-menu-visible");
|
||||||
|
this.classList.remove(this.cssClass + "-visible");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
if (visible) {
|
||||||
|
var rect = this.getBoundingClientRect();
|
||||||
|
|
||||||
|
var menuWidth = this.menu.clientWidth;
|
||||||
|
var menuHeight = this.menu.clientHeight;
|
||||||
|
|
||||||
|
if (menuWidth > document.body.clientWidth) {
|
||||||
|
menuWidth = (document.body.clientWidth - 10);
|
||||||
|
this.menu.style.width = menuWidth + "px";
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
var startX = rect.left + (rect.width / 2 - menuWidth / 2);
|
||||||
|
|
||||||
|
|
||||||
|
if (this.direction == "up") {
|
||||||
|
// var menuTop = rect.top - this.arrow.clientHeight - this.menu.clientHeight;
|
||||||
|
var menuTop = rect.top - this.menu.clientHeight;
|
||||||
|
|
||||||
|
if (menuTop < 0) {
|
||||||
|
menuTop = 5;
|
||||||
|
// this.menu.style.height = (rect.top - this.arrow.clientHeight ) + "px";
|
||||||
|
this.menu.style.height = (rect.top) + "px";
|
||||||
|
|
||||||
|
this.menu.classList.add(this.cssClass + "-menu-oversized");
|
||||||
|
}
|
||||||
|
else
|
||||||
|
this.menu.classList.remove(this.cssClass + "-menu-oversized");
|
||||||
|
|
||||||
|
|
||||||
|
//this.arrow.classList.remove(this.customClass + "-arrow-down");
|
||||||
|
//this.arrow.classList.add(this.customClass + "-arrow-up");
|
||||||
|
//this.arrow.style.top = ( rect.top - this.arrow.clientHeight ) + "px";
|
||||||
|
this.menu.style.top = (menuTop) + "px";
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
//var menuTop = rect.top + rect.height + this.arrow.clientHeight;
|
||||||
|
var menuTop = rect.top + rect.height;
|
||||||
|
|
||||||
|
//this.arrow.classList.remove(this.customClass + "-arrow-up");
|
||||||
|
//this.arrow.classList.add(this.customClass + "-arrow-down");
|
||||||
|
//this.arrow.style.top = ( rect.top + rect.height ) + "px";
|
||||||
|
|
||||||
|
this.menu.style.top = menuTop + "px";
|
||||||
|
|
||||||
|
if (menuTop + menuHeight > document.body.clientHeight) {
|
||||||
|
this.menu.style.height = (document.body.clientHeight - menuTop) + "px";
|
||||||
|
this.menu.classList.add(this.cssClass + "-menu-oversized");
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
this.menu.classList.remove(this.cssClass + "-menu-oversized");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (startX < 0)
|
||||||
|
startX = 5;
|
||||||
|
else if (startX + menuWidth > document.body.clientWidth)
|
||||||
|
startX = document.body.clientWidth - menuWidth - 5;
|
||||||
|
|
||||||
|
|
||||||
|
//this.arrow.style.left = (rect.left + (rect.width/2 - this.arrow.clientWidth/2)) + "px";
|
||||||
|
this.menu.style.left = startX + "px";
|
||||||
|
|
||||||
|
//this.arrow.classList.add(this.customClass + "-arrow-visible");
|
||||||
|
this.menu.classList.add(this.cssClass + "-menu-visible");
|
||||||
|
this.classList.add(this.cssClass + "-visible");
|
||||||
|
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
//this.arrow.classList.remove(this.customClass + "-arrow-visible");
|
||||||
|
this.menu.classList.remove(this.cssClass + "-menu-visible");
|
||||||
|
this.classList.remove(this.cssClass + "-visible");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this._emit("visible", { visible});
|
||||||
|
|
||||||
|
return this;
|
||||||
|
|
||||||
|
}
|
||||||
|
});
|
||||||
101
src/UI/Form.js
Normal file
101
src/UI/Form.js
Normal file
@ -0,0 +1,101 @@
|
|||||||
|
import IUIElement from "../Core/IUIElement.js";
|
||||||
|
import { IUI } from "../Core/IUI.js";
|
||||||
|
import Tabs from "./Tabs.js";
|
||||||
|
import Tab from "./Tab.js";
|
||||||
|
|
||||||
|
export default IUI.module(class Form extends IUIElement {
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
}
|
||||||
|
|
||||||
|
create() {
|
||||||
|
|
||||||
|
this._container = document.createElement("div");
|
||||||
|
this._container.className = "container";
|
||||||
|
|
||||||
|
this._actions = document.createElement("div");
|
||||||
|
this._actions.className = "actions";
|
||||||
|
|
||||||
|
|
||||||
|
this._save = document.createElement("button");
|
||||||
|
this._save.className = "button";
|
||||||
|
this._save.innerHTML = this.hasAttribute("save") ? this.getAttribute("save") : "Save";
|
||||||
|
this._cancel = document.createElement("button");
|
||||||
|
this._cancel.className = "button";
|
||||||
|
this._cancel = this.hasAttribute("cancel") ? this.getAttribute("cancel") : "Cancel";
|
||||||
|
|
||||||
|
this._save.addEventListener("click", (x) => {
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
this._cancel.addEventListener("click", (x) => {
|
||||||
|
window.router.back();
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
this._actions.appendChild(this._save);
|
||||||
|
this._actions.appendChild(this._cancel);
|
||||||
|
|
||||||
|
this.appendChild(this._container);
|
||||||
|
this.appendChild(this._actions);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
set layout(value) {
|
||||||
|
/*
|
||||||
|
|
||||||
|
mode:tabs,
|
||||||
|
tabs: [
|
||||||
|
{name: 'Tab Name'},
|
||||||
|
{content: [
|
||||||
|
{field: 'item', type: 'text|selectlist|check|autocomplete|form', layout: {}}
|
||||||
|
]}
|
||||||
|
]
|
||||||
|
*/
|
||||||
|
// render layout
|
||||||
|
if (value.mode == "tabs") {
|
||||||
|
for (var i = 0; i < this.layout.tabs.length; i++) {
|
||||||
|
// render tab
|
||||||
|
this.mode = "tabs";
|
||||||
|
this._tabs = new Tabs();
|
||||||
|
var tab = new Tab();
|
||||||
|
this._tabs.add(tab);
|
||||||
|
for (var j = 0; j < this._tabs.length; j++) {
|
||||||
|
|
||||||
|
}
|
||||||
|
this.layout.tasbs[i].content
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
set data(value) {
|
||||||
|
var self = this;
|
||||||
|
|
||||||
|
if (value == null)
|
||||||
|
this._input.value = "";
|
||||||
|
else {
|
||||||
|
this._input.value = value[this._field];
|
||||||
|
|
||||||
|
if (value.on)
|
||||||
|
value.on("modified", (propertyName, value) => {
|
||||||
|
if (propertyName == self._field)
|
||||||
|
self._input.value = value[self._field];
|
||||||
|
});
|
||||||
|
}
|
||||||
|
//super.data = data;
|
||||||
|
}
|
||||||
|
|
||||||
|
get layout() {
|
||||||
|
return this._input.value;
|
||||||
|
}
|
||||||
|
|
||||||
|
set layout(value) {
|
||||||
|
// load layout
|
||||||
|
|
||||||
|
for (var i = 0; i < value.length; i++) {
|
||||||
|
// [{tab: },{}]
|
||||||
|
}
|
||||||
|
|
||||||
|
this._input.value = value;
|
||||||
|
}
|
||||||
|
});
|
||||||
204
src/UI/Grid.js
Normal file
204
src/UI/Grid.js
Normal file
@ -0,0 +1,204 @@
|
|||||||
|
import IUIElement from "../Core/IUIElement.js";
|
||||||
|
import { IUI } from "../Core/IUI.js";
|
||||||
|
|
||||||
|
export default IUI.module(class Grid extends IUIElement {
|
||||||
|
constructor()
|
||||||
|
{
|
||||||
|
super({index: "iid",
|
||||||
|
layout: {content: {field: "name", formatter: null},
|
||||||
|
title: {field: "content", formatter: null},
|
||||||
|
footer: {field: "footer", formatter: null}}});
|
||||||
|
|
||||||
|
this._register("add");
|
||||||
|
this._register("layout");
|
||||||
|
this._register("contextmenu");
|
||||||
|
|
||||||
|
this.windows = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
create() {
|
||||||
|
for (var i = 0; i < this.children.length; i++)
|
||||||
|
this.add(this.children[i]);
|
||||||
|
}
|
||||||
|
|
||||||
|
setGridLayout(style)
|
||||||
|
{
|
||||||
|
this.style.grid = style;
|
||||||
|
this._emit("layout", style, this);
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
add(win) {
|
||||||
|
let self = this;
|
||||||
|
|
||||||
|
win.setAttribute("draggable", true);
|
||||||
|
win.addEventListener("dragstart", function (e) {
|
||||||
|
e.dataTransfer.effectAllowed = 'move';
|
||||||
|
self._dragItem = this;
|
||||||
|
|
||||||
|
this.classList.add(self.cssClass + '-window-drag');
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
win.addEventListener("dragover", function (e) {
|
||||||
|
if (self._dragItem) {
|
||||||
|
e.preventDefault();
|
||||||
|
this.classList.add(self.cssClass + '-window-over');
|
||||||
|
e.dataTransfer.dropEffect = 'move'; // See the section on the DataTransfer object.
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
win.addEventListener("dragleave", function (e) {
|
||||||
|
|
||||||
|
if (e.preventDefault)
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
this.classList.remove(self.cssClass + "-window-over");
|
||||||
|
});
|
||||||
|
|
||||||
|
win.addEventListener("dragend", function (e) {
|
||||||
|
this.classList.remove(self.cssClass + '-window-drag');
|
||||||
|
self._dragItem = null;
|
||||||
|
});
|
||||||
|
|
||||||
|
win.addEventListener("drop", function (e) {
|
||||||
|
self._dragItem.classList.remove(self.cssClass + "-window-drag");
|
||||||
|
e.currentTarget.classList.remove(self.cssClass + "-window-over");
|
||||||
|
|
||||||
|
for (var i = 0; i < self.children.length; i++)
|
||||||
|
if (self.children[i] == self._dragItem) {
|
||||||
|
self.insertBefore(self._dragItem, e.currentTarget.nextSibling);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
else if (self.children[i] == e.currentTarget) {
|
||||||
|
self.insertBefore(self._dragItem, e.currentTarget);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
self._dragItem = null;
|
||||||
|
});
|
||||||
|
|
||||||
|
win.addEventListener("contextmenu", function (e) {
|
||||||
|
self.selected = win;
|
||||||
|
self._emit("contextmenu", { win });
|
||||||
|
});
|
||||||
|
|
||||||
|
win.on("close", function () {
|
||||||
|
self.remove(win);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
addOld(item)
|
||||||
|
{
|
||||||
|
|
||||||
|
var self = this;
|
||||||
|
|
||||||
|
var li = item;//document.createElement("li");
|
||||||
|
//li.setAttribute("data-id", item[this.index]);
|
||||||
|
|
||||||
|
li.setAttribute("draggable", true);
|
||||||
|
|
||||||
|
li.addEventListener("dragstart", function(e){
|
||||||
|
e.dataTransfer.effectAllowed = 'move';
|
||||||
|
self._dragItem = this;
|
||||||
|
|
||||||
|
this.classList.add(self.cssClass + '-window-drag');
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
li.addEventListener("dragover", function(e){
|
||||||
|
if (self._dragItem)
|
||||||
|
{
|
||||||
|
e.preventDefault();
|
||||||
|
this.classList.add(self.cssClass + '-window-over');
|
||||||
|
e.dataTransfer.dropEffect = 'move'; // See the section on the DataTransfer object.
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
li.addEventListener("dragleave", function(e){
|
||||||
|
|
||||||
|
if (e.preventDefault)
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
this.classList.remove(self.cssClass + "-window-over");
|
||||||
|
});
|
||||||
|
|
||||||
|
li.addEventListener("dragend", function(e){
|
||||||
|
this.classList.remove(self.cssClass + '-window-drag');
|
||||||
|
self._dragItem = null;
|
||||||
|
});
|
||||||
|
|
||||||
|
li.addEventListener("drop", function(e){
|
||||||
|
self._dragItem.classList.remove(self.cssClass + "-window-drag");
|
||||||
|
e.currentTarget.classList.remove(self.cssClass + "-window-over");
|
||||||
|
|
||||||
|
for(var i = 0; i < self.children.length; i++)
|
||||||
|
if (self.children[i] == self._dragItem)
|
||||||
|
{
|
||||||
|
self.insertBefore(self._dragItem, e.currentTarget.nextSibling);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
else if (self.children[i] == e.currentTarget)
|
||||||
|
{
|
||||||
|
self.insertBefore(self._dragItem, e.currentTarget);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
self._dragItem = null;
|
||||||
|
});
|
||||||
|
|
||||||
|
li.addEventListener("contextmenu", function(e){
|
||||||
|
self.selected = win;
|
||||||
|
self._emit("contextmenu", item, win, this, e);
|
||||||
|
});
|
||||||
|
|
||||||
|
var win = iui(li).window({draggable: false, title: this.layout.title.formatter ? this.layout.title.formatter(item[this.layout.title.field], item) : item[this.layout.title.field]});
|
||||||
|
|
||||||
|
var body = this.layout.content.formatter ? this.layout.content.formatter(item[this.layout.content.field], item, win, this) : item[this.layout.content.field];
|
||||||
|
if (body instanceof HTMLElement)
|
||||||
|
win.body.appendChild(body);
|
||||||
|
else
|
||||||
|
win.body.innerHTML = body;
|
||||||
|
|
||||||
|
var footer = this.layout.footer.formatter ? this.layout.footer.formatter(item[this.layout.footer.field], item, win, this) : item[this.layout.footer.field];
|
||||||
|
if (footer != null)
|
||||||
|
{
|
||||||
|
var fe = document.createElement("div");
|
||||||
|
fe.className = "window-footer";
|
||||||
|
|
||||||
|
if (footer instanceof HTMLElement)
|
||||||
|
fe.appendChild(footer);
|
||||||
|
else
|
||||||
|
fe.innerHTML = footer;
|
||||||
|
|
||||||
|
win.appendChild(fe);
|
||||||
|
}
|
||||||
|
|
||||||
|
win.on("close", function(){
|
||||||
|
self.remove(win);
|
||||||
|
});
|
||||||
|
|
||||||
|
this.appendChild(li);
|
||||||
|
|
||||||
|
win.control = item;
|
||||||
|
|
||||||
|
this.windows.push(win);
|
||||||
|
|
||||||
|
this._emit("add", item, win, this);
|
||||||
|
|
||||||
|
return this;
|
||||||
|
//win._updateSize();
|
||||||
|
}
|
||||||
|
|
||||||
|
remove(win)
|
||||||
|
{
|
||||||
|
win.destroy();
|
||||||
|
this.removeChild(win);
|
||||||
|
}
|
||||||
|
|
||||||
|
clear()
|
||||||
|
{
|
||||||
|
while (this.children.length > 0)
|
||||||
|
this.removeChild(this.children[0]);
|
||||||
|
}
|
||||||
|
});
|
||||||
218
src/UI/Input.js
Normal file
218
src/UI/Input.js
Normal file
@ -0,0 +1,218 @@
|
|||||||
|
import IUIElement from "../Core/IUIElement.js";
|
||||||
|
import { IUI } from "../Core/IUI.js";
|
||||||
|
|
||||||
|
export default IUI.module(class Input extends IUIElement {
|
||||||
|
constructor() {
|
||||||
|
super({ formatter: (x) => x });
|
||||||
|
this._register("input");
|
||||||
|
this._register("change");
|
||||||
|
}
|
||||||
|
|
||||||
|
_checkValidity() {
|
||||||
|
if (this.validate != null) {
|
||||||
|
try {
|
||||||
|
let valid = this.validate.apply(this);
|
||||||
|
if (!valid) {
|
||||||
|
this.setAttribute("invalid", "");
|
||||||
|
this.classList.add(this.cssClass + "-invalid");
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
this.removeAttribute("invalid");
|
||||||
|
this.classList.remove(this.cssClass + "-invalid");
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
catch (e) {
|
||||||
|
console.log("Validation Error", e);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
create() {
|
||||||
|
|
||||||
|
this.isAuto = this.hasAttribute("auto");
|
||||||
|
this.field = this.getAttribute("field");
|
||||||
|
|
||||||
|
|
||||||
|
if (this.field != null)
|
||||||
|
{
|
||||||
|
this.setAttribute(":data", `d['${this.field}']`)
|
||||||
|
this.setAttribute("async:revert", `d['${this.field}'] = await this.getData()`);
|
||||||
|
}
|
||||||
|
|
||||||
|
this._input = document.createElement("input");
|
||||||
|
let self = this;
|
||||||
|
|
||||||
|
this._input.addEventListener("input", () => {
|
||||||
|
if (self._checkValidity() && self.isAuto)
|
||||||
|
this.revert();
|
||||||
|
//self.data[self.field] = self.value;
|
||||||
|
});
|
||||||
|
|
||||||
|
this._input.addEventListener("change", () => {
|
||||||
|
self._emit("change", { value: self.value });
|
||||||
|
});
|
||||||
|
|
||||||
|
this.type = this.hasAttribute("type") ? this.getAttribute("type").toLowerCase() : "text";
|
||||||
|
|
||||||
|
this.accept = this.getAttribute("accept");
|
||||||
|
|
||||||
|
this.appendChild(this._input);
|
||||||
|
|
||||||
|
if (this.type == "password")
|
||||||
|
{
|
||||||
|
this._eye = document.createElement("div");
|
||||||
|
this._eye.className = this.cssClass + "-eye";
|
||||||
|
this._eye.addEventListener("mousedown", ()=>{
|
||||||
|
self._input.type = "text";
|
||||||
|
self._eye.classList.add(self.cssClass + "-eye-active");
|
||||||
|
});
|
||||||
|
this._eye.addEventListener("mouseup", ()=>{
|
||||||
|
self._input.type = "password";
|
||||||
|
self._eye.classList.remove(self.cssClass + "-eye-active");
|
||||||
|
});
|
||||||
|
|
||||||
|
this.appendChild(this._eye);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
async updateAttributes(deep, parentData) {
|
||||||
|
await super.updateAttributes(deep, parentData);
|
||||||
|
//this._input.type = this.type;
|
||||||
|
//this._input.value = this.value;
|
||||||
|
}
|
||||||
|
|
||||||
|
set type(value) {
|
||||||
|
this._input.type = value;
|
||||||
|
}
|
||||||
|
|
||||||
|
get type() {
|
||||||
|
return this._input.type;
|
||||||
|
}
|
||||||
|
|
||||||
|
set accept(value){
|
||||||
|
this._input.accept = value;
|
||||||
|
}
|
||||||
|
|
||||||
|
get accept() {
|
||||||
|
return this._input.accept;
|
||||||
|
}
|
||||||
|
|
||||||
|
set disabled(value) {
|
||||||
|
if (value)
|
||||||
|
this.setAttribute("disabled", "disabled");
|
||||||
|
else
|
||||||
|
this.removeAttribute("disabled");
|
||||||
|
|
||||||
|
this._input.disabled = value;
|
||||||
|
}
|
||||||
|
|
||||||
|
get disabled() {
|
||||||
|
return this._input.disabled;
|
||||||
|
}
|
||||||
|
|
||||||
|
set enabled(value) {
|
||||||
|
this.disabled = !value;
|
||||||
|
}
|
||||||
|
|
||||||
|
get enabled() {
|
||||||
|
return !this._input.disabled;
|
||||||
|
}
|
||||||
|
|
||||||
|
async setData(value) {
|
||||||
|
|
||||||
|
await super.setData(value);
|
||||||
|
|
||||||
|
if (this.type == "checkbox")
|
||||||
|
this._input.checked = value;
|
||||||
|
else if (this.type == "date")
|
||||||
|
this._input.value = value != null ? value.toISOString().slice(0, 10) : value;
|
||||||
|
else if (this.type == null || this.type == "text" || this.type == "search" || this.type == "password")
|
||||||
|
this._input.value = value == null ? '' : value;
|
||||||
|
else
|
||||||
|
this._input.value = value;
|
||||||
|
|
||||||
|
if (this._checkValidity() && this.isAuto)
|
||||||
|
this.revert();
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
await super.setData(value);
|
||||||
|
if (value != null && this.field != null)
|
||||||
|
this.value = value[this.field];
|
||||||
|
else if (this.field != null)
|
||||||
|
this.value = null;
|
||||||
|
*/
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// modified(name, value) {
|
||||||
|
// if (name == this.field) {
|
||||||
|
// this.value = value;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
async getData(){
|
||||||
|
if (this.type == "checkbox")
|
||||||
|
return this._input.checked;
|
||||||
|
else if (this.type == "date")
|
||||||
|
return new Date(this._input.value);
|
||||||
|
else if (this.type == "file")
|
||||||
|
return new Uint8Array(await this._input.files[0].arrayBuffer());
|
||||||
|
else
|
||||||
|
return this._input.value;
|
||||||
|
}
|
||||||
|
|
||||||
|
get data()
|
||||||
|
{
|
||||||
|
if (this.type == "checkbox")
|
||||||
|
return this._input.checked;
|
||||||
|
else if (this.type == "date")
|
||||||
|
return new Date(this._input.value);
|
||||||
|
else if (this.type == "file")
|
||||||
|
{
|
||||||
|
return new Promise((resolve)=>{
|
||||||
|
this._input.files[0].arrayBuffer().then((x)=>{
|
||||||
|
resolve(new Uint8Array(x));
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
else
|
||||||
|
return this._input.value;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
get data() {
|
||||||
|
if (this.type == "checkbox")
|
||||||
|
return this._input.checked;
|
||||||
|
else if (this.type == "date")
|
||||||
|
return new Date(this._input.value);
|
||||||
|
else if (this.type == "file")
|
||||||
|
{
|
||||||
|
|
||||||
|
}
|
||||||
|
else
|
||||||
|
return this._input.value;
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
|
||||||
|
// set value(value) {
|
||||||
|
|
||||||
|
// if (this.type == "checkbox")
|
||||||
|
// this._input.checked = value;
|
||||||
|
// else if (this.type == "date")
|
||||||
|
// this._input.value = value != null ? value.toISOString().slice(0, 10) : value;
|
||||||
|
// else if (this.type == null || this.type == "text")
|
||||||
|
// this._input.value = value == null ? '' : value;
|
||||||
|
// else
|
||||||
|
// this._input.value = value;
|
||||||
|
|
||||||
|
// this._checkValidity();
|
||||||
|
// }
|
||||||
|
});
|
||||||
179
src/UI/Login.js
Normal file
179
src/UI/Login.js
Normal file
@ -0,0 +1,179 @@
|
|||||||
|
import IUIElement from "../Core/IUIElement.js";
|
||||||
|
import { IUI } from "../Core/IUI.js";
|
||||||
|
|
||||||
|
export default IUI.module(class Login extends IUIElement
|
||||||
|
{
|
||||||
|
constructor()
|
||||||
|
{
|
||||||
|
super();
|
||||||
|
|
||||||
|
|
||||||
|
var template = `<div class='body' style='box-shadow: 0 2px 2px rgba(0, 0, 0, .3);
|
||||||
|
background: white;
|
||||||
|
border-radius: 3px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
user-select: none;
|
||||||
|
border: 1px solid #b4b4b4;'>
|
||||||
|
|
||||||
|
<div name="message"></div>
|
||||||
|
<div style='display: flex; flex-direction: column;padding: 20px;'>
|
||||||
|
|
||||||
|
<label class="textbox-with-label">
|
||||||
|
<input name="txtUsername" placeholder=" " autocomplete="no" style="width: calc(100% - 10px);">
|
||||||
|
<span name="spnUsername">Username</span>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
|
||||||
|
<label class="textbox-with-label" >
|
||||||
|
<input name="txtPassword" style="width: calc(100% - 10px);" type="password" placeholder=" " ">
|
||||||
|
<span name="spnPassword">Password</span>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<div style="display: flex">
|
||||||
|
|
||||||
|
<input type="checkbox" name="remember" >
|
||||||
|
<label for="remember" name="labelRemember">Remember</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class='actions'>
|
||||||
|
<button class='button' name="login">Login</button>
|
||||||
|
</div>
|
||||||
|
</div>`;
|
||||||
|
|
||||||
|
this.innerHTML = template;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
this._message = this.querySelector("div[name='message']");
|
||||||
|
|
||||||
|
this._usernameText = this.querySelector("span[name='spnUsername']");
|
||||||
|
this._passwordText = this.querySelector("span[name='spnPassword']");
|
||||||
|
this._rememberText = this.querySelector("label[name='labelRemember']");
|
||||||
|
this._username = this.querySelector("input[name='txtUsername']");
|
||||||
|
this._password = this.querySelector("input[name='txtPassword']");
|
||||||
|
this._remember = this.querySelector("input[name='remember']");
|
||||||
|
this._login = this.querySelector("button[name='login']");
|
||||||
|
|
||||||
|
var self = this;
|
||||||
|
|
||||||
|
this._password.addEventListener("keydown", (e) => { if (e.keyCode == 13) self.login(); });
|
||||||
|
|
||||||
|
if (this.hasAttribute("message")) {
|
||||||
|
this._message.innerHTML = this.getAttribute("message");
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.hasAttribute("username")) {
|
||||||
|
this._usernameText.innerHTML = this.getAttribute("username");
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.hasAttribute("password")) {
|
||||||
|
this._passwordText.innerHTML = this.getAttribute("password");
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.hasAttribute("remember")) {
|
||||||
|
this._rememberText.innerHTML = this.getAttribute("remember");
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.hasAttribute("login")) {
|
||||||
|
this._login.innerHTML = this.getAttribute("login");
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
let username = this.username;// window.localStorage.getItem("iui.login.username");
|
||||||
|
let password = this.password;// window.localStorage.getItem("iui.login.password");
|
||||||
|
if (username != "") {
|
||||||
|
this._username.value = username;
|
||||||
|
this._password.value = password;
|
||||||
|
this._remember.checked = true;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
this._login.addEventListener("click", ()=>this.login());
|
||||||
|
|
||||||
|
|
||||||
|
this._register("login");
|
||||||
|
this._register("logout");
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
login() {
|
||||||
|
let username = this._username.value;
|
||||||
|
let password = this._password.value;
|
||||||
|
|
||||||
|
if (username == "" || password == "")
|
||||||
|
return;
|
||||||
|
|
||||||
|
if (this._remember.checked) {
|
||||||
|
this.username = username;
|
||||||
|
this.password = password;
|
||||||
|
//window.localStorage.setItem("iui.login.username", username);
|
||||||
|
//window.localStorage.setItem("iui.login.password", password);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
window.localStorage.removeItem("iui.login.username");
|
||||||
|
window.localStorage.removeItem("iui.login.password");
|
||||||
|
}
|
||||||
|
|
||||||
|
this._emit("login", { username, password });
|
||||||
|
}
|
||||||
|
|
||||||
|
get username() {
|
||||||
|
return window.localStorage.getItem("iui.login.username");
|
||||||
|
}
|
||||||
|
|
||||||
|
set username(value) {
|
||||||
|
return window.localStorage.setItem("iui.login.username", value);
|
||||||
|
}
|
||||||
|
|
||||||
|
get password() {
|
||||||
|
return window.localStorage.getItem("iui.login.password");
|
||||||
|
}
|
||||||
|
|
||||||
|
set password(value) {
|
||||||
|
return window.localStorage.setItem("iui.login.password", value);
|
||||||
|
}
|
||||||
|
|
||||||
|
get token() {
|
||||||
|
return window.localStorage.getItem("iui.login.token");
|
||||||
|
}
|
||||||
|
|
||||||
|
set token(value) {
|
||||||
|
return window.localStorage.setItem("iui.login.token", value);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
get message() {
|
||||||
|
return this._message.innerHTML;
|
||||||
|
}
|
||||||
|
|
||||||
|
set message(value) {
|
||||||
|
this._message.innerHTML = value;
|
||||||
|
}
|
||||||
|
|
||||||
|
logout() {
|
||||||
|
window.localStorage.removeItem("iui.login.username");
|
||||||
|
window.localStorage.removeItem("iui.login.password");
|
||||||
|
window.localStorage.removeItem("iui.login.token");
|
||||||
|
this._username.value = "";
|
||||||
|
this._password.value = "";
|
||||||
|
this._remember.checked = false;
|
||||||
|
|
||||||
|
this._emit("logout");
|
||||||
|
}
|
||||||
|
|
||||||
|
created()
|
||||||
|
{
|
||||||
|
|
||||||
|
//if (this.hasAttribute("auto")) {
|
||||||
|
|
||||||
|
// let username = this.username;// window.localStorage.getItem("iui.login.username");
|
||||||
|
// let password = this.password;// window.localStorage.getItem("iui.login.password");
|
||||||
|
// if (this.username != "") {
|
||||||
|
// this._emit("login", { username, password });
|
||||||
|
// }
|
||||||
|
//}
|
||||||
|
|
||||||
|
}
|
||||||
|
});
|
||||||
196
src/UI/Menu.js
Normal file
196
src/UI/Menu.js
Normal file
@ -0,0 +1,196 @@
|
|||||||
|
import { IUI } from '../Core/IUI.js';
|
||||||
|
import IUIElement from '../Core/IUIElement.js';
|
||||||
|
import Background from './Background.js';
|
||||||
|
import DropDown from './DropDown.js';
|
||||||
|
|
||||||
|
export default class Menu extends IUIElement {
|
||||||
|
constructor(props) {
|
||||||
|
super(IUI.extend(props, {
|
||||||
|
index: "iid",
|
||||||
|
layout: { field: "name", formatter: null },
|
||||||
|
visible: false,
|
||||||
|
static: false,
|
||||||
|
"target-class": "selected"
|
||||||
|
}));
|
||||||
|
|
||||||
|
this._register("visible");
|
||||||
|
this._register("select");
|
||||||
|
|
||||||
|
IUI._menus.push(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// clear() {
|
||||||
|
// this.innerHTML = "";
|
||||||
|
// this._uiBindings = null;
|
||||||
|
// }
|
||||||
|
|
||||||
|
hide() {
|
||||||
|
return this.setVisible(false);
|
||||||
|
}
|
||||||
|
|
||||||
|
//show(x, y, element) {
|
||||||
|
// return this.setVisible(true, x, y, element);
|
||||||
|
//}
|
||||||
|
|
||||||
|
show(event) {
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
|
let el = event.currentTarget;
|
||||||
|
let x = event.pageX;
|
||||||
|
let y = event.pageY;
|
||||||
|
|
||||||
|
this.setVisible(true, x, y, el);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
async showModal(element) {
|
||||||
|
|
||||||
|
|
||||||
|
//super.data = this._getElementData(element);
|
||||||
|
|
||||||
|
await super.setData(element.data);
|
||||||
|
|
||||||
|
if (!this.background) {
|
||||||
|
this.background = document.getElementById("iui_app_background");
|
||||||
|
|
||||||
|
if (!this.background) {
|
||||||
|
this.background = new Background();// document.createElement("div");
|
||||||
|
this.background.id = "iui_app_background";
|
||||||
|
document.body.insertAdjacentElement("afterBegin", this.background);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.background.show();
|
||||||
|
this.classList.add(this.cssClass + "-modal");
|
||||||
|
this.classList.add(this.cssClass + "-visible");
|
||||||
|
|
||||||
|
var width = (window.innerWidth * 0.8);
|
||||||
|
this.style.width = width + "px";
|
||||||
|
|
||||||
|
this.style.top = (window.pageYOffset + window.innerHeight / 2 - this.offsetHeight / 2) + "px"; // (document.body.clientHeight / 2 - this.clientHeight / 2) + "px";
|
||||||
|
this.style.left = (window.pageXOffset + window.innerWidth / 2 - this.offsetWidth / 2) + "px"; //(document.body.clientWidth / 2 - width / 2) + "px";
|
||||||
|
|
||||||
|
|
||||||
|
this.visible = true;
|
||||||
|
this._emit("visible", { visible: true });
|
||||||
|
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
async setVisible(visible, x, y, element) {
|
||||||
|
this.visible = visible;
|
||||||
|
|
||||||
|
if (this.target) {
|
||||||
|
if (this["target-class"] != null && this["target-class"] != "")
|
||||||
|
this.target.classList.remove(this["target-class"]);
|
||||||
|
this.target = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (visible) {
|
||||||
|
|
||||||
|
//if (element)
|
||||||
|
//let dt = super._getElementData(element);
|
||||||
|
if (element) {
|
||||||
|
//[super.data, this.target] = dt;
|
||||||
|
|
||||||
|
await this.setData(element.data);
|
||||||
|
this.target = element;
|
||||||
|
|
||||||
|
if (this["target-class"] != null && this["target-class"] != "")
|
||||||
|
this.target.classList.add(this["target-class"]);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
this._pass = true;
|
||||||
|
|
||||||
|
if (IUI.responsive && !this.static)
|
||||||
|
return this.showModal();
|
||||||
|
|
||||||
|
this.classList.remove(this.cssClass + "-modal");
|
||||||
|
|
||||||
|
var rect = this.getBoundingClientRect();
|
||||||
|
|
||||||
|
if (y != null) {
|
||||||
|
if (y + rect.height > document.documentElement.clientHeight)
|
||||||
|
this.style.top = (document.documentElement.clientHeight - rect.height) + "px";
|
||||||
|
else
|
||||||
|
this.style.top = y + "px";
|
||||||
|
}
|
||||||
|
|
||||||
|
this.classList.add(this.cssClass + "-visible");
|
||||||
|
|
||||||
|
|
||||||
|
if (x != null) {
|
||||||
|
|
||||||
|
if (x + rect.width > document.body.scrollWidth)
|
||||||
|
this.style.left = (document.body.scrollWidth - rect.width) + "px";
|
||||||
|
//else if (x < 0)
|
||||||
|
// this.style.left = "0px";
|
||||||
|
else
|
||||||
|
this.style.left = x + "px";
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
|
||||||
|
this.classList.remove(this.cssClass + "-visible");
|
||||||
|
|
||||||
|
if (this.background)
|
||||||
|
this.background.hide();
|
||||||
|
|
||||||
|
//await super.setData({});// = {};
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
this._emit("visible", { visible });
|
||||||
|
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
IUI.module(Menu);
|
||||||
|
|
||||||
|
IUI.responsive = false;
|
||||||
|
|
||||||
|
window.addEventListener("load", function () {
|
||||||
|
|
||||||
|
var handler = function (e) {
|
||||||
|
if (e.target.id == "iui_app_background" && IUI.responsive) {
|
||||||
|
for (var i = 0; i < IUI._menus.length; i++)
|
||||||
|
if (IUI._menus[i] instanceof Menu)
|
||||||
|
IUI._menus[i].setVisible(false);
|
||||||
|
|
||||||
|
e.preventDefault();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
for (var i = 0; i < IUI._menus.length; i++) {
|
||||||
|
if (IUI._menus[i].visible) {
|
||||||
|
var x = e.target;
|
||||||
|
var m = IUI._menus[i];
|
||||||
|
if (m instanceof Menu) {
|
||||||
|
if (m._pass) {
|
||||||
|
m._pass = false;
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
else
|
||||||
|
if (m.visible)
|
||||||
|
if (!m.contains(e.target))
|
||||||
|
m.setVisible(false);
|
||||||
|
}
|
||||||
|
else if (m instanceof DropDown) {
|
||||||
|
if (!(m.contains(e.target) || m.menu.contains(e.target)))
|
||||||
|
m.setVisible(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
document.body.addEventListener("click", handler);
|
||||||
|
document.body.addEventListener("touchstart", handler);
|
||||||
|
});
|
||||||
164
src/UI/Navbar.js
Normal file
164
src/UI/Navbar.js
Normal file
@ -0,0 +1,164 @@
|
|||||||
|
import IUIElement from "../Core/IUIElement.js";
|
||||||
|
import { IUI } from "../Core/IUI.js";
|
||||||
|
import Link from "../Router/Link.js";
|
||||||
|
import Check from "./Check.js";
|
||||||
|
|
||||||
|
export default IUI.module(class Navbar extends IUIElement
|
||||||
|
{
|
||||||
|
constructor()
|
||||||
|
{
|
||||||
|
super();
|
||||||
|
}
|
||||||
|
|
||||||
|
search(text) {
|
||||||
|
for(var i = 0; i < this._container.children.length; i++)
|
||||||
|
{
|
||||||
|
let el = this._container.children[i];
|
||||||
|
if (el.title.toLowerCase().includes(text))
|
||||||
|
{
|
||||||
|
el.text.innerHTML = el.title.replace(new RegExp(text, 'gi'), (str) => `<span>${str}</span>`);
|
||||||
|
el.style.display = "";
|
||||||
|
el.removeAttribute("hidden");
|
||||||
|
|
||||||
|
// make parents visible
|
||||||
|
let level = parseInt(el.getAttribute("data-level"));
|
||||||
|
|
||||||
|
for(var j = i - 1; j >= 0; j--)
|
||||||
|
{
|
||||||
|
let previous = this._container.children[j];
|
||||||
|
let pLevel = parseInt(previous.getAttribute("data-level"));
|
||||||
|
|
||||||
|
if (pLevel < level)
|
||||||
|
{
|
||||||
|
previous.removeAttribute("hidden");
|
||||||
|
previous.style.display = "";
|
||||||
|
if (previous.expand)
|
||||||
|
previous.expand.checked = true;
|
||||||
|
level = pLevel;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
el.style.display = "none";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
expand(link, value) {
|
||||||
|
let next = link;// = link.nextElementSibling;
|
||||||
|
let level = parseInt(link.getAttribute("data-level"));
|
||||||
|
|
||||||
|
|
||||||
|
// save
|
||||||
|
//window.localStorage.setItem("iui.navbar/" + link.link, value);
|
||||||
|
|
||||||
|
if (link.expand && link.expand.checked != value)
|
||||||
|
link.expand.checked = value;
|
||||||
|
|
||||||
|
while (next = next.nextElementSibling) {
|
||||||
|
if (parseInt(next.getAttribute("data-level")) > level){
|
||||||
|
if (value)
|
||||||
|
next.removeAttribute("hidden");
|
||||||
|
else
|
||||||
|
next.setAttribute("hidden", "");
|
||||||
|
if (next.expand)
|
||||||
|
next.expand.checked = value;
|
||||||
|
}
|
||||||
|
else
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
build(){
|
||||||
|
|
||||||
|
this.innerHTML = "";
|
||||||
|
let roots = router.routes.filter(x => x.parent == null);
|
||||||
|
let self = this;
|
||||||
|
this._search = document.createElement("input");
|
||||||
|
this._search.type = "search";
|
||||||
|
this._search.className = this.cssClass + "-search textbox";
|
||||||
|
this._search.addEventListener("input", (x) => {
|
||||||
|
self.search(this._search.value);
|
||||||
|
});
|
||||||
|
|
||||||
|
this.appendChild(this._search);
|
||||||
|
|
||||||
|
this._container = document.createElement("div");
|
||||||
|
this._container.className = this.cssClass + "-container";
|
||||||
|
|
||||||
|
this.appendChild(this._container);
|
||||||
|
|
||||||
|
var appendRoutes = (routes, level) => {
|
||||||
|
for (var i = 0; i < routes.length; i++) {
|
||||||
|
|
||||||
|
if (routes[i].hasAttribute("private"))
|
||||||
|
continue;
|
||||||
|
|
||||||
|
if (this.private instanceof Function)
|
||||||
|
{
|
||||||
|
try{
|
||||||
|
// console.log("F");
|
||||||
|
if (this.private(routes[i]))
|
||||||
|
{
|
||||||
|
// console.log("private", route[i]);
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
} catch(ex){
|
||||||
|
console.log(ex);
|
||||||
|
debugger;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let el = new Link();// document.createElement("i-link");
|
||||||
|
el.setAttribute("data-level", level);
|
||||||
|
el.link = routes[i].link;
|
||||||
|
el.title = routes[i].caption;
|
||||||
|
if (routes[i].icon != null)
|
||||||
|
el.innerHTML = "<img src='" + routes[i].icon + "'>";
|
||||||
|
|
||||||
|
el.text = document.createElement("span");
|
||||||
|
el.text.innerHTML = el.title;
|
||||||
|
el.appendChild(el.text);
|
||||||
|
|
||||||
|
this._container.appendChild(el);
|
||||||
|
|
||||||
|
if (routes[i].routes.length > 0) {
|
||||||
|
// append plus
|
||||||
|
el.expand = new Check({cssClass: this.cssClass + "-check"});// document.createElement("i-check");
|
||||||
|
el.expand.checked = true;
|
||||||
|
|
||||||
|
|
||||||
|
//plus.className = "expand";#f8f8f8
|
||||||
|
el.expand.on("click", (e) => {
|
||||||
|
self.expand(el, el.expand.checked);
|
||||||
|
e.stopPropagation();
|
||||||
|
});
|
||||||
|
|
||||||
|
el.appendChild(el.expand);
|
||||||
|
appendRoutes(routes[i].routes, level + 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
appendRoutes(roots, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
created() {
|
||||||
|
if (!this.hasAttribute("manual"))
|
||||||
|
window.router.on("created", this.build);
|
||||||
|
|
||||||
|
window.router.on("navigate", (e) => {
|
||||||
|
for(var i = 0; i < this?._container?.children?.length; i++)
|
||||||
|
{
|
||||||
|
var el = this._container.children[i];
|
||||||
|
if (el.link == e.base)
|
||||||
|
el.setAttribute("selected", "");
|
||||||
|
else
|
||||||
|
el.removeAttribute("selected");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
188
src/UI/Range.js
Normal file
188
src/UI/Range.js
Normal file
@ -0,0 +1,188 @@
|
|||||||
|
import IUIElement from "../Core/IUIElement.js";
|
||||||
|
import { IUI } from "../Core/IUI.js";
|
||||||
|
|
||||||
|
export default IUI.module(class Range extends IUIElement {
|
||||||
|
constructor() {
|
||||||
|
super({
|
||||||
|
getItem: function (index, data) {
|
||||||
|
var item = data[index];
|
||||||
|
return item == null ? index : item;
|
||||||
|
},
|
||||||
|
getIndex: function (x, width, data) {
|
||||||
|
if (x < 0) x = 0;
|
||||||
|
var p = x / width;
|
||||||
|
var index = Math.floor(p * data.length);
|
||||||
|
return index;
|
||||||
|
},
|
||||||
|
getPreview: function (index, data, x, width, el) {
|
||||||
|
return null;
|
||||||
|
},
|
||||||
|
getPosition: function (index, data, width) {
|
||||||
|
var itemSize = width / data.length;
|
||||||
|
return (index * itemSize) + (itemSize / 2);
|
||||||
|
},
|
||||||
|
layout: {
|
||||||
|
render: function () {
|
||||||
|
return true;
|
||||||
|
},
|
||||||
|
initialize: function () {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: []
|
||||||
|
});
|
||||||
|
|
||||||
|
var self = this;
|
||||||
|
|
||||||
|
|
||||||
|
this._register("select");
|
||||||
|
this._register("userSelect");
|
||||||
|
|
||||||
|
this.preview = document.createElement("div");
|
||||||
|
this.preview.className = this.customClass + "-preview";
|
||||||
|
|
||||||
|
|
||||||
|
if (this.layout)
|
||||||
|
this.layout.initialize.apply(this);
|
||||||
|
|
||||||
|
|
||||||
|
this.thumb = document.createElement("div");
|
||||||
|
this.thumb.classList.add(this.customClass + "-thumb");
|
||||||
|
|
||||||
|
this.classList.add(this.customClass);
|
||||||
|
this.appendChild(this.preview);
|
||||||
|
this.appendChild(this.thumb);
|
||||||
|
|
||||||
|
this.addEventListener("mousedown", function (e) {
|
||||||
|
self._startDragging(e.clientX, e.clientY);
|
||||||
|
});
|
||||||
|
|
||||||
|
this.addEventListener("mouseleave", function (e) {
|
||||||
|
self.preview.classList.remove(self.customClass + "-preview-visible");
|
||||||
|
});
|
||||||
|
|
||||||
|
this.addEventListener("mouseenter", function (e) {
|
||||||
|
var rect = self.getBoundingClientRect();
|
||||||
|
self._offset = {
|
||||||
|
top: rect.top + document.body.scrollTop,
|
||||||
|
left: rect.left + document.body.scrollLeft
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
this.addEventListener("mousemove", function (e) {
|
||||||
|
|
||||||
|
|
||||||
|
self._drag(e.clientX, e.clientY);
|
||||||
|
|
||||||
|
var x = e.clientX - self._offset.left;
|
||||||
|
var index = self.getIndex(x, self.offsetWidth, self.data);
|
||||||
|
var preview = self.getPreview.call(self, index, self.data, x, self.offsetWidth, self.preview);
|
||||||
|
|
||||||
|
if (preview == null || preview == false) {
|
||||||
|
self.preview.classList.remove(self.customClass + "-preview-visible");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
else if (preview instanceof HTMLElement) {
|
||||||
|
while (self.preview.children.length > 0)
|
||||||
|
self.preview.removeChild(self.preview.children[0]);
|
||||||
|
self.preview.appendChild(preview);
|
||||||
|
}
|
||||||
|
else if (preview != true) {
|
||||||
|
self.preview.innerHTML = preview;
|
||||||
|
}
|
||||||
|
|
||||||
|
var index = self.getIndex((e.clientX - self._offset.left), self.offsetWidth, self.data);
|
||||||
|
var dx = self.getPosition(index, self.data, self.offsetWidth);
|
||||||
|
|
||||||
|
self.preview.style.setProperty("--x", dx + "px");
|
||||||
|
self.preview.classList.add(self.customClass + "-preview-visible");
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
document.addEventListener("mouseup", function (e) {
|
||||||
|
if (self._dragging)
|
||||||
|
self._endDragging(e.clientX, e.clientY);
|
||||||
|
});
|
||||||
|
|
||||||
|
this.addEventListener("touchstart", function (e) {
|
||||||
|
self._startDragging(e.targetTouches[0].clientX, e.targetTouches[0].clientY);
|
||||||
|
});
|
||||||
|
|
||||||
|
this.addEventListener("touchmove", function (e) {
|
||||||
|
self._drag(e.targetTouches[0].clientX, e.targetTouches[0].clientY);
|
||||||
|
});
|
||||||
|
|
||||||
|
this.addEventListener("touchend", function (e) {
|
||||||
|
self._endDragging(e.changedTouches[0].clientX, e.changedTouches[0].clientY);
|
||||||
|
});
|
||||||
|
|
||||||
|
this.setData(this.data);
|
||||||
|
}
|
||||||
|
|
||||||
|
_startDragging(x, y) {
|
||||||
|
this._dragging = true;
|
||||||
|
|
||||||
|
document.onselectstart = function () { return false };
|
||||||
|
|
||||||
|
var rect = this.getBoundingClientRect();
|
||||||
|
var body = document.body.getBoundingClientRect();
|
||||||
|
|
||||||
|
this._offset = {
|
||||||
|
top: rect.top + body.top,// document.body.scrollTop,
|
||||||
|
left: rect.left + body.left,
|
||||||
|
};
|
||||||
|
|
||||||
|
var index = this.getIndex((x - this._offset.left), this.offsetWidth, this.data);
|
||||||
|
this.set(index, true, true);
|
||||||
|
}
|
||||||
|
|
||||||
|
set(index, moveThumb = true, byUser = false) {
|
||||||
|
|
||||||
|
var item = this.getItem(index, this.data);
|
||||||
|
|
||||||
|
if (item != null) {
|
||||||
|
if (moveThumb) {
|
||||||
|
var dx = this.getPosition(index, this.data, this.offsetWidth);
|
||||||
|
this.thumb.style.setProperty("--x", dx + "px");
|
||||||
|
}
|
||||||
|
|
||||||
|
this._emit("select", { item, index });
|
||||||
|
|
||||||
|
if (byUser)
|
||||||
|
this._emit("userSelect", { item, index });
|
||||||
|
|
||||||
|
this.selected = item;
|
||||||
|
this.selectedIndex = index;
|
||||||
|
}
|
||||||
|
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
_drag(x, y) {
|
||||||
|
if (this._dragging) {
|
||||||
|
this.thumb.classList.add(this.customClass + "-thumb-dragging");
|
||||||
|
var dx = (x - this._offset.left);
|
||||||
|
var index = this.getIndex(dx, this.offsetWidth, this.data);
|
||||||
|
this.thumb.style.setProperty("--x", dx + "px");
|
||||||
|
this.set(index, false, true);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
_endDragging(x, y) {
|
||||||
|
document.onselectstart = function () { return true };
|
||||||
|
this.thumb.classList.remove(this.customClass + "-thumb-dragging");
|
||||||
|
var index = this.getIndex((x - this._offset.left), this.offsetWidth, this.data);
|
||||||
|
this.set(index, true, true);
|
||||||
|
this._dragging = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
clear() {
|
||||||
|
return this.setData([]);
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
if (this.layout && this.layout.render)
|
||||||
|
this.layout.render.apply(this);
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
});
|
||||||
23
src/UI/RoutesList.js
Normal file
23
src/UI/RoutesList.js
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
import IUIElement from "../Core/IUIElement.js";
|
||||||
|
import { IUI } from "../Core/IUI.js";
|
||||||
|
|
||||||
|
export default IUI.module(class RoutesList extends IUIElement {
|
||||||
|
|
||||||
|
constructor(properties) {
|
||||||
|
super(properties, { class: 'routes-list' });
|
||||||
|
}
|
||||||
|
|
||||||
|
create() {
|
||||||
|
if (!window.router)
|
||||||
|
return;
|
||||||
|
|
||||||
|
var table = document.createElement("i-table");
|
||||||
|
|
||||||
|
this.appendChild(table);
|
||||||
|
|
||||||
|
for (var i = 0; i < window.router.routes.length; i++) {
|
||||||
|
// hell
|
||||||
|
table.add
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
424
src/UI/Select.js
Normal file
424
src/UI/Select.js
Normal file
@ -0,0 +1,424 @@
|
|||||||
|
import { IUI, iui } from '../Core/IUI.js';
|
||||||
|
import IUIElement from '../Core/IUIElement.js';
|
||||||
|
import Menu from '../UI/Menu.js';
|
||||||
|
import Layout from '../Data/Layout.js';
|
||||||
|
import Repeat from '../Data/Repeat.js';
|
||||||
|
|
||||||
|
export default IUI.module(class Select extends IUIElement {
|
||||||
|
constructor() {
|
||||||
|
super({
|
||||||
|
visible: false,
|
||||||
|
searchlist: false,
|
||||||
|
hasArrow: true,
|
||||||
|
//hasAdd: false,
|
||||||
|
updateTextBox: true,
|
||||||
|
query: (x) => null,
|
||||||
|
//_formatter: (x) => x,
|
||||||
|
_autocomplete: false,
|
||||||
|
cssClass: 'select'
|
||||||
|
});
|
||||||
|
|
||||||
|
this._register("select");
|
||||||
|
this._register("input");
|
||||||
|
this._register("add");
|
||||||
|
}
|
||||||
|
|
||||||
|
disconnectedCallback() {
|
||||||
|
//console.log("Select removed", this);
|
||||||
|
if (!this.searchlist && this.menu)
|
||||||
|
app.removeChild(this.menu);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
connectedCallback(){
|
||||||
|
super.connectedCallback();
|
||||||
|
if (!this.searchlist && this.menu)
|
||||||
|
app.appendChild(this.menu);
|
||||||
|
}
|
||||||
|
get autocomplete() {
|
||||||
|
return this._autocomplete;
|
||||||
|
}
|
||||||
|
|
||||||
|
// get formatter() {
|
||||||
|
// return this._formatter;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// set formatter(value) {
|
||||||
|
// this._formatter = value;
|
||||||
|
// }
|
||||||
|
|
||||||
|
_checkValidity() {
|
||||||
|
|
||||||
|
if (this.validate != null) {
|
||||||
|
try {
|
||||||
|
let valid = this.validate.apply(this);
|
||||||
|
if (!valid) {
|
||||||
|
this.setAttribute("invalid", "");
|
||||||
|
this.classList.add(this.cssClass + "-invalid");
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
this.removeAttribute("invalid");
|
||||||
|
this.classList.remove(this.cssClass + "-invalid");
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
catch (ex) {
|
||||||
|
console.log("Validation Error", ex);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
set hasAdd(value) {
|
||||||
|
if (value)
|
||||||
|
this.setAttribute("add", "add");
|
||||||
|
else
|
||||||
|
this.removeAttribute("add");
|
||||||
|
}
|
||||||
|
|
||||||
|
get hasAdd() {
|
||||||
|
return this.hasAttribute("add");
|
||||||
|
}
|
||||||
|
|
||||||
|
async create() {
|
||||||
|
|
||||||
|
this.isAuto = this.hasAttribute("auto");
|
||||||
|
this.field = this.getAttribute("field");
|
||||||
|
|
||||||
|
|
||||||
|
if (this.field != null)
|
||||||
|
{
|
||||||
|
this.setAttribute(":data", `d['${this.field}']`)
|
||||||
|
this.setAttribute(":revert", `d['${this.field}'] = this.data`);
|
||||||
|
}
|
||||||
|
|
||||||
|
this._autocomplete = this.hasAttribute("autocomplete");
|
||||||
|
//this.hasAdd = this.hasAttribute("add") || this.hasAdd;
|
||||||
|
|
||||||
|
let self = this;
|
||||||
|
|
||||||
|
//if (this._autocomplete)
|
||||||
|
// this.cssClass += "-autocomplete";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
this.repeat = new Repeat();
|
||||||
|
this.repeat.cssClass = "select-menu-repeat";
|
||||||
|
//this.repeat.innerHTML = this.innerHTML;
|
||||||
|
this.repeat.setAttribute(":data", "d[1]");
|
||||||
|
|
||||||
|
this.counter = document.createElement("div");
|
||||||
|
this.counter.className = this.cssClass + "-counter";
|
||||||
|
this.counter.innerHTML = "${d[0]}";
|
||||||
|
|
||||||
|
|
||||||
|
this.menu = new Menu({ cssClass: this.cssClass + "-menu", "target-class": "" });
|
||||||
|
|
||||||
|
this.menu.on("click", async (e) => {
|
||||||
|
|
||||||
|
if (e.target != self.textbox && e.target != self.counter && e.target !== self.menu) {
|
||||||
|
await self.setData(e.target.data);
|
||||||
|
|
||||||
|
self._emit("input", { value: e.target.data });
|
||||||
|
|
||||||
|
self.hide();
|
||||||
|
}
|
||||||
|
}).on("visible", x=> { if (!x.visible) self.hide()});
|
||||||
|
|
||||||
|
|
||||||
|
if (this._autocomplete) {
|
||||||
|
this.textbox = document.createElement("input");
|
||||||
|
this.textbox.type = "search";
|
||||||
|
this.textbox.className = this.cssClass + "-textbox";
|
||||||
|
|
||||||
|
if (this.placeholder)
|
||||||
|
this.textbox.placeholder = this.placeholder;
|
||||||
|
|
||||||
|
this.textbox.addEventListener("keyup", function (e) {
|
||||||
|
if (e.keyCode != 13) {
|
||||||
|
self._query(0, self.textbox.value);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
this.textbox.addEventListener("search", function (e) {
|
||||||
|
// console.log(e);
|
||||||
|
});
|
||||||
|
|
||||||
|
this.menu.appendChild(this.textbox);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// get collection
|
||||||
|
let layout = Layout.get(this, "div", true, true);
|
||||||
|
|
||||||
|
//debugger;
|
||||||
|
|
||||||
|
|
||||||
|
if (layout != null && layout.label != undefined && layout.menu != undefined) {
|
||||||
|
this.label = layout.label.node;
|
||||||
|
this.repeat.appendChild(layout.menu.node);
|
||||||
|
}
|
||||||
|
else if (layout != null && layout.null != null)
|
||||||
|
{
|
||||||
|
this.label = layout.null.node;
|
||||||
|
this.repeat.appendChild(layout.null.node.cloneNode(true));
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
this.label = document.createElement("div");
|
||||||
|
this.repeat.innerHTML = this.innerHTML;
|
||||||
|
}
|
||||||
|
|
||||||
|
// clear everything else
|
||||||
|
//this.innerHTML = "";
|
||||||
|
|
||||||
|
this.label.className = this.cssClass + "-label";
|
||||||
|
|
||||||
|
this.appendChild(this.label);
|
||||||
|
|
||||||
|
this.label.addEventListener("click", function (e) {
|
||||||
|
self.show();
|
||||||
|
});
|
||||||
|
|
||||||
|
this.menu.appendChild(this.repeat);
|
||||||
|
this.menu.appendChild(this.counter);
|
||||||
|
|
||||||
|
|
||||||
|
if (this.hasArrow) {
|
||||||
|
this.arrow = document.createElement("div");
|
||||||
|
this.arrow.className = this.cssClass + "-arrow";
|
||||||
|
this.appendChild(this.arrow);
|
||||||
|
|
||||||
|
|
||||||
|
this.arrow.addEventListener("click", function (e) {
|
||||||
|
if (self.visible)
|
||||||
|
self.hide();
|
||||||
|
else
|
||||||
|
self.show();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.hasAdd) {
|
||||||
|
this._add_button = document.createElement("div");
|
||||||
|
this._add_button.className = this.cssClass + "-add";
|
||||||
|
this.appendChild(this._add_button);
|
||||||
|
|
||||||
|
this._add_button.addEventListener("click", function (e) {
|
||||||
|
self._emit("add", { value: self.data })
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
if (this.searchlist)
|
||||||
|
this.appendChild(this.menu);
|
||||||
|
else
|
||||||
|
{
|
||||||
|
app.appendChild(this.menu);
|
||||||
|
if (app.loaded)
|
||||||
|
{
|
||||||
|
///console.log("Append", this.menu);
|
||||||
|
await this.menu.create();
|
||||||
|
await IUI.create(this.menu);
|
||||||
|
this._make_bindings(this.menu);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.addEventListener("click", function (e) {
|
||||||
|
if (e.target == self.textbox)
|
||||||
|
self.show();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
get disabled() {
|
||||||
|
return this.hasAttribute("disabled");
|
||||||
|
}
|
||||||
|
|
||||||
|
set disabled(value) {
|
||||||
|
if (this._autocomplete) {
|
||||||
|
this.textbox.disabled = value;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (value) {
|
||||||
|
this.setAttribute("disabled", value);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
this.removeAttribute("disabled");
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
set(item) {
|
||||||
|
|
||||||
|
if (this.autocomplete != undefined) {
|
||||||
|
if (item != null)
|
||||||
|
this.textbox.value = this.layout.text.formatter ? this.layout.text.formatter(item[this.layout.text.field], item) : item[this.layout.text.field];
|
||||||
|
else
|
||||||
|
this.textbox.value = "";
|
||||||
|
} else {
|
||||||
|
if (item != null)
|
||||||
|
this.label.innerHTML = this.layout.text.formatter ? this.layout.text.formatter(item[this.layout.text.field], item) : item[this.layout.text.field];
|
||||||
|
else
|
||||||
|
this.label.innerHTML = "";
|
||||||
|
}
|
||||||
|
|
||||||
|
this.selected = item;
|
||||||
|
this._emit("select", item);
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
|
||||||
|
show() {
|
||||||
|
this.setVisible(true);
|
||||||
|
//this.textbox.focus();
|
||||||
|
}
|
||||||
|
|
||||||
|
hide() {
|
||||||
|
this.setVisible(false);
|
||||||
|
//this.textbox.focus();
|
||||||
|
}
|
||||||
|
|
||||||
|
clear() {
|
||||||
|
if (this.autocomplete !== undefined)
|
||||||
|
this.textbox.value = "";
|
||||||
|
//else
|
||||||
|
// this.label.innerHTML = "";
|
||||||
|
|
||||||
|
//this.menu.clear();
|
||||||
|
this.response.start = 0;
|
||||||
|
this.selected = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
async _query() {
|
||||||
|
|
||||||
|
|
||||||
|
if (this._autocomplete)
|
||||||
|
if (this.disabled)
|
||||||
|
return;
|
||||||
|
|
||||||
|
let self = this;
|
||||||
|
let text = this._autocomplete ? this.textbox.value : null;
|
||||||
|
|
||||||
|
var res = this.query(0, text)
|
||||||
|
if (res instanceof Promise)
|
||||||
|
res = await res;
|
||||||
|
|
||||||
|
//.then(async (res) => {
|
||||||
|
if (res[1].length == 0)
|
||||||
|
await self.setData(null);
|
||||||
|
|
||||||
|
await this.menu.setData(res);
|
||||||
|
|
||||||
|
|
||||||
|
// show results
|
||||||
|
//self.menu.clear();
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// for (var i = 0; i < res.length; i++) {
|
||||||
|
// let nodes = this.template.content.cloneNode(true).childNodes;
|
||||||
|
|
||||||
|
// while (nodes.length > 0) {
|
||||||
|
// let n = nodes[0];
|
||||||
|
// if (n instanceof HTMLElement)
|
||||||
|
// n.setAttribute(":data", `d[${i}]`);
|
||||||
|
// self.menu.appendChild(n);
|
||||||
|
// }
|
||||||
|
|
||||||
|
// }
|
||||||
|
|
||||||
|
// self.menu.updateBindings();
|
||||||
|
//self.menu.setData(res);
|
||||||
|
|
||||||
|
|
||||||
|
//}).catch(x => {
|
||||||
|
|
||||||
|
//});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
async setData(value) {
|
||||||
|
|
||||||
|
// this.label.innerHTML = "";
|
||||||
|
|
||||||
|
await super.setData(value);
|
||||||
|
|
||||||
|
try {
|
||||||
|
//let text = this.formatter(value);
|
||||||
|
// this.label.innerHTML = text == null ? "" : text;
|
||||||
|
|
||||||
|
this._emit("select", { value });
|
||||||
|
}
|
||||||
|
catch (ex) {
|
||||||
|
//console.log(ex);
|
||||||
|
this._emit("select", { value });
|
||||||
|
}
|
||||||
|
|
||||||
|
//this._checkValidity();
|
||||||
|
|
||||||
|
|
||||||
|
if (this._checkValidity() && this.isAuto)
|
||||||
|
this.revert();
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
setVisible(visible) {
|
||||||
|
|
||||||
|
if (visible == this.visible)
|
||||||
|
return;
|
||||||
|
|
||||||
|
//console.log("SLCT: SetVisible", visible);
|
||||||
|
|
||||||
|
if (visible) {
|
||||||
|
this._query(0);
|
||||||
|
|
||||||
|
// show menu
|
||||||
|
var rect = this.getBoundingClientRect();
|
||||||
|
this.menu.style.width = (this.clientWidth - this._computeMenuOuterWidth()) + "px";
|
||||||
|
this.menu.style.paddingTop = rect.height + "px";
|
||||||
|
this.menu.setVisible(true, rect.left, rect.top);//, this.menu);
|
||||||
|
this.visible = true;
|
||||||
|
|
||||||
|
this.classList.add(this.cssClass + "-visible");
|
||||||
|
|
||||||
|
if (this._autocomplete)
|
||||||
|
setTimeout(() => {
|
||||||
|
this.textbox.focus();
|
||||||
|
}, 100);
|
||||||
|
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
this.visible = false;
|
||||||
|
this.classList.remove(this.cssClass + "-visible");
|
||||||
|
|
||||||
|
this.menu.hide();
|
||||||
|
}
|
||||||
|
|
||||||
|
//this.textbox.focus();
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
_computeMenuOuterWidth() {
|
||||||
|
|
||||||
|
return this.menu.offsetWidth - this.menu.clientWidth;
|
||||||
|
/*
|
||||||
|
var style = window.getComputedStyle(this.menu.el, null);
|
||||||
|
var paddingLeft = style.getPropertyValue('padding-left');
|
||||||
|
var paddingRight = style.getPropertyValue('padding-right');
|
||||||
|
var borderLeft = style.getPropertyValue('border-left');
|
||||||
|
var borderRight = style.getPropertyValue('border-right');
|
||||||
|
|
||||||
|
paddingLeft = parseInt(paddingLeft.substr(0, paddingLeft.length - 2));
|
||||||
|
paddingRight = parseInt(paddingRight.substr(0, paddingRight.length - 2));
|
||||||
|
borderLeft = parseInt(borderLeft.substr(0, borderLeft.length - 2));
|
||||||
|
borderRight = parseInt(borderRight.substr(0, borderRight.length - 2));
|
||||||
|
|
||||||
|
return paddingLeft + paddingRight + borderLeft + borderRight;
|
||||||
|
*/
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
119
src/UI/SelectList.js
Normal file
119
src/UI/SelectList.js
Normal file
@ -0,0 +1,119 @@
|
|||||||
|
import IUIElement from "../Core/IUIElement.js";
|
||||||
|
import { IUI } from "../Core/IUI.js";
|
||||||
|
|
||||||
|
export default IUI.module(class SelectList extends IUIElement {
|
||||||
|
constructor() {
|
||||||
|
super({
|
||||||
|
selected: null,
|
||||||
|
list: [],
|
||||||
|
query: (x) => null,
|
||||||
|
formatter: (x) => x["name"]
|
||||||
|
});
|
||||||
|
|
||||||
|
var self = this;
|
||||||
|
|
||||||
|
this._register("select");
|
||||||
|
this.classList.add(this.cssClass);
|
||||||
|
|
||||||
|
// this.menu = iui(menu[0]).menu({ customClass: this.customClass + "-menu", layout: this.layout.menu });
|
||||||
|
this.menu = new Menu({ cssClass: this.cssClass + "-menu", "target-class": "" });
|
||||||
|
|
||||||
|
this.menu.on("visible", function (v) {
|
||||||
|
if (v)
|
||||||
|
self.classList.add(self.cssClass + "-active");
|
||||||
|
else
|
||||||
|
self.classList.remove(self.cssClass + "-active");
|
||||||
|
});
|
||||||
|
|
||||||
|
this.menu.on("click", (e) => {
|
||||||
|
let [data, element] = self.menu._getElementData(e.target);
|
||||||
|
if (data != undefined)
|
||||||
|
self.data = data;
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
document.body.appendChild(this.menu);
|
||||||
|
|
||||||
|
this.label = document.createElement("div");
|
||||||
|
this.label.className = this.cssClass + "-label";
|
||||||
|
|
||||||
|
|
||||||
|
this.appendChild(this.label);
|
||||||
|
|
||||||
|
this.label.addEventListener("click", function (e) {
|
||||||
|
self.show();
|
||||||
|
});
|
||||||
|
|
||||||
|
this.arrow = document.createElement("div");
|
||||||
|
this.arrow.className = this.customClass + "-arrow";
|
||||||
|
|
||||||
|
this.header = document.createElement("div");
|
||||||
|
this.header.className = this.customClass + "-header";
|
||||||
|
|
||||||
|
this.header.appendChild(this.label);
|
||||||
|
this.header.appendChild(this.arrow);
|
||||||
|
|
||||||
|
this.appendChild(this.header);
|
||||||
|
|
||||||
|
this.arrow.addEventListener("click", function (e) {
|
||||||
|
self.show();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
clear() {
|
||||||
|
this.menu.clear();
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
add(item) {
|
||||||
|
this.menu.add(item);
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
set(item) {
|
||||||
|
if (typeof item == "string" || typeof item == "number") {
|
||||||
|
for (var i = 0; i < this.menu.list.length; i++) {
|
||||||
|
if (this.menu.list[i][this.menu.index] == item) {
|
||||||
|
item = this.menu.list[i];
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// item is action
|
||||||
|
this.label.innerHTML = this.layout.text.formatter ? this.layout.text.formatter(item[this.layout.text.field], item) : item[this.layout.text.field];
|
||||||
|
this.selected = item;
|
||||||
|
|
||||||
|
this._emit("select", item);
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
show() {
|
||||||
|
return this.setVisible(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
hide() {
|
||||||
|
return this.setVisible(false);
|
||||||
|
}
|
||||||
|
|
||||||
|
_computeMenuOuterWidth() {
|
||||||
|
return this.menu.offsetWidth - this.menu.clientWidth;
|
||||||
|
}
|
||||||
|
|
||||||
|
setVisible(visible) {
|
||||||
|
if (visible) {
|
||||||
|
this.response.start = 0;
|
||||||
|
this._emit("query", null, this.response);
|
||||||
|
|
||||||
|
// show menu
|
||||||
|
var rect = this.el.getBoundingClientRect();
|
||||||
|
this.menu.el.style.width = (rect.width - this._computeMenuOuterWidth()) + "px";
|
||||||
|
this.menu.setVisible(true, rect.left, rect.top + rect.height);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
this.menu.hide();
|
||||||
|
}
|
||||||
|
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
});
|
||||||
20
src/UI/Tab.js
Normal file
20
src/UI/Tab.js
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
import { IUI } from "../Core/IUI.js";
|
||||||
|
import IUIElement from "../Core/IUIElement.js";
|
||||||
|
|
||||||
|
export default IUI.module(class Tab extends IUIElement {
|
||||||
|
constructor(properties) {
|
||||||
|
super(properties);
|
||||||
|
}
|
||||||
|
|
||||||
|
create() {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
get title() {
|
||||||
|
return this.getAttribute("title");
|
||||||
|
}
|
||||||
|
|
||||||
|
get selected() {
|
||||||
|
return this.hasAttribute("selected");// == "1" || selected == "yes" || selected == "true");
|
||||||
|
}
|
||||||
|
});
|
||||||
207
src/UI/TabbedTarget.js
Normal file
207
src/UI/TabbedTarget.js
Normal file
@ -0,0 +1,207 @@
|
|||||||
|
|
||||||
|
import IUIElement from "../Core/IUIElement.js";
|
||||||
|
import Tab from "./Tab.js";
|
||||||
|
import { IUI } from "../Core/IUI.js";
|
||||||
|
import Target from "../Router/Target.js";
|
||||||
|
|
||||||
|
export default IUI.module(class TabbedTarget extends Target {
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
super({
|
||||||
|
selected: null,
|
||||||
|
list: [],
|
||||||
|
_y: 0,
|
||||||
|
_x: 0,
|
||||||
|
auto: true,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
create() {
|
||||||
|
var self = this;
|
||||||
|
|
||||||
|
this._register("select");
|
||||||
|
|
||||||
|
|
||||||
|
this._bar = document.createElement("div");
|
||||||
|
this._bar.classList.add(this.cssClass + "-bar");
|
||||||
|
|
||||||
|
this._ext = document.createElement("span");
|
||||||
|
this._ext.className = this.cssClass + "-bar-ext";
|
||||||
|
this._bar.appendChild(this._ext);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//this.insertAdjacentElement("afterBegin", this._bar);
|
||||||
|
|
||||||
|
this._body = document.createElement("div");
|
||||||
|
this._body.className = this.cssClass + "-body";
|
||||||
|
|
||||||
|
this.appendChild(this._bar);
|
||||||
|
this.appendChild(this._body);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
var items = [];// this.getElementsByClassName("tab");
|
||||||
|
|
||||||
|
for (var i = 0; i < this.children.length; i++)
|
||||||
|
if (this.children[i] instanceof Tab)
|
||||||
|
items.push(this.children[i]);
|
||||||
|
|
||||||
|
this._observer = new ResizeObserver(x => {
|
||||||
|
self._body.style.height = x[0].target.offsetHeight + "px";// x[0].contentRect.height + "px";
|
||||||
|
});
|
||||||
|
|
||||||
|
items.map(x => self.add(x));
|
||||||
|
|
||||||
|
|
||||||
|
this.addEventListener("touchstart", function (e) {
|
||||||
|
|
||||||
|
var x = e.target;
|
||||||
|
do {
|
||||||
|
if (x == self)
|
||||||
|
break;
|
||||||
|
var sy = window.getComputedStyle(x)["overflow-x"];
|
||||||
|
if (x.scrollWidth > x.clientWidth && (sy == "scroll" || sy == "auto"))
|
||||||
|
return;
|
||||||
|
} while (x = x.parentElement)
|
||||||
|
|
||||||
|
self._x = e.originalEvent ? e.originalEvent.touches[0].clientX : e.touches[0].clientX;
|
||||||
|
self._y = e.originalEvent ? e.originalEvent.touches[0].clientY : e.touches[0].clientY;
|
||||||
|
}, { passive: true });
|
||||||
|
|
||||||
|
this.addEventListener("touchmove", function (e) {
|
||||||
|
if (!self._x || !self._y) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var xUp = e.originalEvent ? e.originalEvent.touches[0].clientX : e.touches[0].clientX;
|
||||||
|
var yUp = e.originalEvent ? e.originalEvent.touches[0].clientY : e.touches[0].clientY;
|
||||||
|
var xDiff = document.dir == "rtl" ? xUp - self._x : self._x - xUp;
|
||||||
|
var yDiff = self._y - yUp;
|
||||||
|
|
||||||
|
|
||||||
|
var index = self.list.indexOf(self.selected);
|
||||||
|
|
||||||
|
if (Math.abs(xDiff) > Math.abs(yDiff)) {/*most significant*/
|
||||||
|
if (xDiff > 0) {
|
||||||
|
if (index < self.list.length - 1) {
|
||||||
|
self.select(self.list[index + 1]);
|
||||||
|
//self.selected.scrollIntoView();
|
||||||
|
}
|
||||||
|
/* left swipe */
|
||||||
|
} else {
|
||||||
|
|
||||||
|
if (index > 0)
|
||||||
|
self.select(self.list[index - 1]);
|
||||||
|
|
||||||
|
/* right swipe */
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (yDiff > 0) {
|
||||||
|
/* up swipe */
|
||||||
|
} else {
|
||||||
|
/* down swipe */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* reset values */
|
||||||
|
self._x = null;
|
||||||
|
self._y = null;
|
||||||
|
|
||||||
|
}, { passive: true });
|
||||||
|
}
|
||||||
|
|
||||||
|
created() {
|
||||||
|
//this._updateSize();
|
||||||
|
}
|
||||||
|
|
||||||
|
add(item) {
|
||||||
|
|
||||||
|
var label = document.createElement("i-check");
|
||||||
|
label.innerHTML = item.title;
|
||||||
|
|
||||||
|
this._ext.insertAdjacentElement("beforebegin", label);
|
||||||
|
|
||||||
|
label.className = this.cssClass + "-button";
|
||||||
|
|
||||||
|
item.classList.add(this.cssClass + "-content");
|
||||||
|
label.content = item;
|
||||||
|
item.label = label;
|
||||||
|
|
||||||
|
this._body.append(item);
|
||||||
|
|
||||||
|
|
||||||
|
//this._bar.appendChild(label);
|
||||||
|
//this._bar.insertAdjacentElement("afterBegin", label);
|
||||||
|
|
||||||
|
this.list.push(item);
|
||||||
|
var self = this;
|
||||||
|
label.on("check", function (v) {
|
||||||
|
//if (v && !self._neglect)
|
||||||
|
self.select(item);
|
||||||
|
});
|
||||||
|
|
||||||
|
//this._updateSize();
|
||||||
|
//this.updateBindings();
|
||||||
|
|
||||||
|
if (item.selected)
|
||||||
|
this.select(item);
|
||||||
|
|
||||||
|
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
//_updateSize() {
|
||||||
|
// for (var i = 0; i < this._body.children.length; i++) {
|
||||||
|
// if (this._body.clientHeight < this._body.children[i].offsetHeight) {
|
||||||
|
// this._body.style.height = this._body.children[i].offsetHeight + "px";
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
//}
|
||||||
|
|
||||||
|
select(item) {
|
||||||
|
var tab;
|
||||||
|
if (item instanceof Tab)
|
||||||
|
tab = item;
|
||||||
|
else if (typeof o === 'string' || o instanceof String)
|
||||||
|
for (var i = 0; i < this.list.length; i++)
|
||||||
|
if (this.list[i].id == item) {
|
||||||
|
tab = item;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
else if (!isNaN(item))
|
||||||
|
tab = this.list[i];
|
||||||
|
|
||||||
|
//this._neglect = true;
|
||||||
|
|
||||||
|
var self = this;
|
||||||
|
|
||||||
|
this.list.forEach(function (i) {
|
||||||
|
if (i == tab)
|
||||||
|
tab.label.check(true);// set(true, false);
|
||||||
|
else {
|
||||||
|
i.classList.remove(self.cssClass + "-content-active");
|
||||||
|
i.label.check(false);// set(false, false);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
//this._neglect = false;
|
||||||
|
tab.classList.add(this.cssClass + "-content-active");
|
||||||
|
|
||||||
|
if (this.selected != null)
|
||||||
|
this._observer.unobserve(this.selected);
|
||||||
|
this.selected = tab;
|
||||||
|
this._observer.observe(this.selected);
|
||||||
|
|
||||||
|
if (document.dir == "rtl")
|
||||||
|
this._bar.scrollLeft = tab.label.offsetLeft + tab.label.clientWidth;
|
||||||
|
else
|
||||||
|
this._bar.scrollLeft = tab.label.offsetLeft - tab.label.clientWidth;
|
||||||
|
|
||||||
|
|
||||||
|
this._emit("select", tab);
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
1422
src/UI/Table.js
Normal file
1422
src/UI/Table.js
Normal file
File diff suppressed because it is too large
Load Diff
207
src/UI/Tabs.js
Normal file
207
src/UI/Tabs.js
Normal file
@ -0,0 +1,207 @@
|
|||||||
|
|
||||||
|
import IUIElement from "../Core/IUIElement.js";
|
||||||
|
import Tab from "./Tab.js";
|
||||||
|
import { IUI } from "../Core/IUI.js";
|
||||||
|
|
||||||
|
export default IUI.module(class Tabs extends IUIElement {
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
super({
|
||||||
|
selected: null,
|
||||||
|
list: [],
|
||||||
|
_y: 0,
|
||||||
|
_x: 0,
|
||||||
|
auto: true,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
create()
|
||||||
|
{
|
||||||
|
var self = this;
|
||||||
|
|
||||||
|
this._register("select");
|
||||||
|
|
||||||
|
|
||||||
|
this._bar = document.createElement("div");
|
||||||
|
this._bar.classList.add(this.cssClass + "-bar");
|
||||||
|
|
||||||
|
this._ext = document.createElement("span");
|
||||||
|
this._ext.className = this.cssClass + "-bar-ext";
|
||||||
|
this._bar.appendChild(this._ext);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//this.insertAdjacentElement("afterBegin", this._bar);
|
||||||
|
|
||||||
|
this._body = document.createElement("div");
|
||||||
|
this._body.className = this.cssClass + "-body";
|
||||||
|
|
||||||
|
this.appendChild(this._bar);
|
||||||
|
this.appendChild(this._body);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
var items = [];// this.getElementsByClassName("tab");
|
||||||
|
|
||||||
|
for (var i = 0; i < this.children.length; i++)
|
||||||
|
if (this.children[i] instanceof Tab)
|
||||||
|
items.push(this.children[i]);
|
||||||
|
|
||||||
|
this._observer = new ResizeObserver(x => {
|
||||||
|
self._body.style.height = x[0].target.offsetHeight + "px";// x[0].contentRect.height + "px";
|
||||||
|
});
|
||||||
|
|
||||||
|
items.map(x => self.add(x));
|
||||||
|
|
||||||
|
|
||||||
|
this.addEventListener("touchstart", function (e) {
|
||||||
|
|
||||||
|
var x = e.target;
|
||||||
|
do {
|
||||||
|
if (x == self)
|
||||||
|
break;
|
||||||
|
var sy = window.getComputedStyle(x)["overflow-x"];
|
||||||
|
if (x.scrollWidth > x.clientWidth && (sy == "scroll" || sy == "auto"))
|
||||||
|
return;
|
||||||
|
} while (x = x.parentElement)
|
||||||
|
|
||||||
|
self._x = e.originalEvent ? e.originalEvent.touches[0].clientX : e.touches[0].clientX;
|
||||||
|
self._y = e.originalEvent ? e.originalEvent.touches[0].clientY : e.touches[0].clientY;
|
||||||
|
}, { passive: true });
|
||||||
|
|
||||||
|
this.addEventListener("touchmove", function (e) {
|
||||||
|
if (!self._x || !self._y) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var xUp = e.originalEvent ? e.originalEvent.touches[0].clientX : e.touches[0].clientX;
|
||||||
|
var yUp = e.originalEvent ? e.originalEvent.touches[0].clientY : e.touches[0].clientY;
|
||||||
|
var xDiff = document.dir == "rtl" ? xUp - self._x : self._x - xUp;
|
||||||
|
var yDiff = self._y - yUp;
|
||||||
|
|
||||||
|
|
||||||
|
var index = self.list.indexOf(self.selected);
|
||||||
|
|
||||||
|
if (Math.abs(xDiff) > Math.abs(yDiff)) {/*most significant*/
|
||||||
|
if (xDiff > 0) {
|
||||||
|
if (index < self.list.length - 1) {
|
||||||
|
self.select(self.list[index + 1]);
|
||||||
|
//self.selected.scrollIntoView();
|
||||||
|
}
|
||||||
|
/* left swipe */
|
||||||
|
} else {
|
||||||
|
|
||||||
|
if (index > 0)
|
||||||
|
self.select(self.list[index - 1]);
|
||||||
|
|
||||||
|
/* right swipe */
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (yDiff > 0) {
|
||||||
|
/* up swipe */
|
||||||
|
} else {
|
||||||
|
/* down swipe */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* reset values */
|
||||||
|
self._x = null;
|
||||||
|
self._y = null;
|
||||||
|
|
||||||
|
}, { passive: true });
|
||||||
|
}
|
||||||
|
|
||||||
|
created() {
|
||||||
|
//this._updateSize();
|
||||||
|
}
|
||||||
|
|
||||||
|
add(item) {
|
||||||
|
|
||||||
|
var label = document.createElement("i-check");
|
||||||
|
label.innerHTML = item.title;
|
||||||
|
|
||||||
|
this._ext.insertAdjacentElement("beforebegin", label);
|
||||||
|
|
||||||
|
label.className = this.cssClass + "-button";
|
||||||
|
|
||||||
|
item.classList.add(this.cssClass + "-content");
|
||||||
|
label.content = item;
|
||||||
|
item.label = label;
|
||||||
|
|
||||||
|
this._body.append(item);
|
||||||
|
|
||||||
|
|
||||||
|
//this._bar.appendChild(label);
|
||||||
|
//this._bar.insertAdjacentElement("afterBegin", label);
|
||||||
|
|
||||||
|
this.list.push(item);
|
||||||
|
var self = this;
|
||||||
|
label.on("check", function (v) {
|
||||||
|
//if (v && !self._neglect)
|
||||||
|
self.select(item);
|
||||||
|
});
|
||||||
|
|
||||||
|
//this._updateSize();
|
||||||
|
//this.updateBindings();
|
||||||
|
|
||||||
|
if (item.selected)
|
||||||
|
this.select(item);
|
||||||
|
|
||||||
|
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
//_updateSize() {
|
||||||
|
// for (var i = 0; i < this._body.children.length; i++) {
|
||||||
|
// if (this._body.clientHeight < this._body.children[i].offsetHeight) {
|
||||||
|
// this._body.style.height = this._body.children[i].offsetHeight + "px";
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
//}
|
||||||
|
|
||||||
|
select(item) {
|
||||||
|
var tab;
|
||||||
|
if (item instanceof Tab)
|
||||||
|
tab = item;
|
||||||
|
else if (typeof o === 'string' || o instanceof String)
|
||||||
|
for (var i = 0; i < this.list.length; i++)
|
||||||
|
if (this.list[i].id == item) {
|
||||||
|
tab = item;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
else if (!isNaN(item))
|
||||||
|
tab = this.list[i];
|
||||||
|
|
||||||
|
//this._neglect = true;
|
||||||
|
|
||||||
|
var self = this;
|
||||||
|
|
||||||
|
this.list.forEach(function (i) {
|
||||||
|
if (i == tab)
|
||||||
|
tab.label.check(true);// set(true, false);
|
||||||
|
else {
|
||||||
|
i.classList.remove(self.cssClass + "-content-active");
|
||||||
|
i.label.check(false);// set(false, false);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
//this._neglect = false;
|
||||||
|
tab.classList.add(this.cssClass + "-content-active");
|
||||||
|
|
||||||
|
if (this.selected != null)
|
||||||
|
this._observer.unobserve(this.selected);
|
||||||
|
this.selected = tab;
|
||||||
|
this._observer.observe(this.selected);
|
||||||
|
|
||||||
|
if (document.dir == "rtl")
|
||||||
|
this._bar.scrollLeft = tab.label.offsetLeft + tab.label.clientWidth;
|
||||||
|
else
|
||||||
|
this._bar.scrollLeft = tab.label.offsetLeft - tab.label.clientWidth;
|
||||||
|
|
||||||
|
|
||||||
|
this._emit("select", tab);
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
314
src/UI/Window.js
Normal file
314
src/UI/Window.js
Normal file
@ -0,0 +1,314 @@
|
|||||||
|
import IUIElement from "../Core/IUIElement.js";
|
||||||
|
import { IUI } from "../Core/IUI.js";
|
||||||
|
|
||||||
|
export default IUI.module(class IUIWindow extends IUIElement {
|
||||||
|
constructor() {
|
||||||
|
super({ closeable: true, draggable: false, focus: false });
|
||||||
|
|
||||||
|
this._register("resize");
|
||||||
|
this._register("move");
|
||||||
|
this._register("close");
|
||||||
|
|
||||||
|
this._uid = "d:" + Math.random().toString(36).substring(2);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
static moduleName = "window";
|
||||||
|
|
||||||
|
create() {
|
||||||
|
var self = this;
|
||||||
|
|
||||||
|
this.tabIndex = 0;
|
||||||
|
|
||||||
|
// create header
|
||||||
|
this._header = document.createElement("div");
|
||||||
|
this._header.className = this.cssClass + "-header";
|
||||||
|
|
||||||
|
if (this.draggable)
|
||||||
|
this._header.setAttribute("draggable", true);
|
||||||
|
|
||||||
|
var f = this.getElementsByClassName(this.cssClass + "-footer");
|
||||||
|
this._footer = f.length > 0 ? f[0] : null;
|
||||||
|
|
||||||
|
var b = this.getElementsByClassName(this.cssClass + "-body");
|
||||||
|
//this.body = b.length > 0 ? b[0]: null;
|
||||||
|
|
||||||
|
if (b.length == 0) {
|
||||||
|
this._body = document.createElement("div");
|
||||||
|
this._body.className = this.cssClass + "-body";
|
||||||
|
|
||||||
|
while (this.children.length > (this._footer == null ? 0 : 1))
|
||||||
|
this._body.appendChild(this.children[0]);
|
||||||
|
|
||||||
|
this.insertAdjacentElement("afterBegin", this._body);
|
||||||
|
|
||||||
|
//super.updateBindings();
|
||||||
|
}
|
||||||
|
else
|
||||||
|
this._body = b[0];
|
||||||
|
|
||||||
|
if (this.icon) {
|
||||||
|
this._icon = document.createElement("div");
|
||||||
|
this._icon.className = this.cssClass + "-icon";
|
||||||
|
//this._icon.src = this.icon;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
this._icon.style.setProperty("--icon", `url('${this.icon}')`);
|
||||||
|
this._header.appendChild(this._icon);
|
||||||
|
}
|
||||||
|
|
||||||
|
this._caption = document.createElement("div");
|
||||||
|
this._caption.className = this.cssClass + "-caption";
|
||||||
|
this._caption.innerHTML = this.caption;
|
||||||
|
|
||||||
|
this._subtitle = document.createElement("div");
|
||||||
|
this._subtitle.className = this.cssClass + "-subtitle";
|
||||||
|
this._subtitle.innerHTML = this.subtitle;
|
||||||
|
|
||||||
|
this._tools = document.createElement("div");
|
||||||
|
this._tools.className = this.cssClass + "-tools";
|
||||||
|
|
||||||
|
this._header.appendChild(this._caption);
|
||||||
|
this._header.appendChild(this._subtitle);
|
||||||
|
this._header.appendChild(this._tools);
|
||||||
|
|
||||||
|
if (this.closeable) {
|
||||||
|
this._close = document.createElement("div");
|
||||||
|
this._close.className = this.cssClass + "-tools-close button";
|
||||||
|
this._close.addEventListener("click", function () {
|
||||||
|
self._emit("close");
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
//this.addEventListener("mousedown", function (e) {
|
||||||
|
// self.setFocus(true);
|
||||||
|
//});
|
||||||
|
|
||||||
|
this.insertAdjacentElement("afterBegin", this._header);
|
||||||
|
}
|
||||||
|
|
||||||
|
setHeaderVisible(value) {
|
||||||
|
this._header.style.display = value ? "" : "none";
|
||||||
|
//this._updateSize();
|
||||||
|
}
|
||||||
|
|
||||||
|
setCloseVisible(value) {
|
||||||
|
if (this.closeable)
|
||||||
|
this._close.style.display = value ? "" : "none";
|
||||||
|
}
|
||||||
|
|
||||||
|
get icon() {
|
||||||
|
return this.getAttribute("icon");
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
setFocus(v) {
|
||||||
|
this.focus = v;
|
||||||
|
|
||||||
|
var self = this;
|
||||||
|
|
||||||
|
if (v) {
|
||||||
|
this.classList.add(this.cssClass + "-active");
|
||||||
|
|
||||||
|
return;
|
||||||
|
var last = IUI._nav_list[IUI._nav_list.length - 1];
|
||||||
|
|
||||||
|
if (last && last != this) {
|
||||||
|
last.classList.remove(this.cssClass + "-active");
|
||||||
|
last.focus = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (last != this) {
|
||||||
|
if (window.location.hash != "#" + this._uid) {
|
||||||
|
IUI._nav_ignore = true;
|
||||||
|
window.location.hash = this._uid;
|
||||||
|
//window.location.replace("#" + this._uid);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var i = IUI._nav_list.indexOf(this);
|
||||||
|
if (i > -1)
|
||||||
|
IUI._nav_list.splice(i, 1);
|
||||||
|
|
||||||
|
IUI._nav_list.push(this);
|
||||||
|
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
var last = IUI._nav_list[IUI._nav_list.length - 1];
|
||||||
|
if (last == this) {
|
||||||
|
IUI._nav_list.pop();
|
||||||
|
last = IUI._nav_list.pop();
|
||||||
|
|
||||||
|
IUI._nav_list.push(this);
|
||||||
|
|
||||||
|
|
||||||
|
if (last) {
|
||||||
|
last.classList.add(this.cssClass + "-active");
|
||||||
|
last.focus = true;
|
||||||
|
IUI._nav_list.push(last);
|
||||||
|
if (window.location.hash != "#" + last._uid) {
|
||||||
|
IUI._nav_ignore = true;
|
||||||
|
window.location.hash = last._uid;
|
||||||
|
//window.location.replace("#" + last._uid);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
if (window.location.hash != "#") {
|
||||||
|
IUI._nav_ignore = true;
|
||||||
|
var x = window.scrollX;
|
||||||
|
var y = window.scrollY;
|
||||||
|
|
||||||
|
window.location.hash = "#";
|
||||||
|
|
||||||
|
window.scrollTo(x, y);
|
||||||
|
//window.location.replace("#");
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.classList.remove(this.cssClass + "-active");
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
show() {
|
||||||
|
//this.setFocus(true);
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
move(x, y) {
|
||||||
|
this.style.left = x + "px";
|
||||||
|
this.style.top = y + "px";
|
||||||
|
this._emit("move", x, y);
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
resize(width, height) {
|
||||||
|
this.style.width = width + "px";
|
||||||
|
this.style.height = height + "px";
|
||||||
|
|
||||||
|
this._updateSize();
|
||||||
|
|
||||||
|
this._emit("resize", this.clientWidth, this.clientHeight);
|
||||||
|
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
_updateSize() {
|
||||||
|
if (IUI.responsive)
|
||||||
|
return;
|
||||||
|
|
||||||
|
if (this._body) {
|
||||||
|
if (this.clientWidth < this._body.scrollWidth)
|
||||||
|
this.style.width = this._body.scrollWidth + 1 + "px";
|
||||||
|
|
||||||
|
if (this._footer) {
|
||||||
|
|
||||||
|
if (this.clientWidth < this._footer.offsetWidth)
|
||||||
|
this.style.width = this._footer.offsetWidth + "px";
|
||||||
|
|
||||||
|
if (this.clientHeight < this._header.offsetHeight + this._body.scrollHeight + this._footer.offsetHeight)
|
||||||
|
this.style.height = (this._header.offsetHeight + this._body.scrollHeight + this._footer.offsetHeight) + "px";
|
||||||
|
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
if (this.clientHeight < this._header.offsetHeight + this._body.scrollHeight)
|
||||||
|
this.style.height = (this._header.offsetHeight + this._body.scrollHeight + 1) + "px";
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// handle windows exceeding document size
|
||||||
|
if (this.clientHeight > document.body.clientHeight) {
|
||||||
|
this.style.height = document.body.clientHeight + "px";
|
||||||
|
if (this._footer)
|
||||||
|
this._body.style.height = (this.clientHeight - this._footer.clientHeight - this._header.clientHeight) + "px";
|
||||||
|
else
|
||||||
|
this._body.style.height = (this.clientHeight - this._header.clientHeight) + "px";
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
if (this.clientWidth > document.body.clientWidth)
|
||||||
|
this.style.width = document.body.clientWidth + 1 + "px";
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
get caption() {
|
||||||
|
return this.getAttribute("caption");
|
||||||
|
}
|
||||||
|
|
||||||
|
set caption(value) {
|
||||||
|
this._caption.innerHTML = value;
|
||||||
|
this.setAttribute("caption", value);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
get subtitle() {
|
||||||
|
return this.getAttribute("subtitle");
|
||||||
|
}
|
||||||
|
|
||||||
|
set subtitle(value) {
|
||||||
|
this._subtitle.innerHTML = value;
|
||||||
|
this.setAttribute("subtitle", value);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
/*
|
||||||
|
IUI._nav_list = [];
|
||||||
|
|
||||||
|
window.addEventListener("hashchange", function(e){
|
||||||
|
|
||||||
|
if (IUI._nav_ignore)
|
||||||
|
{
|
||||||
|
IUI._nav_ignore = false;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (IUI.responsive)
|
||||||
|
{
|
||||||
|
var oldHash = e.oldURL.split("#");
|
||||||
|
if (oldHash.length == 2)
|
||||||
|
{
|
||||||
|
var hash = oldHash[1];
|
||||||
|
var dialogs = IUI.registry.filter(function(o){ return ( o instanceof IUIWindow); });
|
||||||
|
dialogs.forEach(function(dlg){
|
||||||
|
if (dlg._uid == hash)
|
||||||
|
dlg.hide();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var newHash = e.newURL.split("#");
|
||||||
|
if (newHash.length == 2)
|
||||||
|
{
|
||||||
|
var hash = newHash[1];
|
||||||
|
|
||||||
|
if (hash == "")
|
||||||
|
{
|
||||||
|
var dialogs = IUI.registry.filter(function(o){ return ( o instanceof IUIDialog); });
|
||||||
|
dialogs.forEach(function(d){
|
||||||
|
d.hide();
|
||||||
|
});
|
||||||
|
|
||||||
|
IUI._nav_list = [];
|
||||||
|
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var dialogs = IUI.registry.filter(function(o){ return ( o instanceof IUIWindow); });
|
||||||
|
|
||||||
|
dialogs.forEach(function(dlg){
|
||||||
|
if (dlg._uid == hash)
|
||||||
|
dlg.setFocus(true);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
*/
|
||||||
62
src/iui.js
Normal file
62
src/iui.js
Normal file
@ -0,0 +1,62 @@
|
|||||||
|
import {IUI, iui} from "./Core/IUI.js";
|
||||||
|
|
||||||
|
import "./Core/IUIElement.js";
|
||||||
|
import './Core/App.js';
|
||||||
|
|
||||||
|
import './Router/Router.js';
|
||||||
|
import './Router/Route.js';
|
||||||
|
import './Router/Link.js';
|
||||||
|
import './Router/Target.js';
|
||||||
|
|
||||||
|
import './Data/Repeat.js';
|
||||||
|
import './Data/Include.js';
|
||||||
|
import './Data/Form.js';
|
||||||
|
import './UI/Login.js';
|
||||||
|
import './UI/Window.js';
|
||||||
|
import './UI/Dialog.js';
|
||||||
|
import './UI/Input.js';
|
||||||
|
import './UI/Tab.js';
|
||||||
|
import './UI/Tabs.js';
|
||||||
|
|
||||||
|
import './UI/Table.js';
|
||||||
|
|
||||||
|
import './UI/Check.js';
|
||||||
|
import './UI/Button.js';
|
||||||
|
import './UI/Navbar.js';
|
||||||
|
|
||||||
|
import './UI/DateTimePicker.js';
|
||||||
|
|
||||||
|
import './Data/Layout.js';
|
||||||
|
import './Data/Field.js';
|
||||||
|
|
||||||
|
import './UI/Background.js';
|
||||||
|
import './UI/Menu.js';
|
||||||
|
import './Data/TableRow.js';
|
||||||
|
|
||||||
|
import './UI/Select.js';
|
||||||
|
|
||||||
|
import './UI/DropDown.js';
|
||||||
|
import './UI/Grid.js';
|
||||||
|
|
||||||
|
|
||||||
|
window.addEventListener("beforeprint", (e)=>{
|
||||||
|
let viewRoute = router.current.viewRoute;
|
||||||
|
viewRoute.style.height = "auto";
|
||||||
|
router.style.height = viewRoute.clientHeight + "px";
|
||||||
|
});
|
||||||
|
|
||||||
|
window.addEventListener("afterprint", (e)=>{
|
||||||
|
let viewRoute = router.current.viewRoute;
|
||||||
|
viewRoute.style.height = "";
|
||||||
|
router.style.height = "";
|
||||||
|
});
|
||||||
|
|
||||||
|
window.addEventListener("load", async function () {
|
||||||
|
await IUI.create(document.body);
|
||||||
|
await IUI.created(document.body);
|
||||||
|
//if (window.app != null) {
|
||||||
|
// window.app._emit("load", { app: window.app });
|
||||||
|
// }
|
||||||
|
});
|
||||||
|
|
||||||
|
window.iui = iui;
|
||||||
127
test/esiur.html
Normal file
127
test/esiur.html
Normal file
@ -0,0 +1,127 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head lang="en">
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>IUI 2.0</title>
|
||||||
|
<link href="../css/iui.css" rel="stylesheet">
|
||||||
|
<script src="../src/iui.js" type="module"> </script>
|
||||||
|
<script src="../node_modules/Esyur/Esyur.js" type="module"></script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
i-link {
|
||||||
|
padding: 20px;
|
||||||
|
text-decoration: underline;
|
||||||
|
cursor: pointer;
|
||||||
|
color:blue;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
async function init()
|
||||||
|
{
|
||||||
|
window.home = await wh.get("iip://chat.go.iq:5001/sys/hd", {"username": "admin", "password": "delta"});
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body onload="init()">
|
||||||
|
|
||||||
|
<div style="display: flex; flex-direction: column">
|
||||||
|
|
||||||
|
<div style="display: flex;">
|
||||||
|
<i-link href="/users">Users</i-link>
|
||||||
|
<i-link href="/add_user">Add User</i-link>
|
||||||
|
<i-link href="/rooms">Rooms</i-link>
|
||||||
|
<i-link href="/add_room">Add Room</i-link>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<i-router type="hash">
|
||||||
|
<i-route path="/login" selected>
|
||||||
|
|
||||||
|
<i-dialog>
|
||||||
|
Hello
|
||||||
|
</i-dialog>
|
||||||
|
|
||||||
|
<i-login onlogin="console.log('logg')">
|
||||||
|
<span slot="username">Phone</span>
|
||||||
|
<span slot="password">PIN</span>
|
||||||
|
</i-login>
|
||||||
|
</i-route>
|
||||||
|
|
||||||
|
<i-route path="/rooms" src="rooms.html">
|
||||||
|
|
||||||
|
</i-route>
|
||||||
|
<i-route path="/users" title="System Users">
|
||||||
|
|
||||||
|
<i-repeat id="users" :start=" this.start != undefined ? this.start : 0"
|
||||||
|
data=" home.GetUsers(this.start, 10)"
|
||||||
|
total=" home.UsersCount">
|
||||||
|
|
||||||
|
<div>Showing: ${d.length}</div>
|
||||||
|
|
||||||
|
<table class="repeat">
|
||||||
|
<tr>
|
||||||
|
<td>#${this.start + parseInt(index)}</td>
|
||||||
|
<td>${d.Username}</td>
|
||||||
|
<td>${d.Tel}</td>
|
||||||
|
<td>${d.Email}</td>
|
||||||
|
<td>${d.Online > 0 ? 'Online' : 'Offline'}</td>
|
||||||
|
<td>${d.Permissions}</td>
|
||||||
|
<td>${d.Picture}</td>
|
||||||
|
<td><i-link href="/edit_user">Edit (${d.Username})</i-link></td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</i-repeat>
|
||||||
|
|
||||||
|
<button onclick="iui('users').start -= 10; iui('users').update()">Back</button>
|
||||||
|
<button onclick="iui('users').start += 10; iui('users').update()">Next</button>
|
||||||
|
</i-route>
|
||||||
|
|
||||||
|
<i-route path="/edit_user">
|
||||||
|
<table>
|
||||||
|
<tr>
|
||||||
|
<td>Username:</td>
|
||||||
|
<td>${d.Username}</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Tel:</td>
|
||||||
|
<td>${d.Tel}</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Email:</td>
|
||||||
|
<td>${d.Email}</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Online:</td>
|
||||||
|
<td>${d.Online}</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Permissions</td>
|
||||||
|
<td>${d.Permissions}</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Picture:</td>
|
||||||
|
<td>${d.Picture}</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
</table>
|
||||||
|
</i-route>
|
||||||
|
|
||||||
|
</i-router>
|
||||||
|
|
||||||
|
|
||||||
|
<!--
|
||||||
|
<i-login>
|
||||||
|
<button slot="title">Title</button>
|
||||||
|
<button slot="title" selected>Title 2</button>
|
||||||
|
<button slot="title">Title 3</button>
|
||||||
|
<section>content panel 1</section>
|
||||||
|
<section>content panel 2</section>
|
||||||
|
<section>content panel 3</section>
|
||||||
|
</i-login>
|
||||||
|
-->
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
322
test/index.html
Normal file
322
test/index.html
Normal file
@ -0,0 +1,322 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html dir="ltr">
|
||||||
|
<head lang="en">
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>GO Command & Control 1.0</title>
|
||||||
|
<link href="../css/iui.css" rel="stylesheet">
|
||||||
|
<script type="module" src="../iui.js"></script>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
var g;
|
||||||
|
function init()
|
||||||
|
{
|
||||||
|
|
||||||
|
var graphData = [
|
||||||
|
{
|
||||||
|
value: 1398283,
|
||||||
|
label: "Thu",
|
||||||
|
time: 1489515144
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 1450120,
|
||||||
|
label: "Fri",
|
||||||
|
time: 1489601544
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 1552182,
|
||||||
|
label: "Sat",
|
||||||
|
time: 1489687944
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 1463981,
|
||||||
|
label: "Sun",
|
||||||
|
time: 1489774344
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 1343399,
|
||||||
|
label: "Mon",
|
||||||
|
time: 1489860744
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 1024392,
|
||||||
|
label: "Tue",
|
||||||
|
time: 1489947144
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 1181991,
|
||||||
|
label: "Wed",
|
||||||
|
time: 1490033544
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 1372919,
|
||||||
|
label: "Thu",
|
||||||
|
time: 1490119944
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 1231992,
|
||||||
|
label: "Fri",
|
||||||
|
time: 1490206344
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return;
|
||||||
|
|
||||||
|
iui("range").setData(graphData);
|
||||||
|
|
||||||
|
//var a = new IUIAutocomplete("s", "s");
|
||||||
|
|
||||||
|
iui("divAutocomplete").autocomplete({layout: {text:{field:"name"}, menu:{field:"name", formatter:function(v){
|
||||||
|
return "<b>" + v + "</b>";
|
||||||
|
}}}}).on("query", function(query, result){
|
||||||
|
|
||||||
|
console.log(query, result);
|
||||||
|
|
||||||
|
var res = [];
|
||||||
|
for(var i = 0; i < 1000; i++)
|
||||||
|
res.push({name: query+i, text:query + i});
|
||||||
|
|
||||||
|
result.success(res);
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
iui("divMultiselect").multiselect2().on("query", function(query, result){
|
||||||
|
|
||||||
|
console.log(query, result);
|
||||||
|
|
||||||
|
var res = [];
|
||||||
|
for(var i = 0; i < 1000; i++)
|
||||||
|
res.push({action: query+i, text:query + i});
|
||||||
|
|
||||||
|
result.success(res);
|
||||||
|
});
|
||||||
|
|
||||||
|
iui("divBar").bar();
|
||||||
|
iui("divDialog").dialog().show();
|
||||||
|
iui("divCheck").checkbutton();
|
||||||
|
iui("divRadio").radiolist();
|
||||||
|
|
||||||
|
var colors = ["#bbc6ce", "#ff4800","#dbefed","#113f3a","#061715","#17534d","#b3eae5","#e9c392","#c45f2f","#5f2fc4","#94c42f","#b3dd2a","#bf5e75","#5e75bf",
|
||||||
|
"#bfa85e","#ffd968","#fa9ede","#9edefa","#faba9e","#57144e","#144e57","#571d14", "#5f2602","#34be88","#be8834","#346abe","#4334be","#c51d99",
|
||||||
|
"#1d99c5","#c5491d","#c03624","#42716d","#424671","#1d1831","#f82758","#2758f8","#f8c727","#c1f827","#58402d","#582d30","#2d5855","#1a635f"];
|
||||||
|
iui("divColors").colorpicker(colors).on("select", function(color){
|
||||||
|
document.getElementById("divPicker").style.backgroundColor = color.action;
|
||||||
|
});
|
||||||
|
|
||||||
|
iui("divTooltip").tooltip();
|
||||||
|
|
||||||
|
iui("divTabs").tabs();
|
||||||
|
//iui("divGrid").sort("name");
|
||||||
|
iui("divDrop").dropdown();
|
||||||
|
iui("divDropUp").dropdown({direction: "up"});
|
||||||
|
|
||||||
|
iui("divPicker").dropdown();
|
||||||
|
|
||||||
|
iui("ulMenu").menu();
|
||||||
|
iui("divSelect").selectlist().on("select", function(action){alert(action);});
|
||||||
|
|
||||||
|
|
||||||
|
var resizers = document.getElementsByClassName("resizer");
|
||||||
|
for(var i = 0; i < resizers.length; i++)
|
||||||
|
iui(resizers[i]).resizer();
|
||||||
|
|
||||||
|
var g = iui("divTable").table({layout:
|
||||||
|
[{name: "name", title:"Object Name", width: "100px", formatter: function(e){return e + " *";}},
|
||||||
|
{name: "iid", width: "50px", title: "iid"},
|
||||||
|
{name: "des", width: "200px", title: "Description", type: "select"}],
|
||||||
|
data:
|
||||||
|
[{iid: 1, name: "Ahmed", des: "IT Director"},
|
||||||
|
{iid: 2, name: "Haydar", des: "CEO"},
|
||||||
|
{iid: 3, name: "Abbas", des: "Technical"},
|
||||||
|
{iid: 4, name: "Laith", des: "Technical"},
|
||||||
|
{iid: 5, name: "Ahmed Mahdi", des: "Programmer"},
|
||||||
|
]});
|
||||||
|
var dad = {iid: 6, name: "Ahmed", des: "IT Director"};
|
||||||
|
var mom = {iid: 7, name: "Idrees", des: "IT"};
|
||||||
|
var child = {iid: 8, name: "Abud", des: "Child", parents: [dad, mom]};
|
||||||
|
var grandson = {iid: 9, name: "Ali", des: "Grandson", parents: [child]};
|
||||||
|
var grand2 = {iid: 10, name: "Saif", des: "Grand 2", parents: [grandson]};
|
||||||
|
var child2 = {iid: 11, name: "AAAA", des: "S 4", parents: [mom]};
|
||||||
|
var grandson2 = {iid:12, name: "Layth", des: "Grandson2", parents: [child]};
|
||||||
|
|
||||||
|
g.add(dad);
|
||||||
|
g.add(mom);
|
||||||
|
g.add(child);
|
||||||
|
g.add(child2);
|
||||||
|
g.add(grandson);
|
||||||
|
g.add(grand2);
|
||||||
|
g.add(grandson2);
|
||||||
|
|
||||||
|
g.on("click", function(){
|
||||||
|
iui("divTooltip").show(4,4);
|
||||||
|
});
|
||||||
|
|
||||||
|
g.on("contextmenu", function(item, e){
|
||||||
|
e.preventDefault();
|
||||||
|
iui("ulMenu").show(e.pageX, e.pageY, item);
|
||||||
|
console.log(item, e);
|
||||||
|
});
|
||||||
|
|
||||||
|
iui("divDTP").datetimepicker();
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body onload="init()" >
|
||||||
|
<br>
|
||||||
|
|
||||||
|
|
||||||
|
<div >
|
||||||
|
<i-radio id="divRadio" style="display: inline-block">
|
||||||
|
<div class="radio">hi</div>
|
||||||
|
<div class="radio">hi</div>
|
||||||
|
<div class="radio">hi</div>
|
||||||
|
<div class="radio">hi</div>
|
||||||
|
<div class="radio">hi</div>
|
||||||
|
</i-radio>
|
||||||
|
<i-dropdown id="divDrop" style="display: inline-block">
|
||||||
|
<img src="../img/icon.png" width="16px">Drop Down
|
||||||
|
<div class="dropdown-menu">
|
||||||
|
Hi world
|
||||||
|
</div>
|
||||||
|
</i-dropdown>
|
||||||
|
|
||||||
|
<i-dropdown id="divDropUp" style="display: inline-block">
|
||||||
|
<img src="../img/icon.png" width="16px">Drop Up
|
||||||
|
<div class="dropdown-menu">
|
||||||
|
Hi world
|
||||||
|
</div>
|
||||||
|
</i-dropdown>
|
||||||
|
|
||||||
|
<i-colorpicker id="divPicker" style="display: inline-block; background-image: none">
|
||||||
|
|
||||||
|
<div class="dropdown-menu">
|
||||||
|
<div id="divColors" style="display: inline-block; width: 10em">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</i-colorpicker>
|
||||||
|
|
||||||
|
<i-checkbutton id="divCheck" style="display: inline-block">
|
||||||
|
Hello
|
||||||
|
</i-checkbutton>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="panel-horizontal" style="width: 100%; ;">
|
||||||
|
|
||||||
|
<div class="panel">
|
||||||
|
<i-tabs id="tabs">
|
||||||
|
<i-tab selected>
|
||||||
|
<i-tab-label>Table</i-tab-label>
|
||||||
|
<i-table id="table" style="height: 500px; width: 500px">
|
||||||
|
<i-layout>
|
||||||
|
<i-field for="name" :formatter="x => x.toUpperCase()"></i-field>
|
||||||
|
</i-layout>
|
||||||
|
<i-datalist>
|
||||||
|
<i-item firstname="Ahmed" lastname="Zamil"></i-item>
|
||||||
|
<i-item firstname="Abbas" lastname="Essam"></i-item>
|
||||||
|
<i-item firstname="Hayder" lastname="Alsaidy"></i-item>
|
||||||
|
</i-datalist>
|
||||||
|
</i-table>
|
||||||
|
</i-tab>
|
||||||
|
<i-tab>
|
||||||
|
<i-tab-label>Autocomplete</i-tab-label>
|
||||||
|
<i-autocomplete id="autocomplete">
|
||||||
|
<!--
|
||||||
|
<i-layout>
|
||||||
|
<i-field for="name" :formatter="x => '{' + x.name '}'"></i-field>
|
||||||
|
</i-layout>
|
||||||
|
-->
|
||||||
|
</i-autocomplete>
|
||||||
|
</i-tab>
|
||||||
|
<i-tab>
|
||||||
|
<i-tab-label>Select</i-tab-label>
|
||||||
|
<i-selectlist id="select">
|
||||||
|
<!--
|
||||||
|
<i-datalist>
|
||||||
|
<i-item>Option 1</i-item>
|
||||||
|
<i-item>Option 2</i-item>
|
||||||
|
<i-item>Option 3</i-item>
|
||||||
|
</i-data>
|
||||||
|
-->
|
||||||
|
</i-selectlist>
|
||||||
|
</i-tab>
|
||||||
|
</i-tabs>
|
||||||
|
|
||||||
|
<i-menu id="ulMenu" class='menu'>
|
||||||
|
<li data-action = "first">First thing</li>
|
||||||
|
<li data-action = "second">Second thing</li>
|
||||||
|
<li data-action = "third">Third thing</li>
|
||||||
|
</i-menu>
|
||||||
|
</div>
|
||||||
|
<i-resizer class="resizer"></i-resizer>
|
||||||
|
<div class="panel panel-vertical">
|
||||||
|
<div class="panel">
|
||||||
|
<div id="divBar">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<img src="../img/icon.png">
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<img src="../img/icon.png">
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<img src="../img/icon.png">
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<img src="../img/icon.png">
|
||||||
|
</li>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="divDTP" style="max-height: 300px"></div>
|
||||||
|
|
||||||
|
<i-range id="range" style="height: 200px">
|
||||||
|
|
||||||
|
</i-range>
|
||||||
|
|
||||||
|
<i-resizer class="resizer"></i-resizer>
|
||||||
|
<div class="panel" >
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!--
|
||||||
|
<div class="panel-vertical" id="divContent">
|
||||||
|
<div class="panel" style="width: 300px; background-color: yellow"></div>
|
||||||
|
<div class="panel" style="background-color: blue">
|
||||||
|
<div class="panel-horizontal">
|
||||||
|
<div class="panel" style="height: 300px; background-color: green"> </div>
|
||||||
|
<div class="panel" style="background-color: pink"> </div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
-->
|
||||||
|
|
||||||
|
</br>
|
||||||
|
|
||||||
|
<i-dialog id="divDialog" title="Login" style="top: 400px">
|
||||||
|
<table class="dialog-body">
|
||||||
|
<tr><td>Username: </td><td><input id="txtUsername" /></td></tr>
|
||||||
|
<tr><td>Password: </td><td><input id="txtPassword" type="password" onkeydown="if (event.keyCode == 13) login()"/></td></tr>
|
||||||
|
<tr><td></td><td>
|
||||||
|
<input type="checkbox" id="chkRemember" checked="checked" /><label for="chkLoginRemember">Remember my ID and password.</label>
|
||||||
|
</td></tr>
|
||||||
|
</table>
|
||||||
|
<div class="dialog-footer">
|
||||||
|
<a class="button" onclick="login()">Login</a>
|
||||||
|
<a class="button" onclick="login()">Cancel</a>
|
||||||
|
</div>
|
||||||
|
</i-dialog>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<i-tooltip id="divTooltip">Hello World</i-tooltip>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
293
test/index1.html
Normal file
293
test/index1.html
Normal file
@ -0,0 +1,293 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html dir="ltr">
|
||||||
|
<head lang="en">
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>GO Command & Control 1.0</title>
|
||||||
|
<link href="iui.css" rel="stylesheet">
|
||||||
|
<script src="iui.base.js"></script>
|
||||||
|
<script src="iui.window.js"></script>
|
||||||
|
|
||||||
|
<script src="iui.menu.js"></script>
|
||||||
|
<script src="iui.autocomplete.js"></script>
|
||||||
|
<script src="iui.selectlist.js"></script>
|
||||||
|
<script src="iui.multiselect.js"></script>
|
||||||
|
|
||||||
|
<script src="iui.table.js"></script>
|
||||||
|
<script src="iui.checkbutton.js"></script>
|
||||||
|
<script src="iui.tabs.js"></script>
|
||||||
|
<script src="iui.dialog.js"></script>
|
||||||
|
<script src="iui.panel.js"></script>
|
||||||
|
<script src="iui.radiolist.js"></script>
|
||||||
|
<script src="iui.dropdown.js"></script>
|
||||||
|
<script src="iui.resizer.js"></script>
|
||||||
|
<script src="iui.colorpicker.js"></script>
|
||||||
|
<script src="iui.tooltip.js"></script>
|
||||||
|
<script src="iui.datetimepicker.js"></script>
|
||||||
|
|
||||||
|
<script src="iui.bar.js"></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
var g;
|
||||||
|
function init()
|
||||||
|
{
|
||||||
|
|
||||||
|
//var a = new IUIAutocomplete("s", "s");
|
||||||
|
|
||||||
|
iui("divAutocomplete").autocomplete({layout: {text:{field:"name"}, menu:{field:"name", formatter:function(v){
|
||||||
|
return "<b>" + v + "</b>";
|
||||||
|
}}}}).on("query", function(query, result){
|
||||||
|
|
||||||
|
console.log(query, result);
|
||||||
|
|
||||||
|
var res = [];
|
||||||
|
for(var i = 0; i < 1000; i++)
|
||||||
|
res.push({name: query+i, text:query + i});
|
||||||
|
|
||||||
|
result.success(res);
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
iui("divMultiselect").multiselect().on("query", function(query, result){
|
||||||
|
|
||||||
|
console.log(query, result);
|
||||||
|
|
||||||
|
var res = [];
|
||||||
|
for(var i = 0; i < 1000; i++)
|
||||||
|
res.push({action: query+i, text:query + i});
|
||||||
|
|
||||||
|
result.success(res);
|
||||||
|
});
|
||||||
|
|
||||||
|
iui("divBar").bar();
|
||||||
|
iui("divDialog").dialog().show();
|
||||||
|
iui("divCheck").checkbutton();
|
||||||
|
iui("divRadio").radiolist();
|
||||||
|
|
||||||
|
var colors = ["#bbc6ce", "#ff4800","#dbefed","#113f3a","#061715","#17534d","#b3eae5","#e9c392","#c45f2f","#5f2fc4","#94c42f","#b3dd2a","#bf5e75","#5e75bf",
|
||||||
|
"#bfa85e","#ffd968","#fa9ede","#9edefa","#faba9e","#57144e","#144e57","#571d14", "#5f2602","#34be88","#be8834","#346abe","#4334be","#c51d99",
|
||||||
|
"#1d99c5","#c5491d","#c03624","#42716d","#424671","#1d1831","#f82758","#2758f8","#f8c727","#c1f827","#58402d","#582d30","#2d5855","#1a635f"];
|
||||||
|
iui("divColors").colorpicker(colors).on("select", function(color){
|
||||||
|
document.getElementById("divPicker").style.backgroundColor = color.action;
|
||||||
|
});
|
||||||
|
|
||||||
|
iui("divTooltip").tooltip();
|
||||||
|
|
||||||
|
iui("divTabs").tabs();
|
||||||
|
//iui("divGrid").sort("name");
|
||||||
|
iui("divDrop").dropdown();
|
||||||
|
|
||||||
|
iui("divPicker").dropdown();
|
||||||
|
|
||||||
|
iui("ulMenu").menu();
|
||||||
|
iui("divSelect").selectlist().on("select", function(action){alert(action);});
|
||||||
|
|
||||||
|
|
||||||
|
var resizers = document.getElementsByClassName("resizer");
|
||||||
|
for(var i = 0; i < resizers.length; i++)
|
||||||
|
iui(resizers[i]).resizer();
|
||||||
|
|
||||||
|
var g = iui("divTable").table({layout:
|
||||||
|
[{name: "name", title:"Object Name", width: "100px", formatter: function(e){return e + " *";}},
|
||||||
|
{name: "iid", width: "50px", title: "iid"},
|
||||||
|
{name: "des", width: "200px", title: "Description", type: "select"}],
|
||||||
|
data:
|
||||||
|
[{iid: 1, name: "Ahmed", des: "IT Director"},
|
||||||
|
{iid: 2, name: "Haydar", des: "CEO"},
|
||||||
|
{iid: 3, name: "Abbas", des: "Technical"},
|
||||||
|
{iid: 4, name: "Laith", des: "Technical"},
|
||||||
|
{iid: 5, name: "Ahmed Mahdi", des: "Programmer"},
|
||||||
|
]});
|
||||||
|
var dad = {iid: 6, name: "Ahmed", des: "IT Director"};
|
||||||
|
var mom = {iid: 7, name: "Idrees", des: "IT"};
|
||||||
|
var child = {iid: 8, name: "Abud", des: "Child", parents: [dad, mom]};
|
||||||
|
var grandson = {iid: 9, name: "Ali", des: "Grandson", parents: [child]};
|
||||||
|
var grand2 = {iid: 10, name: "Saif", des: "Grand 2", parents: [grandson]};
|
||||||
|
var child2 = {iid: 11, name: "AAAA", des: "S 4", parents: [mom]};
|
||||||
|
var grandson2 = {iid:12, name: "Layth", des: "Grandson2", parents: [child]};
|
||||||
|
|
||||||
|
g.add(dad);
|
||||||
|
g.add(mom);
|
||||||
|
g.add(child);
|
||||||
|
g.add(child2);
|
||||||
|
g.add(grandson);
|
||||||
|
g.add(grand2);
|
||||||
|
g.add(grandson2);
|
||||||
|
|
||||||
|
g.on("click", function(){
|
||||||
|
iui("divTooltip").show(4,4);
|
||||||
|
});
|
||||||
|
|
||||||
|
g.on("contextmenu", function(item, e){
|
||||||
|
e.preventDefault();
|
||||||
|
iui("ulMenu").show(e.pageX, e.pageY, item);
|
||||||
|
console.log(item, e);
|
||||||
|
});
|
||||||
|
|
||||||
|
iui("divDTP").datetimepicker();
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body onload="init()" >
|
||||||
|
<br>
|
||||||
|
|
||||||
|
|
||||||
|
<div >
|
||||||
|
<div id="divRadio" style="display: inline-block">
|
||||||
|
<div class="radio">hi</div>
|
||||||
|
<div class="radio">hi</div>
|
||||||
|
<div class="radio">hi</div>
|
||||||
|
<div class="radio">hi</div>
|
||||||
|
<div class="radio">hi</div>
|
||||||
|
</div>
|
||||||
|
<div id="divDrop" style="display: inline-block">
|
||||||
|
<img src="icon.png" width="16px">Hello
|
||||||
|
<div class="dropdown-menu">
|
||||||
|
Hi world
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="divPicker" style="display: inline-block; background-image: none">
|
||||||
|
|
||||||
|
<div class="dropdown-menu">
|
||||||
|
<div id="divColors" style="display: inline-block; width: 10em">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="divCheck" style="display: inline-block">
|
||||||
|
Hello
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="panel-horizontal" style="width: 100%; ;">
|
||||||
|
|
||||||
|
<div class="panel">
|
||||||
|
<div id="divTabs">
|
||||||
|
<div class="tab" data-content="tab1">Tab 1</div>
|
||||||
|
<div class="tab" data-content="tab2" data-selected="1">Tab 2</div>
|
||||||
|
<div class="tab" data-content="tab3">Tab 3</div>
|
||||||
|
|
||||||
|
<div class="tab1">
|
||||||
|
<div id="divTable" style="height: 500px; width: 500px"></div>
|
||||||
|
</div>
|
||||||
|
<div class="tab2">
|
||||||
|
<div id="divAutocomplete"></div>
|
||||||
|
<div id="divSelect">
|
||||||
|
<ul>
|
||||||
|
<li data-action="hi1">Hi</li>
|
||||||
|
<li data-action="hi2">Hi 2</li>
|
||||||
|
<li data-action="hi3" data-selected="1">Hi 3</li>
|
||||||
|
<li data-action="hi4">Hi 4</li>
|
||||||
|
<li data-action="hi5">Hi 5</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="tab3">
|
||||||
|
<div id="divMultiselect"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ul id="ulMenu" class='menu'>
|
||||||
|
<li data-action = "first">First thing</li>
|
||||||
|
<li data-action = "second">Second thing</li>
|
||||||
|
<li data-action = "third">Third thing</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="resizer"></div>
|
||||||
|
<div class="panel panel-vertical">
|
||||||
|
<div class="panel">
|
||||||
|
<div id="divBar">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<img src="icon.png">
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<img src="icon.png">
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<img src="icon.png">
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<img src="icon.png">
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<img src="icon.png">
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<img src="icon.png">
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<img src="icon.png">
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<img src="icon.png">
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<img src="icon.png">
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<img src="icon.png">
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<img src="icon.png">
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<img src="icon.png">
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<img src="icon.png">
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<img src="icon.png">
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="divDTP"></div>
|
||||||
|
<div class="resizer"></div>
|
||||||
|
<div class="panel" >
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!--
|
||||||
|
<div class="panel-vertical" id="divContent">
|
||||||
|
<div class="panel" style="width: 300px; background-color: yellow"></div>
|
||||||
|
<div class="panel" style="background-color: blue">
|
||||||
|
<div class="panel-horizontal">
|
||||||
|
<div class="panel" style="height: 300px; background-color: green"> </div>
|
||||||
|
<div class="panel" style="background-color: pink"> </div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
-->
|
||||||
|
|
||||||
|
</br>
|
||||||
|
|
||||||
|
<div id="divDialog" title="Login" style="top: 400px">
|
||||||
|
<table class="dialog-body">
|
||||||
|
<tr><td>Username: </td><td><input id="txtUsername" /></td></tr>
|
||||||
|
<tr><td>Password: </td><td><input id="txtPassword" type="password" onkeydown="if (event.keyCode == 13) login()"/></td></tr>
|
||||||
|
<tr><td></td><td> <input type="checkbox" id="chkRemember" checked="checked" /><label for="chkLoginRemember">Remember my ID and password.</label>
|
||||||
|
</td></tr>
|
||||||
|
</table>
|
||||||
|
<div class="dialog-footer">
|
||||||
|
<a class="button" onclick="login()">Login</a>
|
||||||
|
<a class="button" onclick="login()">Cancel</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div id="divTooltip">Hello World</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
18
test/rooms.html
Normal file
18
test/rooms.html
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
<i-repeat id="rooms" :start=" this.start != undefined ? this.start : 0"
|
||||||
|
:data=" home.GetRooms(this.start, 10)"
|
||||||
|
:total=" home.RoomsCount">
|
||||||
|
<table>
|
||||||
|
<tr>
|
||||||
|
<td>${this.start + parseInt(index)}</td>
|
||||||
|
<td>${v.Username}</td>
|
||||||
|
<td>${v.Tel}</td>
|
||||||
|
<td>${v.Email}</td>
|
||||||
|
<td>${v.Online}</td>
|
||||||
|
<td>${v.Permissions}</td>
|
||||||
|
<td>${v.Picture}</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</i-repeat>
|
||||||
|
|
||||||
|
<button onclick="iui('rooms').start -= 10; iui('rooms').update()">Back</button>
|
||||||
|
<button onclick="iui('rooms').start += 10; iui('rooms').update()">Next</button>
|
||||||
Loading…
x
Reference in New Issue
Block a user