bike
/
Yellow-Bike-Database-Mirror
mirror of https://github.com/fspc/Yellow-Bike-Database.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Adds the nice tabulator library!

devel
Jonathan Rosenbaum 7 years ago
parent
cc6346a1b7
commit
407893b872
73 changed files with 37114 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 574
      css/tabulator/bootstrap/tabulator_bootstrap.css
  2. 3
      css/tabulator/bootstrap/tabulator_bootstrap.min.css
  3. 1
      css/tabulator/bootstrap/tabulator_bootstrap.min.css.map
  4. 1052
      css/tabulator/semantic-ui/tabulator_semantic-ui.css
  5. 3
      css/tabulator/semantic-ui/tabulator_semantic-ui.min.css
  6. 1
      css/tabulator/semantic-ui/tabulator_semantic-ui.min.css.map
  7. 535
      css/tabulator/tabulator.css
  8. 3
      css/tabulator/tabulator.min.css
  9. 1
      css/tabulator/tabulator.min.css.map
  10. 539
      css/tabulator/tabulator_midnight.css
  11. 3
      css/tabulator/tabulator_midnight.min.css
  12. 1
      css/tabulator/tabulator_midnight.min.css.map
  13. 562
      css/tabulator/tabulator_modern.css
  14. 3
      css/tabulator/tabulator_modern.min.css
  15. 1
      css/tabulator/tabulator_modern.min.css.map
  16. 534
      css/tabulator/tabulator_simple.css
  17. 3
      css/tabulator/tabulator_simple.min.css
  18. 1
      css/tabulator/tabulator_simple.min.css.map
  19. 533
      css/tabulator/tabulator_site.css
  20. 3
      css/tabulator/tabulator_site.min.css
  21. 1
      css/tabulator/tabulator_site.min.css.map
  22. 5
      js/tabulator/.gitignore
  23. 21
      js/tabulator/LICENSE
  24. 74
      js/tabulator/README.md
  25. 36
      js/tabulator/bower.json
  26. 14526
      js/tabulator/dist/js/tabulator.js
  27. 6
      js/tabulator/dist/js/tabulator.min.js
  28. 100
      js/tabulator/gulpfile.js
  29. 62
      js/tabulator/package.json
  30. 479
      js/tabulator/src/js/cell.js
  31. 896
      js/tabulator/src/js/column.js
  32. 462
      js/tabulator/src/js/column_manager.js
  33. 1107
      js/tabulator/src/js/core.js
  34. 58
      js/tabulator/src/js/extensions/accessor.js
  35. 187
      js/tabulator/src/js/extensions/ajax.js
  36. 381
      js/tabulator/src/js/extensions/calculation_colums.js
  37. 256
      js/tabulator/src/js/extensions/download.js
  38. 580
      js/tabulator/src/js/extensions/edit.js
  39. 453
      js/tabulator/src/js/extensions/filter.js
  40. 273
      js/tabulator/src/js/extensions/format.js
  41. 162
      js/tabulator/src/js/extensions/frozen_columns.js
  42. 641
      js/tabulator/src/js/extensions/group_rows.js
  43. 117
      js/tabulator/src/js/extensions/history.js
  44. 197
      js/tabulator/src/js/extensions/html_table_import.js
  45. 333
      js/tabulator/src/js/extensions/keybindings.js
  46. 160
      js/tabulator/src/js/extensions/layout.js
  47. 196
      js/tabulator/src/js/extensions/localize.js
  48. 187
      js/tabulator/src/js/extensions/moveable_columns.js
  49. 172
      js/tabulator/src/js/extensions/moveable_rows.js
  50. 58
      js/tabulator/src/js/extensions/mutator.js
  51. 412
      js/tabulator/src/js/extensions/page.js
  52. 155
      js/tabulator/src/js/extensions/persistent_layout.js
  53. 119
      js/tabulator/src/js/extensions/resize_columns.js
  54. 84
      js/tabulator/src/js/extensions/responsive_layout.js
  55. 242
      js/tabulator/src/js/extensions/select_row.js
  56. 341
      js/tabulator/src/js/extensions/sort.js
  57. 178
      js/tabulator/src/js/extensions/validate.js
  58. 22
      js/tabulator/src/js/extensions_enabled.js
  59. 65
      js/tabulator/src/js/footer_manager.js
  60. 32
      js/tabulator/src/js/jquery_wrapper.js
  61. 92
      js/tabulator/src/js/polyfills.js
  62. 487
      js/tabulator/src/js/row.js
  63. 1128
      js/tabulator/src/js/row_manager.js
  64. 750
      js/tabulator/src/scss/bootstrap/tabulator_bootstrap.scss
  65. 870
      js/tabulator/src/scss/bootstrap/variables.scss
  66. 1056
      js/tabulator/src/scss/semantic-ui/tabulator_semantic-ui.scss
  67. 830
      js/tabulator/src/scss/semantic-ui/variables.scss
  68. 248
      js/tabulator/src/scss/semantic-ui/variables_table.scss
  69. 686
      js/tabulator/src/scss/tabulator.scss
  70. 684
      js/tabulator/src/scss/tabulator_midnight.scss
  71. 722
      js/tabulator/src/scss/tabulator_modern.scss
  72. 680
      js/tabulator/src/scss/tabulator_simple.scss
  73. 689
      js/tabulator/src/scss/tabulator_site.scss

