commit e82f4bc4cf6fc160edfe9d8ee3a3937dcfde843c Author: Ahmed Zamil Date: Mon Feb 22 11:39:50 2021 +0300 initial commit diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..18566ec --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +node_modules/ +.vscode \ No newline at end of file diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..c840fc5 --- /dev/null +++ b/LICENSE @@ -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. diff --git a/README.md b/README.md new file mode 100644 index 0000000..7812b3a --- /dev/null +++ b/README.md @@ -0,0 +1,4 @@ +# IUI +Interactive User Interface for Web + +# Usage \ No newline at end of file diff --git a/css/default.css b/css/default.css new file mode 100644 index 0000000..78d8134 --- /dev/null +++ b/css/default.css @@ -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; +} \ No newline at end of file diff --git a/css/desert.css b/css/desert.css new file mode 100644 index 0000000..ec08f0f --- /dev/null +++ b/css/desert.css @@ -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; +} \ No newline at end of file diff --git a/css/farm.css b/css/farm.css new file mode 100644 index 0000000..2e52162 --- /dev/null +++ b/css/farm.css @@ -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; +} \ No newline at end of file diff --git a/css/ground.css b/css/ground.css new file mode 100644 index 0000000..9f54336 --- /dev/null +++ b/css/ground.css @@ -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; +} \ No newline at end of file diff --git a/css/iui.css b/css/iui.css new file mode 100644 index 0000000..a5e65e1 --- /dev/null +++ b/css/iui.css @@ -0,0 +1,2840 @@ +:root { + --search-white: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAB3RJTUUH4goJEQEaWX1GfgAAAwBJREFUaN7tmU1IVUEUx//jN0pg3wuLQF2kZbkVxNyFRUUUhkGLoGWrijYVLdq0LmjVoqJMLM1qFy2soKIQtLDa1cKSNCkhIz9/LbrBYxhf7/lmrj55Z/XO3HvPub93Zs7MOVfKSU6CiMnkYWCzpN2SGiXVSqqQVBZd/ibpk6QBSb2SHhpjxpcMOZAPHAJekZ78Bm4BdUsBogHoJzOZA64CqxcDwADngJkU//m5FO4bAhrjhCgAbszzMtPAY+A4sA1YGz1TCFQAO4CLwPsk0AfjisTNeaZHO1Cdhq09wKDD1gywNzTIWYfjUaA5g0RxwTH1JoBtIRe2vSbeAZUebLcCkw7bxSFSrJ2dRnxAJPg45oj2Gd8gbY410Rwg6lcsP9+Bcp8O7M2uPdD0XQmMWb5O+jJeYxmeAqoCJpRTlr+BUIYfBc6M6xxJZUO6dvIcY/Zu+yDoqdWYEUnPreEmHyBbLL03hgPEE0uv9QFih3U4BpAhS9+YEQhgJJUkDE0aY8ZiAPlq6SsyAjHGYF0vAPJjACm09F8+ptaPhN/5ktbHAFJh6SM+QD5aemUMIFWZrksXSL+lt8QAYvt46WODOmJtToOBN8Q6y99PoMiH4VVR5ZYouwKCXLd8dfk0ftsy/gbICwCxHZi1fDX7dFDvqOLOe4YoBfosH30hQn7NUZMc8NgL6LDszwINIUDWAF8cXY+jHiLR4agOL4XMKE2O2hrg8kIquWhN9M3TGroDFIaEOTxPY24UOJFKxxDYGk3V2f807RYMY1KE2S+p3TpQ/pNZSc8kPY1OscOSiqNjR6X+Nrmr03inLkltxpjpUJGpBz4Qj9z1sikmgSmJmnbjGbxkH7AT6FlUmITux2ngbRqfFDqBlqjmEVDkE8Z4gNoU1dg1UWVXJmlS0pikz5JeSHptjJlwPFskqVPSviQuuqM1M6WlLClGpjv4NMvBLAzm3nKC6VnWMHlLDSTKTq2S7ie5rVxSgbJBkkSmFyhVNokDJvsgHDDZC2HBZDdETrJV/gAG6fzXmRYcGwAAAABJRU5ErkJggg==); + --search: url(data:image/png;base64,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IHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIgogICAgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIKICAgIHhtbG5zOnBsdXM9Imh0dHA6Ly9ucy51c2VwbHVzLm9yZy9sZGYveG1wLzEuMC8iCiAgICB4bWxuczpHSU1QPSJodHRwOi8vd3d3LmdpbXAub3JnL3htcC8iCiAgICB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iCiAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iCiAgIHhtcE1NOkRvY3VtZW50SUQ9ImdpbXA6ZG9jaWQ6Z2ltcDplMmQ0ZWUzNS1hOGRhLTQ0N2QtOThjYi04YTk3YjhkNDI2ZDkiCiAgIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6M2Y1MjdjMTUtZWZlMS00YzBjLWFiNjYtNWYxZjA3Y2RkZjA4IgogICB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6NGYyYzMxNmQtZDRlYS00OTMyLTg4NDctNjliMDI1NzgxOGE5IgogICBHSU1QOkFQST0iMi4wIgogICBHSU1QOlBsYXRmb3JtPSJXaW5kb3dzIgogICBHSU1QOlRpbWVTdGFtcD0iMTU5NDczNjQ1Nzg5NzcwMCIKICAgR0lNUDpWZXJzaW9uPSIyLjEwLjgiCiAgIGRjOkZvcm1hdD0iaW1hZ2UvcG5nIgogICB4bXA6Q3JlYXRvclRvb2w9IkdJTVAgMi4xMCI+CiAgIDxpcHRjRXh0OkxvY2F0aW9uQ3JlYXRlZD4KICAgIDxyZGY6QmFnLz4KICAgPC9pcHRjRXh0OkxvY2F0aW9uQ3JlYXRlZD4KICAgPGlwdGNFeHQ6TG9jYXRpb25TaG93bj4KICAgIDxyZGY6QmFnLz4KICAgPC9pcHRjRXh0OkxvY2F0aW9uU2hvd24+CiAgIDxpcHRjRXh0OkFydHdvcmtPck9iamVjdD4KICAgIDxyZGY6QmFnLz4KICAgPC9pcHRjRXh0OkFydHdvcmtPck9iamVjdD4KICAgPGlwdGNFeHQ6UmVnaXN0cnlJZD4KICAgIDxyZGY6QmFnLz4KICAgPC9pcHRjRXh0OlJlZ2lzdHJ5SWQ+CiAgIDx4bXBNTTpIaXN0b3J5PgogICAgPHJkZjpTZXE+CiAgICAgPHJkZjpsaQogICAgICBzdEV2dDphY3Rpb249InNhdmVkIgogICAgICBzdEV2dDpjaGFuZ2VkPSIvIgogICAgICBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjFjNWU2Mjk5LWQyZjUtNDhhNy1iMTczLTI4YjJlZTQwN2EzYSIKICAgICAgc3RFdnQ6c29mdHdhcmVBZ2VudD0iR2ltcCAyLjEwIChXaW5kb3dzKSIKICAgICAgc3RFdnQ6d2hlbj0iMjAyMC0wNy0xNFQxNzoyMDo1NyIvPgogICAgPC9yZGY6U2VxPgogICA8L3htcE1NOkhpc3Rvcnk+CiAgIDxwbHVzOkltYWdlU3VwcGxpZXI+CiAgICA8cmRmOlNlcS8+CiAgIDwvcGx1czpJbWFnZVN1cHBsaWVyPgogICA8cGx1czpJbWFnZUNyZWF0b3I+CiAgICA8cmRmOlNlcS8+CiAgIDwvcGx1czpJbWFnZUNyZWF0b3I+CiAgIDxwbHVzOkNvcHlyaWdodE93bmVyPgogICAgPHJkZjpTZXEvPgogICA8L3BsdXM6Q29weXJpZ2h0T3duZXI+CiAgIDxwbHVzOkxpY2Vuc29yPgogICAgPHJkZjpTZXEvPgogICA8L3BsdXM6TGljZW5zb3I+CiAgPC9yZGY6RGVzY3JpcHRpb24+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgCjw/eHBhY2tldCBlbmQ9InciPz7JIG+QAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAB3RJTUUH5AcODhQ5aMsqQAAAA/VJREFUaN7tmVGIVVUUhr87d5wkCSbIQsYQ3IHONKMV9iCIROCCnEorm9QskPCtHqKBHrSUenB8jvBFCg1LonFyJKhF0dhEkwiihthDpwQTzdTqwcG5Ok4Pd40cNueO596zz/UK87+tfe7Ze39n7bX32uvCtKaViwpZXhaRhUA3sAzoANqAWfb4InAaOA4MAQdV9b+GARGRIrAGeAt4vIpXx4B+oE9Vf7mtICKyFNgJLM4w5gTwEfC2ql6qK4iIFIAtwFagmOLLt6To+yywVlV/DAHSlAKiGdgNvJcAcR34DnjDvHS/qs4E7gLmAk8AO4BfE7puA74VkTW5e8Q88QnwcsLy2Ae8q6q/pfTqM0CfbQpxjQPPq+pgniBbgPe95ovAi6o6VONGsQ3Y7I09CixV1RPBQSywh73ldAp4WlV/z7ht95inW7y+H1XVsVr6LE7x5QaBObHmv4Ens0IARFF00jl3Hng21jwbuBpF0XDIYO/xttgJoCcExKRUdZdt5XH1ikhrSJA3PXtfLTGRQpuByzG7FXgtCIiItHsn9jXgnTzSClX9B9juNb8ayiPdnj2kqlGO+d4e24IntUhE5oYAWebZgzlCoKoXgJ+85uUhQB72PVKHLPyQZ3eEAPHdeq4OIH969oOZQCwlmRlPAENmqFPoL8++JxOIqk54z5vtcMxbMzx7NMTS+tc7+R+oA0ibZ18IAfKHZ8+vA4jLGpdJIMc8+6k6gPhj/BwC5HvPXp0ngYh0eR65AhwOAfKVXVdv7ukisjJHll7P/kZVS5lBVPUyMOA194lIUw7eWAxs8Jo/CJn97rDUfVJdoRNHEbnbqinxORytNctuqpD/HLNkLq6tIvJCIIiCQTwWa74BvJ5HFaXX2wYLwF4R2RjAE58BL3mPPlTVkVr7LU5xHR11zh2xCsrk75qBVc65+5xzI1EUXa0hJg4AKxIen3HOfRlF0Y3gVRQbfL0ts2JCNWU7sPtW+ZiIdJqHX7nFKvgCWK+q14KD2ESeAz71Esp4XWoY+MGy2HOUC3RtlhV0Aw9VMad+YF21MIUqlsUjlItyC+pw0vebZ0qZYyQhZs4753bZYbnEvnotOgpstFR9YYXfdAAdFjPjQT3ieedeYJOt+c4Ur4zZlflj4GtVnRCRFuBzYFUIzxSyrgERmWd37Ha72c2yiV+iXHEfAY6o6pWEd9PA7LeYKeUKEuBDpIEZoPwXRClzjOSlKIrGnXP7gUVTxEw70OmcG6gUM7cdpEqYrkowBRpIKZfZAcp16FLDgmSBaWo0EJtcj022klot72tcj6TwzCFgpaqO3hEgFWASIRoexINprQRxx0hEWuxCNq1p1Vv/A2IAVPy1s7SqAAAAAElFTkSuQmCC); + --arrow-left: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAnM0AAJzNAeUm7xEAAAAGYktHRAD/AP8A/6C9p5MAAAAHdElNRQfgCxELGAmyd3/VAAADQUlEQVRIS+WWS0hbQRSGT4yJVSlYH/ERFBoQNKtQlC7cFnRZ0U0RXbhyYRGhmy5KhS66aKGUVsGFbrVFydIHFNzookrblXYTUm3E1ldFMZbGRP9/7uRyb26uQrd+cJiZM3PnPzNzZhK5eVxcXARgj2AfYT9gKW2sf4Cxr0oPd8Wjy7xgguewkdPTU1lZWZH19XVhnZSUlEg4HJa2tjYpLS0Vj8fzEu5nKNNqQA55hTC5H8X3vb29uzMzM3J0dKT8mESVWTBOleXl5dLZ2SmBQGAHzXuw3xhrdGocQplMJoBBP9fW1vxzc3Pi8/l0z9Wcn59Le3u7tLa2/kEzjDl+GT0GBbo0wYBvwD8/P+8qwpWUlZXZ+gsLC2VxcVFWV1fvoPkFY7xGj4FNCJ2vDw4OainCD90IBoMyMDAgg4OD4vdzlw28Xq8sLCzI7u5uLZovDK9B7ooe80zc4Erq6uqkp6dHtYuKiqSystI8K8IAo9EofU9hZjaaQnAOb21t+RGN9tjB2Ul1dbX09fWpyMnU1JQkEglHkhweHmaz84FyAOuKhpi+bufClfT39+uWIbK5uSkFBY5jViwvL7N4qBrAOiqAdNZVOzwTriTL9PS0xONx3XLCFTJocF85gFXo1tnZma4acO9ramqkt7dXRZ5Op9VKYrGY60qyJJNJFkHVALbR1kMljOzk5ETdEcLJU6nUtSL5sH7xl89KLjzU8fFxFQSFuYWNjY2OoHLhswS2VQNYhXbwhOiqHa5qcnLSnLy7u1uamppcxehvbm5m9bNyAKvQe3Zya/LBRBkbGzO3kW9bfX29qxgfWxBVDWAKYVveNDQ0pKqq3F98rmx0dFTdKcKLGwqFHGJ8nvTWfVIOkHuqb7u6usyJ8sHMnJiYUHWubn9/33ZhuSPcWvhGYObtd7zeiC6B357g0tLSldnFqI+Pj21BUbijo0NaWlriEAlptyKfEPduG2K+68RyoUgkEvmH6m0IsTRxCBEt9hUJEJydnVWJ4PY0cauYrdyuioqKHXwbQXCOBzOvUBZ89ArFEB5b38bGBp9/deN5JsXFxcLE4c85kojRv4P/ifrwf4HgMCwGS8Iy2ljnH5RhPexGIXIJGSaWmmxaX7YAAAAASUVORK5CYII=); + --arrow-left-active: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAJzNAACczQHlJu8RAAAAB3RJTUUH4AwKEiMw9w+MlAAAAo9JREFUSMfllk1IVFEUx//njV/0EAqdARNf1iJ1aDHEDC0GWkUSbQwLstwYFiWEDLQJFA2DiIKIvhZJKy1zkbmKgpbzFjHggDEfi0pfY1PzRgviSYwz77RwHCbnfWlLD1x4957/vT/OeYdzL7DjjJk9zNzDzNPMvMDMa8WxwMwviz633TlkAxlh5lFN0yDLMh5lDv7jH3AnEQwGIYoiiOgWgGEiKjgGMXMNgISqqvv732qOIn96fBc8Hk8awGEAP4iILUG6rnuI6GskEqkZSzRuKc1DbSoCgcBPAF4i+m4JYuZv0Wi0aeTj7m390yIsDaClPI3CJsjd5eVlR5DZ3lZMn2mqWL+ZdCOTyTQBGCtfFzbprl5489sW8qqnBQBQW1tr6L/4bhXMfL28GoWyaEKKotQ4icTlcgEA+ibmTXWapgHAMaOIBmOxmC1kw/om5rGCelNtOBwGgC4jkOdJtt1048w5qfR9eXLOEgIAj9U2ADiyMa8q89XZRVIoFND/IoYV7HFahM1mxWBo+Xx+XSwItpGYWTnoj5moeyoFZgYRYba3FYEqxen5S0ag9IA7abqja3IRzOtdZejsUZysS1oSimd9MAI97OjosNzcNblYSuOl052W2mAwCAAzFSAiuidJ0ppdLrqnUtB1HQDw+vw+tFLWUCeKIgC8NyuG++Odom3iTz1XSkWywJWNd7xTBBGNElHGqqmmZFluvv1577aqa7g9C7/f/4WIDth1bzeAJVmWq7cKu3HoF3w+Xw5APRHlnFx8bgBzqqo2O734np2oR0NDQ5qZfYIgZLZ6ld8BMKgoSnU8Ht9oKyW70piA1+uFJEk5AA+I6Nr/PlBCzPyJmVeZWS+O1eIDJYQdaX8B9C4jTPMKEFEAAAAASUVORK5CYII=); + --arrow-right: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAnM0AAJzNAeUm7xEAAAAGYktHRAD/AP8A/6C9p5MAAAAHdElNRQfgCxELGAmyd3/VAAADT0lEQVRIS+WWPUhbURTHTxITqiJYNWlTrRJcqpMF6aCL0ElwCTqYVQdFW0qGDp1q6dChhSLdHRSHFsUOgh90cFEoSpspBqS2GGLV+AXFWI0mPf+Tm+S+vGeQrv7gcO859737v+fc+25CN5N0Oh1k+8WWYEspQ/8HW1A9VhSbai3hSd5x83Rra8sVDocpHo/T6ekp4lRWVkYej4eampqovr4+yc+N2my25/KiBZZCqVTKwy+FDg4OvFNTU7S3t0dOp1ONGkkmk+R2u6m7uxttjEMP+d14ZjSPSYhX6+LmTygUcs3Pz2eC14AXRx0dHdTW1obsagvF7KrViaytrblmZ2eVm8Fut1NlZaXyzGB8aWmJVlZWkPr3TDSPQYizecn74Jubm6OSkhIVJaqoqKBgMEiDg4NUXV2tomayYjxHLc/1VoWFnBAPeNhGsCf6fnCMampqcsL9/f1UWloqfSsgNj09je4zCSj0jB6fnJzQ8fGxcjNwrWlzc5MmJyfFx0TDw8OS5VXgdPJJdfIic0dfF/IvLy+rrhGIRaNRmpmZER/ZDQ0NyWmzAhVZX19H94kEGF3oEQYxqRWIRyIRQmmzfl9f35WZ4ZNgvOIwulAtSlcMTL6xsUHj4+Oyd/AHBgaovLxcPZEnkUiguSUOowtdC3wvKA1agDIiKwjrFFZGF4rhWikGJm9sbKRAIEAOh0P8iYkJ2tnZMU2sTuZfcRhd6Gtzc7NpZTo+n496e3uVR1LCWAy3jhl1UGSjgC70ub29XXWNYOUNDQ2SSZaxsTHa3t5WnhHcf1g0MyoBRhf6gk2tqqpSbgZkWFdXlxO5vLyUTHZ3d+WbsgK3Ot/o51zO9yqUF+JgnO2N3++ni4sLFc1s6v7+Pp2dnYmPDxeZFO6JTk9PD5oP4igMT/PqHdxEV1dXvYuLi7LhWXDSkPHR0dGVIlhgV1cXtbS0/OZn7qmwYHqDxe5yE2ax2wsLC4bLtRjYl87OTmptbT3nOe5zWXMHAVgJIXaH7Rt/3V5cO4eHhzJWmAn2D+DnA+Xik/aT3Qf83LkMaFjXgFFlfM3tC9wYuAfxc66+eCkjThb/0EmfJx9heyWD/wMLudkCbB/Z8AclqQz9T2wY86jHbwxE/wDpF3yaspbwwgAAAABJRU5ErkJggg==); + --arrow-right-active: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAJzNAACczQHlJu8RAAAAB3RJTUUH4AwKEiQDB557RQAAAoJJREFUSMfllktIVGEUx/9nZpToEkR4J8aJm7XxQcI1sMW4DIpWVpseuopaZEW0iAgKFYWIgpCgoiI39sTIFhFGq2CEGKlZhI+gmq5YMFcxkCs+mvtv4c1svHPvnVr6wbf4OOd/fpzD4ZwPWJWH5BmSGZIzJG3nzpD8RPJMkBjiA7gK4JRhGKVDQ0O4OVH1l71FHUV1dTU0TVsA0CUiZ4sC2bYdFZH05ORk7MjL6UBZ392tQFXVcQB1ImL6gkiWAphOp9OlrR/WF1Xic1u/IZFILACI58NCLv4jg4ODRUMA4PLncgwMDJQAeJ9vC+Vl02qa5paOkbIVQXoPxPG8uSIQzDTNOMkrriCSUZJtR/utFeIKmUAkEgEAPDus+cKcGKcLZbTTsixXYYZl2Hv/66IgFMLTg5t8YYZhlCxv/eWgfclk0lN8u7cfABCJRNDXtNnTd3h4GABOuoF23DArPcUvZivR+ejNYruKeMKcWDE3UDxIZ6V+amjsyYAkRMSvjGu82tv3bMA0bNteKmOQsxw0HkQQkyl0N9ciHA7Dtm009mS83GfdQG9b1FHfTG411f3pngdGQd/jZSMAkHUD9TU0NHhCuptrl94+maCmpgYAutxArxVFKSj8Dcnlcr4QANA0bV5Erq0AiYgpIpfu7FrrKpybmwMA7H845gu5t2cdAFwvOL1JhgGMpVKpWOeo+k9Lsn3bD+i6/l1EygsOVRHJAdheX18/daHSLBpysWoCuq7Pk9SD7CMBsBHAu2w2Gzv2aqaYxfcFQJWIzAde5U4ZO0ietywLyWQS+SPqRPQjEokEFEWBiLSJSPv/fExUkodIPnY+KAvOzZB84tiiq+/L9gsvthlNbhFAMQAAAABJRU5ErkJggg==); + --arrow-up: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAnM0AAJzNAeUm7xEAAAAGYktHRAD/AP8A/6C9p5MAAAAHdElNRQfgCxELGAmyd3/VAAADKUlEQVRIS+WWy0tbURDGJ2pKfQR8JRgjQreugmA3LgvqNuCmFUQEEaUiglvRnYtCu/AvEIXYoLgR3HThRqEguNOAVKoQpFGoKIaamNjvm/vw3us11W79wXDPmfOYc2bmTCIvk7u7uynID0gOUjKF7Z+QKXNaWQLm1xds8gmfyZOTk+DBwYFks1nJ5XISCASkurpawuGwdHR0SHt7ex7zFqCf1oU++BqCgTA+e2dnZ7G1tTXBV4LBoDHooVAoSCQSkf7+fmlqajrF2nhFRUXWHLZ5YMg0ktnZ2QlubW0JFhkDT6Cvr0/i8ThvF8Lt+LXx22Xvf4yQjY0N2d3dfYVm2tDc49qJMaG7/mUE88yWm6qqKtnc3KSr32DOrKlWvLtNMibljNTW1ko0GjV7D2EsV1dXeZg5SMRU3xuCcorZxcA/RigUkrGxMRkaGpJYLGZqH3JxcSHX19dsvlMFcB79I1P4sexiKo+Pj6t7yMDAgLS0tEipVNK+F8SZn4R2gNNQlO/ED95keHhY3w/jUywW1b28GY1R54Tz9vf32XyrCuA09JqP0Qsf5ujoqC4mS0tLkkqltE14AD83mq6zB1xRtzazwAOUiYkJ210MciaTkaOjI1lZWVEdoRtbW1sfzUbiNPSHp7eor6+XkZEROwPX19fl8PBQD1NZWanGksmkjrE/ODgoDQ0N2ic1NTX8ZLQDnIayDLjF5eWllheecnl5WdLptOvGPMDx8bFt7ObmxnKXrmENBN9VAeyVGGR6f15cXLQzj0nQ3Nysp/e61YJZ19bWJufn55LPG1WHhujyurq6D1inJ7FvBMUXVmEWSIurq6uyRghvxrhZRkhjY6M+bPBNFcCVDGCBVdhJOSMWzjm3t7eSSCSom4fYr99lCAPTLPWswlzwXPi+ent7+bNxiu6MoTXw3oj+RaWP52mMyfBUeLCenh7p6ur6jW4nDl00Rgx8/QJjWupZhfl2WLuI00WEQSeMCd1l3qQT8gtzXY+qbACw0Sxkjmm7vb0trIVWCvOdMIW7u7s18Nh4HuoZ702eDAxFIO8hKQj/jBRMYfsrhGP3D/CFIPIXaROGVaBzO8QAAAAASUVORK5CYII=); + --arrow-up-active: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAnM0AAJzNAeUm7xEAAAAGYktHRAD/AP8A/6C9p5MAAAAHdElNRQfgDAoUNBtavY3wAAACm0lEQVRIS+WWTWgTURDHX75ETAJK0kitjfViJXgIhXjJURA8WW+2ehF6UFEk4NESi4KIoIeiBwVPDVXx8+Ch4KmQgBhIQDHxoMRADWaLeok0ien6n7eT7Sa7SZf02B8M82Y22f/OvMnbiO2JqqoJ2FfYX9g6G61LsAR/rC8O9pbgJnfgrpTLZU+hUBAPlHHtAnMhWBSRSESEw+EGwnmHw3FVu2LGUggCQ3A5RVFGZpZqWnITHp/wi0AgUMF3o06ns8ppHZMQi6xkMhnP7W/7tKRN5o78EdFolKrzozryOk72RnKDiBDJT7tFNpvdgWVRy2zQIUR7Qu0aRKTNjWJQ4B4Hca8kpyQdrcPFxsmFkofDLfH6zAGB9u2Fyf3SK4JIgqaLw568OL1fvDk7xlFvajU5RMdkAIytu0Qj3A96SrfbLdevpsPS9wL7TO6UDIBRaLj7d2KEW0GVi1arJTDCfSu7Xz1E7qgMgFFoJ3sT1C4SISZT38XM4me5JjZp4wj7zqmzglrUbtfNJ8vS/xJ+cT6Vk2vi5dQor3pjFFpjr0NPSy0iHj5fEh/+bexLRd0jzi18lGuXy9WrshX2HUJVOruMNJtNuScYefF2zbx/VFlbrF6vS9/m4tAXcu9lAPTfEY/33cvL65zRGHOsipIa5Mg+qcmg8Pl809jbRYr1ipC4x6dwB4OIEF6vl9w7GYDuYZinU3irPDq+ix78FkzhlOXp/SOfzw/TATkI18YVEYvFKliOQqilZS3GG0I46aON2cOrnLEPi/zGcsIoQpgqIiAmj3o6he2++KhdoVCIKpmA/YSQKi8wlkJtIJiEXacDMp1Om17lNMLxeFxuPO0JUrPdldgGQiHYFOwZjP6MNNlo/RRG1+itvK0Q4j/rNyX4wPuW3gAAAABJRU5ErkJggg==); + --arrow-up-mini: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAARCAYAAAC8XK78AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAGYktHRAD/AP8A/6C9p5MAAAAHdElNRQfgCxkXHCBEIVBGAAAAqUlEQVRIS9XVQQrCMBSE4Vp7/9voQhBBV25c2POIzg+NlDoYYl8qHfhATDNPG6XN2nMZ/CV7eQ54vVi2cpM0POE91qrnKtPhCWtVsxM3eIxrwsOt/fbNp7g29DjcmeewJyTjX3upWf+OVs7iikvQQVdx7uIKf0FXUQ7iiuagM5uNHMUVRKCbGTYs9OI2RmKG/RAncRtqYNY7ndQ48xxmdulWLPIQ+UzzeAHoCekenvc+XAAAAABJRU5ErkJggg==); + --arrow-down: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAJzNAACczQHlJu8RAAAAB3RJTUUH4AsRCxgJsnd/1QAAA0xJREFUSMfllk1IY1cUgL+TP0seSrp4aW0wYkAwriwIhbhx0U3ARSUhKKhLNzKUWXQxuxlmO1AGiyCCiOCiJZBtInSZTQPF1duVGVKi4YX4Q4gpk+SdLhpf/UmiM9u5cBf3nnvPd8/PPffCZ9dU1VTVVVX9VVXfq2q719+r6m89WfgxPTIE4AVeq+qLZrNJsVjEsiyur68BMAyDeDzOwsIChmEgIi9F5NWTQaoqwFfAn7Ztj+dyOc7Pz/9bLHJ/LQChUIh0Oo1pmu+AGRH58BTQ14BVKpW+LBQK+Hy+J7m43W6TTCaZn5//oKoTHo/HHgjquevvUqk0fnx8jNfr/ah4djodlpaWmJubOxORb27LPPfWvrZte7xQKHw0BMDn85HP56nX6+Oq+qYvqJddL3K53B133cThkcy8M85mswDPBln0fbPZdAMPEAgEiEQiOI4zFBKLxRgdHXXnbNumXC4HVPV5P9APxWLRHfj9fra2ttjY2GBqamogZGJigkwmw+bmJh6Px91rWRbAj/1A31mW5aawYRiMjIwAsLq6yuTk5B3LVJWZmRnW1tYQEfx+P2NjY668VqsBhPuBIjeXEeDi4oLDw0O63a4Li8VidLtdVJXp6WmWl5cBcByHvb09Li8v3f2tVgvgi0FZ93/ei3B6esrR0ZE7t7KyQiwWIxKJkE6n3ZTe3t6mXq8PTZDboIphGA+AlUqF/f19d5zJZFhfX3eV7e7u3pz+TgsGgwD/9AP9MTs7++AkIkK1WuXg4ADHcfB6vYgIqsr+/j6NRqOvR8LhMMBZP1AukUj03eTxeKhWq64bO50OOzs7NwHvW47i8TjAL+5lviX/3TAMQqEQV1dXfRVUKhUODg5oNBo0m82Bd8s0TaLRaFtEfn5gkYjYIvIynU7TbrcHKjk7OxsKcRyHVCoF8HZgrRORV6Zpvksmk3Q6nYHZOAyyuLiIaZoVEfnpsWciADROTk4C+Xz+yQX1BpJIJNpARERqj76wjuOEReSkXq+PZ7NZbNvG7/cPDLxpmqRSKUzTrADf3ocMfcp71r0BnpXL5YBlWdRqNVqtFqpKMBgkHA4Tj8eJRqNt4O19d33KB+V57zNyrapOr1+r6l+3K/Tn1f4FgEGhNe9ExXsAAAAASUVORK5CYII=); + --arrow-down-active: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAJzNAACczQHlJu8RAAAAB3RJTUUH4AwKFDQbWr2N8AAAAntJREFUSMfllktoE2EQx/+TmKSQSxW+6BqMwYuJKKQYERLwJOTgofWF1uYk6KEi0oOIYGlDPfZgQdRDwEt9FUFzErznYkByKAsRpHFrLG4TFEKC5LHjwU3IY7N52FsHFpbvG+a3/9mZbz5g1xkzC2aeZuY3zJxl5qr+ZJl5Td9z9YtDJgArgCVmvl8qlZBMJvFk+2ibz6zIIBwOw+l0gogWiSg2MIiZCcB+AJ9VVZVufCwPpDwecUIIsQHAR0SVQUAHAMipVGrvw4wYKs3zvjyCwWCFmQ9ZLBa1J0hP12YqlZKGhTQsdvw3AoHAFhEdbF23dPgtqao6MgQAFtbHUSgUJGZeNlSkV5c69eLbjlRrIuqtEJHDSNHZUqk0UlAv5bvWFEWxM/OcEWgqmUy2Oa9dlpCIerEPRVPQo2sn8faKu21NlmUAuGMEOt3ZJw7HP+XPoycMYefGMkhEvSAi2Gy2tr2neR8AuIxA7s5Ak6tZ1Ov1JkyiX829U3sU3LwUAQBomobJ1ayR2LFeVddlF15tNt+fzUw0lT24egYAUKvVcP6l0vc/toJyvZxavzY+fQzvZw43KhUXX383i//HCPTplusLzGCapsFqtYKIwMwwa4VZkQGALSPQu1AoZCq/kaJarYZ+/eb3+wHgsVHDupj55w42bJWI7F2KiEglosV4xPnfED3GSs+zjohiQoiNeV9+ZMi9Iz8ghMgR0d1+Y8IOoJhOp+0L6+NDQ0KhUBWAm4i2+05YTdNcRJQuFArS9Q/FYQZfDsBEJ8R0lOvqlgHcVhTFLsty41hpK2G/3w+Px1MFsNKZrlEuKHP6ZaTMzJr+lJn5a+sJvbvsLy0pJLT8OvazAAAAAElFTkSuQmCC); + --arrow-down-mini: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAARCAYAAAC8XK78AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AsZFxwgRCFQRgAAAI1JREFUSMfVlTsOgCAQBUfx/reRgsSYaEVDoecxWkiMhT+QxTjJtgywy6NgRfENE0AFGGDOXMa7N9qM8vboOgpgzCAfvYuzTTSC8uZKvscI9TyIIaF8iHkiJdAlkHd+rWj0C7lOFRguQu5SJpYCbIDcSqVr/UBeS+e3vTm5OOpkJlzuT01LTHsova//sgBbSukeQz9mngAAAABJRU5ErkJggg==); + --add: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAJzNAACczQHlJu8RAAAAB3RJTUUH4AsWFBw4DWhmHwAAAmJJREFUSMfllj1r21AUhp/jL4q1uIPUumldulWZUggUnCVDl0CGgr30R4SSoeBsKVkyBEqgf6LF4FUOdPRSh+JJW9vgEgISzlIsmyjodKgJjiPFjpMtL1y4cA567vm45wrunVTVVNV3qvpFVY9UNRytI1X9OrJZ074j1wDSwI6qbvX7fVqtFq7rEgQBAIZhYNs2KysrGIaBiGyLyMeZQaoqwCPgh+d5xUajwenp6X9nkUlfAAqFAtVqFdM0fwMvReRsFtBjwG232w+bzSaZTGamFIdhyNraGsvLy2eq+iyVSnmJoFG6/rTb7eLBwQHpdPpG9Tw/P2d9fZ2lpaUTEXkybktN+O54nldsNpuJkFqtRq1Wi7VlMhkcx6HX6xVVdS8WNOqurUajMXO6klSv1wE2kiJ60+/3Lwp/G3meR7fbzanqZhzobavVupO7l81mcV0X4H0c6LXruldaeF75vg9wcZHHi7EQBMGlJkgqepJtd3f3Yj8YDAAeJHXdXY6uyx05tj82DOP5cDiMPeFkJHG2ceXzeYBhXETfFxcXr5xkXlmWBXASB2qUy+U7gYRhiG3bAJ/jQN8Mw6BQKNwaZJompVIpFJFPV0Ai4onIdrVaJQzDuSFRFFGpVAD2p03vX4eHhy8cx7nxKIqiiNXVVcrl8rGIPJ0GygF/O51OznGceSAhsCAi/tQXNooiS0Q6vV6vWK/X8TyPbDabWHjTNKlUKpimeQy8moRc+5SPotsDNrrdbs51XXzfZzAYoKrk83ksy8K2bUqlUgjsi8iH297yzdHPSKCq0WgFqvpzfELfL/0DbLwxYiWAqw4AAAAASUVORK5CYII=); + --add-active: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAJzNAACczQHlJu8RAAAAB3RJTUUH4AwDESAUn2/KVQAAAnpJREFUSMflls9LFGEYxz8zs7Ouu4Uj1thmOQZBUUJ0MozQg7cuhnTxXwgpD4F6MsSLBCEECt27LV7sliDsqSWig4ZBPyZkEdN12dVddV7n3Q5usq4z7Lrrqb7w8s7L8zKf9/nxPjPwr0mptEG48iLQB/QDXUBb0ZQEEsAcsKBr6u+aQMKVGjABjKbyLrHlDHE7R3ZfAmCEVO5bEQZuN9ES1gDGdU19UTVIuFIBWoFPdtqJTsU3WdsWAKhlu2XhcDYjAcZ6TSxD/wnc1DXVqQZ0Cfgyv5Jtnk1s0RBQqsrBrijw5F4LD2+cd4Cr5aFUPMK1Or+Sjb75mCagni7h+wcFnnVfoO/6uTVdUy+X2spfNWGnnehsYssXEhu0iA1anraGgMJMIkUyK6LClS89QcXqGp2Kb1YdLj9NLm4ADPl51JfKu0eJr0d22mFpfS8oXDnsBeqPLWfO5HI26gpxOwfw1AvUFbdzJ0q4Vq1mBID5dx0osbVl9+WxIvBLup9t4O2vo+cdRwKE/KruzHQgj69LPUoaIdUqnuTECcs98bKVygipAHteHiUedESO2kq96mgOAqx5geYe3Wo6E8iuKNDdHgZ47QVaaAlrmJFA3SDL0OlsDQldU1+dABWb4PhYr8muqD1+sgAjPSbAdKXu/ePd1+1rMx9Sp25FsgCDdwwedzYldU29UgkUBLbff9sJziRStUAE0KZr6kbFL6xwpQl8TmZFdHJxAzvt0Kgrvom3DJ2RHhPL0JPA3XJIxX+GYqsfWlrfC8btHKsZwY4jOZCH96SjOUh3e5jO1pAApnVNfV5XFQlXDgtX2sKVeeFKWRx54crvpR36/9IfrEMFOunchkwAAAAASUVORK5CYII=); + --remove: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAJzNAACczQHlJu8RAAAAB3RJTUUH4AsWFDMRXcbGHgAAAllJREFUSMfllr1LW1EYh583X5TcJR3ObVNpuvY6WRAKcXHoEnAoJEv/CCkOBd0UFwehCP0nWgJZE6FjlgYk092KkiLCvcSl5CZ4w3079CIxHxqjmz84cC/n5Tzn/TrnwJOTqhpV/aSq31X1TFXDeJyp6o94zr5rHbkFkAT2VXWn1+vRbDZxXZcgCACwLAvHcVhbW8OyLERkV0T25gapqgAvgBPP8/K1Wo3Ly8v/xiLjtgDkcjkqlQrGmFPgrYhczQN6CbitVut5o9EglUrNFeIwDCmVSqyurl6p6utEIuHNBMXh+tNqtfLHx8ckk8l75XM4HLKxscHKysqFiLwanUuM2e57npdvNBr3hgCkUinq9TrdbjevqodTQXF17dRqtbnDNUvVahVgc5ZHH3q93nXiHyLP8+h0OhlV3ZoG+thsNh+l99LpNK7rAnyeBnrvuu5ECS8q3/cBrht5NBlLQRBMFMH29vZcCx8cHNz47/f7AM9mVd1jHl03K3Lk+9yyrDeDweDWnc6rbDYLMJjm0a/l5eWJnSwq27YBLqaBasVi8VEgYRjiOA7At2mgn5ZlkcvlHgwyxlAoFEIR+ToBEhFPRHYrlQphGC4MiaKIcrkMcDTzrBORPWPMaalUYjgcLgRZX1/HGHMuIl/uuiYywN92u52p1+v3hhSLxRBYEhH/zhs2iiJbRNrdbjdfrVbxPI90Oj0z8cYYyuUyxphz4N045NarPPbuENjsdDoZ13XxfZ9+v4+qks1msW0bx3EoFAohcDQerkW6fCt+jASqGsUjUNXfoyf009I/KqIm8hdbRuUAAAAASUVORK5CYII=); + --remove-active: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAJzNAACczQHlJu8RAAAAB3RJTUUH4AwDESQlqt0PawAAAnlJREFUSMfllt9LU2EYxz87Z++cm+ER66xpOYOgKCG6MozQC++CMKQb/4QiyovAvDKkmwhCiBS6706EsLuEYFeNiC40DPpxQpaozbG5TXdez7suXDLnkc3Nq/rC4fDwvLyf9/nxPufAvyZPpQXSUSeAfmAA6Abai644EANmgDmha6s1gaSjdGAceJjIOUwvpIhaWdJ5BYDh17gaCTJ4sZnWgA4wJnTtUdUg6SgPEAI+Wkk7/CT6m+UNCYBWtloVdt5m0Mton0nEED+A80LX7GpAJ4HPs4vplqnYOg1eT1U12JQF7lxp5fq5YzZwujyVHpd0Lc0upsMvPyTxaocreH67wP2e4/SfbVoWutZW6ivfatxK2uGp2PqhIQANXg+TsQTxtAxLRz11jajYXau3X/9iJSPrauVQk+DFjTZb6FqDW0T9iZyzW/h6ZCVt5le2fNJRw26ggemF1JFczkbhIWplAe65gbqjVnZfC9eqpZQEMP/a3hJfezqv9jXB9FCkqo0HX/3cY2dsBeA/qOuOTNtqr10aUdzwa5HiSQ48abUy/BrAlltEsWudwd2xUq86W3wAy26gmZsXmo8EsikL9HQEAJ67geZaAzpm0Fs3KGIIukJ+KXTt2T5QcQiOjfaZbMra86cKMNJrAkxUmt7f33zZODP5PlH15C6FDF0yuNXVHBe6dqoSyAdsvP2a8U3GErVAJNAudG2t4hdWOsoEPsXTMvz43RpW0qZReA4sfMQQjPSaRAwRBy6XQyr+MxRH/d35lS1f1MqylJJkbMW22rknnS0+ejoCdIX8EpgQuvagri6SjhqWjrKko3LSUar45KSjvpVO6P9LfwDLUQFhNo3NowAAAABJRU5ErkJggg==); + --eye-dark: url('data:image/png;base64,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'); + --eye-light: url('data:image/png;base64,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'); + --eye-active: url('data:image/png;base64,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'); + --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; + --default-marker-color: rgba(245, 227, 179); + --button-color: #232323; + --button-color-hover: #ffffff; + --button-background: #0000000d; + --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.04em 0.04em rgba(0,0,0,0.35); + --button-border: 1px solid #dadada; + --button-background-hover: #3fb4e5; + --button-background-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-caption-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: var(--arrow-up) no-repeat right; + --table-header-text-background-down: var(--arrow-down) no-repeat right; + --table-header-text-background-up-rtl: var(--arrow-up) no-repeat left; + --table-header-text-background-down-rtl: var(--arrow-down) no-repeat left; + --table-header-sort-background: url(img/sort_16.png) no-repeat; + --table-tree-background-image: var(--add); + --table-tree-background-image-hover: var(--add-active); + --table-tree-background-image-expanded: var(--remove); + --table-tree-background-image-expanded-hover: var(--remove-active); + --table-tree-background-image-loading: url(img/ripple.gif); + --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-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); + --button-flat-color-hover: 0; + --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-item-hover-background: rgb(167, 227, 252); + --menu-item-hover-box-shadow: #cecbcb 0 1px 1px 0; + --checkbutton-checked-color: #fff; + --checkbutton-checked-background: #3fb4e5; + --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: var(--arrow-up); + --dropdown-arrow-down-background-image: var(--arrow-down); + --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-background-disabled: #e5e5e5; + --textbox-border: 1px solid #dadada; + --textbox-border-color-focus: #a7e3fc; + --textbox-border-color-invalid: #ff6762; + --textbox-box-shadow-invalid: 0 0 5px #ff6762; + --textbox-box-shadow-focus: 0 0 10px #8bddff; + --resizer-horizontal-background: #dde2e3; + --resizer-vertical-background: #dde2e3; + --selectlist-arrow-hover-background-image: var(--arrow-down-active); + --selectlist-label-background: #fff; + --selectlist-arrow-background-color: #fff; + --selectlist-arrow-border: 1px solid #dadada; + --selectlist-arrow-background-image: var(--arrow-down); + --searchlist-menu-border: 1px solid #CCC; + --searchlist-menu-background: rgba(255, 255, 255, 0.44); + --searchlist-menu-color: #333; + --lazylist-more-background-image: var(--arrow-down-active); + --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: var(--arrow-left); + --bar-arrow-right-background-image: var(--arrow-right); + --bar-arrow-left-background-image-hover: var(--arrow-left-active); + --bar-arrow-right-background-image-hover: var(--arrow-right-active); + --bar-arrow-left-inactive-background-image: var(--arrow-left); + --bar-arrow-right-inactive-background-image: var(--arrow-right); + --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: var(--add); + --multiselect-add-background-image-hover: var(--add-active); + --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: #b5b5b5; + --scrollbar-thumb-border: 1px solid #dadada; + --scrollbar-thumb-background-hover: #62b7da; + --scrollbar-thumb-border-hover: 1px solid #dadada; + --scrollbar-thumb-background-active: #48b9e7; + --scrollbar-thumb-border-active: 1px solid #dadada; +} + +.textbox-with-label { + padding: 15px 5px 5px 5px; + margin: 10px 0; + position: relative; + display: inline-block; + border-radius: 4px; + color: var(--textbox-color); + border: var(--textbox-border); + background: var(--textbox-background); +} + + .textbox-with-label > span { + padding: 10px; + pointer-events: none; + position: absolute; + top: 0; + transition: 0.4s; + transition-timing-function: ease; + transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1); + opacity: 0.5; + color: var(--default-link-color); + } + +html[dir="rtl"] .textbox-with-label > span { + right: 0; +} + +html[dir="ltr"] .textbox-with-label > span { + left: 0; +} + +.textbox-with-label:focus-within { + outline: none; + border-color: var(--textbox-border-color-focus); + box-shadow: var(--textbox-box-shadow-focus); + background: var(--textbox-background-active); +} + +.textbox-with-label > input { + padding: 5px; + border: 0; + background: var(--textbox-background); + color: var(--textbox-color); +} + + .textbox-with-label > input:focus { + outline: none; + background: var(--textbox-background-active); + } + + .textbox-with-label > input:focus + span, + .textbox-with-label > input:not(:placeholder-shown) + span { + opacity: 1; + transform: scale(0.75) translateY(-40%) translateX(-20px); + } + +html[dir="rtl"] .textbox-with-label > input:focus + span, +html[dir="rtl"] .textbox-with-label > input:not(:placeholder-shown) + span { + opacity: 1; + transform: scale(0.75) translateY(-40%) translateX(20%); +} + +.range2 { + position: relative; +} + +.range2-thumb4 { + width: 10px; + background: var(--default-path-color); + height: 100%; + position: absolute; + z-index: 100; + top: 0; + pointer-events: none; + left: calc(var(--x) - 5px); + transition: left ease-out 0.2s; +} + +.range2-thumb { + width: 10px; + background: var(--default-graph-color-dim); + height: 100%; + position: absolute; + z-index: 100; + top: 0; + pointer-events: none; + width: var(--x); + transition: width ease-out 0.2s; + border-right: 2px solid var(--default-path-color); +} + +html[dir='rtl'] .range2-thumb { + border-right: none; + border-left: 2px solid var(--default-path-color); + width: calc(100% - var(--x)); +} + +.range2-preview { + /* height: 74px; */ + background: var(--default-background-color-light); + position: absolute; + z-index: 100; + top: 0; + pointer-events: none; + left: var(--x); + transition: left ease-out 0.2s; + border: 2px solid var(--default-path-color); + border-radius: 5%; + display: none; + text-align: center; + /* vertical-align: middle; */ + padding: 0; + transform: translateX(-50%) translateY(calc((-100%) - 7px)); +} + + .range2-preview:after { + content: ''; + position: absolute; + top: 100%; + left: 0; + right: 0; + margin: 0 auto; + width: 0; + height: 0; + border-top: solid 10px var(--default-path-color); + border-left: solid 10px transparent; + border-right: solid 10px transparent; + } + +.range2-preview-visible { + display: block; +} + +.range2-thumb-dragging { + background-color: var(--default-graph-color-light); + transition: none; +} + +.range2-chart { + width: 100%; + height: 100%; +} + +.button { + display: flex; + align-items: center; + padding: 0px 10px; + border: var(--button-border); + border-radius: 8px / 10px; + box-sizing: border-box; + text-decoration: none; + font-weight: 300; + color: var(--button-color); + text-shadow: var(--button-text-shadow); + text-align: center; + transition: all 0.2s; + background: var(--button-background); + cursor: pointer; + margin: 0 2px; + -webkit-appearance: none; + outline:0; + overflow: hidden; + position: relative; +} + + + + + .button:hover { + border-color: rgba(255,255,255,1); + background: var(--button-background-hover); + color: var(--button-color-hover); + } + + .button:disabled { + background: var(--button-background-disabled); + color: var(--button-color-disabled); + border-color: var(--button-border-color-disabled); + cursor: default; + } + + .button button-big { + font-size: 18px; + padding: 15px 20px; + min-width: 100px; + } + +.button-close { + color: var(--button-close-color); + font-size: 30px; + text-decoration: none; + position: absolute; + right: 5px; + top: 0; +} + + + .button-close:hover { + color: var(--button-close-color-hover); + } + + +.button-flat:disabled { + opacity: 0.65; + cursor: not-allowed; +} + +.button-flat img { + vertical-align: middle; +} + +.button-flat-mini { + user-select: none; + background-image: linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%); + border: 1px solid #dcdcdc; + cursor: pointer; + color: #666666; + text-decoration: none; + font-size: 8px; + font-weight: normal; + text-align: center; + text-shadow: 0 2px rgba(0, 0, 0, 0.2); + box-shadow: inset 0 0 2px 2px rgba(255, 255, 255, 0.1), 0 2px rgba(0, 0, 0, 0.12); + padding: 5px 10px; + display: inline-block; + -webkit-font-smoothing: antialiased; +} + + .button-flat-mini:hover { + border: 1px red solid; + } + + .button-flat-mini:disabled { + opacity: 0.65; + cursor: not-allowed; + } + +.modal-dialog { + z-index: 10; + position: absolute; + background: #fefefe; + border: #333 solid 1px; +} + + +.window, .dialog { + flex-direction: column; + background: var(--window-background); + margin: 0; + border: var(--window-border); + z-index: 1000; + left: 30%; + top: 25%; + display: flex; + outline: none; +} + +.dialog { + display: none; + position: absolute; + box-shadow: var(--dialog-box-shadow); +} + +.dialog-visible { + display: flex; +} + +.window:focus-within, .dialog:focus-within { + z-index: 1001; +} + +.window:focus-within > .window-header, .dialog-active > .dialog-header { + background: var(--window-active-background); +} + +.background-visible ~ .wrap { + filter: blur(2px); +} + +.dialog-modal { + z-index: 1004; +} + +.background { + visibility: hidden; + position: fixed; + width: 100%; + height: 100%; + background: var(--background-background); + z-index: 1003; + top: 0; + transition: all .3s ease .15s; +} + +.background-visible { + visibility: visible; + background: var(--background-visible-background); + transition: all .3s ease .15s; +} + +html[dir='rtl'] .window-tools, html[dir='rtl'] .dialog-tools { + right: auto; + left: 5px; +} + +.window-tools, .dialog-tools { + position: absolute; + top: 5px; + right: 5px; +} + +.window-icon, .dialog-icon { + width: 22px; + margin-right: 6px; + background-image: var(--icon); + background-size: contain; + background-repeat: no-repeat; + background-position: center; +} + + +.window-caption, .dialog-caption { + max-width: calc(100% - 50px); + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + margin-left: 10px; + margin-right: 10px; + color: var(--window-caption-color); +} + +.window-subtitle, .dialog-subtitle +{ + border: 1px solid #c2c2c2; + font-size: 12px; + height: 40%; + margin: auto 0; + line-height: 101%; + padding: 2px; + border-radius: 3px; + background: wheat; +} + +.window-subtitle:empty, .dialog-subtitle:empty +{ + display: none; +} + +.window-tools-close, .dialog-tools-close { + float: left; + height: 16px; + line-height: 16px; + padding: 0 5px; + border: var(--window-tools-close-border); + border-radius: 5px; + background: var(--window-tools-close-background); + white-space: nowrap; +} + +.window-tools-close:hover, .dialog-tools-close:hover { + background: var(--window-tools-close-background-hover); +} + +.window-tools-max, .dialog-tools-max { + float: left; + width: 1.4em; + line-height: 1.4em; + text-align: center; + margin-left: .15em; + cursor: pointer; + background: #aaa; + border-radius: .2em; + font-family: Verdana; + opacity: .6; +} + +.window-body { + min-height: 20px; + min-width: 20px; + padding: 0px; + flex: 1; +} + +.dialog-body { + flex: 1; + min-width: 100px; + min-height: 100px; + /*width: calc(100% - 10px );*/ + padding: 5px; + overflow-y: auto; +} + +.dialog-loading { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 0; + background: var(--dialog-loading-background); + visibility: hidden; + text-align: center; + opacity: 0; + transition: all .3s ease .15s; +} + +.dialog-loading-content { + position: absolute; + top: calc(50% - 30px); + left: calc(50% - 30px); + border-radius: 50%; + border: var(--dialog-loading-content-border); + border-top: var(--dialog-loading-content-border-top); + border-right: var(--dialog-loading-content-border-right); + border-bottom: var(--dialog-loading-content-border-bottom); + width: 40px; + height: 40px; + animation: spin 1.2s linear infinite; +} + +@keyframes spin { + 0% { + transform: rotate(0deg); + } + + 100% { + transform: rotate(360deg); + } +} + +.dialog-loading-visible { + opacity: 1; + visibility: visible; + height: 100%; + transition: all .3s ease .15s; +} + +body { + height: 100%; + margin: 0; +} + +.window-header, .dialog-header { + position: relative; + line-height: 30px; + background: var(--window-header-background); + cursor: move; + user-select: none; + min-height: 30px; + display:flex; +} + + .window-header h2, .dialog-header h2 { + margin: 0px; + font-size: 20px; + } + + +html[dir='rtl'] .window-footer > button:first-of-type, html[dir='rtl'] .dialog-footer > button:first-of-type { + margin-right: auto; + margin-left: 0; +} + +.window-footer, .dialog-footer { + border-top: var(--window-footer-border-top); + background: var(--window-footer-background); + padding: 5px; + display: flex; +} + +.dialog-footer { + min-height: 30px; +} + + .window-footer > button:first-of-type, .dialog-footer > button:first-of-type { + margin-left: auto; + } + + .window-footer > *, .dialog-footer > * { + margin: 0 3px; + } + +/* End of Dialog */ + +/* Begin of Panel */ + +.panel { + margin: 0; + padding: 0; + /* border-radius: .35em; */ + border: var(--panel-border); +} + +html[dir='rtl'] .panel-tools { + right: auto; + left: 3px; +} + +.panel-tools { + position: absolute; + top: 3px; + right: 3px; +} + +.panel-icon { + float: left; + height: 16px; + width: 16px; + margin-left: 5px; + margin-top: 3px; + margin-right: 3px; + display: none; +} + + +.panel-title { + margin-left: 10px; + margin-right: 10px; + color: var(--panel-title-color); +} + +.panel-tools-close { + top: 50%; + right: -1em; + position: absolute; + height: 16px; + line-height: 15px; + padding: 0 5px; + background: #e23442; + border: 1px solid #911f28; + border-radius: 5px; + background-image: linear-gradient(to bottom, #e8616c, #dd202f); +} + + .panel-tools-close:hover { + background: #CFFF84; + } + +.panel-tools-closed { + position: absolute; + height: 16px; + line-height: 15px; + padding: 0 5px; + background: #e23442; + border: 1px solid #911f28; + border-radius: 5px; + background-image: linear-gradient(to bottom, #e8616c, #dd202f); + margin-left: 8px; +} + +.panel-tools-max { + float: left; + width: 16px; + line-height: 16px; + text-align: center; + margin-left: 2px; + cursor: pointer; + background: #aaa; + border-radius: 2px; + font-family: Verdana; + opacity: .6; +} + +.panel-body { + min-width: 100px; + min-height: 100px; + margin: 0; + /*padding:.2em 1em .6em 1em;*/ + height: 100%; + overflow: auto; + position: relative; +} + +.panel-header { + position: absolute; + top: 0; + left: 0; + margin: 0; + padding: 0; + width: 100%; + line-height: 10px; + background: #e6e6e6; + border-radius: 3px; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + user-select: none; +} + + .panel-header h2 { + margin: 0px; + font-size: 20px; + } + +html[dir='rtl'] .panel-footer { + text-align: left; +} + +.panel-footer { + padding: 5px 10px; + border-top: #eee solid 1px; + text-align: right; + position: absolute; + bottom: 0; + left: 0; + width: calc(100% - 15px); + background-image: linear-gradient(to bottom, white, #e1e2eb); +} + +/* End of Panel */ + +.table-body { + border-collapse: collapse; + border-spacing: 0; +} + + + .table-body > tbody > tr > td { + border: var(--table-td-border); + border-bottom: var(--table-td-border-bottom); + border-left: 0; + padding: 0 4px; + } + +.table-body > tbody > tr:first-child > td { + border-top: 0; +} + +.table-body > tbody > tr:last-child > td { + border-bottom: 0; +} + +.table-body > tbody > tr > td:last-child { + border-right: 0; +} + + +.table-select-box { + position: fixed; + background-color: var(--default-graph-color-light); + border-width: 2px; + border-color: var(--default-graph-color-dim); + border-style: dashed; + display: none; + z-index: 1000; + pointer-events: none; +} + +.table-select-box-visible { + display: block; +} + +.table-header { + /*color: var(--table-header-color); + background-image: var(--table-header-background); + position: relative; + overflow: hidden;*/ +} + + +.table-header td { + padding: 0; + border: 0; + position: sticky; + top: 0; + color: var(--table-header-color); + background-image: var(--table-header-background); +} + +.table-header-input { + width: calc(100% - 20px); +} + +.table-header-text { + padding: 2px 5px 2px 5px; + cursor: pointer; + align-items: center; + justify-content: center; + display: flex; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + flex-grow: 1; +} + + + .table-header-text[data-dir='normal'] { + background: none + } + + .table-header-text[data-dir='up'] { + background: var(--table-header-text-background-up); + background-size: contain; + } + + .table-header-text[data-dir='down'] { + background: var(--table-header-text-background-down); + background-size: contain; + } + +html[dir='rtl'] .table-header-text[data-dir='up'] { + background: var(--table-header-text-background-up-rtl); + background-size: contain; +} + +html[dir='rtl'] .table-header-text[data-dir='down'] { + background: var(--table-header-text-background-down-rtl); + background-size: contain; +} + + +.table-header-select { + padding: 2px 5px 2px 5px; + cursor: pointer; + width: calc(100% - 18px); +} + + .table-header-select[data-dir='normal'] { + background: url("img/sort_16.png") no-repeat right; + } + + .table-header-select[data-dir='up'] { + background: url("img/sort_up_16.png") no-repeat right; + } + + .table-header-select[data-dir='down'] { + background: url("img/sort_down_16.png") no-repeat right; + } + +.table-header-sort { + float: right; + width: 10px; + height: 12px; + background: var(--table-header-sort-background); +} + + +.table-filter-menu { + position: absolute; + border: 2px solid #ccc; + overflow-y: auto; + display: none; + background-color: #f9f9f9; + min-width: 10px; + box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); + padding: 5px; + z-index: 1; + /* max-height: 100px; */ + top: 16px; + right: 0; +} + + + +.table { + user-select: none; + cursor: default; + overflow: auto; + display: flex; + flex-direction: column; + position: relative; + border: var(--table-border); +} + + +.table-tree { + cursor: pointer; + width: 16px; + height: 16px; + display: inline-block; + vertical-align: middle; + background-image: var(--table-tree-background-image); + padding: 3px; + background-size: contain; + background-repeat: no-repeat; + background-position: calc(100% / 2) calc(100% / 2); +} + + + .table-tree:hover { + background-image: var(--table-tree-background-image-hover); + } + + .table-tree[data-expand='1'] { + background-image: var(--table-tree-background-image-expanded); + } + + + .table-tree[data-expand='1']:hover { + background-image: var(--table-tree-background-image-expanded-hover); + } + + + .table-tree[data-expand='3'] { + background-image: var(--table-tree-background-image-loading); + } + + +.table-row { +} + + .table-row[data-level='0'] { + } + + .table-row[data-level='1'] { + /*background-image: linear-gradient(to top, rgba(153, 205, 254, 0.34), rgba(255, 255, 255, 0.42));*/ + background: var(--table-row-level-1-background); + } + + .table-row[data-level='1'] td:first-child { + padding-left: 32px; + } + + .table-row[data-level='1'] .table-tree { + margin-left: -22px; + } + + .table-row[data-level='2'] { + background: var(--table-row-level-2-background); + } + + .table-row[data-level='2'] td:first-child { + padding-left: 46px; + } + + .table-row[data-level='2'] .table-tree { + margin-left: -22px; + } + + .table-row[data-level='3'] { + background: var(--table-row-level-3-background); + } + + .table-row[data-level='3'] td:first-child { + padding-left: 46px; + } + + .table-row[data-level='3'] .table-tree { + margin-left: -22px; + } + + + + +html[dir='rtl'] .table-row[data-level='1'] td:first-child { + padding-right: 32px; + padding-left: 0; +} + +html[dir='rtl'] .table-row[data-level='1'] .table-tree { + margin-right: -22px; + margin-left: 0; +} + + +html[dir='rtl'] .table-row[data-level='2'] td:first-child { + padding-right: 46px; + padding-left: 0; +} + +html[dir='rtl'] .table-row[data-level='2'] .table-tree { + margin-right: -22px; + margin-left: 0; +} + + + +html[dir='rtl'] .table-row[data-level='3'] td:first-child { + padding-right: 46px; + padding-left: 0; +} + +html[dir='rtl'] .table-row[data-level='3'] .table-tree { + margin-right: -22px; + margin-left: 0; +} + + + +.table-row-selected, .table-row-selected:hover, .table-row-selected[data-level='1'], .table-row-selected[data-level='2'] { + /*background-color: rgb(196, 196, 199);*/ + background: var(--table-row-selected-background); + box-shadow: var(--table-row-selected-box-shadow); +} + +.table-row-hidden { + display: none; +} + + +.table-header-menu { + position: relative; + background: red; + width: 10px; + height: 15px; + float: right; + background: url("img/filter_16.png") no-repeat; + background-position: 0em; + cursor: pointer; +} + + +.table-header-wrap { + width: 100%; + border-bottom: var(--table-border); + display: flex; + /*border-left: 0;*/ + line-height: 140%; +} + +/*html[dir="rtl"] .table-header-wrap { + border-left: var(--table-header-wrap-border); + border-right: 0; +}*/ + +/* +.table-body > table > thead > tr > td:first-child > .table-header-wrap +{ + border-left: 0; +} +*/ + + +.table-resizer { + min-width: 4px; + cursor: col-resize; + background: var(--table-resizer-background); + /*border-right: 3px blue solid;*/ +} + + + +/* Checkbutton + + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + + + background:linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%); + background-color:#ffffff; + border:1px solid #dcdcdc; + + cursor:pointer; + color:#666666; + text-decoration:none; + + + font-size: 12px; + font-weight: normal; + text-align: center; + text-shadow: 0 1px rgba(0, 0, 0, 0.2); + box-shadow: inset 0 0 2px 2px rgba(255, 255, 255, 0.1), 0 2px rgba(0, 0, 0, 0.12); + + padding: 5px 10px; + + display:inline-block; + + + -webkit-font-smoothing: antialiased; + */ + +.button-flat, .check, .radiolist-button, .colorpicker-button, .dropdown { + -webkit-touch-callout: none; + user-select: none; + background: var(--button-flat-background); + /* background-color: #ffffff; */ + border: var(--button-flat-border); + cursor: pointer; + color: var(--button-flat-color); + text-decoration: none; + font-weight: normal; + font-size: 12px; + text-align: center; + /* box-shadow: inset 0 0 2px 2px rgba(255, 255, 255, 0.1), 0 2px rgba(0, 0, 0, 0.12); */ + padding: 3px 4px; + display: inline-block; + -webkit-font-smoothing: antialiased; + position: relative; + font-size: var(--button-flat-font-size); + font-weight: var(--button-flat-font-weight); +} + +.colorpicker-radiolist { + display: flex; + flex-wrap: wrap; +} + +.colorpicker-button { + flex-shrink: 0; + flex-grow: 1; + padding: 0; + width: 15px; + height: 15px; + background-image: none; + margin: 0 1px; +} + +.colorpicker-button-checked { + border: var(--colorpicker-button-checked-border); + box-shadow: var(--colorpicker-button-checked-box-shadow); + height: 10px; + width: 10px; +} + +.colorpicker-button-hover { + border-color: var(--colorpicker-button-hover-border-color); +} + + +.dialog-tools-close:before, .window-tools-close:before { + content: "x"; +} + +@media only screen and (max-width: 500px) { + .dialog { + bottom: 0; + right: 0; + top: 0; + left: 0; + } + + .dialog-header { + font-size: 20px; + line-height: 40px; + } + + .dialog-tools-close { + line-height: 25px; + height: 25px; + } +} + +.check[checked], .button[checked], .radiolist-button-checked { + background: var(--checkbutton-checked-background); + box-shadow: var(--checkbutton-checked-box-shdow); + color: var(--checkbutton-checked-color); + font-weight: var(--checkbutton-checked-font-weight); + font-size: var(--checkbutton-checked-font-size); + transition: all ease-in-out 0.3s; + /* + background-image: linear-gradient(to bottom, #67a7e9, #2580df); + color: white;*/ +} + + +/* Radio List */ + +.radiolist { + display: flex; +} + +.tabs-body { + position: relative; + transition: height.2s ease .2s; +} + +/* dirty hack, yet cool */ +.tabs[style*="height:"] > .tabs-body { + overflow-y: auto; +} + + +/* Tabs */ +.tabs-content { + background-color: var(--tabs-content-background-color); + padding: 5px; + border: var(--tabs-content-border); + box-sizing: border-box; + width: 100%; + overflow: auto; + border-top: 0; + position: absolute; + visibility: hidden; + opacity: 0; + transition: all .2s ease .2s; +} + +html[dir="ltr"] .tabs-content { + left: -100%; +} + +html[dir="rtl"] .tabs-content { + right: -100%; +} + +.tabs-content-active { + visibility: visible; + opacity: 1; + transition: all .2s ease .2s; +} + +html[dir="ltr"] .tabs-content-active { + left: 0; +} + +html[dir="rtl"] .tabs-content-active { + right: 0; +} + +.tabs-bar { + flex-shrink: 0; + overflow-x: auto; + overflow-y: hidden; + display: flex; + flex-wrap: nowrap; +} + +.tabs-bar-ext { + flex: 1; + background: 0; + border-bottom: var(--tabs-button-border); +} + +.tabs { + display: flex; + flex-direction: column; +} + +.tabs-button { + -webkit-touch-callout: none; + user-select: none; + background: var(--tabs-button-background); + border: var(--tabs-button-border); + display: inline-block; + cursor: pointer; + color: var(--tabs-button-color); + text-decoration: none; + font-weight: normal; + text-align: center; + border-radius: 5px 5px 0 0; + padding: 5px 15px; +} + + +.tabs-button[checked] { + box-shadow: var(--tabs-button-checked-box-shadow); + background: var(--tabs-button-checked-background); + color: var(--tabs-button-checked-color); + border-bottom: 0; +} + +/* Drop Down + + .dropdown +{ + display: flex; + } + +.dropdown-button:hover +{ + border: 0.1em red solid; +} + +.dropdown-button-visible img +{ + -webkit-filter: drop-shadow(0px 0px 8px #3b8de2); +} + +.dropdown-button { + + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + + + background:linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%); + background-color:#ffffff; + border:.1em solid #dcdcdc; + + cursor:pointer; + color:#666666; + text-decoration:none; + + + font-size: .8em; + font-weight: normal; + text-align: center; + text-shadow: 0 0.1em rgba(0, 0, 0, 0.2); + box-shadow: inset 0 0 0.1em 0.1em rgba(255, 255, 255, 0.1), 0 0.1em rgba(0, 0, 0, 0.12); + + padding: 0.6em 1.5em; + + display:inline-block; + + + -webkit-font-smoothing: antialiased; +} + +.dropdown .dropdown-menu { + background: rgba(255, 255, 255, 0.73); + border: solid .1em #a1a1a1; + top: 100%; + display: block; + left: -25px; + margin-top: .6em; + opacity: 0; + padding: 0.5em; + pointer-events: none; + position: absolute; + transform: translateY(10px); + transition: all .25s ease-out; + box-shadow: .1em .1em .2em rgba(0, 0, 0, 0.28); + z-index: 110; +} + +.dropdown .dropdown-menu-visible { + opacity: 1; + pointer-events: auto; + transform: translateY(0px); +} + + +.dropdown .dropdown-menu:after { + border-left: solid transparent .6em; + border-right: solid transparent .6em; + border-bottom: solid #3b8de2 .6em; + top: -.55em; + content: " "; + height: 0; + left: 50%; + position: absolute; + width: 0; +} + */ + +.dropdown-arrow-up { + background-image: var(--dropdown-arrow-up-background-image); +} + +.dropdown-arrow-down { + background-image: var(--dropdown-arrow-down-background-image); +} + +.dropdown-arrow { + height: 8px; + width: 12px; + background-size: contain; + background-repeat: no-repeat; + background-position: calc(100% / 2) calc(100% / 2); + position: absolute; + visibility: hidden; + opacity: 0; + transition: opacity .3s ease .15s; + z-index: 1002; +} + +.dropdown-arrow-visible { + visibility: visible; + opacity: 1; + transition: opacity .1s ease .15s; +} + +.listview { + overflow-y: auto; + overflow-x: hidden; + padding: 0; +} + + .listview ul { + list-style-type: none; + width: 100%; + padding: 0; + margin: 0; + } + + .listview li { + padding: 5px; + } + + .listview li:hover { + background: var(--listview-li-hover-background); + cursor: pointer; + } + + .listview li img { + float: left; + margin: 0 12px 0 0; + } + +/* Start of Menu */ + +.menu { + display: flex; + flex-direction: column; +} + +.menu, .tooltip { + --x: auto; + --y: auto; + visibility: hidden; + z-index: 1002; + position: absolute; + overflow: hidden; + border: var(--menu-border); + white-space: nowrap; + /* font-family: sans-serif; */ + background: var(--menu-background); + color: var(--menu-color); + /* border-radius: 5px; */ + margin: 0; + list-style: none; + padding: 2px; + user-select: none; + left: var(--x); + top: var(--y); + max-height: 100vh; + overflow-y: auto; +} + +.menu-visible, .tooltip-visible { + visibility: visible; +} + +.menu > * { + padding: 5px 1px; + cursor: pointer; +} + + + +.input-form .input, .input-form input[type='file'] { + width: calc(100% - 8px); +} + +.input-form .select-autocomplete, .input-form .multiselect, .input-form .select { + width: calc(100%); +} + +.input-form td:first-child { + white-space: nowrap; +} + +.select-textbox +{ + border: 0; + background: #f7f7f7; + padding: 2px 4px; + outline: none; +} + + + +/* Start of Resizer */ + +.resizer-horizontal { + -webkit-touch-callout: none; + user-select: none; + width: 5px; + cursor: col-resize; + background: var(--resizer-horizontal-background); + /*border-right: 3px blue solid;*/ +} + +.panel-horizontal { + display: flex; + width: 100%; +} + + .panel-horizontal > .panel { + /* display: block; */ + } + +.panel-vertical { + height: 100%; +} + + .panel-vertical > .panel { + display: block; + } + +.resizer-vertical { + -webkit-touch-callout: none; + user-select: none; + width: 100%; + height: 5px; + cursor: row-resize; + background: var(--resizer-vertical-background); + /*border-top: 3px blue solid;*/ + display: block; +} + + +/* Auto Complete */ + +.select, .multiselect-autocomplete, .select-autocomplete { + display: flex; + position: relative; + align-items: stretch; + cursor: pointer; +} + + +.select-autocomplete-wrap, .select-wrap, .dropdown-wrap, .multiselect-autocomplete-wrap { + position: absolute; + top: 0px; + width: 100%; +} + +.select-autocomplete-arrow:hover, .searchlist-arrow:hover, .select-arrow:hover, .multiselect-autocomplete-arrow:hover { + background-image: var(--selectlist-arrow-hover-background-image); + cursor: pointer; +} + +html[dir='rtl'] .select-label, html[dir='rtl'] .select-autocomplete-textbox, html[dir='rtl'] .multiselect-autocomplete-textbox { + /* border-right: var(--textbox-border); + border-left: 0; */ +} + +.select-autocomplete-textbox, .searchlist-textbox, .select-label, .multiselect-autocomplete-textbox { + color: var(--textbox-color); + background: var(--selectlist-label-background); + flex: 1; + /* border: var(--textbox-border); */ + /* border-right: 0; */ + user-select: none; + border-radius: 10px; + -webkit-appearance: none; + align-self: stretch; + margin: 0; + transition: var(--selectlist-transition); + min-height: 1.6em; + padding: 2px 5px; +} + +.select-counter +{ + text-align: center; + padding: 0px 10px; + background-color: #f1f1f1; + left: 0; + bottom: 0; + border-top-right-radius: 10px; + border-bottom-left-radius: 10px; + font-size: small; +} + +.select-menu-repeat +{ + background: var(--menu-background); + overflow-y: auto; + overflow-x: hidden; + max-height: 16em; +} + + +.select-autocomplete-textbox:focus, .searchlist-textbox:focus, .select-label:focus, .multiselect-autocomplete-textbox:focus { + outline: none; + border-color: var(--textbox-border-color-focus); + box-shadow: var(--textbox-box-shadow-focus); + /*background: var(--selectlist-label-focus-background);*/ +} + +.select-invalid { + outline: none; + border-color: var(--textbox-border-color-invalid) !important; + box-shadow: var(--textbox-box-shadow-invalid) !important; +} + + +.select-autocomplete-textbox:focus + .select-autocomplete-arrow, .searchlist-textbox:focus + .searchlist-arrow, .select:focus + .select-arrow, .multiselect-autocomplete-textbox:focus + .multiselect-autocomplete-arrow, .multiselect-autocomplete-textbox:focus ~ .multiselect-add { + outline: none; + border-color: var(--textbox-border-color-focus); + box-shadow: var(--textbox-box-shadow-focus); +} + +.select-autocomplete-textbox-invalid + .select-autocomplete-arrow, .searchlist-textbox:focus + .searchlist-arrow, .select:focus + .select-arrow, .multiselect-autocomplete-textbox:focus + .multiselect-autocomplete-arrow, .multiselect-autocomplete-textbox:focus ~ .multiselect-add { + outline: none; + border-color: var(--textbox-border-color-focus); + box-shadow: var(--textbox-box-shadow-focus); +} + + +.select-autocomplete-header, .select-header, .multiselect-autocomplete-header, .searchlist-header { + width: 100%; + display: flex; +} + +.select-autocomplete-arrow, .select-arrow, .multiselect-autocomplete-arrow { + background-color: var(--selectlist-arrow-background-color); + width: 27px; + /* border: var(--selectlist-arrow-border); */ + /* margin-top: 0; */ + background-image: var(--selectlist-arrow-background-image); + background-size: contain; + background-repeat: no-repeat; + background-position: calc(100% / 2) calc(100% / 2); + transition: var(--selectlist-transition); + border-radius: 10px; +} + + +.searchlist-arrow { + display: none; +} + +.searchlist-textbox { + border-right: 1px solid #dadada; + border-radius: 0; +} + +.searchlist-menu, .lazylist-menu { + border: var(--searchlist-menu-border); + /*white-space: nowrap; + font-family: sans-serif; */ + background: var(--searchlist-menu-background); + color: var(--searchlist-menu-color); + margin: 0; + padding: 1px; + height: 100%; + overflow-y: auto; + overflow-x: hidden; + list-style: none; + user-select: none; +} + +.searchlist-wrap { + height: 100%; +} + +.searchlist { + display: flex; + flex-direction: column; +} + + +.lazylist { + height: 100%; +} + +.lazylist-more { + height: 22px; + background-color: var(--button-arrow-background-color); + background-image: var(--lazylist-more-background-image); + background-size: contain; + background-repeat: no-repeat; + background-position: calc(100% / 2) calc(100% / 2); + cursor: pointer; + border: var(--button-arrow-background-border); + border-top: 0; +} + + + +.lazylist-menu { + height: calc(100% - 24px); +} + +.dropdown-menu-oversized { + overflow-y: auto; +} + +.select-autocomplete-menu, .select-menu, .dropdown-menu, .multiselect-autocomplete-menu { + display: flex; + flex-direction: column; + visibility: hidden; + z-index: 1002; + position: absolute; + border: var(--menu-border); + /*white-space: nowrap; + font-family: sans-serif; */ + color: var(--menu-color); + margin: 0; + padding: 1px; + opacity: 0; + transition: opacity .3s, visibility .15s; + user-select: none; + + border-radius: 10px; + + border-color: var(--textbox-border-color-focus); + box-shadow: var(--textbox-box-shadow-focus); + + +} + +.dropdown-down > .dropdown-menu { + top: calc(100% + 10px); + left: 50%; + transform: translateX(-50%); +} + + +.dropdown-menu, .menu, .tooltip { + box-shadow: var(--menu-box-shadow); + cursor: default; + text-align: start; +} + + +.dropdown-visible.dropdown-up::after { + content: ''; + position: absolute; + top: -10px; + left: 0; + right: 0; + margin: 0 auto; + width: 0; + height: 0; + border-bottom: solid 10px var(--default-path-color); + border-left: solid 10px transparent; + border-right: solid 10px transparent; +} + + +.dropdown-up > .dropdown-menu { + top: 0; + left: 50%; + transform: translateY(calc(-100% - 10px)) translateX(-50%); +} + +.dropdown-visible.dropdown-down::after { + content: ''; + position: absolute; + top: calc(100% + 1px); + left: 0; + right: 0; + margin: 0 auto; + width: 0; + height: 0; + border-top: solid 10px var(--default-path-color); + border-left: solid 10px transparent; + border-right: solid 10px transparent; + z-index: 100; +} + + + + +.menu-modal, .select-menu-modal, .select-autocomplete-menu-modal, .multiselect-autocomplete-menu-modal { + z-index: 1004; +} + +.menu-modal, .select-menu-modal, .select-autocomplete-menu-modal, .multiselect-autocomplete-menu-modal { + border-top: 1px solid #333; +} + + .menu-modal > *, .select-menu-modal li, .select-autocomplete-menu-modal li, .multiselect-autocomplete-menu-modal li { + font-size: 1.4em; + line-height: 1.5em; + } + + +/* +html[dir='rtl'] .autocomplete-menu, html[dir='rtl'] .select-menu, html[dir='rtl'] .multiselect-autocomplete-menu +{ + left: auto; + right: 0px; +} +*/ + +/* mozilla is a bit special +_:-moz-tree-row(hover), .select-menu, autocomplete-menu +{ + left: auto; + right: 0px; +} + +_:-moz-tree-row(hover), html[dir='rtl'] .autocomplete-menu, html[dir='rtl'] .select-menu, html[dir='rtl'] .multiselect-autocomplete-menu +{ + right: auto; + left: 0px; +} +*/ + +.select-autocomplete-menu-visible, .select-menu-visible, .dropdown-menu-visible, .multiselect-autocomplete-menu-visible { + width: auto; + height: auto; + visibility: visible; + opacity: 1; +} + +.select-menu-repeat > div +{ + padding: 0 3px; + cursor: pointer; +} + +.select-menu-repeat > div:hover +{ + background: var(--menu-item-hover-background); + box-shadow: var(--menu-item-hover-box-shadow); + color: var(--menu-item-hover-color); +} + +/* Input */ + +.input { + display: block; + position: relative; +} + +.input > input +{ + width: 100%; +} + +.input > input, .select, .textbox { + outline: none; + color: var(--textbox-color); + border: var(--textbox-border); + background: var(--textbox-background); + border-radius: 8px / 10px; + -webkit-appearance: none; + transition: all 0.2s; + font-family: "default"; + font-size: 1em; +} + +.input > input +{ + padding: 2px 5px; +} + + .input > input:disabled { + background: var(--textbox-background-disabled); + } + + .input > input[type='checkbox'] { + width: 24px; + height: 24px; + transition-duration: 0.3s; + position: relative; + } + + + .input > input:checked::before { + content: '\2713'; + color: #4ebeec; + position: absolute; + left: 50%; + top: 50%; + transform: translateY(-50%) translateX(-50%); + font-weight: bold; + } + + .input > input:active, .textbox:active { + border: 1px solid #34495E; + } + +.input > input:focus, .textbox:focus { + border-color: var(--textbox-border-color-focus); + box-shadow: var(--textbox-box-shadow-focus); +} + +.input-invalid > input { + border-color: var(--textbox-border-color-invalid) !important; + box-shadow: var(--textbox-box-shadow-invalid) !important; +} + +.input-invalid:focus-within:after, .select-invalid:after { + content: attr(vmsg); + background-color: var(--textbox-border-color-invalid); + position: absolute; + transform: translateY(calc(-100% - 9px)) translateX(-50%); + text-align: center; + color: white; + font-weight: bold; + white-space: nowrap; + padding: 0 3px; + left: 50%; +} + +.input-invalid:focus-within:before, .select-invalid:before { + background-image: var(--arrow-down-mini); + background-repeat: no-repeat; + background-position: bottom; + content: ' '; + width: 29px; + height: 10px; + position: absolute; + top: -10px; + left: calc(50% - 5px); + filter: grayscale(42%); + background-size: cover; + filter: contrast(0.2); +} + + + +.separator { + min-width: 2px; + display: inline-block; + background: var(--separator-background); + box-shadow: var(--separator-box-shadow); + /* background-image: linear-gradient( to top, #ffffff, #9f9f9f); */ +} + +.button-flat > img, .check > img, .radiolist-button > img, .colorpicker-button > img, .dropdown > img { + transition: all 0.2s linear; + vertical-align: middle; +} + +.dropdown-visible > img { + -webkit-filter: var(--dropdown-visible-img-filter) +} + +.dropdown-visible .badge { + -webkit-filter: var(--dropdown-visible-badge); +} + +.range { + -webkit-appearance: none; + height: 15px; + margin-bottom: 0px; + background: var(--range-background); + z-index: 10; +} + + .range:focus { + outline: none; + } + + .range::-webkit-slider-runnable-track { + width: 100%; + height: 12.1px; + cursor: pointer; + box-shadow: var(--range-track-box-shadow); + background: var(--range-track-background); + border-radius: 0px; + border: var(--range-track-border); + } + + .range::-webkit-slider-thumb { + box-shadow: var(--range-thumb-box-shadow); + border: var(--range-thumb-border); + height: 18px; + width: 18px; + border-radius: 10px; + background: var(--range-thumb-background); + cursor: pointer; + -webkit-appearance: none; + margin-top: -3px; + } + + .range:focus::-webkit-slider-runnable-track { + background: var(--range-track-background-focus); + } + + .range::-moz-range-track { + width: 100%; + height: 12.1px; + cursor: pointer; + box-shadow: var(--range-track-box-shadow); + background: var(--range-track-background); + border-radius: 12.7px; + border: var(--range-track-border); + } + + .range::-moz-range-thumb { + box-shadow: var(--range-thumb-box-shadow); + border: var(--range-thumb-border); + height: 22px; + width: 23px; + border-radius: 28px; + background: var(--range-thumb-background); + cursor: pointer; + } + + .range::-ms-track { + width: 100%; + height: 12.1px; + cursor: pointer; + background: transparent; + border-color: transparent; + color: transparent; + } + + .range::-ms-fill-lower { + background: var(--range-track-background); + border: var(--range-track-border); + border-radius: 25.4px; + box-shadow: var(--range-track-box-shadow); + } + + .range::-ms-fill-upper { + background: var(--range-track-background); + border: var(--range-track-border); + border-radius: 25.4px; + box-shadow: var(--range-track-box-shadow); + } + + .range::-ms-thumb { + box-shadow: var(--range-thumb-box-shadow); + border: var(--range-thumb-border); + height: 10px; + width: 10px; + border-radius: 28px; + background: var(--range-thumb-background); + cursor: pointer; + } + + .range:focus::-ms-fill-lower { + background: var(--range-track-background-focus); + } + + .range:focus::-ms-fill-upper { + background: var(--range-track-background-focus); + } + + +.bar { + overflow: hidden; +} + +.bar, .datetimepicker-month, .datetimepicker-year { + display: flex; +} + +html[dir='rtl'] .bar, html[dir='rtl'] .datetimepicker-month, html[dir='rtl'] .datetimepicker-year { + flex-flow: row-reverse; +} + +.bar-slider { + width: 100%; + overflow-y: hidden; + overflow-x: scroll; + -webkit-overflow-scrolling: touch; +} + +.bar-slider-list { + list-style: none; + padding: 0; + display: inline-flex; + margin: 0; + height: 100%; +} + + +.bar-slider2 { + position: relative; + width: 100%; + overflow: visible; +} + +.bar-slider2-list { + list-style: none; + padding: 0; + display: flex; + margin: 0; + height: 100%; + position: absolute; + --left: 0; + left: var(--left); + transition: left 0.3s ease .3s; +} + + +.bar-arrow-left, .datetimepicker-previous { + min-width: 25px; + min-height: 25px; + background-color: var(--button-arrow-background-color); + background-image: var(--bar-arrow-left-background-image); + background-size: contain; + background-repeat: no-repeat; + background-position: calc(100% / 2) calc(100% / 2); + cursor: pointer; + border: var(--button-arrow-background-border); + z-index: 11; +} + + .bar-arrow-left:hover, .datetimepicker-previous:hover { + background-image: var(--bar-arrow-left-background-image-hover); + } + +.bar-arrow-right, .datetimepicker-next { + min-width: 25px; + min-height: 25px; + background-color: var(--button-arrow-background-color); + background-image: var(--bar-arrow-right-background-image); + background-size: contain; + background-repeat: no-repeat; + background-position: calc(100% / 2) calc(100% / 2); + cursor: pointer; + border: var(--button-arrow-background-border); + z-index: 11; +} + + .bar-arrow-right:hover, .datetimepicker-next:hover { + background-image: var(--bar-arrow-right-background-image-hover); + } + + .lazylist-more:hover, .bar-arrow-right:hover, .bar-arrow-left:hover, .datetimepicker-previous:hover, .datetimepicker-next:hover { + background-color: var(--button-arrow-background-color-hover); + } + +.bar-arrow-left-inactive { + background-image: var(--bar-arrow-left-inactive-background-image); +} + + +.bar-arrow-right-inactive { + background-image: var(--bar-arrow-right-inactive-background-image); +} + +.bar-item { + user-select: none; + background: var(--bar-item-background); + border: var(--bar-item-border); + cursor: pointer; + color: var(--bar-item-color); + font-weight: normal; + text-align: center; + padding: 2px 10px 2px 10px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + + .bar-item:hover { + /*background: var(--bar-item-background-hover);*/ + } + +.bar-item-checked { + border-bottom: var(--bar-item-checked-border-bottom); + padding-bottom: 0px; + box-shadow: var(--bar-item-checked-box-shadow); +} + +.multiselect { + display: flex; + flex-direction: column; +} + +.multiselect-wrap { + display: flex; +} + +.multiselect-autocomplete { + width: 100%; +} + +.multiselect-add, .select-autocomplete-add, .select-add { + background: var(--selectlist-label-background); + width: 27px; + border: var(--selectlist-arrow-border); + margin-top: 0; + border-left: 0; + background-image: var(--multiselect-add-background-image); + background-size: contain; + background-repeat: no-repeat; + background-position: calc(100% / 2) calc(100% / 2); + cursor: pointer; +} + +html[dir='rtl'] .multiselect-add, html[dir='rtl'] .select-autocomplete-add, html[dir='rtl'] .select-add { + border-left: var(--selectlist-arrow-border); + border-right: 0; +} + +.multiselect-add:hover, .select-add:hover, .select-autocomplete-add:hover { + background-image: var(--multiselect-add-background-image-hover); +} + +.multiselect-list { + list-style: none; + padding: 0; + margin: 0; + border: var(--textbox-border); + border-top: 0; + overflow-y: auto; + overflow-x: hidden; + height: 100%; +} + + .multiselect-list li { + display: flex; + border-bottom: var(--multiselect-list-li-border-bottom); + } + +.multiselect-list-text { + padding-left: 3px; + width: 100%; +} + +.multiselect-list-remove { + margin-left: auto; + background: var(--selectlist-label-background); + width: 27px; + border-left: var(--multiselect-list-li-border-bottom); + margin-top: 0; + background-image: var(--multiselect-list-remove-background-image); + background-size: contain; + background-repeat: no-repeat; + background-position: calc(100% / 2) calc(100% / 2); + cursor: pointer; +} + +html[dir='rtl'] .multiselect-list-remove { + border-right: var(--multiselect-list-li-border-bottom); + border-left: 0; +} + +.multiselect-list li:last-child { + border-bottom: 0; +} + +.multiselect-list-remove:hover { + background-image: var(--multiselect-list-remove-background-image-hover); +} + +.multiselect-list li:hover { + background: var(--menu-item-hover-background); + box-shadow: var(--menu-item-hover-box-shadow); +} + +.grid { + /* + width: 100%; + + height: 100%; + */ + display: grid; + margin: 0; + padding: 1px 2px; +} + +.grid-window-over { + /*border: var(--grid-window-over-border);*/ + border-style: dashed; + border-color:red; +} + +.grid-window-drag { + opacity: .8; + /*border: var(--grid-window-drag-border);*/ + border-style: dashed; + border-color:blue; +} + +.grid-window { + /*margin: 1px;*/ +} + + +.datetimepicker { + display: flex; +} + +.datetimepicker-calendar { + border-right: var(--datetimepicker-calendar-border-right); + display: flex; + flex-flow: column; + flex: 1; +} + +.datetimepicker-calendar-content { + display: flex; + flex: 1; +} + +.datetimepicker-clock { + overflow-y: scroll; + margin-bottom: 0px; + background: var(--datetimepicker-clock-background); +} + +.datetimepicker-different-month { + color: var(--datetimepicker-different-month-color); +} + +.datetimepicker-calendar-content > table { + width: 100%; + border-spacing: 0; +} + +.datetimepicker-tools { + display: flex; + background-color: var(--datetimepicker-clock-background); +} + +.datetimepicker-day, .datetimepicker-time { + cursor: pointer; + text-align: center; + padding: 3px; +} + + +.datetimepicker-day-selected { + background-color: var(--datetimepicker-day-selected-background); + color: var(--datetimepicker-day-selected-color); +} + +.datetimepicker-day-today { + border-bottom: 3px solid #f65314; + padding-bottom: 0; +} + +.datetimepicker-name { + flex: 1; + text-align: center; + align-self: center; + padding: 0 8px; +} + +.datetimepicker-month { + flex-grow: 1; + /*width: 60%;*/ +} + +.datetimepicker-year { + /*width: 40%;*/ +} + +.datetimepicker-time-selected { + background: var(--datetimepicker-day-selected-background); + color: var(--datetimepicker-day-selected-color); +} + +/* customize scrollbar css */ + +.bar-slider::-webkit-scrollbar { + width: 0px; + height: 0px; + background: rgba(235, 240, 242, 0.69); +} + +.bar-slider::-webkit-scrollbar-thumb { + background: 0; +} + +.toolbar { + background-image: linear-gradient(var(--default-background-color) 0%, var(--default-background-color-light) 100%); + color: var(--default-text-color); +} + +.datetimepicker-clock::-webkit-scrollbar, +.bar-slider-scrolling::-webkit-scrollbar, +.select-menu::-webkit-scrollbar, +.select-autocomplete-menu::-webkit-scrollbar, +.multiselect-autocomplete-menu::-webkit-scrollbar, +.listview::-webkit-scrollbar, +.table::-webkit-scrollbar, +.tabs-content::-webkit-scrollbar { + width: 8px; + background: var(--scrollbar-background); +} + + .datetimepicker-clock::-webkit-scrollbar:horizontal, + .bar-slider-scrolling::-webkit-scrollbar:horizontal, + .select-menu::-webkit-scrollbar:horizontal, + .select-autocomplete-menu::-webkit-scrollbar:horizontal, + .multiselect-autocomplete-menu::-webkit-scrollbar:horizontal, + .listview::-webkit-scrollbar:horizontal, + .table::-webkit-scrollbar:horizontal, + .tabs-content::-webkit-scrollbar:horizontal { + height: 8px; + } + +.datetimepicker-clock::-webkit-scrollbar-track, +.bar-slider-scrolling::-webkit-scrollbar-track, +.select-menu::-webkit-scrollbar-track, +.select-autocomplete-menu::-webkit-scrollbar-track, +.multiselect-autocomplete-menu::-webkit-scrollbar-track, +.listview::-webkit-scrollbar-track, +.table::-webkit-scrollbar-track, +.tabs-content::-webkit-scrollbar-track { + border: var(--scrollbar-track-border); + border-radius: 0px; + box-shadow: var(--scrollbar-track-box-shadow); +} + +.datetimepicker-clock::-webkit-scrollbar-thumb, +.bar-slider-scrolling::-webkit-scrollbar-thumb, +.select-menu::-webkit-scrollbar-thumb, +.select-autocomplete-menu::-webkit-scrollbar-thumb, +.multiselect-autocomplete-menu::-webkit-scrollbar-thumb, +.listview::-webkit-scrollbar-thumb, +.table::-webkit-scrollbar-thumb, +.tabs-content::-webkit-scrollbar-thumb { + background: var(--scrollbar-thumb-background); + border: var(--scrollbar-thumb-border); + border-radius: 0px; +} + + .datetimepicker-clock::-webkit-scrollbar-thumb:hover, + .bar-slider-scrolling::-webkit-scrollbar-thumb:hover, + .select-menu::-webkit-scrollbar-thumb:hover, + .select-autocomplete-menu::-webkit-scrollbar-thumb:hover, + .multiselect-autocomplete-menu::-webkit-scrollbar-thumb:hover, + .listview::-webkit-scrollbar-thumb:hover, + .table::-webkit-scrollbar-thumb:hover, + .tabs-content::-webkit-scrollbar-thumb:hover { + background: var(--scrollbar-thumb-background-hover); + border: var(--scrollbar-thumb-border-hover); + } + + .datetimepicker-clock::-webkit-scrollbar-thumb:active, + .bar-slider-scrolling::-webkit-scrollbar-thumb:active, + .select-menu::-webkit-scrollbar-thumb:active, + .select-autocomplete-menu::-webkit-scrollbar-thumb:active, + .multiselect-autocomplete-menu::-webkit-scrollbar-thumb:active, + .listview::-webkit-scrollbar-thumb:active, + .table::-webkit-scrollbar-thumb:active, + .tabs-content::-webkit-scrollbar-thumb:active { + background-color: var(--scrollbar-thumb-background-active); + border: var(--scrollbar-thumb-border-active); + } + + + +@media only screen and (min-width: 500px) { + .check-hover, .radiolist-button-hover, .dropdown:hover, .button-flat:hover { + border-color: var(--button-flat-border-hover); + background: var(--button-flat-background-hover); + color: var(--button-flat-color-hover); + } + + .table-row:hover { + background-color: var(--table-row-background-hover); + } + + .table-row-selected:hover { + /*background-color: rgb(196, 196, 199);*/ + background: var(--table-row-selected-background); + box-shadow: var(--table-row-selected-box-shadow); + } + + .menu > i-link:hover, .select-autocomplete-menu i-link:hover, .searchlist-menu i-link:hover, .select-menu i-link:hover, .multiselect-autocomplete-menu i-link:hover, .lazylist-menu i-link:hover { + background: var(--menu-item-hover-background); + box-shadow: var(--menu-item-hover-box-shadow); + color: var(--menu-item-hover-color); + } + + .tabs-button-hover { + border: var(--tabs-button-hover-border); + border-bottom-color: var(--tabs-content-background-color); + } + + .datetimepicker-day:hover, .datetimepicker-time:hover { + background-color: var(--datetimepicker-day-background-hover); + } + + .toolbar::-webkit-scrollbar { + width: 8px; + background: var(--scrollbar-background); + } + + .toolbar::-webkit-scrollbar:horizontal { + height: 8px; + } + + .toolbar::-webkit-scrollbar-track { + border: var(--scrollbar-track-border); + border-radius: 0px; + box-shadow: var(--scrollbar-track-box-shadow); + } + + .toolbar::-webkit-scrollbar-thumb { + background: var(--scrollbar-thumb-background); + border: var(--scrollbar-thumb-border); + border-radius: 0px; + } + + .toolbar::-webkit-scrollbar-thumb:hover { + background: var(--scrollbar-thumb-background-hover); + border: var(--scrollbar-thumb-border-hover); + } + + .toolbar::-webkit-scrollbar-thumb:active { + background-color: var(--scrollbar-thumb-background-active); + border: var(--scrollbar-thumb-border-active); + } +} + + + +.router, i-router +{ + position: relative; +} + +.route { + width: 100%; + position: absolute; + opacity: 1; + transition: all .1s ease-out; + overflow: auto; + height: calc(100% - 20px); + left: 10px; + top: 10px; + width: calc(100% - 20px); +} + +.route:not([selected]) { + /* display: none !important; */ + opacity: 0 !important; + visibility: hidden; + /* overflow: auto; */ + transform: scale(0.7); +} + + +.search-button:focus, .search-button:valid { + width: 200px; + border: 1px solid #fff; + outline: none; + cursor: default; + background-position-x: 2px; + background-color: rgba(208, 208, 208, 0.5); + padding: 0 10px 0 30px; + color: #232323; + border-radius: 10px; + border: none; +} + +.search-button { + width: 40px; + height: 30px; + background-image: var(--search); + background-repeat: no-repeat; + background-position: center; + background-size: 25px 25px; + transition: all 0.4s ease-in-out; + background-color: transparent; + border: none; + cursor: pointer; + font-size: 16px; + color: transparent; + margin-right: 10px; +} + +.ripple { + cursor: pointer; + color: white; + padding: 10px; + outline: none; + position: relative; + overflow: hidden; +} + + +.link +{ + position: relative; + overflow: hidden; + display: block; +} + +.button:after, .ripple:after, .link:after{ + content: ' '; + position: absolute; + left: var(--x); + top: var(--y); + transform: translateX(-50%) translateY(-50%); + background-color: #b5b5b5; + border-radius: 100%; + width: 0; + height: 0; + opacity: 1; + pointer-events: none; +} + +.button:after +{ + background-color: #b2d7f3a8; +} + +.link:after +{ + background-color: #d2d2d2cc; +} + + +.button-clicked:after, .ripple-clicked:after, .link-clicked:after +{ + transition: width .5s ease-out, height .5s ease-out, opacity .5s ease-out; + opacity: 0; + width: calc(var(--w) * 2);; + height: calc(var(--w) * 2); +} + +.button-clicked:active:after, .ripple-clicked:active:after, .link-clicked:active:after +{ + opacity: 0.5; +} + + + +.router::after, .target::after +{ + opacity: 0; + transition: all 1s; + content: ' '; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + visibility: hidden; + +} + +.router-loading::after, .target-loading::after +{ + transition: all 1s 1s; + opacity: 1; + visibility: visible; + background: #5454548a; + box-shadow: inset 0px 0px 40px 38px #3e3e3e9c; +} + + +.input-eye +{ + width: 40px; + background-color: #e4e4e4; + position: absolute; + left: 5px; + top: 50%; + height: 26px; + transform: translateY(-50%); + border-radius: 7px; + cursor: pointer; + background-image: var(--eye-dark); + background-size: 80%; + background-repeat: no-repeat; + background-position: center; +} + +.input-eye:hover +{ + background-image: var(--eye-active) ; +} + +.input-eye-active +{ + background-image: var(--eye-light) !important;; + background-color:#4ea3df; + +} + +.navbar { + display: flex; + flex-direction: column; + height: 100%; +} + +.navbar-search +{ + margin: 6px; + background-image: var(--search); + background-repeat: no-repeat; + background-size: 25px; + background-position: 2px 50%; + padding-left: 30px; +} + +.navbar-container +{ + overflow: auto; + visibility: hidden; +} + +.navbar-container > i-link > span > span +{ + color: black; + background-color: #fff3d4; + font-weight: bold; +} + +.navbar-container::-webkit-scrollbar { + width: 6px; + height: 6px; +} + +.navbar-container::-webkit-scrollbar-button:hover { + background-color: black !important; +} + +.navbar-container::-webkit-scrollbar-thumb { + min-width: 20px; + min-height: 20px; + background-color: #71ad48; + border: 1px solid #cccccc; +} + +.navbar-container::-webkit-scrollbar-track { + background-color: #b5b5b5; +} + +.navbar-container::-webkit-scrollbar-thumb:hover { + background-color: #8bc364; +} + +.navbar-container::-webkit-scrollbar-thumb:active { + /*border: 1px dotted #b5b5b5;*/ +} + +.navbar-container::-webkit-scrollbar-track:hover { + /*background-color: gray;*/ +} + +.navbar-container:hover, .navbar-container > * { + visibility: visible; +} + +.navbar-container i-link +{ + transition: height ease 0.2s; +} + +.navbar-container i-link[data-level = '1'] { + padding-right: 20px; + font-size: 14px; +} + +.navbar-container i-link[data-level = '0'] { + background-color: #e5e5e5; + /*border: 1px solid #cacaca;*/ +} + +.navbar-container i-link[data-level = '2'] { + background-color: #d4d4d4; + padding-right: 40px; + font-size: 14px; + color: #454545; + font-weight: bold; +} + +.navbar-container i-link[hidden] { + /* display: none; */ + padding-top: 0; + padding-bottom: 0; + height: 0; + transition: height ease 0.2s; +} + + +.navbar-container i-link[selected] +{ + font-weight: bold; + background:#4ebeec; + color: white; +} + +.navbar-container i-check { + width: 42px; + background-image: var(--arrow-left); + background-position: 0px 48%; + background-repeat: no-repeat; + border-right: 4px solid #c3c3c3; + display: flex; + align-self: stretch; + background-color: #d6d6d6; + border-top-left-radius: 10px; + border-bottom-left-radius: 10px; +} + +.navbar-container i-check[checked='checked'] { + background-image: var(--arrow-down-active); +} diff --git a/css/iui.default.css b/css/iui.default.css new file mode 100644 index 0000000..e44ecc6 --- /dev/null +++ b/css/iui.default.css @@ -0,0 +1,1826 @@ + +#panelObjects +{ + position: absolute; + width: 15em; + height: 100%; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 0; +} + +.button{ + transition: color .1s ease; + cursor: pointer; + font-weight: normal; + text-align: center; + text-shadow: 0 0.1em rgba(0, 0, 0, 0.2); + border-radius: 1px; + color: white; + box-shadow: inset 0 0 0.1em 2px rgba(255, 255, 255, 0.1), 0 2px rgba(0, 0, 0, 0.12); + + background: #3b8de2; + border: 1px solid #215a96; + + display:inline-block; + padding: 5px 10px; + background-image: linear-gradient(to bottom, rgb(84, 184, 255), #33aaff); +} + + +.button:hover{ + background: #46D82D; +} + +.button:disabled +{ + background-image: linear-gradient(to bottom, rgb(230, 230, 230), #bfbfbf); + color: #7c7c7c; + border-color: #b7b7b7; + cursor: default; +} + +.button button-big{ + font-size: 18px; + padding: 15px 20px; + min-width: 100px; +} + +.button-close{ + color: #aaa; + font-size: 30px; + text-decoration: none; + position: absolute; right: 5px; top: 0; +} + + +.button-close:hover{ + color: #000; +} + + +.button-flat:hover +{ + border: 1px red solid; +} +.button-flat:disabled +{ + opacity: 0.65; + cursor: not-allowed; +} + +.button-flat img +{ + vertical-align: middle; +} + +.button-flat-mini { + + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + + + background:linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%); + background-color:#ffffff; + border:1px solid #dcdcdc; + + cursor:pointer; + color:#666666; + text-decoration:none; + + + font-size: 8px; + font-weight: normal; + text-align: center; + text-shadow: 0 2px rgba(0, 0, 0, 0.2); + box-shadow: inset 0 0 2px 2px rgba(255, 255, 255, 0.1), 0 2px rgba(0, 0, 0, 0.12); + + padding: 5px 10px; + + display:inline-block; + + -webkit-font-smoothing: antialiased; +} + +.button-flat-mini:hover +{ + border: 1px red solid; +} +.button-flat-mini:disabled +{ + opacity: 0.65; + cursor: not-allowed; +} + +.modal-dialog{ + z-index: 10; + position: absolute; + background: #fefefe; + border: #333 solid 1px; + /*border-radius: 5px; + .translate(0, -500%); + .transition-transform(~"0.3s ease-out");*/ +} + + +.window, .dialog +{ + flex-direction: column; + background: white; + margin: 0; + border: 1px solid #BBBABA; + z-index: 1000; + left: 30%; + top: 30%; + display: flex; +} + +.dialog +{ + display: none; + position: absolute; + box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.506); +} + +.dialog-visible +{ + display: flex; +} + +.window-active, .dialog-active +{ + z-index: 1001; +} + +.window-active > .window-header, .dialog-active > .dialog-header +{ + background: rgb(185, 223, 255); +} + +.dialog-modal-background-visible ~ .wrap +{ + filter: blur(2px); +} + +.dialog-modal +{ + z-index: 1002; +} + +.dialog-modal-background +{ + display: none; + position: fixed; + width: 100%; + height: 100%; + background-color:rgba(0, 0, 0, 0.64); + z-index: 1001; + top:0; + } + +.dialog-modal-background-visible +{ + display: flex; +} + +html[dir='rtl'] .window-tools, html[dir='rtl'] .dialog-tools +{ + right: auto; + left: 5px; +} + +.window-tools, .dialog-tools +{ + position: absolute; + top: 5px; + right: 5px; +} + +.window-icon, .dialog-icon +{ + float: left; + height: 16px; + width: 16px; + margin-left: 2px; + margin-top: 3px; + margin-right: 3px; + display: none; +} + + +.window-title, .dialog-title +{ + margin-left: 10px; + margin-right: 10px; + color: #444; +} + +.window-tools-close, .dialog-tools-close +{ + float: left; + height: 16px; + line-height: 16px; + padding: 0 5px; + background: #e23442; + border: 1px solid #911f28; + border-radius: 5px; + background-image: linear-gradient(to bottom, #e8616c, #dd202f); +} + +.window-tools-close:hover, .dialog-tools-close:hover +{ + background-color: #ff7d88; +} + +.window-tools-max, .dialog-tools-max +{ + float: left; + width: 1.4em; + line-height: 1.4em; + text-align: center; + margin-left: .15em; + cursor: pointer; + background: #aaa; + border-radius: .2em; + font-family: Verdana; + opacity: .6; +} + +.window-body +{ + min-height: 20px; + min-width: 20px; + padding: 0px; + height: 100%; +} + +.dialog-body +{ + min-width: 100px; + min-height: 100px; + width: calc(100% - 10px ); + padding: 5px; + position: relative; +} + +.dialog-loading +{ + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 0; + background-color: rgb(185, 223, 255); + visibility: hidden; + text-align: center; + opacity: 0; + transition: all .3s ease .15s; +} + +.dialog-loading-content +{ + position: absolute; + top: calc(50% - 30px); + left: calc(50% - 30px); + border: 10px solid rgb(255, 255, 255); + border-radius: 50%; + border-top: 10px solid #ffe3e3; + border-right: 10px solid #ffb4b4; + border-bottom: 10px solid #ff4d4d; + width: 40px; + height: 40px; + animation: spin 1.2s linear infinite; +} + +@keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} + +.dialog-loading-visible +{ + opacity: 1; + visibility: visible; + height: 100%; + transition: all .3s ease .15s; +} + +body +{ + height: 100%; + margin: 0; +} + +.window-header, .dialog-header +{ + position: relative; + width: 100%; + line-height: 30px; + background: #e6e6e6; + border-radius: 3px; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + cursor: move; + user-select: none; + min-height: 30px; +} + +.window-header h2, .dialog-header h2 +{ + margin: 0px; + font-size: 20px; +} + + +html[dir='rtl'] .window-footer > button:first-of-type, html[dir='rtl'] .dialog-footer > button:first-of-type +{ + margin-right: auto; + margin-left: 0; +} + +.window-footer, .dialog-footer +{ + border-top: #eee solid 1px; + background-image: linear-gradient(to bottom, white, #e1e2eb); + padding: 5px; + display: flex; +} + +.dialog-footer +{ + min-height: 30px; +} + +.window-footer > button:first-of-type, .dialog-footer > button:first-of-type +{ + margin-left: auto; +} + +.window-footer > *, .dialog-footer > * +{ + margin: 0 3px; +} + +/* End of Dialog */ + +/* Begin of Panel */ + +.panel +{ + margin: 0; + padding: 0; +/* border-radius: .35em; */ + border: 1px solid #BBBABA; +} + +html[dir='rtl'] .panel-tools +{ + right: auto; + left: 3px; +} + +.panel-tools +{ + position: absolute; + top: 3px; + right: 3px; +} + +.panel-icon +{ + float: left; + height: 16px; + width: 16px; + margin-left: 5px; + margin-top: 3px; + margin-right: 3px; + display: none; +} + + +.panel-title +{ + margin-left: 10px; + margin-right: 10px; + color: #444; +} + +.panel-tools-close +{ + top: 50%; + right: -1em; + position: absolute; + height: 16px; + line-height: 15px; + padding: 0 5px; + background: #e23442; + border: 1px solid #911f28; + border-radius: 5px; + background-image: linear-gradient(to bottom, #e8616c, #dd202f); +} + +.panel-tools-close:hover +{ + background: #CFFF84; +} + +.panel-tools-closed +{ + position: absolute; + height: 16px; + line-height: 15px; + padding: 0 5px; + background: #e23442; + border: 1px solid #911f28; + border-radius: 5px; + background-image: linear-gradient(to bottom, #e8616c, #dd202f); + margin-left: 8px; +} + +.panel-tools-max +{ + float: left; + width: 16px; + line-height: 16px; + text-align: center; + margin-left: 2px; + cursor: pointer; + background: #aaa; + border-radius: 2px; + font-family: Verdana; + opacity: .6; +} + +.panel-body +{ + min-width: 100px; + min-height: 100px; + margin: 0; + /*padding:.2em 1em .6em 1em;*/ + height: 100%; + overflow: auto; + position: relative; +} + +.panel-header +{ + position: absolute; + top: 0; + left: 0; + margin: 0; + padding: 0; + width: 100%; + line-height: 10px; + background: #e6e6e6; + border-radius: 3px; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + user-select: none; + -moz-user-select: none; + -webkit-user-select: none; +} + +.panel-header h2 +{ + margin: 0px; + font-size: 20px; +} +html[dir='rtl'] .panel-footer +{ + text-align: left; +} + +.panel-footer +{ + padding: 5px 10px; + border-top: #eee solid 1px; + text-align: right; + position: absolute; + bottom: 0; + left: 0; + width: calc(100% - 15px); + background-image: linear-gradient(to bottom, white, #e1e2eb); +} + +/* End of Panel */ + +.table-body +{ + height: calc(100% - 25px); + /*width: 100%;*/ + overflow-y: auto; + overflow-x: auto; + +} + +.table-body > table +{ + border-spacing: 0; + border-collapse: collapse; + width:0; + table-layout: fixed; +} + +.table-body > table > thead td +{ + line-height: 0em;; + padding: 0; +} + +.table-body > table > tbody > tr > td { + border: 1px solid #c9c9c9; + border-left: 0; +} + +.table-body > table > tbody > tr:first-child > td { + border-top: 0; +} +.table-body > table > tbody > tr:last-child > td { + border-bottom: 0; +} + +.table-body > table > tbody > tr > td:last-child { + border-right: 0; +} + + + +.table-header +{ + background-image: linear-gradient(to bottom, white, #e1e2eb); + position: relative; + overflow: hidden; + height: 25px; +} + +.table-header > table +{ + border-spacing: 0; + border-collapse: collapse; + table-layout: fixed; + position: absolute; +} + +.table-header td +{ + padding:0; + border: 0; +} + +.table-header-input +{ + width: calc(100% - 20px); +} + +.table-header-text +{ + padding: 2px 5px 2px 5px; + cursor: pointer; + width: calc(100% ); + align-items: center; + justify-content: center; + display: flex; +} + +.table-header-text[data-dir='normal'] +{ + background: none /*url(img/"sort_16.png") no-repeat right;*/ +} +.table-header-text[data-dir='up'] +{ + background: url(img/"sort_up_16.png") no-repeat right; +} + +.table-header-text[data-dir='down'] +{ + background: url(img/"sort_down_16.png") no-repeat right; +} + +.table-header-select +{ + padding: 2px 5px 2px 5px; + cursor: pointer; + width: calc(100% - 18px); +} + +.table-header-select[data-dir='normal'] +{ + background: url(img/"sort_16.png") no-repeat right; +} +.table-header-select[data-dir='up'] +{ + background: url(img/"sort_up_16.png") no-repeat right; +} + +.table-header-select[data-dir='down'] +{ + background: url(img/"sort_down_16.png") no-repeat right; +} +.table-header-sort +{ + float: right; + width: 10px; + height: 12px; + background: url(img/"sort_16.png") no-repeat; +} + + +.table-filter-menu +{ + position: absolute; + border:2px solid #ccc; + overflow-y: auto; + display: none; + background-color: #f9f9f9; + min-width: 10px; + box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); + padding: 5px; + z-index: 1; + /* max-height: 100px; */ + top:16px; + right: 0; +} + + + +.table +{ + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + cursor: default; + overflow: hidden; + + /*border: 1px solid #A2A2A2; padding-top: 1.8em; +*/ + position: relative; + + +} + + +.table-tree +{ + cursor: pointer; + width: 16px; + height: 16px; + display: inline-block; + vertical-align: middle; + background-image: url(img/"plus.png"); + padding: 3px; + background-size: contain; + background-repeat: no-repeat; + background-position: calc(100% / 2) calc(100% / 2); +} + + +.table-tree:hover +{ + background-image: url(img/"plus-hover.png"); +} + +.table-tree[data-expand='1'] +{ + background-image: url(img/"minus.png"); +} + + +.table-tree[data-expand='1']:hover +{ + background-image: url(img/"minus-hover.png"); +} + + +.table-row +{ + +} + +.table-row[data-level='0'] +{ + +} + +.table-row[data-level='1'] +{ + /*background-image: linear-gradient(to top, rgba(153, 205, 254, 0.34), rgba(255, 255, 255, 0.42));*/ + background-color: rgba(121, 121, 121, 0.15); +} + +.table-row[data-level='1'] td:first-child +{ + padding-left: 32px; +} + +.table-row[data-level='1'] .table-tree +{ + margin-left: -22px; +} + +.table-row[data-level='2'] +{ + background-color: rgba(121, 121, 121, 0.3);; +} + +.table-row[data-level='2'] td:first-child +{ + padding-left: 46px; +} + +.table-row[data-level='2'] .table-tree +{ + margin-left: -22px; +} + +.table-row[data-level='3'] +{ + background-color: darkkhaki; +} + +.table-row[data-level='3'] td:first-child +{ + padding-left: 46px; +} + +.table-row[data-level='3'] .table-tree +{ + margin-left: -22px; +} + + + + +html[dir='rtl'] .table-row[data-level='1'] td:first-child +{ + padding-right: 32px; + padding-left: 0; +} + +html[dir='rtl'] .table-row[data-level='1'] .table-tree +{ + margin-right: -22px; + margin-left: 0; +} + + +html[dir='rtl'] .table-row[data-level='2'] td:first-child +{ + padding-right: 46px; + padding-left: 0; +} + +html[dir='rtl'] .table-row[data-level='2'] .table-tree +{ + margin-right: -22px; + margin-left: 0; +} + + + +html[dir='rtl'] .table-row[data-level='3'] td:first-child +{ + padding-right: 46px; + padding-left: 0; +} + +html[dir='rtl'] .table-row[data-level='3'] .table-tree +{ + margin-right: -22px; + margin-left : 0; +} + +.table-row:hover +{ + background-color: #DEF; +} + +.table-row-selected, .table-row-selected:hover, .table-row-selected[data-level='1'], .table-row-selected[data-level='2'] +{ + /*background-color: rgb(196, 196, 199);*/ + background: rgb(185, 223, 255); + box-shadow: #cecbcb 0 1px 10px 0 inset; +} + +.table-row-hidden +{ + display: none; +} + + + .table-header-menu +{ + position: relative; + background: red; + width: 10px; + height: 15px; + float: right; + background: url(img/"filter_16.png") no-repeat; + background-position: 0em; + cursor: pointer; +} + + +.table-header-wrap +{ + /* top: -5px; */ + z-index: 20; + /* position: absolute; */ + width: 100%; + border: 1px solid #c9c9c9; + height: 23px; + display: flex; + border-left: 0; + +} + +html[dir="rtl"] .table-header-wrap +{ + border-left: 1px solid #c9c9c9; + border-right: 0; +} + +/* +.table-body > table > thead > tr > td:first-child > .table-header-wrap +{ + border-left: 0; +} +*/ + + +.table-resizer +{ + min-width: 5px; + height: 100%; + cursor: col-resize; + background: #dde2e3; + z-index: 50; + /*border-right: 3px blue solid;*/ +} + + + +/* Checkbutton + + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + + + background:linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%); + background-color:#ffffff; + border:1px solid #dcdcdc; + + cursor:pointer; + color:#666666; + text-decoration:none; + + + font-size: 12px; + font-weight: normal; + text-align: center; + text-shadow: 0 1px rgba(0, 0, 0, 0.2); + box-shadow: inset 0 0 2px 2px rgba(255, 255, 255, 0.1), 0 2px rgba(0, 0, 0, 0.12); + + padding: 5px 10px; + + display:inline-block; + + + -webkit-font-smoothing: antialiased; + */ + +.button-flat, .checkbutton, .radiolist-button, .colorpicker-button, .dropdown +{ + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 5%, rgb(246, 246, 246) 100%); + /* background-color: #ffffff; */ + border: 1px solid rgba(220, 220, 220, 0.51); + cursor: pointer; + color: #666666; + text-decoration: none; + font-weight: normal; + text-align: center; + /* box-shadow: inset 0 0 2px 2px rgba(255, 255, 255, 0.1), 0 2px rgba(0, 0, 0, 0.12); */ + padding: 3px 4px; + display: inline-block; + -webkit-font-smoothing: antialiased; + position: relative; +} + +.colorpicker-radiolist +{ + flex-wrap: wrap; +} + +.colorpicker-button +{ + padding: 0; + width: 15px; + height: 15px; + background-image: none; + margin: 0 1px; +} + +.colorpicker-button-checked +{ + border: 3px rgb(255, 40, 40) solid; + box-shadow: 0 .0 1em 1px #747373; + height: 10px; + width: 10px; +} +.colorpicker-button-hover +{ + border-color: red; +} +.checkbutton-hover, .radiolist-button-hover, .dropdown:hover +{ + border: 1px red solid; +} + +.checkbutton-checked, .radiolist-button-checked +{ +background: rgb(185, 223, 255); + box-shadow: #cecbcb 0 1px 10px 0 inset; + /* + background-image: linear-gradient(to bottom, #67a7e9, #2580df); + color: white;*/ +} + + +/* Radio List */ + +.radiolist +{ + display: flex; +} + + /* Tabs */ +.tab-content +{ + padding: 5px; + border: 1px solid #dcdcdc; + display: none; +} + +.tab-content-active +{ + display: block; +} + +.tabs +{ + /*overflow: hidden;*/ +} + +.tab +{ + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + + background:linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%); + background-color:#ffffff; + border:1px solid #dcdcdc; + display:inline-block; + cursor:pointer; + color:#666666; + text-decoration:none; + + + font-weight: normal; + text-align: center; + border-bottom:0; + border-radius: 5px 5px 0 0; + padding: 5px 15px; +} + +.tab-hover +{ + border: 1px red solid; + border-bottom:0; +} + +.tab-checked +{ + box-shadow: 0 2px rgb(255, 255, 255); + background-image: linear-gradient(to bottom, rgba(173, 213, 255, 0.86) 70%, #ffffff); + color: #000000; +} + + /* Drop Down + + .dropdown +{ + display: flex; + } + +.dropdown-button:hover +{ + border: 0.1em red solid; +} + +.dropdown-button-visible img +{ + -webkit-filter: drop-shadow(0px 0px 8px #3b8de2); +} + +.dropdown-button { + + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + + + background:linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%); + background-color:#ffffff; + border:.1em solid #dcdcdc; + + cursor:pointer; + color:#666666; + text-decoration:none; + + + font-size: .8em; + font-weight: normal; + text-align: center; + text-shadow: 0 0.1em rgba(0, 0, 0, 0.2); + box-shadow: inset 0 0 0.1em 0.1em rgba(255, 255, 255, 0.1), 0 0.1em rgba(0, 0, 0, 0.12); + + padding: 0.6em 1.5em; + + display:inline-block; + + + -webkit-font-smoothing: antialiased; +} + +.dropdown .dropdown-menu { + background: rgba(255, 255, 255, 0.73); + border: solid .1em #a1a1a1; + top: 100%; + display: block; + left: -25px; + margin-top: .6em; + opacity: 0; + padding: 0.5em; + pointer-events: none; + position: absolute; + transform: translateY(10px); + transition: all .25s ease-out; + box-shadow: .1em .1em .2em rgba(0, 0, 0, 0.28); + z-index: 110; +} + +.dropdown .dropdown-menu-visible { + opacity: 1; + pointer-events: auto; + transform: translateY(0px); +} + + +.dropdown .dropdown-menu:after { + border-left: solid transparent .6em; + border-right: solid transparent .6em; + border-bottom: solid #3b8de2 .6em; + top: -.55em; + content: " "; + height: 0; + left: 50%; + position: absolute; + width: 0; +} + */ + + .dropdown-arrow + { + height: 8px; + width: 12px; + background-image: url(img/"arrow.png"); + background-size: contain; + background-repeat: no-repeat; + background-position: calc(100% / 2) calc(100% / 2); + position: absolute; + visibility: hidden; + opacity: 0; + transition: all .3s ease .15s; + z-index: 1000; + } + + .dropdown-arrow-visible + { + visibility: visible; + opacity: 1; + transition: all .1s ease .15s; + } + +.listview +{ + overflow-y: auto; + overflow-x: hidden; + padding: 0; +} + +.listview ul { + list-style-type: none; + width: 100%; + padding: 0; + margin: 0; +} + +.listview li { + padding: 5px; + overflow: auto; +} + +.listview li:hover { + background: #eee; + cursor: pointer; +} + +.listview li img { + float: left; + margin: 0 12px 0 0; +} + +/* Start of Menu */ + +.menu, .tooltip { + display: none; + z-index: 1002; + position: absolute; + overflow: hidden; + border: 1px solid #CCC; + white-space: nowrap; + /* font-family: sans-serif; */ + background: #FFF; + color: #333; + /* border-radius: 5px; */ + margin: 0; + list-style: none; + padding: 2px; + line-height: 15px; +} + +.menu-visible, .tooltip-visible { + display: block; +} + +.menu li { + padding: 5px 1px; + cursor: pointer; +} + +.menu li:hover, .autocomplete-menu li:hover,.searchlist-menu li:hover, .selectlist-menu li:hover, .multiselect-autocomplete-menu li:hover +{ + background: rgb(185, 223, 255); + box-shadow: #cecbcb 0 1px 1px 0 ; +} + +/* Start of TextBox */ + +.textbox input[type="text"] { + padding: 10px; + border: solid 1px #dcdcdc; + transition: box-shadow 0.3s, border 0.3s; +} +.textbox input[type="text"]:focus, +.textbox input[type="text"].focus { + border: solid 1px #707070; + box-shadow: 0 0 5px 1px #969696; +} + +/* Start of Resizer */ + +.resizer-horizontal +{ + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + + width: 5px; + cursor: col-resize; + background: #dde2e3; + /*border-right: 3px blue solid;*/ + + } + +.panel-horizontal +{ + display: flex; + width: 100%; +} + +.panel-horizontal > .panel +{ + display: block; +} + +.panel-vertical +{ + height: 100%; +} + +.panel-vertical > .panel +{ + display: block; +} + +.resizer-vertical +{ + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + + width: 100%; + height: 5px; + cursor: row-resize; + background: #dde2e3; + /*border-top: 3px blue solid;*/ + + display: block; +} + + +/* Auto Complete */ + +.autocomplete, .selectlist, .multiselect-autocomplete +{ + display:flex; + position: relative; +} + +.autocomplete-wrap, .selectlist-wrap, .dropdown-wrap, .multiselect-autocomplete-wrap +{ + position: absolute; + top: 0px; + width: 100%; +} + +.autocomplete-arrow:hover, .searchlist-arrow:hover, .selectlist-arrow:hover, .multiselect-autocomplete-arrow:hover +{ + background-image: url(img/arrow-down-hover.png); + cursor: pointer; +} + +html[dir='rtl'] .selectlist-label, html[dir='rtl'] .autocomplete-textbox, html[dir='rtl'] .multiselect-autocomplete-textbox +{ + border-right: 2px solid #dadada; + border-left: 0; +} + +.autocomplete-textbox, .searchlist-textbox, .selectlist-label, .multiselect-autocomplete-textbox +{ + background-color: #fff; + width: 100%; + border: 2px solid #dadada; + padding: 2px; + border-right: 0; + font-size: 14px; + line-height: 150%; + user-select: none; + } + +.autocomplete-textbox:focus, .searchlist-textbox:focus, .selectlist-label:focus, .multiselect-autocomplete-textbox:focus +{ + outline: none; + border-color: #9ecaed; + box-shadow: 0 0 10px #9ecaed; +} + +.autocomplete-textbox:focus + .autocomplete-arrow, .searchlist-textbox:focus + .searchlist-arrow, .selectlist:focus + .selectlist-arrow, .multiselect-autocomplete-textbox:focus + .multiselect-autocomplete-arrow, .multiselect-autocomplete-textbox:focus ~ .multiselect-add +{ + outline: none; + border-color: #9ecaed; + box-shadow: 0 0 10px #9ecaed; +} + +.autocomplete-header, .selectlist-header, .multiselect-autocomplete-header, .searchlist-header +{ + width: 100%; + display: flex; +} + +.autocomplete-arrow, .selectlist-arrow, .multiselect-autocomplete-arrow +{ + background-color: #fff; + width: 27px; + border: 2px solid #dadada; + margin-top: 0; + background-image: url(img/arrow-down.png); + + background-size: contain; + background-repeat: no-repeat; + background-position: calc(100% / 2) calc(100% / 2); +} + +.searchlist-arrow +{ + display: none; +} + +.searchlist-textbox +{ + border-right: 2px solid #dadada; +} + +.searchlist-menu +{ + border: 1px solid #CCC; + /*white-space: nowrap; + font-family: sans-serif; */ + background: rgba(255, 255, 255, 0.44); + color: #333; + margin: 0; + padding: 1px; + height:100%; + + overflow-y: auto; + overflow-x: hidden; + list-style: none; + +} + +.searchlist-wrap +{ + height:100%; +} + +.searchlist +{ +} + +.autocomplete-menu, .selectlist-menu, .dropdown-menu, .multiselect-autocomplete-menu + { + visibility: hidden; + z-index: 1002; + position: absolute; + border: 1px solid #CCC; + /*white-space: nowrap; + font-family: sans-serif; */ + background: #FFF; + color: #333; + margin: 0; + padding: 1px; + opacity: 0; + transition: all .3s ease .15s; +} + +.dropdown-menu, .menu, .tooltip +{ + box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.506); + cursor: default; + text-align: start; +} + +.autocomplete-menu, .selectlist-menu, .multiselect-autocomplete-menu +{ + max-height: 16em; + overflow-y: auto; + overflow-x: hidden; + max-height: 16em; + list-style: none; + left: 0px; +} + +html[dir='rtl'] .autocomplete-menu, html[dir='rtl'] .selectlist-menu, html[dir='rtl'] .multiselect-autocomplete-menu +{ + left: auto; + right: 0px; +} + +/* mozilla is a bit special */ +_:-moz-tree-row(hover), .selectlist-menu, autocomplete-menu +{ + left: auto; + right: 0px; +} + +_:-moz-tree-row(hover), html[dir='rtl'] .autocomplete-menu, html[dir='rtl'] .selectlist-menu, html[dir='rtl'] .multiselect-autocomplete-menu +{ + right: auto; + left: 0px; +} + +.autocomplete-menu-visible, .selectlist-menu-visible, .dropdown-menu-visible, .multiselect-autocomplete-menu-visible +{ + visibility: visible; + opacity: 1; + transition: all .1s ease .15s; +} + +.autocomplete-menu li, .searchlist-menu li, .selectlist-menu li, .multiselect-autocomplete-menu li +{ + padding: 1px 2px; + cursor: pointer; + display: flex; + align-items: center; +} + + +/* select list */ +.selectlist +{ + cursor: pointer; +} + +/* TextBox */ + +.textbox, .select +{ + border: 2px solid #dadada; + padding: 2px; +} + +.textbox:focus, .select:focus{ + outline: none; + border-color: #9ecaed; + box-shadow: 0 0 10px #9ecaed; +} + +.separator +{ +min-width: 5px; + display: inline-block; + background: rgba(82, 82, 82, 0.38); + box-shadow: inset 0 0 15px #ffffff; + /* background-image: linear-gradient( to top, #ffffff, #9f9f9f); */} + +.button-flat > img, .checkbutton > img, .radiolist-button > img, .colorpicker-button > img, .dropdown > img +{ + -webkit-transition: all 0.2s linear; + -o-transition: all 0.2s linear; + transition: all 0.2s linear; + vertical-align: middle; +} + +.dropdown-visible > img +{ + -webkit-filter: drop-shadow(0px 0px 8px #3b8de2); +} + + .dropdown-visible .badge +{ + -webkit-filter: drop-shadow(1px 1px 5px #3b8de2); +} + + +.range { + -webkit-appearance: none; + width: 100%; + height: 25px; + margin-bottom: 0px; + width: calc(100% - 5px); + background-color: rgba(0,0,0,0); +} +.range:focus { + outline: none; +} +.range::-webkit-slider-runnable-track { + width: 100%; + height: 12.1px; + cursor: pointer; + box-shadow: 0px 0px 0px rgba(95, 153, 86, 0.7), 0px 0px 0px rgba(107, 167, 98, 0.7); + background: rgba(192, 192, 192, 0.75); + border-radius: 12.7px; + border: 0px solid rgba(26, 93, 157, 0.35); +} +.range::-webkit-slider-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); + border: 4.4px solid rgba(115, 163, 255, 0.51); + height: 22px; + width: 23px; + border-radius: 28px; + background: rgba(101, 196, 255, 0.94); + cursor: pointer; + -webkit-appearance: none; + margin-top: -4.95px; +} +.range:focus::-webkit-slider-runnable-track { + background: rgba(210, 210, 210, 0.75); +} +.range::-moz-range-track { + width: 100%; + height: 12.1px; + cursor: pointer; + box-shadow: 0px 0px 0px rgba(95, 153, 86, 0.7), 0px 0px 0px rgba(107, 167, 98, 0.7); + background: rgba(192, 192, 192, 0.75); + border-radius: 12.7px; + border: 0px solid rgba(26, 93, 157, 0.35); +} +.range::-moz-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); + border: 4.4px solid rgba(115, 163, 255, 0.51); + height: 22px; + width: 23px; + border-radius: 28px; + background: rgba(101, 196, 255, 0.94); + cursor: pointer; +} +.range::-ms-track { + width: 100%; + height: 12.1px; + cursor: pointer; + background: transparent; + border-color: transparent; + color: transparent; +} +.range::-ms-fill-lower { + background: rgba(174, 174, 174, 0.75); + border: 0px solid rgba(26, 93, 157, 0.35); + border-radius: 25.4px; + box-shadow: 0px 0px 0px rgba(95, 153, 86, 0.7), 0px 0px 0px rgba(107, 167, 98, 0.7); +} +.range::-ms-fill-upper { + background: rgba(192, 192, 192, 0.75); + border: 0px solid rgba(26, 93, 157, 0.35); + border-radius: 25.4px; + box-shadow: 0px 0px 0px rgba(95, 153, 86, 0.7), 0px 0px 0px rgba(107, 167, 98, 0.7); +} +.range::-ms-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); + border: 4.4px solid rgba(115, 163, 255, 0.51); + height: 10px; + width: 10px; + border-radius: 28px; + background: rgba(101, 196, 255, 0.94); + cursor: pointer; +} +.range:focus::-ms-fill-lower { + background: rgba(192, 192, 192, 0.75); +} +.range:focus::-ms-fill-upper { + background: rgba(210, 210, 210, 0.75); +} + + + +.bar +{ + display: flex; +} + +.bar-slider +{ + width: 100%; + overflow: hidden; +} + +.bar-slider ul +{ + list-style: none; + padding: 0; + display: flex; + margin: 0; + height: 100%; +} + +.bar-slider ul li +{ + text-align: center; +} + +.bar-arrow-left +{ + width: 20px; + background-color: rgba(235, 240, 242, 0.69); + background-image: url(img/arrow-left.png); + background-size: contain; + background-repeat: no-repeat; + background-position: calc(100% / 2) calc(100% / 2); + cursor: pointer; + border: 1px solid #dadada; +} + +.bar-arrow-right +{ + width: 20px; + background-color: rgba(235, 240, 242, 0.69); + background-image: url(img/arrow-right.png); + + background-size: contain; + background-repeat: no-repeat; + background-position: calc(100% / 2) calc(100% / 2); + + cursor: pointer; + border: 1px solid #dadada; +} + +.bar-arrow-right:hover, .bar-arrow-left:hover +{ + background-color: #f3f3f3; +} + +.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 +{ + user-select: none; + /* background: linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%); */ + background-color: rgba(235, 240, 242, 0.69); + border: 1px solid #dcdcdc; + cursor: pointer; + color: #666666; + /* text-decoration: none; */ + /* font-size: 8px; */ + font-weight: normal; + text-align: center; + /* text-shadow: 0 2px rgba(0, 0, 0, 0.2); */ + /* box-shadow: inset 0 0 2px 2px rgba(255, 255, 255, 0.1), 0 2px rgba(0, 0, 0, 0.12); */ + padding: 4px 10px; + /* display: inline-block; */ + /* -webkit-font-smoothing: antialiased; */ + /* border-radius: 2px; */ + + color: black; +} + +.bar-item:hover +{ + background-color: rgba(255, 255, 255, 0.87);; +} + +.bar-item-checked +{ + + border-bottom: 3px solid #47abff; + box-shadow: #cecbcb 0 1px 10px 0 inset; +} + +.multiselect{ + display: flex; + flex-direction: column; +} + +.multiselect-wrap +{ + display: flex; +} + +.multiselect-autocomplete +{ + width: 100%; +} + +.multiselect-add +{ + background-color: #fff; + width: 27px; + border: 2px solid #dadada; + margin-top: 0; + + border-left: 0; + background-image: url(img/add.png); + + background-size: contain; + background-repeat: no-repeat; + background-position: calc(100% / 2) calc(100% / 2); + + cursor: pointer; +} + +html[dir='rtl'] .multiselect-add +{ + border-left: 2px solid #dadada; + border-right: 0; +} + +.multiselect-add:hover +{ + background-image: url(img/add-hover.png); +} + +.multiselect-list +{ + list-style: none; + padding: 0; + margin: 0; + border: 2px solid #dadada; + border-top: 0; + + overflow-y: auto; + overflow-x: hidden; + + height: 100%; +} + +.multiselect-list li +{ + display: flex; + border-bottom: 2px dotted #dadada; +} + +.multiselect-list-text +{ + padding-left: 3px; + width: 100%; +} + +.multiselect-list-remove +{ + margin-left: auto; + + background-color: #fff; + width: 27px; + border-left: 2px dotted #dadada; + margin-top: 0; + + + background-image: url(img/remove.png); + + background-size: contain; + background-repeat: no-repeat; + background-position: calc(100% / 2) calc(100% / 2); + cursor: pointer; + +} + +html[dir='rtl'] .multiselect-list-remove +{ + border-right: 2px dotted #dadada; + border-left: 0; +} + +.multiselect-list li:last-child +{ + border-bottom: 0; +} + +.multiselect-list-remove:hover +{ + background-image: url(img/remove-hover.png); +} + +.multiselect-list li:hover +{ + background: rgb(185, 223, 255); + box-shadow: #cecbcb 0 1px 10px 0 ; +} + +.grid +{ + width: 100%; + height: 100%; +} + +.grid > ul +{ + display: grid; + margin: 0; + padding: 1px 2px; + overflow-y: scroll; + height: 100%; +} + +.grid-window-over +{ + border: #e13946 dotted 3px; +} + +.grid-window-drag +{ + opacity: .8; + border: #75c6ff dotted 3px; +} + +.grid > ul > li +{ + margin: 1px; +} \ No newline at end of file diff --git a/css/night.css b/css/night.css new file mode 100644 index 0000000..0266e73 --- /dev/null +++ b/css/night.css @@ -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; +} \ No newline at end of file diff --git a/css/sea.css b/css/sea.css new file mode 100644 index 0000000..d0a8031 --- /dev/null +++ b/css/sea.css @@ -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; +} \ No newline at end of file diff --git a/css/sky.css b/css/sky.css new file mode 100644 index 0000000..988c7e8 --- /dev/null +++ b/css/sky.css @@ -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; + } \ No newline at end of file diff --git a/css/space.css b/css/space.css new file mode 100644 index 0000000..5ab4cbf --- /dev/null +++ b/css/space.css @@ -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; +} \ No newline at end of file diff --git a/css/stone.css b/css/stone.css new file mode 100644 index 0000000..dbe53e6 --- /dev/null +++ b/css/stone.css @@ -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; +} \ No newline at end of file diff --git a/css/volcano.css b/css/volcano.css new file mode 100644 index 0000000..988c7e8 --- /dev/null +++ b/css/volcano.css @@ -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; + } \ No newline at end of file diff --git a/img/add-hover.png b/img/add-hover.png new file mode 100644 index 0000000..8ec8c88 Binary files /dev/null and b/img/add-hover.png differ diff --git a/img/add.png b/img/add.png new file mode 100644 index 0000000..1c698b3 Binary files /dev/null and b/img/add.png differ diff --git a/img/arrow - Copy.png b/img/arrow - Copy.png new file mode 100644 index 0000000..66f6c8b Binary files /dev/null and b/img/arrow - Copy.png differ diff --git a/img/arrow-down-hover.png b/img/arrow-down-hover.png new file mode 100644 index 0000000..6963242 Binary files /dev/null and b/img/arrow-down-hover.png differ diff --git a/img/arrow-down.png b/img/arrow-down.png new file mode 100644 index 0000000..af4ce0a Binary files /dev/null and b/img/arrow-down.png differ diff --git a/img/arrow-left-inactive.png b/img/arrow-left-inactive.png new file mode 100644 index 0000000..7fad820 Binary files /dev/null and b/img/arrow-left-inactive.png differ diff --git a/img/arrow-left.png b/img/arrow-left.png new file mode 100644 index 0000000..a327511 Binary files /dev/null and b/img/arrow-left.png differ diff --git a/img/arrow-right-inactive.png b/img/arrow-right-inactive.png new file mode 100644 index 0000000..edf436f Binary files /dev/null and b/img/arrow-right-inactive.png differ diff --git a/img/arrow-right.png b/img/arrow-right.png new file mode 100644 index 0000000..6a8898e Binary files /dev/null and b/img/arrow-right.png differ diff --git a/img/arrow-up-hover.png b/img/arrow-up-hover.png new file mode 100644 index 0000000..87861f4 Binary files /dev/null and b/img/arrow-up-hover.png differ diff --git a/img/down-arrow-circle-hi.png b/img/down-arrow-circle-hi.png new file mode 100644 index 0000000..20cf998 Binary files /dev/null and b/img/down-arrow-circle-hi.png differ diff --git a/img/dropdown-arrow-down.png b/img/dropdown-arrow-down.png new file mode 100644 index 0000000..7274da2 Binary files /dev/null and b/img/dropdown-arrow-down.png differ diff --git a/img/dropdown-arrow-up.png b/img/dropdown-arrow-up.png new file mode 100644 index 0000000..3f74dc6 Binary files /dev/null and b/img/dropdown-arrow-up.png differ diff --git a/img/filter_16.png b/img/filter_16.png new file mode 100644 index 0000000..77f1ed3 Binary files /dev/null and b/img/filter_16.png differ diff --git a/img/icon.png b/img/icon.png new file mode 100644 index 0000000..8ada9c8 Binary files /dev/null and b/img/icon.png differ diff --git a/img/minus-hover.png b/img/minus-hover.png new file mode 100644 index 0000000..7e80b43 Binary files /dev/null and b/img/minus-hover.png differ diff --git a/img/minus.green.png b/img/minus.green.png new file mode 100644 index 0000000..ed34877 Binary files /dev/null and b/img/minus.green.png differ diff --git a/img/minus.png b/img/minus.png new file mode 100644 index 0000000..d95d587 Binary files /dev/null and b/img/minus.png differ diff --git a/img/plus-hover.png b/img/plus-hover.png new file mode 100644 index 0000000..8ec8c88 Binary files /dev/null and b/img/plus-hover.png differ diff --git a/img/plus.green.png b/img/plus.green.png new file mode 100644 index 0000000..ce7c80f Binary files /dev/null and b/img/plus.green.png differ diff --git a/img/plus.png b/img/plus.png new file mode 100644 index 0000000..1c698b3 Binary files /dev/null and b/img/plus.png differ diff --git a/img/remove-hover.png b/img/remove-hover.png new file mode 100644 index 0000000..7e80b43 Binary files /dev/null and b/img/remove-hover.png differ diff --git a/img/remove.png b/img/remove.png new file mode 100644 index 0000000..d95d587 Binary files /dev/null and b/img/remove.png differ diff --git a/img/ripple.gif b/img/ripple.gif new file mode 100644 index 0000000..2840de6 Binary files /dev/null and b/img/ripple.gif differ diff --git a/img/sort-down.png b/img/sort-down.png new file mode 100644 index 0000000..6a88aca Binary files /dev/null and b/img/sort-down.png differ diff --git a/img/sort-up.png b/img/sort-up.png new file mode 100644 index 0000000..a355df6 Binary files /dev/null and b/img/sort-up.png differ diff --git a/img/sort_16.png b/img/sort_16.png new file mode 100644 index 0000000..fdceaf6 Binary files /dev/null and b/img/sort_16.png differ diff --git a/img/sort_down_16.png b/img/sort_down_16.png new file mode 100644 index 0000000..ba0c558 Binary files /dev/null and b/img/sort_down_16.png differ diff --git a/img/sort_up_16.png b/img/sort_up_16.png new file mode 100644 index 0000000..d4692b2 Binary files /dev/null and b/img/sort_up_16.png differ diff --git a/mapkit/package-lock.json b/mapkit/package-lock.json new file mode 100644 index 0000000..b03b97e --- /dev/null +++ b/mapkit/package-lock.json @@ -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==" + } + } +} diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..59f0dbb --- /dev/null +++ b/package-lock.json @@ -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" + } + } + } +} diff --git a/src/Core/App.js b/src/Core/App.js new file mode 100644 index 0000000..4718183 --- /dev/null +++ b/src/Core/App.js @@ -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; + } + + + +}); \ No newline at end of file diff --git a/src/Core/Binding.js b/src/Core/Binding.js new file mode 100644 index 0000000..455dfc5 --- /dev/null +++ b/src/Core/Binding.js @@ -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; + } + } + +} \ No newline at end of file diff --git a/src/Core/IUI.js b/src/Core/IUI.js new file mode 100644 index 0000000..4349302 --- /dev/null +++ b/src/Core/IUI.js @@ -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); + + } +}); +*/ diff --git a/src/Core/IUIElement.js b/src/Core/IUIElement.js new file mode 100644 index 0000000..d617cff --- /dev/null +++ b/src/Core/IUIElement.js @@ -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; + } +} \ No newline at end of file diff --git a/src/Data/DataList.js b/src/Data/DataList.js new file mode 100644 index 0000000..265b1ea --- /dev/null +++ b/src/Data/DataList.js @@ -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"; + } +}); \ No newline at end of file diff --git a/src/Data/Field.js b/src/Data/Field.js new file mode 100644 index 0000000..d0c8097 --- /dev/null +++ b/src/Data/Field.js @@ -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 }; + } +}); \ No newline at end of file diff --git a/src/Data/Form.js b/src/Data/Form.js new file mode 100644 index 0000000..4e29e36 --- /dev/null +++ b/src/Data/Form.js @@ -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; + } + +}); \ No newline at end of file diff --git a/src/Data/Include.js b/src/Data/Include.js new file mode 100644 index 0000000..8bb40da --- /dev/null +++ b/src/Data/Include.js @@ -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; + } +}); \ No newline at end of file diff --git a/src/Data/Layout.js b/src/Data/Layout.js new file mode 100644 index 0000000..09c5fb8 --- /dev/null +++ b/src/Data/Layout.js @@ -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; + } +}); \ No newline at end of file diff --git a/src/Data/Repeat.js b/src/Data/Repeat.js new file mode 100644 index 0000000..982b0e5 --- /dev/null +++ b/src/Data/Repeat.js @@ -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; + } + +}); \ No newline at end of file diff --git a/src/Data/TableRow.js b/src/Data/TableRow.js new file mode 100644 index 0000000..10748ea --- /dev/null +++ b/src/Data/TableRow.js @@ -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"); + } +}); \ No newline at end of file diff --git a/src/Router/Link.js b/src/Router/Link.js new file mode 100644 index 0000000..c6a7d5a --- /dev/null +++ b/src/Router/Link.js @@ -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() + { + + } +}); \ No newline at end of file diff --git a/src/Router/Route.js b/src/Router/Route.js new file mode 100644 index 0000000..97a6b11 --- /dev/null +++ b/src/Router/Route.js @@ -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); } + +}); diff --git a/src/Router/Router.js b/src/Router/Router.js new file mode 100644 index 0000000..6b02bdf --- /dev/null +++ b/src/Router/Router.js @@ -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"); + } + +}); \ No newline at end of file diff --git a/src/Router/Target.js b/src/Router/Target.js new file mode 100644 index 0000000..b4c84a5 --- /dev/null +++ b/src/Router/Target.js @@ -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 }); + } +}); \ No newline at end of file diff --git a/src/UI/Background.js b/src/UI/Background.js new file mode 100644 index 0000000..48630d1 --- /dev/null +++ b/src/UI/Background.js @@ -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; + } +}); \ No newline at end of file diff --git a/src/UI/Button.js b/src/UI/Button.js new file mode 100644 index 0000000..1fef3fb --- /dev/null +++ b/src/UI/Button.js @@ -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); + } +}); \ No newline at end of file diff --git a/src/UI/Check.js b/src/UI/Check.js new file mode 100644 index 0000000..bccec3b --- /dev/null +++ b/src/UI/Check.js @@ -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; + } + +}); \ No newline at end of file diff --git a/src/UI/DateTimePicker.js b/src/UI/DateTimePicker.js new file mode 100644 index 0000000..cbdc26b --- /dev/null +++ b/src/UI/DateTimePicker.js @@ -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; + } +}); \ No newline at end of file diff --git a/src/UI/Dialog.js b/src/UI/Dialog.js new file mode 100644 index 0000000..7e91afa --- /dev/null +++ b/src/UI/Dialog.js @@ -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);}); \ No newline at end of file diff --git a/src/UI/DropDown.js b/src/UI/DropDown.js new file mode 100644 index 0000000..4c0e67e --- /dev/null +++ b/src/UI/DropDown.js @@ -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; + + } +}); \ No newline at end of file diff --git a/src/UI/Form.js b/src/UI/Form.js new file mode 100644 index 0000000..af49cd1 --- /dev/null +++ b/src/UI/Form.js @@ -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; + } +}); \ No newline at end of file diff --git a/src/UI/Grid.js b/src/UI/Grid.js new file mode 100644 index 0000000..dd5f2e6 --- /dev/null +++ b/src/UI/Grid.js @@ -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]); + } +}); \ No newline at end of file diff --git a/src/UI/Input.js b/src/UI/Input.js new file mode 100644 index 0000000..a2d3e9d --- /dev/null +++ b/src/UI/Input.js @@ -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(); + // } +}); \ No newline at end of file diff --git a/src/UI/Login.js b/src/UI/Login.js new file mode 100644 index 0000000..01e066d --- /dev/null +++ b/src/UI/Login.js @@ -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 = `
+ +
+
+ + + + + + +
+ + + +
+ +
+
+ +
+
`; + + 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 }); + // } + //} + + } +}); \ No newline at end of file diff --git a/src/UI/Menu.js b/src/UI/Menu.js new file mode 100644 index 0000000..3480536 --- /dev/null +++ b/src/UI/Menu.js @@ -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); +}); diff --git a/src/UI/Navbar.js b/src/UI/Navbar.js new file mode 100644 index 0000000..9a7c8e7 --- /dev/null +++ b/src/UI/Navbar.js @@ -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) => `${str}`); + 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 = ""; + + 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"); + } + }); + } +}); \ No newline at end of file diff --git a/src/UI/Range.js b/src/UI/Range.js new file mode 100644 index 0000000..f0b886f --- /dev/null +++ b/src/UI/Range.js @@ -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; + } +}); \ No newline at end of file diff --git a/src/UI/RoutesList.js b/src/UI/RoutesList.js new file mode 100644 index 0000000..6e0dc80 --- /dev/null +++ b/src/UI/RoutesList.js @@ -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 + } + } +}); \ No newline at end of file diff --git a/src/UI/Select.js b/src/UI/Select.js new file mode 100644 index 0000000..ed235a2 --- /dev/null +++ b/src/UI/Select.js @@ -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; + */ + } + +}); \ No newline at end of file diff --git a/src/UI/SelectList.js b/src/UI/SelectList.js new file mode 100644 index 0000000..afe863b --- /dev/null +++ b/src/UI/SelectList.js @@ -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; + } +}); \ No newline at end of file diff --git a/src/UI/Tab.js b/src/UI/Tab.js new file mode 100644 index 0000000..08d750c --- /dev/null +++ b/src/UI/Tab.js @@ -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"); + } +}); \ No newline at end of file diff --git a/src/UI/TabbedTarget.js b/src/UI/TabbedTarget.js new file mode 100644 index 0000000..33e01f2 --- /dev/null +++ b/src/UI/TabbedTarget.js @@ -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; + } + +}); \ No newline at end of file diff --git a/src/UI/Table.js b/src/UI/Table.js new file mode 100644 index 0000000..3d7d1c8 --- /dev/null +++ b/src/UI/Table.js @@ -0,0 +1,1422 @@ +import IUIElement from "../Core/IUIElement.js"; +import { IUI } from "../Core/IUI.js"; +import Layout from "../Data/Layout.js"; + +export default IUI.module(class Table extends IUIElement { + constructor() + { + super({ + indexer: (x) => x.instance?.id ?? x.id, + parents_getter: (x) => x.instance?.attributes.item("parents"), + children_getter: (x) => x.instance?.attributes.item("children"), + parents_changed: (x, p) => false, + _long_press_x: 0, + _long_press_y: 0, + updateOnModification: true, + last_query: () => true + }); + + var self = this; + + this.list = []; + + this._register("click"); + this._register("rowdblclick"); + this._register("contextmenu"); + this._register("expand"); + this._register("enter"); + this._register("leave"); + this._register("touch"); + + + //window.addEventListener("resize", function(e){ + // self.updateSize(); + //}); + + this._resizing = false; + this._resizeX = 0; + } + + get layout() + { + return this._layout; + } + + set layout(value) + { + this._layout = value; + + if (!this._created) + return; + + var self = this; + + this.header.innerHTML = ""; + + let row = this.header.insertRow(); + + for (var i = 0; i < value.length; i++) { + let column = value[i]; + let cell = row.insertCell(); + + + var width; + if (column.width && column.width.substring(column.width.length-1) == "%") + width = ((parseInt(column.width.substring(0, column.width.length - 1)) / 100) * this.clientWidth) + "px"; + else + width = column.width; + + cell.style.width = width; + //cell.setAttribute("data-width", column.width); + + let hWrap = document.createElement("div"); + hWrap.className = this.cssClass + "-header-wrap"; + + let resizer = document.createElement("div"); + resizer.className = this.cssClass + "-resizer"; + + resizer.addEventListener("mousedown", function(e) + { + self.updateSize(); + //corssbrowser mouse pointer values + self._resizeX = e.pageX || e.clientX + (document.documentElement.scrollLeft ? + document.documentElement.scrollLeft : + document.body.scrollLeft); + + self._resizingColumnWidth = cell.clientWidth; + self._resizingTableWidth = self.table.clientWidth; + self._resizing = true; + self._resizingColumn = cell;// self.headers.indexOf(cell); + document.onselectstart = function() {return false}; + }); + + + if (column.type && column.type == "search") + { + let input = document.createElement("input"); + input.type = "search"; + input.className = this.cssClass + "-header-input"; + input.placeholder = column.name; + input.id = self.id + "_" + column.field; + + input.addEventListener("keyup", function() { + self.search(column, input.value); + }); + + hWrap.appendChild(input); + + } + else if (column.type && column.type == "select") + { + // filter out list + column.filter = []; + + let select = document.createElement("div"); + select.id = self.id + "_" + column.field; + select.className = self.cssClass + "-header-select"; + select.innerHTML = column.name; + select.setAttribute("data-dir", "normal"); + + var menu = document.createElement("div"); + menu.className = self.cssClass + "-header-menu"; + + select.addEventListener("click", function(e) + { + if (select.getAttribute("data-dir") == "down") + self.sort(column, true); + else + self.sort(column, false); + }); + + var tip = document.createElement("div"); + tip.className = self.cssClass + "-filter-menu"; + menu.appendChild(tip); + + menu.addEventListener("click", function(evt){ + if (evt.target != menu) + return; + + if (tip.style.display == "none") + { + var items = self.list.distinct(column.field); + tip.innerHTML = ""; + + var filters = []; + + for(var i = 0; i < items.length; i++) + { + var item = items[i]; + var fc = document.createElement("input"); + fc.type = "checkbox"; + fc.checked = column.filter.indexOf(item) > -1 ? false : true; + // add to filters list + filters.push({el: fc, text: item}); + // add to field.filter to be rendered by the grid + fc.addEventListener("click", function(){ + column.filter = []; + filters.forEach(function(filter) + { + if (!filter.checked) + column.filter.push(filter.text); + }); + + self._applyFilter(); + }); + + var fi = document.createElement("label"); + fi.className = self.cssClass + "-filter-menu-item"; + fi.innerHTML = column.formatter ? column.formatter(item, fi) : item; + tip.appendChild(fc); + tip.appendChild(fi); + tip.appendChild(document.createElement("br")); + } + + tip.style.display = "block"; + } + else + { + tip.style.display = "none"; + } + }); + + + hWrap.appendChild(select); + hWrap.appendChild(menu); + + } + else + { + let text = document.createElement("div"); + text.className = self.cssClass + "-header-text"; + text.innerHTML = column.name; + text.setAttribute("data-dir", "normal"); + + //var sort = ne("div"); + //sort.className = "grid-header-sort"; + + hWrap.appendChild(text); + //hWrap.appendChild(resizer); + //hWrap.appendChild(sort); + + text.addEventListener("click", function(e) + { + if (text.getAttribute("data-dir") == "down") + self.sort(column, true); + else + self.sort(column, false); + }); + } + + hWrap.appendChild(resizer); + cell.appendChild(hWrap); + } + } + + + create() { + let self = this; + + // get layout + this._layout = Layout.get(this, "td", true); + + this.table = document.createElement("table"); + this.table.className = this.cssClass + "-body"; + this.appendChild(this.table); + + this.body = this.table.createTBody(); + this.header = this.table.createTHead(); + this.header.className = this.cssClass + "-header"; + + this.body.addEventListener("mousedown", function(e){ + if (self.multiselect) + { + self._boxStartX = e.pageX; + self._boxStartY = e.pageY; + self._multiselecting = true; + self.selectBox.classList.add(self.cssClass + "-select-box-visible"); + } + }); + + this.selectBox = document.createElement("div"); + this.selectBox.className = this.cssClass + "-select-box"; + this.appendChild(this.selectBox); + + this.body.addEventListener("mousemove", function(e){ + + if (self._multiselecting || self._multideselecting) + { + self._boxEndX = e.pageX; + self._boxEndY = e.pageY; + + if (e.movementY > 0) + { + self._multiselecting = true; + self._multideselecting = false; + } + else if (e.movementY < 0) + { + self._multiselecting = false; + self._multideselecting = true; + } + + + if (self._boxEndX > self._boxStartX) + { + self.selectBox.style.left = self._boxStartX + "px"; + self.selectBox.style.width = (self._boxEndX - self._boxStartX) + "px"; + } + else + { + self.selectBox.style.left = self._boxEndX + "px"; + self.selectBox.style.width = (self._boxStartX - self._boxEndX) + "px"; + } + + if (self._boxEndY > self._boxStartY) + { + self.selectBox.style.top = self._boxStartY + "px"; + self.selectBox.style.height = (self._boxEndY - self._boxStartY) + "px"; + } + else + { + self.selectBox.style.top = self._boxEndY + "px"; + self.selectBox.style.height = (self._boxStartY - self._boxEndY) + "px"; + } + + // now lets look for all rows within this range + var rect = self.body.getBoundingClientRect(); + var offset = { + top: rect.top + document.body.scrollTop, + left: rect.left + document.body.scrollLeft + }; + + var by, sy; + + if (self._boxStartY > self._boxEndY) + { + by = self._boxStartY - offset.top; + sy = self._boxEndY - offset.top; + } + else + { + by = self._boxEndY - offset.top; + sy = self._boxStartY - offset.top; + } + + + var selected = []; + + for(var i = 0; i < self.body.rows.length; i++) + { + var top = self.body.rows[i].offsetTop; + var bottom = top + self.body.rows[i].offsetHeight; + + if ((top > sy || bottom > sy) && (top < by || bottom < by)) + { + selected.push(self.body.rows[i]); + self.body.rows[i].classList.add(self.cssClass + "-row-selected"); + } + else + { + self.body.rows[i].classList.remove(self.cssClass + "-row-selected"); + } + } + + for(var i = 0; i < selected.length; i++) + self._selectChildren(selected[i], true); + } + }); + + document.body.addEventListener("mouseup", function(e){ + + if (self._multiselecting || self._multideselecting) + { + self._multiselecting = false; + self._multideselecting = false; + self.selectBox.classList.remove(self.cssClass + "-select-box-visible"); + self.selectBox.style.width = "0px"; + self.selectBox.style.height = "0px"; + } + }); + + + document.addEventListener('mouseup', function () { + self._resizing = false; + document.onselectstart = function() {return true}; + + }); + + document.addEventListener('mousemove', function (e) { + if (self._resizing) { + 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); + + var col = self._resizingColumn; + + var tw,cw; + + if (document.dir == "rtl") + { + tw = (self._resizingTableWidth - (x - self._resizeX)); + cw = (self._resizingColumnWidth - (x - self._resizeX)); + } + else + { + tw = (self._resizingTableWidth + (x - self._resizeX)); + cw = (self._resizingColumnWidth + (x - self._resizeX)); + } + + + // must have limits + if (cw > 20) + { + /* + tw = 0; + for(var i = 0; i < self.headers.length; i++) + { + if (i != self.resizingColumn) + tw += self.headers[i].clientWidth; + //self.headers[self.resizingColumn]; + } + */ + //tw += cw; + self.header.style.width = tw + "px"; + self.table.style.width = tw + "px"; + + col.style.width = cw + "px"; + //dummy.style.width = cw + "px";// col.style.width; + + + } + } + }); + + // load data + //if (this.data) + // this.load(this.data); + + //this.updateSize(); + + this._created = true; + + if (this._layout) + this.layout = this._layout; + } + + + updateSize() + { + let totalWidth = 0; + + for (var i = 0; i < this.table.tHead.rows[0].cells.length; i++) + { + var header = this.table.tHead.rows[0].cells[i]; + var width = header.clientWidth + "px"; + + if (width == "0px") + { + width = this.headers[i].getAttribute("data-width"); + if (width.substring(width.length-1) == "%") + width = ((parseInt(width.substring(0, width.length - 1)) / 100) * this.clientWidth) + "px"; + } + + if (header.style.display != "none") + totalWidth+=parseInt(width.substr(0, width.length-2)); + + header.style.width = width; + } + + if (this.clientWidth > 0) + { + this.body.style.width = this.table.tHead.clientWidth + "px"; + this.table.tHead.style.width = this.table.tHead.clientWidth + "px"; + } + else + { + this.table.style.width = totalWidth + "px"; + } + } + + sort(column, desc) + { + + + if (this.tree) + return; + + //let column = this.layout[columnIndex]; + + if (column.sorter) + { + this.list.sort(column.sorter); + } + else + { + this.list.sort(function(a, b){ + if (typeof a[column.field] == "number" || a[column.field] instanceof Date) + return a[column.field] - b[column.field]; + else + return a[column.field].toString().localeCompare(b[column.field]); + + }); + } + + if (desc) + this.list.reverse(); + + for(var i = 0; i < this.list.length; i++) + { + var tr = this.getRows(this.indexer(this.list[i]))[0]; + this.body.insertAdjacentElement("beforeEnd", tr); + } + + for(var i = 0; i < this.layout.length; i++) + { + let th = this.table.tHead.rows[0].cells[i]; + let txt = th.getElementsByClassName(this.cssClass + "-header-text")[0]; + + if (column !== this.layout[i]) + txt.setAttribute("data-dir", "normal"); + else if (desc) + txt.setAttribute("data-dir", "up"); + else + txt.setAttribute("data-dir", "down"); + } + } + + + setRowVisible(row, visible) + { + var level = parseInt(row.getAttribute("data-level")); + + if (visible) + { + row.classList.remove(this.cssClass + "-row-hidden"); + row.classList.remove(this.cssClass + "-row-selected"); + + // make sure parent is visible + for(var i = row.rowIndex - 2; i >= 0; i--) + { + var lev = parseInt(this.body.rows[i].getAttribute("data-level")); + if (lev > level) + break; + else if (lev < level) + { + this.setRowVisible(this.body.rows[i], true); + break; + } + } + } + else + { + row.classList.add(this.cssClass + "-row-hidden"); + // make sure children are visible + for(var i = row.rowIndex; i < this.body.rows.length; i++) + { + var lev = parseInt(this.body.rows[i].getAttribute("data-level")); + if (lev <= level) + break; + this.body.rows[i].classList.add(this.cssClass + "-row-hidden"); + } + } + } + + expand(row, visible) + { + var button = row.getElementsByClassName(this.cssClass + "-tree")[0]; + button.setAttribute("data-expand", visible ? 1 : 0); + var level = parseInt(row.getAttribute("data-level")); + + for(var i = row.rowIndex; i < this.body.rows.length; i++) + { + var lev = parseInt(this.body.rows[i].getAttribute("data-level")); + if (lev <= level) + break; + + if (!visible) + { + button = this.body.rows[i].getElementsByClassName(this.cssClass + "-tree"); + if (button.length > 0) + button[0].setAttribute("data-expand", 0); + this.body.rows[i].classList.add(this.cssClass + "-row-hidden"); + } + else if (lev == level + 1) + this.body.rows[i].classList.remove(this.cssClass + "-row-hidden"); + } + + //this.updateSize(); + }; + + + filter(queryFunction) + { + if (queryFunction) + { + this.last_query = queryFunction; + + for(var i = 0; i < this.body.rows.length; i++) + { + var item = this.get(parseInt(this.body.rows[i].getAttribute("data-id"))); + var visible = queryFunction(item); + this.setRowVisible(this.body.rows[i], visible); + } + } + // restore default view + else + { + this.last_query = function(){return true}; + + // view all + for(var i = 0; i < this.body.rows.length; i++) + this.body.rows[i].classList.remove(this.cssClass + "-row-hidden"); + + // hide non-expanded + for(var i = 0; i < this.body.rows.length; i++) + { + var row = this.body.rows[i]; + var level = parseInt(row.getAttribute("data-level")); + var button = row.getElementsByClassName(this.cssClass + "-tree"); + if (button.length > 0) + { + // hide ? + if (button[0].getAttribute("data-expand") == '0') + { + for(i = i + 1; i < this.body.rows.length; i++) + { + var subRow = this.body.rows[i]; + var l = parseInt(subRow.getAttribute("data-level")); + if (l > level) + subRow.classList.add(this.cssClass + "-row-hidden"); + else + { + i--; + break; + } + } + } + } + } + } + } + + _selectChildren(row, value) + { + var level = parseInt(row.getAttribute("data-level")); + + for(var i = row.rowIndex; i < this.body.rows.length; i++) + { + var subRow = this.body.rows[i]; + var l = parseInt(subRow.getAttribute("data-level")); + if (l > level) + { + if (value) + subRow.classList.add(this.cssClass + "-row-selected"); + else + subRow.classList.remove(this.cssClass + "-row-selected"); + } + else + { + break; + } + } + } + + _select(row, item, multiple = false, context = false) + { + if (this.multiselect) + { + + var checked = row.classList.contains(this.cssClass + "-row-selected"); + + // implement Microsoft Windows Explorer behaivor + if (context) + { + multiple = checked || multiple; + checked = !checked; + } + + if (multiple) + { + var rows = this.getRows(this.indexer(item)); + + if (checked) + for(var i = 0; i < rows.length; i++) + { + rows[i].classList.remove(this.cssClass + "-row-selected"); + this._selectChildren(rows[i], false); + } + else + for(var i = 0; i < rows.length; i++) + { + rows[i].classList.add(this.cssClass + "-row-selected"); + this._selectChildren(rows[i], true); + } + } + else + { + for(var i = 0; i < this.body.rows.length; i++) + this.body.rows[i].classList.remove(this.cssClass + "-row-selected"); + + row.classList.add(this.cssClass + "-row-selected"); + this._selectChildren(row, true); + } + } + else + { + for(var i = 0; i < this.body.rows.length; i++) + if (this.body.rows[i] == row) + row.classList.add(this.cssClass + "-row-selected"); + else + this.body.rows[i].classList.remove(this.cssClass + "-row-selected"); + this._selected = item; + } + } + + get selected() + { + if (this.multiselect) + { + var rt = []; + for(var i = 0; i < this.body.rows.length; i++) + { + if (this.body.rows[i].classList.contains(this.cssClass + "-row-selected")) + { + var item = this.get(this.body.rows[i].getAttribute("data-id")); + if (rt.indexOf(item) < 0) + rt.push(item); + } + } + + return rt; + } + else + return this._selected; + } + + _applyFilter() + { + for(var i = 0; i < this.list.length; i++) + { + var item = this.list[i]; + el = document.getElementById(this.id + "_" + this.indexer(item), this.body); + + // visible by default + el.style.display = ""; + + for(var j = 0; j < this.layout.length; j++) + { + var column = this.layout[j]; + if (column.filter) + column.filter.forEach(function(filter) + { + if (item[column.field] == filter) + { + // hide this one + el.style.display = "none"; + } + }); + } + } + }; + + get(id) + { + for(var i = 0; i < this.list.length; i++) + if (this.indexer(this.list[i]) == id) + return this.list[i]; + } + + + setColumnVisible(index, visible) + { + var display = visible ? "table-cell" : "none"; + var columnWidth = this.headers[index].clientWidth; + + for(var i = 0; i < this.table.rows.length; i++) + this.table.rows[i].cells[index].style.display = display; + + this.headers[index].style.display = display; + + // shrink the table + if (display == "none") + { + //this.header.width = (this.header.clientWidth - columnWidth) + "px"; + } + + //this.updateSize(); + } + + containsAny(items) + { + if (items == null) + return false; + + for(var i = 0; i < items.length; i++) + { + if (this.list.indexOf(items[i]) > -1) + return true; + } + + return false; + } + + + _createTreeButton(row, dynamicLoading, item) + { + var self = this; + var button = document.createElement("div"); + button.className = this.cssClass + "-tree"; + + button.setAttribute("data-expand", dynamicLoading ? 2 : 0); + button.addEventListener("click", function(){ + + var eState = this.getAttribute("data-expand"); + + if (eState == '2') + { + var ev = { + button: button, + item: item, + row: row, + table: self, + success: function() + { + self.expand(this.button.parentNode.parentNode, 1); + }, + failure: function(errorMsg) + { + this.setAttribute("data-expand", 2); + } + }; + + this.setAttribute("data-expand", 3); + + // raise event + self._emit("expand", ev); + } + else if (eState == "0") + { + self.expand(this.parentNode.parentNode, true); + } + else if (eState == "1") + { + self.expand(this.parentNode.parentNode, false); + } + }); + + row.cells[0].insertAdjacentElement("afterbegin", button); + } + + add(item, dynamicLoading)//fast) + { + + this.list.push(item); + + var self = this; + var parents = this.parents_getter(item); + var newRow; + + if (this.containsAny(parents)) + { + for(var i = 0; i < parents.length; i++) + { + var parent = parents[i]; + var inListParents = this.getRows(this.indexer(parent)); + + for(var j = 0; j < inListParents.length; j++) + { + var parentRow = inListParents[j]; + // add expand button to parent + var treeButton = parentRow.getElementsByClassName(this.cssClass + "-tree", parentRow); + + if (treeButton.length == 0) + { + this._createTreeButton(parentRow); + newRow = this._addRow(item, parseInt(parentRow.getAttribute("data-level")) + 1, false, parentRow.rowIndex); + } + else + { + newRow = this._addRow(item, parseInt(parentRow.getAttribute("data-level")) + 1, treeButton[0].getAttribute("data-expand") == '1', parentRow.rowIndex); + } + } + + // perhaps parent row depends on children + this.update(parent); + } + } + else + { + newRow = this._addRow(item, 0, true); + } + + if (dynamicLoading) + this._createTreeButton(newRow, true, item); + + if (item.on) + if (this.updateOnModification) + item.on("modified", function(propertyName){ + //console.log("render", propertyName, item); + self.update(item, propertyName); + }); + + + //if (!fast) + + // self.layout.forEach(function(field){ + // if (field.type && field.type == "select") + //{ + // calculate distinct + //} + //}); + //this.updateSize(); + + return self; + } + + _findIndexes(propertyIndex) + { + var rt = []; + for(var i = 0; i < this.layout.length; i++) + { + if (this.layout[i].field == propertyIndex || this.layout[i].field == "_any") + rt.push(i); + } + return rt; + }; + + _addRow(item, level, visible, index) + { + var self = this; + // add item + var tr = self.body.insertRow(index); + tr.setAttribute("data-id", this.indexer(item)); + tr.setAttribute("data-level", level); + if (visible) + tr.className = this.cssClass + "-row"; + else + tr.className = this.cssClass + "-row " + this.cssClass + "-row-hidden"; + + + for(var i = 0; i < this.layout.length; i++) + { + let column = this.layout[i]; + + let cl = column.node.cloneNode(true);// tr.insertCell(); + + this._make_bindings(cl) + tr.appendChild(cl); + + if (cl.dataMap != null) + cl.dataMap.render(item).then(() => self._renderElement(cl, cl.data)); + else { + cl.data = item; + this._renderElement(cl, cl.data); + } + //if (column.formatter) + //{ + // var rt = column.formatter(item[column.field], item, cl); + // if (rt instanceof Element) + // { + // cl.appendChild(rt); + // } + // else + // cl.innerHTML=rt; + //} + //else + // cl.innerHTML=item[column.field]; + + cl.style.display = this.table.tHead.rows[0].cells[i].style.display; + + } + + tr.addEventListener("click", function(e) + { + self._select(tr, item, e.ctrlKey); + self._emit("click", { data: item, row: tr, event: e }); + }); + + tr.addEventListener("dblclick", function(e) + { + self._select(tr, item, e.ctrlKey); + self._emit("rowdblclick", { data: item, row: tr, event: e }); + }); + + tr.addEventListener("contextmenu", function(e) + { + self._select(tr, item, e.ctrlKey, true); + self._emit("contextmenu", { data: item, row: tr, event: e }); + }); + + tr.addEventListener("mouseleave", function(e){ + //if (self._multideselecting) + // tr.classList.remove(self.cssClass + "-row-selected"); + + self._emit("leave", { data: item, row: tr, event: e }); + }); + + tr.addEventListener("mouseenter", function(e){ + //if (self._multiselecting) + // tr.classList.add(self.cssClass + "-row-selected"); + //self._select(tr, item, true); + + self._emit("enter", { data: item, row: tr, event: e }); + }); + + tr.addEventListener("touchstart", function(e){ + + self._tx = e.touches[0].clientX; + self._ty = e.touches[0].clientY; + + self._long_press_item = item; + self._long_press_x = e.touches[0].clientX; + self._long_press_y = e.touches[0].clientY; + if (self._long_press_timeout) + clearTimeout(self._long_press_timeout); + self._long_press_timeout = setTimeout(function(){ + if (self._long_press_item) + { + self._select(tr, self._long_press_item); + self._emit("contextmenu", { data: self._long_press_item, event: e, row: tr }); + self._long_press_timeout = null; + self._long_press_item = null; + } + }, 600); + }); + + this.addEventListener("touchmove", function(e){ + + if (Math.abs(e.touches[0].clientX - self._long_press_x) > 10 || Math.abs(e.touches[0].clientY - self._long_press_y) > 10) + { + self._long_press_item = null; + } + }); + + tr.addEventListener("touchend", function(e){ + + var tx = e.changedTouches[0].clientX; + var ty = e.changedTouches[0].clientY; + + if (Math.abs(tx - self._tx) < 10 && Math.abs(ty - self._ty) < 10 ) + { + self._select(tr, item); + self._emit("touch", { data: item, event: e , row: tr}); + } + + if (self._long_press_timeout) + clearTimeout(self._long_press_timeout); + else + e.preventDefault(); + + self._long_press_item = null; + self._long_press_timeout = null; + }); + + return tr; + }; + + get(id) + { + for(var i = 0; i < this.list.length; i++) + if (this.indexer(this.list[i]) == id) + return this.list[i]; + return null; + } + + getRows(id) + { + var rt = []; + for(var i = 0; i < this.body.rows.length; i++) + if (this.body.rows[i].getAttribute("data-id") == id) + rt.push(this.body.rows[i]); + return rt; + } + + toJSON(level) + { + //if (!level) + // level = 3; + + var headers = ["#"]; + var list = []; + + // make header + for(var i = 0; i < this.layout.length; i++) + if (!( this.layout[i].noPrint || this.layout[i].noExport) && this.headers[i].style.display !="none") + { + headers.push( this.layout[i].name); + } + + var index = 1; + + // build table + for(var i = 0; i < this.body.rows.length; i++) + { + var row = this.body.rows[i]; + var rowLevel = parseInt(row.getAttribute("data-level")); + + if (level) + { + if (rowLevel > level) + continue; + } + else if (row.classList.contains(this.cssClass + "-row-hidden")) + { + continue; + } + + var item = [rowLevel, index++]; + for(var j = 0; j < this.layout.length; j++) + if (!( this.layout[j].noPrint || this.layout[j].noExport) && this.headers[j].style.display !="none") + { + var text = ""; + for(var k = 0; k < row.cells[j].childNodes.length; k++) + if (row.cells[j].childNodes[k].nodeType == 3) + { + text = row.cells[j].childNodes[k].data; + break; + } + + item.push(text);//row.cells[j].innerHTML); + } + list.push(item); + } + + return {headers: headers, data: list}; + } + + toTable(level){ + // create table + var tbl = document.createElement("table"); + var header = tbl.createTHead(); + var body = tbl.createTBody(); + + var tr = header.insertRow(); + + // make header + for(var i = 0; i < this.layout.length; i++) + if (!this.layout[i].noPrint && this.headers[i].style.display !="none") + { + var th = tr.insertCell(); + th.innerHTML = this.layout[i].name; + } + + // build table + for(var i = 0; i < this.body.rows.length; i++) + { + var row = this.body.rows[i]; + if (level) + { + if (parseInt(row.getAttribute("data-level")) > level) + continue; + } + else if (row.classList.contains(this.cssClass + "-row-hidden")) + { + continue; + } + + tr = body.insertRow(); + tr.classList.add("level-" + (parseInt(row.getAttribute("data-level"))+1)); + + for(var j = 0; j < this.layout.length; j++) + if (!this.layout[j].noPrint && this.headers[j].style.display !="none") + { + var td = tr.insertCell(); + td.innerHTML = row.cells[j].innerHTML; + } + } + + return tbl; + }; + + _removeRow(row) + { + var level = parseInt(row.getAttribute("data-level")); + var nextIndex = row.rowIndex; // zero-indexed (dummy header included, so it's 1-indexed') + // remove all children + while(nextIndex < this.body.rows.length){ + var r = this.body.rows[nextIndex]; + var l = parseInt(r.getAttribute("data-level")); + if (l <= level) + break; + this.body.rows.deleteRow(nextIndex++); + } + + // get parent row + var parentRow = this._getParentRow(row); + // remove row itself + this.body.deleteRow(row.rowIndex-1); + // remove expand button from parent if it has no more children + if (parentRow) + { + // last item ? means has no children + if (parentRow.rowIndex == this.body.rows.length + || parseInt(this.body.rows[parentRow.rowIndex].getAttribute("data-level")) <= parseInt(parentRow.getAttribute("data-level"))) + { + // remove expand button + var button = parentRow.getElementsByClassName(this.cssClass + "-tree"); + if (button.length > 0) + button[0].parentNode.removeChild(button[0]); + } + + // render parent (in case formatter depends on children) + //var parent = this.get(parseInt(parentRow.getAttribute("data-id"))); + //this._renderRow(parentRow, parent); + } + } + + _getById(id) + { + for(var i = 0; i < this.list.length; i++) + if (this.indexer(this.list[i]) == id) + return this.list[i]; + + return null;// this; + } + + remove(item) + { + if (typeof item == "string" || typeof item == "number") + item = this._getById(item); + + if (item == null) + return; + + var rows = this.getRows(this.indexer(item)); + // remove all occurrences + for(var i = 0; i < rows.length; i++) + this._removeRow(rows[i]); + + var i = this.list.indexOf(item); + this.list.splice(i, 1); + + return this; + } + + clear() + { + while(this.body.rows.length > 0) + this.body.deleteRow(0); + + this.list = []; + + return this; + } + + + //_renderRow(row, item, propertyName) + //{ + // if (propertyName) + // { + // var indexes = this._findIndexes(propertyName); + + // for(var i = 0; i < indexes.length; i++) + // { + // var expand = null; + // if (indexes[i] == 0) + // { + // expand = row.cells[0].getElementsByClassName(this.cssClass + "-tree"); + // expand = expand.length > 0 ? expand[0] : null; + // } + + // if (this.layout[indexes[i]].formatter) + // { + // var rt = this.layout[indexes[i]].formatter(item[propertyName], item, row.cells[indexes[i]]); + + // if (rt == null) + // { + // // do nothing + // expand = false; + // } + // else if (rt instanceof Element) + // { + // row.cells[indexes[i]].innerHTML = ""; + // row.cells[indexes[i]].appendChild(rt); + // } + // else + // row.cells[indexes[i]].innerHTML=rt; + // } + // else + // row.cells[indexes[i]].innerHTML=item[propertyName]; + + // if (expand) + // row.cells[0].insertAdjacentElement("afterbegin", expand); + // } + // } + // else + // { + // var expand = row.cells[0].getElementsByClassName(this.cssClass + "-tree"); + // expand = expand.length > 0 ? expand[0] : null; + + // for(var i = 0; i < this.layout.length; i++) + // { + // var column = this.layout[i]; + // if (column.formatter) + // { + // var rt = column.formatter(item[column.field], item, row.cells[i]); + // if (rt instanceof Element) + // { + // row.cells[i].innerHTML = ""; + // row.cells[i].appendChild(rt); + // } + // else + // row.cells[i].innerHTML=rt; + // } + // else + // row.cells[i].innerHTML=item[column.field]; + // } + + // if (expand) + // row.cells[0].insertAdjacentElement("afterbegin", expand); + // } + //} + + _getParentRow(row) + { + var level = parseInt(row.getAttribute("data-level")); + for(var i = row.rowIndex - 2; i >= 0; i--) + { + if (parseInt(this.body.rows[i].getAttribute("data-level")) < level) + return this.body.rows[i]; + } + } + + _renderItem(item, propertyName = null) + { + var rows = this.getRows(this.indexer(item)); + var removedRows = []; + + var self = this; + + var parentsChanged = this.parents_changed(item, propertyName); + + if (propertyName == null || parentsChanged) + { + var notModifiedParents = []; + + // remove from parents + var parents = this.parents_getter(item); + + for(var i = 0; i < rows.length; i++) + { + var row = rows[i]; + var level = parseInt(row.getAttribute("data-level")); + // get parent row + var parentRow = this._getParentRow(row); + if (parentRow) + { + // parent found + var parent = this.get(parseInt(parentRow.getAttribute("data-id"))); + if (parents == null || parents.indexOf(parent) == -1) + { + // remove this node + this._removeRow(row); + removedRows.push(row); + } + else + notModifiedParents.push(parent); + } + } + + // add to new parents + if (parents != null) + { + for(var i = 0; i < parents.length; i++) + { + var parent = parents[i]; + if (notModifiedParents.indexOf(parent) == -1 && this.list.indexOf(parent) > -1) + { + // add new row + var inListParents = this.getRows(this.indexer(parent)); + + for(var j = 0; j < inListParents.length; j++) + { + var parentRow = inListParents[j]; + var treeButton = parentRow.getElementsByClassName(this.cssClass + "-tree", parentRow); + if (treeButton.length == 0) + { + this._createTreeButton(parentRow); + this._addRow(item, parseInt(parentRow.getAttribute("data-level")) + 1, false, parentRow.rowIndex); + } + else + { + this._addRow(item, parseInt(parentRow.getAttribute("data-level")) + 1, treeButton[0].getAttribute("data-expand") == '1', parentRow.rowIndex); + } + } + } + } + } + } + else + { + // render parent (in case formatter depends on children) + //for(var i = 0; i < rows.length; i++) + //{ + // var parentRow = this._getParentRow(rows[i]); + // if (parentRow) + // { + // var parent = this.get(parseInt(parentRow.getAttribute("data-id"))); + // this._renderRow(parentRow, parent, propertyName); + // } + //} + } + + // render the non-removed rows. + //for(var i = 0; i < rows.length; i++) + // if (removedRows.indexOf(rows[i]) == -1) + // this._renderRow(rows[i], item, propertyName); + } + + update(item, propertyName) + { + if (item) + this._renderItem(item, propertyName); + else + { + for(var i = 0; i < this.list.length; i++) + this._renderItem(this.list[i]); + } + + return this; + } + + + + async setData(value) + { + await super.setData(value); + + this.clear(); + + if (this.tree) + { + var self = this; + var loadFunction = function(items, level) + { + for(var i = 0; i < items.length; i++) + { + var item = items[i]; + self.list.push(item); + + var row = self._addRow(item, level, level==0); + if (item.children && item.children.length > 0) + { + self._createTreeButton(row); + // load children + loadFunction(item.children, level+1); + } + } + } + + // recursively load items + loadFunction(value, 0); + } + else + { + for (var i = 0; i < value.length; i++) + this.add(value[i]); + } + } +}); \ No newline at end of file diff --git a/src/UI/Tabs.js b/src/UI/Tabs.js new file mode 100644 index 0000000..8df79d3 --- /dev/null +++ b/src/UI/Tabs.js @@ -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; + } + +}); \ No newline at end of file diff --git a/src/UI/Window.js b/src/UI/Window.js new file mode 100644 index 0000000..116eac2 --- /dev/null +++ b/src/UI/Window.js @@ -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); + }); + } +}); +*/ diff --git a/src/iui.js b/src/iui.js new file mode 100644 index 0000000..8cc855e --- /dev/null +++ b/src/iui.js @@ -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; \ No newline at end of file diff --git a/test/esiur.html b/test/esiur.html new file mode 100644 index 0000000..d40030e --- /dev/null +++ b/test/esiur.html @@ -0,0 +1,127 @@ + + + + + IUI 2.0 + + + + + + + + + +
+ +
+ Users + Add User + Rooms + Add Room +
+ + + + + + Hello + + + + Phone + PIN + + + + + + + + + + +
Showing: ${d.length}
+ + + + + + + + + + + + +
#${this.start + parseInt(index)}${d.Username}${d.Tel}${d.Email}${d.Online > 0 ? 'Online' : 'Offline'}${d.Permissions}${d.Picture}Edit (${d.Username})
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Username:${d.Username}
Tel:${d.Tel}
Email:${d.Email}
Online:${d.Online}
Permissions${d.Permissions}
Picture:${d.Picture}
+ + + + + + + +
+ + + \ No newline at end of file diff --git a/test/index.html b/test/index.html new file mode 100644 index 0000000..84d3967 --- /dev/null +++ b/test/index.html @@ -0,0 +1,322 @@ + + + + + GO Command & Control 1.0 + + + + + +
+ + +
+ +
hi
+
hi
+
hi
+
hi
+
hi
+ + + Drop Down +
+Hi world +
+ + + + Drop Up +
+Hi world +
+ + + + +
+
+
+
+ + + + Hello + + +
+ +
+ +
+ + + Table + + + + + + + + + + + + + Autocomplete + + + + + + Select + + + + + + + +
  • First thing
    • +
  • Second thing
    • +
  • Third thing
    • +     +
    + +
    +
    +
    +
      +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    • + +
      • + +
    +
    +
    + +
    + + + + + + +
    + +
    +
    + +
    + + + + + +
    + + + + + + +
    Username:
    Password:
    + +
    +
    + Login + Cancel +
    +     + + + + Hello World + + + \ No newline at end of file diff --git a/test/index1.html b/test/index1.html new file mode 100644 index 0000000..4c01f67 --- /dev/null +++ b/test/index1.html @@ -0,0 +1,293 @@ + + + + + GO Command & Control 1.0 + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + + +
    +
    +
    hi
    +
    hi
    +
    hi
    +
    hi
    +
    hi
    +
    +
    + Hello +
    +Hi world +
    +
    + +
    + +
    +
    +
    +
    +
    + +
    + Hello +
    + +
    + +
    + +
    +
    +
    Tab 1
    +
    Tab 2
    +
    Tab 3
    + +
    +
    +
    +
    +
    +
    +
      +
    • Hi
      • +
    • Hi 2
      • +
    • Hi 3
      • +
    • Hi 4
      • +
    • Hi 5
      • +
    +
    +
    +
    +
    +
    +
    + + +
    +
    +
    +
    +
    +
      +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    +
    +
    + +
    +
    +
    + +
    +
    + +
    + + + + + +
    + +
    + + + + +
    Username:
    Password:
    +
    +
    + Login + Cancel +
    +
    + + + +
    Hello World
    + + + \ No newline at end of file diff --git a/test/rooms.html b/test/rooms.html new file mode 100644 index 0000000..e976db5 --- /dev/null +++ b/test/rooms.html @@ -0,0 +1,18 @@ + + + + + + + + + + + +
    ${this.start + parseInt(index)}${v.Username}${v.Tel}${v.Email}${v.Online}${v.Permissions}${v.Picture}
    +     + + +