mirror of
https://github.com/fspc/Yellow-Bike-Database.git
synced 2025-02-21 16:43:23 -05:00
Adds the nice tabulator library!
This commit is contained in:
Jonathan Rosenbaum
parent
cc6346a1b7
commit
407893b872
574
css/tabulator/bootstrap/tabulator_bootstrap.css
Normal file
574
css/tabulator/bootstrap/tabulator_bootstrap.css
Normal file
@ -0,0 +1,574 @@
|
||||
/* Tabulator v3.3.1 (c) Oliver Folkerd */
|
||||
.tabulator {
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
overflow: hidden;
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
margin-bottom: 20px;
|
||||
-ms-transform: translatez(0);
|
||||
transform: translatez(0);
|
||||
}
|
||||
|
||||
.tabulator[tabulator-layout="fitDataFill"] .tabulator-tableHolder .tabulator-table {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.tabulator.tabulator-block-select {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
border-bottom: 2px solid #ddd;
|
||||
background-color: #fff;
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
-moz-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-o-user-select: none;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
text-align: left;
|
||||
vertical-align: bottom;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col.tabulator-moving {
|
||||
position: absolute;
|
||||
border: 1px solid #ddd;
|
||||
background: #e6e6e6;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col .tabulator-col-content {
|
||||
position: relative;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title .tabulator-title-editor {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
border: 1px solid #999;
|
||||
padding: 1px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-arrow {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
right: 8px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 6px solid transparent;
|
||||
border-right: 6px solid transparent;
|
||||
border-bottom: 6px solid #bbb;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col.tabulator-col-group .tabulator-col-group-cols {
|
||||
position: relative;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
border-top: 1px solid #ddd;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col.tabulator-col-group .tabulator-col-group-cols .tabulator-col:last-child {
|
||||
margin-right: -1px;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col:first-child .tabulator-col-resize-handle.prev {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col.ui-sortable-helper {
|
||||
position: absolute;
|
||||
background-color: #e6e6e6 !important;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col .tabulator-header-filter {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
margin-top: 2px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col .tabulator-header-filter textarea {
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col .tabulator-header-filter svg {
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col.tabulator-sortable .tabulator-col-title {
|
||||
padding-right: 25px;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover {
|
||||
cursor: pointer;
|
||||
background-color: #e6e6e6;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="none"] .tabulator-col-content .tabulator-arrow {
|
||||
border-top: none;
|
||||
border-bottom: 6px solid #bbb;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="asc"] .tabulator-col-content .tabulator-arrow {
|
||||
border-top: none;
|
||||
border-bottom: 6px solid #666;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="desc"] .tabulator-col-content .tabulator-arrow {
|
||||
border-top: 6px solid #666;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-frozen {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-left {
|
||||
border-right: 2px solid #ddd;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-right {
|
||||
border-left: 2px solid #ddd;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-calcs-holder {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
background: white !important;
|
||||
border-top: 1px solid #ddd;
|
||||
border-bottom: 1px solid #ddd;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-calcs-holder .tabulator-row {
|
||||
background: white !important;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-calcs-holder .tabulator-row .tabulator-col-resize-handle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-tableHolder {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-tableHolder:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-tableHolder .tabulator-placeholder {
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-tableHolder .tabulator-placeholder span {
|
||||
display: inline-block;
|
||||
margin: 0 auto;
|
||||
padding: 10px;
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-tableHolder .tabulator-table {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
background-color: #fff;
|
||||
white-space: nowrap;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-tableHolder .tabulator-table .tabulator-row.tabulator-calcs {
|
||||
font-weight: bold;
|
||||
background: #ececec !important;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-tableHolder .tabulator-table .tabulator-row.tabulator-calcs.tabulator-calcs-top {
|
||||
border-bottom: 2px solid #ddd;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-tableHolder .tabulator-table .tabulator-row.tabulator-calcs.tabulator-calcs-bottom {
|
||||
border-top: 2px solid #ddd;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
min-height: 30px;
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-selectable:hover {
|
||||
background-color: #f5f5f5 !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-selected {
|
||||
background-color: #9ABCEA;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-selected:hover {
|
||||
background-color: #769BCC;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-moving {
|
||||
position: absolute;
|
||||
border-top: 1px solid #ddd;
|
||||
border-bottom: 1px solid #ddd;
|
||||
pointer-events: none !important;
|
||||
z-index: 15;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row .tabulator-frozen {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
background-color: inherit;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row .tabulator-frozen.tabulator-frozen-left {
|
||||
border-right: 2px solid #ddd;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row .tabulator-frozen.tabulator-frozen-right {
|
||||
border-left: 2px solid #ddd;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row .tabulator-cell {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
padding: 8px;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row .tabulator-cell:last-of-type {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row .tabulator-cell.tabulator-editing {
|
||||
border: 1px solid #1D68CD;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row .tabulator-cell.tabulator-editing input, .tabulator .tabulator-row .tabulator-cell.tabulator-editing select {
|
||||
border: 1px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row .tabulator-cell.tabulator-validation-fail {
|
||||
border: 1px solid #dd0000;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row .tabulator-cell.tabulator-validation-fail input, .tabulator .tabulator-row .tabulator-cell.tabulator-validation-fail select {
|
||||
border: 1px;
|
||||
background: transparent;
|
||||
color: #dd0000;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row .tabulator-cell:first-child .tabulator-col-resize-handle.prev {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row .tabulator-cell.tabulator-row-handle {
|
||||
display: -ms-inline-flexbox;
|
||||
display: inline-flex;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-moz-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-o-user-select: none;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row .tabulator-cell.tabulator-row-handle .tabulator-row-handle-box {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row .tabulator-cell.tabulator-row-handle .tabulator-row-handle-box .tabulator-row-handle-bar {
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
margin: 2px 10% 0 10%;
|
||||
background: #666;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-group {
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px solid #999;
|
||||
border-right: 1px solid #ddd;
|
||||
border-top: 1px solid #999;
|
||||
padding: 5px;
|
||||
padding-left: 10px;
|
||||
background: #fafafa;
|
||||
font-weight: bold;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-group:hover {
|
||||
cursor: pointer;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-group.tabulator-group-visible .tabulator-arrow {
|
||||
margin-right: 10px;
|
||||
border-left: 6px solid transparent;
|
||||
border-right: 6px solid transparent;
|
||||
border-top: 6px solid #666;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-group.tabulator-group-level-1 .tabulator-arrow {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-group.tabulator-group-level-2 .tabulator-arrow {
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-group.tabulator-group-level-3 .tabulator-arrow {
|
||||
margin-left: 60px;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-group.tabulator-group-level-4 .tabulator-arrow {
|
||||
margin-left: 80px;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-group.tabulator-group-level-5 .tabulator-arrow {
|
||||
margin-left: 1000px;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-group .tabulator-arrow {
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-right: 16px;
|
||||
border-top: 6px solid transparent;
|
||||
border-bottom: 6px solid transparent;
|
||||
border-right: 0;
|
||||
border-left: 6px solid #666;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-group span {
|
||||
margin-left: 10px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-col-resize-handle {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 5px;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-col-resize-handle.prev {
|
||||
left: 0;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-col-resize-handle:hover {
|
||||
cursor: ew-resize;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-footer {
|
||||
padding: 5px 10px;
|
||||
border-top: 2px solid #ddd;
|
||||
text-align: right;
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-o-user-select: none;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-footer .tabulator-calcs-holder {
|
||||
box-sizing: border-box;
|
||||
width: calc("100% + 20px");
|
||||
margin: -5px -10px 5px -10px;
|
||||
text-align: left;
|
||||
background: white !important;
|
||||
border-bottom: 1px solid #ddd;
|
||||
border-top: 1px solid #ddd;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row {
|
||||
background: white !important;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row .tabulator-col-resize-handle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-footer .tabulator-calcs-holder:only-child {
|
||||
margin-bottom: -5px;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-footer .tabulator-pages {
|
||||
margin: 0 7px;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-footer .tabulator-page {
|
||||
display: inline-block;
|
||||
margin: 0 2px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 3px;
|
||||
padding: 2px 5px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
font-family: inherit;
|
||||
font-weight: inherit;
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-footer .tabulator-page.active {
|
||||
color: #d00;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-footer .tabulator-page:disabled {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-footer .tabulator-page:not(.disabled):hover {
|
||||
cursor: pointer;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.tabulator .tablulator-loader {
|
||||
position: absolute;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 100;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tabulator .tablulator-loader .tabulator-loader-msg {
|
||||
display: inline-block;
|
||||
margin: 0 auto;
|
||||
padding: 10px 20px;
|
||||
border-radius: 10px;
|
||||
background: #fff;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.tabulator .tablulator-loader .tabulator-loader-msg.tabulator-loading {
|
||||
border: 4px solid #333;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.tabulator .tablulator-loader .tabulator-loader-msg.tabulator-error {
|
||||
border: 4px solid #D00;
|
||||
color: #590000;
|
||||
}
|
||||
|
||||
.tabulator.table-striped .tabulator-row:nth-child(even) {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.tabulator.table-bordered {
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.tabulator.table-bordered .tabulator-header .tabulator-col {
|
||||
border-right: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.tabulator.table-bordered .tabulator-tableHolder .tabulator-table .tabulator-row .tabulator-cell {
|
||||
border-right: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.tabulator.table-condensed .tabulator-header .tabulator-col .tabulator-col-content {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.tabulator.table-condensed .tabulator-tableHolder .tabulator-table .tabulator-row {
|
||||
min-height: 24px;
|
||||
}
|
||||
|
||||
.tabulator.table-condensed .tabulator-tableHolder .tabulator-table .tabulator-row .tabulator-cell {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-tableHolder .tabulator-table .tabulator-row.active {
|
||||
background: #f5f5f5 !important;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-tableHolder .tabulator-table .tabulator-row.success {
|
||||
background: #dff0d8 !important;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-tableHolder .tabulator-table .tabulator-row.info {
|
||||
background: #d9edf7 !important;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-tableHolder .tabulator-table .tabulator-row.warning {
|
||||
background: #fcf8e3 !important;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-tableHolder .tabulator-table .tabulator-row.danger {
|
||||
background: #f2dede !important;
|
||||
}
|
||||
3
css/tabulator/bootstrap/tabulator_bootstrap.min.css
vendored
Normal file
3
css/tabulator/bootstrap/tabulator_bootstrap.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
1
css/tabulator/bootstrap/tabulator_bootstrap.min.css.map
Normal file
1
css/tabulator/bootstrap/tabulator_bootstrap.min.css.map
Normal file
File diff suppressed because one or more lines are too long
1052
css/tabulator/semantic-ui/tabulator_semantic-ui.css
Normal file
1052
css/tabulator/semantic-ui/tabulator_semantic-ui.css
Normal file
File diff suppressed because it is too large
Load Diff
3
css/tabulator/semantic-ui/tabulator_semantic-ui.min.css
vendored
Normal file
3
css/tabulator/semantic-ui/tabulator_semantic-ui.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
535
css/tabulator/tabulator.css
Normal file
535
css/tabulator/tabulator.css
Normal file
@ -0,0 +1,535 @@
|
||||
/* Tabulator v3.3.1 (c) Oliver Folkerd */
|
||||
.tabulator {
|
||||
position: relative;
|
||||
border: 1px solid #999;
|
||||
background-color: #888;
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
overflow: hidden;
|
||||
-ms-transform: translatez(0);
|
||||
transform: translatez(0);
|
||||
}
|
||||
|
||||
.tabulator[tabulator-layout="fitDataFill"] .tabulator-tableHolder .tabulator-table {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.tabulator.tabulator-block-select {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #999;
|
||||
background-color: #e6e6e6;
|
||||
color: #555;
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
-moz-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-o-user-select: none;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
border-right: 1px solid #aaa;
|
||||
background: #e6e6e6;
|
||||
text-align: left;
|
||||
vertical-align: bottom;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col.tabulator-moving {
|
||||
position: absolute;
|
||||
border: 1px solid #999;
|
||||
background: #cdcdcd;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col .tabulator-col-content {
|
||||
position: relative;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title .tabulator-title-editor {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
border: 1px solid #999;
|
||||
padding: 1px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-arrow {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 9px;
|
||||
right: 8px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 6px solid transparent;
|
||||
border-right: 6px solid transparent;
|
||||
border-bottom: 6px solid #bbb;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col.tabulator-col-group .tabulator-col-group-cols {
|
||||
position: relative;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
border-top: 1px solid #aaa;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col.tabulator-col-group .tabulator-col-group-cols .tabulator-col:last-child {
|
||||
margin-right: -1px;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col:first-child .tabulator-col-resize-handle.prev {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col.ui-sortable-helper {
|
||||
position: absolute;
|
||||
background-color: #e6e6e6 !important;
|
||||
border: 1px solid #aaa;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col .tabulator-header-filter {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
margin-top: 2px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col .tabulator-header-filter textarea {
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col .tabulator-header-filter svg {
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col.tabulator-sortable .tabulator-col-title {
|
||||
padding-right: 25px;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover {
|
||||
cursor: pointer;
|
||||
background-color: #cdcdcd;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="none"] .tabulator-col-content .tabulator-arrow {
|
||||
border-top: none;
|
||||
border-bottom: 6px solid #bbb;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="asc"] .tabulator-col-content .tabulator-arrow {
|
||||
border-top: none;
|
||||
border-bottom: 6px solid #666;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="desc"] .tabulator-col-content .tabulator-arrow {
|
||||
border-top: 6px solid #666;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-frozen {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-left {
|
||||
border-right: 2px solid #aaa;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-right {
|
||||
border-left: 2px solid #aaa;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-calcs-holder {
|
||||
box-sizing: border-box;
|
||||
min-width: 200%;
|
||||
background: #f3f3f3 !important;
|
||||
border-top: 1px solid #aaa;
|
||||
border-bottom: 1px solid #aaa;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-calcs-holder .tabulator-row {
|
||||
background: #f3f3f3 !important;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-calcs-holder .tabulator-row .tabulator-col-resize-handle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-tableHolder {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-tableHolder:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-tableHolder .tabulator-placeholder {
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-tableHolder .tabulator-placeholder span {
|
||||
display: inline-block;
|
||||
margin: 0 auto;
|
||||
padding: 10px;
|
||||
color: #ccc;
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-tableHolder .tabulator-table {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
background-color: #fff;
|
||||
white-space: nowrap;
|
||||
overflow: visible;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-tableHolder .tabulator-table .tabulator-row.tabulator-calcs {
|
||||
font-weight: bold;
|
||||
background: #e2e2e2 !important;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-tableHolder .tabulator-table .tabulator-row.tabulator-calcs.tabulator-calcs-top {
|
||||
border-bottom: 2px solid #aaa;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-tableHolder .tabulator-table .tabulator-row.tabulator-calcs.tabulator-calcs-bottom {
|
||||
border-top: 2px solid #aaa;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
min-height: 22px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-row-even {
|
||||
background-color: #EFEFEF;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-selectable:hover {
|
||||
background-color: #bbb;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-selected {
|
||||
background-color: #9ABCEA;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-selected:hover {
|
||||
background-color: #769BCC;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-row-moving {
|
||||
border: 1px solid #000;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-moving {
|
||||
position: absolute;
|
||||
border-top: 1px solid #aaa;
|
||||
border-bottom: 1px solid #aaa;
|
||||
pointer-events: none;
|
||||
z-index: 15;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row .tabulator-frozen {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
background-color: inherit;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row .tabulator-frozen.tabulator-frozen-left {
|
||||
border-right: 2px solid #aaa;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row .tabulator-frozen.tabulator-frozen-right {
|
||||
border-left: 2px solid #aaa;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row .tabulator-cell {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
padding: 4px;
|
||||
border-right: 1px solid #aaa;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row .tabulator-cell.tabulator-editing {
|
||||
border: 1px solid #1D68CD;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row .tabulator-cell.tabulator-editing input, .tabulator .tabulator-row .tabulator-cell.tabulator-editing select {
|
||||
border: 1px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row .tabulator-cell.tabulator-validation-fail {
|
||||
border: 1px solid #dd0000;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row .tabulator-cell.tabulator-validation-fail input, .tabulator .tabulator-row .tabulator-cell.tabulator-validation-fail select {
|
||||
border: 1px;
|
||||
background: transparent;
|
||||
color: #dd0000;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row .tabulator-cell:first-child .tabulator-col-resize-handle.prev {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row .tabulator-cell.tabulator-row-handle {
|
||||
display: -ms-inline-flexbox;
|
||||
display: inline-flex;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-moz-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-o-user-select: none;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row .tabulator-cell.tabulator-row-handle .tabulator-row-handle-box {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row .tabulator-cell.tabulator-row-handle .tabulator-row-handle-box .tabulator-row-handle-bar {
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
margin: 2px 10% 0 10%;
|
||||
background: #666;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-group {
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px solid #999;
|
||||
border-right: 1px solid #aaa;
|
||||
border-top: 1px solid #999;
|
||||
padding: 5px;
|
||||
padding-left: 10px;
|
||||
background: #ccc;
|
||||
font-weight: bold;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-group:hover {
|
||||
cursor: pointer;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-group.tabulator-group-visible .tabulator-arrow {
|
||||
margin-right: 10px;
|
||||
border-left: 6px solid transparent;
|
||||
border-right: 6px solid transparent;
|
||||
border-top: 6px solid #666;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-group.tabulator-group-level-1 .tabulator-arrow {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-group.tabulator-group-level-2 .tabulator-arrow {
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-group.tabulator-group-level-3 .tabulator-arrow {
|
||||
margin-left: 60px;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-group.tabulator-group-level-4 .tabulator-arrow {
|
||||
margin-left: 80px;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-group.tabulator-group-level-5 .tabulator-arrow {
|
||||
margin-left: 1000px;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-group .tabulator-arrow {
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-right: 16px;
|
||||
border-top: 6px solid transparent;
|
||||
border-bottom: 6px solid transparent;
|
||||
border-right: 0;
|
||||
border-left: 6px solid #666;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-group span {
|
||||
margin-left: 10px;
|
||||
color: #d00;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-footer {
|
||||
padding: 5px 10px;
|
||||
border-top: 1px solid #999;
|
||||
background-color: #e6e6e6;
|
||||
text-align: right;
|
||||
color: #555;
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-o-user-select: none;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-footer .tabulator-calcs-holder {
|
||||
box-sizing: border-box;
|
||||
width: calc("100% + 20px");
|
||||
margin: -5px -10px 5px -10px;
|
||||
text-align: left;
|
||||
background: #f3f3f3 !important;
|
||||
border-bottom: 1px solid #aaa;
|
||||
border-top: 1px solid #aaa;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row {
|
||||
background: #f3f3f3 !important;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row .tabulator-col-resize-handle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-footer .tabulator-calcs-holder:only-child {
|
||||
margin-bottom: -5px;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-footer .tabulator-pages {
|
||||
margin: 0 7px;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-footer .tabulator-page {
|
||||
display: inline-block;
|
||||
margin: 0 2px;
|
||||
padding: 2px 5px;
|
||||
border: 1px solid #aaa;
|
||||
border-radius: 3px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
color: #555;
|
||||
font-family: inherit;
|
||||
font-weight: inherit;
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-footer .tabulator-page.active {
|
||||
color: #d00;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-footer .tabulator-page:disabled {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-footer .tabulator-page:not(.disabled):hover {
|
||||
cursor: pointer;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-col-resize-handle {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 5px;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-col-resize-handle.prev {
|
||||
left: 0;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-col-resize-handle:hover {
|
||||
cursor: ew-resize;
|
||||
}
|
||||
|
||||
.tabulator .tablulator-loader {
|
||||
position: absolute;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 100;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tabulator .tablulator-loader .tabulator-loader-msg {
|
||||
display: inline-block;
|
||||
margin: 0 auto;
|
||||
padding: 10px 20px;
|
||||
border-radius: 10px;
|
||||
background: #fff;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.tabulator .tablulator-loader .tabulator-loader-msg.tabulator-loading {
|
||||
border: 4px solid #333;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.tabulator .tablulator-loader .tabulator-loader-msg.tabulator-error {
|
||||
border: 4px solid #D00;
|
||||
color: #590000;
|
||||
}
|
||||
3
css/tabulator/tabulator.min.css
vendored
Normal file
3
css/tabulator/tabulator.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
1
css/tabulator/tabulator.min.css.map
Normal file
1
css/tabulator/tabulator.min.css.map
Normal file
File diff suppressed because one or more lines are too long
539
css/tabulator/tabulator_midnight.css
Normal file
539
css/tabulator/tabulator_midnight.css
Normal file
@ -0,0 +1,539 @@
|
||||
/* Tabulator v3.3.1 (c) Oliver Folkerd */
|
||||
.tabulator {
|
||||
position: relative;
|
||||
border: 1px solid #333;
|
||||
background-color: #222;
|
||||
overflow: hidden;
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
-ms-transform: translatez(0);
|
||||
transform: translatez(0);
|
||||
}
|
||||
|
||||
.tabulator[tabulator-layout="fitDataFill"] .tabulator-tableHolder .tabulator-table {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.tabulator.tabulator-block-select {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #999;
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
-moz-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-o-user-select: none;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
border-right: 1px solid #aaa;
|
||||
background-color: #333;
|
||||
text-align: left;
|
||||
vertical-align: bottom;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col.tabulator-moving {
|
||||
position: absolute;
|
||||
border: 1px solid #999;
|
||||
background: #1a1a1a;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col .tabulator-col-content {
|
||||
position: relative;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title .tabulator-title-editor {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
border: 1px solid #999;
|
||||
padding: 1px;
|
||||
background: #444;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-arrow {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 9px;
|
||||
right: 8px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 6px solid transparent;
|
||||
border-right: 6px solid transparent;
|
||||
border-bottom: 6px solid #bbb;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col.tabulator-col-group .tabulator-col-group-cols {
|
||||
position: relative;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
border-top: 1px solid #aaa;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col.tabulator-col-group .tabulator-col-group-cols .tabulator-col:last-child {
|
||||
margin-right: -1px;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col:first-child .tabulator-col-resize-handle.prev {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col.ui-sortable-helper {
|
||||
position: absolute;
|
||||
background-color: #1a1a1a !important;
|
||||
border: 1px solid #aaa;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col .tabulator-header-filter {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
margin-top: 2px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col .tabulator-header-filter textarea {
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col .tabulator-header-filter svg {
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col .tabulator-header-filter input, .tabulator .tabulator-header .tabulator-col .tabulator-header-filter select {
|
||||
border: 1px solid #999;
|
||||
background: #444;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col.tabulator-sortable .tabulator-col-title {
|
||||
padding-right: 25px;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover {
|
||||
cursor: pointer;
|
||||
background-color: #1a1a1a;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="none"] .tabulator-col-content .tabulator-arrow {
|
||||
border-top: none;
|
||||
border-bottom: 6px solid #bbb;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="asc"] .tabulator-col-content .tabulator-arrow {
|
||||
border-top: none;
|
||||
border-bottom: 6px solid #666;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="desc"] .tabulator-col-content .tabulator-arrow {
|
||||
border-top: 6px solid #666;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-frozen {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-left {
|
||||
border-right: 2px solid #888;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-right {
|
||||
border-left: 2px solid #888;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-calcs-holder {
|
||||
box-sizing: border-box;
|
||||
min-width: 200%;
|
||||
background: #1a1a1a !important;
|
||||
border-top: 1px solid #888;
|
||||
border-bottom: 1px solid #aaa;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-calcs-holder .tabulator-row {
|
||||
background: #1a1a1a !important;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-calcs-holder .tabulator-row .tabulator-col-resize-handle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-tableHolder {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-tableHolder:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-tableHolder .tabulator-placeholder {
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-tableHolder .tabulator-placeholder span {
|
||||
display: inline-block;
|
||||
margin: 0 auto;
|
||||
padding: 10px;
|
||||
color: #eee;
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-tableHolder .tabulator-table {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
background-color: #666;
|
||||
white-space: nowrap;
|
||||
overflow: visible;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-tableHolder .tabulator-table .tabulator-row.tabulator-calcs {
|
||||
font-weight: bold;
|
||||
background: #373737 !important;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-tableHolder .tabulator-table .tabulator-row.tabulator-calcs.tabulator-calcs-top {
|
||||
border-bottom: 2px solid #888;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-tableHolder .tabulator-table .tabulator-row.tabulator-calcs.tabulator-calcs-bottom {
|
||||
border-top: 2px solid #888;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
min-height: 22px;
|
||||
background-color: #666;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row:nth-child(even) {
|
||||
background-color: #444;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-selectable:hover {
|
||||
background-color: #999;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-selected {
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-selected:hover {
|
||||
background-color: #888;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-moving {
|
||||
position: absolute;
|
||||
border-top: 1px solid #888;
|
||||
border-bottom: 1px solid #888;
|
||||
pointer-events: none !important;
|
||||
z-index: 15;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row .tabulator-frozen {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
background-color: inherit;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row .tabulator-frozen.tabulator-frozen-left {
|
||||
border-right: 2px solid #888;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row .tabulator-frozen.tabulator-frozen-right {
|
||||
border-left: 2px solid #888;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row .tabulator-cell {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
padding: 4px;
|
||||
border-right: 1px solid #888;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row .tabulator-cell.tabulator-editing {
|
||||
border: 1px solid #999;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row .tabulator-cell.tabulator-editing input, .tabulator .tabulator-row .tabulator-cell.tabulator-editing select {
|
||||
border: 1px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row .tabulator-cell.tabulator-validation-fail {
|
||||
border: 1px solid #dd0000;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row .tabulator-cell.tabulator-validation-fail input, .tabulator .tabulator-row .tabulator-cell.tabulator-validation-fail select {
|
||||
border: 1px;
|
||||
background: transparent;
|
||||
color: #dd0000;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row .tabulator-cell:first-child .tabulator-col-resize-handle.prev {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row .tabulator-cell.tabulator-row-handle {
|
||||
display: -ms-inline-flexbox;
|
||||
display: inline-flex;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-moz-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-o-user-select: none;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row .tabulator-cell.tabulator-row-handle .tabulator-row-handle-box {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row .tabulator-cell.tabulator-row-handle .tabulator-row-handle-box .tabulator-row-handle-bar {
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
margin: 2px 10% 0 10%;
|
||||
background: #666;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-group {
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px solid #999;
|
||||
border-right: 1px solid #888;
|
||||
border-top: 1px solid #999;
|
||||
padding: 5px;
|
||||
padding-left: 10px;
|
||||
background: #ccc;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-group:hover {
|
||||
cursor: pointer;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-group.tabulator-group-visible .tabulator-arrow {
|
||||
margin-right: 10px;
|
||||
border-left: 6px solid transparent;
|
||||
border-right: 6px solid transparent;
|
||||
border-top: 6px solid #666;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-group.tabulator-group-level-1 .tabulator-arrow {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-group.tabulator-group-level-2 .tabulator-arrow {
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-group.tabulator-group-level-3 .tabulator-arrow {
|
||||
margin-left: 60px;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-group.tabulator-group-level-4 .tabulator-arrow {
|
||||
margin-left: 80px;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-group.tabulator-group-level-5 .tabulator-arrow {
|
||||
margin-left: 1000px;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-group .tabulator-arrow {
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-right: 16px;
|
||||
border-top: 6px solid transparent;
|
||||
border-bottom: 6px solid transparent;
|
||||
border-right: 0;
|
||||
border-left: 6px solid #666;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-group span {
|
||||
margin-left: 10px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-col-resize-handle {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 5px;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-col-resize-handle.prev {
|
||||
left: 0;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-col-resize-handle:hover {
|
||||
cursor: ew-resize;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-footer {
|
||||
padding: 5px 10px;
|
||||
border-top: 1px solid #999;
|
||||
background-color: #333;
|
||||
text-align: right;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-o-user-select: none;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-footer .tabulator-calcs-holder {
|
||||
box-sizing: border-box;
|
||||
width: calc("100% + 20px");
|
||||
margin: -5px -10px 5px -10px;
|
||||
text-align: left;
|
||||
background: #262626 !important;
|
||||
border-bottom: 1px solid #888;
|
||||
border-top: 1px solid #888;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row {
|
||||
background: #262626 !important;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row .tabulator-col-resize-handle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-footer .tabulator-calcs-holder:only-child {
|
||||
margin-bottom: -5px;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-footer .tabulator-pages {
|
||||
margin: 0 7px;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-footer .tabulator-page {
|
||||
display: inline-block;
|
||||
margin: 0 2px;
|
||||
border: 1px solid #aaa;
|
||||
border-radius: 3px;
|
||||
padding: 2px 5px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
color: #333;
|
||||
font-family: inherit;
|
||||
font-weight: inherit;
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-footer .tabulator-page.active {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-footer .tabulator-page:disabled {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-footer .tabulator-page:not(.disabled):hover {
|
||||
cursor: pointer;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.tabulator .tablulator-loader {
|
||||
position: absolute;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 100;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tabulator .tablulator-loader .tabulator-loader-msg {
|
||||
display: inline-block;
|
||||
margin: 0 auto;
|
||||
padding: 10px 20px;
|
||||
border-radius: 10px;
|
||||
background: #fff;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.tabulator .tablulator-loader .tabulator-loader-msg.tabulator-loading {
|
||||
border: 4px solid #333;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.tabulator .tablulator-loader .tabulator-loader-msg.tabulator-error {
|
||||
border: 4px solid #D00;
|
||||
color: #590000;
|
||||
}
|
||||
3
css/tabulator/tabulator_midnight.min.css
vendored
Normal file
3
css/tabulator/tabulator_midnight.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
1
css/tabulator/tabulator_midnight.min.css.map
Normal file
1
css/tabulator/tabulator_midnight.min.css.map
Normal file
File diff suppressed because one or more lines are too long
562
css/tabulator/tabulator_modern.css
Normal file
562
css/tabulator/tabulator_modern.css
Normal file
@ -0,0 +1,562 @@
|
||||
/* Tabulator v3.3.1 (c) Oliver Folkerd */
|
||||
.tabulator {
|
||||
position: relative;
|
||||
border: 1px solid #fff;
|
||||
background-color: #fff;
|
||||
overflow: hidden;
|
||||
font-size: 16px;
|
||||
text-align: left;
|
||||
-ms-transform: translatez(0);
|
||||
transform: translatez(0);
|
||||
}
|
||||
|
||||
.tabulator[tabulator-layout="fitDataFill"] .tabulator-tableHolder .tabulator-table {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.tabulator.tabulator-block-select {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
border-bottom: 3px solid #3759D7;
|
||||
margin-bottom: 4px;
|
||||
background-color: #fff;
|
||||
color: #3759D7;
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
-moz-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-o-user-select: none;
|
||||
padding-left: 10px;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
border-right: 2px solid #fff;
|
||||
background-color: #fff;
|
||||
text-align: left;
|
||||
vertical-align: bottom;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col.tabulator-moving {
|
||||
position: absolute;
|
||||
border: 1px solid #3759D7;
|
||||
background: #e6e6e6;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col .tabulator-col-content {
|
||||
position: relative;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title .tabulator-title-editor {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
border: 1px solid #3759D7;
|
||||
padding: 1px;
|
||||
background: #fff;
|
||||
font-size: 1em;
|
||||
color: #3759D7;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-arrow {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 9px;
|
||||
right: 8px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 6px solid transparent;
|
||||
border-right: 6px solid transparent;
|
||||
border-bottom: 6px solid #b7c3f1;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col.tabulator-col-group .tabulator-col-group-cols {
|
||||
position: relative;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
border-top: 2px solid #3759D7;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col.tabulator-col-group .tabulator-col-group-cols .tabulator-col:last-child {
|
||||
margin-right: -1px;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col:first-child .tabulator-col-resize-handle.prev {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col.ui-sortable-helper {
|
||||
position: absolute;
|
||||
background-color: #e6e6e6 !important;
|
||||
border: 1px solid #fff;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col .tabulator-header-filter {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
margin-top: 2px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col .tabulator-header-filter textarea {
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col .tabulator-header-filter svg {
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col.tabulator-sortable .tabulator-col-title {
|
||||
padding-right: 25px;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover {
|
||||
cursor: pointer;
|
||||
background-color: #e6e6e6;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="none"] .tabulator-col-content .tabulator-arrow {
|
||||
border-top: none;
|
||||
border-bottom: 6px solid #b7c3f1;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="asc"] .tabulator-col-content .tabulator-arrow {
|
||||
border-top: none;
|
||||
border-bottom: 6px solid #3759D7;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="desc"] .tabulator-col-content .tabulator-arrow {
|
||||
border-top: 6px solid #3759D7;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-frozen {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-left {
|
||||
padding-left: 10px;
|
||||
border-right: 2px solid #fff;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-right {
|
||||
border-left: 2px solid #fff;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-calcs-holder {
|
||||
box-sizing: border-box;
|
||||
min-width: 200%;
|
||||
border-top: 2px solid #3759D7 !important;
|
||||
background: white !important;
|
||||
border-top: 1px solid #fff;
|
||||
border-bottom: 1px solid #fff;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-calcs-holder .tabulator-row {
|
||||
padding-left: 0 !important;
|
||||
background: white !important;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-calcs-holder .tabulator-row .tabulator-col-resize-handle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-calcs-holder .tabulator-row .tabulator-cell {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-tableHolder {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-tableHolder:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-tableHolder .tabulator-placeholder {
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-tableHolder .tabulator-placeholder span {
|
||||
display: inline-block;
|
||||
margin: 0 auto;
|
||||
padding: 10px;
|
||||
color: #3759D7;
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-tableHolder .tabulator-table {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
background-color: #f3f3f3;
|
||||
white-space: nowrap;
|
||||
overflow: visible;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-tableHolder .tabulator-table .tabulator-row.tabulator-calcs {
|
||||
font-weight: bold;
|
||||
background: #f2f2f2 !important;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-tableHolder .tabulator-table .tabulator-row.tabulator-calcs.tabulator-calcs-top {
|
||||
border-bottom: 2px solid #3759D7;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-tableHolder .tabulator-table .tabulator-row.tabulator-calcs.tabulator-calcs-bottom {
|
||||
border-top: 2px solid #3759D7;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
min-height: 24px;
|
||||
background-color: #3759D7;
|
||||
padding-left: 10px !important;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row:nth-child(even) {
|
||||
background-color: #627ce0;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row:nth-child(even) .tabulator-cell {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-selectable:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-selectable:hover .tabulator-cell {
|
||||
background-color: #bbb;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-selected .tabulator-cell {
|
||||
background-color: #9ABCEA;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-selected:hover .tabulator-cell {
|
||||
background-color: #769BCC;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-moving {
|
||||
position: absolute;
|
||||
border-top: 1px solid #fff;
|
||||
border-bottom: 1px solid #fff;
|
||||
pointer-events: none !important;
|
||||
z-index: 15;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row .tabulator-frozen {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
background-color: inherit;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row .tabulator-frozen.tabulator-frozen-left {
|
||||
padding-left: 10px;
|
||||
border-right: 2px solid #fff;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row .tabulator-frozen.tabulator-frozen-right {
|
||||
border-left: 2px solid #fff;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row .tabulator-cell {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
padding: 6px 4px;
|
||||
border-right: 2px solid #fff;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
background-color: #f3f3f3;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row .tabulator-cell.tabulator-editing {
|
||||
border: 1px solid #1D68CD;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row .tabulator-cell.tabulator-editing input, .tabulator .tabulator-row .tabulator-cell.tabulator-editing select {
|
||||
border: 1px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row .tabulator-cell.tabulator-validation-fail {
|
||||
border: 1px solid #dd0000;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row .tabulator-cell.tabulator-validation-fail input, .tabulator .tabulator-row .tabulator-cell.tabulator-validation-fail select {
|
||||
border: 1px;
|
||||
background: transparent;
|
||||
color: #dd0000;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row .tabulator-cell:first-child .tabulator-col-resize-handle.prev {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row .tabulator-cell.tabulator-row-handle {
|
||||
display: -ms-inline-flexbox;
|
||||
display: inline-flex;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-moz-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-o-user-select: none;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row .tabulator-cell.tabulator-row-handle .tabulator-row-handle-box {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row .tabulator-cell.tabulator-row-handle .tabulator-row-handle-box .tabulator-row-handle-bar {
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
margin: 2px 10% 0 10%;
|
||||
background: #666;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-group {
|
||||
box-sizing: border-box;
|
||||
border-bottom: 2px solid #3759D7;
|
||||
border-top: 2px solid #3759D7;
|
||||
padding: 5px;
|
||||
padding-left: 10px;
|
||||
background: #8ca0e8;
|
||||
font-weight: bold;
|
||||
color: fff;
|
||||
margin-bottom: 2px;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-group:hover {
|
||||
cursor: pointer;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-group.tabulator-group-visible .tabulator-arrow {
|
||||
margin-right: 10px;
|
||||
border-left: 6px solid transparent;
|
||||
border-right: 6px solid transparent;
|
||||
border-top: 6px solid #3759D7;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-group.tabulator-group-level-1 .tabulator-arrow {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-group.tabulator-group-level-2 .tabulator-arrow {
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-group.tabulator-group-level-3 .tabulator-arrow {
|
||||
margin-left: 60px;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-group.tabulator-group-level-4 .tabulator-arrow {
|
||||
margin-left: 80px;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-group.tabulator-group-level-5 .tabulator-arrow {
|
||||
margin-left: 1000px;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-group .tabulator-arrow {
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-right: 16px;
|
||||
border-top: 6px solid transparent;
|
||||
border-bottom: 6px solid transparent;
|
||||
border-right: 0;
|
||||
border-left: 6px solid #3759D7;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-group span {
|
||||
margin-left: 10px;
|
||||
color: #3759D7;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-col-resize-handle {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 5px;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-col-resize-handle.prev {
|
||||
left: 0;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-col-resize-handle:hover {
|
||||
cursor: ew-resize;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-footer {
|
||||
padding: 5px 10px;
|
||||
border-top: 1px solid #999;
|
||||
background-color: #fff;
|
||||
text-align: right;
|
||||
color: #3759D7;
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-o-user-select: none;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-footer .tabulator-calcs-holder {
|
||||
box-sizing: border-box;
|
||||
width: calc("100% + 20px");
|
||||
margin: -5px -10px 5px -10px;
|
||||
text-align: left;
|
||||
background: white !important;
|
||||
border-top: 3px solid #3759D7 !important;
|
||||
border-bottom: 2px solid #3759D7 !important;
|
||||
border-bottom: 1px solid #fff;
|
||||
border-top: 1px solid #fff;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row {
|
||||
background: white !important;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row .tabulator-col-resize-handle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row .tabulator-cell {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-footer .tabulator-calcs-holder:only-child {
|
||||
margin-bottom: -5px;
|
||||
border-bottom: none;
|
||||
border-bottom: none !important;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-footer .tabulator-pages {
|
||||
margin: 0 7px;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-footer .tabulator-page {
|
||||
display: inline-block;
|
||||
margin: 0 2px;
|
||||
border: 1px solid #aaa;
|
||||
border-radius: 3px;
|
||||
padding: 2px 5px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
color: #3759D7;
|
||||
font-family: inherit;
|
||||
font-weight: inherit;
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-footer .tabulator-page.active {
|
||||
color: #3759D7;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-footer .tabulator-page:disabled {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-footer .tabulator-page:not(.disabled):hover {
|
||||
cursor: pointer;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.tabulator .tablulator-loader {
|
||||
position: absolute;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 100;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tabulator .tablulator-loader .tabulator-loader-msg {
|
||||
display: inline-block;
|
||||
margin: 0 auto;
|
||||
padding: 10px 20px;
|
||||
border-radius: 10px;
|
||||
background: #fff;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.tabulator .tablulator-loader .tabulator-loader-msg.tabulator-loading {
|
||||
border: 4px solid #333;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.tabulator .tablulator-loader .tabulator-loader-msg.tabulator-error {
|
||||
border: 4px solid #D00;
|
||||
color: #590000;
|
||||
}
|
||||
3
css/tabulator/tabulator_modern.min.css
vendored
Normal file
3
css/tabulator/tabulator_modern.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
1
css/tabulator/tabulator_modern.min.css.map
Normal file
1
css/tabulator/tabulator_modern.min.css.map
Normal file
File diff suppressed because one or more lines are too long
534
css/tabulator/tabulator_simple.css
Normal file
534
css/tabulator/tabulator_simple.css
Normal file
@ -0,0 +1,534 @@
|
||||
/* Tabulator v3.3.1 (c) Oliver Folkerd */
|
||||
.tabulator {
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
overflow: hidden;
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
-ms-transform: translatez(0);
|
||||
transform: translatez(0);
|
||||
}
|
||||
|
||||
.tabulator[tabulator-layout="fitDataFill"] .tabulator-tableHolder .tabulator-table {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.tabulator.tabulator-block-select {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #999;
|
||||
background-color: #fff;
|
||||
color: #555;
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
-moz-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-o-user-select: none;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
border-right: 1px solid #ddd;
|
||||
background-color: #fff;
|
||||
text-align: left;
|
||||
vertical-align: bottom;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col.tabulator-moving {
|
||||
position: absolute;
|
||||
border: 1px solid #999;
|
||||
background: #e6e6e6;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col .tabulator-col-content {
|
||||
position: relative;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title .tabulator-title-editor {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
border: 1px solid #999;
|
||||
padding: 1px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-arrow {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 9px;
|
||||
right: 8px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 6px solid transparent;
|
||||
border-right: 6px solid transparent;
|
||||
border-bottom: 6px solid #bbb;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col.tabulator-col-group .tabulator-col-group-cols {
|
||||
position: relative;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
border-top: 1px solid #ddd;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col.tabulator-col-group .tabulator-col-group-cols .tabulator-col:last-child {
|
||||
margin-right: -1px;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col:first-child .tabulator-col-resize-handle.prev {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col.ui-sortable-helper {
|
||||
position: absolute;
|
||||
background-color: #e6e6e6 !important;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col .tabulator-header-filter {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
margin-top: 2px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col .tabulator-header-filter textarea {
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col .tabulator-header-filter svg {
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col.tabulator-sortable .tabulator-col-title {
|
||||
padding-right: 25px;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover {
|
||||
cursor: pointer;
|
||||
background-color: #e6e6e6;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="none"] .tabulator-col-content .tabulator-arrow {
|
||||
border-top: none;
|
||||
border-bottom: 6px solid #bbb;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="asc"] .tabulator-col-content .tabulator-arrow {
|
||||
border-top: none;
|
||||
border-bottom: 6px solid #666;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="desc"] .tabulator-col-content .tabulator-arrow {
|
||||
border-top: 6px solid #666;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-frozen {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-left {
|
||||
border-right: 2px solid #ddd;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-right {
|
||||
border-left: 2px solid #ddd;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-calcs-holder {
|
||||
box-sizing: border-box;
|
||||
min-width: 200%;
|
||||
background: #f2f2f2 !important;
|
||||
border-top: 1px solid #ddd;
|
||||
border-bottom: 1px solid #999;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-calcs-holder .tabulator-row {
|
||||
background: #f2f2f2 !important;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-calcs-holder .tabulator-row .tabulator-col-resize-handle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-tableHolder {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-tableHolder:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-tableHolder .tabulator-placeholder {
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-tableHolder .tabulator-placeholder span {
|
||||
display: inline-block;
|
||||
margin: 0 auto;
|
||||
padding: 10px;
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-tableHolder .tabulator-table {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
background-color: #fff;
|
||||
white-space: nowrap;
|
||||
overflow: visible;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-tableHolder .tabulator-table .tabulator-row.tabulator-calcs {
|
||||
font-weight: bold;
|
||||
background: #f2f2f2 !important;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-tableHolder .tabulator-table .tabulator-row.tabulator-calcs.tabulator-calcs-top {
|
||||
border-bottom: 2px solid #ddd;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-tableHolder .tabulator-table .tabulator-row.tabulator-calcs.tabulator-calcs-bottom {
|
||||
border-top: 2px solid #ddd;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
min-height: 22px;
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row:nth-child(even) {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-selectable:hover {
|
||||
background-color: #bbb;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-selected {
|
||||
background-color: #9ABCEA;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-selected:hover {
|
||||
background-color: #769BCC;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-moving {
|
||||
position: absolute;
|
||||
border-top: 1px solid #ddd;
|
||||
border-bottom: 1px solid #ddd;
|
||||
pointer-events: none !important;
|
||||
z-index: 15;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row .tabulator-frozen {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
background-color: inherit;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row .tabulator-frozen.tabulator-frozen-left {
|
||||
border-right: 2px solid #ddd;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row .tabulator-frozen.tabulator-frozen-right {
|
||||
border-left: 2px solid #ddd;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row .tabulator-cell {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
padding: 4px;
|
||||
border-right: 1px solid #ddd;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row .tabulator-cell:last-of-type {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row .tabulator-cell.tabulator-editing {
|
||||
border: 1px solid #1D68CD;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row .tabulator-cell.tabulator-editing input, .tabulator .tabulator-row .tabulator-cell.tabulator-editing select {
|
||||
border: 1px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row .tabulator-cell.tabulator-validation-fail {
|
||||
border: 1px solid #dd0000;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row .tabulator-cell.tabulator-validation-fail input, .tabulator .tabulator-row .tabulator-cell.tabulator-validation-fail select {
|
||||
border: 1px;
|
||||
background: transparent;
|
||||
color: #dd0000;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row .tabulator-cell:first-child .tabulator-col-resize-handle.prev {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row .tabulator-cell.tabulator-row-handle {
|
||||
display: -ms-inline-flexbox;
|
||||
display: inline-flex;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-moz-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-o-user-select: none;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row .tabulator-cell.tabulator-row-handle .tabulator-row-handle-box {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row .tabulator-cell.tabulator-row-handle .tabulator-row-handle-box .tabulator-row-handle-bar {
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
margin: 2px 10% 0 10%;
|
||||
background: #666;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-group {
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px solid #999;
|
||||
border-right: 1px solid #ddd;
|
||||
border-top: 1px solid #999;
|
||||
padding: 5px;
|
||||
padding-left: 10px;
|
||||
background: #fafafa;
|
||||
font-weight: bold;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-group:hover {
|
||||
cursor: pointer;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-group.tabulator-group-visible .tabulator-arrow {
|
||||
margin-right: 10px;
|
||||
border-left: 6px solid transparent;
|
||||
border-right: 6px solid transparent;
|
||||
border-top: 6px solid #666;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-group.tabulator-group-level-1 .tabulator-arrow {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-group.tabulator-group-level-2 .tabulator-arrow {
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-group.tabulator-group-level-3 .tabulator-arrow {
|
||||
margin-left: 60px;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-group.tabulator-group-level-4 .tabulator-arrow {
|
||||
margin-left: 80px;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-group.tabulator-group-level-5 .tabulator-arrow {
|
||||
margin-left: 1000px;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-group .tabulator-arrow {
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-right: 16px;
|
||||
border-top: 6px solid transparent;
|
||||
border-bottom: 6px solid transparent;
|
||||
border-right: 0;
|
||||
border-left: 6px solid #666;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-group span {
|
||||
margin-left: 10px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-col-resize-handle {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 5px;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-col-resize-handle.prev {
|
||||
left: 0;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-col-resize-handle:hover {
|
||||
cursor: ew-resize;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-footer {
|
||||
padding: 5px 10px;
|
||||
border-top: 1px solid #999;
|
||||
background-color: #fff;
|
||||
text-align: right;
|
||||
color: #555;
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-o-user-select: none;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-footer .tabulator-calcs-holder {
|
||||
box-sizing: border-box;
|
||||
width: calc("100% + 20px");
|
||||
margin: -5px -10px 5px -10px;
|
||||
text-align: left;
|
||||
background: #f2f2f2 !important;
|
||||
border-bottom: 1px solid #fff;
|
||||
border-top: 1px solid #ddd;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row {
|
||||
background: #f2f2f2 !important;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row .tabulator-col-resize-handle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-footer .tabulator-calcs-holder:only-child {
|
||||
margin-bottom: -5px;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-footer .tabulator-pages {
|
||||
margin: 0 7px;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-footer .tabulator-page {
|
||||
display: inline-block;
|
||||
margin: 0 2px;
|
||||
border: 1px solid #aaa;
|
||||
border-radius: 3px;
|
||||
padding: 2px 5px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
color: #555;
|
||||
font-family: inherit;
|
||||
font-weight: inherit;
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-footer .tabulator-page.active {
|
||||
color: #d00;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-footer .tabulator-page:disabled {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-footer .tabulator-page:not(.disabled):hover {
|
||||
cursor: pointer;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.tabulator .tablulator-loader {
|
||||
position: absolute;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 100;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tabulator .tablulator-loader .tabulator-loader-msg {
|
||||
display: inline-block;
|
||||
margin: 0 auto;
|
||||
padding: 10px 20px;
|
||||
border-radius: 10px;
|
||||
background: #fff;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.tabulator .tablulator-loader .tabulator-loader-msg.tabulator-loading {
|
||||
border: 4px solid #333;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.tabulator .tablulator-loader .tabulator-loader-msg.tabulator-error {
|
||||
border: 4px solid #D00;
|
||||
color: #590000;
|
||||
}
|
||||
3
css/tabulator/tabulator_simple.min.css
vendored
Normal file
3
css/tabulator/tabulator_simple.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
1
css/tabulator/tabulator_simple.min.css.map
Normal file
1
css/tabulator/tabulator_simple.min.css.map
Normal file
File diff suppressed because one or more lines are too long
533
css/tabulator/tabulator_site.css
Normal file
533
css/tabulator/tabulator_site.css
Normal file
@ -0,0 +1,533 @@
|
||||
/* Tabulator v3.3.1 (c) Oliver Folkerd */
|
||||
.tabulator {
|
||||
position: relative;
|
||||
border-bottom: 5px solid #222;
|
||||
background-color: #fff;
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
overflow: hidden;
|
||||
-ms-transform: translatez(0);
|
||||
transform: translatez(0);
|
||||
}
|
||||
|
||||
.tabulator[tabulator-layout="fitDataFill"] .tabulator-tableHolder .tabulator-table {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.tabulator[tabulator-layout="fitColumns"] .tabulator-row .tabulator-cell:last-of-type {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.tabulator.tabulator-block-select {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
border-bottom: 3px solid #3FB449;
|
||||
background-color: #222;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
-moz-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-o-user-select: none;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
border-right: 1px solid #aaa;
|
||||
background-color: #222;
|
||||
text-align: left;
|
||||
vertical-align: bottom;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col.tabulator-moving {
|
||||
position: absolute;
|
||||
border: 1px solid #3FB449;
|
||||
background: #090909;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col .tabulator-col-content {
|
||||
position: relative;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title .tabulator-title-editor {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
border: 1px solid #999;
|
||||
padding: 1px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-arrow {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
right: 8px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 6px solid transparent;
|
||||
border-right: 6px solid transparent;
|
||||
border-bottom: 6px solid #bbb;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col.tabulator-col-group .tabulator-col-group-cols {
|
||||
position: relative;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
border-top: 1px solid #aaa;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col.tabulator-col-group .tabulator-col-group-cols .tabulator-col:last-child {
|
||||
margin-right: -1px;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col:first-child .tabulator-col-resize-handle.prev {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col.ui-sortable-helper {
|
||||
position: absolute;
|
||||
background-color: #222 !important;
|
||||
border: 1px solid #aaa;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col .tabulator-header-filter {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
margin-top: 2px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col .tabulator-header-filter textarea {
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col .tabulator-header-filter svg {
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col.tabulator-sortable .tabulator-col-title {
|
||||
padding-right: 25px;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover {
|
||||
cursor: pointer;
|
||||
background-color: #090909;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="none"] .tabulator-col-content .tabulator-arrow {
|
||||
border-top: none;
|
||||
border-bottom: 6px solid #bbb;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="asc"] .tabulator-col-content .tabulator-arrow {
|
||||
border-top: none;
|
||||
border-bottom: 6px solid #3FB449;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="desc"] .tabulator-col-content .tabulator-arrow {
|
||||
border-top: 6px solid #3FB449;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-frozen {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-left {
|
||||
border-right: 2px solid #aaa;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-right {
|
||||
border-left: 2px solid #aaa;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-calcs-holder {
|
||||
box-sizing: border-box;
|
||||
min-width: 200%;
|
||||
background: #3c3c3c !important;
|
||||
border-top: 1px solid #aaa;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-calcs-holder .tabulator-row {
|
||||
background: #3c3c3c !important;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-calcs-holder .tabulator-row .tabulator-col-resize-handle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-tableHolder {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-tableHolder:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-tableHolder .tabulator-placeholder {
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-tableHolder .tabulator-placeholder span {
|
||||
display: inline-block;
|
||||
margin: 0 auto;
|
||||
padding: 10px;
|
||||
color: #3FB449;
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-tableHolder .tabulator-table {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
background-color: #fff;
|
||||
white-space: nowrap;
|
||||
overflow: visible;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-tableHolder .tabulator-table .tabulator-row.tabulator-calcs {
|
||||
font-weight: bold;
|
||||
background: #484848 !important;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
min-height: 22px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-row-even {
|
||||
background-color: #EFEFEF;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-selectable:hover {
|
||||
background-color: #bbb;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-selected {
|
||||
background-color: #9ABCEA;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-selected:hover {
|
||||
background-color: #769BCC;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-row-moving {
|
||||
border: 1px solid #000;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-moving {
|
||||
position: absolute;
|
||||
border-top: 1px solid #aaa;
|
||||
border-bottom: 1px solid #aaa;
|
||||
pointer-events: none !important;
|
||||
z-index: 15;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row .tabulator-frozen {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
background-color: inherit;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row .tabulator-frozen.tabulator-frozen-left {
|
||||
border-right: 2px solid #aaa;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row .tabulator-frozen.tabulator-frozen-right {
|
||||
border-left: 2px solid #aaa;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row .tabulator-cell {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
padding: 6px;
|
||||
border-right: 1px solid #aaa;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row .tabulator-cell.tabulator-editing {
|
||||
border: 1px solid #1D68CD;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row .tabulator-cell.tabulator-editing input, .tabulator .tabulator-row .tabulator-cell.tabulator-editing select {
|
||||
border: 1px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row .tabulator-cell.tabulator-validation-fail {
|
||||
border: 1px solid #dd0000;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row .tabulator-cell.tabulator-validation-fail input, .tabulator .tabulator-row .tabulator-cell.tabulator-validation-fail select {
|
||||
border: 1px;
|
||||
background: transparent;
|
||||
color: #dd0000;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row .tabulator-cell:first-child .tabulator-col-resize-handle.prev {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row .tabulator-cell.tabulator-row-handle {
|
||||
display: -ms-inline-flexbox;
|
||||
display: inline-flex;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-moz-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-o-user-select: none;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row .tabulator-cell.tabulator-row-handle .tabulator-row-handle-box {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row .tabulator-cell.tabulator-row-handle .tabulator-row-handle-box .tabulator-row-handle-bar {
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
margin: 2px 10% 0 10%;
|
||||
background: #666;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-group {
|
||||
box-sizing: border-box;
|
||||
border-right: 1px solid #aaa;
|
||||
border-top: 1px solid #000;
|
||||
border-bottom: 2px solid #3FB449;
|
||||
padding: 5px;
|
||||
padding-left: 10px;
|
||||
background: #222;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-group:hover {
|
||||
cursor: pointer;
|
||||
background-color: #090909;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-group.tabulator-group-visible .tabulator-arrow {
|
||||
margin-right: 10px;
|
||||
border-left: 6px solid transparent;
|
||||
border-right: 6px solid transparent;
|
||||
border-top: 6px solid #3FB449;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-group.tabulator-group-level-1 .tabulator-arrow {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-group.tabulator-group-level-2 .tabulator-arrow {
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-group.tabulator-group-level-3 .tabulator-arrow {
|
||||
margin-left: 60px;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-group.tabulator-group-level-4 .tabulator-arrow {
|
||||
margin-left: 80px;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-group.tabulator-group-level-5 .tabulator-arrow {
|
||||
margin-left: 1000px;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-group .tabulator-arrow {
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-right: 16px;
|
||||
border-top: 6px solid transparent;
|
||||
border-bottom: 6px solid transparent;
|
||||
border-right: 0;
|
||||
border-left: 6px solid #3FB449;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-group span {
|
||||
margin-left: 10px;
|
||||
color: #3FB449;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-footer {
|
||||
padding: 5px 10px;
|
||||
padding-top: 8px;
|
||||
border-top: 3px solid #3FB449;
|
||||
background-color: #222;
|
||||
text-align: right;
|
||||
color: #222;
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-o-user-select: none;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-footer .tabulator-calcs-holder {
|
||||
box-sizing: border-box;
|
||||
width: calc("100% + 20px");
|
||||
margin: -8px -10px 8px -10px;
|
||||
text-align: left;
|
||||
background: #3c3c3c !important;
|
||||
border-bottom: 1px solid #aaa;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row {
|
||||
background: #3c3c3c !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row .tabulator-col-resize-handle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-footer .tabulator-calcs-holder:only-child {
|
||||
margin-bottom: -5px;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-footer .tabulator-pages {
|
||||
margin: 0 7px;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-footer .tabulator-page {
|
||||
display: inline-block;
|
||||
margin: 0 2px;
|
||||
padding: 2px 5px;
|
||||
border: 1px solid #aaa;
|
||||
border-radius: 3px;
|
||||
background: #fff;
|
||||
color: #222;
|
||||
font-family: inherit;
|
||||
font-weight: inherit;
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-footer .tabulator-page.active {
|
||||
color: #3FB449;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-footer .tabulator-page:disabled {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-footer .tabulator-page:not(.disabled):hover {
|
||||
cursor: pointer;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-col-resize-handle {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 5px;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-col-resize-handle.prev {
|
||||
left: 0;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-col-resize-handle:hover {
|
||||
cursor: ew-resize;
|
||||
}
|
||||
|
||||
.tabulator .tablulator-loader {
|
||||
position: absolute;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 100;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tabulator .tablulator-loader .tabulator-loader-msg {
|
||||
display: inline-block;
|
||||
margin: 0 auto;
|
||||
padding: 10px 20px;
|
||||
border-radius: 10px;
|
||||
background: #fff;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.tabulator .tablulator-loader .tabulator-loader-msg.tabulator-loading {
|
||||
border: 4px solid #333;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.tabulator .tablulator-loader .tabulator-loader-msg.tabulator-error {
|
||||
border: 4px solid #D00;
|
||||
color: #590000;
|
||||
}
|
||||
3
css/tabulator/tabulator_site.min.css
vendored
Normal file
3
css/tabulator/tabulator_site.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
1
css/tabulator/tabulator_site.min.css.map
Normal file
1
css/tabulator/tabulator_site.min.css.map
Normal file
File diff suppressed because one or more lines are too long
5
js/tabulator/.gitignore
vendored
Normal file
5
js/tabulator/.gitignore
vendored
Normal file
@ -0,0 +1,5 @@
|
||||
*.sublime-project
|
||||
*.sublime-workspace
|
||||
|
||||
node_modules/
|
||||
npm-debug.log
|
||||
21
js/tabulator/LICENSE
Normal file
21
js/tabulator/LICENSE
Normal file
@ -0,0 +1,21 @@
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2015-2017 Oli Folkerd
|
||||
|
||||
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.
|
||||
74
js/tabulator/README.md
Normal file
74
js/tabulator/README.md
Normal file
@ -0,0 +1,74 @@
|
||||
|
||||
|
||||
### Version 3.3 Out Now!
|
||||
|
||||
An easy to use interactive table generation plugin for JQuery UI
|
||||
|
||||
Full documentation & demos can be found at: [http://tabulator.info](http://tabulator.info)
|
||||
***
|
||||
|
||||
***
|
||||
Features
|
||||
================================
|
||||
Tabulator allows you to create interactive tables in seconds from any HTML Table, Javascript Array or JSON formatted data.
|
||||
|
||||
Simply include the library and the css in your JQuery UI project and you're away!
|
||||
|
||||
Tabulator is packed with useful features including:
|
||||
|
||||
|
||||
|
||||
Setup
|
||||
================================
|
||||
Setting up tabulator could not be simpler.
|
||||
|
||||
Include the library and the css
|
||||
```html
|
||||
<link href="dist/css/tabulator.min.css" rel="stylesheet">
|
||||
<script type="text/javascript" src="dist/js/tabulator.min.js"></script>
|
||||
```
|
||||
|
||||
Create an element to hold the table
|
||||
```html
|
||||
<div id="example-table"></div>
|
||||
```
|
||||
|
||||
Turn the element into a tabulator with some simple javascript
|
||||
```js
|
||||
$("#example-table").tabulator();
|
||||
```
|
||||
|
||||
|
||||
### Bower Installation
|
||||
To get Tabulator via the Bower package manager, open a terminal in your project directory and run the following commmand:
|
||||
```
|
||||
bower install tabulator --save
|
||||
```
|
||||
|
||||
### NPM Installation
|
||||
To get Tabulator via the NPM package manager, open a terminal in your project directory and run the following commmand:
|
||||
```
|
||||
npm install jquery.tabulator --save
|
||||
```
|
||||
|
||||
### CDNJS
|
||||
To access Tabulator directly from the CDNJS CDN servers, include the following two lines at the start of your project, instead of the localy hosted versions:
|
||||
```html
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/3.3.1/css/tabulator.min.css" rel="stylesheet">
|
||||
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/3.3.1/js/tabulator.min.js"></script>
|
||||
|
||||
Coming Soon
|
||||
================================
|
||||
Tabulator is actively under development and I plan to have even more useful features implemented soon, including:
|
||||
|
||||
- Data Reactivity
|
||||
- Custom Row Templates
|
||||
- Additional Editors and Formatters
|
||||
- Copy to Clipboard
|
||||
- Print Styling
|
||||
- Drag Rows Between Tables
|
||||
- Multi Cell Editing
|
||||
- Resizable Rows
|
||||
- Cell Selection
|
||||
|
||||
Get in touch if there are any features you feel Tabulator needs.
|
||||
36
js/tabulator/bower.json
Normal file
36
js/tabulator/bower.json
Normal file
@ -0,0 +1,36 @@
|
||||
{
|
||||
"name": "tabulator",
|
||||
"main": "dist/js/tabulator.js",
|
||||
"version": "3.3.1",
|
||||
"description": "Interactive table generation plugin for jQuery UI",
|
||||
"keywords": [
|
||||
"table",
|
||||
"grid",
|
||||
"datagrid",
|
||||
"tabulator",
|
||||
"editable",
|
||||
"cookie",
|
||||
"jquery",
|
||||
"jqueryui",
|
||||
"sort",
|
||||
"format",
|
||||
"resizable",
|
||||
"list",
|
||||
"scrollable",
|
||||
"ajax",
|
||||
"json",
|
||||
"widget"
|
||||
],
|
||||
"authors": [
|
||||
"Oli Folkerd"
|
||||
],
|
||||
"license": "MIT",
|
||||
"homepage": "https://github.com/olifolkerd/tabulator",
|
||||
"ignore": [
|
||||
"**/.*",
|
||||
"node_modules",
|
||||
"bower_components",
|
||||
"test",
|
||||
"tests"
|
||||
]
|
||||
}
|
||||
14526
js/tabulator/dist/js/tabulator.js
vendored
Normal file
14526
js/tabulator/dist/js/tabulator.js
vendored
Normal file
File diff suppressed because it is too large
Load Diff
6
js/tabulator/dist/js/tabulator.min.js
vendored
Normal file
6
js/tabulator/dist/js/tabulator.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
100
js/tabulator/gulpfile.js
Normal file
100
js/tabulator/gulpfile.js
Normal file
@ -0,0 +1,100 @@
|
||||
var gulp = require('gulp'),
|
||||
sass = require('gulp-sass'),
|
||||
autoprefixer = require('gulp-autoprefixer'),
|
||||
cssnano = require('gulp-cssnano'),
|
||||
jshint = require('gulp-jshint'),
|
||||
uglify = require('gulp-uglify'),
|
||||
imagemin = require('gulp-imagemin'),
|
||||
rename = require('gulp-rename'),
|
||||
concat = require('gulp-concat'),
|
||||
notify = require('gulp-notify'),
|
||||
cache = require('gulp-cache'),
|
||||
livereload = require('gulp-livereload'),
|
||||
del = require('del');
|
||||
include = require('gulp-include'),
|
||||
sourcemaps = require('gulp-sourcemaps'),
|
||||
babel = require('gulp-babel'),
|
||||
plumber = require('gulp-plumber'),
|
||||
gutil = require('gulp-util'),
|
||||
insert = require('gulp-insert');
|
||||
|
||||
var version_no = "3.3.1",
|
||||
version = "/* Tabulator v" + version_no + " (c) Oliver Folkerd */\n";
|
||||
|
||||
var gulp_src = gulp.src;
|
||||
gulp.src = function() {
|
||||
return gulp_src.apply(gulp, arguments)
|
||||
.pipe(plumber(function(error) {
|
||||
// Output an error message
|
||||
gutil.log(gutil.colors.red('Error (' + error.plugin + '): ' + error.message));
|
||||
// emit the end event, to properly end the task
|
||||
this.emit('end');
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
gulp.task('styles', function() {
|
||||
return gulp.src('src/scss/**/tabulator*.scss')
|
||||
.pipe(sourcemaps.init())
|
||||
.pipe(insert.prepend(version + "\n"))
|
||||
.pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError))
|
||||
.pipe(autoprefixer('last 4 version'))
|
||||
.pipe(gulp.dest('dist/css'))
|
||||
.pipe(rename({suffix: '.min'}))
|
||||
.pipe(cssnano())
|
||||
.pipe(insert.prepend(version))
|
||||
.pipe(sourcemaps.write('.'))
|
||||
.pipe(gulp.dest('dist/css'))
|
||||
//.pipe(notify({ message: 'Styles task complete' }));
|
||||
.on('end', function(){ gutil.log('Styles task complete'); })
|
||||
});
|
||||
|
||||
gulp.task('scripts', function() {
|
||||
//return gulp.src('src/js/**/*.js')
|
||||
return gulp.src('src/js/jquery_wrapper.js')
|
||||
.pipe(insert.prepend(version + "\n"))
|
||||
//.pipe(sourcemaps.init())
|
||||
.pipe(include())
|
||||
//.pipe(jshint())
|
||||
// .pipe(jshint.reporter('default'))
|
||||
.pipe(babel({
|
||||
//presets:['es2015']
|
||||
presets: [["env", {
|
||||
"targets": {
|
||||
"browsers": ["last 4 versions"]
|
||||
}
|
||||
}]
|
||||
]
|
||||
}))
|
||||
.pipe(concat('tabulator.js'))
|
||||
.pipe(gulp.dest('dist/js'))
|
||||
.pipe(rename({suffix: '.min'}))
|
||||
.pipe(uglify())
|
||||
.pipe(insert.prepend(version))
|
||||
// .pipe(sourcemaps.write('.'))
|
||||
.pipe(gulp.dest('dist/js'))
|
||||
//.pipe(notify({ message: 'Scripts task complete' }));
|
||||
.on('end', function(){ gutil.log('Scripts task complete'); })
|
||||
//.on("error", console.log)
|
||||
});
|
||||
|
||||
gulp.task('clean', function() {
|
||||
return del(['dist/css', 'dist/js']);
|
||||
});
|
||||
|
||||
|
||||
gulp.task('default', ['clean'], function() {
|
||||
gulp.start('styles', 'scripts');
|
||||
});
|
||||
|
||||
|
||||
gulp.task('watch', function() {
|
||||
|
||||
// Watch .scss files
|
||||
gulp.watch('src/scss/**/*.scss', ['styles']);
|
||||
|
||||
// Watch .js files
|
||||
gulp.watch('src/js/**/*.js', ['scripts']);
|
||||
|
||||
});
|
||||
62
js/tabulator/package.json
Normal file
62
js/tabulator/package.json
Normal file
@ -0,0 +1,62 @@
|
||||
{
|
||||
"name": "jquery.tabulator",
|
||||
"version": "3.3.1",
|
||||
"description": "Interactive table generation plugin for jQuery UI",
|
||||
"main": "dist/js/tabulator.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/olifolkerd/tabulator.git"
|
||||
},
|
||||
"keywords": [
|
||||
"table",
|
||||
"grid",
|
||||
"datagrid",
|
||||
"tabulator",
|
||||
"editable",
|
||||
"cookie",
|
||||
"jquery",
|
||||
"jqueryui",
|
||||
"sort",
|
||||
"format",
|
||||
"resizable",
|
||||
"list",
|
||||
"scrollable",
|
||||
"ajax",
|
||||
"json",
|
||||
"widget"
|
||||
],
|
||||
"author": "Oli Folkerd",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/olifolkerd/tabulator/issues"
|
||||
},
|
||||
"homepage": "http://tabulator.info/",
|
||||
"devDependencies": {
|
||||
"babel-preset-env": "^1.4.0",
|
||||
"babel-preset-es2015": "^6.24.1",
|
||||
"babel-preset-stage-2": "^6.24.1",
|
||||
"del": "^2.2.2",
|
||||
"gulp": "^3.9.1",
|
||||
"gulp-autoprefixer": "^3.1.1",
|
||||
"gulp-babel": "^6.1.2",
|
||||
"gulp-cache": "^0.4.6",
|
||||
"gulp-concat": "^2.6.1",
|
||||
"gulp-cssnano": "^2.1.2",
|
||||
"gulp-imagemin": "^3.2.0",
|
||||
"gulp-include": "^2.3.1",
|
||||
"gulp-insert": "^0.5.0",
|
||||
"gulp-jshint": "^2.0.4",
|
||||
"gulp-livereload": "^3.8.1",
|
||||
"gulp-notify": "^3.0.0",
|
||||
"gulp-plumber": "^1.1.0",
|
||||
"gulp-rename": "^1.2.2",
|
||||
"gulp-sass": "^3.1.0",
|
||||
"gulp-sourcemaps": "^2.6.0",
|
||||
"gulp-uglify": "^2.1.2",
|
||||
"gulp-util": "^3.0.8",
|
||||
"jshint": "^2.9.4"
|
||||
}
|
||||
}
|
||||
479
js/tabulator/src/js/cell.js
Normal file
479
js/tabulator/src/js/cell.js
Normal file
@ -0,0 +1,479 @@
|
||||
|
||||
//public row object
|
||||
var CellComponent = function (cell){
|
||||
this.cell = cell;
|
||||
};
|
||||
|
||||
CellComponent.prototype.getValue = function(){
|
||||
return this.cell.getValue();
|
||||
};
|
||||
|
||||
CellComponent.prototype.getOldValue = function(){
|
||||
return this.cell.getOldValue();
|
||||
};
|
||||
|
||||
CellComponent.prototype.getElement = function(){
|
||||
return $(this.cell.getElement());
|
||||
};
|
||||
|
||||
CellComponent.prototype.getRow = function(){
|
||||
return this.cell.row.getComponent();
|
||||
};
|
||||
|
||||
CellComponent.prototype.getData = function(){
|
||||
return this.cell.row.getData();
|
||||
};
|
||||
|
||||
CellComponent.prototype.getField = function(){
|
||||
return this.cell.column.getField();
|
||||
};
|
||||
|
||||
CellComponent.prototype.getColumn = function(){
|
||||
return this.cell.column.getComponent();
|
||||
};
|
||||
|
||||
CellComponent.prototype.setValue = function(value, mutate){
|
||||
if(typeof mutate == "undefined"){
|
||||
mutate = true;
|
||||
}
|
||||
|
||||
this.cell.setValue(value, mutate);
|
||||
};
|
||||
|
||||
CellComponent.prototype.restoreOldValue = function(){
|
||||
this.cell.setValueActual(this.cell.getOldValue());
|
||||
};
|
||||
|
||||
CellComponent.prototype.edit = function(){
|
||||
this.cell.edit();
|
||||
};
|
||||
|
||||
CellComponent.prototype.nav = function(){
|
||||
return this.cell.nav();
|
||||
};
|
||||
|
||||
CellComponent.prototype.checkHeight = function(){
|
||||
this.cell.checkHeight();
|
||||
};
|
||||
|
||||
CellComponent.prototype._getSelf = function(){
|
||||
return this.cell;
|
||||
};
|
||||
|
||||
|
||||
|
||||
var Cell = function(column, row){
|
||||
|
||||
this.table = column.table;
|
||||
this.column = column;
|
||||
this.row = row;
|
||||
// this.element = $("<div class='tabulator-cell' role='gridcell'></div>");
|
||||
this.element = null;
|
||||
this.value = null;
|
||||
this.oldValue = null;
|
||||
|
||||
this.height = null;
|
||||
this.width = null;
|
||||
this.minWidth = null;
|
||||
|
||||
this.build();
|
||||
};
|
||||
|
||||
//////////////// Setup Functions /////////////////
|
||||
|
||||
//generate element
|
||||
Cell.prototype.build = function(){
|
||||
this.generateElement();
|
||||
|
||||
this.setWidth(this.column.width);
|
||||
|
||||
this._configureCell();
|
||||
|
||||
this.setValueActual(this.column.getFieldValue(this.row.data));
|
||||
};
|
||||
|
||||
Cell.prototype.generateElement = function(){
|
||||
this.element = document.createElement('div');
|
||||
this.element.className = "tabulator-cell";
|
||||
this.element.setAttribute("role", "gridcell");
|
||||
this.element = $(this.element);
|
||||
};
|
||||
|
||||
|
||||
Cell.prototype._configureCell = function(){
|
||||
var self = this,
|
||||
cellEvents = self.column.cellEvents,
|
||||
element = self.element,
|
||||
field = this.column.getField(),
|
||||
dblTap, tapHold, tap;
|
||||
|
||||
//set text alignment
|
||||
element[0].style.textAlign = self.column.hozAlign;
|
||||
|
||||
if(field){
|
||||
element.attr("tabulator-field", field);
|
||||
}
|
||||
|
||||
if(self.column.definition.cssClass){
|
||||
element.addClass(self.column.definition.cssClass);
|
||||
}
|
||||
|
||||
//set event bindings
|
||||
if (cellEvents.cellClick){
|
||||
self.element.on("click", function(e){
|
||||
cellEvents.cellClick(e, self.getComponent());
|
||||
});
|
||||
}
|
||||
|
||||
if (cellEvents.cellDblClick){
|
||||
self.element.on("dblclick", function(e){
|
||||
cellEvents.cellDblClick(e, self.getComponent());
|
||||
});
|
||||
}
|
||||
|
||||
if (cellEvents.cellContext){
|
||||
self.element.on("contextmenu", function(e){
|
||||
cellEvents.cellContext(e, self.getComponent());
|
||||
});
|
||||
}
|
||||
|
||||
if (cellEvents.cellTap){
|
||||
tap = false;
|
||||
|
||||
self.element.on("touchstart", function(e){
|
||||
tap = true;
|
||||
});
|
||||
|
||||
self.element.on("touchend", function(e){
|
||||
if(tap){
|
||||
cellEvents.cellTap(e, self.getComponent());
|
||||
}
|
||||
|
||||
tap = false;
|
||||
});
|
||||
}
|
||||
|
||||
if (cellEvents.cellDblTap){
|
||||
dblTap = null;
|
||||
|
||||
self.element.on("touchend", function(e){
|
||||
|
||||
if(dblTap){
|
||||
clearTimeout(dblTap);
|
||||
dblTap = null;
|
||||
|
||||
cellEvents.cellDblTap(e, self.getComponent());
|
||||
}else{
|
||||
|
||||
dblTap = setTimeout(function(){
|
||||
clearTimeout(dblTap);
|
||||
dblTap = null;
|
||||
}, 300);
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
if (cellEvents.cellTapHold){
|
||||
tapHold = null;
|
||||
|
||||
self.element.on("touchstart", function(e){
|
||||
clearTimeout(tapHold);
|
||||
|
||||
tapHold = setTimeout(function(){
|
||||
clearTimeout(tapHold);
|
||||
tapHold = null;
|
||||
tap = false;
|
||||
cellEvents.cellTapHold(e, self.getComponent());
|
||||
}, 1000)
|
||||
|
||||
});
|
||||
|
||||
self.element.on("touchend", function(e){
|
||||
clearTimeout(tapHold);
|
||||
tapHold = null;
|
||||
});
|
||||
}
|
||||
|
||||
if(self.column.extensions.edit){
|
||||
self.table.extensions.edit.bindEditor(self);
|
||||
}
|
||||
|
||||
if(self.column.definition.rowHandle && self.table.options.movableRows !== false && self.table.extExists("moveRow")){
|
||||
self.table.extensions.moveRow.initializeCell(self);
|
||||
}
|
||||
|
||||
//hide cell if not visible
|
||||
if(!self.column.visible){
|
||||
self.hide();
|
||||
}
|
||||
};
|
||||
|
||||
//generate cell contents
|
||||
Cell.prototype._generateContents = function(){
|
||||
var self = this;
|
||||
|
||||
if(self.table.extExists("format")){
|
||||
self.element.html(self.table.extensions.format.formatValue(self));
|
||||
}else{
|
||||
self.element.html(self.value);
|
||||
}
|
||||
};
|
||||
|
||||
//generate tooltip text
|
||||
Cell.prototype._generateTooltip = function(){
|
||||
var self = this;
|
||||
|
||||
var tooltip = self.column.tooltip;
|
||||
|
||||
if(tooltip){
|
||||
if(tooltip === true){
|
||||
tooltip = self.value;
|
||||
}else if(typeof(tooltip) == "function"){
|
||||
tooltip = tooltip(self.getComponent());
|
||||
}
|
||||
|
||||
self.element[0].setAttribute("title", tooltip);
|
||||
}else{
|
||||
self.element[0].setAttribute("title", "");
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
//////////////////// Getters ////////////////////
|
||||
Cell.prototype.getElement = function(){
|
||||
return this.element;
|
||||
};
|
||||
|
||||
Cell.prototype.getValue = function(){
|
||||
return this.value;
|
||||
};
|
||||
|
||||
Cell.prototype.getOldValue = function(){
|
||||
return this.oldValue;
|
||||
};
|
||||
|
||||
//////////////////// Actions ////////////////////
|
||||
|
||||
Cell.prototype.setValue = function(value, mutate){
|
||||
|
||||
var changed = this.setValueProcessData(value, mutate);
|
||||
|
||||
if(changed){
|
||||
if(this.table.options.history && this.table.extExists("history")){
|
||||
this.table.extensions.history.action("cellEdit", this, {oldValue:this.oldValue, newValue:this.value});
|
||||
};
|
||||
|
||||
this.table.options.cellEdited(this.getComponent());
|
||||
this.table.options.dataEdited(this.table.rowManager.getData());
|
||||
}
|
||||
|
||||
if(this.table.extExists("columnCalcs")){
|
||||
if(this.column.definition.topCalc || this.column.definition.bottomCalc){
|
||||
if(this.table.options.groupBy && this.table.extExists("groupRows")){
|
||||
this.table.extensions.columnCalcs.recalcRowGroup(this.row);
|
||||
}else{
|
||||
this.table.extensions.columnCalcs.recalc(this.table.rowManager.displayRows);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
Cell.prototype.setValueProcessData = function(value, mutate){
|
||||
var changed = false;
|
||||
|
||||
if(this.value != value){
|
||||
|
||||
changed = true;
|
||||
|
||||
if(mutate){
|
||||
if(this.column.extensions.mutate && this.column.extensions.mutate.type !== "data"){
|
||||
value = this.table.extensions.mutator.transformCell(this, value);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.setValueActual(value);
|
||||
|
||||
return changed;
|
||||
}
|
||||
|
||||
Cell.prototype.setValueActual = function(value){
|
||||
this.oldValue = this.value;
|
||||
|
||||
this.value = value;
|
||||
|
||||
this.column.setFieldValue(this.row.data, value);
|
||||
|
||||
this._generateContents();
|
||||
this._generateTooltip();
|
||||
|
||||
//set resizable handles
|
||||
if(this.table.options.resizableColumns && this.table.extExists("resizeColumns")){
|
||||
this.table.extensions.resizeColumns.initializeColumn("cell", this.column, this.element);
|
||||
}
|
||||
|
||||
//handle frozen cells
|
||||
if(this.table.extExists("frozenColumns")){
|
||||
this.table.extensions.frozenColumns.layoutElement(this.element, this.column);
|
||||
}
|
||||
};
|
||||
|
||||
Cell.prototype.setWidth = function(width){
|
||||
this.width = width;
|
||||
// this.element.css("width", width || "");
|
||||
this.element[0].style.width = (width ? width + "px" : "");
|
||||
};
|
||||
|
||||
Cell.prototype.getWidth = function(){
|
||||
return this.width || this.element.outerWidth();
|
||||
};
|
||||
|
||||
Cell.prototype.setMinWidth = function(minWidth){
|
||||
this.minWidth = minWidth;
|
||||
this.element[0].style.minWidth = (minWidth ? minWidth + "px" : "");
|
||||
};
|
||||
|
||||
Cell.prototype.checkHeight = function(){
|
||||
var height = this.element.css("height");
|
||||
|
||||
this.row.reinitializeHeight();
|
||||
};
|
||||
|
||||
Cell.prototype.clearHeight = function(){
|
||||
this.element[0].style.height = "";
|
||||
};
|
||||
|
||||
|
||||
Cell.prototype.setHeight = function(height){
|
||||
this.height = height;
|
||||
this.element[0].style.height = (height ? height + "px" : "");
|
||||
};
|
||||
|
||||
Cell.prototype.getHeight = function(){
|
||||
return this.height || this.element.outerHeight();
|
||||
};
|
||||
|
||||
Cell.prototype.show = function(){
|
||||
this.element[0].style.display = "";
|
||||
};
|
||||
|
||||
Cell.prototype.hide = function(){
|
||||
this.element[0].style.display = "none";
|
||||
};
|
||||
|
||||
Cell.prototype.edit = function(){
|
||||
this.element.focus();
|
||||
};
|
||||
|
||||
Cell.prototype.delete = function(){
|
||||
this.element.detach();
|
||||
this.column.deleteCell(this);
|
||||
this.row.deleteCell(this);
|
||||
};
|
||||
|
||||
//////////////// Navigation /////////////////
|
||||
|
||||
Cell.prototype.nav = function(){
|
||||
|
||||
var self = this,
|
||||
nextCell = false,
|
||||
index = this.row.getCellIndex(this);
|
||||
|
||||
return {
|
||||
next:function(){
|
||||
|
||||
var nextCell = this.right(),
|
||||
nextRow;
|
||||
|
||||
if(!nextCell){
|
||||
nextRow = self.table.rowManager.nextDisplayRow(self.row);
|
||||
|
||||
if(nextRow){
|
||||
nextCell = nextRow.findNextEditableCell(-1);
|
||||
|
||||
if(nextCell){
|
||||
nextCell.edit();
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}else{
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
|
||||
},
|
||||
prev:function(){
|
||||
var nextCell = this.left(),
|
||||
prevRow;
|
||||
|
||||
if(!nextCell){
|
||||
prevRow = self.table.rowManager.prevDisplayRow(self.row);
|
||||
|
||||
if(prevRow){
|
||||
nextCell = prevRow.findPrevEditableCell(prevRow.cells.length);
|
||||
|
||||
if(nextCell){
|
||||
nextCell.edit();
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
}else{
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
|
||||
},
|
||||
left:function(){
|
||||
|
||||
nextCell = self.row.findPrevEditableCell(index);
|
||||
|
||||
if(nextCell){
|
||||
nextCell.edit();
|
||||
return true;
|
||||
}else{
|
||||
return false;
|
||||
}
|
||||
|
||||
},
|
||||
right:function(){
|
||||
nextCell = self.row.findNextEditableCell(index);
|
||||
|
||||
if(nextCell){
|
||||
nextCell.edit();
|
||||
return true;
|
||||
}else{
|
||||
return false;
|
||||
}
|
||||
},
|
||||
up:function(){
|
||||
var nextRow = self.table.rowManager.prevDisplayRow(self.row);
|
||||
|
||||
if(nextRow){
|
||||
nextRow.cells[index].edit();
|
||||
}
|
||||
},
|
||||
down:function(){
|
||||
var nextRow = self.table.rowManager.nextDisplayRow(self.row);
|
||||
|
||||
if(nextRow){
|
||||
nextRow.cells[index].edit();
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
Cell.prototype.getIndex = function(){
|
||||
this.row.getCellIndex(this);
|
||||
};
|
||||
|
||||
//////////////// Object Generation /////////////////
|
||||
Cell.prototype.getComponent = function(){
|
||||
return new CellComponent(this);
|
||||
};
|
||||
896
js/tabulator/src/js/column.js
Normal file
896
js/tabulator/src/js/column.js
Normal file
@ -0,0 +1,896 @@
|
||||
|
||||
//public column object
|
||||
var ColumnComponent = function (column){
|
||||
this.column = column;
|
||||
this.type = "ColumnComponent";
|
||||
};
|
||||
|
||||
ColumnComponent.prototype.getElement = function(){
|
||||
return this.column.getElement();
|
||||
};
|
||||
|
||||
ColumnComponent.prototype.getDefinition = function(){
|
||||
return this.column.getDefinition();
|
||||
};
|
||||
|
||||
ColumnComponent.prototype.getField = function(){
|
||||
return this.column.getField();
|
||||
};
|
||||
|
||||
ColumnComponent.prototype.getCells = function(){
|
||||
var cells = [];
|
||||
|
||||
this.column.cells.forEach(function(cell){
|
||||
cells.push(cell.getComponent());
|
||||
});
|
||||
|
||||
return cells;
|
||||
};
|
||||
|
||||
ColumnComponent.prototype.getVisibility = function(){
|
||||
return this.column.visible;
|
||||
};
|
||||
|
||||
ColumnComponent.prototype.show = function(){
|
||||
this.column.show();
|
||||
};
|
||||
|
||||
ColumnComponent.prototype.hide = function(){
|
||||
this.column.hide();
|
||||
};
|
||||
|
||||
ColumnComponent.prototype.toggle = function(){
|
||||
if(this.column.visible){
|
||||
this.column.hide();
|
||||
}else{
|
||||
this.column.show();
|
||||
}
|
||||
};
|
||||
|
||||
ColumnComponent.prototype.delete = function(){
|
||||
this.column.delete();
|
||||
};
|
||||
|
||||
ColumnComponent.prototype._getSelf = function(){
|
||||
return this.column;
|
||||
};
|
||||
|
||||
|
||||
var Column = function(def, parent){
|
||||
var self = this;
|
||||
|
||||
this.table = parent.table;
|
||||
this.definition = def; //column definition
|
||||
this.parent = parent; //hold parent object
|
||||
this.type = "column"; //type of element
|
||||
this.columns = []; //child columns
|
||||
this.cells = []; //cells bound to this column
|
||||
this.element = $("<div class='tabulator-col' role='columnheader' aria-sort='none'></div>"); //column header element
|
||||
this.contentElement = false;
|
||||
this.groupElement = $("<div class='tabulator-col-group-cols'></div>"); //column group holder element
|
||||
this.isGroup = false;
|
||||
this.tooltip = false; //hold column tooltip
|
||||
this.hozAlign = ""; //horizontal text alignment
|
||||
|
||||
//multi dimentional filed handling
|
||||
this.field ="";
|
||||
this.fieldStructure = "";
|
||||
this.getFieldValue = "";
|
||||
this.setFieldValue = "";
|
||||
|
||||
this.setField(this.definition.field);
|
||||
|
||||
|
||||
this.extensions = {}; //hold extension variables;
|
||||
|
||||
this.cellEvents = {
|
||||
cellClick:false,
|
||||
cellDblClick:false,
|
||||
cellContext:false,
|
||||
cellTap:false,
|
||||
cellDblTap:false,
|
||||
cellTapHold:false
|
||||
};
|
||||
|
||||
this.width = null; //column width
|
||||
this.minWidth = null; //column minimum width
|
||||
this.widthFixed = false; //user has specified a width for this column
|
||||
|
||||
this.visible = true; //default visible state
|
||||
|
||||
//initialize column
|
||||
if(def.columns){
|
||||
|
||||
this.isGroup = true;
|
||||
|
||||
def.columns.forEach(function(def, i){
|
||||
var newCol = new Column(def, self);
|
||||
self.attachColumn(newCol);
|
||||
});
|
||||
|
||||
self.checkColumnVisibility();
|
||||
}else{
|
||||
parent.registerColumnField(this);
|
||||
}
|
||||
|
||||
if(def.rowHandle && this.table.options.movableRows !== false && this.table.extExists("moveRow")){
|
||||
this.table.extensions.moveRow.setHandle(true);
|
||||
}
|
||||
|
||||
this._mapDepricatedFunctionality()
|
||||
|
||||
this._buildHeader();
|
||||
};
|
||||
|
||||
|
||||
//////////////// Setup Functions /////////////////
|
||||
Column.prototype._mapDepricatedFunctionality = function(field){
|
||||
if(this.definition.tooltipHeader){
|
||||
console.warn("The%c tooltipHeader%c column definition property has been depricated and will be removed in version 4.0, use %c headerTooltio%c instead.", "font-weight:bold;", "font-weight:regular;", "font-weight:bold;", "font-weight:regular;");
|
||||
|
||||
if(typeof this.definition.headerTooltip == "undefined"){
|
||||
this.definition.headerTooltip = this.definition.tooltipHeader;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
Column.prototype.setField = function(field){
|
||||
this.field = field;
|
||||
this.fieldStructure = field ? field.split(".") : [];
|
||||
this.getFieldValue = this.fieldStructure.length > 1 ? this._getNestedData : this._getFlatData;
|
||||
this.setFieldValue = this.fieldStructure.length > 1 ? this._setNesteData : this._setFlatData;
|
||||
};
|
||||
|
||||
//register column position with column manager
|
||||
Column.prototype.registerColumnPosition = function(column){
|
||||
this.parent.registerColumnPosition(column);
|
||||
};
|
||||
|
||||
//register column position with column manager
|
||||
Column.prototype.registerColumnField = function(column){
|
||||
this.parent.registerColumnField(column);
|
||||
};
|
||||
|
||||
//trigger position registration
|
||||
Column.prototype.reRegisterPosition = function(){
|
||||
if(this.isGroup){
|
||||
this.columns.forEach(function(column){
|
||||
column.reRegisterPosition();
|
||||
});
|
||||
}else{
|
||||
this.registerColumnPosition(this);
|
||||
}
|
||||
};
|
||||
|
||||
//build header element
|
||||
Column.prototype._buildHeader = function(){
|
||||
var self = this,
|
||||
def = self.definition,
|
||||
dblTap, tapHold, tap;
|
||||
|
||||
self.element.empty();
|
||||
|
||||
self.contentElement = self._buildColumnHeaderContent();
|
||||
|
||||
self.element.append(self.contentElement);
|
||||
|
||||
if(self.isGroup){
|
||||
self._buildGroupHeader();
|
||||
}else{
|
||||
self._buildColumnHeader();
|
||||
}
|
||||
|
||||
//set header tooltips
|
||||
var tooltip = def.headerTooltip || def.tooltip === false ? def.headerTooltip : self.table.options.tooltipsHeader;
|
||||
|
||||
if(tooltip){
|
||||
if(tooltip === true){
|
||||
if(def.field){
|
||||
self.table.extensions.localize.bind("columns." + def.field, function(value){
|
||||
self.element.attr("title", value || def.title);
|
||||
});
|
||||
}else{
|
||||
self.element.attr("title", def.title);
|
||||
}
|
||||
|
||||
}else{
|
||||
if(typeof(tooltip) == "function"){
|
||||
tooltip = tooltip(self.getComponent());
|
||||
}
|
||||
|
||||
self.element.attr("title", tooltip);
|
||||
}
|
||||
|
||||
}else{
|
||||
self.element.attr("title", "");
|
||||
}
|
||||
|
||||
|
||||
|
||||
//set resizable handles
|
||||
if(self.table.options.resizableColumns && self.table.extExists("resizeColumns")){
|
||||
self.table.extensions.resizeColumns.initializeColumn("header", self, self.element);
|
||||
}
|
||||
|
||||
//set resizable handles
|
||||
if(def.headerFilter && self.table.extExists("filter") && self.table.extExists("edit")){
|
||||
if(typeof def.headerFilterPlaceholder !== "undefined" && def.field){
|
||||
self.table.extensions.localize.setHeaderFilterColumnPlaceholder(def.field, def.headerFilterPlaceholder);
|
||||
}
|
||||
|
||||
self.table.extensions.filter.initializeColumn(self);
|
||||
}
|
||||
|
||||
|
||||
//set resizable handles
|
||||
if(self.table.extExists("frozenColumns")){
|
||||
self.table.extensions.frozenColumns.initializeColumn(self);
|
||||
}
|
||||
|
||||
//set movable column
|
||||
if(self.table.options.movableColumns && !self.isGroup && self.table.extExists("moveColumn")){
|
||||
self.table.extensions.moveColumn.initializeColumn(self);
|
||||
}
|
||||
|
||||
//set calcs column
|
||||
if((def.topCalc || def.bottomCalc) && self.table.extExists("columnCalcs")){
|
||||
self.table.extensions.columnCalcs.initializeColumn(self);
|
||||
}
|
||||
|
||||
|
||||
//setup header click event bindings
|
||||
if(typeof(def.headerClick) == "function"){
|
||||
self.element.on("click", function(e){def.headerClick(e, self.getComponent())})
|
||||
}
|
||||
|
||||
if(typeof(def.headerDblClick) == "function"){
|
||||
self.element.on("dblclick", function(e){def.headerDblClick(e, self.getComponent())});
|
||||
}
|
||||
|
||||
if(typeof(def.headerContext) == "function"){
|
||||
self.element.on("contextmenu", function(e){def.headerContext(e, self.getComponent())});
|
||||
}
|
||||
|
||||
//setup header tap event bindings
|
||||
if(typeof(def.headerTap) == "function"){
|
||||
tap = false;
|
||||
|
||||
self.element.on("touchstart", function(e){
|
||||
tap = true;
|
||||
});
|
||||
|
||||
self.element.on("touchend", function(e){
|
||||
if(tap){
|
||||
def.headerTap(e, self.getComponent());
|
||||
}
|
||||
|
||||
tap = false;
|
||||
});
|
||||
}
|
||||
|
||||
if(typeof(def.headerDblTap) == "function"){
|
||||
dblTap = null;
|
||||
|
||||
self.element.on("touchend", function(e){
|
||||
|
||||
if(dblTap){
|
||||
clearTimeout(dblTap);
|
||||
dblTap = null;
|
||||
|
||||
def.headerDblTap(e, self.getComponent());
|
||||
}else{
|
||||
|
||||
dblTap = setTimeout(function(){
|
||||
clearTimeout(dblTap);
|
||||
dblTap = null;
|
||||
}, 300);
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
if(typeof(def.headerTapHold) == "function"){
|
||||
tapHold = null;
|
||||
|
||||
self.element.on("touchstart", function(e){
|
||||
clearTimeout(tapHold);
|
||||
|
||||
tapHold = setTimeout(function(){
|
||||
clearTimeout(tapHold);
|
||||
tapHold = null;
|
||||
tap = false;
|
||||
def.headerTapHold(e, self.getComponent());
|
||||
}, 1000)
|
||||
|
||||
});
|
||||
|
||||
self.element.on("touchend", function(e){
|
||||
clearTimeout(tapHold);
|
||||
tapHold = null;
|
||||
});
|
||||
}
|
||||
|
||||
//store column cell click event bindings
|
||||
if(typeof(def.cellClick) == "function"){
|
||||
self.cellEvents.cellClick = def.cellClick;
|
||||
}
|
||||
|
||||
if(typeof(def.cellDblClick) == "function"){
|
||||
self.cellEvents.cellDblClick = def.cellDblClick;
|
||||
}
|
||||
|
||||
if(typeof(def.cellContext) == "function"){
|
||||
self.cellEvents.cellContext = def.cellContext;
|
||||
}
|
||||
|
||||
//setup column cell tap event bindings
|
||||
if(typeof(def.cellTap) == "function"){
|
||||
self.cellEvents.cellTap = def.cellTap;
|
||||
}
|
||||
|
||||
if(typeof(def.cellDblTap) == "function"){
|
||||
self.cellEvents.cellDblTap = def.cellDblTap;
|
||||
}
|
||||
|
||||
if(typeof(def.cellTapHold) == "function"){
|
||||
self.cellEvents.cellTapHold = def.cellTapHold;
|
||||
}
|
||||
};
|
||||
|
||||
//build header element for header
|
||||
Column.prototype._buildColumnHeader = function(){
|
||||
var self = this,
|
||||
def = self.definition,
|
||||
table = self.table,
|
||||
sortable;
|
||||
|
||||
//set column sorter
|
||||
if(table.extExists("sort")){
|
||||
table.extensions.sort.initializeColumn(self, self.contentElement);
|
||||
}
|
||||
|
||||
//set column formatter
|
||||
if(table.extExists("format")){
|
||||
table.extensions.format.initializeColumn(self);
|
||||
}
|
||||
|
||||
//set column editor
|
||||
if(typeof def.editor != "undefined" && table.extExists("edit")){
|
||||
table.extensions.edit.initializeColumn(self);
|
||||
}
|
||||
|
||||
//set colum validator
|
||||
if(typeof def.validator != "undefined" && table.extExists("validate")){
|
||||
table.extensions.validate.initializeColumn(self);
|
||||
}
|
||||
|
||||
|
||||
//set column mutator
|
||||
if(typeof def.mutator != "undefined" && table.extExists("mutator")){
|
||||
table.extensions.mutator.initializeColumn(self);
|
||||
}
|
||||
|
||||
//set column accessor
|
||||
if(typeof def.accessor != "undefined" && table.extExists("accessor")){
|
||||
table.extensions.accessor.initializeColumn(self);
|
||||
}
|
||||
|
||||
//set column visibility
|
||||
if(typeof def.visible != "undefined"){
|
||||
if(def.visible){
|
||||
self.show();
|
||||
}else{
|
||||
self.hide();
|
||||
}
|
||||
}
|
||||
|
||||
//asign additional css classes to column header
|
||||
if(def.cssClass){
|
||||
self.element.addClass(def.cssClass);
|
||||
}
|
||||
|
||||
//set min width if present
|
||||
self.setMinWidth(typeof def.minWidth == "undefined" ? self.table.options.columnMinWidth : def.minWidth);
|
||||
|
||||
self.reinitializeWidth();
|
||||
|
||||
//set tooltip if present
|
||||
self.tooltip = self.definition.tooltip || self.definition.tooltip === false ? self.definition.tooltip : self.table.options.tooltips;
|
||||
|
||||
//set orizontal text alignment
|
||||
self.hozAlign = typeof(self.definition.align) == "undefined" ? "" : self.definition.align;
|
||||
};
|
||||
|
||||
Column.prototype._buildColumnHeaderContent = function(){
|
||||
var self = this,
|
||||
def = self.definition,
|
||||
table = self.table;
|
||||
|
||||
var contentElement = $("<div class='tabulator-col-content'></div>");
|
||||
|
||||
contentElement.append(self._buildColumnHeaderTitle());
|
||||
|
||||
return contentElement;
|
||||
};
|
||||
|
||||
//build title element of column
|
||||
Column.prototype._buildColumnHeaderTitle = function(){
|
||||
var self = this,
|
||||
def = self.definition,
|
||||
table = self.table,
|
||||
title;
|
||||
|
||||
var titleHolderElement = $("<div class='tabulator-col-title'></div>");
|
||||
|
||||
if(def.editableTitle){
|
||||
var titleElement = $("<input class='tabulator-title-editor'>");
|
||||
|
||||
titleElement.on("click", function(e){
|
||||
e.stopPropagation();
|
||||
$(this).focus();
|
||||
});
|
||||
|
||||
titleElement.on("change", function(){
|
||||
var newTitle = $(this).val();
|
||||
def.title = newTitle;
|
||||
table.options.columnTitleChanged(self.getComponent());
|
||||
});
|
||||
|
||||
titleHolderElement.append(titleElement);
|
||||
|
||||
if(def.field){
|
||||
table.extensions.localize.bind("columns." + def.field, function(text){
|
||||
titleElement.val(text || (def.title || " "));
|
||||
});
|
||||
}else{
|
||||
titleElement.val(def.title || " ");
|
||||
}
|
||||
|
||||
}else{
|
||||
if(def.field){
|
||||
table.extensions.localize.bind("columns." + def.field, function(text){
|
||||
self._formatColumnHeaderTitle(titleHolderElement, text || (def.title || " "));
|
||||
});
|
||||
}else{
|
||||
self._formatColumnHeaderTitle(titleHolderElement, def.title || " ");
|
||||
}
|
||||
}
|
||||
|
||||
return titleHolderElement;
|
||||
};
|
||||
|
||||
Column.prototype._formatColumnHeaderTitle = function(el, title){
|
||||
var formatter, contents;
|
||||
|
||||
if(this.definition.titleFormatter && this.table.extExists("format")){
|
||||
|
||||
formatter = this.table.extensions.format.getFormatter(this.definition.titleFormatter);
|
||||
|
||||
contents = formatter.call(this.table.extensions.format, {
|
||||
getValue:function(){
|
||||
return title;
|
||||
},
|
||||
getElement:function(){
|
||||
return el;
|
||||
}
|
||||
}, this.definition.titleFormatterParams || {});
|
||||
|
||||
el.append(contents);
|
||||
}else{
|
||||
el.html(title);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
//build header element for column group
|
||||
Column.prototype._buildGroupHeader = function(){
|
||||
var self = this,
|
||||
def = self.definition,
|
||||
table = self.table;
|
||||
|
||||
self.element.addClass("tabulator-col-group")
|
||||
.attr("role", "columngroup")
|
||||
.attr("aria-title", def.title);
|
||||
|
||||
self.element.append(self.groupElement);
|
||||
};
|
||||
|
||||
//flat field lookup
|
||||
Column.prototype._getFlatData = function(data){
|
||||
return data[this.field];
|
||||
};
|
||||
|
||||
//nested field lookup
|
||||
Column.prototype._getNestedData = function(data){
|
||||
var dataObj = data,
|
||||
structure = this.fieldStructure,
|
||||
length = structure.length,
|
||||
output;
|
||||
|
||||
for(let i = 0; i < length; i++){
|
||||
|
||||
dataObj = dataObj[structure[i]];
|
||||
|
||||
output = dataObj;
|
||||
|
||||
if(!dataObj){
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return output;
|
||||
};
|
||||
|
||||
//flat field set
|
||||
Column.prototype._setFlatData = function(data, value){
|
||||
data[this.field] = value;
|
||||
};
|
||||
|
||||
//nested field set
|
||||
Column.prototype._setNesteData = function(data, value){
|
||||
var dataObj = data,
|
||||
structure = this.fieldStructure,
|
||||
length = structure.length;
|
||||
|
||||
for(let i = 0; i < length; i++){
|
||||
|
||||
if(i == length -1){
|
||||
dataObj[structure[i]] = value;
|
||||
}else{
|
||||
if(!dataObj[structure[i]]){
|
||||
dataObj[structure[i]] = {};
|
||||
}
|
||||
|
||||
dataObj = dataObj[structure[i]];
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
//attach column to this group
|
||||
Column.prototype.attachColumn = function(column){
|
||||
var self = this;
|
||||
|
||||
if(self.groupElement){
|
||||
self.columns.push(column);
|
||||
self.groupElement.append(column.getElement());
|
||||
}else{
|
||||
console.warn("Column Warning - Column being attached to another column instead of column group");
|
||||
}
|
||||
};
|
||||
|
||||
//vertically align header in column
|
||||
Column.prototype.verticalAlign = function(alignment){
|
||||
|
||||
if(this.parent.isGroup){
|
||||
this.element.css("height", this.parent.getGroupElement().innerHeight())
|
||||
}else{
|
||||
this.element.css("height", this.parent.getHeadersElement().innerHeight())
|
||||
}
|
||||
|
||||
//vertically align cell contents
|
||||
if(!this.isGroup && alignment !== "top"){
|
||||
if(alignment === "bottom"){
|
||||
this.element.css({"padding-top": this.element.innerHeight() - this.contentElement.outerHeight()});
|
||||
}else{
|
||||
this.element.css({"padding-top": (this.element.innerHeight() - this.contentElement.outerHeight()) / 2 });
|
||||
}
|
||||
}
|
||||
|
||||
this.columns.forEach(function(column){
|
||||
column.verticalAlign(alignment);
|
||||
});
|
||||
};
|
||||
|
||||
//clear vertical alignmenet
|
||||
Column.prototype.clearVerticalAlign = function(){
|
||||
this.element.css("padding-top","");
|
||||
this.element.css("height","");
|
||||
|
||||
this.columns.forEach(function(column){
|
||||
column.clearVerticalAlign();
|
||||
});
|
||||
};
|
||||
|
||||
//// Retreive Column Information ////
|
||||
|
||||
//return column header element
|
||||
Column.prototype.getElement = function(){
|
||||
return this.element;
|
||||
};
|
||||
|
||||
//return colunm group element
|
||||
Column.prototype.getGroupElement = function(){
|
||||
return this.groupElement;
|
||||
};
|
||||
|
||||
//return field name
|
||||
Column.prototype.getField = function(){
|
||||
return this.field;
|
||||
};
|
||||
|
||||
//return the first column in a group
|
||||
Column.prototype.getFirstColumn = function(){
|
||||
if(!this.isGroup){
|
||||
return this;
|
||||
}else{
|
||||
if(this.columns.length){
|
||||
return this.columns[0].getFirstColumn();
|
||||
}else{
|
||||
return false;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
//return the last column in a group
|
||||
Column.prototype.getLastColumn = function(){
|
||||
if(!this.isGroup){
|
||||
return this;
|
||||
}else{
|
||||
if(this.columns.length){
|
||||
return this.columns[this.columns.length -1].getLastColumn();
|
||||
}else{
|
||||
return false;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
//return all columns in a group
|
||||
Column.prototype.getColumns = function(){
|
||||
return this.columns;
|
||||
};
|
||||
|
||||
//return all columns in a group
|
||||
Column.prototype.getCells = function(){
|
||||
return this.cells;
|
||||
};
|
||||
|
||||
//retreive the top column in a group of columns
|
||||
Column.prototype.getTopColumn = function(){
|
||||
if(this.parent.isGroup){
|
||||
return this.parent.getTopColumn();
|
||||
}else{
|
||||
return this;
|
||||
}
|
||||
};
|
||||
|
||||
//return column definition object
|
||||
Column.prototype.getDefinition = function(updateBranches){
|
||||
var colDefs = [];
|
||||
|
||||
if(this.isGroup && updateBranches){
|
||||
this.columns.forEach(function(column){
|
||||
colDefs.push(column.getDefinition(true));
|
||||
});
|
||||
|
||||
this.definition.columns = colDefs;
|
||||
}
|
||||
|
||||
return this.definition;
|
||||
};
|
||||
|
||||
//////////////////// Actions ////////////////////
|
||||
|
||||
Column.prototype.checkColumnVisibility = function(){
|
||||
var visible = false;
|
||||
|
||||
this.columns.forEach(function(column){
|
||||
if(column.visible){
|
||||
visible = true;
|
||||
}
|
||||
});
|
||||
|
||||
if(visible){
|
||||
this.show()
|
||||
this.parent.table.options.columnVisibilityChanged(this.getComponent(), false);
|
||||
}else{
|
||||
this.hide();
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
//show column
|
||||
Column.prototype.show = function(){
|
||||
if(!this.visible){
|
||||
this.visible = true;
|
||||
|
||||
this.element.show();
|
||||
this.table.columnManager._verticalAlignHeaders();
|
||||
|
||||
if(this.parent.isGroup){
|
||||
this.parent.checkColumnVisibility();
|
||||
}
|
||||
|
||||
this.cells.forEach(function(cell){
|
||||
cell.show();
|
||||
});
|
||||
|
||||
if(this.table.options.persistentLayout && this.table.extExists("persistentLayout", true)){
|
||||
this.table.extensions.persistentLayout.save();
|
||||
}
|
||||
|
||||
this.table.options.groupVisibilityChanged(this.getComponent(), true);
|
||||
}
|
||||
};
|
||||
|
||||
//hide column
|
||||
Column.prototype.hide = function(){
|
||||
if(this.visible){
|
||||
this.visible = false;
|
||||
|
||||
this.element.hide();
|
||||
this.table.columnManager._verticalAlignHeaders();
|
||||
|
||||
if(this.parent.isGroup){
|
||||
this.parent.checkColumnVisibility();
|
||||
}
|
||||
|
||||
this.cells.forEach(function(cell){
|
||||
cell.hide();
|
||||
});
|
||||
|
||||
if(this.table.options.persistentLayout && this.table.extExists("persistentLayout", true)){
|
||||
this.table.extensions.persistentLayout.save();
|
||||
}
|
||||
|
||||
this.table.options.groupVisibilityChanged(this.getComponent(), false);
|
||||
}
|
||||
};
|
||||
|
||||
Column.prototype.setWidth = function(width){
|
||||
this.widthFixed = true;
|
||||
this.setWidthActual(width);
|
||||
};
|
||||
|
||||
Column.prototype.setWidthActual = function(width){
|
||||
if(isNaN(width)){
|
||||
width = Math.floor((this.table.element.innerWidth()/100) * parseInt(width));
|
||||
}
|
||||
|
||||
width = Math.max(this.minWidth, width);
|
||||
|
||||
this.width = width;
|
||||
|
||||
if(!this.isGroup){
|
||||
this.element.css("width", width || "");
|
||||
|
||||
this.cells.forEach(function(cell){
|
||||
cell.setWidth(width);
|
||||
});
|
||||
}
|
||||
|
||||
//set resizable handles
|
||||
if(this.table.extExists("frozenColumns")){
|
||||
this.table.extensions.frozenColumns.layout();
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
Column.prototype.checkCellHeights = function(){
|
||||
var rows = [];
|
||||
|
||||
this.cells.forEach(function(cell){
|
||||
if(cell.row.heightInitialized){
|
||||
if(cell.row.element[0].offsetParent !== null){
|
||||
rows.push(cell.row);
|
||||
cell.row.clearCellHeight();
|
||||
}else{
|
||||
cell.row.heightInitialized = false;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
rows.forEach(function(row){
|
||||
row.calcHeight();
|
||||
})
|
||||
|
||||
rows.forEach(function(row){
|
||||
row.setCellHeight();
|
||||
})
|
||||
};
|
||||
|
||||
Column.prototype.getWidth = function(){
|
||||
return this.element.outerWidth();
|
||||
};
|
||||
|
||||
Column.prototype.getHeight = function(){
|
||||
return this.element.outerHeight();
|
||||
};
|
||||
|
||||
Column.prototype.setMinWidth = function(minWidth){
|
||||
this.minWidth = minWidth;
|
||||
|
||||
this.element.css("min-width", minWidth || "");
|
||||
|
||||
this.cells.forEach(function(cell){
|
||||
cell.setMinWidth(minWidth);
|
||||
});
|
||||
};
|
||||
|
||||
Column.prototype.delete = function(){
|
||||
if(this.isGroup){
|
||||
this.columns.forEach(function(column){
|
||||
column.delete();
|
||||
});
|
||||
}
|
||||
|
||||
var cellCount = this.cells.length;
|
||||
|
||||
for(let i = 0; i < cellCount; i++){
|
||||
this.cells[0].delete();
|
||||
}
|
||||
|
||||
this.element.detach();
|
||||
|
||||
this.table.columnManager.deregisterColumn(this);
|
||||
};
|
||||
|
||||
//////////////// Cell Management /////////////////
|
||||
|
||||
//generate cell for this column
|
||||
Column.prototype.generateCell = function(row){
|
||||
var self = this;
|
||||
|
||||
var cell = new Cell(self, row);
|
||||
|
||||
this.cells.push(cell);
|
||||
|
||||
return cell;
|
||||
};
|
||||
|
||||
Column.prototype.reinitializeWidth = function(){
|
||||
|
||||
this.widthFixed = false;
|
||||
|
||||
//set width if present
|
||||
if(typeof this.definition.width !== "undefined"){
|
||||
this.setWidth(this.definition.width);
|
||||
}
|
||||
|
||||
this.fitToData();
|
||||
}
|
||||
|
||||
//set column width to maximum cell width
|
||||
Column.prototype.fitToData = function(){
|
||||
var self = this;
|
||||
|
||||
if(!this.widthFixed){
|
||||
this.element.css("width", "")
|
||||
|
||||
self.cells.forEach(function(cell){
|
||||
cell.setWidth("");
|
||||
});
|
||||
}
|
||||
|
||||
var maxWidth = this.element.outerWidth();
|
||||
|
||||
if(!self.width || !this.widthFixed){
|
||||
self.cells.forEach(function(cell){
|
||||
var width = cell.getWidth();
|
||||
|
||||
if(width > maxWidth){
|
||||
maxWidth = width;
|
||||
}
|
||||
});
|
||||
|
||||
if(maxWidth){
|
||||
self.setWidthActual(maxWidth + 1);
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
Column.prototype.deleteCell = function(cell){
|
||||
var index = this.cells.indexOf(cell);
|
||||
|
||||
if(index > -1){
|
||||
this.cells.splice(index, 1);
|
||||
}
|
||||
};
|
||||
|
||||
//////////////// Event Bindings /////////////////
|
||||
|
||||
//////////////// Object Generation /////////////////
|
||||
Column.prototype.getComponent = function(){
|
||||
return new ColumnComponent(this);
|
||||
};
|
||||
462
js/tabulator/src/js/column_manager.js
Normal file
462
js/tabulator/src/js/column_manager.js
Normal file
@ -0,0 +1,462 @@
|
||||
var ColumnManager = function(table){
|
||||
this.table = table; //hold parent table
|
||||
this.headersElement = $("<div class='tabulator-headers'></div>");
|
||||
this.element = $("<div class='tabulator-header'></div>"); //containing element
|
||||
this.rowManager = null; //hold row manager object
|
||||
this.columns = []; // column definition object
|
||||
this.columnsByIndex = []; //columns by index
|
||||
this.columnsByField = []; //columns by field
|
||||
this.scrollLeft = 0;
|
||||
|
||||
this.element.prepend(this.headersElement);
|
||||
};
|
||||
|
||||
|
||||
////////////// Setup Functions /////////////////
|
||||
|
||||
//link to row manager
|
||||
ColumnManager.prototype.setRowManager = function(manager){
|
||||
this.rowManager = manager;
|
||||
};
|
||||
|
||||
//return containing element
|
||||
ColumnManager.prototype.getElement = function(){
|
||||
return this.element;
|
||||
};
|
||||
|
||||
//return header containing element
|
||||
ColumnManager.prototype.getHeadersElement = function(){
|
||||
return this.headersElement;
|
||||
};
|
||||
|
||||
//scroll horizontally to match table body
|
||||
ColumnManager.prototype.scrollHorizontal = function(left){
|
||||
var hozAdjust = 0,
|
||||
scrollWidth = this.element[0].scrollWidth - this.table.element.innerWidth();
|
||||
|
||||
this.element.scrollLeft(left);
|
||||
|
||||
//adjust for vertical scrollbar moving table when present
|
||||
if(left > scrollWidth){
|
||||
hozAdjust = left - scrollWidth
|
||||
this.element.css("margin-left", -(hozAdjust));
|
||||
}else{
|
||||
this.element.css("margin-left", 0);
|
||||
}
|
||||
|
||||
//keep frozen columns fixed in position
|
||||
//this._calcFrozenColumnsPos(hozAdjust + 3);
|
||||
|
||||
this.scrollLeft = left;
|
||||
|
||||
if(this.table.extExists("frozenColumns")){
|
||||
this.table.extensions.frozenColumns.layout();
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
///////////// Column Setup Functions /////////////
|
||||
|
||||
ColumnManager.prototype.setColumns = function(cols, row){
|
||||
var self = this;
|
||||
|
||||
self.headersElement.empty();
|
||||
|
||||
self.columns = [];
|
||||
self.columnsByIndex = [];
|
||||
self.columnsByField = [];
|
||||
|
||||
|
||||
//reset frozen columns
|
||||
if(self.table.extExists("frozenColumns")){
|
||||
self.table.extensions.frozenColumns.reset();
|
||||
}
|
||||
|
||||
cols.forEach(function(def, i){
|
||||
self._addColumn(def);
|
||||
});
|
||||
|
||||
self._reIndexColumns();
|
||||
|
||||
if(self.table.options.responsiveLayout && self.table.extExists("responsiveLayout", true)){
|
||||
self.table.extensions.responsiveLayout.initialize();
|
||||
}
|
||||
|
||||
self.redraw(true);
|
||||
};
|
||||
|
||||
ColumnManager.prototype._addColumn = function(definition, before, nextToColumn){
|
||||
var column = new Column(definition, this);
|
||||
var index = nextToColumn ? this.findColumnIndex(nextToColumn) : nextToColumn;
|
||||
|
||||
if(nextToColumn && index > -1){
|
||||
|
||||
let parentIndex = this.columns.indexOf(nextToColumn.getTopColumn());
|
||||
|
||||
if(before){
|
||||
this.columns.splice(parentIndex, 0, column);
|
||||
nextToColumn.getElement().before(column.getElement());
|
||||
}else{
|
||||
this.columns.splice(parentIndex + 1, 0, column);
|
||||
nextToColumn.getElement().after(column.getElement());
|
||||
}
|
||||
|
||||
}else{
|
||||
if(before){
|
||||
this.columns.unshift(column);
|
||||
this.headersElement.prepend(column.getElement());
|
||||
}else{
|
||||
this.columns.push(column);
|
||||
this.headersElement.append(column.getElement());
|
||||
}
|
||||
}
|
||||
|
||||
return column;
|
||||
};
|
||||
|
||||
ColumnManager.prototype.registerColumnField = function(col){
|
||||
if(col.definition.field){
|
||||
this.columnsByField[col.definition.field] = col;
|
||||
}
|
||||
};
|
||||
|
||||
ColumnManager.prototype.registerColumnPosition = function(col){
|
||||
this.columnsByIndex.push(col);
|
||||
};
|
||||
|
||||
ColumnManager.prototype._reIndexColumns = function(){
|
||||
this.columnsByIndex = [];
|
||||
|
||||
this.columns.forEach(function(column){
|
||||
column.reRegisterPosition();
|
||||
});
|
||||
};
|
||||
|
||||
//ensure column headers take up the correct amount of space in column groups
|
||||
ColumnManager.prototype._verticalAlignHeaders = function(){
|
||||
var self = this;
|
||||
|
||||
self.columns.forEach(function(column){
|
||||
column.clearVerticalAlign();
|
||||
});
|
||||
|
||||
self.columns.forEach(function(column){
|
||||
column.verticalAlign(self.table.options.columnVertAlign);
|
||||
});
|
||||
|
||||
self.rowManager.adjustTableSize();
|
||||
};
|
||||
|
||||
//////////////// Column Details /////////////////
|
||||
|
||||
ColumnManager.prototype.findColumn = function(subject){
|
||||
var self = this;
|
||||
|
||||
if(typeof subject == "object"){
|
||||
|
||||
if(subject instanceof Column){
|
||||
//subject is column element
|
||||
return subject;
|
||||
}else if(subject instanceof ColumnComponent){
|
||||
//subject is public column component
|
||||
return subject._getSelf() || false;
|
||||
}else if(subject instanceof jQuery){
|
||||
//subject is a jquery element of the column header
|
||||
let match = self.columns.find(function(column){
|
||||
return column.element === subject;
|
||||
});
|
||||
|
||||
return match || false;
|
||||
}
|
||||
|
||||
}else{
|
||||
//subject should be treated as the field name of the column
|
||||
return this.columnsByField[subject] || false;
|
||||
}
|
||||
|
||||
//catch all for any other type of input
|
||||
|
||||
return false;
|
||||
};
|
||||
|
||||
ColumnManager.prototype.getColumnByField = function(field){
|
||||
return this.columnsByField[field];
|
||||
};
|
||||
|
||||
ColumnManager.prototype.getColumnByIndex = function(index){
|
||||
return this.columnsByIndex[index];
|
||||
};
|
||||
|
||||
ColumnManager.prototype.getColumns = function(){
|
||||
return this.columns;
|
||||
};
|
||||
|
||||
ColumnManager.prototype.findColumnIndex = function(column){
|
||||
return this.columnsByIndex.findIndex(function(col){
|
||||
return column === col;
|
||||
});
|
||||
};
|
||||
|
||||
//return all columns that are not groups
|
||||
ColumnManager.prototype.getRealColumns = function(){
|
||||
return this.columnsByIndex;
|
||||
};
|
||||
|
||||
//travers across columns and call action
|
||||
ColumnManager.prototype.traverse = function(callback){
|
||||
var self = this;
|
||||
|
||||
self.columnsByIndex.forEach(function(column,i){
|
||||
callback(column, i);
|
||||
});
|
||||
};
|
||||
|
||||
//get defintions of actual columns
|
||||
ColumnManager.prototype.getDefinitions = function(active){
|
||||
var self = this,
|
||||
output = [];
|
||||
|
||||
self.columnsByIndex.forEach(function(column){
|
||||
if(!active || (active && column.visible)){
|
||||
output.push(column.getDefinition());
|
||||
}
|
||||
});
|
||||
|
||||
return output;
|
||||
};
|
||||
|
||||
//get full nested definition tree
|
||||
ColumnManager.prototype.getDefinitionTree = function(){
|
||||
var self = this,
|
||||
output = [];
|
||||
|
||||
self.columns.forEach(function(column){
|
||||
output.push(column.getDefinition(true));
|
||||
});
|
||||
|
||||
return output;
|
||||
};
|
||||
|
||||
ColumnManager.prototype.getComponents = function(){
|
||||
var self = this,
|
||||
output = [];
|
||||
|
||||
self.columnsByIndex.forEach(function(column){
|
||||
output.push(column.getComponent());
|
||||
});
|
||||
|
||||
return output;
|
||||
};
|
||||
|
||||
ColumnManager.prototype.getWidth = function(){
|
||||
var width = 0;
|
||||
|
||||
this.columnsByIndex.forEach(function(column){
|
||||
if(column.visible){
|
||||
width += column.getWidth();
|
||||
}
|
||||
});
|
||||
|
||||
return width;
|
||||
};
|
||||
|
||||
ColumnManager.prototype.moveColumn = function(from, to, after){
|
||||
|
||||
this._moveColumnInArray(this.columns, from, to, after);
|
||||
this._moveColumnInArray(this.columnsByIndex, from, to, after, true);
|
||||
|
||||
this.table.options.columnMoved(from.getComponent());
|
||||
|
||||
if(this.table.options.persistentLayout && this.table.extExists("persistentLayout", true)){
|
||||
this.table.extensions.persistentLayout.save();
|
||||
}
|
||||
};
|
||||
|
||||
ColumnManager.prototype._moveColumnInArray = function(columns, from, to, after, updateRows){
|
||||
var fromIndex = columns.indexOf(from),
|
||||
toIndex;
|
||||
|
||||
if (fromIndex > -1) {
|
||||
|
||||
columns.splice(fromIndex, 1);
|
||||
|
||||
toIndex = columns.indexOf(to);
|
||||
|
||||
if (toIndex > -1) {
|
||||
|
||||
if(after){
|
||||
toIndex = toIndex+1;
|
||||
}
|
||||
|
||||
}else{
|
||||
toIndex = fromIndex;
|
||||
}
|
||||
|
||||
columns.splice(toIndex, 0, from);
|
||||
|
||||
if(updateRows){
|
||||
|
||||
this.table.rowManager.rows.forEach(function(row){
|
||||
if(row.cells.length){
|
||||
var cell = row.cells.splice(fromIndex, 1)[0];
|
||||
row.cells.splice(toIndex, 0, cell);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
//////////////// Cell Management /////////////////
|
||||
|
||||
ColumnManager.prototype.generateCells = function(row){
|
||||
var self = this;
|
||||
|
||||
var cells = [];
|
||||
|
||||
self.columnsByIndex.forEach(function(column){
|
||||
cells.push(column.generateCell(row));
|
||||
});
|
||||
|
||||
return cells;
|
||||
};
|
||||
|
||||
//////////////// Column Management /////////////////
|
||||
|
||||
|
||||
ColumnManager.prototype.getFlexBaseWidth = function(){
|
||||
var self = this,
|
||||
totalWidth = self.table.element.innerWidth(), //table element width
|
||||
fixedWidth = 0;
|
||||
|
||||
//adjust for vertical scrollbar if present
|
||||
if(self.rowManager.element[0].scrollHeight > self.rowManager.element.innerHeight()){
|
||||
totalWidth -= self.rowManager.element[0].offsetWidth - self.rowManager.element[0].clientWidth;
|
||||
}
|
||||
|
||||
this.columnsByIndex.forEach(function(column){
|
||||
var width, minWidth, colWidth;
|
||||
|
||||
if(column.visible){
|
||||
|
||||
width = column.definition.width || 0;
|
||||
|
||||
minWidth = typeof column.minWidth == "undefined" ? self.table.options.columnMinWidth : parseInt(column.minWidth);
|
||||
|
||||
if(typeof(width) == "string"){
|
||||
if(width.indexOf("%") > -1){
|
||||
colWidth = (totalWidth / 100) * parseInt(width) ;
|
||||
}else{
|
||||
colWidth = parseInt(width);
|
||||
}
|
||||
}else{
|
||||
colWidth = width;
|
||||
}
|
||||
|
||||
fixedWidth += colWidth > minWidth ? colWidth : minWidth;
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
return fixedWidth;
|
||||
};
|
||||
|
||||
ColumnManager.prototype.addColumn = function(definition, before, nextToColumn){
|
||||
var column = this._addColumn(definition, before, nextToColumn);
|
||||
|
||||
this._reIndexColumns();
|
||||
|
||||
if(this.table.options.responsiveLayout && this.table.extExists("responsiveLayout", true)){
|
||||
this.table.extensions.responsiveLayout.initialize();
|
||||
}
|
||||
|
||||
if(this.table.extExists("columnCalcs")){
|
||||
this.table.extensions.columnCalcs.recalc(this.table.rowManager.displayRows);
|
||||
}
|
||||
|
||||
this.redraw();
|
||||
|
||||
if(this.table.extensions.layout.getMode() != "fitColumns"){
|
||||
column.reinitializeWidth();
|
||||
}
|
||||
|
||||
this._verticalAlignHeaders();
|
||||
|
||||
this.table.rowManager.reinitialize();
|
||||
};
|
||||
|
||||
//remove column from system
|
||||
ColumnManager.prototype.deregisterColumn = function(column){
|
||||
var field = column.getField(),
|
||||
index;
|
||||
|
||||
//remove from field list
|
||||
if(field){
|
||||
delete this.columnsByField[field];
|
||||
}
|
||||
|
||||
//remove from index list
|
||||
index = this.columnsByIndex.indexOf(column);
|
||||
|
||||
if(index > -1){
|
||||
this.columnsByIndex.splice(index, 1);
|
||||
}
|
||||
|
||||
//remove from column list
|
||||
index = this.columns.indexOf(column);
|
||||
|
||||
if(index > -1){
|
||||
this.columns.splice(index, 1);
|
||||
}
|
||||
|
||||
if(this.table.options.responsiveLayout && this.table.extExists("responsiveLayout", true)){
|
||||
this.table.extensions.responsiveLayout.initialize();
|
||||
}
|
||||
|
||||
this.redraw();
|
||||
};
|
||||
|
||||
//redraw columns
|
||||
ColumnManager.prototype.redraw = function(force){
|
||||
if(force){
|
||||
if(this.element.is(":visible")){
|
||||
this._verticalAlignHeaders();
|
||||
}
|
||||
this.table.rowManager.resetScroll();
|
||||
this.table.rowManager.reinitialize();
|
||||
}
|
||||
|
||||
if(this.table.extensions.layout.getMode() == "fitColumns"){
|
||||
this.table.extensions.layout.layout();
|
||||
}else{
|
||||
if(force){
|
||||
this.table.extensions.layout.layout();
|
||||
}else{
|
||||
if(this.table.options.responsiveLayout && this.table.extExists("responsiveLayout", true)){
|
||||
this.table.extensions.responsiveLayout.update();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if(this.table.extExists("frozenColumns")){
|
||||
this.table.extensions.frozenColumns.layout();
|
||||
}
|
||||
|
||||
if(this.table.extExists("columnCalcs")){
|
||||
this.table.extensions.columnCalcs.recalc(this.table.rowManager.displayRows);
|
||||
}
|
||||
|
||||
if(force){
|
||||
if(this.table.options.persistentLayout && this.table.extExists("persistentLayout", true)){
|
||||
this.table.extensions.persistentLayout.save();
|
||||
}
|
||||
|
||||
if(this.table.extExists("columnCalcs")){
|
||||
this.table.extensions.columnCalcs.redraw();
|
||||
}
|
||||
}
|
||||
|
||||
this.table.footerManager.redraw();
|
||||
|
||||
|
||||
|
||||
};
|
||||
1107
js/tabulator/src/js/core.js
Normal file
1107
js/tabulator/src/js/core.js
Normal file
File diff suppressed because it is too large
Load Diff
58
js/tabulator/src/js/extensions/accessor.js
Normal file
58
js/tabulator/src/js/extensions/accessor.js
Normal file
@ -0,0 +1,58 @@
|
||||
var Accessor = function(table){
|
||||
this.table = table; //hold Tabulator object
|
||||
};
|
||||
|
||||
|
||||
//initialize column accessor
|
||||
Accessor.prototype.initializeColumn = function(column){
|
||||
|
||||
var config = {accessor:false, params:column.definition.accessorParams || {}};
|
||||
|
||||
//set column accessor
|
||||
switch(typeof column.definition.accessor){
|
||||
case "string":
|
||||
if(this.accessors[column.definition.accessor]){
|
||||
config.accessor = this.accessors[column.definition.accessor]
|
||||
}else{
|
||||
console.warn("Accessor Error - No such accessor found, ignoring: ", column.definition.accessor);
|
||||
}
|
||||
break;
|
||||
|
||||
case "function":
|
||||
config.accessor = column.definition.accessor;
|
||||
break;
|
||||
}
|
||||
|
||||
if(config.accessor){
|
||||
column.extensions.accessor = config;
|
||||
}
|
||||
},
|
||||
|
||||
//apply accessor to row
|
||||
Accessor.prototype.transformRow = function(dataIn){
|
||||
var self = this;
|
||||
|
||||
//clone data object with deep copy to isolate internal data from returned result
|
||||
var data = $.extend(true, {}, dataIn || {});
|
||||
|
||||
self.table.columnManager.traverse(function(column){
|
||||
var field;
|
||||
|
||||
if(column.extensions.accessor){
|
||||
field = column.getField();
|
||||
|
||||
if(typeof data[field] != "undefined"){
|
||||
column.setFieldValue(data, column.extensions.accessor.accessor(column.getFieldValue(data), data, column.extensions.accessor.params));
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return data;
|
||||
},
|
||||
|
||||
//default accessors
|
||||
Accessor.prototype.accessors = {};
|
||||
|
||||
|
||||
|
||||
Tabulator.registerExtension("accessor", Accessor);
|
||||
187
js/tabulator/src/js/extensions/ajax.js
Normal file
187
js/tabulator/src/js/extensions/ajax.js
Normal file
@ -0,0 +1,187 @@
|
||||
var Ajax = function(table){
|
||||
|
||||
this.table = table; //hold Tabulator object
|
||||
this.config = false; //hold config object for ajax request
|
||||
this.url = ""; //request URL
|
||||
this.params = false; //request parameters
|
||||
|
||||
this.loaderElement = $("<div class='tablulator-loader'></div>"); //loader message div
|
||||
this.msgElement = $("<div class='tabulator-loader-msg' role='alert'></div>"); //message element
|
||||
this.loadingElement = false;
|
||||
this.errorElement = false;
|
||||
};
|
||||
|
||||
//initialize setup options
|
||||
Ajax.prototype.initialize = function(){
|
||||
this.loaderElement.append(this.msgElement);
|
||||
|
||||
if(this.table.options.ajaxLoaderLoading){
|
||||
this.loadingElement = this.table.options.ajaxLoaderLoading;
|
||||
}
|
||||
|
||||
if(this.table.options.ajaxLoaderError){
|
||||
this.errorElement = this.table.options.ajaxLoaderError;
|
||||
}
|
||||
|
||||
if(this.table.options.ajaxParams){
|
||||
this.setParams(this.table.options.ajaxParams);
|
||||
}
|
||||
|
||||
if(this.table.options.ajaxConfig){
|
||||
this.setConfig(this.table.options.ajaxConfig);
|
||||
}
|
||||
|
||||
if(this.table.options.ajaxURL){
|
||||
this.setUrl(this.table.options.ajaxURL);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
//set ajax params
|
||||
Ajax.prototype.setParams = function(params, update){
|
||||
if(update){
|
||||
this.params = this.params || {};
|
||||
|
||||
for(let key in params){
|
||||
this.params[key] = params[key];
|
||||
}
|
||||
}else{
|
||||
this.params = params;
|
||||
}
|
||||
};
|
||||
|
||||
Ajax.prototype.getParams = function(){
|
||||
return this.params || {};
|
||||
};
|
||||
|
||||
//load config object
|
||||
Ajax.prototype.setConfig = function(config){
|
||||
this._loadDefaultConfig();
|
||||
|
||||
if(typeof config == "string"){
|
||||
this.config.type = config;
|
||||
}else{
|
||||
for(let key in config){
|
||||
this.config[key] = config[key];
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
//create config object from default
|
||||
Ajax.prototype._loadDefaultConfig = function(force){
|
||||
var self = this;
|
||||
if(!self.config || force){
|
||||
|
||||
self.config = {};
|
||||
|
||||
//load base config from defaults
|
||||
for(let key in self.defaultConfig){
|
||||
self.config[key] = self.defaultConfig[key];
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
//set request url
|
||||
Ajax.prototype.setUrl = function(url){
|
||||
this.url = url;
|
||||
};
|
||||
|
||||
//get request url
|
||||
Ajax.prototype.getUrl = function(){
|
||||
return this.url;
|
||||
};
|
||||
|
||||
//send ajax request
|
||||
Ajax.prototype.sendRequest = function(callback){
|
||||
var self = this;
|
||||
|
||||
if(self.url){
|
||||
|
||||
self._loadDefaultConfig();
|
||||
|
||||
self.config.url = self.url;
|
||||
|
||||
if(self.params){
|
||||
self.config.data = self.params;
|
||||
}
|
||||
|
||||
if(self.table.options.ajaxRequesting(self.url, self.params) !== false){
|
||||
|
||||
self.showLoader();
|
||||
|
||||
$.ajax(self.config)
|
||||
.done(function(data){
|
||||
if(self.table.options.ajaxResponse){
|
||||
data = self.table.options.ajaxResponse(self.url, self.params, data);
|
||||
}
|
||||
|
||||
self.table.options.dataLoaded(data);
|
||||
|
||||
callback(data);
|
||||
|
||||
self.hideLoader();
|
||||
})
|
||||
.fail(function(xhr, textStatus, errorThrown){
|
||||
console.error("Ajax Load Error - Connection Error: " + xhr.status, errorThrown);
|
||||
|
||||
self.table.options.ajaxError(xhr, textStatus, errorThrown);
|
||||
self.showError();
|
||||
|
||||
setTimeout(function(){
|
||||
self.hideLoader();
|
||||
}, 3000);
|
||||
});
|
||||
}
|
||||
|
||||
}else{
|
||||
console.warn("Ajax Load Error - No URL Set");
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
Ajax.prototype.showLoader = function(){
|
||||
this.loaderElement.detach();
|
||||
|
||||
this.msgElement.empty()
|
||||
.removeClass("tabulator-error")
|
||||
.addClass("tabulator-loading")
|
||||
|
||||
if(this.loadingElement){
|
||||
this.msgElement.append(this.loadingElement);
|
||||
}else{
|
||||
this.msgElement.append(this.table.extensions.localize.getText("ajax.loading"));
|
||||
}
|
||||
|
||||
this.table.element.append(this.loaderElement);
|
||||
};
|
||||
|
||||
Ajax.prototype.showError = function(){
|
||||
this.loaderElement.detach();
|
||||
|
||||
this.msgElement.empty()
|
||||
.removeClass("tabulator-loading")
|
||||
.addClass("tabulator-error")
|
||||
|
||||
if(this.errorElement){
|
||||
this.msgElement.append(this.errorElement);
|
||||
}else{
|
||||
this.msgElement.append(this.table.extensions.localize.getText("ajax.error"));
|
||||
}
|
||||
|
||||
this.table.element.append(this.loaderElement);
|
||||
};
|
||||
|
||||
Ajax.prototype.hideLoader = function(){
|
||||
this.loaderElement.detach();
|
||||
};
|
||||
|
||||
//default ajax config object
|
||||
Ajax.prototype.defaultConfig = {
|
||||
url: "",
|
||||
type: "GET",
|
||||
async: true,
|
||||
dataType:"json",
|
||||
success: function (data){}
|
||||
};
|
||||
|
||||
Tabulator.registerExtension("ajax", Ajax);
|
||||
381
js/tabulator/src/js/extensions/calculation_colums.js
Normal file
381
js/tabulator/src/js/extensions/calculation_colums.js
Normal file
@ -0,0 +1,381 @@
|
||||
var ColumnCalcs = function(table){
|
||||
this.table = table; //hold Tabulator object
|
||||
this.topCalcs = [];
|
||||
this.botCalcs = [];
|
||||
this.genColumn = false;
|
||||
this.topElement = $("<div class='tabulator-calcs-holder'></div>");
|
||||
this.botElement = $("<div class='tabulator-calcs-holder'></div>");
|
||||
this.topRow = false;
|
||||
this.botRow = false;
|
||||
this.topInitialized = false;
|
||||
this.botInitialized = false;
|
||||
|
||||
this.initialize();
|
||||
};
|
||||
|
||||
ColumnCalcs.prototype.initialize = function(){
|
||||
this.genColumn = new Column({field:"value"}, this);
|
||||
};
|
||||
|
||||
//dummy functions to handle being mock column manager
|
||||
ColumnCalcs.prototype.registerColumnField = function(){};
|
||||
|
||||
//initialize column calcs
|
||||
ColumnCalcs.prototype.initializeColumn = function(column){
|
||||
var def = column.definition
|
||||
|
||||
var config = {
|
||||
topCalcParams:def.topCalcParams || {},
|
||||
botCalcParams:def.bottomCalcParams || {},
|
||||
};
|
||||
|
||||
if(def.topCalc){
|
||||
|
||||
switch(typeof def.topCalc){
|
||||
case "string":
|
||||
if(this.calculations[def.topCalc]){
|
||||
config.topCalc = this.calculations[def.topCalc]
|
||||
}else{
|
||||
console.warn("Column Calc Error - No such calculation found, ignoring: ", def.topCalc);
|
||||
}
|
||||
break;
|
||||
|
||||
case "function":
|
||||
config.topCalc = def.topCalc;
|
||||
break
|
||||
|
||||
}
|
||||
|
||||
if(config.topCalc){
|
||||
column.extensions.columnCalcs = config;
|
||||
this.topCalcs.push(column);
|
||||
|
||||
if(!this.table.options.groupBy){
|
||||
this.initializeTopRow();
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
if(def.bottomCalc){
|
||||
switch(typeof def.bottomCalc){
|
||||
case "string":
|
||||
if(this.calculations[def.bottomCalc]){
|
||||
config.botCalc = this.calculations[def.bottomCalc]
|
||||
}else{
|
||||
console.warn("Column Calc Error - No such calculation found, ignoring: ", def.bottomCalc);
|
||||
}
|
||||
break;
|
||||
|
||||
case "function":
|
||||
config.botCalc = def.bottomCalc;
|
||||
break
|
||||
|
||||
}
|
||||
|
||||
if(config.botCalc){
|
||||
column.extensions.columnCalcs = config;
|
||||
this.botCalcs.push(column);
|
||||
|
||||
if(!this.table.options.groupBy){
|
||||
this.initializeBottomRow();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
ColumnCalcs.prototype.removeCalcs = function(){
|
||||
var changed = false;
|
||||
|
||||
if(this.topInitialized){
|
||||
this.topInitialized = false;
|
||||
this.topElement.remove();
|
||||
changed = true;
|
||||
}
|
||||
|
||||
if(this.botInitialized){
|
||||
this.botInitialized = false;
|
||||
this.table.footerManager.remove(this.botElement);
|
||||
changed = true;
|
||||
}
|
||||
|
||||
if(changed){
|
||||
this.table.rowManager.adjustTableSize();
|
||||
}
|
||||
};
|
||||
|
||||
ColumnCalcs.prototype.initializeTopRow = function(){
|
||||
if(!this.topInitialized){
|
||||
this.table.columnManager.element.append(this.topElement);
|
||||
this.topInitialized = true;
|
||||
}
|
||||
};
|
||||
|
||||
ColumnCalcs.prototype.initializeBottomRow = function(){
|
||||
if(!this.botInitialized){
|
||||
this.table.footerManager.prepend(this.botElement);
|
||||
this.botInitialized = true;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
ColumnCalcs.prototype.scrollHorizontal = function(left){
|
||||
var hozAdjust = 0,
|
||||
scrollWidth = this.table.columnManager.element[0].scrollWidth - this.table.element.innerWidth();
|
||||
|
||||
if(this.botInitialized){
|
||||
this.botRow.getElement().css("margin-left", -left);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
ColumnCalcs.prototype.recalc = function(rows){
|
||||
var data, row;
|
||||
|
||||
if(this.topInitialized || this.botInitialized){
|
||||
data = this.rowsToData(rows);
|
||||
|
||||
if(this.topInitialized){
|
||||
row = this.generateRow("top", this.rowsToData(rows))
|
||||
this.topRow = row;
|
||||
this.topElement.empty();
|
||||
this.topElement.append(row.getElement());
|
||||
row.initialize(true);
|
||||
}
|
||||
|
||||
if(this.botInitialized){
|
||||
row = this.generateRow("bottom", this.rowsToData(rows))
|
||||
this.botRow = row;
|
||||
this.botElement.empty();
|
||||
this.botElement.append(row.getElement());
|
||||
row.initialize(true);
|
||||
}
|
||||
|
||||
this.table.rowManager.adjustTableSize();
|
||||
|
||||
//set resizable handles
|
||||
if(this.table.extExists("frozenColumns")){
|
||||
this.table.extensions.frozenColumns.layout();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
ColumnCalcs.prototype.recalcRowGroup = function(row){
|
||||
var data, rowData;
|
||||
|
||||
var group = this.table.extensions.groupRows.getRowGroup(row);
|
||||
|
||||
if(group.calcs.bottom){
|
||||
data = this.rowsToData(group.rows);
|
||||
rowData = this.generateRowData("bottom", data);
|
||||
|
||||
group.calcs.bottom.updateData(rowData);
|
||||
}
|
||||
|
||||
if(group.calcs.top){
|
||||
data = this.rowsToData(group.rows);
|
||||
rowData = this.generateRowData("top", data);
|
||||
|
||||
group.calcs.top.updateData(rowData);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
//generate top stats row
|
||||
ColumnCalcs.prototype.generateTopRow = function(rows){
|
||||
return this.generateRow("top", this.rowsToData(rows));
|
||||
};
|
||||
//generate bottom stats row
|
||||
ColumnCalcs.prototype.generateBottomRow = function(rows){
|
||||
return this.generateRow("bottom", this.rowsToData(rows));
|
||||
};
|
||||
|
||||
ColumnCalcs.prototype.rowsToData = function(rows){
|
||||
var data = [];
|
||||
|
||||
rows.forEach(function(row){
|
||||
data.push(row.getData());
|
||||
});
|
||||
|
||||
return data;
|
||||
};
|
||||
|
||||
//generate stats row
|
||||
ColumnCalcs.prototype.generateRow = function(pos, data){
|
||||
var self = this,
|
||||
rowData = this.generateRowData(pos, data),
|
||||
row = new Row(rowData, this);
|
||||
|
||||
row.getElement().addClass("tabulator-calcs").addClass("tabulator-calcs-" + pos);
|
||||
row.type = "calc";
|
||||
|
||||
row.generateCells = function(){
|
||||
|
||||
var cells = [];
|
||||
|
||||
self.table.columnManager.columnsByIndex.forEach(function(column){
|
||||
|
||||
if(column.visible){
|
||||
//set field name of mock column
|
||||
self.genColumn.setField(column.getField());
|
||||
self.genColumn.hozAlign = column.hozAlign;
|
||||
|
||||
if(column.definition[pos + "CalcFormatter"] && self.table.extExists("format")){
|
||||
|
||||
self.genColumn.extensions.format = {
|
||||
formatter: self.table.extensions.format.getFormatter(column.definition[pos + "CalcFormatter"]),
|
||||
params: column.definition[pos + "CalcFormatterParams"]
|
||||
}
|
||||
}else{
|
||||
self.genColumn.extensions.format = {
|
||||
formatter: self.table.extensions.format.getFormatter("plaintext"),
|
||||
params:{}
|
||||
}
|
||||
}
|
||||
|
||||
//generate cell and assign to correct column
|
||||
var cell = new Cell(self.genColumn, row);
|
||||
cell.column = column;
|
||||
|
||||
cell.setWidth(column.getWidth());
|
||||
|
||||
column.cells.push(cell);
|
||||
cells.push(cell);
|
||||
}
|
||||
});
|
||||
|
||||
this.cells = cells;
|
||||
}
|
||||
|
||||
return row;
|
||||
};
|
||||
|
||||
//generate stats row
|
||||
ColumnCalcs.prototype.generateRowData = function(pos, data){
|
||||
var rowData = {},
|
||||
calcs = pos == "top" ? this.topCalcs : this.botCalcs,
|
||||
type = pos == "top" ? "topCalc" : "botCalc";
|
||||
|
||||
calcs.forEach(function(column){
|
||||
var values = [];
|
||||
|
||||
if(column.extensions.columnCalcs && column.extensions.columnCalcs[type]){
|
||||
data.forEach(function(item){
|
||||
values.push(column.getFieldValue(item));
|
||||
});
|
||||
|
||||
column.setFieldValue(rowData, column.extensions.columnCalcs[type](values, data, column.extensions.columnCalcs[type + "Params"]));
|
||||
}
|
||||
});
|
||||
|
||||
return rowData;
|
||||
};
|
||||
|
||||
ColumnCalcs.prototype.hasTopCalcs = function(){
|
||||
return !!(this.topCalcs.length);
|
||||
},
|
||||
|
||||
ColumnCalcs.prototype.hasBottomCalcs = function(){
|
||||
return !!(this.botCalcs.length);
|
||||
},
|
||||
|
||||
//handle table redraw
|
||||
ColumnCalcs.prototype.redraw = function(){
|
||||
if(this.topRow){
|
||||
this.topRow.normalizeHeight(true);
|
||||
}
|
||||
if(this.botRow){
|
||||
this.botRow.normalizeHeight(true);
|
||||
}
|
||||
};
|
||||
|
||||
//default calculations
|
||||
ColumnCalcs.prototype.calculations = {
|
||||
"avg":function(values, data, calcParams){
|
||||
var output = 0,
|
||||
precision = typeof calcParams.precision !== "undefined" ? calcParams.precision : 2
|
||||
|
||||
if(values.length){
|
||||
output = values.reduce(function(sum, value){
|
||||
value = Number(value);
|
||||
return sum + value;
|
||||
});
|
||||
|
||||
output = output / values.length;
|
||||
|
||||
output = precision !== false ? output.toFixed(precision) : output;
|
||||
}
|
||||
|
||||
return parseFloat(output).toString();
|
||||
},
|
||||
"max":function(values, data, calcParams){
|
||||
var output = null;
|
||||
|
||||
values.forEach(function(value){
|
||||
|
||||
value = Number(value);
|
||||
|
||||
if(value > output || output === null){
|
||||
output = value;
|
||||
}
|
||||
});
|
||||
|
||||
return output !== null ? output : "";
|
||||
},
|
||||
"min":function(values, data, calcParams){
|
||||
var output = null;
|
||||
|
||||
values.forEach(function(value){
|
||||
|
||||
value = Number(value);
|
||||
|
||||
if(value < output || output === null){
|
||||
output = value;
|
||||
}
|
||||
});
|
||||
|
||||
return output !== null ? output : "";
|
||||
},
|
||||
"sum":function(values, data, calcParams){
|
||||
var output = 0;
|
||||
|
||||
if(values.length){
|
||||
values.forEach(function(value){
|
||||
value = Number(value);
|
||||
|
||||
output += !isNaN(value) ? Number(value) : 0;
|
||||
});
|
||||
}
|
||||
|
||||
return output;
|
||||
},
|
||||
"concat":function(values, data, calcParams){
|
||||
var output = 0;
|
||||
|
||||
if(values.length){
|
||||
output = values.reduce(function(sum, value){
|
||||
return String(sum) + String(value);
|
||||
});
|
||||
}
|
||||
|
||||
return output;
|
||||
},
|
||||
"count":function(values, data, calcParams){
|
||||
var output = 0;
|
||||
|
||||
if(values.length){
|
||||
values.forEach(function(value){
|
||||
if(value){
|
||||
output ++;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return output;
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
|
||||
Tabulator.registerExtension("columnCalcs", ColumnCalcs);
|
||||
256
js/tabulator/src/js/extensions/download.js
Normal file
256
js/tabulator/src/js/extensions/download.js
Normal file
@ -0,0 +1,256 @@
|
||||
var Download = function(table){
|
||||
this.table = table; //hold Tabulator object
|
||||
this.fields = {}; //hold filed multi dimension arrays
|
||||
};
|
||||
|
||||
//trigger file download
|
||||
Download.prototype.download = function(type, filename, options){
|
||||
var self = this,
|
||||
downloadFunc = false;
|
||||
|
||||
function buildLink(data, mime){
|
||||
self.triggerDownload(data, mime, type, filename);
|
||||
}
|
||||
|
||||
if(typeof type == "function"){
|
||||
downloadFunc = type;
|
||||
}else{
|
||||
if(self.downloaders[type]){
|
||||
downloadFunc = self.downloaders[type];
|
||||
}else{
|
||||
console.warn("Download Error - No such download type found: ", type);
|
||||
}
|
||||
}
|
||||
|
||||
if(downloadFunc){
|
||||
downloadFunc.call(this, self.processDefinitions(), self.processData() , options, buildLink);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
Download.prototype.processDefinitions = function(){
|
||||
var self = this,
|
||||
definitions = self.table.columnManager.getDefinitions(),
|
||||
processedDefinitions = [];
|
||||
|
||||
self.fields = {};
|
||||
|
||||
definitions.forEach(function(column){
|
||||
if(column.field){
|
||||
self.fields[column.field] = column.field.split(".");
|
||||
|
||||
if(column.download !== false){
|
||||
//isolate definiton from defintion object
|
||||
var def = {};
|
||||
|
||||
for(var key in column){
|
||||
def[key] = column[key];
|
||||
}
|
||||
|
||||
if(typeof column.downloadTitle != "undefined"){
|
||||
def.title = column.downloadTitle;
|
||||
}
|
||||
|
||||
processedDefinitions.push(def);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
return processedDefinitions;
|
||||
};
|
||||
|
||||
Download.prototype.processData = function(){
|
||||
var self = this,
|
||||
data = self.table.rowManager.getData(true);
|
||||
|
||||
//add user data processing step;
|
||||
if(typeof self.table.options.downloadDataMutator == "function"){
|
||||
data = self.table.options.downloadDataMutator(data);
|
||||
}
|
||||
|
||||
return data;
|
||||
};
|
||||
|
||||
Download.prototype.triggerDownload = function(data, mime, type, filename){
|
||||
var element = document.createElement('a'),
|
||||
blob = new Blob([data],{type:mime}),
|
||||
filename = filename || "Tabulator." + (typeof type === "function" ? "txt" : type);
|
||||
|
||||
if(navigator.msSaveOrOpenBlob){
|
||||
navigator.msSaveOrOpenBlob(blob, filename);
|
||||
}else{
|
||||
element.setAttribute('href', window.URL.createObjectURL(blob));
|
||||
|
||||
//set file title
|
||||
element.setAttribute('download', filename);
|
||||
|
||||
//trigger download
|
||||
element.style.display = 'none';
|
||||
document.body.appendChild(element);
|
||||
element.click();
|
||||
|
||||
//remove temporary link element
|
||||
document.body.removeChild(element);
|
||||
}
|
||||
};
|
||||
|
||||
//nested field lookup
|
||||
Download.prototype.getFieldValue = function(field, data){
|
||||
var dataObj = data,
|
||||
structure = this.fields[field],
|
||||
length = structure.length,
|
||||
output;
|
||||
|
||||
for(let i = 0; i < length; i++){
|
||||
|
||||
dataObj = dataObj[structure[i]];
|
||||
|
||||
output = dataObj;
|
||||
|
||||
if(!dataObj){
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return output;
|
||||
};
|
||||
|
||||
|
||||
//downloaders
|
||||
Download.prototype.downloaders = {
|
||||
csv:function(columns, data, options, setFileContents){
|
||||
var self = this,
|
||||
titles = [],
|
||||
fields = [],
|
||||
delimiter = options && options.delimiter ? options.delimiter : ",",
|
||||
fileContents;
|
||||
|
||||
//get field lists
|
||||
columns.forEach(function(column){
|
||||
if(column.field){
|
||||
titles.push('"' + String(column.title).split('"').join('""') + '"');
|
||||
fields.push(column.field);
|
||||
}
|
||||
})
|
||||
|
||||
//generate header row
|
||||
fileContents = [titles.join(delimiter)];
|
||||
|
||||
//generate each row of the table
|
||||
data.forEach(function(row){
|
||||
var rowData = [];
|
||||
|
||||
fields.forEach(function(field){
|
||||
var value = self.getFieldValue(field, row);
|
||||
|
||||
switch(typeof value){
|
||||
case "object":
|
||||
value = JSON.stringify(value);
|
||||
break;
|
||||
|
||||
case "undefined":
|
||||
case "null":
|
||||
value = "";
|
||||
break;
|
||||
|
||||
default:
|
||||
value = value;
|
||||
}
|
||||
|
||||
//escape uotation marks
|
||||
rowData.push('"' + String(value).split('"').join('""') + '"');
|
||||
})
|
||||
|
||||
fileContents.push(rowData.join(delimiter));
|
||||
});
|
||||
|
||||
setFileContents(fileContents.join("\n"), "text/csv");
|
||||
},
|
||||
|
||||
json:function(columns, data, options, setFileContents){
|
||||
var fileContents = JSON.stringify(data, null, '\t');
|
||||
|
||||
setFileContents(fileContents, "application/json");
|
||||
},
|
||||
|
||||
xlsx:function(columns, data, options, setFileContents){
|
||||
var self = this,
|
||||
titles = [],
|
||||
fields = [],
|
||||
rows = [],
|
||||
workbook = { SheetNames:["Sheet1"], Sheets:{} },
|
||||
worksheet, output;
|
||||
|
||||
//convert rows to worksheet
|
||||
function rowsToSheet(){
|
||||
var sheet = {};
|
||||
var range = {s: {c:0, r:0}, e: {c:fields.length, r:rows.length }};
|
||||
|
||||
rows.forEach(function(row, i){
|
||||
row.forEach(function(value, j){
|
||||
var cell = {v: typeof value == "undefined" || value === null ? "" : value};
|
||||
|
||||
if(cell != null){
|
||||
switch(typeof cell.v){
|
||||
case "number":
|
||||
cell.t = 'n';
|
||||
break;
|
||||
case "boolean":
|
||||
cell.t = 'b';
|
||||
break;
|
||||
default:
|
||||
cell.t = 's';
|
||||
break;
|
||||
}
|
||||
|
||||
sheet[XLSX.utils.encode_cell({c:j,r:i})] = cell
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
sheet['!ref'] = XLSX.utils.encode_range(range);
|
||||
|
||||
return sheet;
|
||||
}
|
||||
|
||||
//convert workbook to binary array
|
||||
function s2ab(s) {
|
||||
var buf = new ArrayBuffer(s.length);
|
||||
var view = new Uint8Array(buf);
|
||||
for (var i=0; i!=s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
|
||||
return buf;
|
||||
}
|
||||
|
||||
//get field lists
|
||||
columns.forEach(function(column){
|
||||
if(column.field){
|
||||
titles.push(column.title);
|
||||
fields.push(column.field);
|
||||
}
|
||||
});
|
||||
|
||||
rows.push(titles);
|
||||
|
||||
//generate each row of the table
|
||||
data.forEach(function(row){
|
||||
var rowData = [];
|
||||
|
||||
fields.forEach(function(field){
|
||||
rowData.push(self.getFieldValue(field, row));
|
||||
});
|
||||
|
||||
rows.push(rowData);
|
||||
});
|
||||
|
||||
|
||||
worksheet = rowsToSheet();
|
||||
workbook.Sheets["Sheet1"] = worksheet;
|
||||
|
||||
output = XLSX.write(workbook, {bookType:'xlsx', bookSST:true, type: 'binary'});
|
||||
|
||||
setFileContents(s2ab(output), "application/octet-stream");
|
||||
}
|
||||
};
|
||||
|
||||
Tabulator.registerExtension("download", Download);
|
||||
580
js/tabulator/src/js/extensions/edit.js
Normal file
580
js/tabulator/src/js/extensions/edit.js
Normal file
@ -0,0 +1,580 @@
|
||||
var Edit = function(table){
|
||||
this.table = table; //hold Tabulator object
|
||||
this.currentCell = false; //hold currently editing cell
|
||||
};
|
||||
|
||||
|
||||
//initialize column editor
|
||||
Edit.prototype.initializeColumn = function(column){
|
||||
var self = this,
|
||||
config = {
|
||||
editor:false,
|
||||
blocked:false,
|
||||
check:column.definition.editable,
|
||||
params:column.definition.editorParams || {}
|
||||
};
|
||||
|
||||
//set column editor
|
||||
switch(typeof column.definition.editor){
|
||||
case "string":
|
||||
if(self.editors[column.definition.editor]){
|
||||
config.editor = self.editors[column.definition.editor]
|
||||
}else{
|
||||
console.warn("Editor Error - No such editor found: ", column.definition.editor);
|
||||
}
|
||||
break;
|
||||
|
||||
case "function":
|
||||
config.editor = column.definition.editor;
|
||||
break;
|
||||
|
||||
case "boolean":
|
||||
|
||||
if(column.definition.editor === true){
|
||||
|
||||
if(typeof column.definition.formatter !== "function"){
|
||||
if(self.editors[column.definition.formatter]){
|
||||
config.editor = self.editors[column.definition.formatter];
|
||||
}else{
|
||||
config.editor = self.editors["input"];
|
||||
}
|
||||
}else{
|
||||
console.warn("Editor Error - Cannot auto lookup editor for a custom formatter: ", column.definition.formatter);
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
if(config.editor){
|
||||
column.extensions.edit = config;
|
||||
}
|
||||
};
|
||||
|
||||
Edit.prototype.getCurrentCell = function(){
|
||||
return this.currentCell ? this.currentCell.getComponent() : false;
|
||||
};
|
||||
|
||||
Edit.prototype.clearEditor = function(cell){
|
||||
this.currentCell = false;
|
||||
cell.getElement().removeClass("tabulator-validation-fail");
|
||||
cell.getElement().removeClass("tabulator-editing").empty();
|
||||
cell.row.getElement().removeClass("tabulator-row-editing");
|
||||
};
|
||||
|
||||
//return a formatted value for a cell
|
||||
Edit.prototype.bindEditor = function(cell){
|
||||
var self = this,
|
||||
rendered = function(){},
|
||||
element = cell.getElement(),
|
||||
mouseClick = false;
|
||||
|
||||
//handle successfull value change
|
||||
function success(value){
|
||||
var valid = true;
|
||||
|
||||
if(cell.column.extensions.validate && self.table.extExists("validate")){
|
||||
valid = self.table.extensions.validate.validate(cell.column.extensions.validate, cell.getComponent(), value);
|
||||
}
|
||||
|
||||
if(valid === true){
|
||||
self.clearEditor(cell);
|
||||
cell.setValue(value, true);
|
||||
}else{
|
||||
cell.getElement().addClass("tabulator-validation-fail");
|
||||
rendered();
|
||||
self.table.options.validationFailed(cell.getComponent(), value, valid);
|
||||
}
|
||||
};
|
||||
|
||||
//handle aborted edit
|
||||
function cancel(){
|
||||
self.clearEditor(cell);
|
||||
cell.setValueActual(cell.getValue());
|
||||
self.table.options.cellEditCancelled(cell.getComponent())
|
||||
};
|
||||
|
||||
element.attr("tabindex", 0);
|
||||
|
||||
element.on("click", function(e){
|
||||
if(!$(this).hasClass("tabulator-editing")){
|
||||
$(this).focus();
|
||||
}
|
||||
});
|
||||
|
||||
element.on("mousedown", function(e){
|
||||
mouseClick = true;
|
||||
});
|
||||
|
||||
element.on("focus", function(e){
|
||||
var allowEdit = true,
|
||||
cellEditor;
|
||||
|
||||
self.currentCell = cell;
|
||||
|
||||
if(mouseClick){
|
||||
mouseClick = false;
|
||||
|
||||
if(cell.column.cellEvents.cellClick){
|
||||
cell.column.cellEvents.cellClick(e, cell.getComponent());
|
||||
}
|
||||
}
|
||||
|
||||
function onRendered(callback){
|
||||
rendered = callback;
|
||||
}
|
||||
|
||||
if(!cell.column.extensions.edit.blocked){
|
||||
e.stopPropagation();
|
||||
|
||||
if(typeof cell.column.extensions.edit.check == "function"){
|
||||
allowEdit = cell.column.extensions.edit.check(cell.getComponent());
|
||||
}
|
||||
|
||||
if(allowEdit){
|
||||
|
||||
self.table.options.cellEditing(cell.getComponent());
|
||||
|
||||
cellEditor = cell.column.extensions.edit.editor.call(self, cell.getComponent(), onRendered, success, cancel, cell.column.extensions.edit.params);
|
||||
|
||||
//if editor returned, add to DOM, if false, abort edit
|
||||
if(cellEditor !== false){
|
||||
element.addClass("tabulator-editing");
|
||||
cell.row.getElement().addClass("tabulator-row-editing");
|
||||
element.empty();
|
||||
element.append(cellEditor);
|
||||
|
||||
//trigger onRendered Callback
|
||||
rendered();
|
||||
|
||||
//prevent editing from triggering rowClick event
|
||||
element.children().click(function(e){
|
||||
e.stopPropagation();
|
||||
})
|
||||
}else{
|
||||
element.blur();
|
||||
}
|
||||
}else{
|
||||
element.blur();
|
||||
}
|
||||
}else{
|
||||
element.blur();
|
||||
}
|
||||
|
||||
});
|
||||
};
|
||||
|
||||
//default data editors
|
||||
Edit.prototype.editors = {
|
||||
|
||||
//input element
|
||||
input:function(cell, onRendered, success, cancel, editorParams){
|
||||
|
||||
//create and style input
|
||||
var input = $("<input type='text'/>");
|
||||
|
||||
input.css({
|
||||
"padding":"4px",
|
||||
"width":"100%",
|
||||
"box-sizing":"border-box",
|
||||
})
|
||||
.val(cell.getValue());
|
||||
|
||||
onRendered(function(){
|
||||
input.focus();
|
||||
input.css("height","100%");
|
||||
});
|
||||
|
||||
//submit new value on blur
|
||||
input.on("change blur", function(e){
|
||||
if(input.val() != cell.getValue()){
|
||||
success(input.val());
|
||||
}else{
|
||||
cancel();
|
||||
}
|
||||
});
|
||||
|
||||
//submit new value on enter
|
||||
input.on("keydown", function(e){
|
||||
if(e.keyCode == 13){
|
||||
success(input.val());
|
||||
}
|
||||
|
||||
if(e.keyCode == 27){
|
||||
cancel();
|
||||
}
|
||||
});
|
||||
|
||||
return input;
|
||||
},
|
||||
|
||||
//resizable text area element
|
||||
textarea:function(cell, onRendered, success, cancel, editorParams){
|
||||
var self = this,
|
||||
cellValue = cell.getValue(),
|
||||
value = String(typeof cellValue == "null" || typeof cellValue == "undefined" ? "" : cellValue),
|
||||
count = (value.match(/(?:\r\n|\r|\n)/g) || []).length + 1,
|
||||
input = $("<textarea></textarea>"),
|
||||
scrollHeight = 0;
|
||||
|
||||
//create and style input
|
||||
input.css({
|
||||
"display":"block",
|
||||
"height":"100%",
|
||||
"width":"100%",
|
||||
"padding":"2px",
|
||||
"box-sizing":"border-box",
|
||||
"white-space":"pre-wrap",
|
||||
"resize": "none",
|
||||
})
|
||||
.val(value);
|
||||
|
||||
onRendered(function(){
|
||||
input.focus();
|
||||
input.css("height","100%");
|
||||
});
|
||||
|
||||
//submit new value on blur
|
||||
input.on("change blur", function(e){
|
||||
if(input.val() != cell.getValue()){
|
||||
success(input.val());
|
||||
setTimeout(function(){
|
||||
cell.getRow().normalizeHeight();
|
||||
},300)
|
||||
}else{
|
||||
cancel();
|
||||
}
|
||||
});
|
||||
|
||||
input.on("keyup", function(){
|
||||
|
||||
input.css({"height": ""});
|
||||
|
||||
var heightNow = input[0].scrollHeight;
|
||||
input.css({"height": heightNow});
|
||||
|
||||
if(heightNow != scrollHeight){
|
||||
scrollHeight = heightNow;
|
||||
cell.getRow().normalizeHeight();
|
||||
}
|
||||
});
|
||||
|
||||
input.on("keydown", function(e){
|
||||
if(e.keyCode == 27){
|
||||
cancel();
|
||||
}
|
||||
});
|
||||
|
||||
return input;
|
||||
},
|
||||
|
||||
//input element with type of number
|
||||
number:function(cell, onRendered, success, cancel, editorParams){
|
||||
var input = $("<input type='number'/>");
|
||||
|
||||
//create and style input
|
||||
input.css({
|
||||
"padding":"4px",
|
||||
"width":"100%",
|
||||
"box-sizing":"border-box",
|
||||
})
|
||||
.val(cell.getValue());
|
||||
|
||||
onRendered(function(){
|
||||
input.focus();
|
||||
input.css("height","100%");
|
||||
});
|
||||
|
||||
//submit new value on blur
|
||||
input.on("blur", function(e){
|
||||
var value = input.val();
|
||||
|
||||
if(!isNaN(value)){
|
||||
value = Number(value);
|
||||
}
|
||||
|
||||
if(value != cell.getValue()){
|
||||
success(value);
|
||||
}else{
|
||||
cancel();
|
||||
}
|
||||
});
|
||||
|
||||
//submit new value on enter
|
||||
input.on("keydown", function(e){
|
||||
var value;
|
||||
|
||||
if(e.keyCode == 13){
|
||||
value = input.val();
|
||||
|
||||
if(!isNaN(value)){
|
||||
value = Number(value);
|
||||
}
|
||||
|
||||
success(value);
|
||||
}
|
||||
|
||||
if(e.keyCode == 27){
|
||||
cancel();
|
||||
}
|
||||
});
|
||||
|
||||
return input;
|
||||
},
|
||||
|
||||
//start rating
|
||||
star:function(cell, onRendered, success, cancel, editorParams){
|
||||
var element = cell.getElement(),
|
||||
value = cell.getValue(),
|
||||
maxStars = $("svg", element).length || 5,
|
||||
size = $("svg:first", element).attr("width") || 14,
|
||||
stars=$("<div style='vertical-align:middle; padding:4px; display:inline-block; vertical-align:middle;'></div>"),
|
||||
starActive = $('<svg width="' + size + '" height="' + size + '" class="tabulator-star-active" viewBox="0 0 512 512" xml:space="preserve" style="padding:0 1px;"><polygon fill="#488CE9" stroke="#014AAE" stroke-width="37.6152" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="259.216,29.942 330.27,173.919 489.16,197.007 374.185,309.08 401.33,467.31 259.216,392.612 117.104,467.31 144.25,309.08 29.274,197.007 188.165,173.919 "/></svg>'),
|
||||
starInactive = $('<svg width="' + size + '" height="' + size + '" class="tabulator-star-inactive" viewBox="0 0 512 512" xml:space="preserve" style="padding:0 1px;"><polygon fill="#010155" stroke="#686868" stroke-width="37.6152" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="259.216,29.942 330.27,173.919 489.16,197.007 374.185,309.08 401.33,467.31 259.216,392.612 117.104,467.31 144.25,309.08 29.274,197.007 188.165,173.919 "/></svg>');
|
||||
|
||||
|
||||
//change number of active stars
|
||||
var starChange = function(element){
|
||||
if($(".tabulator-star-active", element.closest("div")).length != element.prevAll("svg").length + 1){
|
||||
element.prevAll("svg").replaceWith(starActive.clone());
|
||||
element.nextAll("svg").replaceWith(starInactive.clone());
|
||||
element.replaceWith(starActive.clone());
|
||||
}
|
||||
}
|
||||
|
||||
value = parseInt(value) < maxStars ? parseInt(value) : maxStars;
|
||||
|
||||
for(var i=1;i<= maxStars;i++){
|
||||
let nextStar = i <= value ? starActive : starInactive;
|
||||
stars.append(nextStar.clone());
|
||||
}
|
||||
|
||||
stars.on("mouseover", "svg", function(e){
|
||||
e.stopPropagation();
|
||||
starChange($(this));
|
||||
});
|
||||
|
||||
stars.on("mouseover", function(e){
|
||||
$("svg", $(this)).replaceWith(starInactive.clone());
|
||||
});
|
||||
|
||||
stars.on("click", function(e){
|
||||
success(0);
|
||||
});
|
||||
|
||||
stars.on("click", "svg", function(e){
|
||||
e.stopPropagation();
|
||||
success($(this).prevAll("svg").length + 1);
|
||||
});
|
||||
|
||||
element.css({
|
||||
"white-space": "nowrap",
|
||||
"overflow": "hidden",
|
||||
"text-overflow": "ellipsis",
|
||||
});
|
||||
|
||||
element.on("blur", function(){
|
||||
cancel();
|
||||
});
|
||||
|
||||
//allow key based navigation
|
||||
element.on("keydown", function(e){
|
||||
switch(e.keyCode){
|
||||
case 39: //right arrow
|
||||
starChange($(".tabulator-star-inactive:first", stars));
|
||||
break;
|
||||
|
||||
case 37: //left arrow
|
||||
let prevstar = $(".tabulator-star-active:last", stars).prev("svg");
|
||||
|
||||
if(prevstar.length){
|
||||
starChange(prevstar);
|
||||
}else{
|
||||
$("svg", stars).replaceWith(starInactive.clone());
|
||||
}
|
||||
break;
|
||||
|
||||
case 13: //enter
|
||||
success($(".tabulator-star-active", stars).length);
|
||||
break;
|
||||
|
||||
case 27: //escape
|
||||
cancel();
|
||||
break;
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
return stars;
|
||||
},
|
||||
|
||||
//draggable progress bar
|
||||
progress:function(cell, onRendered, success, cancel, editorParams){
|
||||
var element = cell.getElement(),
|
||||
max = $("div", element).data("max"),
|
||||
min = $("div", element).data("min"),
|
||||
percent = (max - min) / 100,
|
||||
value = cell.getValue() || 0,
|
||||
handle = $("<div class='tabulator-progress-handle' style='position:absolute; right:0; top:0; bottom:0; width:5px;'></div>"),
|
||||
bar;
|
||||
|
||||
var newVal = function(){
|
||||
var calcVal = (percent * Math.round(bar.outerWidth() / (element.width()/100))) + min;
|
||||
success(calcVal);
|
||||
element.attr("aria-valuenow", calcVal).attr("aria-label", value);
|
||||
}
|
||||
|
||||
//make sure value is in range
|
||||
value = parseFloat(value) <= max ? parseFloat(value) : max;
|
||||
value = parseFloat(value) >= min ? parseFloat(value) : min;
|
||||
|
||||
//workout percentage
|
||||
value = 100 - Math.round((value - min) / percent);
|
||||
|
||||
bar = $("<div style='position:absolute; top:8px; bottom:8px; left:4px; right:" + value + "%; margin-right:4px; background-color:#488CE9; display:inline-block; max-width:100%; min-width:0%;' data-max='" + max + "' data-min='" + min + "'></div>"),
|
||||
|
||||
element.css({
|
||||
padding:"0 4px",
|
||||
});
|
||||
|
||||
element.attr("aria-valuemin", min).attr("aria-valuemax", max);
|
||||
|
||||
bar.append(handle);
|
||||
|
||||
handle.on("mousedown", function(e){
|
||||
bar.data("mouseDrag", e.screenX);
|
||||
bar.data("mouseDragWidth", bar.outerWidth());
|
||||
});
|
||||
|
||||
handle.on("mouseover", function(){$(this).css({cursor:"ew-resize"})});
|
||||
|
||||
element.on("mousemove", function(e){
|
||||
if(bar.data("mouseDrag")){
|
||||
bar.css({width: bar.data("mouseDragWidth") + (e.screenX - bar.data("mouseDrag"))})
|
||||
}
|
||||
});
|
||||
|
||||
element.on("mouseup", function(e){
|
||||
if(bar.data("mouseDrag")){
|
||||
e.stopPropagation();
|
||||
e.stopImmediatePropagation();
|
||||
|
||||
bar.data("mouseDragOut", true);
|
||||
bar.data("mouseDrag", false);
|
||||
bar.data("mouseDragWidth", false);
|
||||
|
||||
newVal();
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
//allow key based navigation
|
||||
element.on("keydown", function(e){
|
||||
switch(e.keyCode){
|
||||
case 39: //right arrow
|
||||
bar.css({"width" : bar.width() + element.width()/100});
|
||||
break;
|
||||
|
||||
case 37: //left arrow
|
||||
bar.css({"width" : bar.width() - element.width()/100});
|
||||
break;
|
||||
|
||||
case 13: //enter
|
||||
newVal();
|
||||
break;
|
||||
|
||||
case 27: //escape
|
||||
cancel();
|
||||
break;
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
element.on("blur", function(){
|
||||
cancel();
|
||||
});
|
||||
|
||||
return bar;
|
||||
},
|
||||
|
||||
//checkbox
|
||||
tickCross:function(cell, onRendered, success, cancel, editorParams){
|
||||
var value = cell.getValue(),
|
||||
input = $("<input type='checkbox'/>");
|
||||
|
||||
//create and style input
|
||||
input.css({
|
||||
"margin-top":"5px",
|
||||
"box-sizing":"border-box",
|
||||
})
|
||||
.val(value);
|
||||
|
||||
onRendered(function(){
|
||||
input.focus();
|
||||
});
|
||||
|
||||
if(value === true || value === "true" || value === "True" || value === 1){
|
||||
input.prop("checked", true);
|
||||
}else{
|
||||
input.prop("checked", false);
|
||||
}
|
||||
|
||||
//submit new value on blur
|
||||
input.on("change blur", function(e){
|
||||
success(input.is(":checked"));
|
||||
});
|
||||
|
||||
//submit new value on enter
|
||||
input.on("keydown", function(e){
|
||||
if(e.keyCode == 13){
|
||||
success(input.is(":checked"));
|
||||
}
|
||||
if(e.keyCode == 27){
|
||||
cancel();
|
||||
}
|
||||
});
|
||||
|
||||
return input;
|
||||
},
|
||||
|
||||
//checkbox
|
||||
tick:function(cell, onRendered, success, cancel, editorParams){
|
||||
var value = cell.getValue(),
|
||||
input = $("<input type='checkbox'/>");
|
||||
|
||||
//create and style input
|
||||
input.css({
|
||||
"margin-top":"5px",
|
||||
"box-sizing":"border-box",
|
||||
})
|
||||
.val(value);
|
||||
|
||||
onRendered(function(){
|
||||
input.focus();
|
||||
});
|
||||
|
||||
if(value === true || value === "true" || value === "True" || value === 1){
|
||||
input.prop("checked", true);
|
||||
}else{
|
||||
input.prop("checked", false);
|
||||
}
|
||||
|
||||
//submit new value on blur
|
||||
input.on("change blur", function(e){
|
||||
success(input.is(":checked"));
|
||||
});
|
||||
|
||||
//submit new value on enter
|
||||
input.on("keydown", function(e){
|
||||
if(e.keyCode == 13){
|
||||
success(input.is(":checked"));
|
||||
}
|
||||
if(e.keyCode == 27){
|
||||
cancel();
|
||||
}
|
||||
});
|
||||
|
||||
return input;
|
||||
},
|
||||
};
|
||||
|
||||
Tabulator.registerExtension("edit", Edit);
|
||||
453
js/tabulator/src/js/extensions/filter.js
Normal file
453
js/tabulator/src/js/extensions/filter.js
Normal file
@ -0,0 +1,453 @@
|
||||
var Filter = function(table){
|
||||
|
||||
this.table = table; //hold Tabulator object
|
||||
|
||||
this.filterList = []; //hold filter list
|
||||
this.headerFilters = {}; //hold column filters
|
||||
this.headerFilterElements = []; //hold header filter elements for manipulation
|
||||
|
||||
this.changed = false; //has filtering changed since last render
|
||||
};
|
||||
|
||||
|
||||
//initialize column header filter
|
||||
Filter.prototype.initializeColumn = function(column){
|
||||
var self = this,
|
||||
field = column.getField(),
|
||||
filterElement, editor, editorElement, cellWrapper, typingTimer, tagType, attrType;
|
||||
|
||||
//handle successfull value change
|
||||
function success(value){
|
||||
var filterType = tagType == "input" && attrType == "text" ? "partial" : "match",
|
||||
type = "",
|
||||
filterFunc;
|
||||
|
||||
if(value){
|
||||
switch(typeof column.definition.headerFilterFunc){
|
||||
case "string":
|
||||
if(self.filters[column.definition.headerFilterFunc]){
|
||||
type = column.definition.headerFilterFunc;
|
||||
filterFunc = function(data){
|
||||
return self.filters[column.definition.headerFilterFunc](value, column.getFieldValue(data));
|
||||
}
|
||||
}else{
|
||||
console.warn("Header Filter Error - Matching filter function not found: ", column.definition.headerFilterFunc);
|
||||
}
|
||||
break;
|
||||
|
||||
case "function":
|
||||
filterFunc = function(data){
|
||||
return column.definition.headerFilterFunc(value, column.getFieldValue(data), data, column.definition.headerFilterFuncParams || {});
|
||||
}
|
||||
|
||||
type = filterFunc;
|
||||
break;
|
||||
}
|
||||
|
||||
if(!filterFunc){
|
||||
|
||||
switch(filterType){
|
||||
case "partial":
|
||||
filterFunc = function(data){
|
||||
return String(column.getFieldValue(data)).toLowerCase().indexOf(String(value).toLowerCase()) > -1;
|
||||
}
|
||||
type = "like";
|
||||
break;
|
||||
|
||||
default:
|
||||
filterFunc = function(data){
|
||||
return column.getFieldValue(data) == value;
|
||||
}
|
||||
type = "=";
|
||||
}
|
||||
}
|
||||
|
||||
self.headerFilters[field] = {value:value, func:filterFunc, type:type};
|
||||
|
||||
}else{
|
||||
delete self.headerFilters[field];
|
||||
}
|
||||
|
||||
self.changed = true;
|
||||
|
||||
self.table.rowManager.filterRefresh();
|
||||
};
|
||||
|
||||
//handle aborted edit
|
||||
function cancel(){};
|
||||
|
||||
if(field){
|
||||
|
||||
filterElement = $("<div class='tabulator-header-filter'></div>");
|
||||
|
||||
//set column editor
|
||||
switch(typeof column.definition.headerFilter){
|
||||
case "string":
|
||||
if(self.table.extensions.edit.editors[column.definition.headerFilter]){
|
||||
editor = self.table.extensions.edit.editors[column.definition.headerFilter];
|
||||
}else{
|
||||
console.warn("Filter Error - Cannot build header filter, No such editor found: ", column.definition.editor);
|
||||
}
|
||||
break;
|
||||
|
||||
case "function":
|
||||
editor = column.definition.headerFilter;
|
||||
break;
|
||||
|
||||
case "boolean":
|
||||
if(column.extensions.edit && column.extensions.edit.editor){
|
||||
editor = column.extensions.edit.editor;
|
||||
}else{
|
||||
if(column.definition.formatter && self.table.extensions.edit.editors[column.definition.formatter]){
|
||||
editor = self.table.extensions.edit.editors[column.definition.formatter];
|
||||
}else{
|
||||
editor = self.table.extensions.edit.editors["input"];
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
if(editor){
|
||||
|
||||
cellWrapper = {
|
||||
getValue:function(){
|
||||
return "";
|
||||
},
|
||||
getField:function(){
|
||||
return column.definition.field;
|
||||
},
|
||||
getElement:function(){
|
||||
return filterElement;
|
||||
}
|
||||
};
|
||||
|
||||
editorElement = editor.call(self, cellWrapper, function(){}, success, cancel, column.definition.headerFilterParams || {});
|
||||
|
||||
//set Placeholder Text
|
||||
if(field){
|
||||
self.table.extensions.localize.bind("headerFilters.columns." + column.definition.field, function(value){
|
||||
editorElement.attr("placeholder", typeof value !== "undefined" && value ? value : self.table.extensions.localize.getText("headerFilters.default"));
|
||||
});
|
||||
}else{
|
||||
self.table.extensions.localize.bind("headerFilters.default", function(value){
|
||||
editorElement.attr("placeholdder", typeof self.column.definition.headerFilterPlaceholder !== "undefined" && self.column.definition.headerFilterPlaceholder ? self.column.definition.headerFilterPlaceholder : value);
|
||||
});
|
||||
}
|
||||
|
||||
//focus on element on click
|
||||
editorElement.on("click", function(e){
|
||||
e.stopPropagation();
|
||||
$(this).focus();
|
||||
});
|
||||
|
||||
//live update filters as user types
|
||||
typingTimer = false;
|
||||
|
||||
editorElement.on("keyup search", function(e){
|
||||
var element = $(this);
|
||||
|
||||
if(typingTimer){
|
||||
clearTimeout(typingTimer);
|
||||
}
|
||||
|
||||
typingTimer = setTimeout(function(){
|
||||
success(element.val());
|
||||
},300);
|
||||
});
|
||||
|
||||
//update number filtered columns on change
|
||||
attrType = editorElement.attr("type") ? editorElement.attr("type").toLowerCase() : "" ;
|
||||
if(attrType == "number"){
|
||||
editorElement.on("change", function(e){
|
||||
success($(this).val());
|
||||
});
|
||||
}
|
||||
|
||||
//change text inputs to search inputs to allow for clearing of field
|
||||
if(attrType == "text"){
|
||||
editorElement.attr("type", "search");
|
||||
editorElement.off("change blur"); //prevent blur from triggering filter and preventing selection click
|
||||
}
|
||||
|
||||
//prevent input and select elements from propegating click to column sorters etc
|
||||
tagType = editorElement.prop("tagName").toLowerCase()
|
||||
if(tagType == "input" || tagType == "select"){
|
||||
editorElement.on("mousedown",function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
}
|
||||
|
||||
filterElement.append(editorElement);
|
||||
|
||||
column.contentElement.append(filterElement);
|
||||
|
||||
self.headerFilterElements.push(editorElement);
|
||||
}
|
||||
}else{
|
||||
console.warn("Filter Error - Cannot add header filter, column has no field set:", column.definition.title);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
//check if the filters has changed since last use
|
||||
Filter.prototype.hasChanged = function(){
|
||||
var changed = this.changed;
|
||||
this.changed = false;
|
||||
return changed;
|
||||
};
|
||||
|
||||
//set standard filters
|
||||
Filter.prototype.setFilter = function(field, type, value){
|
||||
var self = this;
|
||||
|
||||
self.filterList = [];
|
||||
|
||||
if(!Array.isArray(field)){
|
||||
field = [{field:field, type:type, value:value}];
|
||||
}
|
||||
|
||||
self.addFilter(field);
|
||||
|
||||
};
|
||||
|
||||
//add filter to array
|
||||
Filter.prototype.addFilter = function(field, type, value){
|
||||
var self = this,
|
||||
column;
|
||||
|
||||
if(!Array.isArray(field)){
|
||||
field = [{field:field, type:type, value:value}];
|
||||
}
|
||||
|
||||
field.forEach(function(filter){
|
||||
|
||||
var filterFunc = false;
|
||||
|
||||
if(typeof filter.field == "function"){
|
||||
filterFunc = function(data){
|
||||
return filter.field(data, filter.type || {})// pass params to custom filter function
|
||||
}
|
||||
}else{
|
||||
if(self.filters[filter.type]){
|
||||
|
||||
column = self.table.columnManager.getColumnByField(filter.field);
|
||||
|
||||
if(column){
|
||||
filterFunc = function(data){
|
||||
return self.filters[filter.type](filter.value, column.getFieldValue(data));
|
||||
}
|
||||
}else{
|
||||
filterFunc = function(data){
|
||||
return self.filters[filter.type](filter.value, data[filter.field]);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}else{
|
||||
console.warn("Filter Error - No such filter type found, ignoring: ", filter.type);
|
||||
}
|
||||
}
|
||||
|
||||
if(filterFunc){
|
||||
filter.func = filterFunc;
|
||||
self.filterList.push(filter);
|
||||
|
||||
self.changed = true;
|
||||
}
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
//get all filters
|
||||
Filter.prototype.getFilters = function(all, ajax){
|
||||
var self = this,
|
||||
output = [];
|
||||
|
||||
if(all){
|
||||
output = self.getHeaderFilters();
|
||||
}
|
||||
|
||||
self.filterList.forEach(function(filter){
|
||||
output.push({field:filter.field, type:filter.type, value:filter.value});
|
||||
});
|
||||
|
||||
if(ajax){
|
||||
output.forEach(function(item){
|
||||
if(typeof item.type == "function"){
|
||||
item.type = "function";
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return output;
|
||||
};
|
||||
|
||||
//get all filters
|
||||
Filter.prototype.getHeaderFilters = function(){
|
||||
var self = this,
|
||||
output = [];
|
||||
|
||||
for(var key in this.headerFilters){
|
||||
output.push({field:key, type:this.headerFilters[key].type, value:this.headerFilters[key].value});
|
||||
}
|
||||
|
||||
return output;
|
||||
};
|
||||
|
||||
//remove filter from array
|
||||
Filter.prototype.removeFilter = function(field, type, value){
|
||||
var self = this;
|
||||
|
||||
if(!Array.isArray(field)){
|
||||
field = [{field:field, type:type, value:value}];
|
||||
}
|
||||
|
||||
field.forEach(function(filter){
|
||||
var index = -1;
|
||||
|
||||
if(typeof filter.field == "object"){
|
||||
index = self.filterList.findIndex(function(element){
|
||||
return filter === element;
|
||||
});
|
||||
}else{
|
||||
index = self.filterList.findIndex(function(element){
|
||||
return filter.field === element.field && filter.type === element.type && filter.value === element.value
|
||||
});
|
||||
}
|
||||
|
||||
if(index > -1){
|
||||
self.filterList.splice(index, 1);
|
||||
self.changed = true;
|
||||
}else{
|
||||
console.warn("Filter Error - No matching filter type found, ignoring: ", filter.type);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
//clear filters
|
||||
Filter.prototype.clearFilter = function(all){
|
||||
this.filterList = [];
|
||||
|
||||
if(all){
|
||||
this.clearHeaderFilter();
|
||||
}
|
||||
|
||||
this.changed = true;
|
||||
};
|
||||
|
||||
//clear header filters
|
||||
Filter.prototype.clearHeaderFilter = function(){
|
||||
this.headerFilters = {};
|
||||
|
||||
this.headerFilterElements.forEach(function(element){
|
||||
element.val("");
|
||||
});
|
||||
|
||||
self.changed = true;
|
||||
};
|
||||
|
||||
//filter row array
|
||||
Filter.prototype.filter = function(rowList){
|
||||
var self = this,
|
||||
activeRows = [],
|
||||
activeRowComponents = [];
|
||||
|
||||
if(self.table.options.dataFiltering){
|
||||
self.table.options.dataFiltering(self.getFilters());
|
||||
}
|
||||
|
||||
if(!self.table.options.ajaxFiltering && (self.filterList.length || Object.keys(self.headerFilters).length)){
|
||||
|
||||
rowList.forEach(function(row){
|
||||
if(self.filterRow(row)){
|
||||
activeRows.push(row);
|
||||
}
|
||||
});
|
||||
|
||||
activeRows;
|
||||
|
||||
}else{
|
||||
activeRows = rowList.slice(0);
|
||||
}
|
||||
|
||||
if(self.table.options.dataFiltered){
|
||||
|
||||
activeRows.forEach(function(row){
|
||||
activeRowComponents.push(row.getComponent());
|
||||
});
|
||||
|
||||
self.table.options.dataFiltered(self.getFilters(), activeRowComponents);
|
||||
}
|
||||
|
||||
return activeRows;
|
||||
|
||||
};
|
||||
|
||||
//filter individual row
|
||||
Filter.prototype.filterRow = function(row){
|
||||
var self = this,
|
||||
match = true,
|
||||
data = row.getData();
|
||||
|
||||
self.filterList.forEach(function(filter){
|
||||
if(!filter.func(data)){
|
||||
match = false;
|
||||
}
|
||||
});
|
||||
|
||||
for(var field in self.headerFilters){
|
||||
if(!self.headerFilters[field].func(data)){
|
||||
match = false;
|
||||
}
|
||||
}
|
||||
|
||||
return match;
|
||||
};
|
||||
|
||||
|
||||
//list of available filters
|
||||
Filter.prototype.filters ={
|
||||
|
||||
//equal to
|
||||
"=":function(filterVal, rowVal){
|
||||
return rowVal == filterVal ? true : false;
|
||||
},
|
||||
|
||||
//less than
|
||||
"<":function(filterVal, rowVal){
|
||||
return rowVal < filterVal ? true : false;
|
||||
},
|
||||
|
||||
//less than or equal to
|
||||
"<=":function(filterVal, rowVal){
|
||||
return rowVal <= filterVal ? true : false;
|
||||
},
|
||||
|
||||
//greater than
|
||||
">":function(filterVal, rowVal){
|
||||
return rowVal > filterVal ? true : false;
|
||||
},
|
||||
|
||||
//greater than or equal to
|
||||
">=":function(filterVal, rowVal){
|
||||
return rowVal >= filterVal ? true : false;
|
||||
},
|
||||
|
||||
//not equal to
|
||||
"!=":function(filterVal, rowVal){
|
||||
return rowVal != filterVal ? true : false;
|
||||
},
|
||||
|
||||
//contains the string
|
||||
"like":function(filterVal, rowVal){
|
||||
if(filterVal === null || typeof filterVal === "undefined"){
|
||||
return rowVal === filterVal ? true : false;
|
||||
}else{
|
||||
return rowVal.toLowerCase().indexOf(filterVal.toLowerCase()) > -1 ? true : false;
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
Tabulator.registerExtension("filter", Filter);
|
||||
273
js/tabulator/src/js/extensions/format.js
Normal file
273
js/tabulator/src/js/extensions/format.js
Normal file
@ -0,0 +1,273 @@
|
||||
var Format = function(table){
|
||||
this.table = table; //hold Tabulator object
|
||||
};
|
||||
|
||||
//initialize column formatter
|
||||
Format.prototype.initializeColumn = function(column){
|
||||
var self = this,
|
||||
config = {params:column.definition.formatterParams || {}};
|
||||
|
||||
//set column formatter
|
||||
switch(typeof column.definition.formatter){
|
||||
case "string":
|
||||
if(self.formatters[column.definition.formatter]){
|
||||
config.formatter = self.formatters[column.definition.formatter]
|
||||
}else{
|
||||
console.warn("Formatter Error - No such formatter found: ", column.definition.formatter);
|
||||
config.formatter = self.formatters.plaintext;
|
||||
}
|
||||
break;
|
||||
|
||||
case "function":
|
||||
config.formatter = column.definition.formatter;
|
||||
break;
|
||||
|
||||
default:
|
||||
config.formatter = self.formatters.plaintext;
|
||||
break;
|
||||
}
|
||||
|
||||
column.extensions.format = config;
|
||||
};
|
||||
|
||||
//return a formatted value for a cell
|
||||
Format.prototype.formatValue = function(cell){
|
||||
return cell.column.extensions.format.formatter.call(this, cell.getComponent(), cell.column.extensions.format.params);
|
||||
};
|
||||
|
||||
|
||||
Format.prototype.sanitizeHTML = function(value){
|
||||
if(value){
|
||||
var entityMap = {
|
||||
'&': '&',
|
||||
'<': '<',
|
||||
'>': '>',
|
||||
'"': '"',
|
||||
"'": ''',
|
||||
'/': '/',
|
||||
'`': '`',
|
||||
'=': '='
|
||||
};
|
||||
|
||||
return String(value).replace(/[&<>"'`=\/]/g, function (s) {
|
||||
return entityMap[s];
|
||||
});
|
||||
}else{
|
||||
return value;
|
||||
}
|
||||
};
|
||||
|
||||
Format.prototype.emptyToSpace = function(value){
|
||||
return value === null ? " " : value;
|
||||
};
|
||||
|
||||
//get formatter for cell
|
||||
Format.prototype.getFormatter = function(formatter){
|
||||
var formatter;
|
||||
|
||||
switch(typeof formatter){
|
||||
case "string":
|
||||
if(this.formatters[formatter]){
|
||||
formatter = this.formatters[formatter]
|
||||
}else{
|
||||
console.warn("Formatter Error - No such formatter found: ", formatter);
|
||||
formatter = this.formatters.plaintext;
|
||||
}
|
||||
break;
|
||||
|
||||
case "function":
|
||||
formatter = formatter;
|
||||
break;
|
||||
|
||||
default:
|
||||
formatter = this.formatters.plaintext;
|
||||
break;
|
||||
}
|
||||
|
||||
return formatter;
|
||||
|
||||
};
|
||||
|
||||
//default data formatters
|
||||
Format.prototype.formatters = {
|
||||
//plain text value
|
||||
plaintext:function(cell, formatterParams){
|
||||
return this.emptyToSpace(this.sanitizeHTML(cell.getValue()));
|
||||
},
|
||||
|
||||
//html text value
|
||||
html:function(cell, formatterParams){
|
||||
return cell.getValue();
|
||||
},
|
||||
|
||||
//multiline text area
|
||||
textarea:function(cell, formatterParams){
|
||||
cell.getElement().css({"white-space":"pre-wrap"});
|
||||
return this.emptyToSpace(this.sanitizeHTML(cell.getValue()));
|
||||
},
|
||||
|
||||
//currency formatting
|
||||
money:function(cell, formatterParams){
|
||||
var floatVal = parseFloat(cell.getValue()),
|
||||
number, integer, decimal, rgx;
|
||||
|
||||
var decimalSym = formatterParams.decimal || ".";
|
||||
var thousandSym = formatterParams.thousand || ",";
|
||||
var symbol = formatterParams.symbol || "";
|
||||
var after = !!formatterParams.symbolAfter;
|
||||
var precision = typeof formatterParams.precision !== "undefined" ? formatterParams.precision : 2;
|
||||
|
||||
if(isNaN(floatVal)){
|
||||
return this.emptyToSpace(this.sanitizeHTML(cell.getValue()));
|
||||
}
|
||||
|
||||
number = precision !== false ? floatVal.toFixed(precision) : floatVal;
|
||||
number = number.split(".");
|
||||
|
||||
integer = number[0];
|
||||
decimal = number.length > 1 ? decimalSym + number[1] : "";
|
||||
|
||||
rgx = /(\d+)(\d{3})/;
|
||||
|
||||
while (rgx.test(integer)){
|
||||
integer = integer.replace(rgx, "$1" + thousandSym + "$2");
|
||||
}
|
||||
|
||||
return after ? integer + decimal + symbol : symbol + integer + decimal;
|
||||
},
|
||||
|
||||
//clickable mailto link
|
||||
email:function(cell, formatterParams){
|
||||
var value = this.sanitizeHTML(cell.getValue());
|
||||
return "<a href='mailto:" + value + "'>" + this.emptyToSpace(value) + "</a>";
|
||||
},
|
||||
|
||||
//clickable anchor tag
|
||||
link:function(cell, formatterParams){
|
||||
var value = this.sanitizeHTML(cell.getValue());
|
||||
return "<a href='" + value + "'>" + this.emptyToSpace(value) + "</a>";
|
||||
},
|
||||
|
||||
//image element
|
||||
image:function(cell, formatterParams){
|
||||
var value = this.sanitizeHTML(cell.getValue());
|
||||
return "<img src='" + value + "'/>";
|
||||
},
|
||||
|
||||
//tick or empty cell
|
||||
tick:function(cell, formatterParams){
|
||||
var value = cell.getValue(),
|
||||
element = cell.getElement();
|
||||
|
||||
var tick = '<svg enable-background="new 0 0 24 24" height="14" width="14" viewBox="0 0 24 24" xml:space="preserve" ><path fill="#2DC214" clip-rule="evenodd" d="M21.652,3.211c-0.293-0.295-0.77-0.295-1.061,0L9.41,14.34 c-0.293,0.297-0.771,0.297-1.062,0L3.449,9.351C3.304,9.203,3.114,9.13,2.923,9.129C2.73,9.128,2.534,9.201,2.387,9.351 l-2.165,1.946C0.078,11.445,0,11.63,0,11.823c0,0.194,0.078,0.397,0.223,0.544l4.94,5.184c0.292,0.296,0.771,0.776,1.062,1.07 l2.124,2.141c0.292,0.293,0.769,0.293,1.062,0l14.366-14.34c0.293-0.294,0.293-0.777,0-1.071L21.652,3.211z" fill-rule="evenodd"/></svg>';
|
||||
|
||||
if(value === true || value === "true" || value === "True" || value === 1 || value === "1"){
|
||||
element.attr("aria-checked", true);
|
||||
return tick;
|
||||
}else{
|
||||
element.attr("aria-checked", false);
|
||||
return "";
|
||||
}
|
||||
},
|
||||
|
||||
//tick or cross
|
||||
tickCross:function(cell, formatterParams){
|
||||
var value = cell.getValue(),
|
||||
element = cell.getElement(),
|
||||
tick = '<svg enable-background="new 0 0 24 24" height="14" width="14" viewBox="0 0 24 24" xml:space="preserve" ><path fill="#2DC214" clip-rule="evenodd" d="M21.652,3.211c-0.293-0.295-0.77-0.295-1.061,0L9.41,14.34 c-0.293,0.297-0.771,0.297-1.062,0L3.449,9.351C3.304,9.203,3.114,9.13,2.923,9.129C2.73,9.128,2.534,9.201,2.387,9.351 l-2.165,1.946C0.078,11.445,0,11.63,0,11.823c0,0.194,0.078,0.397,0.223,0.544l4.94,5.184c0.292,0.296,0.771,0.776,1.062,1.07 l2.124,2.141c0.292,0.293,0.769,0.293,1.062,0l14.366-14.34c0.293-0.294,0.293-0.777,0-1.071L21.652,3.211z" fill-rule="evenodd"/></svg>',
|
||||
cross = '<svg enable-background="new 0 0 24 24" height="14" width="14" viewBox="0 0 24 24" xml:space="preserve" ><path fill="#CE1515" d="M22.245,4.015c0.313,0.313,0.313,0.826,0,1.139l-6.276,6.27c-0.313,0.312-0.313,0.826,0,1.14l6.273,6.272 c0.313,0.313,0.313,0.826,0,1.14l-2.285,2.277c-0.314,0.312-0.828,0.312-1.142,0l-6.271-6.271c-0.313-0.313-0.828-0.313-1.141,0 l-6.276,6.267c-0.313,0.313-0.828,0.313-1.141,0l-2.282-2.28c-0.313-0.313-0.313-0.826,0-1.14l6.278-6.269 c0.313-0.312,0.313-0.826,0-1.14L1.709,5.147c-0.314-0.313-0.314-0.827,0-1.14l2.284-2.278C4.308,1.417,4.821,1.417,5.135,1.73 L11.405,8c0.314,0.314,0.828,0.314,1.141,0.001l6.276-6.267c0.312-0.312,0.826-0.312,1.141,0L22.245,4.015z"/></svg>';
|
||||
|
||||
if(value === true || value === "true" || value === "True" || value === 1 || value === "1"){
|
||||
element.attr("aria-checked", true);
|
||||
return tick;
|
||||
}else{
|
||||
element.attr("aria-checked", false);
|
||||
return cross;
|
||||
}
|
||||
},
|
||||
|
||||
//star rating
|
||||
star:function(cell, formatterParams){
|
||||
var value = cell.getValue(),
|
||||
element = cell.getElement(),
|
||||
maxStars = formatterParams && formatterParams.stars ? formatterParams.stars : 5,
|
||||
stars = $("<span style='vertical-align:middle;'></span>"),
|
||||
starActive = $('<svg width="14" height="14" viewBox="0 0 512 512" xml:space="preserve" style="margin:0 1px;"><polygon fill="#FFEA00" stroke="#C1AB60" stroke-width="37.6152" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="259.216,29.942 330.27,173.919 489.16,197.007 374.185,309.08 401.33,467.31 259.216,392.612 117.104,467.31 144.25,309.08 29.274,197.007 188.165,173.919 "/></svg>'),
|
||||
starInactive = $('<svg width="14" height="14" viewBox="0 0 512 512" xml:space="preserve" style="margin:0 1px;"><polygon fill="#D2D2D2" stroke="#686868" stroke-width="37.6152" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="259.216,29.942 330.27,173.919 489.16,197.007 374.185,309.08 401.33,467.31 259.216,392.612 117.104,467.31 144.25,309.08 29.274,197.007 188.165,173.919 "/></svg>');
|
||||
|
||||
value = parseInt(value) < maxStars ? parseInt(value) : maxStars;
|
||||
|
||||
for(var i=1;i<= maxStars;i++){
|
||||
|
||||
var nextStar = i <= value ? starActive : starInactive;
|
||||
|
||||
stars.append(nextStar.clone());
|
||||
}
|
||||
|
||||
element.css({
|
||||
"white-space": "nowrap",
|
||||
"overflow": "hidden",
|
||||
"text-overflow": "ellipsis",
|
||||
});
|
||||
|
||||
element.attr("aria-label", value);
|
||||
|
||||
return stars.html();
|
||||
},
|
||||
|
||||
//progress bar
|
||||
progress:function(cell, formatterParams){ //progress bar
|
||||
var value = this.sanitizeHTML(cell.getValue()) || 0,
|
||||
element = cell.getElement(),
|
||||
max = formatterParams && formatterParams.max ? formatterParams.max : 100,
|
||||
min = formatterParams && formatterParams.min ? formatterParams.min : 0,
|
||||
color = formatterParams && formatterParams.color ? formatterParams.color : "#2DC214",
|
||||
percent;
|
||||
|
||||
//make sure value is in range
|
||||
value = parseFloat(value) <= max ? parseFloat(value) : max;
|
||||
value = parseFloat(value) >= min ? parseFloat(value) : min;
|
||||
|
||||
//workout percentage
|
||||
percent = (max - min) / 100;
|
||||
value = 100 - Math.round((value - min) / percent);
|
||||
|
||||
element.css({
|
||||
"min-width":"30px",
|
||||
"position":"relative",
|
||||
});
|
||||
|
||||
element.attr("aria-label", value);
|
||||
|
||||
return "<div style='position:absolute; top:8px; bottom:8px; left:4px; right:" + value + "%; margin-right:4px; background-color:" + color + "; display:inline-block;' data-max='" + max + "' data-min='" + min + "'></div>";
|
||||
},
|
||||
|
||||
//background color
|
||||
color:function(cell, formatterParams){
|
||||
cell.getElement().css({"background-color":this.sanitizeHTML(cell.getValue())});
|
||||
return "";
|
||||
},
|
||||
|
||||
//tick icon
|
||||
buttonTick:function(cell, formatterParams){
|
||||
return '<svg enable-background="new 0 0 24 24" height="14" width="14" viewBox="0 0 24 24" xml:space="preserve" ><path fill="#2DC214" clip-rule="evenodd" d="M21.652,3.211c-0.293-0.295-0.77-0.295-1.061,0L9.41,14.34 c-0.293,0.297-0.771,0.297-1.062,0L3.449,9.351C3.304,9.203,3.114,9.13,2.923,9.129C2.73,9.128,2.534,9.201,2.387,9.351 l-2.165,1.946C0.078,11.445,0,11.63,0,11.823c0,0.194,0.078,0.397,0.223,0.544l4.94,5.184c0.292,0.296,0.771,0.776,1.062,1.07 l2.124,2.141c0.292,0.293,0.769,0.293,1.062,0l14.366-14.34c0.293-0.294,0.293-0.777,0-1.071L21.652,3.211z" fill-rule="evenodd"/></svg>';
|
||||
},
|
||||
|
||||
//cross icon
|
||||
buttonCross:function(cell, formatterParams){
|
||||
return '<svg enable-background="new 0 0 24 24" height="14" width="14" viewBox="0 0 24 24" xml:space="preserve" ><path fill="#CE1515" d="M22.245,4.015c0.313,0.313,0.313,0.826,0,1.139l-6.276,6.27c-0.313,0.312-0.313,0.826,0,1.14l6.273,6.272 c0.313,0.313,0.313,0.826,0,1.14l-2.285,2.277c-0.314,0.312-0.828,0.312-1.142,0l-6.271-6.271c-0.313-0.313-0.828-0.313-1.141,0 l-6.276,6.267c-0.313,0.313-0.828,0.313-1.141,0l-2.282-2.28c-0.313-0.313-0.313-0.826,0-1.14l6.278-6.269 c0.313-0.312,0.313-0.826,0-1.14L1.709,5.147c-0.314-0.313-0.314-0.827,0-1.14l2.284-2.278C4.308,1.417,4.821,1.417,5.135,1.73 L11.405,8c0.314,0.314,0.828,0.314,1.141,0.001l6.276-6.267c0.312-0.312,0.826-0.312,1.141,0L22.245,4.015z"/></svg>';
|
||||
},
|
||||
|
||||
//current row number
|
||||
rownum:function(cell, formatterParams){
|
||||
return this.table.rowManager.activeRows.indexOf(cell.getRow()._getSelf()) + 1;
|
||||
},
|
||||
|
||||
//row handle
|
||||
handle:function(cell, formatterParams){
|
||||
cell.getElement().addClass("tabulator-row-handle");
|
||||
return "<div class='tabulator-row-handle-box'><div class='tabulator-row-handle-bar'></div><div class='tabulator-row-handle-bar'></div><div class='tabulator-row-handle-bar'></div></div>";
|
||||
},
|
||||
};
|
||||
|
||||
Tabulator.registerExtension("format", Format);
|
||||
162
js/tabulator/src/js/extensions/frozen_columns.js
Normal file
162
js/tabulator/src/js/extensions/frozen_columns.js
Normal file
@ -0,0 +1,162 @@
|
||||
var FrozenColumns = function(table){
|
||||
this.table = table; //hold Tabulator object
|
||||
this.leftColumns = [];
|
||||
this.rightColumns = [];
|
||||
this.leftMargin = 0;
|
||||
this.rightMargin = 0;
|
||||
this.initializationMode = "left";
|
||||
this.active = false;
|
||||
};
|
||||
|
||||
//reset initial state
|
||||
FrozenColumns.prototype.reset = function(){
|
||||
this.initializationMode = "left";
|
||||
this.leftColumns = [];
|
||||
this.rightColumns = [];
|
||||
this.active = false;
|
||||
};
|
||||
|
||||
//initialize specific column
|
||||
FrozenColumns.prototype.initializeColumn = function(column){
|
||||
var config = {margin:0, edge:false};
|
||||
|
||||
if(column.definition.frozen){
|
||||
|
||||
if(!column.parent.isGroup){
|
||||
|
||||
|
||||
if(!column.isGroup){
|
||||
config.position = this.initializationMode;
|
||||
|
||||
if(this.initializationMode == "left"){
|
||||
this.leftColumns.push(column);
|
||||
}else{
|
||||
this.rightColumns.unshift(column);
|
||||
}
|
||||
|
||||
this.active = true;
|
||||
|
||||
column.extensions.frozen = config;
|
||||
}else{
|
||||
console.warn("Frozen Column Error - Column Groups cannot be frozen");
|
||||
}
|
||||
}else{
|
||||
console.warn("Frozen Column Error - Grouped columns cannot be frozen");
|
||||
}
|
||||
|
||||
}else{
|
||||
this.initializationMode = "right";
|
||||
}
|
||||
};
|
||||
|
||||
//layout columns appropropriatly
|
||||
FrozenColumns.prototype.layout = function(){
|
||||
var self = this,
|
||||
tableHolder = this.table.rowManager.element,
|
||||
rightMargin = 0;
|
||||
|
||||
if(self.active){
|
||||
|
||||
//calculate row padding
|
||||
|
||||
self.leftMargin = self._calcSpace(self.leftColumns, self.leftColumns.length);
|
||||
self.table.columnManager.headersElement.css("margin-left", self.leftMargin);
|
||||
|
||||
self.rightMargin = self._calcSpace(self.rightColumns, self.rightColumns.length);
|
||||
self.table.columnManager.element.css("padding-right", self.rightMargin);
|
||||
|
||||
self.table.rowManager.activeRows.forEach(function(row){
|
||||
self.layoutRow(row);
|
||||
});
|
||||
|
||||
if(self.table.extExists("columnCalcs")){
|
||||
if(self.table.extensions.columnCalcs.topInitialized && self.table.extensions.columnCalcs.topRow){
|
||||
self.layoutRow(self.table.extensions.columnCalcs.topRow);
|
||||
}
|
||||
if(self.table.extensions.columnCalcs.botInitialized && self.table.extensions.columnCalcs.botRow){
|
||||
self.layoutRow(self.table.extensions.columnCalcs.botRow);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//calculate left columns
|
||||
self.leftColumns.forEach(function(column, i){
|
||||
column.extensions.frozen.margin = self._calcSpace(self.leftColumns, i) + self.table.columnManager.scrollLeft;
|
||||
|
||||
if(i == self.leftColumns.length - 1){
|
||||
column.extensions.frozen.edge = true;
|
||||
}else{
|
||||
column.extensions.frozen.edge = false;
|
||||
}
|
||||
|
||||
self.layoutColumn(column);
|
||||
});
|
||||
|
||||
//calculate right frozen columns
|
||||
rightMargin = self.table.rowManager.element.innerWidth() + self.table.columnManager.scrollLeft;
|
||||
|
||||
if(tableHolder[0].scrollHeight > tableHolder.innerHeight()){
|
||||
rightMargin -= tableHolder[0].offsetWidth - tableHolder[0].clientWidth;
|
||||
}
|
||||
|
||||
self.rightColumns.forEach(function(column, i){
|
||||
column.extensions.frozen.margin = rightMargin - self._calcSpace(self.rightColumns, i + 1);
|
||||
|
||||
if(i == self.rightColumns.length - 1){
|
||||
column.extensions.frozen.edge = true;
|
||||
}else{
|
||||
column.extensions.frozen.edge = false;
|
||||
}
|
||||
|
||||
self.layoutColumn(column);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
FrozenColumns.prototype.layoutColumn = function(column){
|
||||
var self = this;
|
||||
|
||||
self.layoutElement(column.element, column);
|
||||
|
||||
column.cells.forEach(function(cell){
|
||||
self.layoutElement(cell.element, column);
|
||||
});
|
||||
};
|
||||
|
||||
FrozenColumns.prototype.layoutRow = function(row){
|
||||
row.getElement().css({
|
||||
"padding-left": this.leftMargin,
|
||||
"padding-right": this.rightMargin,
|
||||
});
|
||||
};
|
||||
|
||||
FrozenColumns.prototype.layoutElement = function(element, column){
|
||||
|
||||
if(column.extensions.frozen){
|
||||
var css = {
|
||||
position:"absolute",
|
||||
left:column.extensions.frozen.margin
|
||||
}
|
||||
|
||||
element.css(css);
|
||||
element.addClass("tabulator-frozen");
|
||||
|
||||
if(column.extensions.frozen.edge){
|
||||
element.addClass("tabulator-frozen-" + column.extensions.frozen.position);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
FrozenColumns.prototype._calcSpace = function(columns, index){
|
||||
var width = 0;
|
||||
|
||||
for (let i = 0; i < index; i++){
|
||||
if(columns[i].visible){
|
||||
width += columns[i].getWidth();
|
||||
}
|
||||
}
|
||||
|
||||
return width;
|
||||
};
|
||||
|
||||
Tabulator.registerExtension("frozenColumns", FrozenColumns);
|
||||
641
js/tabulator/src/js/extensions/group_rows.js
Normal file
641
js/tabulator/src/js/extensions/group_rows.js
Normal file
@ -0,0 +1,641 @@
|
||||
|
||||
|
||||
//public group object
|
||||
var GroupComponent = function (group){
|
||||
this.group = group;
|
||||
this.type = "GroupComponent";
|
||||
}
|
||||
|
||||
GroupComponent.prototype.getKey = function(){
|
||||
return this.group.key;
|
||||
};
|
||||
|
||||
GroupComponent.prototype.getElement = function(){
|
||||
return this.group.element;
|
||||
};
|
||||
|
||||
GroupComponent.prototype.getRows = function(){
|
||||
var output = []
|
||||
|
||||
this.group.rows.forEach(function(row){
|
||||
output.push(row.getComponent());
|
||||
});
|
||||
|
||||
return output;
|
||||
};
|
||||
|
||||
GroupComponent.prototype.getSubGroups = function(){
|
||||
var output = [];
|
||||
|
||||
this.group.groupList.forEach(function(child){
|
||||
output.push(child.getComponent());
|
||||
});
|
||||
|
||||
return output;
|
||||
};
|
||||
|
||||
GroupComponent.prototype.getParentGroup = function(){
|
||||
return this.group.parent ? this.group.parent.getComponent() : false;
|
||||
};
|
||||
|
||||
GroupComponent.prototype.getVisibility = function(){
|
||||
return this.group.visible;
|
||||
};
|
||||
|
||||
GroupComponent.prototype.show = function(){
|
||||
this.group.show()
|
||||
};
|
||||
|
||||
GroupComponent.prototype.hide = function(){
|
||||
this.group.hide();
|
||||
};
|
||||
|
||||
GroupComponent.prototype.toggle = function(){
|
||||
this.group.toggleVisibility();
|
||||
};
|
||||
|
||||
GroupComponent.prototype._getSelf = function(){
|
||||
return this.group;
|
||||
};
|
||||
|
||||
//////////////////////////////////////////////////
|
||||
//////////////// Group Functions /////////////////
|
||||
//////////////////////////////////////////////////
|
||||
|
||||
var Group = function(groupManager, parent, level, key, generator, oldGroup){
|
||||
|
||||
this.groupManager = groupManager;
|
||||
this.parent = parent;
|
||||
this.key = key;
|
||||
this.level = level;
|
||||
this.hasSubGroups = level < (groupManager.groupIDLookups.length - 1);
|
||||
this.addRow = this.hasSubGroups ? this._addRowToGroup : this._addRow;
|
||||
this.type = "group"; //type of element
|
||||
this.old = oldGroup;
|
||||
this.rows = [];
|
||||
this.groups = [];
|
||||
this.groupList = [];
|
||||
this.generator = generator;
|
||||
this.element = $("<div class='tabulator-row tabulator-group tabulator-group-level-" + level + "' role='rowgroup'></div>");
|
||||
this.arrowElement = $("<div class='tabulator-arrow'></div>");
|
||||
this.height = 0;
|
||||
this.outerHeight = 0;
|
||||
this.initialized = false;
|
||||
this.calcs = {};
|
||||
this.initialized = false;
|
||||
|
||||
this.visible = oldGroup ? oldGroup.visible : (typeof groupManager.startOpen[level] !== "undefined" ? groupManager.startOpen[level] : groupManager.startOpen[0]);
|
||||
|
||||
this.addBindings();
|
||||
};
|
||||
|
||||
Group.prototype.addBindings = function(){
|
||||
var self = this,
|
||||
dblTap, tapHold, tap, toggleElement;
|
||||
|
||||
if(self.groupManager.table.options.groupToggleElement){
|
||||
toggleElement = self.groupManager.table.options.groupToggleElement == "arrow" ? self.arrowElement : self.element;
|
||||
|
||||
toggleElement.on("click", function(e){
|
||||
e.stopPropagation();
|
||||
e.stopImmediatePropagation();
|
||||
self.toggleVisibility();
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
//handle group click events
|
||||
if (self.groupManager.table.options.groupClick){
|
||||
self.element.on("click", function(e){
|
||||
self.groupManager.table.options.groupClick(e, self.getComponent());
|
||||
})
|
||||
}
|
||||
|
||||
if (self.groupManager.table.options.groupDblClick){
|
||||
self.element.on("dblclick", function(e){
|
||||
self.groupManager.table.options.groupDblClick(e, self.getComponent());
|
||||
})
|
||||
}
|
||||
|
||||
if (self.groupManager.table.options.groupContext){
|
||||
self.element.on("contextmenu", function(e){
|
||||
self.groupManager.table.options.groupContext(e, self.getComponent());
|
||||
})
|
||||
}
|
||||
|
||||
if (self.groupManager.table.options.groupTap){
|
||||
|
||||
tap = false;
|
||||
|
||||
self.element.on("touchstart", function(e){
|
||||
tap = true;
|
||||
});
|
||||
|
||||
self.element.on("touchend", function(e){
|
||||
if(tap){
|
||||
self.groupManager.table.options.groupTap(e, self.getComponent());
|
||||
}
|
||||
|
||||
tap = false;
|
||||
});
|
||||
}
|
||||
|
||||
if (self.groupManager.table.options.groupDblTap){
|
||||
|
||||
dblTap = null;
|
||||
|
||||
self.element.on("touchend", function(e){
|
||||
|
||||
if(dblTap){
|
||||
clearTimeout(dblTap);
|
||||
dblTap = null;
|
||||
|
||||
self.groupManager.table.options.groupDblTap(e, self.getComponent());
|
||||
}else{
|
||||
|
||||
dblTap = setTimeout(function(){
|
||||
clearTimeout(dblTap);
|
||||
dblTap = null;
|
||||
}, 300);
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
if (self.groupManager.table.options.groupTapHold){
|
||||
|
||||
tapHold = null;
|
||||
|
||||
self.element.on("touchstart", function(e){
|
||||
clearTimeout(tapHold);
|
||||
|
||||
tapHold = setTimeout(function(){
|
||||
clearTimeout(tapHold);
|
||||
tapHold = null;
|
||||
tap = false;
|
||||
self.groupManager.table.options.groupTapHold(e, self.getComponent());
|
||||
}, 1000)
|
||||
|
||||
});
|
||||
|
||||
self.element.on("touchend", function(e){
|
||||
clearTimeout(tapHold);
|
||||
tapHold = null;
|
||||
});
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
Group.prototype._addRowToGroup = function(row){
|
||||
|
||||
var level = this.level + 1;
|
||||
|
||||
if(this.hasSubGroups){
|
||||
var groupID = this.groupManager.groupIDLookups[level](row.getData());
|
||||
|
||||
if(!this.groups[groupID]){
|
||||
var group = new Group(this.groupManager, this, level, groupID, this.groupManager.headerGenerator[level] || this.groupManager.headerGenerator[0], this.old ? this.old.groups[groupID] : false);
|
||||
|
||||
this.groups[groupID] = group;
|
||||
this.groupList.push(group);
|
||||
}
|
||||
|
||||
this.groups[groupID].addRow(row);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
Group.prototype._addRow = function(row){
|
||||
this.rows.push(row);
|
||||
};
|
||||
|
||||
Group.prototype.getHeadersAndRows = function(){
|
||||
var output = [];
|
||||
|
||||
output.push(this);
|
||||
|
||||
this._visSet();
|
||||
|
||||
if(this.visible){
|
||||
|
||||
if(this.groupList.length){
|
||||
this.groupList.forEach(function(group){
|
||||
output = output.concat(group.getHeadersAndRows());
|
||||
});
|
||||
|
||||
}else{
|
||||
if(this.groupManager.table.extExists("columnCalcs") && this.groupManager.table.extensions.columnCalcs.hasTopCalcs()){
|
||||
this.calcs.top = this.groupManager.table.extensions.columnCalcs.generateTopRow(this.rows);
|
||||
output.push(this.calcs.top);
|
||||
}
|
||||
|
||||
output = output.concat(this.rows);
|
||||
|
||||
if(this.groupManager.table.extExists("columnCalcs") && this.groupManager.table.extensions.columnCalcs.hasBottomCalcs()){
|
||||
this.calcs.bottom = this.groupManager.table.extensions.columnCalcs.generateBottomRow(this.rows);
|
||||
output.push(this.calcs.bottom);
|
||||
}
|
||||
}
|
||||
}else{
|
||||
if(this.groupManager.table.options.groupClosedShowCalcs){
|
||||
if(this.groupManager.table.extExists("columnCalcs")){
|
||||
if(this.groupManager.table.extensions.columnCalcs.hasTopCalcs()){
|
||||
this.calcs.top = this.groupManager.table.extensions.columnCalcs.generateTopRow(this.rows)
|
||||
output.push(this.calcs.top);
|
||||
}
|
||||
|
||||
if(this.groupManager.table.extensions.columnCalcs.hasBottomCalcs()){
|
||||
this.calcs.bottom = this.groupManager.table.extensions.columnCalcs.generateBottomRow(this.rows);
|
||||
output.push(this.calcs.bottom);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return output;
|
||||
};
|
||||
|
||||
Group.prototype.getRows = function(){
|
||||
this._visSet();
|
||||
|
||||
return this.visible ? this.rows : [];
|
||||
};
|
||||
|
||||
Group.prototype.getRowCount = function(){
|
||||
var count = 0;
|
||||
|
||||
if(this.groupList.length){
|
||||
this.groupList.forEach(function(group){
|
||||
count += group.getRowCount();
|
||||
});
|
||||
}else{
|
||||
count = this.rows.length;
|
||||
}
|
||||
return count;
|
||||
};
|
||||
|
||||
Group.prototype.toggleVisibility = function(){
|
||||
if(this.visible){
|
||||
this.hide();
|
||||
}else{
|
||||
this.show();
|
||||
}
|
||||
};
|
||||
|
||||
Group.prototype.hide = function(){
|
||||
this.visible = false;
|
||||
|
||||
if(this.groupManager.table.rowManager.getRenderMode() == "classic"){
|
||||
|
||||
this.element.removeClass("tabulator-group-visible");
|
||||
|
||||
this.rows.forEach(function(row){
|
||||
row.getElement().detach();
|
||||
});
|
||||
}else{
|
||||
this.groupManager.updateGroupRows(true);
|
||||
}
|
||||
|
||||
this.groupManager.table.options.groupVisibilityChanged(this.getComponent(), false);
|
||||
};
|
||||
|
||||
Group.prototype.show = function(){
|
||||
var self = this;
|
||||
|
||||
self.visible = true;
|
||||
|
||||
if(this.groupManager.table.rowManager.getRenderMode() == "classic"){
|
||||
|
||||
this.element.addClass("tabulator-group-visible");
|
||||
|
||||
self.rows.forEach(function(row){
|
||||
self.getElement().after(row.getElement());
|
||||
row.initialize();
|
||||
});
|
||||
}else{
|
||||
this.groupManager.updateGroupRows(true);
|
||||
}
|
||||
|
||||
this.groupManager.table.options.groupVisibilityChanged(this.getComponent(), true);
|
||||
};
|
||||
|
||||
Group.prototype._visSet = function(){
|
||||
var data = [];
|
||||
|
||||
if(typeof this.visible == "function"){
|
||||
|
||||
this.rows.forEach(function(row){
|
||||
data.push(row.getData());
|
||||
});
|
||||
|
||||
this.visible = this.visible(this.key, this.getRowCount(), data, this.getRowCount());
|
||||
}
|
||||
};
|
||||
|
||||
Group.prototype.getRowGroup = function(row){
|
||||
var match = false;
|
||||
if(this.groupList.length){
|
||||
this.groupList.forEach(function(group){
|
||||
var result = group.getRowGroup(row);
|
||||
|
||||
if(result){
|
||||
match = result;
|
||||
}
|
||||
});
|
||||
}else{
|
||||
if(this.rows.find(function(item){
|
||||
return item === row;
|
||||
})){
|
||||
match = this;
|
||||
}
|
||||
}
|
||||
|
||||
return match;
|
||||
};
|
||||
|
||||
////////////// Standard Row Functions //////////////
|
||||
|
||||
Group.prototype.getElement = function(){
|
||||
this.addBindingsd = false;
|
||||
|
||||
this._visSet();
|
||||
|
||||
var data = [];
|
||||
|
||||
this.rows.forEach(function(row){
|
||||
data.push(row.getData());
|
||||
});
|
||||
|
||||
if(this.visible){
|
||||
this.element.addClass("tabulator-group-visible");
|
||||
}else{
|
||||
this.element.removeClass("tabulator-group-visible");
|
||||
}
|
||||
|
||||
this.element.children().detach();
|
||||
|
||||
this.element.html(this.generator(this.key, this.getRowCount(), data, this.getComponent())).prepend(this.arrowElement);
|
||||
|
||||
// this.addBindings();
|
||||
|
||||
return this.element;
|
||||
};
|
||||
|
||||
//normalize the height of elements in the row
|
||||
Group.prototype.normalizeHeight = function(){
|
||||
this.setHeight(this.element.innerHeight())
|
||||
};
|
||||
|
||||
Group.prototype.initialize = function(force){
|
||||
if(!this.initialized || force){
|
||||
this.normalizeHeight();
|
||||
this.initialized = true;
|
||||
}
|
||||
};
|
||||
|
||||
Group.prototype.reinitialize = function(){
|
||||
this.initialized = false;
|
||||
this.height = 0;
|
||||
|
||||
if(this.element.is(":visible")){
|
||||
this.initialize(true);
|
||||
}
|
||||
};
|
||||
|
||||
Group.prototype.setHeight = function(height){
|
||||
if(this.height != height){
|
||||
this.height = height;
|
||||
this.outerHeight = this.element.outerHeight();
|
||||
}
|
||||
};
|
||||
|
||||
//return rows outer height
|
||||
Group.prototype.getHeight = function(){
|
||||
return this.outerHeight;
|
||||
};
|
||||
|
||||
Group.prototype.reinitializeHeight = function(){
|
||||
};
|
||||
Group.prototype.calcHeight = function(){
|
||||
};
|
||||
Group.prototype.setCellHeight = function(){
|
||||
};
|
||||
Group.prototype.clearCellHeight = function(){
|
||||
}
|
||||
|
||||
|
||||
//////////////// Object Generation /////////////////
|
||||
Group.prototype.getComponent = function(){
|
||||
return new GroupComponent(this);
|
||||
};
|
||||
|
||||
//////////////////////////////////////////////////
|
||||
////////////// Group Row Extension ///////////////
|
||||
//////////////////////////////////////////////////
|
||||
|
||||
var GroupRows = function(table){
|
||||
|
||||
this.table = table; //hold Tabulator object
|
||||
|
||||
this.groupIDLookups = false; //enable table grouping and set field to group by
|
||||
this.startOpen = [function(){return false;}]; //starting state of group
|
||||
this.headerGenerator = [function(){return "";}];
|
||||
this.groupList = []; //ordered list of groups
|
||||
this.groups = {}; //hold row groups
|
||||
};
|
||||
|
||||
|
||||
//initialize group configuration
|
||||
GroupRows.prototype.initialize = function(){
|
||||
var self = this,
|
||||
groupBy = self.table.options.groupBy,
|
||||
startOpen = self.table.options.groupStartOpen,
|
||||
groupHeader = self.table.options.groupHeader;
|
||||
|
||||
self.headerGenerator = [function(){return "";}];
|
||||
this.startOpen = [function(){return false;}]; //starting state of group
|
||||
|
||||
self.table.extensions.localize.bind("groups.item", function(langValue, lang){
|
||||
self.headerGenerator[0] = function(value, count, data){ //header layout function
|
||||
return value + "<span>(" + count + " " + ((count === 1) ? langValue : lang.groups.items) + ")</span>";
|
||||
};
|
||||
});
|
||||
|
||||
this.groupIDLookups = [];
|
||||
|
||||
|
||||
if(Array.isArray(groupBy) || groupBy){
|
||||
if(this.table.extExists("columnCalcs")){
|
||||
this.table.extensions.columnCalcs.removeCalcs();
|
||||
}
|
||||
}else{
|
||||
if(this.table.extExists("columnCalcs")){
|
||||
|
||||
var cols = this.table.columnManager.getRealColumns();
|
||||
|
||||
cols.forEach(function(col){
|
||||
if(col.definition.topCalc){
|
||||
self.table.extensions.columnCalcs.initializeTopRow();
|
||||
}
|
||||
|
||||
if(col.definition.bottomCalc){
|
||||
self.table.extensions.columnCalcs.initializeBottomRow();
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
if(!Array.isArray(groupBy)){
|
||||
groupBy = [groupBy];
|
||||
}
|
||||
|
||||
groupBy.forEach(function(group){
|
||||
var lookupFunc, column;
|
||||
|
||||
if(typeof group == "function"){
|
||||
lookupFunc = group;
|
||||
}else{
|
||||
column = self.table.columnManager.getColumnByField(group);
|
||||
|
||||
if(column){
|
||||
lookupFunc = function(data){
|
||||
return column.getFieldValue(data);
|
||||
}
|
||||
}else{
|
||||
lookupFunc = function(data){
|
||||
return data[group];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
self.groupIDLookups.push(lookupFunc);
|
||||
});
|
||||
|
||||
|
||||
|
||||
if(startOpen){
|
||||
|
||||
if(!Array.isArray(startOpen)){
|
||||
startOpen = [startOpen];
|
||||
}
|
||||
|
||||
startOpen.forEach(function(level){
|
||||
level = typeof level == "function" ? level : function(){return true;};
|
||||
});
|
||||
|
||||
self.startOpen = startOpen;
|
||||
}
|
||||
|
||||
if(groupHeader){
|
||||
self.headerGenerator = Array.isArray(groupHeader) ? groupHeader : [groupHeader];
|
||||
}
|
||||
|
||||
this.initialized = true;
|
||||
|
||||
};
|
||||
|
||||
//return appropriate rows with group headers
|
||||
GroupRows.prototype.getRows = function(rows){
|
||||
if(this.groupIDLookups.length){
|
||||
|
||||
this.table.options.dataGrouping();
|
||||
|
||||
this.generateGroups(rows);
|
||||
|
||||
if(this.table.options.dataGrouped){
|
||||
this.table.options.dataGrouped(this.getGroups());
|
||||
};
|
||||
|
||||
return this.updateGroupRows();
|
||||
|
||||
}else{
|
||||
return rows.slice(0);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
GroupRows.prototype.getGroups = function(){
|
||||
var groupComponents = [];
|
||||
|
||||
if(this.table.options.dataGrouped){
|
||||
this.groupList.forEach(function(group){
|
||||
groupComponents.push(group.getComponent());
|
||||
});
|
||||
}
|
||||
|
||||
return groupComponents;
|
||||
};
|
||||
|
||||
GroupRows.prototype.getRowGroup = function(row){
|
||||
var match = false;
|
||||
|
||||
this.groupList.forEach(function(group){
|
||||
var result = group.getRowGroup(row);
|
||||
|
||||
if(result){
|
||||
match = result;
|
||||
}
|
||||
});
|
||||
|
||||
return match;
|
||||
};
|
||||
|
||||
GroupRows.prototype.countGroups = function(){
|
||||
return this.groupList.length;
|
||||
};
|
||||
|
||||
GroupRows.prototype.generateGroups = function(rows){
|
||||
var self = this,
|
||||
oldGroups = self.groups;
|
||||
|
||||
self.groups = {};
|
||||
self.groupList =[];
|
||||
|
||||
rows.forEach(function(row){
|
||||
|
||||
var groupID = self.groupIDLookups[0](row.getData());
|
||||
|
||||
if(!self.groups[groupID]){
|
||||
var group = new Group(self, false, 0, groupID, self.headerGenerator[0], oldGroups[groupID]);
|
||||
|
||||
self.groups[groupID] = group;
|
||||
self.groupList.push(group);
|
||||
}
|
||||
|
||||
self.groups[groupID].addRow(row);
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
GroupRows.prototype.updateGroupRows = function(force){
|
||||
var self = this,
|
||||
output = [],
|
||||
oldRowCount;
|
||||
|
||||
self.groupList.forEach(function(group){
|
||||
output = output.concat(group.getHeadersAndRows());
|
||||
});
|
||||
|
||||
//force update of table display
|
||||
if(force){
|
||||
oldRowCount = self.table.rowManager.displayRowsCount;
|
||||
|
||||
self.table.rowManager.setDisplayRows(output);
|
||||
self.table.rowManager._virtualRenderFill(Math.floor((self.table.rowManager.element.scrollTop() / self.table.rowManager.element[0].scrollHeight) * oldRowCount));
|
||||
}
|
||||
|
||||
return output;
|
||||
};
|
||||
|
||||
GroupRows.prototype.scrollHeaders = function(left){
|
||||
this.groupList.forEach(function(group){
|
||||
group.arrowElement.css("margin-left", left);
|
||||
});
|
||||
};
|
||||
|
||||
Tabulator.registerExtension("groupRows", GroupRows);
|
||||
117
js/tabulator/src/js/extensions/history.js
Normal file
117
js/tabulator/src/js/extensions/history.js
Normal file
@ -0,0 +1,117 @@
|
||||
var History = function(table){
|
||||
this.table = table; //hold Tabulator object
|
||||
|
||||
this.history = [];
|
||||
this.index = -1;
|
||||
};
|
||||
|
||||
|
||||
History.prototype.clear = function(){
|
||||
this.history = [];
|
||||
this.index = -1;
|
||||
};
|
||||
|
||||
History.prototype.action = function(type, component, data){
|
||||
|
||||
if(this.index > -1){
|
||||
this.history = this.history.slice(0, this.index + 1);
|
||||
}
|
||||
|
||||
this.history.push({
|
||||
type:type,
|
||||
component:component,
|
||||
data:data,
|
||||
});
|
||||
|
||||
this.index ++;
|
||||
};
|
||||
|
||||
History.prototype.undo = function(){
|
||||
|
||||
if(this.index > -1){
|
||||
|
||||
let action = this.history[this.index];
|
||||
|
||||
this.undoers[action.type].call(this, action);
|
||||
|
||||
this.index--;
|
||||
|
||||
return true;
|
||||
}else{
|
||||
console.warn("History Undo Error - No more history to undo");
|
||||
return false;
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
History.prototype.redo = function(){
|
||||
if(this.history.length-1 > this.index){
|
||||
|
||||
this.index++;
|
||||
|
||||
let action = this.history[this.index];
|
||||
|
||||
this.redoers[action.type].call(this, action);
|
||||
|
||||
return true;
|
||||
}else{
|
||||
console.warn("History Redo Error - No more history to redo");
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
History.prototype.undoers = {
|
||||
cellEdit: function(action){
|
||||
action.component.setValueProcessData(action.data.oldValue);
|
||||
},
|
||||
|
||||
rowAdd: function(action){
|
||||
action.component.delete();
|
||||
},
|
||||
|
||||
rowDelete: function(action){
|
||||
var newRow = this.table.rowManager.addRowActual(action.data.data, action.data.pos, action.data.index);
|
||||
|
||||
this._rebindRow(action.component, newRow);
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
History.prototype.redoers = {
|
||||
cellEdit: function(action){
|
||||
action.component.setValueProcessData(action.data.newValue);
|
||||
},
|
||||
|
||||
rowAdd: function(action){
|
||||
var newRow = this.table.rowManager.addRowActual(action.data.data, action.data.pos, action.data.index);
|
||||
|
||||
this._rebindRow(action.component, newRow);
|
||||
},
|
||||
|
||||
rowDelete:function(action){
|
||||
action.component.delete();
|
||||
},
|
||||
};
|
||||
|
||||
//rebind rows to new element after deletion
|
||||
History.prototype._rebindRow = function(oldRow, newRow){
|
||||
this.history.forEach(function(action){
|
||||
if(action.component instanceof Row){
|
||||
if(action.component === oldRow){
|
||||
action.component = newRow;
|
||||
}
|
||||
}else if(action.component instanceof Cell){
|
||||
if(action.component.row === oldRow){
|
||||
var field = action.component.column.getField();
|
||||
|
||||
if(field){
|
||||
action.component = newRow.getCell(field);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
Tabulator.registerExtension("history", History);
|
||||
197
js/tabulator/src/js/extensions/html_table_import.js
Normal file
197
js/tabulator/src/js/extensions/html_table_import.js
Normal file
@ -0,0 +1,197 @@
|
||||
var HtmlTableImport = function(table){
|
||||
this.table = table; //hold Tabulator object
|
||||
};
|
||||
|
||||
HtmlTableImport.prototype.parseTable = function(){
|
||||
var self = this,
|
||||
element = self.table.element,
|
||||
options = self.table.options,
|
||||
columns = options.columns,
|
||||
headers = $("th", element),
|
||||
hasIndex = false,
|
||||
rows = $("tbody tr", element),
|
||||
data = [];
|
||||
|
||||
self.table.options.htmlImporting();
|
||||
|
||||
//check for tablator inline options
|
||||
self._extractOptions(element, options);
|
||||
|
||||
if(headers.length){
|
||||
self._extractHeaders(element);
|
||||
}else{
|
||||
self._generateBlankHeaders(element);
|
||||
}
|
||||
|
||||
|
||||
//iterate through table rows and build data set
|
||||
rows.each(function(rowIndex){
|
||||
var item = {};
|
||||
|
||||
//create index if the dont exist in table
|
||||
if(!hasIndex){
|
||||
item[options.index] = rowIndex;
|
||||
}
|
||||
|
||||
//add row data to item
|
||||
$("td", $(this)).each(function(colIndex){
|
||||
item[$(this).data("field")] = $(this).html();
|
||||
});
|
||||
|
||||
data.push(item);
|
||||
});
|
||||
|
||||
//create new element
|
||||
var newElement = $("<div></div>");
|
||||
|
||||
//transfer attributes to new element
|
||||
var attributes = element.prop("attributes");
|
||||
|
||||
// loop through attributes and apply them on div
|
||||
$.each(attributes, function(){
|
||||
newElement.attr(this.name, this.value);
|
||||
});
|
||||
|
||||
// replace table with div element
|
||||
element.replaceWith(newElement);
|
||||
|
||||
options.data = data;
|
||||
|
||||
self.table.options.htmlImported();
|
||||
|
||||
newElement.tabulator(options);
|
||||
};
|
||||
|
||||
//extract tabluator attribute options
|
||||
HtmlTableImport.prototype._extractOptions = function(element, options){
|
||||
var self = this,
|
||||
attributes = element[0].attributes
|
||||
|
||||
for(var index in attributes){
|
||||
var attrib = attributes[index];
|
||||
var name;
|
||||
|
||||
if(attrib && attrib.name && attrib.name.indexOf("tabulator-") === 0){
|
||||
|
||||
name = attrib.name.replace("tabulator-", "");
|
||||
|
||||
for(var key in options){
|
||||
if(key.toLowerCase() == name){
|
||||
options[key] = self._attribValue(attrib.value);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
//get value of attribute
|
||||
HtmlTableImport.prototype._attribValue = function(value){
|
||||
if(value === "true"){
|
||||
return true;
|
||||
}
|
||||
|
||||
if(value === "false"){
|
||||
return false;
|
||||
}
|
||||
|
||||
return value;
|
||||
};
|
||||
|
||||
//find column if it has already been defined
|
||||
HtmlTableImport.prototype._findCol = function(title){
|
||||
var self = this;
|
||||
|
||||
var match = self.table.options.columns.find(function(column){
|
||||
return column.title === title;
|
||||
});
|
||||
|
||||
return match || false;
|
||||
};
|
||||
|
||||
//extract column from headers
|
||||
HtmlTableImport.prototype._extractHeaders = function(element){
|
||||
var self = this,
|
||||
headers = $("th", element),
|
||||
rows = $("tbody tr", element);
|
||||
|
||||
headers.each(function(index){
|
||||
var header = $(this),
|
||||
exists = false,
|
||||
col = self._findCol(header.text()),
|
||||
width, attributes;
|
||||
|
||||
//list of possible attributes
|
||||
var attribList = ["title", "field", "align", "width", "minWidth", "frozen", "sortable", "sorter", "formatter", "cellClick", "cellDblClick", "cellContext", "editable", "editor", "visible", "cssClass", "tooltip", "tooltipHeader", "editableTitle", "headerFilter", "mutator", "mutateType", "accessor"];
|
||||
|
||||
|
||||
if(col){
|
||||
exists = true;
|
||||
}else{
|
||||
col = {title:header.text().trim()};
|
||||
}
|
||||
|
||||
if(!col.field) {
|
||||
col.field = header.text().trim().toLowerCase().replace(" ", "_");
|
||||
}
|
||||
|
||||
width = header.attr("width");
|
||||
|
||||
if(width && !col.width) {
|
||||
col.width = width;
|
||||
}
|
||||
|
||||
|
||||
//check for tablator inline options
|
||||
attributes = header[0].attributes;
|
||||
|
||||
//check for tablator inline options
|
||||
for(var i in attributes){
|
||||
var attrib = attributes[i],
|
||||
name;
|
||||
|
||||
if(attrib && attrib.name && attrib.name.indexOf("tabulator-") === 0){
|
||||
|
||||
name = attrib.name.replace("tabulator-", "");
|
||||
|
||||
attribList.forEach(function(key){
|
||||
if(key.toLowerCase() == name){
|
||||
col[key] = self._attribValue(attrib.value);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
$("td:eq(" + index + ")", rows).data("field", col.field);
|
||||
|
||||
if(col.field == self.table.options.index){
|
||||
hasIndex = true;
|
||||
}
|
||||
|
||||
if(!exists){
|
||||
self.table.options.columns.push(col)
|
||||
}
|
||||
|
||||
});
|
||||
};
|
||||
|
||||
//generate blank headers
|
||||
HtmlTableImport.prototype._generateBlankHeaders = function(element){
|
||||
var self = this;
|
||||
|
||||
var headers = $("tr:first td", element);
|
||||
|
||||
headers.each(function(index){
|
||||
var col = {title:"", field:"col" + index};
|
||||
$("td:eq(" + index + ")", rows).data("field", col.field)
|
||||
|
||||
var width = $(this).attr("width");
|
||||
|
||||
if(width){
|
||||
col.width = width;
|
||||
}
|
||||
|
||||
self.table.options.columns.push(col);
|
||||
});
|
||||
};
|
||||
|
||||
Tabulator.registerExtension("htmlTableImport", HtmlTableImport);
|
||||
333
js/tabulator/src/js/extensions/keybindings.js
Normal file
333
js/tabulator/src/js/extensions/keybindings.js
Normal file
@ -0,0 +1,333 @@
|
||||
var Keybindings = function(table){
|
||||
this.table = table; //hold Tabulator object
|
||||
this.watchKeys = null;
|
||||
this.pressedKeys = null;
|
||||
};
|
||||
|
||||
|
||||
Keybindings.prototype.initialize = function(){
|
||||
var bindings = this.table.options.keybindings,
|
||||
mergedBindings = {};
|
||||
|
||||
this.watchKeys = {};
|
||||
this.pressedKeys = [];
|
||||
|
||||
if(bindings !== false){
|
||||
|
||||
for(let key in this.bindings){
|
||||
mergedBindings[key] = this.bindings[key];
|
||||
}
|
||||
|
||||
if(Object.keys(bindings).length){
|
||||
|
||||
for(let key in bindings){
|
||||
mergedBindings[key] = bindings[key];
|
||||
}
|
||||
}
|
||||
|
||||
this.mapBindings(mergedBindings);
|
||||
this.bindEvents();
|
||||
}
|
||||
};
|
||||
|
||||
Keybindings.prototype.mapBindings = function(bindings){
|
||||
var self = this;
|
||||
|
||||
for(let key in bindings){
|
||||
|
||||
if(this.actions[key]){
|
||||
|
||||
if(bindings[key]){
|
||||
|
||||
if(typeof bindings[key] !== "object"){
|
||||
bindings[key] = [bindings[key]];
|
||||
}
|
||||
|
||||
bindings[key].forEach(function(binding){
|
||||
self.mapBinding(key, binding);
|
||||
});
|
||||
}
|
||||
|
||||
}else{
|
||||
console.warn("Key Binding Error - no such action:", key);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
Keybindings.prototype.mapBinding = function(action, symbolsList){
|
||||
var self = this;
|
||||
|
||||
var binding = {
|
||||
action: this.actions[action],
|
||||
keys: [],
|
||||
ctrl: false,
|
||||
shift: false,
|
||||
}
|
||||
|
||||
var symbols = symbolsList.toString().toLowerCase().split(" ").join("").split("+");
|
||||
|
||||
symbols.forEach(function(symbol){
|
||||
switch(symbol){
|
||||
case "ctrl":
|
||||
binding.ctrl = true;
|
||||
break;
|
||||
|
||||
case "shift":
|
||||
binding.shift = true;
|
||||
break;
|
||||
|
||||
default:
|
||||
symbol = parseInt(symbol);
|
||||
binding.keys.push(symbol);
|
||||
|
||||
if(!self.watchKeys[symbol]){
|
||||
self.watchKeys[symbol] = [];
|
||||
}
|
||||
|
||||
self.watchKeys[symbol].push(binding);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
Keybindings.prototype.bindEvents = function(){
|
||||
var self = this;
|
||||
|
||||
this.table.element.on("keydown", function(e){
|
||||
var code = e.keyCode;
|
||||
var bindings = self.watchKeys[code];
|
||||
|
||||
if(bindings){
|
||||
|
||||
self.pressedKeys.push(code);
|
||||
|
||||
bindings.forEach(function(binding){
|
||||
self.checkBinding(e, binding);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
this.table.element.on("keyup", function(e){
|
||||
var code = e.keyCode;
|
||||
var bindings = self.watchKeys[code];
|
||||
|
||||
if(bindings){
|
||||
|
||||
var index = self.pressedKeys.indexOf(code);
|
||||
|
||||
if(index > -1){
|
||||
self.pressedKeys.splice(index, 1);
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
Keybindings.prototype.checkBinding = function(e, binding){
|
||||
var self = this,
|
||||
match = true;
|
||||
|
||||
if(e.ctrlKey == binding.ctrl && e.shiftKey == binding.shift){
|
||||
binding.keys.forEach(function(key){
|
||||
var index = self.pressedKeys.indexOf(key);
|
||||
|
||||
if(index == -1){
|
||||
match = false;
|
||||
}
|
||||
});
|
||||
|
||||
if(match){
|
||||
binding.action.call(self, e);
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
};
|
||||
|
||||
//default bindings
|
||||
Keybindings.prototype.bindings = {
|
||||
navPrev:"shift + 9",
|
||||
navNext:9,
|
||||
navUp:38,
|
||||
navDown:40,
|
||||
scrollPageUp:33,
|
||||
scrollPageDown:34,
|
||||
scrollToStart:36,
|
||||
scrollToEnd:35,
|
||||
undo:"ctrl + 90",
|
||||
redo:"ctrl + 89",
|
||||
};
|
||||
|
||||
|
||||
//default actions
|
||||
Keybindings.prototype.actions = {
|
||||
keyBlock:function(e){
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
},
|
||||
scrollPageUp:function(e){
|
||||
var rowManager = this.table.rowManager,
|
||||
newPos = rowManager.scrollTop - rowManager.height,
|
||||
scrollMax = rowManager.element[0].scrollHeight;
|
||||
|
||||
e.preventDefault();
|
||||
|
||||
if(rowManager.displayRowsCount){
|
||||
if(newPos >= 0){
|
||||
rowManager.element.scrollTop(newPos);
|
||||
}else{
|
||||
rowManager.scrollToRow(rowManager.displayRows[0]);
|
||||
}
|
||||
}
|
||||
|
||||
this.table.element.focus();
|
||||
},
|
||||
scrollPageDown:function(e){
|
||||
var rowManager = this.table.rowManager,
|
||||
newPos = rowManager.scrollTop + rowManager.height,
|
||||
scrollMax = rowManager.element[0].scrollHeight;
|
||||
|
||||
e.preventDefault();
|
||||
|
||||
if(rowManager.displayRowsCount){
|
||||
if(newPos <= scrollMax){
|
||||
rowManager.element.scrollTop(newPos);
|
||||
}else{
|
||||
rowManager.scrollToRow(rowManager.displayRows[rowManager.displayRows.length - 1]);
|
||||
}
|
||||
}
|
||||
|
||||
this.table.element.focus();
|
||||
|
||||
},
|
||||
scrollToStart:function(e){
|
||||
var rowManager = this.table.rowManager;
|
||||
|
||||
e.preventDefault();
|
||||
|
||||
if(rowManager.displayRowsCount){
|
||||
rowManager.scrollToRow(rowManager.displayRows[0]);
|
||||
}
|
||||
|
||||
this.table.element.focus();
|
||||
},
|
||||
scrollToEnd:function(e){
|
||||
var rowManager = this.table.rowManager;
|
||||
|
||||
e.preventDefault();
|
||||
|
||||
if(rowManager.displayRowsCount){
|
||||
rowManager.scrollToRow(rowManager.displayRows[rowManager.displayRows.length - 1]);
|
||||
}
|
||||
|
||||
this.table.element.focus();
|
||||
},
|
||||
navPrev:function(e){
|
||||
var cell = false;
|
||||
|
||||
if(this.table.extExists("edit")){
|
||||
cell = this.table.extensions.edit.currentCell;
|
||||
|
||||
if(cell){
|
||||
e.preventDefault();
|
||||
cell.nav().prev();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
navNext:function(e){
|
||||
var cell = false;
|
||||
|
||||
if(this.table.extExists("edit")){
|
||||
cell = this.table.extensions.edit.currentCell;
|
||||
|
||||
if(cell){
|
||||
e.preventDefault();
|
||||
cell.nav().next();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
navLeft:function(e){
|
||||
var cell = false;
|
||||
|
||||
if(this.table.extExists("edit")){
|
||||
cell = this.table.extensions.edit.currentCell;
|
||||
|
||||
if(cell){
|
||||
e.preventDefault();
|
||||
cell.nav().left();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
navRight:function(e){
|
||||
var cell = false;
|
||||
|
||||
if(this.table.extExists("edit")){
|
||||
cell = this.table.extensions.edit.currentCell;
|
||||
|
||||
if(cell){
|
||||
e.preventDefault();
|
||||
cell.nav().right();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
navUp:function(e){
|
||||
var cell = false;
|
||||
|
||||
if(this.table.extExists("edit")){
|
||||
cell = this.table.extensions.edit.currentCell;
|
||||
|
||||
if(cell){
|
||||
e.preventDefault();
|
||||
cell.nav().up();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
navDown:function(e){
|
||||
var cell = false;
|
||||
|
||||
if(this.table.extExists("edit")){
|
||||
cell = this.table.extensions.edit.currentCell;
|
||||
|
||||
if(cell){
|
||||
e.preventDefault();
|
||||
cell.nav().down();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
undo:function(e){
|
||||
var cell = false;
|
||||
if(this.table.options.history && this.table.extExists("history") && this.table.extExists("edit")){
|
||||
|
||||
cell = this.table.extensions.edit.currentCell;
|
||||
|
||||
if(!cell){
|
||||
e.preventDefault();
|
||||
this.table.extensions.history.undo();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
redo:function(e){
|
||||
var cell = false;
|
||||
if(this.table.options.history && this.table.extExists("history") && this.table.extExists("edit")){
|
||||
|
||||
cell = this.table.extensions.edit.currentCell;
|
||||
|
||||
if(!cell){
|
||||
e.preventDefault();
|
||||
this.table.extensions.history.redo();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
};
|
||||
|
||||
|
||||
Tabulator.registerExtension("keybindings", Keybindings);
|
||||
160
js/tabulator/src/js/extensions/layout.js
Normal file
160
js/tabulator/src/js/extensions/layout.js
Normal file
@ -0,0 +1,160 @@
|
||||
var Layout = function(table){
|
||||
this.table = table;
|
||||
this.mode = null;
|
||||
};
|
||||
|
||||
//initialize layout system
|
||||
Layout.prototype.initialize = function(layout){
|
||||
|
||||
if(this.modes[layout]){
|
||||
this.mode = layout;
|
||||
}else{
|
||||
console.warn("Layout Error - invalid mode set, defaulting to 'fitData' : " + layout);
|
||||
this.mode = 'fitData';
|
||||
}
|
||||
|
||||
this.table.element.attr("tabulator-layout", this.mode);
|
||||
};
|
||||
|
||||
Layout.prototype.getMode = function(){
|
||||
return this.mode;
|
||||
};
|
||||
|
||||
//trigger table layout
|
||||
Layout.prototype.layout = function(){
|
||||
this.modes[this.mode].call(this, this.table.columnManager.columnsByIndex);
|
||||
};
|
||||
|
||||
//layout render functions
|
||||
Layout.prototype.modes = {
|
||||
|
||||
//resize columns to fit data the contain
|
||||
"fitData": function(columns){
|
||||
columns.forEach(function(column){
|
||||
column.reinitializeWidth();
|
||||
});
|
||||
|
||||
if(this.table.options.responsiveLayout && this.table.extExists("responsiveLayout", true)){
|
||||
this.table.extensions.responsiveLayout.update();
|
||||
}
|
||||
},
|
||||
|
||||
//resize columns to fit data the contain
|
||||
"fitDataFill": function(columns){
|
||||
columns.forEach(function(column){
|
||||
column.reinitializeWidth();
|
||||
});
|
||||
|
||||
if(this.table.options.responsiveLayout && this.table.extExists("responsiveLayout", true)){
|
||||
this.table.extensions.responsiveLayout.update();
|
||||
}
|
||||
},
|
||||
|
||||
//resize columns to fit
|
||||
"fitColumns": function(columns){
|
||||
var self = this;
|
||||
|
||||
var totalWidth = self.table.element.innerWidth(); //table element width
|
||||
var fixedWidth = 0; //total width of columns with a defined width
|
||||
var flexWidth = 0; //total width available to flexible columns
|
||||
var flexColWidth = 0; //desired width of flexible columns
|
||||
var flexColumns = []; //array of flexible width columns
|
||||
var gapFill=0; //number of pixels to be added to final column to close and half pixel gaps
|
||||
|
||||
//ensure columns resize to take up the correct amount of space
|
||||
function scaleColumns(columns, freeSpace, colWidth){
|
||||
|
||||
var oversizeCols = [],
|
||||
oversizeSpace = 0,
|
||||
remainingSpace = 0,
|
||||
nextColWidth = 0,
|
||||
gap = 0,
|
||||
undersizeCols = [];
|
||||
|
||||
columns.forEach(function(column, i){
|
||||
if(column.minWidth >= colWidth){
|
||||
oversizeCols.push(column);
|
||||
}else{
|
||||
undersizeCols.push(column);
|
||||
}
|
||||
});
|
||||
|
||||
if(oversizeCols.length){
|
||||
oversizeCols.forEach(function(column){
|
||||
oversizeSpace += column.minWidth;
|
||||
column.setWidth(column.minWidth);
|
||||
});
|
||||
|
||||
remainingSpace = freeSpace - oversizeSpace;
|
||||
|
||||
nextColWidth = undersizeCols.length ? Math.floor(remainingSpace/undersizeCols.length) : remainingSpace;
|
||||
|
||||
gap = remainingSpace - (nextColWidth * undersizeCols.length);
|
||||
|
||||
gap += scaleColumns(undersizeCols, remainingSpace, nextColWidth);
|
||||
}else{
|
||||
gap = undersizeCols.length ? freeSpace - (Math.floor(freeSpace/undersizeCols.length) * undersizeCols.length) : freeSpace;
|
||||
|
||||
undersizeCols.forEach(function(column){
|
||||
column.setWidth(colWidth);
|
||||
});
|
||||
}
|
||||
|
||||
return gap;
|
||||
}
|
||||
|
||||
if(this.table.options.responsiveLayout && this.table.extExists("responsiveLayout", true)){
|
||||
this.table.extensions.responsiveLayout.update();
|
||||
}
|
||||
|
||||
//adjust for vertical scrollbar if present
|
||||
if(this.table.rowManager.element[0].scrollHeight > this.table.rowManager.element.innerHeight()){
|
||||
totalWidth -= this.table.rowManager.element[0].offsetWidth - this.table.rowManager.element[0].clientWidth;
|
||||
}
|
||||
|
||||
columns.forEach(function(column){
|
||||
var width, minWidth, colWidth;
|
||||
|
||||
if(column.visible){
|
||||
|
||||
width = column.definition.width;
|
||||
minWidth = parseInt(column.minWidth);
|
||||
|
||||
if(width){
|
||||
|
||||
if(typeof(width) == "string"){
|
||||
if(width.indexOf("%") > -1){
|
||||
colWidth = (totalWidth / 100) * parseInt(width);
|
||||
}else{
|
||||
colWidth = parseInt(width);
|
||||
}
|
||||
}else{
|
||||
colWidth = width;
|
||||
}
|
||||
|
||||
fixedWidth += colWidth > minWidth ? colWidth : minWidth;
|
||||
|
||||
}else{
|
||||
flexColumns.push(column);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
//calculate available space
|
||||
flexWidth = totalWidth - fixedWidth;
|
||||
|
||||
//calculate correct column size
|
||||
flexColWidth = Math.floor(flexWidth / flexColumns.length)
|
||||
|
||||
//generate column widths
|
||||
var gapFill = scaleColumns(flexColumns, flexWidth, flexColWidth);
|
||||
|
||||
//increase width of last column to account for rounding errors
|
||||
if(flexColumns.length){
|
||||
flexColumns[flexColumns.length-1].setWidth(flexColumns[flexColumns.length-1].getWidth() + gapFill);
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
Tabulator.registerExtension("layout", Layout);
|
||||
196
js/tabulator/src/js/extensions/localize.js
Normal file
196
js/tabulator/src/js/extensions/localize.js
Normal file
@ -0,0 +1,196 @@
|
||||
var Localize = function(table){
|
||||
this.table = table; //hold Tabulator object
|
||||
this.locale = "default"; //current locale
|
||||
this.lang = false; //current language
|
||||
this.bindings = {}; //update events to call when locale is changed
|
||||
};
|
||||
|
||||
//set header placehoder
|
||||
Localize.prototype.setHeaderFilterPlaceholder = function(placeholder){
|
||||
this.langs.default.headerFilters.default = placeholder;
|
||||
};
|
||||
|
||||
//set header filter placeholder by column
|
||||
Localize.prototype.setHeaderFilterColumnPlaceholder = function(column, placeholder){
|
||||
this.langs.default.headerFilters.columns[column] = placeholder;
|
||||
|
||||
if(this.lang && !this.lang.headerFilters.columns[column]){
|
||||
this.lang.headerFilters.columns[column] = placeholder;
|
||||
}
|
||||
};
|
||||
|
||||
//setup a lang description object
|
||||
Localize.prototype.installLang = function(locale, lang){
|
||||
if(this.langs[locale]){
|
||||
this._setLangProp(this.langs[locale], lang);
|
||||
}else{
|
||||
this.langs[locale] = lang;
|
||||
}
|
||||
};
|
||||
|
||||
Localize.prototype._setLangProp = function(lang, values){
|
||||
for(let key in values){
|
||||
if(lang[key] && typeof lang[key] == "object"){
|
||||
this._setLangProp(lang[key], values[key])
|
||||
}else{
|
||||
lang[key] = values[key];
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
//set current locale
|
||||
Localize.prototype.setLocale = function(desiredLocale){
|
||||
var self = this;
|
||||
|
||||
desiredLocale = desiredLocale || "default";
|
||||
|
||||
//fill in any matching languge values
|
||||
function traverseLang(trans, path){
|
||||
for(var prop in trans){
|
||||
|
||||
if(typeof trans[prop] == "object"){
|
||||
if(!path[prop]){
|
||||
path[prop] = {};
|
||||
}
|
||||
traverseLang(trans[prop], path[prop]);
|
||||
}else{
|
||||
path[prop] = trans[prop];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//determing correct locale to load
|
||||
if(desiredLocale === true && navigator.language){
|
||||
//get local from system
|
||||
desiredLocale = navigator.language.toLowerCase();
|
||||
}
|
||||
|
||||
if(desiredLocale){
|
||||
|
||||
//if locale is not set, check for matching top level locale else use default
|
||||
if(!self.langs[desiredLocale]){
|
||||
let prefix = desiredLocale.split("-")[0];
|
||||
|
||||
if(self.langs[prefix]){
|
||||
console.warn("Localization Error - Exact matching locale not found, using closest match: ", desiredLocale, prefix);
|
||||
desiredLocale = prefix;
|
||||
}else{
|
||||
console.warn("Localization Error - Matching locale not found, using default: ", desiredLocale);
|
||||
desiredLocale = "default";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
self.locale = desiredLocale;
|
||||
|
||||
//load default lang template
|
||||
self.lang = $.extend(true, {}, self.langs.default);
|
||||
|
||||
if(desiredLocale != "default"){
|
||||
traverseLang(self.langs[desiredLocale], self.lang);
|
||||
}
|
||||
|
||||
self.table.options.localized(self.locale, self.lang)
|
||||
|
||||
self._executeBindings();
|
||||
};
|
||||
|
||||
//get current locale
|
||||
Localize.prototype.getLocale = function(locale){
|
||||
return self.locale;
|
||||
};
|
||||
|
||||
//get lang object for given local or current if none provided
|
||||
Localize.prototype.getLang = function(locale){
|
||||
return locale ? this.langs[locale] : this.lang;
|
||||
};
|
||||
|
||||
//get text for current locale
|
||||
Localize.prototype.getText = function(path, value){
|
||||
var path = value ? path + "." + value : path,
|
||||
pathArray = path.split("."),
|
||||
text = this._getLangElement(pathArray, this.locale);
|
||||
|
||||
// if(text === false){
|
||||
// console.warn("Localization Error - Matching localized text not found for given path: ", path);
|
||||
// }
|
||||
|
||||
return text || "";
|
||||
};
|
||||
|
||||
//traverse langs object and find localized copy
|
||||
Localize.prototype._getLangElement = function(path, locale){
|
||||
var self = this;
|
||||
var root = self.lang;
|
||||
|
||||
path.forEach(function(level){
|
||||
var rootPath
|
||||
|
||||
if(root){
|
||||
rootPath = root[level];
|
||||
|
||||
if(typeof rootPath != "undefined"){
|
||||
root = rootPath;
|
||||
}else{
|
||||
root = false;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return root;
|
||||
};
|
||||
|
||||
//set update binding
|
||||
Localize.prototype.bind = function(path, callback){
|
||||
if(!this.bindings[path]){
|
||||
this.bindings[path] = [];
|
||||
}
|
||||
|
||||
this.bindings[path].push(callback);
|
||||
|
||||
callback(this.getText(path), this.lang);
|
||||
};
|
||||
|
||||
//itterate through bindings and trigger updates
|
||||
Localize.prototype._executeBindings = function(){
|
||||
var self = this;
|
||||
|
||||
for(let path in self.bindings){
|
||||
self.bindings[path].forEach(function(binding){
|
||||
binding(self.getText(path), self.lang);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
//Localized text listings
|
||||
Localize.prototype.langs = {
|
||||
"default":{ //hold default locale text
|
||||
"groups":{
|
||||
"item":"item",
|
||||
"items":"items",
|
||||
},
|
||||
"columns":{
|
||||
},
|
||||
"ajax":{
|
||||
"loading":"Loading",
|
||||
"error":"Error",
|
||||
},
|
||||
"pagination":{
|
||||
"first":"First",
|
||||
"first_title":"First Page",
|
||||
"last":"Last",
|
||||
"last_title":"Last Page",
|
||||
"prev":"Prev",
|
||||
"prev_title":"Prev Page",
|
||||
"next":"Next",
|
||||
"next_title":"Next Page",
|
||||
},
|
||||
"headerFilters":{
|
||||
"default":"filter column...",
|
||||
"columns":{}
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
Tabulator.registerExtension("localize", Localize);
|
||||
187
js/tabulator/src/js/extensions/moveable_columns.js
Normal file
187
js/tabulator/src/js/extensions/moveable_columns.js
Normal file
@ -0,0 +1,187 @@
|
||||
var MoveColumns = function(table){
|
||||
this.table = table; //hold Tabulator object
|
||||
this.placeholderElement = $("<div class='tabulator-col tabulator-col-placeholder'></div>");
|
||||
this.hoverElement = $(); //floating column header element
|
||||
this.checkTimeout = false; //click check timeout holder
|
||||
this.checkPeriod = 250; //period to wait on mousedown to consider this a move and not a click
|
||||
this.moving = false; //currently moving column
|
||||
this.toCol = false; //destination column
|
||||
this.toColAfter = false; //position of moving column relative to the desitnation column
|
||||
this.startX = 0; //starting position within header element
|
||||
this.autoScrollMargin = 40; //auto scroll on edge when within margin
|
||||
this.autoScrollStep = 5; //auto scroll distance in pixels
|
||||
this.autoScrollTimeout = false; //auto scroll timeout
|
||||
|
||||
this.moveHover = this.moveHover.bind(this);
|
||||
this.endMove = this.endMove.bind(this);
|
||||
};
|
||||
|
||||
MoveColumns.prototype.initializeColumn = function(column){
|
||||
var self = this,
|
||||
config = {};
|
||||
|
||||
if(!column.extensions.frozen){
|
||||
|
||||
config.mousemove = function(e){
|
||||
if(column.parent === self.moving.parent){
|
||||
if(((e.pageX - column.element.offset().left) + self.table.columnManager.element.scrollLeft()) > (column.getWidth() / 2)){
|
||||
if(self.toCol !== column || !self.toColAfter){
|
||||
column.element.after(self.placeholderElement);
|
||||
self.moveColumn(column, true);
|
||||
}
|
||||
}else{
|
||||
if(self.toCol !== column || self.toColAfter){
|
||||
column.element.before(self.placeholderElement);
|
||||
self.moveColumn(column, false);
|
||||
}
|
||||
}
|
||||
}
|
||||
}.bind(self)
|
||||
|
||||
column.getElement().on("mousedown", function(e){
|
||||
self.checkTimeout = setTimeout(function(){
|
||||
self.startMove(e, column);
|
||||
}, self.checkPeriod)
|
||||
});
|
||||
|
||||
column.getElement().on("mouseup", function(e){
|
||||
if(self.checkTimeout){
|
||||
clearTimeout(self.checkTimeout);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
column.extensions.moveColumn = config;
|
||||
};
|
||||
|
||||
MoveColumns.prototype.startMove = function(e, column){
|
||||
var self = this,
|
||||
element = column.getElement();
|
||||
|
||||
|
||||
self.moving = column;
|
||||
self.startX = (e.pageX - element.offset().left);
|
||||
|
||||
self.table.element.addClass("tabulator-block-select");
|
||||
|
||||
//create placeholder
|
||||
self.placeholderElement.css({
|
||||
width:column.getWidth(),
|
||||
height:column.getHeight(),
|
||||
});
|
||||
element.before(self.placeholderElement)
|
||||
element.detach();
|
||||
|
||||
//create hover element
|
||||
self.hoverElement = element.clone();
|
||||
self.hoverElement.addClass("tabulator-moving");
|
||||
|
||||
self.table.columnManager.getElement().append(self.hoverElement);
|
||||
self.hoverElement.css({
|
||||
"left":0,
|
||||
"bottom":0,
|
||||
});
|
||||
|
||||
self._bindMouseMove();
|
||||
|
||||
$("body").on("mousemove", self.moveHover)
|
||||
$("body").on("mouseup", self.endMove)
|
||||
|
||||
self.moveHover(e);
|
||||
};
|
||||
|
||||
MoveColumns.prototype._bindMouseMove = function(){
|
||||
var self = this;
|
||||
|
||||
self.table.columnManager.columnsByIndex.forEach(function(column){
|
||||
if(column.extensions.moveColumn.mousemove){
|
||||
column.element.on("mousemove", column.extensions.moveColumn.mousemove);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
MoveColumns.prototype._unbindMouseMove = function(){
|
||||
var self = this;
|
||||
|
||||
self.table.columnManager.columnsByIndex.forEach(function(column){
|
||||
if(column.extensions.moveColumn.mousemove){
|
||||
column.element.off("mousemove", column.extensions.moveColumn.mousemove);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
MoveColumns.prototype.moveColumn = function(column, after){
|
||||
var self = this,
|
||||
movingCells = this.moving.getCells();
|
||||
|
||||
self.toCol = column;
|
||||
self.toColAfter = after;
|
||||
|
||||
if(after){
|
||||
column.getCells().forEach(function(cell, i){
|
||||
cell.getElement().after(movingCells[i].getElement())
|
||||
});
|
||||
}else{
|
||||
column.getCells().forEach(function(cell, i){
|
||||
cell.getElement().before(movingCells[i].getElement())
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
MoveColumns.prototype.endMove = function(column){
|
||||
var self = this;
|
||||
|
||||
self._unbindMouseMove();
|
||||
|
||||
self.placeholderElement.after(self.moving.getElement());
|
||||
self.placeholderElement.detach();
|
||||
self.hoverElement.detach();
|
||||
|
||||
self.table.element.removeClass("tabulator-block-select");
|
||||
|
||||
if(self.toCol){
|
||||
self.table.columnManager.moveColumn(self.moving, self.toCol, self.toColAfter);
|
||||
}
|
||||
|
||||
self.moving = false;
|
||||
self.toCol = false;
|
||||
self.toColAfter = false;
|
||||
|
||||
$("body").off("mousemove", self.moveHover);
|
||||
$("body").off("mouseup", self.endMove);
|
||||
};
|
||||
|
||||
MoveColumns.prototype.moveHover = function(e){
|
||||
var self = this,
|
||||
columnHolder = self.table.columnManager.getElement(),
|
||||
scrollLeft = columnHolder.scrollLeft(),
|
||||
xPos = (e.pageX - columnHolder.offset().left) + scrollLeft,
|
||||
scrollPos;
|
||||
|
||||
self.hoverElement.css({
|
||||
"left":xPos - self.startX,
|
||||
});
|
||||
|
||||
|
||||
if(xPos - scrollLeft < self.autoScrollMargin){
|
||||
if(!self.autoScrollTimeout){
|
||||
self.autoScrollTimeout = setTimeout(function(){
|
||||
scrollPos = Math.max(0,scrollLeft-5);
|
||||
self.table.rowManager.getElement().scrollLeft(scrollPos);
|
||||
self.autoScrollTimeout = false;
|
||||
}, 1);
|
||||
}
|
||||
}
|
||||
|
||||
if(scrollLeft + columnHolder.innerWidth() - xPos < self.autoScrollMargin){
|
||||
if(!self.autoScrollTimeout){
|
||||
self.autoScrollTimeout = setTimeout(function(){
|
||||
scrollPos = Math.min(columnHolder.innerWidth(), scrollLeft+5);
|
||||
self.table.rowManager.getElement().scrollLeft(scrollPos);
|
||||
self.autoScrollTimeout = false;
|
||||
}, 1);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
Tabulator.registerExtension("moveColumn", MoveColumns);
|
||||
172
js/tabulator/src/js/extensions/moveable_rows.js
Normal file
172
js/tabulator/src/js/extensions/moveable_rows.js
Normal file
@ -0,0 +1,172 @@
|
||||
var MoveRows = function(table){
|
||||
|
||||
this.table = table; //hold Tabulator object
|
||||
this.placeholderElement = $("<div class='tabulator-row tabulator-row-placeholder'></div>");
|
||||
this.hoverElement = $(); //floating row header element
|
||||
this.checkTimeout = false; //click check timeout holder
|
||||
this.checkPeriod = 150; //period to wait on mousedown to consider this a move and not a click
|
||||
this.moving = false; //currently moving row
|
||||
this.toRow = false; //destination row
|
||||
this.toRowAfter = false; //position of moving row relative to the desitnation row
|
||||
this.hasHandle = false; //row has handle instead of fully movable row
|
||||
this.startY = 0; //starting position within header element
|
||||
|
||||
this.moveHover = this.moveHover.bind(this);
|
||||
this.endMove = this.endMove.bind(this);
|
||||
};
|
||||
|
||||
MoveRows.prototype.setHandle = function(handle){
|
||||
this.hasHandle = handle;
|
||||
};
|
||||
|
||||
MoveRows.prototype.initializeRow = function(row){
|
||||
var self = this,
|
||||
config = {};
|
||||
|
||||
config.mousemove = function(e){
|
||||
if(((e.pageY - row.element.offset().top) + self.table.rowManager.element.scrollTop()) > (row.getHeight() / 2)){
|
||||
if(self.toRow !== row || !self.toRowAfter){
|
||||
row.element.after(self.placeholderElement);
|
||||
self.moveRow(row, true);
|
||||
}
|
||||
}else{
|
||||
if(self.toRow !== row || self.toRowAfter){
|
||||
row.element.before(self.placeholderElement);
|
||||
self.moveRow(row, false);
|
||||
}
|
||||
}
|
||||
}.bind(self);
|
||||
|
||||
if(!this.hasHandle){
|
||||
|
||||
row.getElement().on("mousedown", function(e){
|
||||
self.checkTimeout = setTimeout(function(){
|
||||
self.startMove(e, row);
|
||||
}, self.checkPeriod);
|
||||
});
|
||||
|
||||
row.getElement().on("mouseup", function(e){
|
||||
if(self.checkTimeout){
|
||||
clearTimeout(self.checkTimeout);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
row.extensions.moveRow = config;
|
||||
};
|
||||
|
||||
MoveRows.prototype.initializeCell = function(cell){
|
||||
var self = this;
|
||||
|
||||
cell.getElement().on("mousedown", function(e){
|
||||
self.checkTimeout = setTimeout(function(){
|
||||
self.startMove(e, cell.row);
|
||||
}, self.checkPeriod);
|
||||
});
|
||||
|
||||
cell.getElement().on("mouseup", function(e){
|
||||
if(self.checkTimeout){
|
||||
clearTimeout(self.checkTimeout);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
MoveRows.prototype._bindMouseMove = function(){
|
||||
var self = this;
|
||||
|
||||
self.table.rowManager.displayRows.forEach(function(row){
|
||||
if(row.type === "row" && row.extensions.moveRow.mousemove){
|
||||
row.element.on("mousemove", row.extensions.moveRow.mousemove);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
MoveRows.prototype._unbindMouseMove = function(){
|
||||
var self = this;
|
||||
|
||||
self.table.rowManager.displayRows.forEach(function(row){
|
||||
if(row.type === "row" && row.extensions.moveRow.mousemove){
|
||||
row.element.off("mousemove", row.extensions.moveRow.mousemove);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
MoveRows.prototype.startMove = function(e, row){
|
||||
var self = this,
|
||||
element = row.getElement();
|
||||
|
||||
self.moving = row;
|
||||
self.startY = (e.pageY - element.offset().top);
|
||||
|
||||
self.table.element.addClass("tabulator-block-select");
|
||||
|
||||
//create placeholder
|
||||
self.placeholderElement.css({
|
||||
width:row.getWidth(),
|
||||
height:row.getHeight(),
|
||||
});
|
||||
element.before(self.placeholderElement)
|
||||
element.detach();
|
||||
|
||||
//create hover element
|
||||
self.hoverElement = element.clone();
|
||||
self.hoverElement.addClass("tabulator-moving");
|
||||
|
||||
self.table.rowManager.getTableElement().append(self.hoverElement);
|
||||
self.hoverElement.css({
|
||||
"left":0,
|
||||
"top":0,
|
||||
});
|
||||
|
||||
|
||||
self._bindMouseMove();
|
||||
|
||||
$("body").on("mousemove", self.moveHover);
|
||||
$("body").on("mouseup", self.endMove);
|
||||
|
||||
self.moveHover(e);
|
||||
};
|
||||
|
||||
MoveRows.prototype.endMove = function(column){
|
||||
var self = this;
|
||||
|
||||
self._unbindMouseMove();
|
||||
|
||||
self.placeholderElement.after(self.moving.getElement());
|
||||
self.placeholderElement.detach();
|
||||
self.hoverElement.detach();
|
||||
|
||||
self.table.element.removeClass("tabulator-block-select");
|
||||
|
||||
if(self.toRow){
|
||||
self.table.rowManager.moveRow(self.moving, self.toRow, self.toRowAfter);
|
||||
}
|
||||
|
||||
self.moving = false;
|
||||
self.toRow = false;
|
||||
self.toRowAfter = false;
|
||||
|
||||
$("body").off("mousemove", self.moveHover);
|
||||
$("body").off("mouseup", self.endMove);
|
||||
};
|
||||
|
||||
MoveRows.prototype.moveRow = function(row, after){
|
||||
var self = this;
|
||||
|
||||
self.toRow = row;
|
||||
self.toRowAfter = after;
|
||||
};
|
||||
|
||||
MoveRows.prototype.moveHover = function(e){
|
||||
var self = this,
|
||||
rowHolder = self.table.rowManager.getElement(),
|
||||
scrollTop = rowHolder.scrollTop(),
|
||||
yPos = (e.pageY - rowHolder.offset().top) + scrollTop,
|
||||
scrollPos;
|
||||
|
||||
self.hoverElement.css({
|
||||
"top":yPos - self.startY,
|
||||
});
|
||||
};
|
||||
|
||||
Tabulator.registerExtension("moveRow", MoveRows);
|
||||
58
js/tabulator/src/js/extensions/mutator.js
Normal file
58
js/tabulator/src/js/extensions/mutator.js
Normal file
@ -0,0 +1,58 @@
|
||||
var Mutator = function(table){
|
||||
this.table = table; //hold Tabulator object
|
||||
};
|
||||
|
||||
//initialize column mutator
|
||||
Mutator.prototype.initializeColumn = function(column){
|
||||
|
||||
var config = {mutator:false, type:column.definition.mutateType, params:column.definition.mutatorParams || {}};
|
||||
|
||||
//set column mutator
|
||||
switch(typeof column.definition.mutator){
|
||||
case "string":
|
||||
if(this.mutators[column.definition.mutator]){
|
||||
config.mutator = this.mutators[column.definition.mutator]
|
||||
}else{
|
||||
console.warn("Mutator Error - No such mutator found, ignoring: ", column.definition.mutator);
|
||||
}
|
||||
break;
|
||||
|
||||
case "function":
|
||||
config.mutator = column.definition.mutator;
|
||||
break;
|
||||
}
|
||||
|
||||
if(config.mutator){
|
||||
column.extensions.mutate = config;
|
||||
}
|
||||
};
|
||||
|
||||
//apply mutator to row
|
||||
Mutator.prototype.transformRow = function(data){
|
||||
var self = this;
|
||||
|
||||
self.table.columnManager.traverse(function(column){
|
||||
var field;
|
||||
|
||||
if(column.extensions.mutate){
|
||||
|
||||
field = column.getField();
|
||||
|
||||
if(column.extensions.mutate.type != "edit"){
|
||||
column.setFieldValue(data, column.extensions.mutate.mutator(column.getFieldValue(data), data, "data", column.extensions.mutate.params));
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return data;
|
||||
};
|
||||
|
||||
//apply mutator to new cell value
|
||||
Mutator.prototype.transformCell = function(cell, value){
|
||||
return cell.column.extensions.mutate.mutator(value, cell.row.getData(), "edit", cell.column.extensions.mutate.params, cell.getComponent())
|
||||
};
|
||||
|
||||
//default mutators
|
||||
Mutator.prototype.mutators = {};
|
||||
|
||||
Tabulator.registerExtension("mutator", Mutator);
|
||||
412
js/tabulator/src/js/extensions/page.js
Normal file
412
js/tabulator/src/js/extensions/page.js
Normal file
@ -0,0 +1,412 @@
|
||||
var Page = function(table){
|
||||
|
||||
this.table = table; //hold Tabulator object
|
||||
|
||||
this.element = $("<span class='tabulator-paginator'></span>");
|
||||
this.pagesElement = $("<span class='tabulator-pages'></span>");
|
||||
this.firstBut = $("<button class='tabulator-page' data-page='first' role='button' aria-label='' title=''></button>");
|
||||
this.prevBut = $("<button class='tabulator-page' data-page='prev' role='button' aria-label='' title=''></button>");
|
||||
this.nextBut = $("<button class='tabulator-page' data-page='next' role='button' aria-label='' title=''></button>");
|
||||
this.lastBut = $("<button class='tabulator-page' data-page='last' role='button' aria-label='' title=''></button>");
|
||||
|
||||
this.mode = "local";
|
||||
this.size = 0;
|
||||
this.page = 1;
|
||||
this.max = 1;
|
||||
this.paginator = false;
|
||||
};
|
||||
|
||||
//setup pageination
|
||||
Page.prototype.initialize = function(){
|
||||
var self = this;
|
||||
|
||||
//update param names
|
||||
for(let key in self.table.options.paginationDataSent){
|
||||
self.paginationDataSentNames[key] = self.table.options.paginationDataSent[key];
|
||||
}
|
||||
|
||||
for(let key in self.table.options.paginationDataReceived){
|
||||
self.paginationDataReceivedNames[key] = self.table.options.paginationDataReceived[key];
|
||||
}
|
||||
|
||||
if(self.table.options.paginator){
|
||||
self.paginator = self.table.options.paginator;
|
||||
}
|
||||
|
||||
|
||||
//build pagination element
|
||||
|
||||
//bind localizations
|
||||
self.table.extensions.localize.bind("pagination.first", function(value){
|
||||
self.firstBut.html(value);
|
||||
});
|
||||
|
||||
self.table.extensions.localize.bind("pagination.first_title", function(value){
|
||||
self.firstBut.attr("aria-label", value)
|
||||
.attr("title", value);
|
||||
});
|
||||
|
||||
self.table.extensions.localize.bind("pagination.prev", function(value){
|
||||
self.prevBut.html(value);
|
||||
});
|
||||
|
||||
self.table.extensions.localize.bind("pagination.prev_title", function(value){
|
||||
self.prevBut.attr("aria-label", value)
|
||||
.attr("title", value);
|
||||
});
|
||||
|
||||
self.table.extensions.localize.bind("pagination.next", function(value){
|
||||
self.nextBut.html(value);
|
||||
});
|
||||
|
||||
self.table.extensions.localize.bind("pagination.next_title", function(value){
|
||||
self.nextBut.attr("aria-label", value)
|
||||
.attr("title", value);
|
||||
});
|
||||
|
||||
self.table.extensions.localize.bind("pagination.last", function(value){
|
||||
self.lastBut.html(value);
|
||||
});
|
||||
|
||||
self.table.extensions.localize.bind("pagination.last_title", function(value){
|
||||
self.lastBut.attr("aria-label", value)
|
||||
.attr("title", value);
|
||||
});
|
||||
|
||||
//click bindings
|
||||
self.firstBut.on("click", function(){
|
||||
self.setPage(1);
|
||||
});
|
||||
|
||||
self.prevBut.on("click", function(){
|
||||
self.previousPage();
|
||||
});
|
||||
|
||||
self.nextBut.on("click", function(){
|
||||
self.nextPage();
|
||||
});
|
||||
|
||||
self.lastBut.on("click", function(){
|
||||
self.setPage(self.max);
|
||||
});
|
||||
|
||||
if(self.table.options.paginationElement){
|
||||
self.element = self.table.options.paginationElement;
|
||||
}
|
||||
|
||||
//append to DOM
|
||||
self.element.append(self.firstBut);
|
||||
self.element.append(self.prevBut);
|
||||
self.element.append(self.pagesElement);
|
||||
self.element.append(self.nextBut);
|
||||
self.element.append(self.lastBut);
|
||||
|
||||
if(!self.table.options.paginationElement){
|
||||
self.table.footerManager.append(self.element, self);
|
||||
}
|
||||
|
||||
|
||||
//set default values
|
||||
self.mode = self.table.options.pagination;
|
||||
self.size = self.table.options.paginationSize || Math.floor(self.table.rowManager.getElement().innerHeight() / 26);
|
||||
};
|
||||
|
||||
//calculate maximum page from number of rows
|
||||
Page.prototype.setMaxRows = function(rowCount){
|
||||
|
||||
if(!rowCount){
|
||||
this.max = 1;
|
||||
}else{
|
||||
this.max = Math.ceil(rowCount/this.size);
|
||||
}
|
||||
|
||||
if(this.page > this.max){
|
||||
this.page = this.max;
|
||||
}
|
||||
};
|
||||
|
||||
//reset to first page without triggering action
|
||||
Page.prototype.reset = function(force){
|
||||
if(this.mode == "local" || force){
|
||||
this.page = 1;
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
//set the maxmum page
|
||||
Page.prototype.setMaxPage = function(max){
|
||||
this.max = max || 1;
|
||||
|
||||
if(this.page > this.max){
|
||||
this.page = this.max;
|
||||
this.trigger();
|
||||
}
|
||||
};
|
||||
|
||||
//set current page number
|
||||
Page.prototype.setPage = function(page){
|
||||
if(page > 0 && page <= this.max){
|
||||
this.page = page;
|
||||
this.trigger();
|
||||
return true;
|
||||
}else{
|
||||
console.warn("Pagination Error - Requested page is out of range of 1 - " + this.max + ":", page);
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
Page.prototype.setPageSize = function(size){
|
||||
if(size > 0){
|
||||
this.size = size;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
//setup the pagination buttons
|
||||
Page.prototype._setPageButtons = function(){
|
||||
var self = this;
|
||||
|
||||
var min = this.page < this.max-2 ? (this.page - 2) : (this.page - (4 - (this.max - this.page)));
|
||||
var max = this.page > 3 ? (this.page + 2) : (this.page + (5 - this.page));
|
||||
|
||||
self.pagesElement.empty();
|
||||
|
||||
if(self.page == 1){
|
||||
self.firstBut.prop("disabled", true);
|
||||
self.prevBut.prop("disabled", true);
|
||||
}else{
|
||||
self.firstBut.prop("disabled", false);
|
||||
self.prevBut.prop("disabled", false);
|
||||
}
|
||||
|
||||
if(self.page == self.max){
|
||||
self.lastBut.prop("disabled", true);
|
||||
self.nextBut.prop("disabled", true);
|
||||
}else{
|
||||
self.lastBut.prop("disabled", false);
|
||||
self.nextBut.prop("disabled", false);
|
||||
}
|
||||
|
||||
for(let i = min; i <= max; i++){
|
||||
if(i>0 && i <= self.max){
|
||||
self.pagesElement.append(self._generatePageButton(i));
|
||||
}
|
||||
}
|
||||
|
||||
this.footerRedraw();
|
||||
};
|
||||
|
||||
Page.prototype._generatePageButton = function(page){
|
||||
var self = this;
|
||||
var button = $("<button class='tabulator-page " + (page == self.page ? "active" : "") + "' data-page='" + page + "' role='button' arpagea-label='Show Page " + page + "'>" + page + "</button>");
|
||||
|
||||
button.on("click", function(e){
|
||||
self.setPage(page);
|
||||
});
|
||||
|
||||
return button;
|
||||
};
|
||||
|
||||
//previous page
|
||||
Page.prototype.previousPage = function(){
|
||||
if(this.page > 1){
|
||||
this.page--;
|
||||
this.trigger();
|
||||
return true;
|
||||
}else{
|
||||
console.warn("Pagination Error - Previous page would be less than page 1:", 0);
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
//next page
|
||||
Page.prototype.nextPage = function(){
|
||||
if(this.page < this.max){
|
||||
this.page++;
|
||||
this.trigger();
|
||||
return true;
|
||||
}else{
|
||||
console.warn("Pagination Error - Next page would be greater than maximum page of " + this.max + ":", this.max + 1);
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
//return current page number
|
||||
Page.prototype.getPage = function(){
|
||||
return this.page;
|
||||
};
|
||||
|
||||
//return max page number
|
||||
Page.prototype.getPageMax = function(){
|
||||
return this.max;
|
||||
};
|
||||
|
||||
Page.prototype.getPageSize = function(size){;
|
||||
return this.size;
|
||||
};
|
||||
|
||||
Page.prototype.getMode = function(){
|
||||
return this.mode;
|
||||
};
|
||||
|
||||
//return appropriate rows for current page
|
||||
Page.prototype.getRows = function(data){
|
||||
var output, start, end;
|
||||
|
||||
if(this.mode == "local"){
|
||||
output = [];
|
||||
start = this.size * (this.page - 1);
|
||||
end = start + parseInt(this.size);
|
||||
|
||||
this._setPageButtons();
|
||||
|
||||
for(let i = start; i < end; i++){
|
||||
if(data[i]){
|
||||
output.push(data[i]);
|
||||
}
|
||||
}
|
||||
|
||||
return output;
|
||||
}else{
|
||||
|
||||
this._setPageButtons();
|
||||
|
||||
return data.slice(0);
|
||||
}
|
||||
};
|
||||
|
||||
Page.prototype.trigger = function(){
|
||||
switch(this.mode){
|
||||
case "local":
|
||||
this.table.rowManager.refreshActiveData();
|
||||
this.table.options.pageLoaded(this.getPage());
|
||||
break;
|
||||
|
||||
case "remote":
|
||||
this._getRemotePage();
|
||||
break;
|
||||
|
||||
default:
|
||||
console.warn("Pagination Error - no such pagination mode:", this.mode);
|
||||
}
|
||||
};
|
||||
|
||||
Page.prototype._getRemotePage = function(){
|
||||
if(this.table.extExists("ajax", true)){
|
||||
|
||||
if(this.paginator){
|
||||
this._getRemotePagePaginator();
|
||||
}else{
|
||||
this._getRemotePageAuto();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
Page.prototype._getRemotePagePaginator = function(){
|
||||
var self = this,
|
||||
ajax = self.table.extensions.ajax,
|
||||
oldUrl = ajax.getUrl();
|
||||
|
||||
ajax.setUrl(self.paginator(ajax.getUrl(), self.page, self.size, ajax.getParams()))
|
||||
|
||||
ajax.sendRequest(function(data){
|
||||
self._parseRemoteData(data);
|
||||
});
|
||||
|
||||
ajax.setUrl(oldUrl);
|
||||
};
|
||||
|
||||
Page.prototype._getRemotePageAuto = function(){
|
||||
var self = this,
|
||||
oldParams, pageParams;
|
||||
|
||||
//record old params and restore after request has been made
|
||||
oldParams = $.extend(true, {}, self.table.extensions.ajax.getParams());
|
||||
pageParams = self.table.extensions.ajax.getParams();
|
||||
|
||||
//configure request params
|
||||
pageParams[this.paginationDataSentNames.page] = self.page;
|
||||
|
||||
//set page size if defined
|
||||
if(this.size){
|
||||
pageParams[this.paginationDataSentNames.size] = this.size;
|
||||
}
|
||||
|
||||
//set sort data if defined
|
||||
if(this.table.extExists("sort")){
|
||||
let sorters = self.table.extensions.sort.getSort();
|
||||
|
||||
sorters.forEach(function(item){
|
||||
delete item.column;
|
||||
});
|
||||
|
||||
pageParams[this.paginationDataSentNames.sorters] = sorters;
|
||||
}
|
||||
|
||||
//set filter data if defined
|
||||
if(this.table.extExists("filter")){
|
||||
let filters = self.table.extensions.filter.getFilters(true, true);
|
||||
pageParams[this.paginationDataSentNames.filters] = filters;
|
||||
}
|
||||
|
||||
self.table.extensions.ajax.setParams(pageParams);
|
||||
|
||||
self.table.extensions.ajax.sendRequest(function(data){
|
||||
self._parseRemoteData(data);
|
||||
});
|
||||
|
||||
self.table.extensions.ajax.setParams(oldParams);
|
||||
};
|
||||
|
||||
|
||||
|
||||
Page.prototype._parseRemoteData = function(data){
|
||||
if(data[this.paginationDataReceivedNames.last_page]){
|
||||
if(data[this.paginationDataReceivedNames.data]){
|
||||
this.max = parseInt(data[this.paginationDataReceivedNames.last_page]);
|
||||
|
||||
this.table.rowManager.setData(data[this.paginationDataReceivedNames.data]);
|
||||
|
||||
this.table.options.pageLoaded(this.getPage());
|
||||
}else{
|
||||
console.warn("Remote Pagination Error - Server response missing '" + this.paginationDataReceivedNames.data + "' property");
|
||||
}
|
||||
}else{
|
||||
console.warn("Remote Pagination Error - Server response missing '" + this.paginationDataReceivedNames.last_page + "' property");
|
||||
}
|
||||
};
|
||||
|
||||
//handle the footer element being redrawn
|
||||
Page.prototype.footerRedraw = function(){
|
||||
var footer = this.table.footerManager.element;
|
||||
|
||||
if((footer.innerWidth() - footer[0].scrollWidth) < 0){
|
||||
this.pagesElement.hide();
|
||||
}else{
|
||||
this.pagesElement.show();
|
||||
|
||||
if((footer.innerWidth() - footer[0].scrollWidth) < 0){
|
||||
this.pagesElement.hide();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
//set the paramter names for pagination requests
|
||||
Page.prototype.paginationDataSentNames = {
|
||||
"page":"page",
|
||||
"size":"size",
|
||||
"sorters":"sorters",
|
||||
// "sort_dir":"sort_dir",
|
||||
"filters":"filters",
|
||||
// "filter_value":"filter_value",
|
||||
// "filter_type":"filter_type",
|
||||
};
|
||||
|
||||
//set the property names for pagination responses
|
||||
Page.prototype.paginationDataReceivedNames = {
|
||||
"current_page":"current_page",
|
||||
"last_page":"last_page",
|
||||
"data":"data",
|
||||
};
|
||||
|
||||
Tabulator.registerExtension("page", Page);
|
||||
155
js/tabulator/src/js/extensions/persistent_layout.js
Normal file
155
js/tabulator/src/js/extensions/persistent_layout.js
Normal file
@ -0,0 +1,155 @@
|
||||
var PersistentLayout = function(table){
|
||||
this.table = table; //hold Tabulator object
|
||||
this.mode = "";
|
||||
this.id = "";
|
||||
this.persistProps = ["field", "width", "visible"];
|
||||
};
|
||||
|
||||
//setup parameters
|
||||
PersistentLayout.prototype.initialize = function(mode, id){
|
||||
//determine persistent layout storage type
|
||||
this.mode = mode !== true ? mode : (typeof window.localStorage !== 'undefined' ? "local" : "cookie");
|
||||
|
||||
//set storage tag
|
||||
this.id = "tabulator-" + (id || (this.table.element.attr("id") || ""));
|
||||
};
|
||||
|
||||
//load saved definitions
|
||||
PersistentLayout.prototype.load = function(definition){
|
||||
|
||||
var newDefinition = "";
|
||||
|
||||
switch(this.mode){
|
||||
case "local":
|
||||
newDefinition = localStorage.getItem(this.id);
|
||||
break;
|
||||
|
||||
case "cookie":
|
||||
|
||||
//find cookie
|
||||
let cookie = document.cookie,
|
||||
cookiePos = cookie.indexOf(this.id + "="),
|
||||
end;
|
||||
|
||||
//if cookie exists, decode and load column data into tabulator
|
||||
if(cookiePos > -1){
|
||||
cookie = cookie.substr(cookiePos);
|
||||
|
||||
end = cookie.indexOf(";");
|
||||
|
||||
if(end > -1){
|
||||
cookie = cookie.substr(0, end);
|
||||
}
|
||||
|
||||
newDefinition = cookie.replace(this.id + "=", "");
|
||||
}
|
||||
break;
|
||||
|
||||
default:
|
||||
console.warn("Persistance Load Error - invalid mode selected", this.mode);
|
||||
}
|
||||
|
||||
if(newDefinition){
|
||||
newDefinition = JSON.parse(newDefinition);
|
||||
|
||||
definition = this.mergeDefinition(definition, newDefinition);
|
||||
}
|
||||
|
||||
return definition;
|
||||
};
|
||||
|
||||
//merge old and new column defintions
|
||||
PersistentLayout.prototype.mergeDefinition = function(oldCols, newCols){
|
||||
var self = this,
|
||||
output = [];
|
||||
|
||||
newCols.forEach(function(column, to){
|
||||
|
||||
var from = self._findColumn(oldCols, column);
|
||||
|
||||
if(from){
|
||||
|
||||
from.width = column.width;
|
||||
from.visible = column.visible;
|
||||
|
||||
if(from.columns){
|
||||
from.columns = self.mergeDefinition(from.columns, column.columns);
|
||||
}
|
||||
|
||||
output.push(from);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
return output;
|
||||
};
|
||||
|
||||
//find matching columns
|
||||
PersistentLayout.prototype._findColumn = function(columns, subject){
|
||||
var type = subject.columns ? "group" : (subject.field ? "field" : "object");
|
||||
|
||||
return columns.find(function(col){
|
||||
switch(type){
|
||||
case "group":
|
||||
return col.title === subject.title && col.columns.length === subject.columns.length;
|
||||
break;
|
||||
|
||||
case "field":
|
||||
return col.field === subject.field;
|
||||
break;
|
||||
|
||||
case "object":
|
||||
return col === subject;
|
||||
break;
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
//save current definitions
|
||||
PersistentLayout.prototype.save = function(){
|
||||
var definition = this.parseColumns(this.table.columnManager.getColumns()),
|
||||
data = JSON.stringify(definition);
|
||||
|
||||
switch(this.mode){
|
||||
case "local":
|
||||
localStorage.setItem(this.id, data);
|
||||
break;
|
||||
|
||||
case "cookie":
|
||||
let expireDate = new Date();
|
||||
expireDate.setDate(expireDate.getDate() + 10000);
|
||||
|
||||
//save cookie
|
||||
document.cookie = this.id + "=" + data + "; expires=" + expireDate.toUTCString();
|
||||
break;
|
||||
|
||||
default:
|
||||
console.warn("Persistance Save Error - invalid mode selected", this.mode);
|
||||
}
|
||||
};
|
||||
|
||||
//build premission list
|
||||
PersistentLayout.prototype.parseColumns = function(columns){
|
||||
var self = this,
|
||||
definitions = [];
|
||||
|
||||
columns.forEach(function(column){
|
||||
var def = {};
|
||||
|
||||
if(column.isGroup){
|
||||
def.title = column.getDefinition().title;
|
||||
def.columns = self.parseColumns(column.getColumns());
|
||||
}else{
|
||||
def.title = column.getDefinition().title;
|
||||
def.field = column.getField();
|
||||
def.width = column.getWidth();
|
||||
def.visible = column.visible;
|
||||
}
|
||||
|
||||
definitions.push(def);
|
||||
});
|
||||
|
||||
return definitions;
|
||||
};
|
||||
|
||||
Tabulator.registerExtension("persistentLayout", PersistentLayout);
|
||||
119
js/tabulator/src/js/extensions/resize_columns.js
Normal file
119
js/tabulator/src/js/extensions/resize_columns.js
Normal file
@ -0,0 +1,119 @@
|
||||
var ResizeColumns = function(table){
|
||||
this.table = table; //hold Tabulator object
|
||||
this.startColumn = false;
|
||||
this.startX = false;
|
||||
this.startWidth = false;
|
||||
this.handle = null;
|
||||
this.prevHandle = null;
|
||||
};
|
||||
|
||||
ResizeColumns.prototype.initializeColumn = function(type, column, element){
|
||||
var self = this,
|
||||
variableHeight =false,
|
||||
mode = this.table.options.resizableColumns;
|
||||
|
||||
//set column resize mode
|
||||
if(type === "header"){
|
||||
variableHeight = column.definition.formatter == "textarea" || column.definition.variableHeight;
|
||||
column.extensions.resize = {variableHeight:variableHeight};
|
||||
}
|
||||
|
||||
if(mode === true || mode == type){
|
||||
|
||||
var handle = document.createElement('div');
|
||||
handle.className = "tabulator-col-resize-handle";
|
||||
|
||||
|
||||
var prevHandle = document.createElement('div');
|
||||
prevHandle.className = "tabulator-col-resize-handle prev";
|
||||
|
||||
handle.addEventListener("click", function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
|
||||
handle.addEventListener("mousedown", function(e){
|
||||
var nearestColumn = column.getLastColumn();
|
||||
|
||||
if(nearestColumn){
|
||||
self.startColumn = column;
|
||||
self._mouseDown(e, nearestColumn);
|
||||
}
|
||||
});
|
||||
|
||||
prevHandle.addEventListener("click", function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
|
||||
prevHandle.addEventListener("mousedown", function(e){
|
||||
var nearestColumn, colIndex, prevColumn;
|
||||
|
||||
nearestColumn = column.getFirstColumn();
|
||||
|
||||
if(nearestColumn){
|
||||
colIndex = self.table.columnManager.findColumnIndex(nearestColumn);
|
||||
prevColumn = colIndex > 0 ? self.table.columnManager.getColumnByIndex(colIndex - 1) : false;
|
||||
|
||||
if(prevColumn){
|
||||
self.startColumn = column;
|
||||
self._mouseDown(e, prevColumn);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
element.append(handle)
|
||||
.append(prevHandle);
|
||||
}
|
||||
};
|
||||
|
||||
ResizeColumns.prototype._mouseDown = function(e, column){
|
||||
var self = this;
|
||||
|
||||
self.table.element.addClass("tabulator-block-select");
|
||||
|
||||
function mouseMove(e){
|
||||
column.setWidth(self.startWidth + (e.screenX - self.startX));
|
||||
|
||||
if(!self.table.browserSlow && column.extensions.resize && column.extensions.resize.variableHeight){
|
||||
column.checkCellHeights();
|
||||
}
|
||||
}
|
||||
|
||||
function mouseUp(e){
|
||||
|
||||
//block editor from taking action while resizing is taking place
|
||||
if(self.startColumn.extensions.edit){
|
||||
self.startColumn.extensions.edit.blocked = false;
|
||||
}
|
||||
|
||||
if(self.table.browserSlow && column.extensions.resize && column.extensions.resize.variableHeight){
|
||||
column.checkCellHeights();
|
||||
}
|
||||
|
||||
$("body").off("mouseup", mouseMove);
|
||||
$("body").off("mousemove", mouseMove);
|
||||
|
||||
self.table.element.removeClass("tabulator-block-select");
|
||||
|
||||
if(self.table.options.persistentLayout && self.table.extExists("persistentLayout", true)){
|
||||
self.table.extensions.persistentLayout.save();
|
||||
}
|
||||
|
||||
self.table.options.columnResized(self.startColumn.getComponent())
|
||||
}
|
||||
|
||||
e.stopPropagation(); //prevent resize from interfereing with movable columns
|
||||
|
||||
//block editor from taking action while resizing is taking place
|
||||
if(self.startColumn.extensions.edit){
|
||||
self.startColumn.extensions.edit.blocked = true;
|
||||
}
|
||||
|
||||
self.startX = e.screenX;
|
||||
self.startWidth = column.getWidth();
|
||||
|
||||
$("body").on("mousemove", mouseMove);
|
||||
|
||||
$("body").on("mouseup", mouseUp);
|
||||
};
|
||||
|
||||
Tabulator.registerExtension("resizeColumns", ResizeColumns);
|
||||
84
js/tabulator/src/js/extensions/responsive_layout.js
Normal file
84
js/tabulator/src/js/extensions/responsive_layout.js
Normal file
@ -0,0 +1,84 @@
|
||||
var ResponsiveLayout = function(table){
|
||||
this.table = table; //hold Tabulator object
|
||||
this.columns = [];
|
||||
this.index = 0;
|
||||
};
|
||||
|
||||
//generate resposivle columns list
|
||||
ResponsiveLayout.prototype.initialize = function(){
|
||||
var columns=[];
|
||||
|
||||
//detemine level of responsivity for each column
|
||||
this.table.columnManager.columnsByIndex.forEach(function(column){
|
||||
var def = column.getDefinition();
|
||||
|
||||
column.extensions.responsive = {order: typeof def.responsive === "undefined" ? 1 : def.responsive};
|
||||
|
||||
if(column.extensions.responsive.order){
|
||||
columns.push(column);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
//sort list by responsivity
|
||||
columns = columns.reverse();
|
||||
columns = columns.sort(function(a, b){
|
||||
return b.extensions.responsive.order - a.extensions.responsive.order;
|
||||
});
|
||||
|
||||
this.columns = columns;
|
||||
};
|
||||
|
||||
ResponsiveLayout.prototype.update = function(){
|
||||
var self = this,
|
||||
working = true;
|
||||
|
||||
while(working){
|
||||
|
||||
let width = self.table.extensions.layout.getMode() == "fitColumns" ? self.table.columnManager.getFlexBaseWidth() : self.table.columnManager.getWidth();
|
||||
|
||||
let diff = self.table.columnManager.element.innerWidth() - width;
|
||||
|
||||
if(diff < 0){
|
||||
//table is too wide
|
||||
let column = self.columns[self.index];
|
||||
|
||||
if(column){
|
||||
column.hide();
|
||||
self.index ++;
|
||||
}else{
|
||||
working = false;
|
||||
}
|
||||
|
||||
}else{
|
||||
|
||||
//table has spare space
|
||||
let column = self.columns[self.index -1];
|
||||
|
||||
if(column){
|
||||
if(diff > 0){
|
||||
if(diff >= column.getWidth()){
|
||||
column.show();
|
||||
|
||||
//set column width to prevent calculation loops on uninitialized columns
|
||||
column.setWidth(column.getWidth());
|
||||
|
||||
self.index --;
|
||||
}else{
|
||||
working = false;
|
||||
}
|
||||
}else{
|
||||
working = false;
|
||||
}
|
||||
}else{
|
||||
working = false;
|
||||
}
|
||||
}
|
||||
|
||||
if(!self.table.rowManager.activeRowsCount){
|
||||
self.table.rowManager.renderEmptyScroll();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
Tabulator.registerExtension("responsiveLayout", ResponsiveLayout);
|
||||
242
js/tabulator/src/js/extensions/select_row.js
Normal file
242
js/tabulator/src/js/extensions/select_row.js
Normal file
@ -0,0 +1,242 @@
|
||||
var SelectRow = function(table){
|
||||
this.table = table; //hold Tabulator object
|
||||
this.selecting = false; //flag selecting in progress
|
||||
this.selectPrev = []; //hold previously selected element for drag drop selection
|
||||
this.selectedRows = []; //hold selected rows
|
||||
};
|
||||
|
||||
SelectRow.prototype.clearSelectionData = function(){
|
||||
this.selecting = false;
|
||||
this.selectPrev = [];
|
||||
this.selectedRows = [];
|
||||
};
|
||||
|
||||
SelectRow.prototype.initializeRow = function(row){
|
||||
var self = this,
|
||||
element = row.getElement();
|
||||
|
||||
// trigger end of row selection
|
||||
var endSelect = function(){
|
||||
|
||||
setTimeout(function(){
|
||||
self.selecting = false;
|
||||
}, 50)
|
||||
|
||||
$("body").off("mouseup", endSelect);
|
||||
}
|
||||
|
||||
|
||||
row.extensions.select = {selected:false};
|
||||
|
||||
//set row selection class
|
||||
if(self.table.options.selectableCheck(row.getComponent())){
|
||||
element.addClass("tabulator-selectable").removeClass("tabulator-unselectable");
|
||||
|
||||
if(self.table.options.selectable && self.table.options.selectable != "highlight"){
|
||||
element.on("click", function(e){
|
||||
if(!self.selecting){
|
||||
self.toggleRow(row);
|
||||
}
|
||||
});
|
||||
|
||||
element.on("mousedown", function(e){
|
||||
if(e.shiftKey){
|
||||
self.selecting = true;
|
||||
|
||||
self.selectPrev = [];
|
||||
|
||||
$("body").on("mouseup", endSelect);
|
||||
$("body").on("keyup", endSelect);
|
||||
|
||||
self.toggleRow(row);
|
||||
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
element.on("mouseenter", function(e){
|
||||
if(self.selecting){
|
||||
self.toggleRow(row);
|
||||
|
||||
if(self.selectPrev[1] == row){
|
||||
self.toggleRow(self.selectPrev[0]);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
element.on("mouseout", function(e){
|
||||
if(self.selecting){
|
||||
self.selectPrev.unshift(row);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
}else{
|
||||
row.getElement().addClass("tabulator-unselectable").removeClass("tabulator-selectable");
|
||||
}
|
||||
};
|
||||
|
||||
//toggle row selection
|
||||
SelectRow.prototype.toggleRow = function(row){
|
||||
if(this.table.options.selectableCheck(row.getComponent())){
|
||||
if(row.extensions.select.selected){
|
||||
this._deselectRow(row);
|
||||
}else{
|
||||
this._selectRow(row);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
//select a number of rows
|
||||
SelectRow.prototype.selectRows = function(rows){
|
||||
var self = this;
|
||||
|
||||
switch(typeof rows){
|
||||
case "undefined":
|
||||
self.table.rowManager.rows.forEach(function(row){
|
||||
self._selectRow(row, true, true);
|
||||
});
|
||||
|
||||
self._rowSelectionChanged();
|
||||
break;
|
||||
|
||||
case "boolean":
|
||||
if(rows === true){
|
||||
self.table.rowManager.activeRows.forEach(function(row){
|
||||
self._selectRow(row, true, true);
|
||||
});
|
||||
|
||||
self._rowSelectionChanged();
|
||||
}
|
||||
break;
|
||||
|
||||
default:
|
||||
if(Array.isArray(rows)){
|
||||
rows.forEach(function(row){
|
||||
self._selectRow(row, true);
|
||||
});
|
||||
|
||||
self._rowSelectionChanged();
|
||||
}else{
|
||||
self._selectRow(rows);
|
||||
}
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
//select an individual row
|
||||
SelectRow.prototype._selectRow = function(rowInfo, silent, force){
|
||||
var self = this,
|
||||
index;
|
||||
|
||||
//handle max row count
|
||||
if(!isNaN(self.table.options.selectable) && self.table.options.selectable !== true && !force){
|
||||
if(self.selectedRows.length >= self.table.options.selectable){
|
||||
if(self.table.options.selectableRollingSelection){
|
||||
self._deselectRow(self.selectedRows[0], true);
|
||||
}else{
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var row = self.table.rowManager.findRow(rowInfo);
|
||||
|
||||
if(row){
|
||||
var self = this;
|
||||
|
||||
row.extensions.select.selected = true;
|
||||
row.getElement().addClass("tabulator-selected");
|
||||
|
||||
self.selectedRows.push(row);
|
||||
|
||||
if(!silent){
|
||||
self.table.options.rowSelected(row.getComponent());
|
||||
self._rowSelectionChanged();
|
||||
}
|
||||
}else{
|
||||
console.warn("Selection Error - No such row found, ignoring selection:" + rowInfo)
|
||||
}
|
||||
};
|
||||
|
||||
//deselect a number of rows
|
||||
SelectRow.prototype.deselectRows = function(rows){
|
||||
var self = this;
|
||||
|
||||
if(typeof rows == "undefined"){
|
||||
|
||||
let rowCount = self.selectedRows.length;
|
||||
|
||||
for(let i = 0; i < rowCount; i++){
|
||||
self._deselectRow(self.selectedRows[0], true);
|
||||
}
|
||||
|
||||
self._rowSelectionChanged();
|
||||
}else{
|
||||
if(Array.isArray(rows)){
|
||||
rows.forEach(function(row){
|
||||
self._deselectRow(row, true);
|
||||
});
|
||||
|
||||
self._rowSelectionChanged();
|
||||
}else{
|
||||
self._deselectRow(rows);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
//deselect an individual row
|
||||
SelectRow.prototype._deselectRow = function(rowInfo, silent){
|
||||
var self = this,
|
||||
row = self.table.rowManager.findRow(rowInfo),
|
||||
index;
|
||||
|
||||
|
||||
|
||||
if(row){
|
||||
index = self.selectedRows.findIndex(function(selectedRow){
|
||||
return selectedRow == row;
|
||||
});
|
||||
|
||||
if(index > -1){
|
||||
|
||||
row.extensions.select.selected = false;
|
||||
row.getElement().removeClass("tabulator-selected");
|
||||
self.selectedRows.splice(index, 1);
|
||||
|
||||
if(!silent){
|
||||
self.table.options.rowDeselected(row.getComponent());
|
||||
self._rowSelectionChanged();
|
||||
}
|
||||
}
|
||||
}else{
|
||||
console.warn("Selection Error - No such row found, ignoring selection:" + rowInfo)
|
||||
}
|
||||
};
|
||||
|
||||
SelectRow.prototype.getSelectedData = function(){
|
||||
var data = [];
|
||||
|
||||
this.selectedRows.forEach(function(row){
|
||||
data.push(row.getData());
|
||||
});
|
||||
|
||||
return data
|
||||
};
|
||||
|
||||
SelectRow.prototype.getSelectedRows = function(){
|
||||
|
||||
var rows = []
|
||||
|
||||
this.selectedRows.forEach(function(row){
|
||||
rows.push(row.getComponent());
|
||||
})
|
||||
|
||||
return rows;
|
||||
};
|
||||
|
||||
SelectRow.prototype._rowSelectionChanged = function(){
|
||||
this.table.options.rowSelectionChanged(this.getSelectedData(), this.getSelectedRows());
|
||||
};
|
||||
|
||||
Tabulator.registerExtension("selectRow", SelectRow);
|
||||
341
js/tabulator/src/js/extensions/sort.js
Normal file
341
js/tabulator/src/js/extensions/sort.js
Normal file
@ -0,0 +1,341 @@
|
||||
var Sort = function(table){
|
||||
this.table = table; //hold Tabulator object
|
||||
this.sortList = []; //holder current sort
|
||||
this.changed = false; //has the sort changed since last render
|
||||
};
|
||||
|
||||
//initialize column header for sorting
|
||||
Sort.prototype.initializeColumn = function(column, content){
|
||||
var self = this,
|
||||
sorter = false;
|
||||
|
||||
|
||||
switch(typeof column.definition.sorter){
|
||||
case "string":
|
||||
if(self.sorters[column.definition.sorter]){
|
||||
sorter = self.sorters[column.definition.sorter];
|
||||
}else{
|
||||
console.warn("Sort Error - No such sorter found: ", column.definition.sorter);
|
||||
}
|
||||
break;
|
||||
|
||||
case "function":
|
||||
sorter = column.definition.sorter;
|
||||
break;
|
||||
}
|
||||
|
||||
|
||||
column.extensions.sort = {sorter:sorter, dir:"none", params:column.definition.sorterParams || {}};
|
||||
|
||||
if(column.definition.headerSort !== false){
|
||||
|
||||
column.element.addClass("tabulator-sortable");
|
||||
|
||||
//create sorter arrow
|
||||
content.append($("<div class='tabulator-arrow'></div>"));
|
||||
|
||||
//sort on click
|
||||
column.element.on("click", function(e){
|
||||
var dir = "",
|
||||
sorters=[],
|
||||
match = false;
|
||||
|
||||
if(column.extensions.sort){
|
||||
dir = column.extensions.sort.dir == "asc" ? "desc" : "asc";
|
||||
|
||||
if(e.shiftKey || e.ctrlKey){
|
||||
sorters = self.getSort();
|
||||
|
||||
|
||||
match = sorters.findIndex(function(sorter){
|
||||
return sorter.field === column.getField();
|
||||
});
|
||||
|
||||
if(match > -1){
|
||||
sorters[match].dir = sorters[match].dir == "asc" ? "desc" : "asc";
|
||||
|
||||
if(match != sorters.length -1){
|
||||
sorters.push(sorters.splice(match, 1)[0]);
|
||||
}
|
||||
}else{
|
||||
sorters.push({column:column, dir:dir});
|
||||
}
|
||||
|
||||
//add to existing sort
|
||||
self.setSort(sorters);
|
||||
}else{
|
||||
//sort by column only
|
||||
self.setSort(column, dir);
|
||||
}
|
||||
|
||||
self.table.rowManager.sorterRefresh();
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
//check if the sorters have changed since last use
|
||||
Sort.prototype.hasChanged = function(){
|
||||
var changed = this.changed;
|
||||
this.changed = false;
|
||||
return changed;
|
||||
};
|
||||
|
||||
//return current sorters
|
||||
Sort.prototype.getSort = function(){
|
||||
var self = this,
|
||||
sorters = [];
|
||||
|
||||
self.sortList.forEach(function(item){
|
||||
if(item.column){
|
||||
sorters.push({column:item.column.getComponent(), field:item.column.getField(), dir:item.dir});
|
||||
}
|
||||
});
|
||||
|
||||
return sorters;
|
||||
};
|
||||
|
||||
//change sort list and trigger sort
|
||||
Sort.prototype.setSort = function(sortList, dir){
|
||||
var self = this,
|
||||
newSortList = [];
|
||||
|
||||
if(!Array.isArray(sortList)){
|
||||
sortList = [{column: sortList, dir:dir}];
|
||||
}
|
||||
|
||||
sortList.forEach(function(item){
|
||||
var column;
|
||||
|
||||
column = self.table.columnManager.findColumn(item.column);
|
||||
|
||||
if(column){
|
||||
item.column = column;
|
||||
newSortList.push(item);
|
||||
self.changed = true;
|
||||
}else{
|
||||
console.warn("Sort Warning - Sort field does not exist and is being ignored: ", item.column);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
self.sortList = newSortList;
|
||||
};
|
||||
|
||||
//clear sorters
|
||||
Sort.prototype.clear = function(){
|
||||
this.setSort([]);
|
||||
},
|
||||
|
||||
//find appropriate sorter for column
|
||||
Sort.prototype.findSorter = function(column){
|
||||
var row = this.table.rowManager.activeRows[0],
|
||||
sorter = "string",
|
||||
field, value;
|
||||
|
||||
if(row){
|
||||
row = row.getData();
|
||||
field = column.getField();
|
||||
|
||||
if(field){
|
||||
|
||||
value = column.getFieldValue(row);
|
||||
|
||||
switch(typeof value){
|
||||
case "undefined":
|
||||
sorter = "string";
|
||||
break;
|
||||
|
||||
case "boolean":
|
||||
sorter = "boolean";
|
||||
break;
|
||||
|
||||
default:
|
||||
if(!isNaN(value) && value !== ""){
|
||||
sorter = "number";
|
||||
}else{
|
||||
if(value.match(/((^[0-9]+[a-z]+)|(^[a-z]+[0-9]+))+$/i)){
|
||||
sorter = "alphanum";
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return this.sorters[sorter];
|
||||
};
|
||||
|
||||
//work through sort list sorting data
|
||||
Sort.prototype.sort = function(){
|
||||
var self = this, lastSort;
|
||||
|
||||
if(self.table.options.dataSorting){
|
||||
self.table.options.dataSorting(self.getSort());
|
||||
}
|
||||
|
||||
self.clearColumnHeaders();
|
||||
|
||||
if(!self.table.options.ajaxSorting){
|
||||
|
||||
self.sortList.forEach(function(item, i){
|
||||
|
||||
if(item.column && item.column.extensions.sort){
|
||||
|
||||
//if no sorter has been defined, take a guess
|
||||
if(!item.column.extensions.sort.sorter){
|
||||
item.column.extensions.sort.sorter = self.findSorter(item.column);
|
||||
}
|
||||
|
||||
self._sortItem(item.column, item.dir, self.sortList, i);
|
||||
}
|
||||
|
||||
self.setColumnHeader(item.column, item.dir);
|
||||
})
|
||||
}
|
||||
|
||||
if(self.table.options.dataSorted){
|
||||
self.table.options.dataSorted(self.getSort(), self.table.rowManager.getComponents(true));
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
//clear sort arrows on columns
|
||||
Sort.prototype.clearColumnHeaders = function(){
|
||||
this.table.columnManager.getRealColumns().forEach(function(column){
|
||||
if(column.extensions.sort){
|
||||
column.extensions.sort.dir = "none";
|
||||
column.element.attr("aria-sort", "none");
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
//set the column header sort direction
|
||||
Sort.prototype.setColumnHeader = function(column, dir){
|
||||
column.extensions.sort.dir = dir;
|
||||
column.element.attr("aria-sort", dir);
|
||||
};
|
||||
|
||||
//sort each item in sort list
|
||||
Sort.prototype._sortItem = function(column, dir, sortList, i){
|
||||
var self = this;
|
||||
|
||||
var activeRows = self.table.rowManager.activeRows;
|
||||
|
||||
activeRows.sort(function(a, b){
|
||||
|
||||
var result = self._sortRow(a, b, column, dir);
|
||||
|
||||
//if results match recurse through previous searchs to be sure
|
||||
if(result == 0 && i){
|
||||
for(var j = i-1; j>= 0; j--){
|
||||
result = self._sortRow(a, b, sortList[j].column, sortList[j].dir);
|
||||
|
||||
if(result != 0){
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return result;
|
||||
});
|
||||
};
|
||||
|
||||
//process individual rows for a sort function on active data
|
||||
Sort.prototype._sortRow = function(a, b, column, dir){
|
||||
var self = this;
|
||||
|
||||
//switch elements depending on search direction
|
||||
var el1 = dir == "asc" ? a : b;
|
||||
var el2 = dir == "asc" ? b : a;
|
||||
|
||||
a = column.getFieldValue(el1.getData());
|
||||
b = column.getFieldValue(el2.getData());
|
||||
|
||||
a = typeof a !== "undefined" ? a : "";
|
||||
b = typeof b !== "undefined" ? b : "";
|
||||
|
||||
return column.extensions.sort.sorter.call(self, a, b, el1.getComponent(), el2.getComponent(), column.getComponent(), dir, column.extensions.sort.params);
|
||||
};
|
||||
|
||||
|
||||
//default data sorters
|
||||
Sort.prototype.sorters = {
|
||||
|
||||
//sort numbers
|
||||
number:function(a, b, aRow, bRow, column, dir, params){
|
||||
return parseFloat(String(a).replace(",","")) - parseFloat(String(b).replace(",",""));
|
||||
},
|
||||
|
||||
//sort strings
|
||||
string:function(a, b, aRow, bRow, column, dir, params){
|
||||
return String(a).toLowerCase().localeCompare(String(b).toLowerCase());
|
||||
},
|
||||
|
||||
//sort date
|
||||
date:function(a, b, aRow, bRow, column, dir, params){
|
||||
var self = this;
|
||||
var format = params.format || "DD/MM/YYYY";
|
||||
|
||||
if(typeof moment != "undefined"){
|
||||
a = moment(a, format);
|
||||
b = moment(b, format);
|
||||
}else{
|
||||
console.error("Sort Error - 'date' sorter is dependant on moment.js");
|
||||
}
|
||||
|
||||
return a - b;
|
||||
},
|
||||
|
||||
//sort booleans
|
||||
boolean:function(a, b, aRow, bRow, column, dir, params){
|
||||
var el1 = a === true || a === "true" || a === "True" || a === 1 ? 1 : 0;
|
||||
var el2 = b === true || b === "true" || b === "True" || b === 1 ? 1 : 0;
|
||||
|
||||
return el1 - el2;
|
||||
},
|
||||
|
||||
//sort alpha numeric strings
|
||||
alphanum:function(as, bs, aRow, bRow, column, dir, params){
|
||||
var a, b, a1, b1, i= 0, L, rx = /(\d+)|(\D+)/g, rd = /\d/;
|
||||
|
||||
if(isFinite(as) && isFinite(bs)) return as - bs;
|
||||
a = String(as).toLowerCase();
|
||||
b = String(bs).toLowerCase();
|
||||
if(a === b) return 0;
|
||||
if(!(rd.test(a) && rd.test(b))) return a > b ? 1 : -1;
|
||||
a = a.match(rx);
|
||||
b = b.match(rx);
|
||||
L = a.length > b.length ? b.length : a.length;
|
||||
while(i < L){
|
||||
a1= a[i];
|
||||
b1= b[i++];
|
||||
if(a1 !== b1){
|
||||
if(isFinite(a1) && isFinite(b1)){
|
||||
if(a1.charAt(0) === "0") a1 = "." + a1;
|
||||
if(b1.charAt(0) === "0") b1 = "." + b1;
|
||||
return a1 - b1;
|
||||
}
|
||||
else return a1 > b1 ? 1 : -1;
|
||||
}
|
||||
}
|
||||
return a.length > b.length;
|
||||
},
|
||||
|
||||
//sort hh:mm formatted times
|
||||
time:function(a, b, aRow, bRow, column, dir, params){
|
||||
var self = this;
|
||||
var format = params.format || "hh:mm";
|
||||
|
||||
if(typeof moment != "undefined"){
|
||||
a = moment(a, format);
|
||||
b = moment(b, format);
|
||||
}else{
|
||||
console.error("Sort Error - 'date' sorter is dependant on moment.js");
|
||||
}
|
||||
|
||||
return a - b;
|
||||
},
|
||||
};
|
||||
|
||||
Tabulator.registerExtension("sort", Sort);
|
||||
178
js/tabulator/src/js/extensions/validate.js
Normal file
178
js/tabulator/src/js/extensions/validate.js
Normal file
@ -0,0 +1,178 @@
|
||||
var Validate = function(table){
|
||||
this.table = table;
|
||||
};
|
||||
|
||||
//validate
|
||||
Validate.prototype.initializeColumn = function(column){
|
||||
var self = this,
|
||||
config = [],
|
||||
validator;
|
||||
|
||||
if(column.definition.validator){
|
||||
|
||||
if(Array.isArray(column.definition.validator)){
|
||||
column.definition.validator.forEach(function(item){
|
||||
validator = self._extractValidator(item);
|
||||
|
||||
if(validator){
|
||||
config.push(validator);
|
||||
}
|
||||
})
|
||||
|
||||
}else{
|
||||
validator = this._extractValidator(column.definition.validator);
|
||||
|
||||
if(validator){
|
||||
config.push(validator);
|
||||
}
|
||||
}
|
||||
|
||||
column.extensions.validate = config.length ? config : false;
|
||||
}
|
||||
};
|
||||
|
||||
Validate.prototype._extractValidator = function(value){
|
||||
|
||||
switch(typeof value){
|
||||
case "string":
|
||||
let parts = value.split(":");
|
||||
let type = parts.shift();
|
||||
let params = parts.join();
|
||||
|
||||
return this._buildValidator(type, params);
|
||||
break;
|
||||
|
||||
case "function":
|
||||
return this._buildValidator(value);
|
||||
break;
|
||||
|
||||
case "object":
|
||||
return this._buildValidator(value.type, value.parameters);
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
Validate.prototype._buildValidator = function(type, params){
|
||||
|
||||
var func = typeof type == "function" ? type : this.validators[type];
|
||||
|
||||
if(!func){
|
||||
console.warn("Validator Setup Error - No matching validator found:", type);
|
||||
return false;
|
||||
}else{
|
||||
return {
|
||||
type:typeof type == "function" ? "function" : type,
|
||||
func:func,
|
||||
params:params,
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
Validate.prototype.validate = function(validators, cell, value){
|
||||
var self = this,
|
||||
valid = [];
|
||||
|
||||
if(validators){
|
||||
validators.forEach(function(item){
|
||||
if(!item.func.call(self, cell, value, item.params)){
|
||||
valid.push({
|
||||
type:item.type,
|
||||
parameters:item.params
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return valid.length ? valid : true;
|
||||
};
|
||||
|
||||
|
||||
Validate.prototype.validators = {
|
||||
|
||||
//is integer
|
||||
integer:function(cell, value, parameters){
|
||||
value = Number(value);
|
||||
return typeof value === 'number' && isFinite(value) && Math.floor(value) === value;
|
||||
},
|
||||
|
||||
//is float
|
||||
float:function(cell, value, parameters){
|
||||
value = Number(value);
|
||||
return typeof value === 'number' && isFinite(value) && value % 1 !== 0;;
|
||||
},
|
||||
|
||||
//must be a number
|
||||
numeric:function(cell, value, parameters){
|
||||
return !isNaN(value);
|
||||
},
|
||||
|
||||
//must be a string
|
||||
string:function(cell, value, parameters){
|
||||
return isNaN(value);
|
||||
},
|
||||
|
||||
|
||||
//maximum value
|
||||
max:function(cell, value, parameters){
|
||||
return parseFloat(value) <= parameters;
|
||||
},
|
||||
|
||||
//minimum value
|
||||
min:function(cell, value, parameters){
|
||||
return parseFloat(value) >= parameters;
|
||||
},
|
||||
|
||||
//minimum string length
|
||||
minLength:function(cell, value, parameters){
|
||||
return String(value).length >= parameters;
|
||||
},
|
||||
|
||||
//maximum string length
|
||||
maxLength:function(cell, value, parameters){
|
||||
return String(value).length <= parameters;
|
||||
},
|
||||
|
||||
//in provided value list
|
||||
in:function(cell, value, parameters){
|
||||
if(typeof parameters == "string"){
|
||||
parameters = parameters.split("|");
|
||||
}
|
||||
|
||||
return value === "" || parameters.indexOf(value) > -1;
|
||||
},
|
||||
|
||||
//must match provided regex
|
||||
regex:function(cell, value, parameters){
|
||||
var reg = new RegExp(parameters);
|
||||
|
||||
return reg.test(value);
|
||||
},
|
||||
|
||||
//value must be unique in this column
|
||||
unique:function(cell, value, parameters){
|
||||
var unique = true;
|
||||
|
||||
var cellData = cell.getData();
|
||||
|
||||
this.table.rowManager.rows.forEach(function(row){
|
||||
var data = row.getData();
|
||||
|
||||
if(data !== cellData){
|
||||
if(value == data[cell.getField()]){
|
||||
unique = false;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return unique;
|
||||
},
|
||||
|
||||
//must have a value
|
||||
required:function(cell, value, parameters){
|
||||
return value !== "" & value !== null && typeof value != "undefined";
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
Tabulator.registerExtension("validate", Validate);
|
||||
22
js/tabulator/src/js/extensions_enabled.js
Normal file
22
js/tabulator/src/js/extensions_enabled.js
Normal file
@ -0,0 +1,22 @@
|
||||
/*=include extensions/accessor.js */
|
||||
/*=include extensions/ajax.js */
|
||||
/*=include extensions/calculation_colums.js */
|
||||
/*=include extensions/download.js */
|
||||
/*=include extensions/edit.js */
|
||||
/*=include extensions/filter.js */
|
||||
/*=include extensions/format.js */
|
||||
/*=include extensions/frozen_columns.js */
|
||||
/*=include extensions/group_rows.js */
|
||||
/*=include extensions/history.js */
|
||||
/*=include extensions/html_table_import.js */
|
||||
/*=include extensions/Keybindings.js */
|
||||
/*=include extensions/moveable_columns.js */
|
||||
/*=include extensions/moveable_rows.js */
|
||||
/*=include extensions/mutator.js */
|
||||
/*=include extensions/page.js */
|
||||
/*=include extensions/persistent_layout.js */
|
||||
/*=include extensions/resize_columns.js */
|
||||
/*=include extensions/responsive_layout.js */
|
||||
/*=include extensions/select_row.js */
|
||||
/*=include extensions/sort.js */
|
||||
/*=include extensions/validate.js */
|
||||
65
js/tabulator/src/js/footer_manager.js
Normal file
65
js/tabulator/src/js/footer_manager.js
Normal file
@ -0,0 +1,65 @@
|
||||
var FooterManager = function(table){
|
||||
this.table = table;
|
||||
this.active = false;
|
||||
this.element = $("<div class='tabulator-footer'></div>"); //containing element
|
||||
this.links = [];
|
||||
|
||||
this._initialize();
|
||||
};
|
||||
|
||||
FooterManager.prototype._initialize = function(element){
|
||||
if(this.table.options.footerElement){
|
||||
this.element = this.table.options.footerElement;
|
||||
}
|
||||
};
|
||||
|
||||
FooterManager.prototype.getElement = function(){
|
||||
return this.element;
|
||||
};
|
||||
|
||||
|
||||
FooterManager.prototype.append = function(element, parent){
|
||||
this.activate(parent);
|
||||
|
||||
this.element.append(element);
|
||||
this.table.rowManager.adjustTableSize();
|
||||
};
|
||||
|
||||
FooterManager.prototype.prepend = function(element, parent){
|
||||
this.activate(parent);
|
||||
|
||||
this.element.prepend(element);
|
||||
this.table.rowManager.adjustTableSize();
|
||||
};
|
||||
|
||||
FooterManager.prototype.remove = function(element){
|
||||
element.remove();
|
||||
this.deactivate();
|
||||
};
|
||||
|
||||
FooterManager.prototype.deactivate = function(force){
|
||||
if(this.element.is(":empty") || force){
|
||||
this.element.remove();
|
||||
this.active = false;
|
||||
}
|
||||
|
||||
// this.table.rowManager.adjustTableSize();
|
||||
}
|
||||
|
||||
FooterManager.prototype.activate = function(parent){
|
||||
if(!this.active){
|
||||
this.active = true;
|
||||
this.table.element.append(this.getElement());
|
||||
this.table.element.show();
|
||||
}
|
||||
|
||||
if(parent){
|
||||
this.links.push(parent);
|
||||
}
|
||||
}
|
||||
|
||||
FooterManager.prototype.redraw = function(){
|
||||
this.links.forEach(function(link){
|
||||
link.footerRedraw();
|
||||
});
|
||||
};
|
||||
32
js/tabulator/src/js/jquery_wrapper.js
vendored
Normal file
32
js/tabulator/src/js/jquery_wrapper.js
vendored
Normal file
@ -0,0 +1,32 @@
|
||||
/*
|
||||
* This file is part of the Tabulator package.
|
||||
*
|
||||
* (c) Oliver Folkerd <oliver.folkerd@gmail.com>
|
||||
*
|
||||
* For the full copyright and license information, please view the LICENSE
|
||||
* file that was distributed with this source code.
|
||||
*
|
||||
* Full Documentation & Demos can be found at: http://olifolkerd.github.io/tabulator/
|
||||
*
|
||||
*/
|
||||
|
||||
(function (factory) {
|
||||
"use strict";
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
define(['jquery'], factory);
|
||||
}
|
||||
else if(typeof module !== 'undefined' && module.exports) {
|
||||
module.exports = factory(require('jquery'));
|
||||
}
|
||||
else {
|
||||
factory(jQuery);
|
||||
}
|
||||
}(function ($, undefined) {
|
||||
|
||||
/*=include core.js */
|
||||
|
||||
$.widget("ui.tabulator", Tabulator);
|
||||
|
||||
}));
|
||||
|
||||
|
||||
92
js/tabulator/src/js/polyfills.js
Normal file
92
js/tabulator/src/js/polyfills.js
Normal file
@ -0,0 +1,92 @@
|
||||
|
||||
|
||||
|
||||
// https://tc39.github.io/ecma262/#sec-array.prototype.findIndex
|
||||
if (!Array.prototype.findIndex) {
|
||||
Object.defineProperty(Array.prototype, 'findIndex', {
|
||||
value: function(predicate) {
|
||||
// 1. Let O be ? ToObject(this value).
|
||||
if (this == null) {
|
||||
throw new TypeError('"this" is null or not defined');
|
||||
}
|
||||
|
||||
var o = Object(this);
|
||||
|
||||
// 2. Let len be ? ToLength(? Get(O, "length")).
|
||||
var len = o.length >>> 0;
|
||||
|
||||
// 3. If IsCallable(predicate) is false, throw a TypeError exception.
|
||||
if (typeof predicate !== 'function') {
|
||||
throw new TypeError('predicate must be a function');
|
||||
}
|
||||
|
||||
// 4. If thisArg was supplied, let T be thisArg; else let T be undefined.
|
||||
var thisArg = arguments[1];
|
||||
|
||||
// 5. Let k be 0.
|
||||
var k = 0;
|
||||
|
||||
// 6. Repeat, while k < len
|
||||
while (k < len) {
|
||||
// a. Let Pk be ! ToString(k).
|
||||
// b. Let kValue be ? Get(O, Pk).
|
||||
// c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)).
|
||||
// d. If testResult is true, return k.
|
||||
var kValue = o[k];
|
||||
if (predicate.call(thisArg, kValue, k, o)) {
|
||||
return k;
|
||||
}
|
||||
// e. Increase k by 1.
|
||||
k++;
|
||||
}
|
||||
|
||||
// 7. Return -1.
|
||||
return -1;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// https://tc39.github.io/ecma262/#sec-array.prototype.find
|
||||
if (!Array.prototype.find) {
|
||||
Object.defineProperty(Array.prototype, 'find', {
|
||||
value: function(predicate) {
|
||||
// 1. Let O be ? ToObject(this value).
|
||||
if (this == null) {
|
||||
throw new TypeError('"this" is null or not defined');
|
||||
}
|
||||
|
||||
var o = Object(this);
|
||||
|
||||
// 2. Let len be ? ToLength(? Get(O, "length")).
|
||||
var len = o.length >>> 0;
|
||||
|
||||
// 3. If IsCallable(predicate) is false, throw a TypeError exception.
|
||||
if (typeof predicate !== 'function') {
|
||||
throw new TypeError('predicate must be a function');
|
||||
}
|
||||
|
||||
// 4. If thisArg was supplied, let T be thisArg; else let T be undefined.
|
||||
var thisArg = arguments[1];
|
||||
|
||||
// 5. Let k be 0.
|
||||
var k = 0;
|
||||
|
||||
// 6. Repeat, while k < len
|
||||
while (k < len) {
|
||||
// a. Let Pk be ! ToString(k).
|
||||
// b. Let kValue be ? Get(O, Pk).
|
||||
// c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)).
|
||||
// d. If testResult is true, return kValue.
|
||||
var kValue = o[k];
|
||||
if (predicate.call(thisArg, kValue, k, o)) {
|
||||
return kValue;
|
||||
}
|
||||
// e. Increase k by 1.
|
||||
k++;
|
||||
}
|
||||
|
||||
// 7. Return undefined.
|
||||
return undefined;
|
||||
}
|
||||
});
|
||||
}
|
||||
487
js/tabulator/src/js/row.js
Normal file
487
js/tabulator/src/js/row.js
Normal file
@ -0,0 +1,487 @@
|
||||
|
||||
//public row object
|
||||
var RowComponent = function (row){
|
||||
this.row = row;
|
||||
};
|
||||
|
||||
RowComponent.prototype.getData = function(){
|
||||
return this.row.getData(true);
|
||||
};
|
||||
|
||||
RowComponent.prototype.getElement = function(){
|
||||
return this.row.getElement();
|
||||
};
|
||||
|
||||
RowComponent.prototype.getCells = function(){
|
||||
var cells = [];
|
||||
|
||||
this.row.getCells().forEach(function(cell){
|
||||
cells.push(cell.getComponent());
|
||||
});
|
||||
|
||||
return cells;
|
||||
};
|
||||
|
||||
RowComponent.prototype.getCell = function(column){
|
||||
return this.row.getCell(column).getComponent();
|
||||
};
|
||||
|
||||
RowComponent.prototype.getIndex = function(){
|
||||
return this.row.getData(true)[this.row.table.options.index];
|
||||
};
|
||||
|
||||
RowComponent.prototype.delete = function(){
|
||||
this.row.delete();
|
||||
};
|
||||
|
||||
RowComponent.prototype.scrollTo = function(){
|
||||
this.row.table.rowManager.scrollToRow(this.row);
|
||||
};
|
||||
|
||||
RowComponent.prototype.update = function(data){
|
||||
this.row.updateData(data);
|
||||
};
|
||||
|
||||
RowComponent.prototype.normalizeHeight = function(){
|
||||
this.row.normalizeHeight(true);
|
||||
};
|
||||
|
||||
RowComponent.prototype.select = function(){
|
||||
this.row.selectRows(this.row);
|
||||
};
|
||||
|
||||
RowComponent.prototype.deselect = function(){
|
||||
this.row.deselectRows(this.row);
|
||||
};
|
||||
|
||||
RowComponent.prototype.toggleSelect = function(){
|
||||
this.row.toggleRow(this.row);
|
||||
};
|
||||
|
||||
RowComponent.prototype._getSelf = function(){
|
||||
return this.row;
|
||||
};
|
||||
|
||||
|
||||
var Row = function(data, parent){
|
||||
this.table = parent.table;
|
||||
this.parent = parent;
|
||||
this.data = {};
|
||||
this.type = "row"; //type of element
|
||||
this.element = $("<div class='tabulator-row' role='row'></div>");
|
||||
this.extensions = {}; //hold extension variables;
|
||||
this.cells = [];
|
||||
this.height = 0; //hold element height
|
||||
this.outerHeight = 0; //holde lements outer height
|
||||
this.initialized = false; //element has been rendered
|
||||
this.heightInitialized = false; //element has resized cells to fit
|
||||
|
||||
this.setData(data);
|
||||
this.generateElement();
|
||||
};
|
||||
|
||||
Row.prototype.getElement = function(){
|
||||
return this.element;
|
||||
};
|
||||
|
||||
|
||||
Row.prototype.generateElement = function(){
|
||||
var self = this,
|
||||
dblTap, tapHold, tap;
|
||||
|
||||
//set row selection characteristics
|
||||
if(self.table.options.selectable !== false && self.table.extExists("selectRow")){
|
||||
self.table.extensions.selectRow.initializeRow(this);
|
||||
}
|
||||
|
||||
//setup movable rows
|
||||
if(self.table.options.movableRows !== false && self.table.extExists("moveRow")){
|
||||
self.table.extensions.moveRow.initializeRow(this);
|
||||
}
|
||||
|
||||
//handle row click events
|
||||
if (self.table.options.rowClick){
|
||||
self.element.on("click", function(e){
|
||||
self.table.options.rowClick(e, self.getComponent());
|
||||
})
|
||||
}
|
||||
|
||||
if (self.table.options.rowDblClick){
|
||||
self.element.on("dblclick", function(e){
|
||||
self.table.options.rowDblClick(e, self.getComponent());
|
||||
})
|
||||
}
|
||||
|
||||
if (self.table.options.rowContext){
|
||||
self.element.on("contextmenu", function(e){
|
||||
self.table.options.rowContext(e, self.getComponent());
|
||||
})
|
||||
}
|
||||
|
||||
if (self.table.options.rowTap){
|
||||
|
||||
tap = false;
|
||||
|
||||
self.element.on("touchstart", function(e){
|
||||
tap = true;
|
||||
});
|
||||
|
||||
self.element.on("touchend", function(e){
|
||||
if(tap){
|
||||
self.table.options.rowTap(e, self.getComponent());
|
||||
}
|
||||
|
||||
tap = false;
|
||||
});
|
||||
}
|
||||
|
||||
if (self.table.options.rowDblTap){
|
||||
|
||||
dblTap = null;
|
||||
|
||||
self.element.on("touchend", function(e){
|
||||
|
||||
if(dblTap){
|
||||
clearTimeout(dblTap);
|
||||
dblTap = null;
|
||||
|
||||
self.table.options.rowDblTap(e, self.getComponent());
|
||||
}else{
|
||||
|
||||
dblTap = setTimeout(function(){
|
||||
clearTimeout(dblTap);
|
||||
dblTap = null;
|
||||
}, 300);
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
if (self.table.options.rowTapHold){
|
||||
|
||||
tapHold = null;
|
||||
|
||||
self.element.on("touchstart", function(e){
|
||||
clearTimeout(tapHold);
|
||||
|
||||
tapHold = setTimeout(function(){
|
||||
clearTimeout(tapHold);
|
||||
tapHold = null;
|
||||
tap = false;
|
||||
self.table.options.rowTapHold(e, self.getComponent());
|
||||
}, 1000)
|
||||
|
||||
});
|
||||
|
||||
self.element.on("touchend", function(e){
|
||||
clearTimeout(tapHold);
|
||||
tapHold = null;
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
Row.prototype.generateCells = function(){
|
||||
this.cells = this.table.columnManager.generateCells(this);
|
||||
}
|
||||
|
||||
//functions to setup on first render
|
||||
Row.prototype.initialize = function(force){
|
||||
var self = this;
|
||||
|
||||
if(!self.initialized || force){
|
||||
|
||||
self.deleteCells();
|
||||
|
||||
self.element.empty();
|
||||
|
||||
//handle frozen cells
|
||||
if(this.table.extExists("frozenColumns")){
|
||||
this.table.extensions.frozenColumns.layoutRow(this);
|
||||
}
|
||||
|
||||
this.generateCells();
|
||||
|
||||
self.cells.forEach(function(cell){
|
||||
self.element.append(cell.getElement());
|
||||
});
|
||||
|
||||
if(force){
|
||||
self.normalizeHeight();
|
||||
}
|
||||
|
||||
if(self.table.options.rowFormatter){
|
||||
self.table.options.rowFormatter(self.getComponent());
|
||||
}
|
||||
|
||||
self.initialized = true;
|
||||
}
|
||||
};
|
||||
|
||||
Row.prototype.reinitializeHeight = function(){
|
||||
this.heightInitialized = false;
|
||||
|
||||
if(this.element[0].offsetParent !== null){
|
||||
this.normalizeHeight(true);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
Row.prototype.reinitialize = function(){
|
||||
this.initialized = false;
|
||||
this.heightInitialized = false;
|
||||
this.height = 0;
|
||||
|
||||
if(this.element[0].offsetParent !== null){
|
||||
this.initialize(true);
|
||||
}
|
||||
};
|
||||
|
||||
//get heights when doing bulk row style calcs in virtual DOM
|
||||
Row.prototype.calcHeight = function(){
|
||||
this.height = this.element[0].clientHeight;
|
||||
this.outerHeight = this.element[0].offsetHeight;
|
||||
};
|
||||
|
||||
//set of cells
|
||||
Row.prototype.setCellHeight = function(){
|
||||
var height = this.height;
|
||||
|
||||
this.cells.forEach(function(cell){
|
||||
cell.setHeight(height);
|
||||
});
|
||||
|
||||
this.heightInitialized = true;
|
||||
};
|
||||
|
||||
Row.prototype.clearCellHeight = function(){
|
||||
this.cells.forEach(function(cell){
|
||||
cell.clearHeight();
|
||||
});
|
||||
}
|
||||
|
||||
//normalize the height of elements in the row
|
||||
Row.prototype.normalizeHeight = function(force){
|
||||
|
||||
if(force){
|
||||
this.clearCellHeight();
|
||||
}
|
||||
|
||||
this.calcHeight();
|
||||
|
||||
this.setCellHeight();
|
||||
};
|
||||
|
||||
//set height of rows
|
||||
Row.prototype.setHeight = function(height, force){
|
||||
if(this.height != height || force){
|
||||
|
||||
this.height = height;
|
||||
|
||||
this.setCellHeight();
|
||||
|
||||
// this.outerHeight = this.element.outerHeight();
|
||||
this.outerHeight = this.element[0].offsetHeight;
|
||||
}
|
||||
};
|
||||
|
||||
//return rows outer height
|
||||
Row.prototype.getHeight = function(){
|
||||
return this.outerHeight;
|
||||
};
|
||||
|
||||
//return rows outer Width
|
||||
Row.prototype.getWidth = function(){
|
||||
return this.element.outerWidth();
|
||||
};
|
||||
|
||||
|
||||
//////////////// Cell Management /////////////////
|
||||
|
||||
Row.prototype.deleteCell = function(cell){
|
||||
var index = this.cells.indexOf(cell);
|
||||
|
||||
if(index > -1){
|
||||
this.cells.splice(index, 1);
|
||||
}
|
||||
};
|
||||
|
||||
//////////////// Data Management /////////////////
|
||||
|
||||
Row.prototype.setData = function(data){
|
||||
var self = this;
|
||||
|
||||
if(self.table.extExists("mutator")){
|
||||
self.data = self.table.extensions.mutator.transformRow(data);
|
||||
}else{
|
||||
self.data = data;
|
||||
}
|
||||
};
|
||||
|
||||
//update the rows data
|
||||
Row.prototype.updateData = function(data){
|
||||
var self = this;
|
||||
|
||||
//mutate incomming data if needed
|
||||
if(self.table.extExists("mutator")){
|
||||
data = self.table.extensions.mutator.transformRow(data);
|
||||
}
|
||||
|
||||
//set data
|
||||
for (var attrname in data) {
|
||||
self.data[attrname] = data[attrname];
|
||||
}
|
||||
|
||||
//update affected cells only
|
||||
for (var attrname in data) {
|
||||
let cell = this.getCell(attrname);
|
||||
|
||||
if(cell){
|
||||
if(cell.getValue() != data[attrname]){
|
||||
cell.setValueProcessData(data[attrname]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//Partial reinitialization if visible
|
||||
if(this.element.is(":visible")){
|
||||
self.normalizeHeight();
|
||||
|
||||
if(self.table.options.rowFormatter){
|
||||
self.table.options.rowFormatter(self.getComponent());
|
||||
}
|
||||
}else{
|
||||
this.initialized = false;
|
||||
this.height = 0;
|
||||
}
|
||||
|
||||
//self.reinitialize();
|
||||
|
||||
self.table.options.rowUpdated(self.getComponent());
|
||||
};
|
||||
|
||||
Row.prototype.getData = function(transform){
|
||||
var self = this;
|
||||
|
||||
if(transform){
|
||||
if(self.table.extExists("accessor")){
|
||||
return self.table.extensions.accessor.transformRow(self.data);
|
||||
}
|
||||
}else{
|
||||
return this.data;
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
Row.prototype.getCell = function(column){
|
||||
var match = false,
|
||||
column = this.table.columnManager.findColumn(column);
|
||||
|
||||
match = this.cells.find(function(cell){
|
||||
return cell.column === column;
|
||||
});
|
||||
|
||||
return match;
|
||||
},
|
||||
|
||||
Row.prototype.getCellIndex = function(findCell){
|
||||
return this.cells.findIndex(function(cell){
|
||||
return cell === findCell;
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
Row.prototype.findNextEditableCell = function(index){
|
||||
|
||||
var nextCell = false;
|
||||
|
||||
if(index < this.cells.length-1){
|
||||
for(var i = index+1; i < this.cells.length; i++){
|
||||
let cell = this.cells[i];
|
||||
|
||||
if(cell.column.extensions.edit && cell.getElement().is(":visible")){
|
||||
let allowEdit = true;
|
||||
|
||||
if(typeof cell.column.extensions.edit.check == "function"){
|
||||
allowEdit = cell.column.extensions.edit.check(cell.getComponent());
|
||||
}
|
||||
|
||||
if(allowEdit){
|
||||
nextCell = cell;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return nextCell;
|
||||
},
|
||||
|
||||
Row.prototype.findPrevEditableCell = function(index){
|
||||
var prevCell = false;
|
||||
|
||||
if(index > 0){
|
||||
for(var i = index-1; i >= 0; i--){
|
||||
let cell = this.cells[i],
|
||||
allowEdit = true;
|
||||
|
||||
if(cell.column.extensions.edit && cell.getElement().is(":visible")){
|
||||
if(typeof cell.column.extensions.edit.check == "function"){
|
||||
allowEdit = cell.column.extensions.edit.check(cell.getComponent());
|
||||
}
|
||||
|
||||
if(allowEdit){
|
||||
prevCell = cell;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return prevCell;
|
||||
},
|
||||
|
||||
|
||||
Row.prototype.getCells = function(){
|
||||
return this.cells;
|
||||
},
|
||||
|
||||
///////////////////// Actions /////////////////////
|
||||
|
||||
Row.prototype.delete = function(){
|
||||
|
||||
var index = this.table.rowManager.getRowIndex(this);
|
||||
|
||||
this.deleteActual();
|
||||
|
||||
if(this.table.options.history && this.table.extExists("history")){
|
||||
if(index){
|
||||
index = this.table.rowManager.rows[index-1];
|
||||
}
|
||||
|
||||
this.table.extensions.history.action("rowDelete", this, {data:this.getData(), pos:!index, index:index});
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
Row.prototype.deleteActual = function(){
|
||||
this.table.rowManager.deleteRow(this);
|
||||
|
||||
this.deleteCells();
|
||||
};
|
||||
|
||||
|
||||
Row.prototype.deleteCells = function(){
|
||||
var cellCount = this.cells.length;
|
||||
|
||||
for(let i = 0; i < cellCount; i++){
|
||||
this.cells[0].delete();
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
//////////////// Object Generation /////////////////
|
||||
Row.prototype.getComponent = function(){
|
||||
return new RowComponent(this);
|
||||
};
|
||||
1128
js/tabulator/src/js/row_manager.js
Normal file
1128
js/tabulator/src/js/row_manager.js
Normal file
File diff suppressed because it is too large
Load Diff
750
js/tabulator/src/scss/bootstrap/tabulator_bootstrap.scss
Normal file
750
js/tabulator/src/scss/bootstrap/tabulator_bootstrap.scss
Normal file
@ -0,0 +1,750 @@
|
||||
@import "variables.scss";
|
||||
|
||||
// Style conversion file, bootstrap to tabulator
|
||||
|
||||
//Main Theme Variables
|
||||
$backgroundColor: $table-bg; //background color of tabulator
|
||||
$borderColor:$table-border-color; //border to tablulator
|
||||
$textSize:$font-size-base; //table text size
|
||||
|
||||
//header themeing
|
||||
$headerBackgroundColor:#fff; //border to tablulator
|
||||
$headerSeperatorColor:$table-border-color; //header bottom seperator color
|
||||
|
||||
$cellPadding:$table-cell-padding; //padding round header
|
||||
$cellPaddingCondensed:$table-condensed-cell-padding; //padding round header
|
||||
|
||||
//column header arrows
|
||||
$sortArrowActive: #666;
|
||||
$sortArrowInactive: #bbb;
|
||||
|
||||
//row themeing
|
||||
$rowBackgroundColor:$backgroundColor; //table row background color
|
||||
$rowAltBackgroundColor:$table-bg-accent; //table row background color
|
||||
$rowBorderColor:$table-border-color; //table border color
|
||||
$rowHoverBackground:$table-bg-hover; //row background color on hover
|
||||
|
||||
$rowSelectedBackground: #9ABCEA; //row background color when selected
|
||||
$rowSelectedBackgroundHover: #769BCC;//row background color when selected and hovered
|
||||
|
||||
|
||||
$editBoxColor:#1D68CD; //border color for edit boxes
|
||||
$errorColor:#dd0000; //error indication
|
||||
|
||||
//footer themeing
|
||||
$footerBorderColor:$table-border-color; //footer border color
|
||||
$footerSeperatorColor:$table-border-color; //footer bottom seperator color
|
||||
|
||||
|
||||
|
||||
//Tabulator Containing Element
|
||||
.tabulator{
|
||||
position: relative;
|
||||
background-color: $backgroundColor;
|
||||
overflow:hidden;
|
||||
font-size:$textSize;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
margin-bottom: $line-height-computed;
|
||||
|
||||
-webkit-transform: translatez(0);
|
||||
-moz-transform: translatez(0);
|
||||
-ms-transform: translatez(0);
|
||||
-o-transform: translatez(0);
|
||||
transform: translatez(0);
|
||||
|
||||
&[tabulator-layout="fitDataFill"]{
|
||||
.tabulator-tableHolder{
|
||||
.tabulator-table{
|
||||
min-width:100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.tabulator-block-select{
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
//column header containing element
|
||||
.tabulator-header{
|
||||
position:relative;
|
||||
box-sizing: border-box;
|
||||
|
||||
width:100%;
|
||||
|
||||
border-bottom:2px solid $headerSeperatorColor;
|
||||
background-color: $headerBackgroundColor;
|
||||
font-weight:bold;
|
||||
|
||||
white-space: nowrap;
|
||||
overflow:hidden;
|
||||
|
||||
-moz-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-o-user-select: none;
|
||||
|
||||
//individual column header element
|
||||
.tabulator-col{
|
||||
display:inline-block;
|
||||
position:relative;
|
||||
box-sizing:border-box;
|
||||
background-color: $headerBackgroundColor;
|
||||
text-align:left;
|
||||
vertical-align: bottom;
|
||||
overflow: hidden;
|
||||
|
||||
&.tabulator-moving{
|
||||
position: absolute;
|
||||
border:1px solid $headerSeperatorColor;
|
||||
background:darken($headerBackgroundColor, 10%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
//hold content of column header
|
||||
.tabulator-col-content{
|
||||
position: relative;
|
||||
padding:$cellPadding;
|
||||
|
||||
//hold title of column header
|
||||
.tabulator-col-title{
|
||||
box-sizing:border-box;
|
||||
width: 100%;
|
||||
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
vertical-align:bottom;
|
||||
|
||||
//element to hold title editor
|
||||
.tabulator-title-editor{
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
|
||||
border:1px solid #999;
|
||||
|
||||
padding:1px;
|
||||
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
//column sorter arrow
|
||||
.tabulator-arrow{
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top:14px;
|
||||
right:8px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 6px solid transparent;
|
||||
border-right: 6px solid transparent;
|
||||
border-bottom: 6px solid $sortArrowInactive;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
//complex header column group
|
||||
&.tabulator-col-group{
|
||||
|
||||
//gelement to hold sub columns in column group
|
||||
.tabulator-col-group-cols{
|
||||
position:relative;
|
||||
display: flex;
|
||||
|
||||
border-top:1px solid $borderColor;
|
||||
overflow: hidden;
|
||||
|
||||
.tabulator-col:last-child{
|
||||
margin-right:-1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//hide left resize handle on first column
|
||||
&:first-child{
|
||||
.tabulator-col-resize-handle.prev{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
//placeholder element for sortable columns
|
||||
&.ui-sortable-helper{
|
||||
position: absolute;
|
||||
background-color:darken($headerBackgroundColor, 10%) !important;
|
||||
border:1px solid $borderColor;
|
||||
}
|
||||
|
||||
//header filter containing element
|
||||
.tabulator-header-filter{
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
margin-top:2px;
|
||||
width:100%;
|
||||
text-align: center;
|
||||
|
||||
//styling adjustment for inbuilt editors
|
||||
textarea{
|
||||
height:auto !important;
|
||||
}
|
||||
|
||||
svg{
|
||||
margin-top: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//styling child elements for sortable columns
|
||||
&.tabulator-sortable{
|
||||
.tabulator-col-title{
|
||||
padding-right:25px;
|
||||
}
|
||||
|
||||
&:hover{
|
||||
cursor:pointer;
|
||||
background-color:darken($headerBackgroundColor, 10%);
|
||||
}
|
||||
|
||||
&[aria-sort="none"]{
|
||||
.tabulator-col-content .tabulator-arrow{
|
||||
border-top: none;
|
||||
border-bottom: 6px solid $sortArrowInactive;
|
||||
}
|
||||
}
|
||||
|
||||
&[aria-sort="asc"]{
|
||||
.tabulator-col-content .tabulator-arrow{
|
||||
border-top: none;
|
||||
border-bottom: 6px solid $sortArrowActive;
|
||||
}
|
||||
}
|
||||
|
||||
&[aria-sort="desc"]{
|
||||
.tabulator-col-content .tabulator-arrow{
|
||||
border-top: 6px solid $sortArrowActive;
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.tabulator-frozen{
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
|
||||
// background-color: inherit;
|
||||
|
||||
z-index: 10;
|
||||
|
||||
&.tabulator-frozen-left{
|
||||
border-right:2px solid $rowBorderColor;
|
||||
}
|
||||
|
||||
&.tabulator-frozen-right{
|
||||
border-left:2px solid $rowBorderColor;
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-calcs-holder{
|
||||
box-sizing:border-box;
|
||||
width:100%;
|
||||
|
||||
background:lighten($headerBackgroundColor, 5%) !important;
|
||||
|
||||
.tabulator-row{
|
||||
background:lighten($headerBackgroundColor, 5%) !important;
|
||||
|
||||
.tabulator-col-resize-handle{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
border-top:1px solid $rowBorderColor;
|
||||
border-bottom:1px solid $headerSeperatorColor;
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
//scrolling element to hold table
|
||||
.tabulator-tableHolder{
|
||||
position:relative;
|
||||
width:100%;
|
||||
white-space: nowrap;
|
||||
overflow:auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
&:focus{
|
||||
outline: none;
|
||||
}
|
||||
|
||||
//default placeholder element
|
||||
.tabulator-placeholder{
|
||||
position: absolute;
|
||||
box-sizing:border-box;
|
||||
display: flex;
|
||||
align-items:center;
|
||||
|
||||
top:0;
|
||||
left:0;
|
||||
height:100%;
|
||||
width:100%;
|
||||
|
||||
span{
|
||||
display: inline-block;
|
||||
|
||||
margin:0 auto;
|
||||
padding:10px;
|
||||
|
||||
color:#000;
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
//element to hold table rows
|
||||
.tabulator-table{
|
||||
position:relative;
|
||||
display:inline-block;
|
||||
background-color:$rowBackgroundColor;
|
||||
white-space: nowrap;
|
||||
overflow:visible;
|
||||
|
||||
.tabulator-row{
|
||||
&.tabulator-calcs{
|
||||
font-weight: bold;
|
||||
background:darken($rowAltBackgroundColor, 5%) !important;
|
||||
|
||||
&.tabulator-calcs-top{
|
||||
border-bottom:2px solid $rowBorderColor;
|
||||
}
|
||||
|
||||
&.tabulator-calcs-bottom{
|
||||
border-top:2px solid $rowBorderColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//row element
|
||||
.tabulator-row{
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
|
||||
min-height:$textSize + ($cellPadding * 2);
|
||||
background-color: $rowBackgroundColor;
|
||||
border-bottom:1px solid $rowBorderColor;
|
||||
|
||||
&.tabulator-selectable:hover{
|
||||
background-color:$rowHoverBackground !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.tabulator-selected{
|
||||
background-color:$rowSelectedBackground;
|
||||
}
|
||||
|
||||
&.tabulator-selected:hover{
|
||||
background-color:$rowSelectedBackgroundHover;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.tabulator-moving{
|
||||
position: absolute;
|
||||
|
||||
border-top:1px solid $rowBorderColor;
|
||||
border-bottom:1px solid $rowBorderColor;
|
||||
|
||||
pointer-events: none !important;
|
||||
z-index:15;
|
||||
}
|
||||
|
||||
.tabulator-frozen{
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
|
||||
background-color: inherit;
|
||||
|
||||
z-index: 10;
|
||||
|
||||
&.tabulator-frozen-left{
|
||||
border-right:2px solid $rowBorderColor;
|
||||
}
|
||||
|
||||
&.tabulator-frozen-right{
|
||||
border-left:2px solid $rowBorderColor;
|
||||
}
|
||||
}
|
||||
|
||||
//cell element
|
||||
.tabulator-cell{
|
||||
display:inline-block;
|
||||
position: relative;
|
||||
box-sizing:border-box;
|
||||
padding:$cellPadding;
|
||||
vertical-align:middle;
|
||||
white-space:nowrap;
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
|
||||
&:last-of-type{
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
&.tabulator-editing{
|
||||
border:1px solid $editBoxColor;
|
||||
padding: 0;
|
||||
|
||||
input, select{
|
||||
border:1px;
|
||||
background:transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&.tabulator-validation-fail{
|
||||
border:1px solid $errorColor;
|
||||
input, select{
|
||||
border:1px;
|
||||
background:transparent;
|
||||
|
||||
color: $errorColor;
|
||||
}
|
||||
}
|
||||
|
||||
//hide left resize handle on first column
|
||||
&:first-child{
|
||||
.tabulator-col-resize-handle.prev{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
//movable row handle
|
||||
&.tabulator-row-handle{
|
||||
|
||||
display: inline-flex;
|
||||
align-items:center;
|
||||
|
||||
-moz-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-o-user-select: none;
|
||||
|
||||
//handle holder
|
||||
.tabulator-row-handle-box{
|
||||
width:80%;
|
||||
|
||||
//Hamburger element
|
||||
.tabulator-row-handle-bar{
|
||||
width:100%;
|
||||
height:3px;
|
||||
margin:2px 10% 0 10%;
|
||||
background:#666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
//row grouping element
|
||||
&.tabulator-group{
|
||||
|
||||
box-sizing:border-box;
|
||||
border-bottom:1px solid #999;
|
||||
border-right:1px solid $rowBorderColor;
|
||||
border-top:1px solid #999;
|
||||
padding:5px;
|
||||
padding-left:10px;
|
||||
background:#fafafa;
|
||||
font-weight:bold;
|
||||
|
||||
min-width: 100%;
|
||||
|
||||
&:hover{
|
||||
cursor:pointer;
|
||||
background-color:rgba(0,0,0,.1);
|
||||
}
|
||||
|
||||
&.tabulator-group-visible{
|
||||
.tabulator-arrow{
|
||||
margin-right:10px;
|
||||
border-left: 6px solid transparent;
|
||||
border-right: 6px solid transparent;
|
||||
border-top: 6px solid $sortArrowActive;
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.tabulator-group-level-1{
|
||||
.tabulator-arrow{
|
||||
margin-left:20px;
|
||||
}
|
||||
}
|
||||
|
||||
&.tabulator-group-level-2{
|
||||
.tabulator-arrow{
|
||||
margin-left:40px;
|
||||
}
|
||||
}
|
||||
|
||||
&.tabulator-group-level-3{
|
||||
.tabulator-arrow{
|
||||
margin-left:60px;
|
||||
}
|
||||
}
|
||||
|
||||
&.tabulator-group-level-4{
|
||||
.tabulator-arrow{
|
||||
margin-left:80px;
|
||||
}
|
||||
}
|
||||
|
||||
&.tabulator-group-level-5{
|
||||
.tabulator-arrow{
|
||||
margin-left:1000px;
|
||||
}
|
||||
}
|
||||
|
||||
//sorting arrow
|
||||
.tabulator-arrow{
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-right:16px;
|
||||
border-top: 6px solid transparent;
|
||||
border-bottom: 6px solid transparent;
|
||||
border-right: 0;
|
||||
border-left: 6px solid $sortArrowActive;
|
||||
vertical-align:middle;
|
||||
}
|
||||
|
||||
span{
|
||||
margin-left:10px;
|
||||
color:#666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//column resize handles
|
||||
.tabulator-col-resize-handle{
|
||||
position:absolute;
|
||||
right:0;
|
||||
top:0;
|
||||
bottom:0;
|
||||
width:5px;
|
||||
|
||||
&.prev{
|
||||
left:0;
|
||||
right:auto;
|
||||
}
|
||||
|
||||
&:hover{
|
||||
cursor:ew-resize;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//footer element
|
||||
.tabulator-footer{
|
||||
padding:5px 10px;
|
||||
border-top:2px solid $footerSeperatorColor;
|
||||
text-align:right;
|
||||
font-weight:bold;
|
||||
white-space:nowrap;
|
||||
user-select:none;
|
||||
|
||||
-moz-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-o-user-select: none;
|
||||
|
||||
.tabulator-calcs-holder{
|
||||
box-sizing:border-box;
|
||||
width:calc("100% + 20px");
|
||||
margin:-5px -10px 5px -10px;
|
||||
|
||||
text-align: left;
|
||||
|
||||
background:lighten($backgroundColor, 5%) !important;
|
||||
|
||||
.tabulator-row{
|
||||
background:lighten($backgroundColor, 5%) !important;
|
||||
|
||||
.tabulator-col-resize-handle{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
border-bottom:1px solid $rowBorderColor;
|
||||
border-top:1px solid $rowBorderColor;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
&:only-child{
|
||||
margin-bottom:-5px;
|
||||
border-bottom:none;
|
||||
}
|
||||
}
|
||||
|
||||
//pagination container element
|
||||
.tabulator-pages{
|
||||
margin:0 7px;
|
||||
}
|
||||
|
||||
//pagination button
|
||||
.tabulator-page{
|
||||
display:inline-block;
|
||||
margin:0 2px;
|
||||
border:1px solid $footerBorderColor;
|
||||
border-radius:3px;
|
||||
padding:2px 5px;
|
||||
background:rgba(255,255,255,.2);
|
||||
font-family:inherit;
|
||||
font-weight:inherit;
|
||||
font-size:inherit;
|
||||
|
||||
|
||||
&.active{
|
||||
color:#d00;
|
||||
}
|
||||
|
||||
&:disabled{
|
||||
opacity:.5;
|
||||
}
|
||||
|
||||
&:not(.disabled){
|
||||
&:hover{
|
||||
cursor:pointer;
|
||||
background:rgba(0,0,0,.2);
|
||||
color:#fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//holding div that contains loader and covers tabulator element to prevent interaction
|
||||
.tablulator-loader{
|
||||
position:absolute;
|
||||
display: flex;
|
||||
align-items:center;
|
||||
|
||||
top:0;
|
||||
left:0;
|
||||
z-index:100;
|
||||
|
||||
height:100%;
|
||||
width:100%;
|
||||
background:rgba(0,0,0,.4);
|
||||
text-align:center;
|
||||
|
||||
//loading message element
|
||||
.tabulator-loader-msg{
|
||||
display:inline-block;
|
||||
|
||||
margin:0 auto;
|
||||
padding:10px 20px;
|
||||
|
||||
border-radius:10px;
|
||||
|
||||
background:#fff;
|
||||
font-weight:bold;
|
||||
font-size:16px;
|
||||
|
||||
//loading message
|
||||
&.tabulator-loading{
|
||||
border:4px solid #333;
|
||||
color:#000;
|
||||
}
|
||||
|
||||
//error message
|
||||
&.tabulator-error{
|
||||
border:4px solid #D00;
|
||||
color:#590000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
//Bootstrap theming classes
|
||||
|
||||
&.table-striped{
|
||||
.tabulator-row{
|
||||
&:nth-child(even){
|
||||
background-color: $rowAltBackgroundColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.table-bordered{
|
||||
border:1px solid $borderColor;
|
||||
|
||||
.tabulator-header{
|
||||
.tabulator-col{
|
||||
border-right:1px solid $borderColor;
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-tableHolder{
|
||||
.tabulator-table{
|
||||
.tabulator-row{
|
||||
.tabulator-cell{
|
||||
border-right:1px solid $borderColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.table-condensed{
|
||||
.tabulator-header{
|
||||
.tabulator-col{
|
||||
.tabulator-col-content{
|
||||
padding:$cellPaddingCondensed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-tableHolder{
|
||||
.tabulator-table{
|
||||
.tabulator-row{
|
||||
min-height:$textSize + ($cellPaddingCondensed * 2);
|
||||
|
||||
.tabulator-cell{
|
||||
padding:$cellPaddingCondensed;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//row colors
|
||||
.tabulator-tableHolder{
|
||||
.tabulator-table{
|
||||
.tabulator-row{
|
||||
&.active{
|
||||
background:$table-bg-active!important;
|
||||
}
|
||||
&.success{
|
||||
background:$state-success-bg!important;
|
||||
}
|
||||
&.info{
|
||||
background: $state-info-bg!important;
|
||||
}
|
||||
&.warning{
|
||||
background:$state-warning-bg!important;
|
||||
}
|
||||
&.danger{
|
||||
background:$state-danger-bg!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
870
js/tabulator/src/scss/bootstrap/variables.scss
Normal file
870
js/tabulator/src/scss/bootstrap/variables.scss
Normal file
@ -0,0 +1,870 @@
|
||||
//
|
||||
// Variables
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
//== Colors
|
||||
//
|
||||
//## Gray and brand colors for use across Bootstrap.
|
||||
|
||||
$gray-base: #000;
|
||||
$gray-darker: lighten($gray-base, 13.5%); // #222
|
||||
$gray-dark: lighten($gray-base, 20%); // #333
|
||||
$gray: lighten($gray-base, 33.5%); // #555
|
||||
$gray-light: lighten($gray-base, 46.7%); // #777
|
||||
$gray-lighter: lighten($gray-base, 93.5%); // #eee
|
||||
|
||||
$brand-primary: darken(#428bca, 6.5%); // #337ab7
|
||||
$brand-success: #5cb85c;
|
||||
$brand-info: #5bc0de;
|
||||
$brand-warning: #f0ad4e;
|
||||
$brand-danger: #d9534f;
|
||||
|
||||
|
||||
//== Scaffolding
|
||||
//
|
||||
//## Settings for some of the most global styles.
|
||||
|
||||
//** Background color for `<body>`.
|
||||
$body-bg: #fff;
|
||||
//** Global text color on `<body>`.
|
||||
$text-color: $gray-dark;
|
||||
|
||||
//** Global textual link color.
|
||||
$link-color: $brand-primary;
|
||||
//** Link hover color set via `darken()` function.
|
||||
$link-hover-color: darken($link-color, 15%);
|
||||
//** Link hover decoration.
|
||||
$link-hover-decoration: underline;
|
||||
|
||||
|
||||
//== Typography
|
||||
//
|
||||
//## Font, line-height, and color for body text, headings, and more.
|
||||
|
||||
$font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
$font-family-serif: Georgia, "Times New Roman", Times, serif;
|
||||
//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
|
||||
$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
|
||||
$font-family-base: $font-family-sans-serif;
|
||||
|
||||
$font-size-base: 14px;
|
||||
$font-size-large: ceil(($font-size-base * 1.25)); // ~18px
|
||||
$font-size-small: ceil(($font-size-base * 0.85)); // ~12px
|
||||
|
||||
$font-size-h1: floor(($font-size-base * 2.6)); // ~36px
|
||||
$font-size-h2: floor(($font-size-base * 2.15)); // ~30px
|
||||
$font-size-h3: ceil(($font-size-base * 1.7)); // ~24px
|
||||
$font-size-h4: ceil(($font-size-base * 1.25)); // ~18px
|
||||
$font-size-h5: $font-size-base;
|
||||
$font-size-h6: ceil(($font-size-base * 0.85)); // ~12px
|
||||
|
||||
//** Unit-less `line-height` for use in components like buttons.
|
||||
$line-height-base: 1.428571429; // 20/14
|
||||
//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
|
||||
$line-height-computed: floor(($font-size-base * $line-height-base)); // ~20px
|
||||
|
||||
//** By default, this inherits from the `<body>`.
|
||||
$headings-font-family: inherit;
|
||||
$headings-font-weight: 500;
|
||||
$headings-line-height: 1.1;
|
||||
$headings-color: inherit;
|
||||
|
||||
|
||||
//== Iconography
|
||||
//
|
||||
//## Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower.
|
||||
|
||||
//** Load fonts from this directory.
|
||||
$icon-font-path: "../fonts/";
|
||||
//** File name for all font files.
|
||||
$icon-font-name: "glyphicons-halflings-regular";
|
||||
//** Element ID within SVG icon file.
|
||||
$icon-font-svg-id: "glyphicons_halflingsregular";
|
||||
|
||||
|
||||
//== Components
|
||||
//
|
||||
//## Define common padding and border radius sizes and more. Values based on 14px text and 1@mixin 428 line-height (~20px to start).
|
||||
|
||||
$padding-base-vertical: 6px;
|
||||
$padding-base-horizontal: 12px;
|
||||
|
||||
$padding-large-vertical: 10px;
|
||||
$padding-large-horizontal: 16px;
|
||||
|
||||
$padding-small-vertical: 5px;
|
||||
$padding-small-horizontal: 10px;
|
||||
|
||||
$padding-xs-vertical: 1px;
|
||||
$padding-xs-horizontal: 5px;
|
||||
|
||||
$line-height-large: 1.3333333; // extra decimals for Win 8.1 Chrome
|
||||
$line-height-small: 1.5;
|
||||
|
||||
$border-radius-base: 4px;
|
||||
$border-radius-large: 6px;
|
||||
$border-radius-small: 3px;
|
||||
|
||||
//** Global color for active items (e.g., navs or dropdowns).
|
||||
$component-active-color: #fff;
|
||||
//** Global background color for active items (e.g., navs or dropdowns).
|
||||
$component-active-bg: $brand-primary;
|
||||
|
||||
//** Width of the `border` for generating carets that indicator dropdowns.
|
||||
$caret-width-base: 4px;
|
||||
//** Carets increase slightly in size for larger components.
|
||||
$caret-width-large: 5px;
|
||||
|
||||
|
||||
//== Tables
|
||||
//
|
||||
//## Customizes the `.table` component with basic values, each used across all table variations.
|
||||
|
||||
//** Padding for `<th>`s and `<td>`s.
|
||||
$table-cell-padding: 8px;
|
||||
//** Padding for cells in `.table-condensed`.
|
||||
$table-condensed-cell-padding: 5px;
|
||||
|
||||
//** Default background color used for all tables.
|
||||
// $table-bg: transparent;
|
||||
$table-bg: #fff;
|
||||
//** Background color used for `.table-striped`.
|
||||
$table-bg-accent: #f9f9f9;
|
||||
//** Background color used for `.table-hover`.
|
||||
$table-bg-hover: #f5f5f5;
|
||||
$table-bg-active: $table-bg-hover;
|
||||
|
||||
//** Border color for table and cell borders.
|
||||
$table-border-color: #ddd;
|
||||
|
||||
|
||||
//== Buttons
|
||||
//
|
||||
//## For each of Bootstrap's buttons, define text, background and border color.
|
||||
|
||||
$btn-font-weight: normal;
|
||||
|
||||
$btn-default-color: #333;
|
||||
$btn-default-bg: #fff;
|
||||
$btn-default-border: #ccc;
|
||||
|
||||
$btn-primary-color: #fff;
|
||||
$btn-primary-bg: $brand-primary;
|
||||
$btn-primary-border: darken($btn-primary-bg, 5%);
|
||||
|
||||
$btn-success-color: #fff;
|
||||
$btn-success-bg: $brand-success;
|
||||
$btn-success-border: darken($btn-success-bg, 5%);
|
||||
|
||||
$btn-info-color: #fff;
|
||||
$btn-info-bg: $brand-info;
|
||||
$btn-info-border: darken($btn-info-bg, 5%);
|
||||
|
||||
$btn-warning-color: #fff;
|
||||
$btn-warning-bg: $brand-warning;
|
||||
$btn-warning-border: darken($btn-warning-bg, 5%);
|
||||
|
||||
$btn-danger-color: #fff;
|
||||
$btn-danger-bg: $brand-danger;
|
||||
$btn-danger-border: darken($btn-danger-bg, 5%);
|
||||
|
||||
$btn-link-disabled-color: $gray-light;
|
||||
|
||||
// Allows for customizing button radius independently from global border radius
|
||||
$btn-border-radius-base: $border-radius-base;
|
||||
$btn-border-radius-large: $border-radius-large;
|
||||
$btn-border-radius-small: $border-radius-small;
|
||||
|
||||
|
||||
//== Forms
|
||||
//
|
||||
//##
|
||||
|
||||
//** `<input>` background color
|
||||
$input-bg: #fff;
|
||||
//** `<input disabled>` background color
|
||||
$input-bg-disabled: $gray-lighter;
|
||||
|
||||
//** Text color for `<input>`s
|
||||
$input-color: $gray;
|
||||
//** `<input>` border color
|
||||
$input-border: #ccc;
|
||||
|
||||
// TODO: Rename `$input-border-radius` to `$input-border-radius-base` in v4
|
||||
//** Default `.form-control` border radius
|
||||
// This has no effect on `<select>`s in some browsers, due to the limited stylability of `<select>`s in CSS.
|
||||
$input-border-radius: $border-radius-base;
|
||||
//** Large `.form-control` border radius
|
||||
$input-border-radius-large: $border-radius-large;
|
||||
//** Small `.form-control` border radius
|
||||
$input-border-radius-small: $border-radius-small;
|
||||
|
||||
//** Border color for inputs on focus
|
||||
$input-border-focus: #66afe9;
|
||||
|
||||
//** Placeholder text color
|
||||
$input-color-placeholder: #999;
|
||||
|
||||
//** Default `.form-control` height
|
||||
$input-height-base: ($line-height-computed + ($padding-base-vertical * 2) + 2);
|
||||
//** Large `.form-control` height
|
||||
$input-height-large: (ceil($font-size-large * $line-height-large) + ($padding-large-vertical * 2) + 2);
|
||||
//** Small `.form-control` height
|
||||
$input-height-small: (floor($font-size-small * $line-height-small) + ($padding-small-vertical * 2) + 2);
|
||||
|
||||
//** `.form-group` margin
|
||||
$form-group-margin-bottom: 15px;
|
||||
|
||||
$legend-color: $gray-dark;
|
||||
$legend-border-color: #e5e5e5;
|
||||
|
||||
//** Background color for textual input addons
|
||||
$input-group-addon-bg: $gray-lighter;
|
||||
//** Border color for textual input addons
|
||||
$input-group-addon-border-color: $input-border;
|
||||
|
||||
//** Disabled cursor for form controls and buttons.
|
||||
$cursor-disabled: not-allowed;
|
||||
|
||||
|
||||
//== Dropdowns
|
||||
//
|
||||
//## Dropdown menu container and contents.
|
||||
|
||||
//** Background for the dropdown menu.
|
||||
$dropdown-bg: #fff;
|
||||
//** Dropdown menu `border-color`.
|
||||
$dropdown-border: rgba(0,0,0,.15);
|
||||
//** Dropdown menu `border-color` **for IE8**.
|
||||
$dropdown-fallback-border: #ccc;
|
||||
//** Divider color for between dropdown items.
|
||||
$dropdown-divider-bg: #e5e5e5;
|
||||
|
||||
//** Dropdown link text color.
|
||||
$dropdown-link-color: $gray-dark;
|
||||
//** Hover color for dropdown links.
|
||||
$dropdown-link-hover-color: darken($gray-dark, 5%);
|
||||
//** Hover background for dropdown links.
|
||||
$dropdown-link-hover-bg: #f5f5f5;
|
||||
|
||||
//** Active dropdown menu item text color.
|
||||
$dropdown-link-active-color: $component-active-color;
|
||||
//** Active dropdown menu item background color.
|
||||
$dropdown-link-active-bg: $component-active-bg;
|
||||
|
||||
//** Disabled dropdown menu item background color.
|
||||
$dropdown-link-disabled-color: $gray-light;
|
||||
|
||||
//** Text color for headers within dropdown menus.
|
||||
$dropdown-header-color: $gray-light;
|
||||
|
||||
//** Deprecated `$dropdown-caret-color` as of v3.1.0
|
||||
$dropdown-caret-color: #000;
|
||||
|
||||
|
||||
//-- Z-index master list
|
||||
//
|
||||
// Warning: Avoid customizing these values. They're used for a bird's eye view
|
||||
// of components dependent on the z-axis and are designed to all work together.
|
||||
//
|
||||
// Note: These variables are not generated into the Customizer.
|
||||
|
||||
$zindex-navbar: 1000;
|
||||
$zindex-dropdown: 1000;
|
||||
$zindex-popover: 1060;
|
||||
$zindex-tooltip: 1070;
|
||||
$zindex-navbar-fixed: 1030;
|
||||
$zindex-modal-background: 1040;
|
||||
$zindex-modal: 1050;
|
||||
|
||||
|
||||
//== Media queries breakpoints
|
||||
//
|
||||
//## Define the breakpoints at which your layout will change, adapting to different screen sizes.
|
||||
|
||||
// Extra small screen / phone
|
||||
//** Deprecated `$screen-xs` as of v3.0.1
|
||||
$screen-xs: 480px;
|
||||
//** Deprecated `$screen-xs-min` as of v3.2.0
|
||||
$screen-xs-min: $screen-xs;
|
||||
//** Deprecated `$screen-phone` as of v3.0.1
|
||||
$screen-phone: $screen-xs-min;
|
||||
|
||||
// Small screen / tablet
|
||||
//** Deprecated `$screen-sm` as of v3.0.1
|
||||
$screen-sm: 768px;
|
||||
$screen-sm-min: $screen-sm;
|
||||
//** Deprecated `$screen-tablet` as of v3.0.1
|
||||
$screen-tablet: $screen-sm-min;
|
||||
|
||||
// Medium screen / desktop
|
||||
//** Deprecated `$screen-md` as of v3.0.1
|
||||
$screen-md: 992px;
|
||||
$screen-md-min: $screen-md;
|
||||
//** Deprecated `$screen-desktop` as of v3.0.1
|
||||
$screen-desktop: $screen-md-min;
|
||||
|
||||
// Large screen / wide desktop
|
||||
//** Deprecated `$screen-lg` as of v3.0.1
|
||||
$screen-lg: 1200px;
|
||||
$screen-lg-min: $screen-lg;
|
||||
//** Deprecated `$screen-lg-desktop` as of v3.0.1
|
||||
$screen-lg-desktop: $screen-lg-min;
|
||||
|
||||
// So media queries don't overlap when required, provide a maximum
|
||||
$screen-xs-max: ($screen-sm-min - 1);
|
||||
$screen-sm-max: ($screen-md-min - 1);
|
||||
$screen-md-max: ($screen-lg-min - 1);
|
||||
|
||||
|
||||
//== Grid system
|
||||
//
|
||||
//## Define your custom responsive grid.
|
||||
|
||||
//** Number of columns in the grid.
|
||||
$grid-columns: 12;
|
||||
//** Padding between columns. Gets divided in half for the left and right.
|
||||
$grid-gutter-width: 30px;
|
||||
// Navbar collapse
|
||||
//** Point at which the navbar becomes uncollapsed.
|
||||
$grid-float-breakpoint: $screen-sm-min;
|
||||
//** Point at which the navbar begins collapsing.
|
||||
$grid-float-breakpoint-max: ($grid-float-breakpoint - 1);
|
||||
|
||||
|
||||
//== Container sizes
|
||||
//
|
||||
//## Define the maximum width of `.container` for different screen sizes.
|
||||
|
||||
// Small screen / tablet
|
||||
$container-tablet: (720px + $grid-gutter-width);
|
||||
//** For `$screen-sm-min` and up.
|
||||
$container-sm: $container-tablet;
|
||||
|
||||
// Medium screen / desktop
|
||||
$container-desktop: (940px + $grid-gutter-width);
|
||||
//** For `$screen-md-min` and up.
|
||||
$container-md: $container-desktop;
|
||||
|
||||
// Large screen / wide desktop
|
||||
$container-large-desktop: (1140px + $grid-gutter-width);
|
||||
//** For `$screen-lg-min` and up.
|
||||
$container-lg: $container-large-desktop;
|
||||
|
||||
|
||||
//== Navbar
|
||||
//
|
||||
//##
|
||||
|
||||
// Basics of a navbar
|
||||
$navbar-height: 50px;
|
||||
$navbar-margin-bottom: $line-height-computed;
|
||||
$navbar-border-radius: $border-radius-base;
|
||||
$navbar-padding-horizontal: floor(($grid-gutter-width / 2));
|
||||
$navbar-padding-vertical: (($navbar-height - $line-height-computed) / 2);
|
||||
$navbar-collapse-max-height: 340px;
|
||||
|
||||
$navbar-default-color: #777;
|
||||
$navbar-default-bg: #f8f8f8;
|
||||
$navbar-default-border: darken($navbar-default-bg, 6.5%);
|
||||
|
||||
// Navbar links
|
||||
$navbar-default-link-color: #777;
|
||||
$navbar-default-link-hover-color: #333;
|
||||
$navbar-default-link-hover-bg: transparent;
|
||||
$navbar-default-link-active-color: #555;
|
||||
$navbar-default-link-active-bg: darken($navbar-default-bg, 6.5%);
|
||||
$navbar-default-link-disabled-color: #ccc;
|
||||
$navbar-default-link-disabled-bg: transparent;
|
||||
|
||||
// Navbar brand label
|
||||
$navbar-default-brand-color: $navbar-default-link-color;
|
||||
$navbar-default-brand-hover-color: darken($navbar-default-brand-color, 10%);
|
||||
$navbar-default-brand-hover-bg: transparent;
|
||||
|
||||
// Navbar toggle
|
||||
$navbar-default-toggle-hover-bg: #ddd;
|
||||
$navbar-default-toggle-icon-bar-bg: #888;
|
||||
$navbar-default-toggle-border-color: #ddd;
|
||||
|
||||
|
||||
//=== Inverted navbar
|
||||
// Reset inverted navbar basics
|
||||
$navbar-inverse-color: lighten($gray-light, 15%);
|
||||
$navbar-inverse-bg: #222;
|
||||
$navbar-inverse-border: darken($navbar-inverse-bg, 10%);
|
||||
|
||||
// Inverted navbar links
|
||||
$navbar-inverse-link-color: lighten($gray-light, 15%);
|
||||
$navbar-inverse-link-hover-color: #fff;
|
||||
$navbar-inverse-link-hover-bg: transparent;
|
||||
$navbar-inverse-link-active-color: $navbar-inverse-link-hover-color;
|
||||
$navbar-inverse-link-active-bg: darken($navbar-inverse-bg, 10%);
|
||||
$navbar-inverse-link-disabled-color: #444;
|
||||
$navbar-inverse-link-disabled-bg: transparent;
|
||||
|
||||
// Inverted navbar brand label
|
||||
$navbar-inverse-brand-color: $navbar-inverse-link-color;
|
||||
$navbar-inverse-brand-hover-color: #fff;
|
||||
$navbar-inverse-brand-hover-bg: transparent;
|
||||
|
||||
// Inverted navbar toggle
|
||||
$navbar-inverse-toggle-hover-bg: #333;
|
||||
$navbar-inverse-toggle-icon-bar-bg: #fff;
|
||||
$navbar-inverse-toggle-border-color: #333;
|
||||
|
||||
|
||||
//== Navs
|
||||
//
|
||||
//##
|
||||
|
||||
//=== Shared nav styles
|
||||
$nav-link-padding: 10px 15px;
|
||||
$nav-link-hover-bg: $gray-lighter;
|
||||
|
||||
$nav-disabled-link-color: $gray-light;
|
||||
$nav-disabled-link-hover-color: $gray-light;
|
||||
|
||||
//== Tabs
|
||||
$nav-tabs-border-color: #ddd;
|
||||
|
||||
$nav-tabs-link-hover-border-color: $gray-lighter;
|
||||
|
||||
$nav-tabs-active-link-hover-bg: $body-bg;
|
||||
$nav-tabs-active-link-hover-color: $gray;
|
||||
$nav-tabs-active-link-hover-border-color: #ddd;
|
||||
|
||||
$nav-tabs-justified-link-border-color: #ddd;
|
||||
$nav-tabs-justified-active-link-border-color: $body-bg;
|
||||
|
||||
//== Pills
|
||||
$nav-pills-border-radius: $border-radius-base;
|
||||
$nav-pills-active-link-hover-bg: $component-active-bg;
|
||||
$nav-pills-active-link-hover-color: $component-active-color;
|
||||
|
||||
|
||||
//== Pagination
|
||||
//
|
||||
//##
|
||||
|
||||
$pagination-color: $link-color;
|
||||
$pagination-bg: #fff;
|
||||
$pagination-border: #ddd;
|
||||
|
||||
$pagination-hover-color: $link-hover-color;
|
||||
$pagination-hover-bg: $gray-lighter;
|
||||
$pagination-hover-border: #ddd;
|
||||
|
||||
$pagination-active-color: #fff;
|
||||
$pagination-active-bg: $brand-primary;
|
||||
$pagination-active-border: $brand-primary;
|
||||
|
||||
$pagination-disabled-color: $gray-light;
|
||||
$pagination-disabled-bg: #fff;
|
||||
$pagination-disabled-border: #ddd;
|
||||
|
||||
|
||||
//== Pager
|
||||
//
|
||||
//##
|
||||
|
||||
$pager-bg: $pagination-bg;
|
||||
$pager-border: $pagination-border;
|
||||
$pager-border-radius: 15px;
|
||||
|
||||
$pager-hover-bg: $pagination-hover-bg;
|
||||
|
||||
$pager-active-bg: $pagination-active-bg;
|
||||
$pager-active-color: $pagination-active-color;
|
||||
|
||||
$pager-disabled-color: $pagination-disabled-color;
|
||||
|
||||
|
||||
//== Jumbotron
|
||||
//
|
||||
//##
|
||||
|
||||
$jumbotron-padding: 30px;
|
||||
$jumbotron-color: inherit;
|
||||
$jumbotron-bg: $gray-lighter;
|
||||
$jumbotron-heading-color: inherit;
|
||||
$jumbotron-font-size: ceil(($font-size-base * 1.5));
|
||||
$jumbotron-heading-font-size: ceil(($font-size-base * 4.5));
|
||||
|
||||
|
||||
//== Form states and alerts
|
||||
//
|
||||
//## Define colors for form feedback states and, by default, alerts.
|
||||
|
||||
$state-success-text: #3c763d;
|
||||
$state-success-bg: #dff0d8;
|
||||
$state-success-border: darken(adjust-hue($state-success-bg, -10%), 5%);
|
||||
|
||||
$state-info-text: #31708f;
|
||||
$state-info-bg: #d9edf7;
|
||||
$state-info-border: darken(adjust-hue($state-info-bg, -10%), 7%);
|
||||
|
||||
$state-warning-text: #8a6d3b;
|
||||
$state-warning-bg: #fcf8e3;
|
||||
$state-warning-border: darken(adjust-hue($state-warning-bg, -10%), 5%);
|
||||
|
||||
$state-danger-text: #a94442;
|
||||
$state-danger-bg: #f2dede;
|
||||
$state-danger-border: darken(adjust-hue($state-danger-bg, -10%), 5%);
|
||||
|
||||
|
||||
//== Tooltips
|
||||
//
|
||||
//##
|
||||
|
||||
//** Tooltip max width
|
||||
$tooltip-max-width: 200px;
|
||||
//** Tooltip text color
|
||||
$tooltip-color: #fff;
|
||||
//** Tooltip background color
|
||||
$tooltip-bg: #000;
|
||||
$tooltip-opacity: .9;
|
||||
|
||||
//** Tooltip arrow width
|
||||
$tooltip-arrow-width: 5px;
|
||||
//** Tooltip arrow color
|
||||
$tooltip-arrow-color: $tooltip-bg;
|
||||
|
||||
|
||||
//== Popovers
|
||||
//
|
||||
//##
|
||||
|
||||
//** Popover body background color
|
||||
$popover-bg: #fff;
|
||||
//** Popover maximum width
|
||||
$popover-max-width: 276px;
|
||||
//** Popover border color
|
||||
$popover-border-color: rgba(0,0,0,.2);
|
||||
//** Popover fallback border color
|
||||
$popover-fallback-border-color: #ccc;
|
||||
|
||||
//** Popover title background color
|
||||
$popover-title-bg: darken($popover-bg, 3%);
|
||||
|
||||
//** Popover arrow width
|
||||
$popover-arrow-width: 10px;
|
||||
//** Popover arrow color
|
||||
$popover-arrow-color: $popover-bg;
|
||||
|
||||
//** Popover outer arrow width
|
||||
$popover-arrow-outer-width: ($popover-arrow-width + 1);
|
||||
//** Popover outer arrow color
|
||||
$popover-arrow-outer-color: fadein($popover-border-color, 5%);
|
||||
//** Popover outer arrow fallback color
|
||||
$popover-arrow-outer-fallback-color: darken($popover-fallback-border-color, 20%);
|
||||
|
||||
|
||||
//== Labels
|
||||
//
|
||||
//##
|
||||
|
||||
//** Default label background color
|
||||
$label-default-bg: $gray-light;
|
||||
//** Primary label background color
|
||||
$label-primary-bg: $brand-primary;
|
||||
//** Success label background color
|
||||
$label-success-bg: $brand-success;
|
||||
//** Info label background color
|
||||
$label-info-bg: $brand-info;
|
||||
//** Warning label background color
|
||||
$label-warning-bg: $brand-warning;
|
||||
//** Danger label background color
|
||||
$label-danger-bg: $brand-danger;
|
||||
|
||||
//** Default label text color
|
||||
$label-color: #fff;
|
||||
//** Default text color of a linked label
|
||||
$label-link-hover-color: #fff;
|
||||
|
||||
|
||||
//== Modals
|
||||
//
|
||||
//##
|
||||
|
||||
//** Padding applied to the modal body
|
||||
$modal-inner-padding: 15px;
|
||||
|
||||
//** Padding applied to the modal title
|
||||
$modal-title-padding: 15px;
|
||||
//** Modal title line-height
|
||||
$modal-title-line-height: $line-height-base;
|
||||
|
||||
//** Background color of modal content area
|
||||
$modal-content-bg: #fff;
|
||||
//** Modal content border color
|
||||
$modal-content-border-color: rgba(0,0,0,.2);
|
||||
//** Modal content border color **for IE8**
|
||||
$modal-content-fallback-border-color: #999;
|
||||
|
||||
//** Modal backdrop background color
|
||||
$modal-backdrop-bg: #000;
|
||||
//** Modal backdrop opacity
|
||||
$modal-backdrop-opacity: .5;
|
||||
//** Modal header border color
|
||||
$modal-header-border-color: #e5e5e5;
|
||||
//** Modal footer border color
|
||||
$modal-footer-border-color: $modal-header-border-color;
|
||||
|
||||
$modal-lg: 900px;
|
||||
$modal-md: 600px;
|
||||
$modal-sm: 300px;
|
||||
|
||||
|
||||
//== Alerts
|
||||
//
|
||||
//## Define alert colors, border radius, and padding.
|
||||
|
||||
$alert-padding: 15px;
|
||||
$alert-border-radius: $border-radius-base;
|
||||
$alert-link-font-weight: bold;
|
||||
|
||||
$alert-success-bg: $state-success-bg;
|
||||
$alert-success-text: $state-success-text;
|
||||
$alert-success-border: $state-success-border;
|
||||
|
||||
$alert-info-bg: $state-info-bg;
|
||||
$alert-info-text: $state-info-text;
|
||||
$alert-info-border: $state-info-border;
|
||||
|
||||
$alert-warning-bg: $state-warning-bg;
|
||||
$alert-warning-text: $state-warning-text;
|
||||
$alert-warning-border: $state-warning-border;
|
||||
|
||||
$alert-danger-bg: $state-danger-bg;
|
||||
$alert-danger-text: $state-danger-text;
|
||||
$alert-danger-border: $state-danger-border;
|
||||
|
||||
|
||||
//== Progress bars
|
||||
//
|
||||
//##
|
||||
|
||||
//** Background color of the whole progress component
|
||||
$progress-bg: #f5f5f5;
|
||||
//** Progress bar text color
|
||||
$progress-bar-color: #fff;
|
||||
//** Variable for setting rounded corners on progress bar.
|
||||
$progress-border-radius: $border-radius-base;
|
||||
|
||||
//** Default progress bar color
|
||||
$progress-bar-bg: $brand-primary;
|
||||
//** Success progress bar color
|
||||
$progress-bar-success-bg: $brand-success;
|
||||
//** Warning progress bar color
|
||||
$progress-bar-warning-bg: $brand-warning;
|
||||
//** Danger progress bar color
|
||||
$progress-bar-danger-bg: $brand-danger;
|
||||
//** Info progress bar color
|
||||
$progress-bar-info-bg: $brand-info;
|
||||
|
||||
|
||||
//== List group
|
||||
//
|
||||
//##
|
||||
|
||||
//** Background color on `.list-group-item`
|
||||
$list-group-bg: #fff;
|
||||
//** `.list-group-item` border color
|
||||
$list-group-border: #ddd;
|
||||
//** List group border radius
|
||||
$list-group-border-radius: $border-radius-base;
|
||||
|
||||
//** Background color of single list items on hover
|
||||
$list-group-hover-bg: #f5f5f5;
|
||||
//** Text color of active list items
|
||||
$list-group-active-color: $component-active-color;
|
||||
//** Background color of active list items
|
||||
$list-group-active-bg: $component-active-bg;
|
||||
//** Border color of active list elements
|
||||
$list-group-active-border: $list-group-active-bg;
|
||||
//** Text color for content within active list items
|
||||
$list-group-active-text-color: lighten($list-group-active-bg, 40%);
|
||||
|
||||
//** Text color of disabled list items
|
||||
$list-group-disabled-color: $gray-light;
|
||||
//** Background color of disabled list items
|
||||
$list-group-disabled-bg: $gray-lighter;
|
||||
//** Text color for content within disabled list items
|
||||
$list-group-disabled-text-color: $list-group-disabled-color;
|
||||
|
||||
$list-group-link-color: #555;
|
||||
$list-group-link-hover-color: $list-group-link-color;
|
||||
$list-group-link-heading-color: #333;
|
||||
|
||||
|
||||
//== Panels
|
||||
//
|
||||
//##
|
||||
|
||||
$panel-bg: #fff;
|
||||
$panel-body-padding: 15px;
|
||||
$panel-heading-padding: 10px 15px;
|
||||
$panel-footer-padding: $panel-heading-padding;
|
||||
$panel-border-radius: $border-radius-base;
|
||||
|
||||
//** Border color for elements within panels
|
||||
$panel-inner-border: #ddd;
|
||||
$panel-footer-bg: #f5f5f5;
|
||||
|
||||
$panel-default-text: $gray-dark;
|
||||
$panel-default-border: #ddd;
|
||||
$panel-default-heading-bg: #f5f5f5;
|
||||
|
||||
$panel-primary-text: #fff;
|
||||
$panel-primary-border: $brand-primary;
|
||||
$panel-primary-heading-bg: $brand-primary;
|
||||
|
||||
$panel-success-text: $state-success-text;
|
||||
$panel-success-border: $state-success-border;
|
||||
$panel-success-heading-bg: $state-success-bg;
|
||||
|
||||
$panel-info-text: $state-info-text;
|
||||
$panel-info-border: $state-info-border;
|
||||
$panel-info-heading-bg: $state-info-bg;
|
||||
|
||||
$panel-warning-text: $state-warning-text;
|
||||
$panel-warning-border: $state-warning-border;
|
||||
$panel-warning-heading-bg: $state-warning-bg;
|
||||
|
||||
$panel-danger-text: $state-danger-text;
|
||||
$panel-danger-border: $state-danger-border;
|
||||
$panel-danger-heading-bg: $state-danger-bg;
|
||||
|
||||
|
||||
//== Thumbnails
|
||||
//
|
||||
//##
|
||||
|
||||
//** Padding around the thumbnail image
|
||||
$thumbnail-padding: 4px;
|
||||
//** Thumbnail background color
|
||||
$thumbnail-bg: $body-bg;
|
||||
//** Thumbnail border color
|
||||
$thumbnail-border: #ddd;
|
||||
//** Thumbnail border radius
|
||||
$thumbnail-border-radius: $border-radius-base;
|
||||
|
||||
//** Custom text color for thumbnail captions
|
||||
$thumbnail-caption-color: $text-color;
|
||||
//** Padding around the thumbnail caption
|
||||
$thumbnail-caption-padding: 9px;
|
||||
|
||||
|
||||
//== Wells
|
||||
//
|
||||
//##
|
||||
|
||||
$well-bg: #f5f5f5;
|
||||
$well-border: darken($well-bg, 7%);
|
||||
|
||||
|
||||
//== Badges
|
||||
//
|
||||
//##
|
||||
|
||||
$badge-color: #fff;
|
||||
//** Linked badge text color on hover
|
||||
$badge-link-hover-color: #fff;
|
||||
$badge-bg: $gray-light;
|
||||
|
||||
//** Badge text color in active nav link
|
||||
$badge-active-color: $link-color;
|
||||
//** Badge background color in active nav link
|
||||
$badge-active-bg: #fff;
|
||||
|
||||
$badge-font-weight: bold;
|
||||
$badge-line-height: 1;
|
||||
$badge-border-radius: 10px;
|
||||
|
||||
|
||||
//== Breadcrumbs
|
||||
//
|
||||
//##
|
||||
|
||||
$breadcrumb-padding-vertical: 8px;
|
||||
$breadcrumb-padding-horizontal: 15px;
|
||||
//** Breadcrumb background color
|
||||
$breadcrumb-bg: #f5f5f5;
|
||||
//** Breadcrumb text color
|
||||
$breadcrumb-color: #ccc;
|
||||
//** Text color of current page in the breadcrumb
|
||||
$breadcrumb-active-color: $gray-light;
|
||||
//** Textual separator for between breadcrumb elements
|
||||
$breadcrumb-separator: "/";
|
||||
|
||||
|
||||
//== Carousel
|
||||
//
|
||||
//##
|
||||
|
||||
$carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6);
|
||||
|
||||
$carousel-control-color: #fff;
|
||||
$carousel-control-width: 15%;
|
||||
$carousel-control-opacity: .5;
|
||||
$carousel-control-font-size: 20px;
|
||||
|
||||
$carousel-indicator-active-bg: #fff;
|
||||
$carousel-indicator-border-color: #fff;
|
||||
|
||||
$carousel-caption-color: #fff;
|
||||
|
||||
|
||||
//== Close
|
||||
//
|
||||
//##
|
||||
|
||||
$close-font-weight: bold;
|
||||
$close-color: #000;
|
||||
$close-text-shadow: 0 1px 0 #fff;
|
||||
|
||||
|
||||
//== Code
|
||||
//
|
||||
//##
|
||||
|
||||
$code-color: #c7254e;
|
||||
$code-bg: #f9f2f4;
|
||||
|
||||
$kbd-color: #fff;
|
||||
$kbd-bg: #333;
|
||||
|
||||
$pre-bg: #f5f5f5;
|
||||
$pre-color: $gray-dark;
|
||||
$pre-border-color: #ccc;
|
||||
$pre-scrollable-max-height: 340px;
|
||||
|
||||
|
||||
//== Type
|
||||
//
|
||||
//##
|
||||
|
||||
//** Horizontal offset for forms and lists.
|
||||
$component-offset-horizontal: 180px;
|
||||
//** Text muted color
|
||||
$text-muted: $gray-light;
|
||||
//** Abbreviations and acronyms border color
|
||||
$abbr-border-color: $gray-light;
|
||||
//** Headings small color
|
||||
$headings-small-color: $gray-light;
|
||||
//** Blockquote small color
|
||||
$blockquote-small-color: $gray-light;
|
||||
//** Blockquote font size
|
||||
$blockquote-font-size: ($font-size-base * 1.25);
|
||||
//** Blockquote border color
|
||||
$blockquote-border-color: $gray-lighter;
|
||||
//** Page header border color
|
||||
$page-header-border-color: $gray-lighter;
|
||||
//** Width of horizontal description list titles
|
||||
$dl-horizontal-offset: $component-offset-horizontal;
|
||||
//** Point at which .dl-horizontal becomes horizontal
|
||||
$dl-horizontal-breakpoint: $grid-float-breakpoint;
|
||||
//** Horizontal line color.
|
||||
$hr-border: $gray-lighter;
|
||||
1056
js/tabulator/src/scss/semantic-ui/tabulator_semantic-ui.scss
Normal file
1056
js/tabulator/src/scss/semantic-ui/tabulator_semantic-ui.scss
Normal file
File diff suppressed because it is too large
Load Diff
830
js/tabulator/src/scss/semantic-ui/variables.scss
Normal file
830
js/tabulator/src/scss/semantic-ui/variables.scss
Normal file
@ -0,0 +1,830 @@
|
||||
|
||||
|
||||
/*******************************
|
||||
Site Settings
|
||||
*******************************/
|
||||
|
||||
/*-------------------
|
||||
Fonts
|
||||
--------------------*/
|
||||
|
||||
$fontName : 'Lato';
|
||||
$fontSmoothing : antialiased;
|
||||
|
||||
$headerFont : $fontName, 'Helvetica Neue', Arial, Helvetica, sans-serif;
|
||||
$pageFont : $fontName, 'Helvetica Neue', Arial, Helvetica, sans-serif;
|
||||
|
||||
$googleFontName : $fontName;
|
||||
$importGoogleFonts : true;
|
||||
$googleFontSizes : '400,700,400italic,700italic';
|
||||
$googleSubset : 'latin';
|
||||
|
||||
$googleProtocol : 'https://';
|
||||
$googleFontRequest : '${googleFontName}:${googleFontSizes}&subset=${googleSubset}';
|
||||
|
||||
/*-------------------
|
||||
Base Sizes
|
||||
--------------------*/
|
||||
|
||||
/* This is the single variable that controls them all */
|
||||
$emSize : 14px;
|
||||
|
||||
/* The size of page text */
|
||||
$fontSize : 14px;
|
||||
|
||||
/*-------------------
|
||||
Exact Pixel Values
|
||||
--------------------*/
|
||||
/*
|
||||
These are used to specify exact pixel values in em
|
||||
for things like borders that remain constantly
|
||||
sized as emSize adjusts
|
||||
|
||||
Since there are many more sizes than names for sizes,
|
||||
these are named by their original pixel values.
|
||||
|
||||
*/
|
||||
|
||||
|
||||
$a1px : (1 / $emSize) + rem;
|
||||
$a4px : (4 / $emSize) + rem;
|
||||
$a11px : (11 / $emSize) + rem;
|
||||
$a14px : (14 / $emSize) + rem;
|
||||
|
||||
$relative1px : (1 / $emSize) + em;
|
||||
$relative4px : (4 / $emSize) + em;
|
||||
$relative11px : (11 / $emSize) + em;
|
||||
$relative14px : (14 / $emSize) + em;
|
||||
|
||||
|
||||
|
||||
/*-------------------
|
||||
Border Radius
|
||||
--------------------*/
|
||||
|
||||
/* See Power-user section below
|
||||
for explanation of $px variables
|
||||
*/
|
||||
$relativeBorderRadius: $relative4px;
|
||||
$absoluteBorderRadius: $a4px;
|
||||
|
||||
$defaultBorderRadius: $absoluteBorderRadius;
|
||||
|
||||
|
||||
|
||||
/*-------------------
|
||||
Site Colors
|
||||
--------------------*/
|
||||
|
||||
/*--- Colors ---*/
|
||||
$red : #DB2828;
|
||||
$orange : #F2711C;
|
||||
$yellow : #FBBD08;
|
||||
$olive : #B5CC18;
|
||||
$green : #21BA45;
|
||||
$teal : #00B5AD;
|
||||
$blue : #2185D0;
|
||||
$violet : #6435C9;
|
||||
$purple : #A333C8;
|
||||
$pink : #E03997;
|
||||
$brown : #A5673F;
|
||||
$grey : #767676;
|
||||
$black : #1B1C1D;
|
||||
|
||||
/*--- Light Colors ---*/
|
||||
$lightRed : #FF695E;
|
||||
$lightOrange : #FF851B;
|
||||
$lightYellow : #FFE21F;
|
||||
$lightOlive : #D9E778;
|
||||
$lightGreen : #2ECC40;
|
||||
$lightTeal : #6DFFFF;
|
||||
$lightBlue : #54C8FF;
|
||||
$lightViolet : #A291FB;
|
||||
$lightPurple : #DC73FF;
|
||||
$lightPink : #FF8EDF;
|
||||
$lightBrown : #D67C1C;
|
||||
$lightGrey : #DCDDDE;
|
||||
$lightBlack : #545454;
|
||||
|
||||
/*--- Neutrals ---*/
|
||||
$fullBlack : #000000;
|
||||
$offWhite : #F9FAFB;
|
||||
$darkWhite : #F3F4F5;
|
||||
$midWhite : #DCDDDE;
|
||||
$white : #FFFFFF;
|
||||
|
||||
/*--- Colored Backgrounds ---*/
|
||||
$redBackground : #FFE8E6;
|
||||
$orangeBackground : #FFEDDE;
|
||||
$yellowBackground : #FFF8DB;
|
||||
$oliveBackground : #FBFDEF;
|
||||
$greenBackground : #E5F9E7;
|
||||
$tealBackground : #E1F7F7;
|
||||
$blueBackground : #DFF0FF;
|
||||
$violetBackground : #EAE7FF;
|
||||
$purpleBackground : #F6E7FF;
|
||||
$pinkBackground : #FFE3FB;
|
||||
$brownBackground : #F1E2D3;
|
||||
|
||||
/*--- Colored Text ---*/
|
||||
$redTextColor : $red;
|
||||
$orangeTextColor : $orange;
|
||||
$yellowTextColor : #B58105; // Yellow text is difficult to read
|
||||
$oliveTextColor : #8ABC1E; // Olive is difficult to read
|
||||
$greenTextColor : #1EBC30; // Green is difficult to read
|
||||
$tealTextColor : #10A3A3; // Teal text is difficult to read
|
||||
$blueTextColor : $blue;
|
||||
$violetTextColor : $violet;
|
||||
$purpleTextColor : $purple;
|
||||
$pinkTextColor : $pink;
|
||||
$brownTextColor : $brown;
|
||||
|
||||
/*--- Colored Headers ---*/
|
||||
$redHeaderColor : darken($redTextColor, 5);
|
||||
$oliveHeaderColor : darken($oliveTextColor, 5);
|
||||
$greenHeaderColor : darken($greenTextColor, 5);
|
||||
$yellowHeaderColor : darken($yellowTextColor, 5);
|
||||
$blueHeaderColor : darken($blueTextColor, 5);
|
||||
$tealHeaderColor : darken($tealTextColor, 5);
|
||||
$pinkHeaderColor : darken($pinkTextColor, 5);
|
||||
$violetHeaderColor : darken($violetTextColor, 5);
|
||||
$purpleHeaderColor : darken($purpleTextColor, 5);
|
||||
$orangeHeaderColor : darken($orangeTextColor, 5);
|
||||
$brownHeaderColor : darken($brownTextColor, 5);
|
||||
|
||||
/*--- Colored Border ---*/
|
||||
$redBorderColor : $redTextColor;
|
||||
$orangeBorderColor : $orangeTextColor;
|
||||
$yellowBorderColor : $yellowTextColor;
|
||||
$oliveBorderColor : $oliveTextColor;
|
||||
$greenBorderColor : $greenTextColor;
|
||||
$tealBorderColor : $tealTextColor;
|
||||
$blueBorderColor : $blueTextColor;
|
||||
$violetBorderColor : $violetTextColor;
|
||||
$purpleBorderColor : $purpleTextColor;
|
||||
$pinkBorderColor : $pinkTextColor;
|
||||
$brownBorderColor : $brownTextColor;
|
||||
|
||||
/*-------------------
|
||||
Alpha Colors
|
||||
--------------------*/
|
||||
|
||||
$subtleTransparentBlack : rgba(0, 0, 0, 0.03);
|
||||
$transparentBlack : rgba(0, 0, 0, 0.05);
|
||||
$strongTransparentBlack : rgba(0, 0, 0, 0.10);
|
||||
$veryStrongTransparentBlack : rgba(0, 0, 0, 0.15);
|
||||
|
||||
$subtleTransparentWhite : rgba(255, 255, 255, 0.02);
|
||||
$transparentWhite : rgba(255, 255, 255, 0.08);
|
||||
$strongTransparentWhite : rgba(255, 255, 255, 0.15);
|
||||
|
||||
|
||||
|
||||
/*-------------------
|
||||
Brand Colors
|
||||
--------------------*/
|
||||
|
||||
$primaryColor : $blue;
|
||||
$secondaryColor : $black;
|
||||
|
||||
$lightPrimaryColor : $lightBlue;
|
||||
$lightSecondaryColor : $lightBlack;
|
||||
|
||||
/*--------------
|
||||
Page Heading
|
||||
---------------*/
|
||||
|
||||
$headerFontWeight : bold;
|
||||
$headerLineHeight : (18 / 14) * 1em;
|
||||
|
||||
$h1 : (28 / 14) * 1rem;
|
||||
$h2 : (24 / 14) * 1rem;
|
||||
$h3 : (18 / 14) * 1rem;
|
||||
$h4 : (15 / 14) * 1rem;
|
||||
$h5 : (14 / 14) * 1rem;
|
||||
|
||||
|
||||
/*-------------------
|
||||
Page
|
||||
--------------------*/
|
||||
|
||||
$pageBackground : #FFFFFF;
|
||||
$pageOverflowX : hidden;
|
||||
|
||||
$lineHeight : 1.4285em;
|
||||
$textColor : rgba(0, 0, 0, 0.87);
|
||||
|
||||
|
||||
/*--------------
|
||||
Form Input
|
||||
---------------*/
|
||||
|
||||
/* This adjusts the default form input across all elements */
|
||||
$inputBackground : $white;
|
||||
$inputVerticalPadding : $relative11px;
|
||||
$inputHorizontalPadding : $relative14px;
|
||||
$inputPadding : $inputVerticalPadding $inputHorizontalPadding;
|
||||
|
||||
/* Input Text Color */
|
||||
$inputColor: $textColor;
|
||||
$inputPlaceholderColor: lighten($inputColor, 75);
|
||||
$inputPlaceholderFocusColor: lighten($inputColor, 45);
|
||||
|
||||
/* Line Height Default For Inputs in Browser (Descendors are 17px at 14px base em) */
|
||||
$inputLineHeight: (17 / 14) * 1em;
|
||||
|
||||
/*-------------------
|
||||
Focused Input
|
||||
--------------------*/
|
||||
|
||||
/* Used on inputs, textarea etc */
|
||||
$focusedFormBorderColor: #85B7D9;
|
||||
|
||||
/* Used on dropdowns, other larger blocks */
|
||||
$focusedFormMutedBorderColor: #96C8DA;
|
||||
|
||||
/*-------------------
|
||||
Sizes
|
||||
--------------------*/
|
||||
|
||||
/*
|
||||
Sizes are all expressed in terms of 14px/em (default em)
|
||||
This ensures these "ratios" remain constant despite changes in EM
|
||||
*/
|
||||
|
||||
$miniSize : (11 / 14);
|
||||
$tinySize : (12 / 14);
|
||||
$smallSize : (13 / 14);
|
||||
$mediumSize : (14 / 14);
|
||||
$largeSize : (16 / 14);
|
||||
$bigSize : (18 / 14);
|
||||
$hugeSize : (20 / 14);
|
||||
$massiveSize : (24 / 14);
|
||||
|
||||
|
||||
/*-------------------
|
||||
Paragraph
|
||||
--------------------*/
|
||||
|
||||
$paragraphMargin : 0em 0em 1em;
|
||||
$paragraphLineHeight : $lineHeight;
|
||||
|
||||
/*-------------------
|
||||
Links
|
||||
--------------------*/
|
||||
|
||||
$linkColor : #4183C4;
|
||||
$linkUnderline : none;
|
||||
$linkHoverColor : darken(saturate($linkColor, 20), 15);
|
||||
$linkHoverUnderline : $linkUnderline;
|
||||
|
||||
/*-------------------
|
||||
Highlighted Text
|
||||
--------------------*/
|
||||
|
||||
$highlightBackground : #CCE2FF;
|
||||
$highlightColor : $textColor;
|
||||
|
||||
$inputHighlightBackground : rgba(100, 100, 100, 0.4);
|
||||
$inputHighlightColor : $textColor;
|
||||
|
||||
/*-------------------
|
||||
Em Sizes
|
||||
--------------------*/
|
||||
|
||||
/*
|
||||
This rounds $size values to the closest pixel then expresses that value in (r)em.
|
||||
This ensures all size values round to exact pixels
|
||||
*/
|
||||
$mini : (round($miniSize * $emSize) / $emSize) * 1rem;
|
||||
$tiny : (round($tinySize * $emSize) / $emSize) * 1rem;
|
||||
$small : (round($smallSize * $emSize) / $emSize) * 1rem;
|
||||
$medium : (round($mediumSize * $emSize) / $emSize) * 1rem;
|
||||
$large : (round($largeSize * $emSize) / $emSize) * 1rem;
|
||||
$big : (round($bigSize * $emSize) / $emSize) * 1rem;
|
||||
$huge : (round($hugeSize * $emSize) / $emSize) * 1rem;
|
||||
$massive : (round($massiveSize * $emSize) / $emSize) * 1rem;
|
||||
|
||||
/* em */
|
||||
$relativeMini : (round($miniSize * $emSize) / $emSize) * 1em;
|
||||
$relativeTiny : (round($tinySize * $emSize) / $emSize) * 1em;
|
||||
$relativeSmall : (round($smallSize * $emSize) / $emSize) * 1em;
|
||||
$relativeMedium : (round($mediumSize * $emSize) / $emSize) * 1em;
|
||||
$relativeLarge : (round($largeSize * $emSize) / $emSize) * 1em;
|
||||
$relativeBig : (round($bigSize * $emSize) / $emSize) * 1em;
|
||||
$relativeHuge : (round($hugeSize * $emSize) / $emSize) * 1em;
|
||||
$relativeMassive : (round($massiveSize * $emSize) / $emSize) * 1em;
|
||||
|
||||
/* rem */
|
||||
$absoluteMini : (round($miniSize * $emSize) / $emSize) * 1rem;
|
||||
$absoluteTiny : (round($tinySize * $emSize) / $emSize) * 1rem;
|
||||
$absoluteSmall : (round($smallSize * $emSize) / $emSize) * 1rem;
|
||||
$absoluteMedium : (round($mediumSize * $emSize) / $emSize) * 1rem;
|
||||
$absoluteLarge : (round($largeSize * $emSize) / $emSize) * 1rem;
|
||||
$absoluteBig : (round($bigSize * $emSize) / $emSize) * 1rem;
|
||||
$absoluteHuge : (round($hugeSize * $emSize) / $emSize) * 1rem;
|
||||
$absoluteMassive : (round($massiveSize * $emSize) / $emSize) * 1rem;
|
||||
|
||||
|
||||
/*-------------------
|
||||
Loader
|
||||
--------------------*/
|
||||
|
||||
$loaderSize : $relativeBig;
|
||||
$loaderSpeed : 0.6s;
|
||||
$loaderLineWidth : 0.2em;
|
||||
$loaderFillColor : rgba(0, 0, 0, 0.1);
|
||||
$loaderLineColor : $grey;
|
||||
|
||||
$invertedLoaderFillColor : rgba(255, 255, 255, 0.15);
|
||||
$invertedLoaderLineColor : $white;
|
||||
|
||||
/*-------------------
|
||||
Grid
|
||||
--------------------*/
|
||||
|
||||
$columnCount: 16;
|
||||
|
||||
/*-------------------
|
||||
Transitions
|
||||
--------------------*/
|
||||
|
||||
$defaultDuration : 0.1s;
|
||||
$defaultEasing : ease;
|
||||
|
||||
/*-------------------
|
||||
Breakpoints
|
||||
--------------------*/
|
||||
|
||||
$mobileBreakpoint : 320px;
|
||||
$tabletBreakpoint : 768px;
|
||||
$computerBreakpoint : 992px;
|
||||
$largeMonitorBreakpoint : 1200px;
|
||||
$widescreenMonitorBreakpoint : 1920px;
|
||||
|
||||
|
||||
|
||||
/* Columns */
|
||||
$oneWide : (1 / $columnCount * 100%);
|
||||
$twoWide : (2 / $columnCount * 100%);
|
||||
$threeWide : (3 / $columnCount * 100%);
|
||||
$fourWide : (4 / $columnCount * 100%);
|
||||
$fiveWide : (5 / $columnCount * 100%);
|
||||
$sixWide : (6 / $columnCount * 100%);
|
||||
$sevenWide : (7 / $columnCount * 100%);
|
||||
$eightWide : (8 / $columnCount * 100%);
|
||||
$nineWide : (9 / $columnCount * 100%);
|
||||
$tenWide : (10 / $columnCount * 100%);
|
||||
$elevenWide : (11 / $columnCount * 100%);
|
||||
$twelveWide : (12 / $columnCount * 100%);
|
||||
$thirteenWide : (13 / $columnCount * 100%);
|
||||
$fourteenWide : (14 / $columnCount * 100%);
|
||||
$fifteenWide : (15 / $columnCount * 100%);
|
||||
$sixteenWide : (16 / $columnCount * 100%);
|
||||
|
||||
$oneColumn : (1 / 1 * 100%);
|
||||
$twoColumn : (1 / 2 * 100%);
|
||||
$threeColumn : (1 / 3 * 100%);
|
||||
$fourColumn : (1 / 4 * 100%);
|
||||
$fiveColumn : (1 / 5 * 100%);
|
||||
$sixColumn : (1 / 6 * 100%);
|
||||
$sevenColumn : (1 / 7 * 100%);
|
||||
$eightColumn : (1 / 8 * 100%);
|
||||
$nineColumn : (1 / 9 * 100%);
|
||||
$tenColumn : (1 / 10 * 100%);
|
||||
$elevenColumn : (1 / 11 * 100%);
|
||||
$twelveColumn : (1 / 12 * 100%);
|
||||
$thirteenColumn : (1 / 13 * 100%);
|
||||
$fourteenColumn : (1 / 14 * 100%);
|
||||
$fifteenColumn : (1 / 15 * 100%);
|
||||
$sixteenColumn : (1 / 16 * 100%);
|
||||
|
||||
|
||||
/*******************************
|
||||
Power-User
|
||||
*******************************/
|
||||
|
||||
|
||||
/*-------------------
|
||||
Emotive Colors
|
||||
--------------------*/
|
||||
|
||||
/* Positive */
|
||||
$positiveColor : $green;
|
||||
$positiveBackgroundColor : #FCFFF5;
|
||||
$positiveBorderColor : #A3C293;
|
||||
$positiveHeaderColor : #1A531B;
|
||||
$positiveTextColor : #2C662D;
|
||||
|
||||
/* Negative */
|
||||
$negativeColor : $red;
|
||||
$negativeBackgroundColor : #FFF6F6;
|
||||
$negativeBorderColor : #E0B4B4;
|
||||
$negativeHeaderColor : #912D2B;
|
||||
$negativeTextColor : #9F3A38;
|
||||
|
||||
/* Info */
|
||||
$infoColor : #31CCEC;
|
||||
$infoBackgroundColor : #F8FFFF;
|
||||
$infoBorderColor : #A9D5DE;
|
||||
$infoHeaderColor : #0E566C;
|
||||
$infoTextColor : #276F86;
|
||||
|
||||
/* Warning */
|
||||
$warningColor : #F2C037;
|
||||
$warningBorderColor : #C9BA9B;
|
||||
$warningBackgroundColor : #FFFAF3;
|
||||
$warningHeaderColor : #794B02;
|
||||
$warningTextColor : #573A08;
|
||||
|
||||
/*-------------------
|
||||
Paths
|
||||
--------------------*/
|
||||
|
||||
/* For source only. Modified in gulp for dist */
|
||||
$imagePath : '../../themes/default/assets/images';
|
||||
$fontPath : '../../themes/default/assets/fonts';
|
||||
|
||||
|
||||
/*-------------------
|
||||
Icons
|
||||
--------------------*/
|
||||
|
||||
/* Maximum Glyph Width of Icon */
|
||||
$iconWidth : 1.18em;
|
||||
|
||||
/*-------------------
|
||||
Neutral Text
|
||||
--------------------*/
|
||||
|
||||
$darkTextColor : rgba(0, 0, 0, 0.85);
|
||||
$mutedTextColor : rgba(0, 0, 0, 0.6);
|
||||
$lightTextColor : rgba(0, 0, 0, 0.4);
|
||||
|
||||
$unselectedTextColor : rgba(0, 0, 0, 0.4);
|
||||
$hoveredTextColor : rgba(0, 0, 0, 0.8);
|
||||
$pressedTextColor : rgba(0, 0, 0, 0.9);
|
||||
$selectedTextColor : rgba(0, 0, 0, 0.95);
|
||||
$disabledTextColor : rgba(0, 0, 0, 0.2);
|
||||
|
||||
$invertedTextColor : rgba(255, 255, 255, 0.9);
|
||||
$invertedMutedTextColor : rgba(255, 255, 255, 0.8);
|
||||
$invertedLightTextColor : rgba(255, 255, 255, 0.7);
|
||||
$invertedUnselectedTextColor : rgba(255, 255, 255, 0.5);
|
||||
$invertedHoveredTextColor : rgba(255, 255, 255, 1);
|
||||
$invertedPressedTextColor : rgba(255, 255, 255, 1);
|
||||
$invertedSelectedTextColor : rgba(255, 255, 255, 1);
|
||||
$invertedDisabledTextColor : rgba(255, 255, 255, 0.2);
|
||||
|
||||
/*-------------------
|
||||
Brand Colors
|
||||
--------------------*/
|
||||
|
||||
$facebookColor : #3B5998;
|
||||
$twitterColor : #55ACEE;
|
||||
$googlePlusColor : #DD4B39;
|
||||
$linkedInColor : #1F88BE;
|
||||
$youtubeColor : #CC181E;
|
||||
$pinterestColor : #BD081C;
|
||||
$vkColor : #4D7198;
|
||||
$instagramColor : #49769C;
|
||||
|
||||
/*-------------------
|
||||
Borders
|
||||
--------------------*/
|
||||
|
||||
$circularRadius : 500rem;
|
||||
|
||||
$borderColor : rgba(34, 36, 38, 0.15);
|
||||
$strongBorderColor : rgba(34, 36, 38, 0.22);
|
||||
$internalBorderColor : rgba(34, 36, 38, 0.1);
|
||||
$selectedBorderColor : rgba(34, 36, 38, 0.35);
|
||||
$strongSelectedBorderColor : rgba(34, 36, 38, 0.5);
|
||||
$disabledBorderColor : rgba(34, 36, 38, 0.5);
|
||||
|
||||
$solidInternalBorderColor : #FAFAFA;
|
||||
$solidBorderColor : #D4D4D5;
|
||||
$solidSelectedBorderColor : #BCBDBD;
|
||||
|
||||
$whiteBorderColor : rgba(255, 255, 255, 0.1);
|
||||
$selectedWhiteBorderColor : rgba(255, 255, 255, 0.8);
|
||||
|
||||
$solidWhiteBorderColor : #555555;
|
||||
$selectedSolidWhiteBorderColor : #999999;
|
||||
|
||||
/*-------------------
|
||||
Accents
|
||||
--------------------*/
|
||||
|
||||
/* Differentiating Neutrals */
|
||||
$subtleGradient: linear-gradient(transparent, $transparentBlack);
|
||||
|
||||
/* Differentiating Layers */
|
||||
$subtleShadow:
|
||||
0px 1px 2px 0 $borderColor
|
||||
;
|
||||
$floatingShadow:
|
||||
0px 2px 4px 0px rgba(34, 36, 38, 0.12),
|
||||
0px 2px 10px 0px rgba(34, 36, 38, 0.15)
|
||||
;
|
||||
|
||||
|
||||
/*-------------------
|
||||
Derived Values
|
||||
--------------------*/
|
||||
|
||||
/* Loaders Position Offset */
|
||||
$loaderOffset : -($loaderSize / 2);
|
||||
$loaderMargin : $loaderOffset 0em 0em $loaderOffset;
|
||||
|
||||
/* Rendered Scrollbar Width */
|
||||
$scrollbarWidth: 17px;
|
||||
|
||||
/* Maximum Single Character Glyph Width, aka Capital "W" */
|
||||
$glyphWidth: 1.1em;
|
||||
|
||||
/* Used to match floats with text */
|
||||
$lineHeightOffset : (($lineHeight - 1em) / 2);
|
||||
$headerLineHeightOffset : ($headerLineHeight - 1em) / 2;
|
||||
|
||||
/* Header Spacing */
|
||||
$headerTopMargin : calc(2rem - #{$headerLineHeightOffset});
|
||||
$headerBottomMargin : 1rem;
|
||||
$headerMargin : $headerTopMargin 0em $headerBottomMargin;
|
||||
|
||||
/* Minimum Mobile Width */
|
||||
$pageMinWidth : 320px;
|
||||
|
||||
/* Positive / Negative Dupes */
|
||||
$successBackgroundColor : $positiveBackgroundColor;
|
||||
$successColor : $positiveColor;
|
||||
$successBorderColor : $positiveBorderColor;
|
||||
$successHeaderColor : $positiveHeaderColor;
|
||||
$successTextColor : $positiveTextColor;
|
||||
|
||||
$errorBackgroundColor : $negativeBackgroundColor;
|
||||
$errorColor : $negativeColor;
|
||||
$errorBorderColor : $negativeBorderColor;
|
||||
$errorHeaderColor : $negativeHeaderColor;
|
||||
$errorTextColor : $negativeTextColor;
|
||||
|
||||
|
||||
/* Responsive */
|
||||
$largestMobileScreen : ($tabletBreakpoint - 1px);
|
||||
$largestTabletScreen : ($computerBreakpoint - 1px);
|
||||
$largestSmallMonitor : ($largeMonitorBreakpoint - 1px);
|
||||
$largestLargeMonitor : ($widescreenMonitorBreakpoint - 1px);
|
||||
|
||||
|
||||
|
||||
/*******************************
|
||||
States
|
||||
*******************************/
|
||||
|
||||
/*-------------------
|
||||
Disabled
|
||||
--------------------*/
|
||||
|
||||
$disabledOpacity: 0.45;
|
||||
$disabledTextColor: rgba(40, 40, 40, 0.3);
|
||||
$invertedDisabledTextColor: rgba(225, 225, 225, 0.3);
|
||||
|
||||
/*-------------------
|
||||
Hover
|
||||
--------------------*/
|
||||
|
||||
/*--- Shadows ---*/
|
||||
$floatingShadowHover:
|
||||
0px 2px 4px 0px rgba(34, 36, 38, 0.15),
|
||||
0px 2px 10px 0px rgba(34, 36, 38, 0.25)
|
||||
;
|
||||
|
||||
/*--- Colors ---*/
|
||||
$primaryColorHover : saturate(darken($primaryColor, 5), 10);
|
||||
$secondaryColorHover : saturate(lighten($secondaryColor, 5), 10);
|
||||
|
||||
$redHover : saturate(darken($red, 5), 10);
|
||||
$orangeHover : saturate(darken($orange, 5), 10);
|
||||
$yellowHover : saturate(darken($yellow, 5), 10);
|
||||
$oliveHover : saturate(darken($olive, 5), 10);
|
||||
$greenHover : saturate(darken($green, 5), 10);
|
||||
$tealHover : saturate(darken($teal, 5), 10);
|
||||
$blueHover : saturate(darken($blue, 5), 10);
|
||||
$violetHover : saturate(darken($violet, 5), 10);
|
||||
$purpleHover : saturate(darken($purple, 5), 10);
|
||||
$pinkHover : saturate(darken($pink, 5), 10);
|
||||
$brownHover : saturate(darken($brown, 5), 10);
|
||||
|
||||
$lightRedHover : saturate(darken($lightRed, 5), 10);
|
||||
$lightOrangeHover : saturate(darken($lightOrange, 5), 10);
|
||||
$lightYellowHover : saturate(darken($lightYellow, 5), 10);
|
||||
$lightOliveHover : saturate(darken($lightOlive, 5), 10);
|
||||
$lightGreenHover : saturate(darken($lightGreen, 5), 10);
|
||||
$lightTealHover : saturate(darken($lightTeal, 5), 10);
|
||||
$lightBlueHover : saturate(darken($lightBlue, 5), 10);
|
||||
$lightVioletHover : saturate(darken($lightViolet, 5), 10);
|
||||
$lightPurpleHover : saturate(darken($lightPurple, 5), 10);
|
||||
$lightPinkHover : saturate(darken($lightPink, 5), 10);
|
||||
$lightBrownHover : saturate(darken($lightBrown, 5), 10);
|
||||
$lightGreyHover : saturate(darken($lightGrey, 5), 10);
|
||||
$lightBlackHover : saturate(darken($fullBlack, 5), 10);
|
||||
|
||||
/*--- Emotive ---*/
|
||||
$positiveColorHover : saturate(darken($positiveColor, 5), 10);
|
||||
$negativeColorHover : saturate(darken($negativeColor, 5), 10);
|
||||
|
||||
/*--- Brand ---*/
|
||||
$facebookHoverColor : saturate(darken($facebookColor, 5), 10);
|
||||
$twitterHoverColor : saturate(darken($twitterColor, 5), 10);
|
||||
$googlePlusHoverColor : saturate(darken($googlePlusColor, 5), 10);
|
||||
$linkedInHoverColor : saturate(darken($linkedInColor, 5), 10);
|
||||
$youtubeHoverColor : saturate(darken($youtubeColor, 5), 10);
|
||||
$instagramHoverColor : saturate(darken($instagramColor, 5), 10);
|
||||
$pinterestHoverColor : saturate(darken($pinterestColor, 5), 10);
|
||||
$vkHoverColor : saturate(darken($vkColor, 5), 10);
|
||||
|
||||
/*--- Dark Tones ---*/
|
||||
$fullBlackHover : lighten($fullBlack, 5);
|
||||
$blackHover : lighten($black, 5);
|
||||
$greyHover : lighten($grey, 5);
|
||||
|
||||
/*--- Light Tones ---*/
|
||||
$whiteHover : darken($white, 5);
|
||||
$offWhiteHover : darken($offWhite, 5);
|
||||
$darkWhiteHover : darken($darkWhite, 5);
|
||||
|
||||
/*-------------------
|
||||
Focus
|
||||
--------------------*/
|
||||
|
||||
/*--- Colors ---*/
|
||||
$primaryColorFocus : saturate(darken($primaryColor, 8), 20);
|
||||
$secondaryColorFocus : saturate(lighten($secondaryColor, 8), 20);
|
||||
|
||||
$redFocus : saturate(darken($red, 8), 20);
|
||||
$orangeFocus : saturate(darken($orange, 8), 20);
|
||||
$yellowFocus : saturate(darken($yellow, 8), 20);
|
||||
$oliveFocus : saturate(darken($olive, 8), 20);
|
||||
$greenFocus : saturate(darken($green, 8), 20);
|
||||
$tealFocus : saturate(darken($teal, 8), 20);
|
||||
$blueFocus : saturate(darken($blue, 8), 20);
|
||||
$violetFocus : saturate(darken($violet, 8), 20);
|
||||
$purpleFocus : saturate(darken($purple, 8), 20);
|
||||
$pinkFocus : saturate(darken($pink, 8), 20);
|
||||
$brownFocus : saturate(darken($brown, 8), 20);
|
||||
|
||||
$lightRedFocus : saturate(darken($lightRed, 8), 20);
|
||||
$lightOrangeFocus : saturate(darken($lightOrange, 8), 20);
|
||||
$lightYellowFocus : saturate(darken($lightYellow, 8), 20);
|
||||
$lightOliveFocus : saturate(darken($lightOlive, 8), 20);
|
||||
$lightGreenFocus : saturate(darken($lightGreen, 8), 20);
|
||||
$lightTealFocus : saturate(darken($lightTeal, 8), 20);
|
||||
$lightBlueFocus : saturate(darken($lightBlue, 8), 20);
|
||||
$lightVioletFocus : saturate(darken($lightViolet, 8), 20);
|
||||
$lightPurpleFocus : saturate(darken($lightPurple, 8), 20);
|
||||
$lightPinkFocus : saturate(darken($lightPink, 8), 20);
|
||||
$lightBrownFocus : saturate(darken($lightBrown, 8), 20);
|
||||
$lightGreyFocus : saturate(darken($lightGrey, 8), 20);
|
||||
$lightBlackFocus : saturate(darken($fullBlack, 8), 20);
|
||||
|
||||
/*--- Emotive ---*/
|
||||
$positiveColorFocus : saturate(darken($positiveColor, 8), 20);
|
||||
$negativeColorFocus : saturate(darken($negativeColor, 8), 20);
|
||||
|
||||
/*--- Brand ---*/
|
||||
$facebookFocusColor : saturate(darken($facebookColor, 8), 20);
|
||||
$twitterFocusColor : saturate(darken($twitterColor, 8), 20);
|
||||
$googlePlusFocusColor : saturate(darken($googlePlusColor, 8), 20);
|
||||
$linkedInFocusColor : saturate(darken($linkedInColor, 8), 20);
|
||||
$youtubeFocusColor : saturate(darken($youtubeColor, 8), 20);
|
||||
$instagramFocusColor : saturate(darken($instagramColor, 8), 20);
|
||||
$pinterestFocusColor : saturate(darken($pinterestColor, 8), 20);
|
||||
$vkFocusColor : saturate(darken($vkColor, 8), 20);
|
||||
|
||||
/*--- Dark Tones ---*/
|
||||
$fullBlackFocus : lighten($fullBlack, 8);
|
||||
$blackFocus : lighten($black, 8);
|
||||
$greyFocus : lighten($grey, 8);
|
||||
|
||||
/*--- Light Tones ---*/
|
||||
$whiteFocus : darken($white, 8);
|
||||
$offWhiteFocus : darken($offWhite, 8);
|
||||
$darkWhiteFocus : darken($darkWhite, 8);
|
||||
|
||||
|
||||
/*-------------------
|
||||
Down (:active)
|
||||
--------------------*/
|
||||
|
||||
/*--- Colors ---*/
|
||||
$primaryColorDown : darken($primaryColor, 10);
|
||||
$secondaryColorDown : lighten($secondaryColor, 10);
|
||||
|
||||
$redDown : darken($red, 10);
|
||||
$orangeDown : darken($orange, 10);
|
||||
$yellowDown : darken($yellow, 10);
|
||||
$oliveDown : darken($olive, 10);
|
||||
$greenDown : darken($green, 10);
|
||||
$tealDown : darken($teal, 10);
|
||||
$blueDown : darken($blue, 10);
|
||||
$violetDown : darken($violet, 10);
|
||||
$purpleDown : darken($purple, 10);
|
||||
$pinkDown : darken($pink, 10);
|
||||
$brownDown : darken($brown, 10);
|
||||
|
||||
$lightRedDown : darken($lightRed, 10);
|
||||
$lightOrangeDown : darken($lightOrange, 10);
|
||||
$lightYellowDown : darken($lightYellow, 10);
|
||||
$lightOliveDown : darken($lightOlive, 10);
|
||||
$lightGreenDown : darken($lightGreen, 10);
|
||||
$lightTealDown : darken($lightTeal, 10);
|
||||
$lightBlueDown : darken($lightBlue, 10);
|
||||
$lightVioletDown : darken($lightViolet, 10);
|
||||
$lightPurpleDown : darken($lightPurple, 10);
|
||||
$lightPinkDown : darken($lightPink, 10);
|
||||
$lightBrownDown : darken($lightBrown, 10);
|
||||
$lightGreyDown : darken($lightGrey, 10);
|
||||
$lightBlackDown : darken($fullBlack, 10);
|
||||
|
||||
/*--- Emotive ---*/
|
||||
$positiveColorDown : darken($positiveColor, 10);
|
||||
$negativeColorDown : darken($negativeColor, 10);
|
||||
|
||||
/*--- Brand ---*/
|
||||
$facebookDownColor : darken($facebookColor, 10);
|
||||
$twitterDownColor : darken($twitterColor, 10);
|
||||
$googlePlusDownColor : darken($googlePlusColor, 10);
|
||||
$linkedInDownColor : darken($linkedInColor, 10);
|
||||
$youtubeDownColor : darken($youtubeColor, 10);
|
||||
$instagramDownColor : darken($instagramColor, 10);
|
||||
$pinterestDownColor : darken($pinterestColor, 10);
|
||||
$vkDownColor : darken($vkColor, 10);
|
||||
|
||||
/*--- Dark Tones ---*/
|
||||
$fullBlackDown : lighten($fullBlack, 10);
|
||||
$blackDown : lighten($black, 10);
|
||||
$greyDown : lighten($grey, 10);
|
||||
|
||||
/*--- Light Tones ---*/
|
||||
$whiteDown : darken($white, 10);
|
||||
$offWhiteDown : darken($offWhite, 10);
|
||||
$darkWhiteDown : darken($darkWhite, 10);
|
||||
|
||||
|
||||
/*-------------------
|
||||
Active
|
||||
--------------------*/
|
||||
|
||||
/*--- Colors ---*/
|
||||
$primaryColorActive : saturate(darken($primaryColor, 5), 15);
|
||||
$secondaryColorActive : saturate(lighten($secondaryColor, 5), 15);
|
||||
|
||||
$redActive : saturate(darken($red, 5), 15);
|
||||
$orangeActive : saturate(darken($orange, 5), 15);
|
||||
$yellowActive : saturate(darken($yellow, 5), 15);
|
||||
$oliveActive : saturate(darken($olive, 5), 15);
|
||||
$greenActive : saturate(darken($green, 5), 15);
|
||||
$tealActive : saturate(darken($teal, 5), 15);
|
||||
$blueActive : saturate(darken($blue, 5), 15);
|
||||
$violetActive : saturate(darken($violet, 5), 15);
|
||||
$purpleActive : saturate(darken($purple, 5), 15);
|
||||
$pinkActive : saturate(darken($pink, 5), 15);
|
||||
$brownActive : saturate(darken($brown, 5), 15);
|
||||
|
||||
$lightRedActive : saturate(darken($lightRed, 5), 15);
|
||||
$lightOrangeActive : saturate(darken($lightOrange, 5), 15);
|
||||
$lightYellowActive : saturate(darken($lightYellow, 5), 15);
|
||||
$lightOliveActive : saturate(darken($lightOlive, 5), 15);
|
||||
$lightGreenActive : saturate(darken($lightGreen, 5), 15);
|
||||
$lightTealActive : saturate(darken($lightTeal, 5), 15);
|
||||
$lightBlueActive : saturate(darken($lightBlue, 5), 15);
|
||||
$lightVioletActive : saturate(darken($lightViolet, 5), 15);
|
||||
$lightPurpleActive : saturate(darken($lightPurple, 5), 15);
|
||||
$lightPinkActive : saturate(darken($lightPink, 5), 15);
|
||||
$lightBrownActive : saturate(darken($lightBrown, 5), 15);
|
||||
$lightGreyActive : saturate(darken($lightGrey, 5), 15);
|
||||
$lightBlackActive : saturate(darken($fullBlack, 5), 15);
|
||||
|
||||
/*--- Emotive ---*/
|
||||
$positiveColorActive : saturate(darken($positiveColor, 5), 15);
|
||||
$negativeColorActive : saturate(darken($negativeColor, 5), 15);
|
||||
|
||||
/*--- Brand ---*/
|
||||
$facebookActiveColor : saturate(darken($facebookColor, 5), 15);
|
||||
$twitterActiveColor : saturate(darken($twitterColor, 5), 15);
|
||||
$googlePlusActiveColor : saturate(darken($googlePlusColor, 5), 15);
|
||||
$linkedInActiveColor : saturate(darken($linkedInColor, 5), 15);
|
||||
$youtubeActiveColor : saturate(darken($youtubeColor, 5), 15);
|
||||
$instagramActiveColor : saturate(darken($instagramColor, 5), 15);
|
||||
$pinterestActiveColor : saturate(darken($pinterestColor, 5), 15);
|
||||
$vkActiveColor : saturate(darken($vkColor, 5), 15);
|
||||
|
||||
/*--- Dark Tones ---*/
|
||||
$fullBlackActive : darken($fullBlack, 5);
|
||||
$blackActive : darken($black, 5);
|
||||
$greyActive : darken($grey, 5);
|
||||
|
||||
/*--- Light Tones ---*/
|
||||
$whiteActive : darken($white, 5);
|
||||
$offWhiteActive : darken($offWhite, 5);
|
||||
$darkWhiteActive : darken($darkWhite, 5);
|
||||
248
js/tabulator/src/scss/semantic-ui/variables_table.scss
Normal file
248
js/tabulator/src/scss/semantic-ui/variables_table.scss
Normal file
@ -0,0 +1,248 @@
|
||||
@import "variables.scss";
|
||||
|
||||
/*******************************
|
||||
Table
|
||||
*******************************/
|
||||
|
||||
/*-------------------
|
||||
Element
|
||||
--------------------*/
|
||||
|
||||
$verticalMargin: 1em;
|
||||
$horizontalMargin: 0em;
|
||||
$margin: $verticalMargin $horizontalMargin;
|
||||
$borderCollapse: separate;
|
||||
$borderSpacing: 0px;
|
||||
$borderRadius: $defaultBorderRadius;
|
||||
$transition:
|
||||
background $defaultDuration $defaultEasing,
|
||||
color $defaultDuration $defaultEasing
|
||||
;
|
||||
$background: $white;
|
||||
$color: $textColor;
|
||||
$borderWidth: 1px;
|
||||
$border: $borderWidth solid $borderColor;
|
||||
$boxShadow: none;
|
||||
$textAlign: left;
|
||||
|
||||
/*--------------
|
||||
Parts
|
||||
---------------*/
|
||||
|
||||
/* Table Row */
|
||||
$rowBorder: 1px solid $internalBorderColor;
|
||||
|
||||
/* Table Cell */
|
||||
$cellVerticalPadding: $relativeMini;
|
||||
$cellHorizontalPadding: $relativeMini;
|
||||
$cellVerticalAlign: inherit;
|
||||
$cellTextAlign: inherit;
|
||||
$cellBorder: 1px solid $internalBorderColor;
|
||||
|
||||
/* Table Header */
|
||||
$headerBorder: 1px solid $internalBorderColor;
|
||||
$headerDivider: none;
|
||||
$headerBackground: $offWhite;
|
||||
$headerAlign: inherit;
|
||||
$headerVerticalAlign: inherit;
|
||||
$headerColor: $textColor;
|
||||
$headerVerticalPadding: $relativeSmall;
|
||||
$headerHorizontalPadding: $cellHorizontalPadding;
|
||||
$headerFontStyle: none;
|
||||
$headerFontWeight: bold;
|
||||
$headerTextTransform: none;
|
||||
$headerBoxShadow: none;
|
||||
|
||||
/* Table Footer */
|
||||
$footerBoxShadow: none;
|
||||
$footerBorder: 1px solid $borderColor;
|
||||
$footerDivider: none;
|
||||
$footerBackground: $offWhite;
|
||||
$footerAlign: inherit;
|
||||
$footerVerticalAlign: middle;
|
||||
$footerColor: $textColor;
|
||||
$footerVerticalPadding: $cellVerticalPadding;
|
||||
$footerHorizontalPadding: $cellHorizontalPadding;
|
||||
$footerFontStyle: normal;
|
||||
$footerFontWeight: normal;
|
||||
$footerTextTransform: none;
|
||||
|
||||
/* Responsive Size */
|
||||
$responsiveHeaderDisplay: block;
|
||||
$responsiveFooterDisplay: block;
|
||||
$responsiveRowVerticalPadding: 1em;
|
||||
$responsiveRowBoxShadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1) inset !important;
|
||||
$responsiveCellVerticalPadding: 0.25em;
|
||||
$responsiveCellHorizontalPadding: 0.75em;
|
||||
$responsiveCellBoxShadow: none !important;
|
||||
|
||||
/*-------------------
|
||||
Types
|
||||
--------------------*/
|
||||
|
||||
/* Definition */
|
||||
$definitionPageBackground: $white;
|
||||
|
||||
$definitionHeaderBackground: transparent;
|
||||
$definitionHeaderColor: $unselectedTextColor;
|
||||
$definitionHeaderFontWeight: normal;
|
||||
|
||||
$definitionFooterBackground: $definitionHeaderBackground;
|
||||
$definitionFooterColor: $definitionHeaderColor;
|
||||
$definitionFooterFontWeight: $definitionHeaderFontWeight;
|
||||
|
||||
$definitionColumnBackground: $subtleTransparentBlack;
|
||||
$definitionColumnFontWeight: bold;
|
||||
$definitionColumnColor: $selectedTextColor;
|
||||
$definitionColumnFontSize: $relativeMedium;
|
||||
$definitionColumnTextTransform: '';
|
||||
$definitionColumnBoxShadow: '';
|
||||
$definitionColumnTextAlign: '';
|
||||
$definitionColumnHorizontalPadding: '';
|
||||
|
||||
|
||||
/*--------------
|
||||
Couplings
|
||||
---------------*/
|
||||
|
||||
$iconVerticalAlign: baseline;
|
||||
|
||||
/*--------------
|
||||
States
|
||||
---------------*/
|
||||
|
||||
$stateMarkerWidth: 0px;
|
||||
|
||||
/* Positive */
|
||||
$positiveColor: $positiveTextColor;
|
||||
$positiveBoxShadow: $stateMarkerWidth 0px 0px $positiveBorderColor inset;
|
||||
$positiveBackgroundHover: darken($positiveBackgroundColor, 3);
|
||||
$positiveColorHover: darken($positiveColor, 3);
|
||||
|
||||
/* Negative */
|
||||
$negativeColor: $negativeTextColor;
|
||||
$negativeBoxShadow: $stateMarkerWidth 0px 0px $negativeBorderColor inset;
|
||||
$negativeBackgroundHover: darken($negativeBackgroundColor, 3);
|
||||
$negativeColorHover: darken($negativeColor, 3);
|
||||
|
||||
/* Error */
|
||||
$errorColor: $errorTextColor;
|
||||
$errorBoxShadow: $stateMarkerWidth 0px 0px $errorBorderColor inset;
|
||||
$errorBackgroundHover: darken($errorBackgroundColor, 3);
|
||||
$errorColorHover: darken($errorColor, 3);
|
||||
|
||||
/* Warning */
|
||||
$warningColor: $warningTextColor;
|
||||
$warningBoxShadow: $stateMarkerWidth 0px 0px $warningBorderColor inset;
|
||||
$warningBackgroundHover: darken($warningBackgroundColor, 3);
|
||||
$warningColorHover: darken($warningColor, 3);
|
||||
|
||||
/* Active */
|
||||
$activeColor: $textColor;
|
||||
$activeBackgroundColor: #E0E0E0;
|
||||
$activeBoxShadow: $stateMarkerWidth 0px 0px $activeColor inset;
|
||||
|
||||
$activeBackgroundHover: #EFEFEF;
|
||||
$activeColorHover: $selectedTextColor;
|
||||
|
||||
/*--------------
|
||||
Types
|
||||
---------------*/
|
||||
|
||||
/* Attached */
|
||||
$attachedTopOffset: 0px;
|
||||
$attachedBottomOffset: 0px;
|
||||
$attachedHorizontalOffset: -$borderWidth;
|
||||
$attachedWidth: calc(100% + #{$attachedHorizontalOffset * -2});
|
||||
$attachedBoxShadow: none;
|
||||
$attachedBorder: $borderWidth solid $solidBorderColor;
|
||||
$attachedBottomBoxShadow:
|
||||
$boxShadow,
|
||||
$attachedBoxShadow
|
||||
;
|
||||
|
||||
/* Striped */
|
||||
$stripedBackground: rgba(0, 0, 50, 0.02);
|
||||
$invertedStripedBackground: rgba(255, 255, 255, 0.05);
|
||||
|
||||
/* Selectable */
|
||||
$selectableBackground: $transparentBlack;
|
||||
$selectableTextColor: $selectedTextColor;
|
||||
$selectableInvertedBackground: $transparentWhite;
|
||||
$selectableInvertedTextColor: $invertedSelectedTextColor;
|
||||
|
||||
/* Sortable */
|
||||
$sortableBackground: '';
|
||||
$sortableColor: $textColor;
|
||||
|
||||
$sortableBorder: 1px solid $borderColor;
|
||||
$sortableIconWidth: auto;
|
||||
$sortableIconDistance: 0.5em;
|
||||
$sortableIconOpacity: 0.8;
|
||||
$sortableIconFont: 'Icons';
|
||||
$sortableIconAscending: '\f0d8';
|
||||
$sortableIconDescending: '\f0d7';
|
||||
$sortableDisabledColor: $disabledTextColor;
|
||||
|
||||
$sortableHoverBackground: $transparentBlack;
|
||||
$sortableHoverColor: $hoveredTextColor;
|
||||
|
||||
$sortableActiveBackground: $transparentBlack;
|
||||
$sortableActiveColor: $selectedTextColor;
|
||||
|
||||
$sortableActiveHoverBackground: $transparentBlack;
|
||||
$sortableActiveHoverColor: $selectedTextColor;
|
||||
|
||||
$sortableInvertedBorderColor: transparent;
|
||||
$sortableInvertedHoverBackground: $transparentWhite $subtleGradient;
|
||||
$sortableInvertedHoverColor: $invertedHoveredTextColor;
|
||||
$sortableInvertedActiveBackground: $strongTransparentWhite $subtleGradient;
|
||||
$sortableInvertedActiveColor: $invertedSelectedTextColor;
|
||||
|
||||
/* Colors */
|
||||
$coloredBorderSize: 0.2em;
|
||||
$coloredBorderRadius: 0em 0em $borderRadius $borderRadius;
|
||||
|
||||
/* Inverted */
|
||||
$invertedBackground: #333333;
|
||||
$invertedBorder: none;
|
||||
$invertedCellBorderColor: $whiteBorderColor;
|
||||
$invertedCellColor: $invertedTextColor;
|
||||
|
||||
$invertedHeaderBackground: $veryStrongTransparentBlack;
|
||||
$invertedHeaderColor: $invertedTextColor;
|
||||
$invertedHeaderBorderColor: $invertedCellBorderColor;
|
||||
|
||||
$invertedDefinitionColumnBackground: $subtleTransparentWhite;
|
||||
$invertedDefinitionColumnColor: $invertedSelectedTextColor;
|
||||
$invertedDefinitionColumnFontWeight: bold;
|
||||
|
||||
/* Basic */
|
||||
$basicTableBackground: transparent;
|
||||
$basicTableBorder: $borderWidth solid $borderColor;
|
||||
$basicBoxShadow: none;
|
||||
|
||||
$basicTableHeaderBackground: transparent;
|
||||
$basicTableCellBackground: transparent;
|
||||
$basicTableHeaderDivider: none;
|
||||
$basicTableCellBorder: 1px solid rgba(0, 0, 0, 0.1);
|
||||
$basicTableCellPadding: '';
|
||||
$basicTableStripedBackground: $transparentBlack;
|
||||
|
||||
/* Padded */
|
||||
$paddedVerticalPadding: 1em;
|
||||
$paddedHorizontalPadding: 1em;
|
||||
$veryPaddedVerticalPadding: 1.5em;
|
||||
$veryPaddedHorizontalPadding: 1.5em;
|
||||
|
||||
/* Compact */
|
||||
$compactVerticalPadding: 0.5em;
|
||||
$compactHorizontalPadding: 0.7em;
|
||||
$veryCompactVerticalPadding: 0.4em;
|
||||
$veryCompactHorizontalPadding: 0.6em;
|
||||
|
||||
|
||||
/* Sizes */
|
||||
$small: 0.9em;
|
||||
$medium: 1em;
|
||||
$large: 1.1em;
|
||||
686
js/tabulator/src/scss/tabulator.scss
Normal file
686
js/tabulator/src/scss/tabulator.scss
Normal file
@ -0,0 +1,686 @@
|
||||
|
||||
//Main Theme Variables
|
||||
$backgroundColor: #888; //background color of tabulator
|
||||
$borderColor:#999; //border to tablulator
|
||||
$textSize:14px; //table text size
|
||||
|
||||
//header themeing
|
||||
$headerBackgroundColor:#e6e6e6; //border to tablulator
|
||||
$headerTextColor:#555; //header text colour
|
||||
$headerBorderColor:#aaa; //header border color
|
||||
$headerSeperatorColor:#999; //header bottom seperator color
|
||||
$headerMargin:4px; //padding round header
|
||||
|
||||
//column header arrows
|
||||
$sortArrowActive: #666;
|
||||
$sortArrowInactive: #bbb;
|
||||
|
||||
//row themeing
|
||||
$rowBackgroundColor:#fff; //table row background color
|
||||
$rowAltBackgroundColor:#EFEFEF; //table row background color
|
||||
$rowBorderColor:#aaa; //table border color
|
||||
$rowTextColor:#333; //table text color
|
||||
$rowHoverBackground:#bbb; //row background color on hover
|
||||
|
||||
$rowSelectedBackground: #9ABCEA; //row background color when selected
|
||||
$rowSelectedBackgroundHover: #769BCC;//row background color when selected and hovered
|
||||
|
||||
$editBoxColor:#1D68CD; //border color for edit boxes
|
||||
$errorColor:#dd0000; //error indication
|
||||
|
||||
//footer themeing
|
||||
$footerBackgroundColor:#e6e6e6; //border to tablulator
|
||||
$footerTextColor:#555; //footer text colour
|
||||
$footerBorderColor:#aaa; //footer border color
|
||||
$footerSeperatorColor:#999; //footer bottom seperator color
|
||||
|
||||
|
||||
|
||||
//Tabulator Containing Element
|
||||
.tabulator{
|
||||
position: relative;
|
||||
|
||||
border: 1px solid $borderColor;
|
||||
|
||||
background-color: $backgroundColor;
|
||||
|
||||
font-size:$textSize;
|
||||
text-align: left;
|
||||
overflow:hidden;
|
||||
|
||||
-webkit-transform: translatez(0);
|
||||
-moz-transform: translatez(0);
|
||||
-ms-transform: translatez(0);
|
||||
-o-transform: translatez(0);
|
||||
transform: translatez(0);
|
||||
|
||||
&[tabulator-layout="fitDataFill"]{
|
||||
.tabulator-tableHolder{
|
||||
.tabulator-table{
|
||||
min-width:100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.tabulator-block-select{
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
//column header containing element
|
||||
.tabulator-header{
|
||||
position:relative;
|
||||
box-sizing: border-box;
|
||||
|
||||
width:100%;
|
||||
|
||||
border-bottom:1px solid $headerSeperatorColor;
|
||||
background-color: $headerBackgroundColor;
|
||||
color: $headerTextColor;
|
||||
font-weight:bold;
|
||||
|
||||
white-space: nowrap;
|
||||
overflow:hidden;
|
||||
|
||||
-moz-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-o-user-select: none;
|
||||
|
||||
//individual column header element
|
||||
.tabulator-col{
|
||||
display:inline-block;
|
||||
position:relative;
|
||||
box-sizing:border-box;
|
||||
border-right:1px solid $headerBorderColor;
|
||||
background:$headerBackgroundColor;
|
||||
text-align:left;
|
||||
vertical-align: bottom;
|
||||
overflow: hidden;
|
||||
|
||||
&.tabulator-moving{
|
||||
position: absolute;
|
||||
border:1px solid $headerSeperatorColor;
|
||||
background:darken($headerBackgroundColor, 10%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
//hold content of column header
|
||||
.tabulator-col-content{
|
||||
position: relative;
|
||||
padding:4px;
|
||||
|
||||
//hold title of column header
|
||||
.tabulator-col-title{
|
||||
box-sizing:border-box;
|
||||
width: 100%;
|
||||
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
vertical-align:bottom;
|
||||
|
||||
//element to hold title editor
|
||||
.tabulator-title-editor{
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
|
||||
border:1px solid #999;
|
||||
|
||||
padding:1px;
|
||||
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
//column sorter arrow
|
||||
.tabulator-arrow{
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top:9px;
|
||||
right:8px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 6px solid transparent;
|
||||
border-right: 6px solid transparent;
|
||||
border-bottom: 6px solid $sortArrowInactive;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
//complex header column group
|
||||
&.tabulator-col-group{
|
||||
|
||||
//gelement to hold sub columns in column group
|
||||
.tabulator-col-group-cols{
|
||||
position:relative;
|
||||
display: flex;
|
||||
|
||||
border-top:1px solid $headerBorderColor;
|
||||
overflow: hidden;
|
||||
|
||||
.tabulator-col:last-child{
|
||||
margin-right:-1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//hide left resize handle on first column
|
||||
&:first-child{
|
||||
.tabulator-col-resize-handle.prev{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
//placeholder element for sortable columns
|
||||
&.ui-sortable-helper{
|
||||
position: absolute;
|
||||
background-color: $headerBackgroundColor !important;
|
||||
border:1px solid $headerBorderColor;
|
||||
}
|
||||
|
||||
//header filter containing element
|
||||
.tabulator-header-filter{
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
margin-top:2px;
|
||||
width:100%;
|
||||
text-align: center;
|
||||
|
||||
//styling adjustment for inbuilt editors
|
||||
textarea{
|
||||
height:auto !important;
|
||||
}
|
||||
|
||||
svg{
|
||||
margin-top: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
//styling child elements for sortable columns
|
||||
&.tabulator-sortable{
|
||||
.tabulator-col-title{
|
||||
padding-right:25px;
|
||||
}
|
||||
|
||||
&:hover{
|
||||
cursor:pointer;
|
||||
background-color:darken($headerBackgroundColor, 10%);
|
||||
}
|
||||
|
||||
&[aria-sort="none"]{
|
||||
.tabulator-col-content .tabulator-arrow{
|
||||
border-top: none;
|
||||
border-bottom: 6px solid $sortArrowInactive;
|
||||
}
|
||||
}
|
||||
|
||||
&[aria-sort="asc"]{
|
||||
.tabulator-col-content .tabulator-arrow{
|
||||
border-top: none;
|
||||
border-bottom: 6px solid $sortArrowActive;
|
||||
}
|
||||
}
|
||||
|
||||
&[aria-sort="desc"]{
|
||||
.tabulator-col-content .tabulator-arrow{
|
||||
border-top: 6px solid $sortArrowActive;
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.tabulator-frozen{
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
|
||||
// background-color: inherit;
|
||||
|
||||
z-index: 10;
|
||||
|
||||
&.tabulator-frozen-left{
|
||||
border-right:2px solid $rowBorderColor;
|
||||
}
|
||||
|
||||
&.tabulator-frozen-right{
|
||||
border-left:2px solid $rowBorderColor;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.tabulator-calcs-holder{
|
||||
box-sizing:border-box;
|
||||
min-width:200%;
|
||||
|
||||
background:lighten($headerBackgroundColor, 5%) !important;
|
||||
|
||||
.tabulator-row{
|
||||
background:lighten($headerBackgroundColor, 5%) !important;
|
||||
|
||||
.tabulator-col-resize-handle{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
border-top:1px solid $rowBorderColor;
|
||||
border-bottom:1px solid $headerBorderColor;
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
//scrolling element to hold table
|
||||
.tabulator-tableHolder{
|
||||
position:relative;
|
||||
width:100%;
|
||||
white-space: nowrap;
|
||||
overflow:auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
&:focus{
|
||||
outline: none;
|
||||
}
|
||||
|
||||
//default placeholder element
|
||||
.tabulator-placeholder{
|
||||
position: absolute;
|
||||
box-sizing:border-box;
|
||||
display: flex;
|
||||
align-items:center;
|
||||
|
||||
top:0;
|
||||
left:0;
|
||||
height:100%;
|
||||
width:100%;
|
||||
|
||||
span{
|
||||
display: inline-block;
|
||||
|
||||
margin:0 auto;
|
||||
padding:10px;
|
||||
|
||||
color:#ccc;
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
//element to hold table rows
|
||||
.tabulator-table{
|
||||
position:relative;
|
||||
display:inline-block;
|
||||
background-color:$rowBackgroundColor;
|
||||
white-space: nowrap;
|
||||
overflow:visible;
|
||||
color:$rowTextColor;
|
||||
|
||||
//row element
|
||||
.tabulator-row{
|
||||
&.tabulator-calcs{
|
||||
font-weight: bold;
|
||||
background:darken($rowAltBackgroundColor, 5%) !important;
|
||||
|
||||
&.tabulator-calcs-top{
|
||||
border-bottom:2px solid $rowBorderColor;
|
||||
}
|
||||
|
||||
&.tabulator-calcs-bottom{
|
||||
border-top:2px solid $rowBorderColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
//row element
|
||||
.tabulator-row{
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
min-height:$textSize + ($headerMargin * 2);
|
||||
background-color: $rowBackgroundColor;
|
||||
|
||||
|
||||
&.tabulator-row-even{
|
||||
background-color: $rowAltBackgroundColor;
|
||||
}
|
||||
|
||||
&.tabulator-selectable:hover{
|
||||
background-color:$rowHoverBackground;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.tabulator-selected{
|
||||
background-color:$rowSelectedBackground;
|
||||
}
|
||||
|
||||
&.tabulator-selected:hover{
|
||||
background-color:$rowSelectedBackgroundHover;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.tabulator-row-moving{
|
||||
border:1px solid #000;
|
||||
background:#fff;
|
||||
}
|
||||
|
||||
&.tabulator-moving{
|
||||
position: absolute;
|
||||
|
||||
border-top:1px solid $rowBorderColor;
|
||||
border-bottom:1px solid $rowBorderColor;
|
||||
|
||||
pointer-events: none;
|
||||
z-index:15;
|
||||
}
|
||||
|
||||
.tabulator-frozen{
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
|
||||
background-color: inherit;
|
||||
|
||||
z-index: 10;
|
||||
|
||||
&.tabulator-frozen-left{
|
||||
border-right:2px solid $rowBorderColor;
|
||||
}
|
||||
|
||||
&.tabulator-frozen-right{
|
||||
border-left:2px solid $rowBorderColor;
|
||||
}
|
||||
}
|
||||
|
||||
//cell element
|
||||
.tabulator-cell{
|
||||
display:inline-block;
|
||||
position: relative;
|
||||
box-sizing:border-box;
|
||||
padding:4px;
|
||||
border-right:1px solid $rowBorderColor;
|
||||
vertical-align:middle;
|
||||
white-space:nowrap;
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
|
||||
|
||||
&.tabulator-editing{
|
||||
border:1px solid $editBoxColor;
|
||||
padding: 0;
|
||||
|
||||
input, select{
|
||||
border:1px;
|
||||
background:transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&.tabulator-validation-fail{
|
||||
border:1px solid $errorColor;
|
||||
input, select{
|
||||
border:1px;
|
||||
background:transparent;
|
||||
|
||||
color: $errorColor;
|
||||
}
|
||||
}
|
||||
|
||||
//hide left resize handle on first column
|
||||
&:first-child{
|
||||
.tabulator-col-resize-handle.prev{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
//movable row handle
|
||||
&.tabulator-row-handle{
|
||||
|
||||
display: inline-flex;
|
||||
align-items:center;
|
||||
|
||||
-moz-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-o-user-select: none;
|
||||
|
||||
//handle holder
|
||||
.tabulator-row-handle-box{
|
||||
width:80%;
|
||||
|
||||
//Hamburger element
|
||||
.tabulator-row-handle-bar{
|
||||
width:100%;
|
||||
height:3px;
|
||||
margin:2px 10% 0 10%;
|
||||
background:#666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//row grouping element
|
||||
&.tabulator-group{
|
||||
box-sizing:border-box;
|
||||
border-bottom:1px solid #999;
|
||||
border-right:1px solid $rowBorderColor;
|
||||
border-top:1px solid #999;
|
||||
padding:5px;
|
||||
padding-left:10px;
|
||||
background:#ccc;
|
||||
font-weight:bold;
|
||||
|
||||
min-width: 100%;
|
||||
|
||||
&:hover{
|
||||
cursor:pointer;
|
||||
background-color:rgba(0,0,0,.1);
|
||||
}
|
||||
|
||||
&.tabulator-group-visible{
|
||||
|
||||
.tabulator-arrow{
|
||||
margin-right:10px;
|
||||
border-left: 6px solid transparent;
|
||||
border-right: 6px solid transparent;
|
||||
border-top: 6px solid $sortArrowActive;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.tabulator-group-level-1{
|
||||
.tabulator-arrow{
|
||||
margin-left:20px;
|
||||
}
|
||||
}
|
||||
|
||||
&.tabulator-group-level-2{
|
||||
.tabulator-arrow{
|
||||
margin-left:40px;
|
||||
}
|
||||
}
|
||||
|
||||
&.tabulator-group-level-3{
|
||||
.tabulator-arrow{
|
||||
margin-left:60px;
|
||||
}
|
||||
}
|
||||
|
||||
&.tabulator-group-level-4{
|
||||
.tabulator-arrow{
|
||||
margin-left:80px;
|
||||
}
|
||||
}
|
||||
|
||||
&.tabulator-group-level-5{
|
||||
.tabulator-arrow{
|
||||
margin-left:1000px;
|
||||
}
|
||||
}
|
||||
|
||||
//sorting arrow
|
||||
.tabulator-arrow{
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-right:16px;
|
||||
border-top: 6px solid transparent;
|
||||
border-bottom: 6px solid transparent;
|
||||
border-right: 0;
|
||||
border-left: 6px solid $sortArrowActive;
|
||||
vertical-align:middle;
|
||||
}
|
||||
|
||||
span{
|
||||
margin-left:10px;
|
||||
color:#d00;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
//footer element
|
||||
.tabulator-footer{
|
||||
padding:5px 10px;
|
||||
border-top:1px solid $footerSeperatorColor;
|
||||
background-color: $footerBackgroundColor;
|
||||
text-align: right;
|
||||
color: $footerTextColor;
|
||||
font-weight:bold;
|
||||
white-space:nowrap;
|
||||
user-select:none;
|
||||
|
||||
-moz-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-o-user-select: none;
|
||||
|
||||
.tabulator-calcs-holder{
|
||||
box-sizing:border-box;
|
||||
width:calc("100% + 20px");
|
||||
margin:-5px -10px 5px -10px;
|
||||
|
||||
text-align: left;
|
||||
|
||||
background:lighten($footerBackgroundColor, 5%) !important;
|
||||
|
||||
.tabulator-row{
|
||||
background:lighten($footerBackgroundColor, 5%) !important;
|
||||
|
||||
.tabulator-col-resize-handle{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
border-bottom:1px solid $rowBorderColor;
|
||||
border-top:1px solid $rowBorderColor;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
&:only-child{
|
||||
margin-bottom:-5px;
|
||||
border-bottom:none;
|
||||
}
|
||||
}
|
||||
|
||||
//pagination container element
|
||||
.tabulator-pages{
|
||||
margin:0 7px;
|
||||
}
|
||||
|
||||
//pagination button
|
||||
.tabulator-page{
|
||||
display:inline-block;
|
||||
|
||||
margin:0 2px;
|
||||
padding:2px 5px;
|
||||
|
||||
border:1px solid $footerBorderColor;
|
||||
border-radius:3px;
|
||||
|
||||
background:rgba(255,255,255,.2);
|
||||
|
||||
color: $footerTextColor;
|
||||
font-family:inherit;
|
||||
font-weight:inherit;
|
||||
font-size:inherit;
|
||||
|
||||
&.active{
|
||||
color:#d00;
|
||||
}
|
||||
|
||||
&:disabled{
|
||||
opacity:.5;
|
||||
}
|
||||
|
||||
&:not(.disabled){
|
||||
&:hover{
|
||||
cursor:pointer;
|
||||
background:rgba(0,0,0,.2);
|
||||
color:#fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//column resize handles
|
||||
.tabulator-col-resize-handle{
|
||||
position:absolute;
|
||||
right:0;
|
||||
top:0;
|
||||
bottom:0;
|
||||
width:5px;
|
||||
|
||||
&.prev{
|
||||
left:0;
|
||||
right:auto;
|
||||
}
|
||||
|
||||
&:hover{
|
||||
cursor:ew-resize;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//holding div that contains loader and covers tabulator element to prevent interaction
|
||||
.tablulator-loader{
|
||||
position:absolute;
|
||||
display: flex;
|
||||
align-items:center;
|
||||
|
||||
top:0;
|
||||
left:0;
|
||||
z-index:100;
|
||||
|
||||
height:100%;
|
||||
width:100%;
|
||||
background:rgba(0,0,0,.4);
|
||||
text-align:center;
|
||||
|
||||
//loading message element
|
||||
.tabulator-loader-msg{
|
||||
display:inline-block;
|
||||
|
||||
margin:0 auto;
|
||||
padding:10px 20px;
|
||||
|
||||
border-radius:10px;
|
||||
|
||||
background:#fff;
|
||||
font-weight:bold;
|
||||
font-size:16px;
|
||||
|
||||
//loading message
|
||||
&.tabulator-loading{
|
||||
border:4px solid #333;
|
||||
color:#000;
|
||||
}
|
||||
|
||||
//error message
|
||||
&.tabulator-error{
|
||||
border:4px solid #D00;
|
||||
color:#590000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
684
js/tabulator/src/scss/tabulator_midnight.scss
Normal file
684
js/tabulator/src/scss/tabulator_midnight.scss
Normal file
@ -0,0 +1,684 @@
|
||||
|
||||
//Main Theme Variables
|
||||
$backgroundColor: #222; //background color of tabulator
|
||||
$borderColor:#333; //border to tablulator
|
||||
$textSize:14px; //table text size
|
||||
|
||||
//header themeing
|
||||
$headerBackgroundColor:#333; //border to tablulator
|
||||
$headerTextColor:#fff; //header text colour
|
||||
$headerBorderColor:#aaa; //header border color
|
||||
$headerSeperatorColor:#999; //header bottom seperator color
|
||||
$headerMargin:4px; //padding round header
|
||||
|
||||
//column header arrows
|
||||
$sortArrowActive: #666;
|
||||
$sortArrowInactive: #bbb;
|
||||
|
||||
//row themeing
|
||||
$rowBackgroundColor:#666; //table row background color
|
||||
$rowAltBackgroundColor:#444; //table row background color
|
||||
$rowBorderColor:#888; //table border color
|
||||
$rowTextColor:#fff; //table text color
|
||||
$rowHoverBackground:#999; //row background color on hover
|
||||
|
||||
$rowSelectedBackground: #000; //row background color when selected
|
||||
$rowSelectedBackgroundHover: #888;//row background color when selected and hovered
|
||||
|
||||
$editBoxColor:#999; //border color for edit boxes
|
||||
$errorColor:#dd0000; //error indication
|
||||
|
||||
//footer themeing
|
||||
$footerBackgroundColor:#333; //border to tablulator
|
||||
$footerTextColor:#333; //footer text colour
|
||||
$footerBorderColor:#aaa; //footer border color
|
||||
$footerSeperatorColor:#999; //footer bottom seperator color
|
||||
|
||||
|
||||
|
||||
//Tabulator Containing Element
|
||||
.tabulator{
|
||||
position: relative;
|
||||
border: 1px solid $borderColor;
|
||||
background-color: $backgroundColor;
|
||||
overflow:hidden;
|
||||
font-size:$textSize;
|
||||
text-align: left;
|
||||
|
||||
-webkit-transform: translatez(0);
|
||||
-moz-transform: translatez(0);
|
||||
-ms-transform: translatez(0);
|
||||
-o-transform: translatez(0);
|
||||
transform: translatez(0);
|
||||
|
||||
&[tabulator-layout="fitDataFill"]{
|
||||
.tabulator-tableHolder{
|
||||
.tabulator-table{
|
||||
min-width:100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.tabulator-block-select{
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
//column header containing element
|
||||
.tabulator-header{
|
||||
position:relative;
|
||||
box-sizing: border-box;
|
||||
|
||||
width:100%;
|
||||
|
||||
border-bottom:1px solid $headerSeperatorColor;
|
||||
background-color: $headerBackgroundColor;
|
||||
color: $headerTextColor;
|
||||
font-weight:bold;
|
||||
|
||||
white-space: nowrap;
|
||||
overflow:hidden;
|
||||
|
||||
-moz-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-o-user-select: none;
|
||||
|
||||
//individual column header element
|
||||
.tabulator-col{
|
||||
display:inline-block;
|
||||
position:relative;
|
||||
box-sizing:border-box;
|
||||
border-right:1px solid $headerBorderColor;
|
||||
background-color: $headerBackgroundColor;
|
||||
text-align:left;
|
||||
vertical-align: bottom;
|
||||
overflow: hidden;
|
||||
|
||||
&.tabulator-moving{
|
||||
position: absolute;
|
||||
border:1px solid $headerSeperatorColor;
|
||||
background:darken($headerBackgroundColor, 10%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
//hold content of column header
|
||||
.tabulator-col-content{
|
||||
position: relative;
|
||||
padding:4px;
|
||||
|
||||
//hold title of column header
|
||||
.tabulator-col-title{
|
||||
box-sizing:border-box;
|
||||
width: 100%;
|
||||
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
vertical-align:bottom;
|
||||
|
||||
//element to hold title editor
|
||||
.tabulator-title-editor{
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
|
||||
border:1px solid #999;
|
||||
|
||||
padding:1px;
|
||||
|
||||
background: #444;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
//column sorter arrow
|
||||
.tabulator-arrow{
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top:9px;
|
||||
right:8px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 6px solid transparent;
|
||||
border-right: 6px solid transparent;
|
||||
border-bottom: 6px solid $sortArrowInactive;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
//complex header column group
|
||||
&.tabulator-col-group{
|
||||
|
||||
//gelement to hold sub columns in column group
|
||||
.tabulator-col-group-cols{
|
||||
position:relative;
|
||||
display: flex;
|
||||
|
||||
border-top:1px solid $headerBorderColor;
|
||||
overflow: hidden;
|
||||
|
||||
.tabulator-col:last-child{
|
||||
margin-right:-1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//hide left resize handle on first column
|
||||
&:first-child{
|
||||
.tabulator-col-resize-handle.prev{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
//placeholder element for sortable columns
|
||||
&.ui-sortable-helper{
|
||||
position: absolute;
|
||||
background-color: darken($headerBackgroundColor, 10%) !important;
|
||||
border:1px solid $headerBorderColor;
|
||||
}
|
||||
|
||||
//header filter containing element
|
||||
.tabulator-header-filter{
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
margin-top:2px;
|
||||
width:100%;
|
||||
text-align: center;
|
||||
|
||||
//styling adjustment for inbuilt editors
|
||||
textarea{
|
||||
height:auto !important;
|
||||
}
|
||||
|
||||
svg{
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
input, select{
|
||||
border:1px solid #999;
|
||||
background: #444;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
//styling child elements for sortable columns
|
||||
&.tabulator-sortable{
|
||||
.tabulator-col-title{
|
||||
padding-right:25px;
|
||||
}
|
||||
|
||||
&:hover{
|
||||
cursor:pointer;
|
||||
background-color:darken($headerBackgroundColor, 10%);
|
||||
}
|
||||
|
||||
|
||||
&[aria-sort="none"]{
|
||||
.tabulator-col-content .tabulator-arrow{
|
||||
border-top: none;
|
||||
border-bottom: 6px solid $sortArrowInactive;
|
||||
}
|
||||
}
|
||||
|
||||
&[aria-sort="asc"]{
|
||||
.tabulator-col-content .tabulator-arrow{
|
||||
border-top: none;
|
||||
border-bottom: 6px solid $sortArrowActive;
|
||||
}
|
||||
}
|
||||
|
||||
&[aria-sort="desc"]{
|
||||
.tabulator-col-content .tabulator-arrow{
|
||||
border-top: 6px solid $sortArrowActive;
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.tabulator-frozen{
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
|
||||
// background-color: inherit;
|
||||
|
||||
z-index: 10;
|
||||
|
||||
&.tabulator-frozen-left{
|
||||
border-right:2px solid $rowBorderColor;
|
||||
}
|
||||
|
||||
&.tabulator-frozen-right{
|
||||
border-left:2px solid $rowBorderColor;
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-calcs-holder{
|
||||
box-sizing:border-box;
|
||||
min-width:200%;
|
||||
|
||||
background:darken($headerBackgroundColor, 10%) !important;
|
||||
|
||||
.tabulator-row{
|
||||
background:darken($headerBackgroundColor, 10%) !important;
|
||||
|
||||
.tabulator-col-resize-handle{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
border-top:1px solid $rowBorderColor;
|
||||
border-bottom:1px solid $headerBorderColor;
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
//scrolling element to hold table
|
||||
.tabulator-tableHolder{
|
||||
position:relative;
|
||||
width:100%;
|
||||
white-space: nowrap;
|
||||
overflow:auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
&:focus{
|
||||
outline: none;
|
||||
}
|
||||
|
||||
//default placeholder element
|
||||
.tabulator-placeholder{
|
||||
position: absolute;
|
||||
box-sizing:border-box;
|
||||
display: flex;
|
||||
align-items:center;
|
||||
|
||||
top:0;
|
||||
left:0;
|
||||
height:100%;
|
||||
width:100%;
|
||||
|
||||
span{
|
||||
display: inline-block;
|
||||
|
||||
margin:0 auto;
|
||||
padding:10px;
|
||||
|
||||
color:#eee;
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
//element to hold table rows
|
||||
.tabulator-table{
|
||||
position:relative;
|
||||
display:inline-block;
|
||||
background-color:$rowBackgroundColor;
|
||||
white-space: nowrap;
|
||||
overflow:visible;
|
||||
color:$rowTextColor;
|
||||
|
||||
.tabulator-row{
|
||||
&.tabulator-calcs{
|
||||
font-weight: bold;
|
||||
background:darken($rowAltBackgroundColor, 5%) !important;
|
||||
|
||||
&.tabulator-calcs-top{
|
||||
border-bottom:2px solid $rowBorderColor;
|
||||
}
|
||||
|
||||
&.tabulator-calcs-bottom{
|
||||
border-top:2px solid $rowBorderColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//row element
|
||||
.tabulator-row{
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
|
||||
min-height:$textSize + ($headerMargin * 2);
|
||||
background-color: $rowBackgroundColor;
|
||||
|
||||
&:nth-child(even){
|
||||
background-color: $rowAltBackgroundColor;
|
||||
}
|
||||
|
||||
&.tabulator-selectable:hover{
|
||||
background-color:$rowHoverBackground;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.tabulator-selected{
|
||||
background-color:$rowSelectedBackground;
|
||||
}
|
||||
|
||||
&.tabulator-selected:hover{
|
||||
background-color:$rowSelectedBackgroundHover;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.tabulator-moving{
|
||||
position: absolute;
|
||||
|
||||
border-top:1px solid $rowBorderColor;
|
||||
border-bottom:1px solid $rowBorderColor;
|
||||
|
||||
pointer-events: none !important;
|
||||
z-index:15;
|
||||
}
|
||||
|
||||
.tabulator-frozen{
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
|
||||
background-color: inherit;
|
||||
|
||||
z-index: 10;
|
||||
|
||||
&.tabulator-frozen-left{
|
||||
border-right:2px solid $rowBorderColor;
|
||||
}
|
||||
|
||||
&.tabulator-frozen-right{
|
||||
border-left:2px solid $rowBorderColor;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//cell element
|
||||
.tabulator-cell{
|
||||
display:inline-block;
|
||||
position: relative;
|
||||
box-sizing:border-box;
|
||||
padding:4px;
|
||||
border-right:1px solid $rowBorderColor;
|
||||
vertical-align:middle;
|
||||
white-space:nowrap;
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
|
||||
|
||||
&.tabulator-editing{
|
||||
border:1px solid $editBoxColor;
|
||||
padding: 0;
|
||||
|
||||
input, select{
|
||||
border:1px;
|
||||
background:transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&.tabulator-validation-fail{
|
||||
border:1px solid $errorColor;
|
||||
input, select{
|
||||
border:1px;
|
||||
background:transparent;
|
||||
|
||||
color: $errorColor;
|
||||
}
|
||||
}
|
||||
|
||||
//hide left resize handle on first column
|
||||
&:first-child{
|
||||
.tabulator-col-resize-handle.prev{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
//movable row handle
|
||||
&.tabulator-row-handle{
|
||||
|
||||
display: inline-flex;
|
||||
align-items:center;
|
||||
|
||||
-moz-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-o-user-select: none;
|
||||
|
||||
//handle holder
|
||||
.tabulator-row-handle-box{
|
||||
width:80%;
|
||||
|
||||
//Hamburger element
|
||||
.tabulator-row-handle-bar{
|
||||
width:100%;
|
||||
height:3px;
|
||||
margin:2px 10% 0 10%;
|
||||
background:#666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//row grouping element
|
||||
&.tabulator-group{
|
||||
|
||||
box-sizing:border-box;
|
||||
border-bottom:1px solid #999;
|
||||
border-right:1px solid $rowBorderColor;
|
||||
border-top:1px solid #999;
|
||||
padding:5px;
|
||||
padding-left:10px;
|
||||
background:#ccc;
|
||||
font-weight:bold;
|
||||
color:#333;
|
||||
|
||||
min-width: 100%;
|
||||
|
||||
&:hover{
|
||||
cursor:pointer;
|
||||
background-color:rgba(0,0,0,.1);
|
||||
}
|
||||
|
||||
&.tabulator-group-visible{
|
||||
.tabulator-arrow{
|
||||
margin-right:10px;
|
||||
border-left: 6px solid transparent;
|
||||
border-right: 6px solid transparent;
|
||||
border-top: 6px solid $sortArrowActive;
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.tabulator-group-level-1{
|
||||
.tabulator-arrow{
|
||||
margin-left:20px;
|
||||
}
|
||||
}
|
||||
|
||||
&.tabulator-group-level-2{
|
||||
.tabulator-arrow{
|
||||
margin-left:40px;
|
||||
}
|
||||
}
|
||||
|
||||
&.tabulator-group-level-3{
|
||||
.tabulator-arrow{
|
||||
margin-left:60px;
|
||||
}
|
||||
}
|
||||
|
||||
&.tabulator-group-level-4{
|
||||
.tabulator-arrow{
|
||||
margin-left:80px;
|
||||
}
|
||||
}
|
||||
|
||||
&.tabulator-group-level-5{
|
||||
.tabulator-arrow{
|
||||
margin-left:1000px;
|
||||
}
|
||||
}
|
||||
|
||||
//sorting arrow
|
||||
.tabulator-arrow{
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-right:16px;
|
||||
border-top: 6px solid transparent;
|
||||
border-bottom: 6px solid transparent;
|
||||
border-right: 0;
|
||||
border-left: 6px solid $sortArrowActive;
|
||||
vertical-align:middle;
|
||||
}
|
||||
|
||||
span{
|
||||
margin-left:10px;
|
||||
color:#666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//column resize handles
|
||||
.tabulator-col-resize-handle{
|
||||
position:absolute;
|
||||
right:0;
|
||||
top:0;
|
||||
bottom:0;
|
||||
width:5px;
|
||||
|
||||
&.prev{
|
||||
left:0;
|
||||
right:auto;
|
||||
}
|
||||
|
||||
&:hover{
|
||||
cursor:ew-resize;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//footer element
|
||||
.tabulator-footer{
|
||||
padding:5px 10px;
|
||||
border-top:1px solid $footerSeperatorColor;
|
||||
background-color: $footerBackgroundColor;
|
||||
text-align:right;
|
||||
color: $footerTextColor;
|
||||
font-weight:bold;
|
||||
white-space:nowrap;
|
||||
user-select:none;
|
||||
|
||||
-moz-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-o-user-select: none;
|
||||
|
||||
.tabulator-calcs-holder{
|
||||
box-sizing:border-box;
|
||||
width:calc("100% + 20px");
|
||||
margin:-5px -10px 5px -10px;
|
||||
|
||||
text-align: left;
|
||||
|
||||
background:darken($footerBackgroundColor, 5%) !important;
|
||||
|
||||
.tabulator-row{
|
||||
background:darken($footerBackgroundColor, 5%) !important;
|
||||
color:$headerTextColor;
|
||||
|
||||
.tabulator-col-resize-handle{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
border-bottom:1px solid $rowBorderColor;
|
||||
border-top:1px solid $rowBorderColor;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
&:only-child{
|
||||
margin-bottom:-5px;
|
||||
border-bottom:none;
|
||||
}
|
||||
}
|
||||
|
||||
//pagination container element
|
||||
.tabulator-pages{
|
||||
margin:0 7px;
|
||||
}
|
||||
|
||||
//pagination button
|
||||
.tabulator-page{
|
||||
display:inline-block;
|
||||
margin:0 2px;
|
||||
border:1px solid $footerBorderColor;
|
||||
border-radius:3px;
|
||||
padding:2px 5px;
|
||||
background:rgba(255,255,255,.2);
|
||||
color: $footerTextColor;
|
||||
font-family:inherit;
|
||||
font-weight:inherit;
|
||||
font-size:inherit;
|
||||
|
||||
&.active{
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
&:disabled{
|
||||
opacity:.5;
|
||||
}
|
||||
|
||||
&:not(.disabled){
|
||||
&:hover{
|
||||
cursor:pointer;
|
||||
background:rgba(0,0,0,.2);
|
||||
color:#fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//holding div that contains loader and covers tabulator element to prevent interaction
|
||||
.tablulator-loader{
|
||||
position:absolute;
|
||||
display: flex;
|
||||
align-items:center;
|
||||
|
||||
top:0;
|
||||
left:0;
|
||||
z-index:100;
|
||||
|
||||
height:100%;
|
||||
width:100%;
|
||||
background:rgba(0,0,0,.4);
|
||||
text-align:center;
|
||||
|
||||
//loading message element
|
||||
.tabulator-loader-msg{
|
||||
display:inline-block;
|
||||
|
||||
margin:0 auto;
|
||||
padding:10px 20px;
|
||||
|
||||
border-radius:10px;
|
||||
|
||||
background:#fff;
|
||||
font-weight:bold;
|
||||
font-size:16px;
|
||||
|
||||
//loading message
|
||||
&.tabulator-loading{
|
||||
border:4px solid #333;
|
||||
color:#000;
|
||||
}
|
||||
|
||||
//error message
|
||||
&.tabulator-error{
|
||||
border:4px solid #D00;
|
||||
color:#590000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
722
js/tabulator/src/scss/tabulator_modern.scss
Normal file
722
js/tabulator/src/scss/tabulator_modern.scss
Normal file
@ -0,0 +1,722 @@
|
||||
|
||||
$primary: #3759D7; //the base text color from which the rest of the theme derives
|
||||
|
||||
//Main Theme Variables
|
||||
$backgroundColor: #fff; //background color of tabulator
|
||||
$borderColor:#fff; //border to tablulator
|
||||
$textSize:16px; //table text size
|
||||
|
||||
//header themeing
|
||||
$headerBackgroundColor:#fff; //border to tablulator
|
||||
$headerTextColor:$primary; //header text colour
|
||||
$headerBorderColor:#fff; //header border color
|
||||
$headerSeperatorColor:$primary; //header bottom seperator color
|
||||
$headerMargin:4px; //padding round header
|
||||
|
||||
//column header arrows
|
||||
$sortArrowActive: $primary;
|
||||
$sortArrowInactive: lighten($primary, 30%);
|
||||
|
||||
//row themeing
|
||||
$rowBackgroundColor:#f3f3f3; //table row background color
|
||||
$rowAltBackgroundColor:#fff; //table row background color
|
||||
$rowBorderColor:#fff; //table border color
|
||||
$rowTextColor:#333; //table text color
|
||||
$rowHoverBackground:#bbb; //row background color on hover
|
||||
|
||||
$rowSelectedBackground: #9ABCEA; //row background color when selected
|
||||
$rowSelectedBackgroundHover: #769BCC;//row background color when selected and hovered
|
||||
|
||||
$editBoxColor:#1D68CD; //border color for edit boxes
|
||||
$errorColor:#dd0000; //error indication
|
||||
|
||||
//footer themeing
|
||||
$footerBackgroundColor:#fff; //border to tablulator
|
||||
$footerTextColor:$primary; //footer text colour
|
||||
$footerBorderColor:#aaa; //footer border color
|
||||
$footerSeperatorColor:#999; //footer bottom seperator color
|
||||
|
||||
$handleWidth:10px; //width of the row handle
|
||||
$handleColor: $primary; //color for odd numbered rows
|
||||
$handleColorAlt: lighten($primary, 10%); //color for even numbered rows
|
||||
|
||||
|
||||
//Tabulator Containing Element
|
||||
.tabulator{
|
||||
position: relative;
|
||||
border: 1px solid $borderColor;
|
||||
background-color: $backgroundColor;
|
||||
overflow:hidden;
|
||||
font-size:$textSize;
|
||||
text-align: left;
|
||||
|
||||
-webkit-transform: translatez(0);
|
||||
-moz-transform: translatez(0);
|
||||
-ms-transform: translatez(0);
|
||||
-o-transform: translatez(0);
|
||||
transform: translatez(0);
|
||||
|
||||
&[tabulator-layout="fitDataFill"]{
|
||||
.tabulator-tableHolder{
|
||||
.tabulator-table{
|
||||
min-width:100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.tabulator-block-select{
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
//column header containing element
|
||||
.tabulator-header{
|
||||
position:relative;
|
||||
box-sizing: border-box;
|
||||
|
||||
width:100%;
|
||||
|
||||
border-bottom:3px solid $headerSeperatorColor;
|
||||
margin-bottom:4px;
|
||||
background-color: $headerBackgroundColor;
|
||||
color: $headerTextColor;
|
||||
font-weight:bold;
|
||||
|
||||
white-space: nowrap;
|
||||
overflow:hidden;
|
||||
|
||||
-moz-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-o-user-select: none;
|
||||
|
||||
padding-left:$handleWidth;
|
||||
|
||||
font-size: 1.1em;
|
||||
|
||||
//individual column header element
|
||||
.tabulator-col{
|
||||
display:inline-block;
|
||||
position:relative;
|
||||
box-sizing:border-box;
|
||||
border-right:2px solid $headerBorderColor;
|
||||
background-color: $headerBackgroundColor;
|
||||
text-align:left;
|
||||
vertical-align: bottom;
|
||||
overflow: hidden;
|
||||
|
||||
&.tabulator-moving{
|
||||
position: absolute;
|
||||
border:1px solid $headerSeperatorColor;
|
||||
background:darken($headerBackgroundColor, 10%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
//hold content of column header
|
||||
.tabulator-col-content{
|
||||
position: relative;
|
||||
padding:4px;
|
||||
|
||||
//hold title of column header
|
||||
.tabulator-col-title{
|
||||
box-sizing:border-box;
|
||||
width: 100%;
|
||||
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
vertical-align:bottom;
|
||||
|
||||
//element to hold title editor
|
||||
.tabulator-title-editor{
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
|
||||
border:1px solid $primary;
|
||||
|
||||
padding:1px;
|
||||
|
||||
background: #fff;
|
||||
|
||||
font-size: 1em;
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
//column sorter arrow
|
||||
.tabulator-arrow{
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top:9px;
|
||||
right:8px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 6px solid transparent;
|
||||
border-right: 6px solid transparent;
|
||||
border-bottom: 6px solid $sortArrowInactive;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
//complex header column group
|
||||
&.tabulator-col-group{
|
||||
|
||||
//gelement to hold sub columns in column group
|
||||
.tabulator-col-group-cols{
|
||||
position:relative;
|
||||
display: flex;
|
||||
|
||||
border-top:2px solid $headerSeperatorColor;
|
||||
overflow: hidden;
|
||||
|
||||
.tabulator-col:last-child{
|
||||
margin-right:-1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//hide left resize handle on first column
|
||||
&:first-child{
|
||||
.tabulator-col-resize-handle.prev{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
//placeholder element for sortable columns
|
||||
&.ui-sortable-helper{
|
||||
position: absolute;
|
||||
background-color: darken($headerBackgroundColor, 10%) !important;
|
||||
border:1px solid $headerBorderColor;
|
||||
}
|
||||
|
||||
//header filter containing element
|
||||
.tabulator-header-filter{
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
margin-top:2px;
|
||||
width:100%;
|
||||
text-align: center;
|
||||
|
||||
//styling adjustment for inbuilt editors
|
||||
textarea{
|
||||
height:auto !important;
|
||||
}
|
||||
|
||||
svg{
|
||||
margin-top: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
//styling child elements for sortable columns
|
||||
&.tabulator-sortable{
|
||||
.tabulator-col-title{
|
||||
padding-right:25px;
|
||||
}
|
||||
|
||||
&:hover{
|
||||
cursor:pointer;
|
||||
background-color:darken($headerBackgroundColor, 10%);
|
||||
}
|
||||
|
||||
|
||||
&[aria-sort="none"]{
|
||||
.tabulator-col-content .tabulator-arrow{
|
||||
border-top: none;
|
||||
border-bottom: 6px solid $sortArrowInactive;
|
||||
}
|
||||
}
|
||||
|
||||
&[aria-sort="asc"]{
|
||||
.tabulator-col-content .tabulator-arrow{
|
||||
border-top: none;
|
||||
border-bottom: 6px solid $sortArrowActive;
|
||||
}
|
||||
}
|
||||
|
||||
&[aria-sort="desc"]{
|
||||
.tabulator-col-content .tabulator-arrow{
|
||||
border-top: 6px solid $sortArrowActive;
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.tabulator-frozen{
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
|
||||
// background-color: inherit;
|
||||
|
||||
z-index: 10;
|
||||
|
||||
&.tabulator-frozen-left{
|
||||
padding-left: $handleWidth;
|
||||
|
||||
border-right:2px solid $rowBorderColor;
|
||||
}
|
||||
|
||||
&.tabulator-frozen-right{
|
||||
border-left:2px solid $rowBorderColor;
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-calcs-holder{
|
||||
box-sizing:border-box;
|
||||
min-width:200%;
|
||||
|
||||
border-top:2px solid $headerSeperatorColor !important;
|
||||
|
||||
background:lighten($headerBackgroundColor, 5%) !important;
|
||||
|
||||
.tabulator-row{
|
||||
padding-left: 0 !important;
|
||||
|
||||
background:lighten($headerBackgroundColor, 5%) !important;
|
||||
|
||||
.tabulator-col-resize-handle{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tabulator-cell{
|
||||
background:none;
|
||||
}
|
||||
}
|
||||
|
||||
border-top:1px solid $rowBorderColor;
|
||||
border-bottom:1px solid $headerBorderColor;
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
//scrolling element to hold table
|
||||
.tabulator-tableHolder{
|
||||
position:relative;
|
||||
width:100%;
|
||||
white-space: nowrap;
|
||||
overflow:auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
&:focus{
|
||||
outline: none;
|
||||
}
|
||||
|
||||
//default placeholder element
|
||||
.tabulator-placeholder{
|
||||
position: absolute;
|
||||
box-sizing:border-box;
|
||||
display: flex;
|
||||
align-items:center;
|
||||
|
||||
top:0;
|
||||
left:0;
|
||||
height:100%;
|
||||
width:100%;
|
||||
|
||||
span{
|
||||
display: inline-block;
|
||||
|
||||
margin:0 auto;
|
||||
padding:10px;
|
||||
|
||||
color:$primary;
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
//element to hold table rows
|
||||
.tabulator-table{
|
||||
position:relative;
|
||||
display:inline-block;
|
||||
background-color:$rowBackgroundColor;
|
||||
white-space: nowrap;
|
||||
overflow:visible;
|
||||
color:$rowTextColor;
|
||||
|
||||
.tabulator-row{
|
||||
&.tabulator-calcs{
|
||||
font-weight: bold;
|
||||
background:darken($rowAltBackgroundColor, 5%) !important;
|
||||
|
||||
&.tabulator-calcs-top{
|
||||
border-bottom:2px solid $headerSeperatorColor;
|
||||
}
|
||||
|
||||
&.tabulator-calcs-bottom{
|
||||
border-top:2px solid $headerSeperatorColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//row element
|
||||
.tabulator-row{
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
|
||||
box-sizing: border-box;
|
||||
min-height:$textSize + ($headerMargin * 2);
|
||||
|
||||
background-color: $handleColor;
|
||||
|
||||
padding-left: $handleWidth !important;
|
||||
|
||||
margin-bottom: 2px;
|
||||
|
||||
&:nth-child(even){
|
||||
background-color: $handleColorAlt;
|
||||
|
||||
.tabulator-cell{
|
||||
background-color: $rowAltBackgroundColor;
|
||||
}
|
||||
}
|
||||
|
||||
&.tabulator-selectable:hover{
|
||||
cursor: pointer;
|
||||
|
||||
.tabulator-cell{
|
||||
background-color:$rowHoverBackground;
|
||||
}
|
||||
}
|
||||
|
||||
&.tabulator-selected{
|
||||
.tabulator-cell{
|
||||
background-color:$rowSelectedBackground;
|
||||
}
|
||||
}
|
||||
|
||||
&.tabulator-selected:hover{
|
||||
.tabulator-cell{
|
||||
background-color:$rowSelectedBackgroundHover;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
&.tabulator-moving{
|
||||
position: absolute;
|
||||
|
||||
border-top:1px solid $rowBorderColor;
|
||||
border-bottom:1px solid $rowBorderColor;
|
||||
|
||||
pointer-events: none !important;
|
||||
z-index:15;
|
||||
}
|
||||
|
||||
.tabulator-frozen{
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
|
||||
background-color: inherit;
|
||||
|
||||
z-index: 10;
|
||||
|
||||
&.tabulator-frozen-left{
|
||||
padding-left: $handleWidth;
|
||||
border-right:2px solid $rowBorderColor;
|
||||
}
|
||||
|
||||
&.tabulator-frozen-right{
|
||||
border-left:2px solid $rowBorderColor;
|
||||
}
|
||||
}
|
||||
|
||||
//cell element
|
||||
.tabulator-cell{
|
||||
display:inline-block;
|
||||
position: relative;
|
||||
box-sizing:border-box;
|
||||
padding:6px 4px;
|
||||
border-right:2px solid $rowBorderColor;
|
||||
vertical-align:middle;
|
||||
white-space:nowrap;
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
|
||||
background-color: $rowBackgroundColor;
|
||||
|
||||
&.tabulator-editing{
|
||||
border:1px solid $editBoxColor;
|
||||
padding: 0;
|
||||
|
||||
input, select{
|
||||
border:1px;
|
||||
background:transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&.tabulator-validation-fail{
|
||||
border:1px solid $errorColor;
|
||||
input, select{
|
||||
border:1px;
|
||||
background:transparent;
|
||||
|
||||
color: $errorColor;
|
||||
}
|
||||
}
|
||||
|
||||
//hide left resize handle on first column
|
||||
&:first-child{
|
||||
.tabulator-col-resize-handle.prev{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
//movable row handle
|
||||
&.tabulator-row-handle{
|
||||
|
||||
display: inline-flex;
|
||||
align-items:center;
|
||||
|
||||
-moz-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-o-user-select: none;
|
||||
|
||||
//handle holder
|
||||
.tabulator-row-handle-box{
|
||||
width:80%;
|
||||
|
||||
//Hamburger element
|
||||
.tabulator-row-handle-bar{
|
||||
width:100%;
|
||||
height:3px;
|
||||
margin:2px 10% 0 10%;
|
||||
background:#666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//row grouping element
|
||||
&.tabulator-group{
|
||||
|
||||
box-sizing:border-box;
|
||||
border-bottom:2px solid $primary;
|
||||
border-top:2px solid $primary;
|
||||
padding:5px;
|
||||
padding-left:10px;
|
||||
background:lighten($primary, 20%);
|
||||
font-weight:bold;
|
||||
color:fff;
|
||||
margin-bottom: 2px;
|
||||
|
||||
min-width: 100%;
|
||||
|
||||
&:hover{
|
||||
cursor:pointer;
|
||||
background-color:rgba(0,0,0,.1);
|
||||
}
|
||||
|
||||
|
||||
&.tabulator-group-visible{
|
||||
.tabulator-arrow{
|
||||
margin-right:10px;
|
||||
border-left: 6px solid transparent;
|
||||
border-right: 6px solid transparent;
|
||||
border-top: 6px solid $sortArrowActive;
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.tabulator-group-level-1{
|
||||
.tabulator-arrow{
|
||||
margin-left:20px;
|
||||
}
|
||||
}
|
||||
|
||||
&.tabulator-group-level-2{
|
||||
.tabulator-arrow{
|
||||
margin-left:40px;
|
||||
}
|
||||
}
|
||||
|
||||
&.tabulator-group-level-3{
|
||||
.tabulator-arrow{
|
||||
margin-left:60px;
|
||||
}
|
||||
}
|
||||
|
||||
&.tabulator-group-level-4{
|
||||
.tabulator-arrow{
|
||||
margin-left:80px;
|
||||
}
|
||||
}
|
||||
|
||||
&.tabulator-group-level-5{
|
||||
.tabulator-arrow{
|
||||
margin-left:1000px;
|
||||
}
|
||||
}
|
||||
|
||||
//sorting arrow
|
||||
.tabulator-arrow{
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-right:16px;
|
||||
border-top: 6px solid transparent;
|
||||
border-bottom: 6px solid transparent;
|
||||
border-right: 0;
|
||||
border-left: 6px solid $sortArrowActive;
|
||||
vertical-align:middle;
|
||||
}
|
||||
|
||||
span{
|
||||
margin-left:10px;
|
||||
color:$primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
//column resize handles
|
||||
.tabulator-col-resize-handle{
|
||||
position:absolute;
|
||||
right:0;
|
||||
top:0;
|
||||
bottom:0;
|
||||
width:5px;
|
||||
|
||||
&.prev{
|
||||
left:0;
|
||||
right:auto;
|
||||
}
|
||||
|
||||
&:hover{
|
||||
cursor:ew-resize;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//footer element
|
||||
.tabulator-footer{
|
||||
padding:5px 10px;
|
||||
border-top:1px solid $footerSeperatorColor;
|
||||
background-color: $footerBackgroundColor;
|
||||
text-align:right;
|
||||
color: $footerTextColor;
|
||||
font-weight:bold;
|
||||
white-space:nowrap;
|
||||
user-select:none;
|
||||
|
||||
-moz-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-o-user-select: none;
|
||||
|
||||
.tabulator-calcs-holder{
|
||||
box-sizing:border-box;
|
||||
width:calc("100% + 20px");
|
||||
margin:-5px -10px 5px -10px;
|
||||
|
||||
text-align: left;
|
||||
|
||||
background:lighten($footerBackgroundColor, 5%) !important;
|
||||
|
||||
border-top:3px solid $headerSeperatorColor !important;
|
||||
border-bottom:2px solid $headerSeperatorColor !important;
|
||||
|
||||
.tabulator-row{
|
||||
background:lighten($footerBackgroundColor, 5%) !important;
|
||||
|
||||
.tabulator-col-resize-handle{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tabulator-cell{
|
||||
background:none;
|
||||
}
|
||||
}
|
||||
|
||||
border-bottom:1px solid $rowBorderColor;
|
||||
border-top:1px solid $rowBorderColor;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
&:only-child{
|
||||
margin-bottom:-5px;
|
||||
border-bottom:none;
|
||||
border-bottom:none !important;
|
||||
}
|
||||
}
|
||||
|
||||
//pagination container element
|
||||
.tabulator-pages{
|
||||
margin:0 7px;
|
||||
}
|
||||
|
||||
//pagination button
|
||||
.tabulator-page{
|
||||
display:inline-block;
|
||||
margin:0 2px;
|
||||
border:1px solid $footerBorderColor;
|
||||
border-radius:3px;
|
||||
padding:2px 5px;
|
||||
background:rgba(255,255,255,.2);
|
||||
color: $footerTextColor;
|
||||
font-family:inherit;
|
||||
font-weight:inherit;
|
||||
font-size:inherit;
|
||||
|
||||
&.active{
|
||||
color:$primary;
|
||||
}
|
||||
|
||||
&:disabled{
|
||||
opacity:.5;
|
||||
}
|
||||
|
||||
&:not(.disabled){
|
||||
&:hover{
|
||||
cursor:pointer;
|
||||
background:rgba(0,0,0,.2);
|
||||
color:#fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//holding div that contains loader and covers tabulator element to prevent interaction
|
||||
.tablulator-loader{
|
||||
position:absolute;
|
||||
display: flex;
|
||||
align-items:center;
|
||||
|
||||
top:0;
|
||||
left:0;
|
||||
z-index:100;
|
||||
|
||||
height:100%;
|
||||
width:100%;
|
||||
background:rgba(0,0,0,.4);
|
||||
text-align:center;
|
||||
|
||||
//loading message element
|
||||
.tabulator-loader-msg{
|
||||
display:inline-block;
|
||||
|
||||
margin:0 auto;
|
||||
padding:10px 20px;
|
||||
|
||||
border-radius:10px;
|
||||
|
||||
background:#fff;
|
||||
font-weight:bold;
|
||||
font-size:16px;
|
||||
|
||||
//loading message
|
||||
&.tabulator-loading{
|
||||
border:4px solid #333;
|
||||
color:#000;
|
||||
}
|
||||
|
||||
//error message
|
||||
&.tabulator-error{
|
||||
border:4px solid #D00;
|
||||
color:#590000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
680
js/tabulator/src/scss/tabulator_simple.scss
Normal file
680
js/tabulator/src/scss/tabulator_simple.scss
Normal file
@ -0,0 +1,680 @@
|
||||
|
||||
//Main Theme Variables
|
||||
$backgroundColor: #fff; //background color of tabulator
|
||||
$borderColor:#999; //border to tablulator
|
||||
$textSize:14px; //table text size
|
||||
|
||||
//header themeing
|
||||
$headerBackgroundColor:#fff; //border to tablulator
|
||||
$headerTextColor:#555; //header text colour
|
||||
$headerBorderColor:#ddd; //header border color
|
||||
$headerSeperatorColor:#999; //header bottom seperator color
|
||||
$headerMargin:4px; //padding round header
|
||||
|
||||
//column header arrows
|
||||
$sortArrowActive: #666;
|
||||
$sortArrowInactive: #bbb;
|
||||
|
||||
//row themeing
|
||||
$rowBackgroundColor:#fff; //table row background color
|
||||
$rowAltBackgroundColor:#fff; //table row background color
|
||||
$rowBorderColor:#ddd; //table border color
|
||||
$rowTextColor:#333; //table text color
|
||||
$rowHoverBackground:#bbb; //row background color on hover
|
||||
|
||||
$rowSelectedBackground: #9ABCEA; //row background color when selected
|
||||
$rowSelectedBackgroundHover: #769BCC;//row background color when selected and hovered
|
||||
|
||||
|
||||
$editBoxColor:#1D68CD; //border color for edit boxes
|
||||
$errorColor:#dd0000; //error indication
|
||||
|
||||
//footer themeing
|
||||
$footerBackgroundColor:#fff; //border to tablulator
|
||||
$footerTextColor:#555; //footer text colour
|
||||
$footerBorderColor:#aaa; //footer border color
|
||||
$footerSeperatorColor:#999; //footer bottom seperator color
|
||||
|
||||
|
||||
|
||||
//Tabulator Containing Element
|
||||
.tabulator{
|
||||
position: relative;
|
||||
background-color: $backgroundColor;
|
||||
overflow:hidden;
|
||||
font-size:$textSize;
|
||||
text-align: left;
|
||||
|
||||
-webkit-transform: translatez(0);
|
||||
-moz-transform: translatez(0);
|
||||
-ms-transform: translatez(0);
|
||||
-o-transform: translatez(0);
|
||||
transform: translatez(0);
|
||||
|
||||
&[tabulator-layout="fitDataFill"]{
|
||||
.tabulator-tableHolder{
|
||||
.tabulator-table{
|
||||
min-width:100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.tabulator-block-select{
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
//column header containing element
|
||||
.tabulator-header{
|
||||
position:relative;
|
||||
box-sizing: border-box;
|
||||
|
||||
width:100%;
|
||||
|
||||
border-bottom:1px solid $headerSeperatorColor;
|
||||
background-color: $headerBackgroundColor;
|
||||
color: $headerTextColor;
|
||||
font-weight:bold;
|
||||
|
||||
white-space: nowrap;
|
||||
overflow:hidden;
|
||||
|
||||
-moz-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-o-user-select: none;
|
||||
|
||||
//individual column header element
|
||||
.tabulator-col{
|
||||
display:inline-block;
|
||||
position:relative;
|
||||
box-sizing:border-box;
|
||||
border-right:1px solid $headerBorderColor;
|
||||
background-color: $headerBackgroundColor;
|
||||
text-align:left;
|
||||
vertical-align: bottom;
|
||||
overflow: hidden;
|
||||
|
||||
&.tabulator-moving{
|
||||
position: absolute;
|
||||
border:1px solid $headerSeperatorColor;
|
||||
background:darken($headerBackgroundColor, 10%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
//hold content of column header
|
||||
.tabulator-col-content{
|
||||
position: relative;
|
||||
padding:4px;
|
||||
|
||||
//hold title of column header
|
||||
.tabulator-col-title{
|
||||
box-sizing:border-box;
|
||||
width: 100%;
|
||||
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
vertical-align:bottom;
|
||||
|
||||
//element to hold title editor
|
||||
.tabulator-title-editor{
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
|
||||
border:1px solid #999;
|
||||
|
||||
padding:1px;
|
||||
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
//column sorter arrow
|
||||
.tabulator-arrow{
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top:9px;
|
||||
right:8px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 6px solid transparent;
|
||||
border-right: 6px solid transparent;
|
||||
border-bottom: 6px solid $sortArrowInactive;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
//complex header column group
|
||||
&.tabulator-col-group{
|
||||
|
||||
//gelement to hold sub columns in column group
|
||||
.tabulator-col-group-cols{
|
||||
position:relative;
|
||||
display: flex;
|
||||
|
||||
border-top:1px solid $headerBorderColor;
|
||||
overflow: hidden;
|
||||
|
||||
.tabulator-col:last-child{
|
||||
margin-right:-1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//hide left resize handle on first column
|
||||
&:first-child{
|
||||
.tabulator-col-resize-handle.prev{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
//placeholder element for sortable columns
|
||||
&.ui-sortable-helper{
|
||||
position: absolute;
|
||||
background-color:darken($headerBackgroundColor, 10%) !important;
|
||||
border:1px solid $headerBorderColor;
|
||||
}
|
||||
|
||||
//header filter containing element
|
||||
.tabulator-header-filter{
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
margin-top:2px;
|
||||
width:100%;
|
||||
text-align: center;
|
||||
|
||||
//styling adjustment for inbuilt editors
|
||||
textarea{
|
||||
height:auto !important;
|
||||
}
|
||||
|
||||
svg{
|
||||
margin-top: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//styling child elements for sortable columns
|
||||
&.tabulator-sortable{
|
||||
.tabulator-col-title{
|
||||
padding-right:25px;
|
||||
}
|
||||
|
||||
&:hover{
|
||||
cursor:pointer;
|
||||
background-color:darken($headerBackgroundColor, 10%);
|
||||
}
|
||||
|
||||
|
||||
&[aria-sort="none"]{
|
||||
.tabulator-col-content .tabulator-arrow{
|
||||
border-top: none;
|
||||
border-bottom: 6px solid $sortArrowInactive;
|
||||
}
|
||||
}
|
||||
|
||||
&[aria-sort="asc"]{
|
||||
.tabulator-col-content .tabulator-arrow{
|
||||
border-top: none;
|
||||
border-bottom: 6px solid $sortArrowActive;
|
||||
}
|
||||
}
|
||||
|
||||
&[aria-sort="desc"]{
|
||||
.tabulator-col-content .tabulator-arrow{
|
||||
border-top: 6px solid $sortArrowActive;
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.tabulator-frozen{
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
|
||||
// background-color: inherit;
|
||||
|
||||
z-index: 10;
|
||||
|
||||
&.tabulator-frozen-left{
|
||||
border-right:2px solid $rowBorderColor;
|
||||
}
|
||||
|
||||
&.tabulator-frozen-right{
|
||||
border-left:2px solid $rowBorderColor;
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-calcs-holder{
|
||||
box-sizing:border-box;
|
||||
min-width:200%;
|
||||
|
||||
background:darken($headerBackgroundColor, 5%) !important;
|
||||
|
||||
.tabulator-row{
|
||||
background:darken($headerBackgroundColor, 5%) !important;
|
||||
|
||||
.tabulator-col-resize-handle{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
border-top:1px solid $rowBorderColor;
|
||||
border-bottom:1px solid $headerSeperatorColor;
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
//scrolling element to hold table
|
||||
.tabulator-tableHolder{
|
||||
position:relative;
|
||||
width:100%;
|
||||
white-space: nowrap;
|
||||
overflow:auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
&:focus{
|
||||
outline: none;
|
||||
}
|
||||
|
||||
//default placeholder element
|
||||
.tabulator-placeholder{
|
||||
position: absolute;
|
||||
box-sizing:border-box;
|
||||
display: flex;
|
||||
align-items:center;
|
||||
|
||||
top:0;
|
||||
left:0;
|
||||
height:100%;
|
||||
width:100%;
|
||||
|
||||
span{
|
||||
display: inline-block;
|
||||
|
||||
margin:0 auto;
|
||||
padding:10px;
|
||||
|
||||
color:#000;
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
//element to hold table rows
|
||||
.tabulator-table{
|
||||
position:relative;
|
||||
display:inline-block;
|
||||
background-color:$rowBackgroundColor;
|
||||
white-space: nowrap;
|
||||
overflow:visible;
|
||||
color:$rowTextColor;
|
||||
|
||||
.tabulator-row{
|
||||
&.tabulator-calcs{
|
||||
font-weight: bold;
|
||||
background:darken($rowAltBackgroundColor, 5%) !important;
|
||||
|
||||
&.tabulator-calcs-top{
|
||||
border-bottom:2px solid $rowBorderColor;
|
||||
}
|
||||
|
||||
&.tabulator-calcs-bottom{
|
||||
border-top:2px solid $rowBorderColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//row element
|
||||
.tabulator-row{
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
|
||||
min-height:$textSize + ($headerMargin * 2);
|
||||
background-color: $rowBackgroundColor;
|
||||
border-bottom:1px solid $rowBorderColor;
|
||||
|
||||
&:nth-child(even){
|
||||
background-color: $rowAltBackgroundColor;
|
||||
}
|
||||
|
||||
&.tabulator-selectable:hover{
|
||||
background-color:$rowHoverBackground;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.tabulator-selected{
|
||||
background-color:$rowSelectedBackground;
|
||||
}
|
||||
|
||||
&.tabulator-selected:hover{
|
||||
background-color:$rowSelectedBackgroundHover;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.tabulator-moving{
|
||||
position: absolute;
|
||||
|
||||
border-top:1px solid $rowBorderColor;
|
||||
border-bottom:1px solid $rowBorderColor;
|
||||
|
||||
pointer-events: none !important;
|
||||
z-index:15;
|
||||
}
|
||||
|
||||
.tabulator-frozen{
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
|
||||
background-color: inherit;
|
||||
|
||||
z-index: 10;
|
||||
|
||||
&.tabulator-frozen-left{
|
||||
border-right:2px solid $rowBorderColor;
|
||||
}
|
||||
|
||||
&.tabulator-frozen-right{
|
||||
border-left:2px solid $rowBorderColor;
|
||||
}
|
||||
}
|
||||
|
||||
//cell element
|
||||
.tabulator-cell{
|
||||
display:inline-block;
|
||||
position: relative;
|
||||
box-sizing:border-box;
|
||||
padding:4px;
|
||||
border-right:1px solid $rowBorderColor;
|
||||
vertical-align:middle;
|
||||
white-space:nowrap;
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
|
||||
&:last-of-type{
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
&.tabulator-editing{
|
||||
border:1px solid $editBoxColor;
|
||||
padding: 0;
|
||||
|
||||
input, select{
|
||||
border:1px;
|
||||
background:transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&.tabulator-validation-fail{
|
||||
border:1px solid $errorColor;
|
||||
input, select{
|
||||
border:1px;
|
||||
background:transparent;
|
||||
|
||||
color: $errorColor;
|
||||
}
|
||||
}
|
||||
|
||||
//hide left resize handle on first column
|
||||
&:first-child{
|
||||
.tabulator-col-resize-handle.prev{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
//movable row handle
|
||||
&.tabulator-row-handle{
|
||||
|
||||
display: inline-flex;
|
||||
align-items:center;
|
||||
|
||||
-moz-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-o-user-select: none;
|
||||
|
||||
//handle holder
|
||||
.tabulator-row-handle-box{
|
||||
width:80%;
|
||||
|
||||
//Hamburger element
|
||||
.tabulator-row-handle-bar{
|
||||
width:100%;
|
||||
height:3px;
|
||||
margin:2px 10% 0 10%;
|
||||
background:#666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//row grouping element
|
||||
&.tabulator-group{
|
||||
|
||||
box-sizing:border-box;
|
||||
border-bottom:1px solid #999;
|
||||
border-right:1px solid $rowBorderColor;
|
||||
border-top:1px solid #999;
|
||||
padding:5px;
|
||||
padding-left:10px;
|
||||
background:#fafafa;
|
||||
font-weight:bold;
|
||||
|
||||
min-width: 100%;
|
||||
|
||||
&:hover{
|
||||
cursor:pointer;
|
||||
background-color:rgba(0,0,0,.1);
|
||||
}
|
||||
|
||||
&.tabulator-group-visible{
|
||||
.tabulator-arrow{
|
||||
margin-right:10px;
|
||||
border-left: 6px solid transparent;
|
||||
border-right: 6px solid transparent;
|
||||
border-top: 6px solid $sortArrowActive;
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.tabulator-group-level-1{
|
||||
.tabulator-arrow{
|
||||
margin-left:20px;
|
||||
}
|
||||
}
|
||||
|
||||
&.tabulator-group-level-2{
|
||||
.tabulator-arrow{
|
||||
margin-left:40px;
|
||||
}
|
||||
}
|
||||
|
||||
&.tabulator-group-level-3{
|
||||
.tabulator-arrow{
|
||||
margin-left:60px;
|
||||
}
|
||||
}
|
||||
|
||||
&.tabulator-group-level-4{
|
||||
.tabulator-arrow{
|
||||
margin-left:80px;
|
||||
}
|
||||
}
|
||||
|
||||
&.tabulator-group-level-5{
|
||||
.tabulator-arrow{
|
||||
margin-left:1000px;
|
||||
}
|
||||
}
|
||||
|
||||
//sorting arrow
|
||||
.tabulator-arrow{
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-right:16px;
|
||||
border-top: 6px solid transparent;
|
||||
border-bottom: 6px solid transparent;
|
||||
border-right: 0;
|
||||
border-left: 6px solid $sortArrowActive;
|
||||
vertical-align:middle;
|
||||
}
|
||||
|
||||
span{
|
||||
margin-left:10px;
|
||||
color:#666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//column resize handles
|
||||
.tabulator-col-resize-handle{
|
||||
position:absolute;
|
||||
right:0;
|
||||
top:0;
|
||||
bottom:0;
|
||||
width:5px;
|
||||
|
||||
&.prev{
|
||||
left:0;
|
||||
right:auto;
|
||||
}
|
||||
|
||||
&:hover{
|
||||
cursor:ew-resize;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//footer element
|
||||
.tabulator-footer{
|
||||
padding:5px 10px;
|
||||
border-top:1px solid $footerSeperatorColor;
|
||||
background-color: $footerBackgroundColor;
|
||||
text-align:right;
|
||||
color: $footerTextColor;
|
||||
font-weight:bold;
|
||||
white-space:nowrap;
|
||||
user-select:none;
|
||||
|
||||
-moz-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-o-user-select: none;
|
||||
|
||||
.tabulator-calcs-holder{
|
||||
box-sizing:border-box;
|
||||
width:calc("100% + 20px");
|
||||
margin:-5px -10px 5px -10px;
|
||||
|
||||
text-align: left;
|
||||
|
||||
background:darken($footerBackgroundColor, 5%) !important;
|
||||
|
||||
.tabulator-row{
|
||||
background:darken($footerBackgroundColor, 5%) !important;
|
||||
|
||||
.tabulator-col-resize-handle{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
border-bottom:1px solid $footerBackgroundColor;
|
||||
border-top:1px solid $rowBorderColor;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
&:only-child{
|
||||
margin-bottom:-5px;
|
||||
border-bottom:none;
|
||||
}
|
||||
}
|
||||
|
||||
//pagination container element
|
||||
.tabulator-pages{
|
||||
margin:0 7px;
|
||||
}
|
||||
|
||||
//pagination button
|
||||
.tabulator-page{
|
||||
display:inline-block;
|
||||
margin:0 2px;
|
||||
border:1px solid $footerBorderColor;
|
||||
border-radius:3px;
|
||||
padding:2px 5px;
|
||||
background:rgba(255,255,255,.2);
|
||||
color: $footerTextColor;
|
||||
font-family:inherit;
|
||||
font-weight:inherit;
|
||||
font-size:inherit;
|
||||
|
||||
&.active{
|
||||
color:#d00;
|
||||
}
|
||||
|
||||
&:disabled{
|
||||
opacity:.5;
|
||||
}
|
||||
|
||||
&:not(.disabled){
|
||||
&:hover{
|
||||
cursor:pointer;
|
||||
background:rgba(0,0,0,.2);
|
||||
color:#fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//holding div that contains loader and covers tabulator element to prevent interaction
|
||||
.tablulator-loader{
|
||||
position:absolute;
|
||||
display: flex;
|
||||
align-items:center;
|
||||
|
||||
top:0;
|
||||
left:0;
|
||||
z-index:100;
|
||||
|
||||
height:100%;
|
||||
width:100%;
|
||||
background:rgba(0,0,0,.4);
|
||||
text-align:center;
|
||||
|
||||
//loading message element
|
||||
.tabulator-loader-msg{
|
||||
display:inline-block;
|
||||
|
||||
margin:0 auto;
|
||||
padding:10px 20px;
|
||||
|
||||
border-radius:10px;
|
||||
|
||||
background:#fff;
|
||||
font-weight:bold;
|
||||
font-size:16px;
|
||||
|
||||
//loading message
|
||||
&.tabulator-loading{
|
||||
border:4px solid #333;
|
||||
color:#000;
|
||||
}
|
||||
|
||||
//error message
|
||||
&.tabulator-error{
|
||||
border:4px solid #D00;
|
||||
color:#590000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
689
js/tabulator/src/scss/tabulator_site.scss
Normal file
689
js/tabulator/src/scss/tabulator_site.scss
Normal file
@ -0,0 +1,689 @@
|
||||
|
||||
//Main Theme Variables
|
||||
$backgroundColor: #fff; //background color of tabulator
|
||||
$borderColor:#222; //border to tablulator
|
||||
$textSize:14px; //table text size
|
||||
|
||||
//header themeing
|
||||
$headerBackgroundColor:#222; //border to tablulator
|
||||
$headerTextColor:#fff; //header text colour
|
||||
$headerBorderColor:#aaa; //header border color
|
||||
$headerSeperatorColor:#3FB449; //header bottom seperator color
|
||||
$headerMargin:4px; //padding round header
|
||||
|
||||
//column header arrows
|
||||
$sortArrowActive: #3FB449;
|
||||
$sortArrowInactive: #bbb;
|
||||
|
||||
//row themeing
|
||||
$rowBackgroundColor:#fff; //table row background color
|
||||
$rowAltBackgroundColor:#EFEFEF; //table row background color
|
||||
$rowBorderColor:#aaa; //table border color
|
||||
$rowTextColor:#333; //table text color
|
||||
$rowHoverBackground:#bbb; //row background color on hover
|
||||
|
||||
$rowSelectedBackground: #9ABCEA; //row background color when selected
|
||||
$rowSelectedBackgroundHover: #769BCC;//row background color when selected and hovered
|
||||
|
||||
$editBoxColor:#1D68CD; //border color for edit boxes
|
||||
$errorColor:#dd0000; //error indication
|
||||
|
||||
//footer themeing
|
||||
$footerBackgroundColor:#222; //border to tablulator
|
||||
$footerTextColor:#222; //footer text colour
|
||||
$footerBorderColor:#aaa; //footer border color
|
||||
$footerSeperatorColor:#3FB449; //footer bottom seperator color
|
||||
|
||||
|
||||
|
||||
//Tabulator Containing Element
|
||||
.tabulator{
|
||||
position: relative;
|
||||
|
||||
border-bottom: 5px solid $borderColor;
|
||||
|
||||
background-color: $backgroundColor;
|
||||
|
||||
font-size:$textSize;
|
||||
text-align: left;
|
||||
overflow:hidden;
|
||||
|
||||
-webkit-transform: translatez(0);
|
||||
-moz-transform: translatez(0);
|
||||
-ms-transform: translatez(0);
|
||||
-o-transform: translatez(0);
|
||||
transform: translatez(0);
|
||||
|
||||
&[tabulator-layout="fitDataFill"]{
|
||||
.tabulator-tableHolder{
|
||||
.tabulator-table{
|
||||
min-width:100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[tabulator-layout="fitColumns"]{
|
||||
.tabulator-row{
|
||||
.tabulator-cell{
|
||||
&:last-of-type{
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&.tabulator-block-select{
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
//column header containing element
|
||||
.tabulator-header{
|
||||
position:relative;
|
||||
box-sizing: border-box;
|
||||
|
||||
width:100%;
|
||||
|
||||
border-bottom:3px solid $headerSeperatorColor;
|
||||
background-color: $headerBackgroundColor;
|
||||
color: $headerTextColor;
|
||||
font-weight:bold;
|
||||
|
||||
white-space: nowrap;
|
||||
overflow:hidden;
|
||||
|
||||
-moz-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-o-user-select: none;
|
||||
|
||||
//individual column header element
|
||||
.tabulator-col{
|
||||
display:inline-block;
|
||||
|
||||
position:relative;
|
||||
box-sizing:border-box;
|
||||
border-right:1px solid $headerBorderColor;
|
||||
background-color: $headerBackgroundColor;
|
||||
text-align:left;
|
||||
vertical-align: bottom;
|
||||
overflow: hidden;
|
||||
|
||||
&.tabulator-moving{
|
||||
position: absolute;
|
||||
border:1px solid $headerSeperatorColor;
|
||||
background:darken($headerBackgroundColor, 10%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
//hold content of column header
|
||||
.tabulator-col-content{
|
||||
position: relative;
|
||||
padding:8px;
|
||||
|
||||
//hold title of column header
|
||||
.tabulator-col-title{
|
||||
box-sizing:border-box;
|
||||
width: 100%;
|
||||
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
vertical-align:bottom;
|
||||
|
||||
//element to hold title editor
|
||||
.tabulator-title-editor{
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
|
||||
border:1px solid #999;
|
||||
|
||||
padding:1px;
|
||||
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
//column sorter arrow
|
||||
.tabulator-arrow{
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top:14px;
|
||||
right:8px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 6px solid transparent;
|
||||
border-right: 6px solid transparent;
|
||||
border-bottom: 6px solid $sortArrowInactive;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
//complex header column group
|
||||
&.tabulator-col-group{
|
||||
|
||||
//gelement to hold sub columns in column group
|
||||
.tabulator-col-group-cols{
|
||||
position:relative;
|
||||
display: flex;
|
||||
|
||||
border-top:1px solid $headerBorderColor;
|
||||
overflow: hidden;
|
||||
|
||||
.tabulator-col:last-child{
|
||||
margin-right:-1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//hide left resize handle on first column
|
||||
&:first-child{
|
||||
.tabulator-col-resize-handle.prev{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
//placeholder element for sortable columns
|
||||
&.ui-sortable-helper{
|
||||
position: absolute;
|
||||
background-color: $headerBackgroundColor !important;
|
||||
border:1px solid $headerBorderColor;
|
||||
}
|
||||
|
||||
//header filter containing element
|
||||
.tabulator-header-filter{
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
margin-top:2px;
|
||||
width:100%;
|
||||
text-align: center;
|
||||
|
||||
//styling adjustment for inbuilt editors
|
||||
textarea{
|
||||
height:auto !important;
|
||||
}
|
||||
|
||||
svg{
|
||||
margin-top: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
//styling child elements for sortable columns
|
||||
&.tabulator-sortable{
|
||||
.tabulator-col-title{
|
||||
padding-right:25px;
|
||||
}
|
||||
|
||||
&:hover{
|
||||
cursor:pointer;
|
||||
background-color:darken($headerBackgroundColor, 10%);
|
||||
}
|
||||
|
||||
&[aria-sort="none"]{
|
||||
.tabulator-col-content .tabulator-arrow{
|
||||
border-top: none;
|
||||
border-bottom: 6px solid $sortArrowInactive;
|
||||
}
|
||||
}
|
||||
|
||||
&[aria-sort="asc"]{
|
||||
.tabulator-col-content .tabulator-arrow{
|
||||
border-top: none;
|
||||
border-bottom: 6px solid $sortArrowActive;
|
||||
}
|
||||
}
|
||||
|
||||
&[aria-sort="desc"]{
|
||||
.tabulator-col-content .tabulator-arrow{
|
||||
border-top: 6px solid $sortArrowActive;
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.tabulator-frozen{
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
|
||||
// background-color: inherit;
|
||||
|
||||
z-index: 10;
|
||||
|
||||
&.tabulator-frozen-left{
|
||||
border-right:2px solid $rowBorderColor;
|
||||
}
|
||||
|
||||
&.tabulator-frozen-right{
|
||||
border-left:2px solid $rowBorderColor;
|
||||
}
|
||||
}
|
||||
|
||||
.tabulator-calcs-holder{
|
||||
box-sizing:border-box;
|
||||
min-width:200%;
|
||||
|
||||
background:lighten($headerBackgroundColor, 10%) !important;
|
||||
|
||||
.tabulator-row{
|
||||
background:lighten($headerBackgroundColor, 10%) !important;
|
||||
|
||||
.tabulator-col-resize-handle{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
border-top:1px solid $rowBorderColor;
|
||||
// border-bottom:1px solid $headerBorderColor;
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
//scrolling element to hold table
|
||||
.tabulator-tableHolder{
|
||||
position:relative;
|
||||
width:100%;
|
||||
white-space: nowrap;
|
||||
overflow:auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
&:focus{
|
||||
outline: none;
|
||||
}
|
||||
|
||||
//default placeholder element
|
||||
.tabulator-placeholder{
|
||||
position: absolute;
|
||||
box-sizing:border-box;
|
||||
display: flex;
|
||||
align-items:center;
|
||||
|
||||
top:0;
|
||||
left:0;
|
||||
height:100%;
|
||||
width:100%;
|
||||
|
||||
span{
|
||||
display: inline-block;
|
||||
|
||||
margin:0 auto;
|
||||
padding:10px;
|
||||
|
||||
color:$headerSeperatorColor;
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
//element to hold table rows
|
||||
.tabulator-table{
|
||||
position:relative;
|
||||
display:inline-block;
|
||||
background-color:$rowBackgroundColor;
|
||||
white-space: nowrap;
|
||||
overflow:visible;
|
||||
color:$rowTextColor;
|
||||
|
||||
.tabulator-row{
|
||||
&.tabulator-calcs{
|
||||
font-weight: bold;
|
||||
background:lighten($headerBackgroundColor, 15%) !important;
|
||||
color:$headerTextColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//row element
|
||||
.tabulator-row{
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
min-height:$textSize + ($headerMargin * 2);
|
||||
background-color: $rowBackgroundColor;
|
||||
|
||||
|
||||
&.tabulator-row-even{
|
||||
background-color: $rowAltBackgroundColor;
|
||||
}
|
||||
|
||||
&.tabulator-selectable:hover{
|
||||
background-color:$rowHoverBackground;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.tabulator-selected{
|
||||
background-color:$rowSelectedBackground;
|
||||
}
|
||||
|
||||
&.tabulator-selected:hover{
|
||||
background-color:$rowSelectedBackgroundHover;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.tabulator-row-moving{
|
||||
border:1px solid #000;
|
||||
background:#fff;
|
||||
}
|
||||
|
||||
&.tabulator-moving{
|
||||
position: absolute;
|
||||
|
||||
border-top:1px solid $rowBorderColor;
|
||||
border-bottom:1px solid $rowBorderColor;
|
||||
|
||||
pointer-events: none !important;
|
||||
z-index:15;
|
||||
}
|
||||
|
||||
.tabulator-frozen{
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
|
||||
background-color: inherit;
|
||||
|
||||
z-index: 10;
|
||||
|
||||
&.tabulator-frozen-left{
|
||||
border-right:2px solid $rowBorderColor;
|
||||
}
|
||||
|
||||
&.tabulator-frozen-right{
|
||||
border-left:2px solid $rowBorderColor;
|
||||
}
|
||||
}
|
||||
|
||||
//cell element
|
||||
.tabulator-cell{
|
||||
display:inline-block;
|
||||
position: relative;
|
||||
box-sizing:border-box;
|
||||
padding:6px;
|
||||
border-right:1px solid $rowBorderColor;
|
||||
vertical-align:middle;
|
||||
white-space:nowrap;
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
|
||||
|
||||
&.tabulator-editing{
|
||||
border:1px solid $editBoxColor;
|
||||
padding: 0;
|
||||
|
||||
input, select{
|
||||
border:1px;
|
||||
background:transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&.tabulator-validation-fail{
|
||||
border:1px solid $errorColor;
|
||||
input, select{
|
||||
border:1px;
|
||||
background:transparent;
|
||||
|
||||
color: $errorColor;
|
||||
}
|
||||
}
|
||||
|
||||
//hide left resize handle on first column
|
||||
&:first-child{
|
||||
.tabulator-col-resize-handle.prev{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
//movable row handle
|
||||
&.tabulator-row-handle{
|
||||
|
||||
display: inline-flex;
|
||||
align-items:center;
|
||||
|
||||
-moz-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-o-user-select: none;
|
||||
|
||||
//handle holder
|
||||
.tabulator-row-handle-box{
|
||||
width:80%;
|
||||
|
||||
//Hamburger element
|
||||
.tabulator-row-handle-bar{
|
||||
width:100%;
|
||||
height:3px;
|
||||
margin:2px 10% 0 10%;
|
||||
background:#666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//row grouping element
|
||||
&.tabulator-group{
|
||||
box-sizing:border-box;
|
||||
border-right:1px solid $rowBorderColor;
|
||||
border-top:1px solid #000;
|
||||
border-bottom:2px solid $headerSeperatorColor;
|
||||
padding:5px;
|
||||
padding-left:10px;
|
||||
background:$headerBackgroundColor;
|
||||
color:$headerTextColor;
|
||||
font-weight:bold;
|
||||
|
||||
min-width: 100%;
|
||||
|
||||
&:hover{
|
||||
cursor:pointer;
|
||||
background-color:darken($headerBackgroundColor, 10%);
|
||||
}
|
||||
|
||||
&.tabulator-group-visible{
|
||||
.tabulator-arrow{
|
||||
margin-right:10px;
|
||||
border-left: 6px solid transparent;
|
||||
border-right: 6px solid transparent;
|
||||
border-top: 6px solid $sortArrowActive;
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.tabulator-group-level-1{
|
||||
.tabulator-arrow{
|
||||
margin-left:20px;
|
||||
}
|
||||
}
|
||||
|
||||
&.tabulator-group-level-2{
|
||||
.tabulator-arrow{
|
||||
margin-left:40px;
|
||||
}
|
||||
}
|
||||
|
||||
&.tabulator-group-level-3{
|
||||
.tabulator-arrow{
|
||||
margin-left:60px;
|
||||
}
|
||||
}
|
||||
|
||||
&.tabulator-group-level-4{
|
||||
.tabulator-arrow{
|
||||
margin-left:80px;
|
||||
}
|
||||
}
|
||||
|
||||
&.tabulator-group-level-5{
|
||||
.tabulator-arrow{
|
||||
margin-left:1000px;
|
||||
}
|
||||
}
|
||||
|
||||
//sorting arrow
|
||||
.tabulator-arrow{
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-right:16px;
|
||||
border-top: 6px solid transparent;
|
||||
border-bottom: 6px solid transparent;
|
||||
border-right: 0;
|
||||
border-left: 6px solid $sortArrowActive;
|
||||
vertical-align:middle;
|
||||
}
|
||||
|
||||
span{
|
||||
margin-left:10px;
|
||||
color:$headerSeperatorColor;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
//footer element
|
||||
.tabulator-footer{
|
||||
padding:5px 10px;
|
||||
padding-top:8px;
|
||||
border-top:3px solid $footerSeperatorColor;
|
||||
background-color: $footerBackgroundColor;
|
||||
text-align:right;
|
||||
color: $footerTextColor;
|
||||
font-weight:bold;
|
||||
white-space:nowrap;
|
||||
user-select:none;
|
||||
|
||||
-moz-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-o-user-select: none;
|
||||
|
||||
.tabulator-calcs-holder{
|
||||
box-sizing:border-box;
|
||||
width:calc("100% + 20px");
|
||||
margin:-8px -10px 8px -10px;
|
||||
|
||||
text-align: left;
|
||||
|
||||
background:lighten($footerBackgroundColor, 10%) !important;
|
||||
|
||||
.tabulator-row{
|
||||
background:lighten($footerBackgroundColor, 10%) !important;
|
||||
color:$headerTextColor !important;
|
||||
|
||||
.tabulator-col-resize-handle{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// border-top:1px solid $rowBorderColor;
|
||||
border-bottom:1px solid $rowBorderColor;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
&:only-child{
|
||||
margin-bottom:-5px;
|
||||
border-bottom:none;
|
||||
}
|
||||
}
|
||||
|
||||
//pagination container element
|
||||
.tabulator-pages{
|
||||
margin:0 7px;
|
||||
}
|
||||
|
||||
//pagination button
|
||||
.tabulator-page{
|
||||
display:inline-block;
|
||||
|
||||
margin:0 2px;
|
||||
padding:2px 5px;
|
||||
|
||||
border:1px solid $footerBorderColor;
|
||||
border-radius:3px;
|
||||
|
||||
background:#fff;
|
||||
|
||||
color: $footerTextColor;
|
||||
font-family:inherit;
|
||||
font-weight:inherit;
|
||||
font-size:inherit;
|
||||
|
||||
&.active{
|
||||
color:$footerSeperatorColor;
|
||||
}
|
||||
|
||||
&:disabled{
|
||||
opacity:.5;
|
||||
}
|
||||
|
||||
&:not(.disabled){
|
||||
&:hover{
|
||||
cursor:pointer;
|
||||
background:rgba(0,0,0,.2);
|
||||
color:#fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//column resize handles
|
||||
.tabulator-col-resize-handle{
|
||||
position:absolute;
|
||||
right:0;
|
||||
top:0;
|
||||
bottom:0;
|
||||
width:5px;
|
||||
|
||||
&.prev{
|
||||
left:0;
|
||||
right:auto;
|
||||
}
|
||||
|
||||
&:hover{
|
||||
cursor:ew-resize;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//holding div that contains loader and covers tabulator element to prevent interaction
|
||||
.tablulator-loader{
|
||||
position:absolute;
|
||||
display: flex;
|
||||
align-items:center;
|
||||
|
||||
top:0;
|
||||
left:0;
|
||||
z-index:100;
|
||||
|
||||
height:100%;
|
||||
width:100%;
|
||||
background:rgba(0,0,0,.4);
|
||||
text-align:center;
|
||||
|
||||
//loading message element
|
||||
.tabulator-loader-msg{
|
||||
display:inline-block;
|
||||
|
||||
margin:0 auto;
|
||||
padding:10px 20px;
|
||||
|
||||
border-radius:10px;
|
||||
|
||||
background:#fff;
|
||||
font-weight:bold;
|
||||
font-size:16px;
|
||||
|
||||
//loading message
|
||||
&.tabulator-loading{
|
||||
border:4px solid #333;
|
||||
color:#000;
|
||||
}
|
||||
|
||||
//error message
|
||||
&.tabulator-error{
|
||||
border:4px solid #D00;
|
||||
color:#590000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user