574
css/tabulator/bootstrap/tabulator_bootstrap.css
View 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
View File

File diff suppressed because one or more lines are too long

1
css/tabulator/bootstrap/tabulator_bootstrap.min.css.map
View File

File diff suppressed because one or more lines are too long

1052
css/tabulator/semantic-ui/tabulator_semantic-ui.css
View File

File diff suppressed because it is too large

3
css/tabulator/semantic-ui/tabulator_semantic-ui.min.css
View File

File diff suppressed because one or more lines are too long

1
css/tabulator/semantic-ui/tabulator_semantic-ui.min.css.map
View File

File diff suppressed because one or more lines are too long

535
css/tabulator/tabulator.css
View 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
View File

File diff suppressed because one or more lines are too long

1
css/tabulator/tabulator.min.css.map
View File

File diff suppressed because one or more lines are too long

539
css/tabulator/tabulator_midnight.css
View 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
View File

File diff suppressed because one or more lines are too long

1
css/tabulator/tabulator_midnight.min.css.map
View File

File diff suppressed because one or more lines are too long

562
css/tabulator/tabulator_modern.css
View 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
View File

File diff suppressed because one or more lines are too long

1
css/tabulator/tabulator_modern.min.css.map
View File

File diff suppressed because one or more lines are too long

534
css/tabulator/tabulator_simple.css
View 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
View File

File diff suppressed because one or more lines are too long

1
css/tabulator/tabulator_simple.min.css.map
View File

File diff suppressed because one or more lines are too long

533
css/tabulator/tabulator_site.css
View 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
View File

File diff suppressed because one or more lines are too long

1
css/tabulator/tabulator_site.min.css.map
View File

File diff suppressed because one or more lines are too long

5
js/tabulator/.gitignore
View File

@ -0,0 +1,5 @@
*.sublime-project
*.sublime-workspace
node_modules/
npm-debug.log

21
js/tabulator/LICENSE
View 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
View File

@ -0,0 +1,74 @@
![Tabluator Table](http://olifolkerd.github.io/tabulator/images/tabulator.png)
### 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)
***
![Tabluator Table](http://tabulator.info/images/tabulator_table.jpg)
***
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:
![Tabluator Features](http://olifolkerd.github.io/tabulator/images/featurelist_share.png)
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
View 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
View File

File diff suppressed because it is too large

6
js/tabulator/dist/js/tabulator.min.js
View File

File diff suppressed because one or more lines are too long

100
js/tabulator/gulpfile.js
View 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
View 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
View 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
View 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 || "&nbsp"));
});
}else{
titleElement.val(def.title || "&nbsp");
}
}else{
if(def.field){
table.extensions.localize.bind("columns." + def.field, function(text){
self._formatColumnHeaderTitle(titleHolderElement, text || (def.title || "&nbsp"));
});
}else{
self._formatColumnHeaderTitle(titleHolderElement, def.title || "&nbsp");
}
}
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
View 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
View File

File diff suppressed because it is too large

58
js/tabulator/src/js/extensions/accessor.js
View 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
View 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
View 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
View 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
View 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
View 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
View 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 = {
'&': '&amp;',
'<': '&lt;',
'>': '&gt;',
'"': '&quot;',
"'": '&#39;',
'/': '&#x2F;',
'`': '&#x60;',
'=': '&#x3D;'
};
return String(value).replace(/[&<>"'`=\/]/g, function (s) {
return entityMap[s];
});
}else{
return value;
}
};
Format.prototype.emptyToSpace = function(value){
return value === null ? "&nbsp" : 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View File

File diff suppressed because it is too large

750
js/tabulator/src/scss/bootstrap/tabulator_bootstrap.scss
View 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
View 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
View File

File diff suppressed because it is too large

830
js/tabulator/src/scss/semantic-ui/variables.scss
View 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
View 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
View 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
View 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
View 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
View 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
View 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;
}
}
}
}
Write Preview
Loading…
Cancel
Save