@websy/websy-designs 1.7.19 → 1.7.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/websy-designs-es6.debug.js +138 -67
  2. package/dist/websy-designs-es6.js +141 -63
  3. package/dist/websy-designs-es6.min.js +1 -1
  4. package/dist/websy-designs.debug.js +569 -67
  5. package/dist/websy-designs.js +607 -63
  6. package/dist/websy-designs.min.css +1 -1
  7. package/dist/websy-designs.min.js +1 -1
  8. package/package.json +1 -1
package/dist/websy-designs-es6.debug.js CHANGED
@@ -1471,8 +1471,8 @@ class WebsyDragDrop {
1471
1471
  el.innerHTML = html
1472
1472
  this.options.items.forEach((item, i) => {
1473
1473
  if (item.component) {
1474
- if (item.isQlikPlugin && WebsyDesigns.QlikPlugin[item.component]) {
1475
- item.instance = new WebsyDesigns.QlikPlugin[item.component](`${item.id}_component`, item.options)
1474
+ if (item.isQlikPlugin && WebsyDesigns.QlikPlugins[item.component]) {
1475
+ item.instance = new WebsyDesigns.QlikPlugins[item.component](`${item.id}_component`, item.options)
1476
1476
  }
1477
1477
  else if (WebsyDesigns[item.component]) {
1478
1478
  item.instance = new WebsyDesigns[item.component](`${item.id}_component`, item.options)
@@ -4650,11 +4650,21 @@ class Switch {
4650
4650
  }
4651
4651
  disable () {
4652
4652
  this.options.enabled = false
4653
- this.render()
4653
+ let method = this.options.enabled === true ? 'add' : 'remove'
4654
+ const el = document.getElementById(`${this.elementId}_switch`)
4655
+ el.classList[method]('enabled')
4656
+ if (this.options.onToggle) {
4657
+ this.options.onToggle(this.options.enabled)
4658
+ }
4654
4659
  }
4655
4660
  enable () {
4656
4661
  this.options.enabled = true
4657
- this.render()
4662
+ let method = this.options.enabled === true ? 'add' : 'remove'
4663
+ const el = document.getElementById(`${this.elementId}_switch`)
4664
+ el.classList[method]('enabled')
4665
+ if (this.options.onToggle) {
4666
+ this.options.onToggle(this.options.enabled)
4667
+ }
4658
4668
  }
4659
4669
  handleClick (event) {
4660
4670
  this.options.enabled = !this.options.enabled
@@ -6041,7 +6051,7 @@ class WebsyTable3 {
6041
6051
  const el = document.getElementById(this.elementId)
6042
6052
  if (el) {
6043
6053
  let html = `
6044
- <div id='${this.elementId}_tableContainer' class='websy-vis-table-3 ${this.options.paging === 'pages' ? 'with-paging' : ''} ${this.options.virtualScroll === true ? 'with-virtual-scroll' : ''}'>
6054
+ <div id='${this.elementId}_tableContainer' class='websy-vis-table-3 ${this.options.paging === 'pages' ? 'with-paging' : ''} ${this.options.virtualScroll === true ? 'with-virtual-scroll' : ''} ${this.isTouchDevice === true && this.options.virtualScroll === true ? 'touch-device' : ''}'>
6045
6055
  <!--<div class="download-button">
6046
6056
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M16 11h5l-9 10-9-10h5v-11h8v11zm1 11h-10v2h10v-2z"/></svg>
6047
6057
  </div>-->
@@ -6561,11 +6571,11 @@ class WebsyTable3 {
6561
6571
  }
6562
6572
  }
6563
6573
  }
6564
- handleMouseDown (event) {
6565
- if (this.isTouchDevice === true) {
6574
+ handleMouseDown (event) {
6575
+ if (this.isTouchDevice) {
6566
6576
  return
6567
6577
  }
6568
- if (event.target.classList.contains('websy-scroll-handle-y')) {
6578
+ if (event.target.classList.contains('websy-scroll-handle-y')) {
6569
6579
  // set up the scroll start values
6570
6580
  this.scrollDragging = true
6571
6581
  this.scrollDirection = 'y'
@@ -6576,6 +6586,9 @@ class WebsyTable3 {
6576
6586
  // console.log(scrollHandleEl.offsetTop)
6577
6587
  }
6578
6588
  else if (event.target.classList.contains('websy-scroll-handle-x')) {
6589
+ if (this.isTouchDevice) {
6590
+ event.preventDefault()
6591
+ }
6579
6592
  this.scrollDragging = true
6580
6593
  this.scrollDirection = 'x'
6581
6594
  const scrollHandleEl = document.getElementById(`${this.elementId}_hScrollHandle`)
@@ -6583,9 +6596,12 @@ class WebsyTable3 {
6583
6596
  this.mouseXStart = event.pageX
6584
6597
  }
6585
6598
  }
6586
- handleMouseMove (event) {
6599
+ handleMouseMove (event) {
6587
6600
  // event.preventDefault()
6588
6601
  if (this.scrollDragging === true) {
6602
+ if (this.isTouchDevice) {
6603
+ event.preventDefault()
6604
+ }
6589
6605
  if (this.scrollDirection === 'y') {
6590
6606
  const diff = event.pageY - this.mouseYStart
6591
6607
  this.scrollY(diff)
@@ -6645,12 +6661,18 @@ class WebsyTable3 {
6645
6661
  }
6646
6662
  handleTouchEnd (event) {
6647
6663
  // console.log('touch end fired')
6664
+ this.scrollDragging = false
6665
+ this.cellDragging = false
6666
+ this.handleYStart = null
6667
+ this.mouseYStart = null
6668
+ this.handleXStart = null
6669
+ this.mouseXStart = null
6648
6670
  if (typeof event.targetTouches !== 'undefined') {
6649
6671
  this.isTouchScrolling = false
6650
- this.touchEndTime = (new Date()).getTime()
6651
- this.isPerpetual = true
6672
+ // this.touchEndTime = (new Date()).getTime()
6673
+ // this.isPerpetual = true
6652
6674
  // this.perpetualScroll()
6653
- this.touchStartTime = null
6675
+ // this.touchStartTime = null
6654
6676
  // const touchScrollEl = document.getElementById(`${this.elementId}_touchScroller`)
6655
6677
  // touchScrollEl.classList.add('hidden')
6656
6678
  }
@@ -6661,47 +6683,68 @@ class WebsyTable3 {
6661
6683
  event.preventDefault()
6662
6684
  event.stopPropagation()
6663
6685
  if (typeof event.targetTouches !== 'undefined' && event.targetTouches.length > 0) {
6664
- let deltaX = (this.mouseXStart - event.targetTouches[0].pageX)
6665
- let deltaY = (this.mouseYStart - event.targetTouches[0].pageY)
6666
- const hScrollContainerEl = document.getElementById(`${this.elementId}_hScrollContainer`)
6667
- const vScrollContainerEl = document.getElementById(`${this.elementId}_vScrollContainer`)
6668
- const hScrollHandleEl = document.getElementById(`${this.elementId}_hScrollHandle`)
6669
- const vScrollHandleEl = document.getElementById(`${this.elementId}_vScrollHandle`)
6670
- let translatedDeltaX = deltaX * (hScrollHandleEl.getBoundingClientRect().width / vScrollContainerEl.getBoundingClientRect().width)
6671
- let translatedDeltaY = deltaY * (vScrollHandleEl.getBoundingClientRect().height / vScrollContainerEl.getBoundingClientRect().height)
6672
- // need to adjust the delta so that it scrolls at a reasonable speed/distance
6673
- const scrollHandleXEl = document.getElementById(`${this.elementId}_hScrollHandle`)
6674
- const scrollHandleYEl = document.getElementById(`${this.elementId}_vScrollHandle`)
6675
- // if (Math.abs(deltaY) > this.sizes.cellHeight) {
6676
- // this.isTouchScrolling = true
6677
- // }
6678
- // else {
6679
- // this.isTouchScrolling = false
6680
- // }
6681
- // console.log('delta', this.mouseYStart, event.targetTouches[0].pageY, deltaY)
6682
- // deltaX = deltaX * (scrollHandleXEl.offsetWidth / this.sizes.scrollableWidth)
6683
- // deltaY = deltaY * (scrollHandleYEl.offsetHeight / this.sizes.bodyHeight)
6684
- // console.log('delta', deltaY)
6685
- // NW
6686
- // else if (Math.abs(deltaX) > 50) {
6687
- // this.isTouchScrolling = false
6688
- // }
6689
- this.currentClientY = event.targetTouches[0].pageY
6690
- this.currentTouchtime = (new Date()).getTime()
6691
- // end
6692
- // delta = Math.min(10, delta)
6693
- // delta = Math.max(-10, delta)
6694
- if (this.isTouchScrolling === true) {
6695
- // this.$scope.scrollTop += (delta / (this.$scope.layout.qHyperCube.qSize.qcy / this.$scope.rowsToLoad / (this.$scope.totalSpaceAvailable / 250)))
6696
- if (Math.abs(deltaX) > Math.abs(deltaY) && deltaX > 20) {
6697
- // this.scrollX(Math.max(-5, Math.min(5, translatedDeltaX)))
6698
- this.scrollX(translatedDeltaX)
6699
- }
6700
- else if (deltaY > 20) {
6701
- // this.scrollY(Math.max(-5, Math.min(5, translatedDeltaY)))
6702
- this.scrollY(translatedDeltaY)
6703
- }
6704
- }
6686
+ event.deltaX = this.touchXStart - event.targetTouches[0].pageX
6687
+ event.deltaY = this.touchYStart - event.targetTouches[0].pageY
6688
+ if (Math.abs(event.deltaY) > 50) {
6689
+ event.deltaX = 0
6690
+ this.handleScrollWheel(event)
6691
+ }
6692
+ else if (Math.abs(event.deltaX) > 50) {
6693
+ event.deltaY = 0
6694
+ this.handleScrollWheel(event)
6695
+ }
6696
+ // let deltaX = (this.mouseXStart - event.targetTouches[0].pageX)
6697
+ // let deltaY = (this.mouseYStart - event.targetTouches[0].pageY)
6698
+ // const hScrollContainerEl = document.getElementById(`${this.elementId}_hScrollContainer`)
6699
+ // const vScrollContainerEl = document.getElementById(`${this.elementId}_vScrollContainer`)
6700
+ // const hScrollHandleEl = document.getElementById(`${this.elementId}_hScrollHandle`)
6701
+ // const vScrollHandleEl = document.getElementById(`${this.elementId}_vScrollHandle`)
6702
+ // let translatedDeltaX = deltaX * (hScrollHandleEl.getBoundingClientRect().width / vScrollContainerEl.getBoundingClientRect().width)
6703
+ // let translatedDeltaY = deltaY * (vScrollHandleEl.getBoundingClientRect().height / vScrollContainerEl.getBoundingClientRect().height)
6704
+ // // need to adjust the delta so that it scrolls at a reasonable speed/distance
6705
+ // const scrollHandleXEl = document.getElementById(`${this.elementId}_hScrollHandle`)
6706
+ // const scrollHandleYEl = document.getElementById(`${this.elementId}_vScrollHandle`)
6707
+ // // if (Math.abs(deltaY) > this.sizes.cellHeight) {
6708
+ // // this.isTouchScrolling = true
6709
+ // // }
6710
+ // // else {
6711
+ // // this.isTouchScrolling = false
6712
+ // // }
6713
+ // // console.log('delta', this.mouseYStart, event.targetTouches[0].pageY, deltaY)
6714
+ // // deltaX = deltaX * (scrollHandleXEl.offsetWidth / this.sizes.scrollableWidth)
6715
+ // // deltaY = deltaY * (scrollHandleYEl.offsetHeight / this.sizes.bodyHeight)
6716
+ // // console.log('delta', deltaY)
6717
+ // // NW
6718
+ // // else if (Math.abs(deltaX) > 50) {
6719
+ // // this.isTouchScrolling = false
6720
+ // // }
6721
+ // this.currentClientY = event.targetTouches[0].pageY
6722
+ // this.currentTouchtime = (new Date()).getTime()
6723
+ // // end
6724
+ // // delta = Math.min(10, delta)
6725
+ // // delta = Math.max(-10, delta)
6726
+ // if (this.isTouchScrolling === true) {
6727
+ // // this.$scope.scrollTop += (delta / (this.$scope.layout.qHyperCube.qSize.qcy / this.$scope.rowsToLoad / (this.$scope.totalSpaceAvailable / 250)))
6728
+ // if (Math.abs(deltaX) > Math.abs(deltaY) && deltaX > 20) {
6729
+ // // this.scrollX(Math.max(-5, Math.min(5, translatedDeltaX)))
6730
+ // this.scrollX(translatedDeltaX)
6731
+ // }
6732
+ // else if (deltaY > 20) {
6733
+ // // this.scrollY(Math.max(-5, Math.min(5, translatedDeltaY)))
6734
+ // this.scrollY(translatedDeltaY)
6735
+ // }
6736
+ // }
6737
+ }
6738
+ }
6739
+ if (this.scrollDragging === true) {
6740
+ event.preventDefault()
6741
+ if (this.scrollDirection === 'y') {
6742
+ const diff = event.targetTouches[0].pageY - this.mouseYStart
6743
+ this.scrollY(diff)
6744
+ }
6745
+ else if (this.scrollDirection === 'x') {
6746
+ const diff = event.targetTouches[0].pageX - this.mouseXStart
6747
+ this.scrollX(diff)
6705
6748
  }
6706
6749
  }
6707
6750
  }
@@ -6713,19 +6756,42 @@ class WebsyTable3 {
6713
6756
  return
6714
6757
  }
6715
6758
  // console.log(event.target.classList)
6716
- if (this.options.virtualScroll === true) {
6717
- this.touchStartTime = (new Date()).getTime()
6718
- this.isTouchScrolling = true
6719
- this.isPerpetual = false
6759
+ if (event.target.classList.contains('websy-table-touch-scroller')) {
6760
+ if (this.options.virtualScroll === true) {
6761
+ // this.touchStartTime = (new Date()).getTime()
6762
+ this.isTouchScrolling = true
6763
+ // this.isPerpetual = false
6764
+ this.touchYStart = event.targetTouches[0].pageY
6765
+ this.touchXStart = event.targetTouches[0].pageX
6766
+ }
6767
+ }
6768
+ if (event.target.classList.contains('websy-scroll-handle-y')) {
6769
+ // set up the scroll start values
6770
+ this.scrollDragging = true
6771
+ this.scrollDirection = 'y'
6772
+ const scrollHandleEl = document.getElementById(`${this.elementId}_vScrollHandle`)
6773
+ this.handleYStart = scrollHandleEl.offsetTop
6720
6774
  this.mouseYStart = event.targetTouches[0].pageY
6721
- this.mouseXStart = event.targetTouches[0].pageX
6722
- // const touchScrollEl = document.getElementById(`${this.elementId}_touchScroller`)
6723
- // touchScrollEl.classList.remove('hidden')
6724
- const handleYEl = document.getElementById(`${this.elementId}_vScrollHandle`)
6725
- this.handleYStart = handleYEl.offsetTop
6726
- const handleXEl = document.getElementById(`${this.elementId}_hScrollHandle`)
6727
- this.handleXStart = handleXEl.offsetLeft
6728
- }
6775
+ // console.log('mouse down', this.handleYStart, this.mouseYStart)
6776
+ // console.log(scrollHandleEl.offsetTop)
6777
+ }
6778
+ else if (event.target.classList.contains('websy-scroll-handle-x')) {
6779
+ if (this.isTouchDevice) {
6780
+ event.preventDefault()
6781
+ }
6782
+ this.scrollDragging = true
6783
+ this.scrollDirection = 'x'
6784
+ const scrollHandleEl = document.getElementById(`${this.elementId}_hScrollHandle`)
6785
+ this.handleXStart = scrollHandleEl.offsetLeft
6786
+ this.mouseXStart = event.targetTouches[0].pageX
6787
+ }
6788
+ // // const touchScrollEl = document.getElementById(`${this.elementId}_touchScroller`)
6789
+ // // touchScrollEl.classList.remove('hidden')
6790
+ // const handleYEl = document.getElementById(`${this.elementId}_vScrollHandle`)
6791
+ // this.handleYStart = handleYEl.offsetTop
6792
+ // const handleXEl = document.getElementById(`${this.elementId}_hScrollHandle`)
6793
+ // this.handleXStart = handleXEl.offsetLeft
6794
+ // }
6729
6795
  }
6730
6796
  hideError () {
6731
6797
  const el = document.getElementById(`${this.elementId}_tableContainer`)
@@ -6834,7 +6900,7 @@ class WebsyTable3 {
6834
6900
  let hHandleEl = document.getElementById(`${this.elementId}_hScrollHandle`)
6835
6901
  if (this.hScrollRequired === true) {
6836
6902
  hScrollEl.style.left = `${this.sizes.table.width - this.sizes.scrollableWidth}px`
6837
- hScrollEl.style.width = `${this.sizes.scrollableWidth - 20}px`
6903
+ hScrollEl.style.width = `${this.sizes.scrollableWidth - (this.isTouchDevice ? 30 : 20)}px`
6838
6904
  hHandleEl.style.width = Math.max(this.options.minHandleSize, this.sizes.scrollableWidth * (this.sizes.scrollableWidth / this.sizes.totalNonPinnedWidth)) + 'px'
6839
6905
  }
6840
6906
  else {
@@ -8672,7 +8738,12 @@ if (!this.brushBarsInitialized[series.key]) {
8672
8738
  }
8673
8739
  removebar (key) {
8674
8740
  /* global key d3 */
8675
- let bars = this.barLayer.selectAll(`.bar_${key}`)
8741
+ this.barLayer.selectAll(`.bar_${key}`)
8742
+ .transition(this.transition)
8743
+ .style('fill-opacity', 1e-6)
8744
+ .remove()
8745
+ // remove from the brush as well
8746
+ this.brushArea.selectAll(`.bar_${key}`)
8676
8747
  .transition(this.transition)
8677
8748
  .style('fill-opacity', 1e-6)
8678
8749
  .remove()
package/dist/websy-designs-es6.js CHANGED
@@ -1644,8 +1644,8 @@ var WebsyDragDrop = /*#__PURE__*/function () {
1644
1644
  el.innerHTML = html;
1645
1645
  this.options.items.forEach(function (item, i) {
1646
1646
  if (item.component) {
1647
- if (item.isQlikPlugin && WebsyDesigns.QlikPlugin[item.component]) {
1648
- item.instance = new WebsyDesigns.QlikPlugin[item.component]("".concat(item.id, "_component"), item.options);
1647
+ if (item.isQlikPlugin && WebsyDesigns.QlikPlugins[item.component]) {
1648
+ item.instance = new WebsyDesigns.QlikPlugins[item.component]("".concat(item.id, "_component"), item.options);
1649
1649
  } else if (WebsyDesigns[item.component]) {
1650
1650
  item.instance = new WebsyDesigns[item.component]("".concat(item.id, "_component"), item.options);
1651
1651
  } else {
@@ -5157,13 +5157,25 @@ var Switch = /*#__PURE__*/function () {
5157
5157
  key: "disable",
5158
5158
  value: function disable() {
5159
5159
  this.options.enabled = false;
5160
- this.render();
5160
+ var method = this.options.enabled === true ? 'add' : 'remove';
5161
+ var el = document.getElementById("".concat(this.elementId, "_switch"));
5162
+ el.classList[method]('enabled');
5163
+
5164
+ if (this.options.onToggle) {
5165
+ this.options.onToggle(this.options.enabled);
5166
+ }
5161
5167
  }
5162
5168
  }, {
5163
5169
  key: "enable",
5164
5170
  value: function enable() {
5165
5171
  this.options.enabled = true;
5166
- this.render();
5172
+ var method = this.options.enabled === true ? 'add' : 'remove';
5173
+ var el = document.getElementById("".concat(this.elementId, "_switch"));
5174
+ el.classList[method]('enabled');
5175
+
5176
+ if (this.options.onToggle) {
5177
+ this.options.onToggle(this.options.enabled);
5178
+ }
5167
5179
  }
5168
5180
  }, {
5169
5181
  key: "handleClick",
@@ -6637,7 +6649,7 @@ var WebsyTable3 = /*#__PURE__*/function () {
6637
6649
  var el = document.getElementById(this.elementId);
6638
6650
 
6639
6651
  if (el) {
6640
- var html = "\n <div id='".concat(this.elementId, "_tableContainer' class='websy-vis-table-3 ").concat(this.options.paging === 'pages' ? 'with-paging' : '', " ").concat(this.options.virtualScroll === true ? 'with-virtual-scroll' : '', "'>\n <!--<div class=\"download-button\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path d=\"M16 11h5l-9 10-9-10h5v-11h8v11zm1 11h-10v2h10v-2z\"/></svg>\n </div>-->\n <div id=\"").concat(this.elementId, "_tableInner\" class=\"websy-table-inner-container\">\n <table id=\"").concat(this.elementId, "_tableHeader\" class=\"websy-table-header\"></table>\n <table id=\"").concat(this.elementId, "_tableBody\" class=\"websy-table-body\"></table>\n <table id=\"").concat(this.elementId, "_tableFooter\" class=\"websy-table-footer\"></table>\n <div id=\"").concat(this.elementId, "_vScrollContainer\" class=\"websy-v-scroll-container\">\n <div id=\"").concat(this.elementId, "_vScrollHandle\" class=\"websy-scroll-handle websy-scroll-handle-y\"></div>\n </div>\n <div id=\"").concat(this.elementId, "_hScrollContainer\" class=\"websy-h-scroll-container\">\n <div id=\"").concat(this.elementId, "_hScrollHandle\" class=\"websy-scroll-handle websy-scroll-handle-x\"></div>\n </div>\n ");
6652
+ var html = "\n <div id='".concat(this.elementId, "_tableContainer' class='websy-vis-table-3 ").concat(this.options.paging === 'pages' ? 'with-paging' : '', " ").concat(this.options.virtualScroll === true ? 'with-virtual-scroll' : '', " ").concat(this.isTouchDevice === true && this.options.virtualScroll === true ? 'touch-device' : '', "'>\n <!--<div class=\"download-button\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path d=\"M16 11h5l-9 10-9-10h5v-11h8v11zm1 11h-10v2h10v-2z\"/></svg>\n </div>-->\n <div id=\"").concat(this.elementId, "_tableInner\" class=\"websy-table-inner-container\">\n <table id=\"").concat(this.elementId, "_tableHeader\" class=\"websy-table-header\"></table>\n <table id=\"").concat(this.elementId, "_tableBody\" class=\"websy-table-body\"></table>\n <table id=\"").concat(this.elementId, "_tableFooter\" class=\"websy-table-footer\"></table>\n <div id=\"").concat(this.elementId, "_vScrollContainer\" class=\"websy-v-scroll-container\">\n <div id=\"").concat(this.elementId, "_vScrollHandle\" class=\"websy-scroll-handle websy-scroll-handle-y\"></div>\n </div>\n <div id=\"").concat(this.elementId, "_hScrollContainer\" class=\"websy-h-scroll-container\">\n <div id=\"").concat(this.elementId, "_hScrollHandle\" class=\"websy-scroll-handle websy-scroll-handle-x\"></div>\n </div>\n ");
6641
6653
 
6642
6654
  if (this.isTouchDevice === true && this.options.virtualScroll === true) {
6643
6655
  html += "\n <div id=\"".concat(this.elementId, "_touchScroller\" class=\"websy-table-touch-scroller\"></div>\n ");
@@ -7165,7 +7177,7 @@ var WebsyTable3 = /*#__PURE__*/function () {
7165
7177
  }, {
7166
7178
  key: "handleMouseDown",
7167
7179
  value: function handleMouseDown(event) {
7168
- if (this.isTouchDevice === true) {
7180
+ if (this.isTouchDevice) {
7169
7181
  return;
7170
7182
  }
7171
7183
 
@@ -7178,6 +7190,10 @@ var WebsyTable3 = /*#__PURE__*/function () {
7178
7190
  this.mouseYStart = event.pageY; // console.log('mouse down', this.handleYStart, this.mouseYStart)
7179
7191
  // console.log(scrollHandleEl.offsetTop)
7180
7192
  } else if (event.target.classList.contains('websy-scroll-handle-x')) {
7193
+ if (this.isTouchDevice) {
7194
+ event.preventDefault();
7195
+ }
7196
+
7181
7197
  this.scrollDragging = true;
7182
7198
  this.scrollDirection = 'x';
7183
7199
 
@@ -7192,6 +7208,10 @@ var WebsyTable3 = /*#__PURE__*/function () {
7192
7208
  value: function handleMouseMove(event) {
7193
7209
  // event.preventDefault()
7194
7210
  if (this.scrollDragging === true) {
7211
+ if (this.isTouchDevice) {
7212
+ event.preventDefault();
7213
+ }
7214
+
7195
7215
  if (this.scrollDirection === 'y') {
7196
7216
  var diff = event.pageY - this.mouseYStart;
7197
7217
  this.scrollY(diff);
@@ -7263,12 +7283,19 @@ var WebsyTable3 = /*#__PURE__*/function () {
7263
7283
  key: "handleTouchEnd",
7264
7284
  value: function handleTouchEnd(event) {
7265
7285
  // console.log('touch end fired')
7266
- if (typeof event.targetTouches !== 'undefined') {
7267
- this.isTouchScrolling = false;
7268
- this.touchEndTime = new Date().getTime();
7269
- this.isPerpetual = true; // this.perpetualScroll()
7286
+ this.scrollDragging = false;
7287
+ this.cellDragging = false;
7288
+ this.handleYStart = null;
7289
+ this.mouseYStart = null;
7290
+ this.handleXStart = null;
7291
+ this.mouseXStart = null;
7270
7292
 
7271
- this.touchStartTime = null; // const touchScrollEl = document.getElementById(`${this.elementId}_touchScroller`)
7293
+ if (typeof event.targetTouches !== 'undefined') {
7294
+ this.isTouchScrolling = false; // this.touchEndTime = (new Date()).getTime()
7295
+ // this.isPerpetual = true
7296
+ // this.perpetualScroll()
7297
+ // this.touchStartTime = null
7298
+ // const touchScrollEl = document.getElementById(`${this.elementId}_touchScroller`)
7272
7299
  // touchScrollEl.classList.add('hidden')
7273
7300
  }
7274
7301
  }
@@ -7281,46 +7308,70 @@ var WebsyTable3 = /*#__PURE__*/function () {
7281
7308
  event.stopPropagation();
7282
7309
 
7283
7310
  if (typeof event.targetTouches !== 'undefined' && event.targetTouches.length > 0) {
7284
- var deltaX = this.mouseXStart - event.targetTouches[0].pageX;
7285
- var deltaY = this.mouseYStart - event.targetTouches[0].pageY;
7286
- var hScrollContainerEl = document.getElementById("".concat(this.elementId, "_hScrollContainer"));
7287
- var vScrollContainerEl = document.getElementById("".concat(this.elementId, "_vScrollContainer"));
7288
- var hScrollHandleEl = document.getElementById("".concat(this.elementId, "_hScrollHandle"));
7289
- var vScrollHandleEl = document.getElementById("".concat(this.elementId, "_vScrollHandle"));
7290
- var translatedDeltaX = deltaX * (hScrollHandleEl.getBoundingClientRect().width / vScrollContainerEl.getBoundingClientRect().width);
7291
- var translatedDeltaY = deltaY * (vScrollHandleEl.getBoundingClientRect().height / vScrollContainerEl.getBoundingClientRect().height); // need to adjust the delta so that it scrolls at a reasonable speed/distance
7292
-
7293
- var scrollHandleXEl = document.getElementById("".concat(this.elementId, "_hScrollHandle"));
7294
- var scrollHandleYEl = document.getElementById("".concat(this.elementId, "_vScrollHandle")); // if (Math.abs(deltaY) > this.sizes.cellHeight) {
7295
- // this.isTouchScrolling = true
7296
- // }
7297
- // else {
7298
- // this.isTouchScrolling = false
7299
- // }
7300
- // console.log('delta', this.mouseYStart, event.targetTouches[0].pageY, deltaY)
7301
- // deltaX = deltaX * (scrollHandleXEl.offsetWidth / this.sizes.scrollableWidth)
7302
- // deltaY = deltaY * (scrollHandleYEl.offsetHeight / this.sizes.bodyHeight)
7303
- // console.log('delta', deltaY)
7304
- // NW
7305
- // else if (Math.abs(deltaX) > 50) {
7306
- // this.isTouchScrolling = false
7307
- // }
7311
+ event.deltaX = this.touchXStart - event.targetTouches[0].pageX;
7312
+ event.deltaY = this.touchYStart - event.targetTouches[0].pageY;
7313
+
7314
+ if (Math.abs(event.deltaY) > 50) {
7315
+ event.deltaX = 0;
7316
+ this.handleScrollWheel(event);
7317
+ } else if (Math.abs(event.deltaX) > 50) {
7318
+ event.deltaY = 0;
7319
+ this.handleScrollWheel(event);
7320
+ } // let deltaX = (this.mouseXStart - event.targetTouches[0].pageX)
7321
+ // let deltaY = (this.mouseYStart - event.targetTouches[0].pageY)
7322
+ // const hScrollContainerEl = document.getElementById(`${this.elementId}_hScrollContainer`)
7323
+ // const vScrollContainerEl = document.getElementById(`${this.elementId}_vScrollContainer`)
7324
+ // const hScrollHandleEl = document.getElementById(`${this.elementId}_hScrollHandle`)
7325
+ // const vScrollHandleEl = document.getElementById(`${this.elementId}_vScrollHandle`)
7326
+ // let translatedDeltaX = deltaX * (hScrollHandleEl.getBoundingClientRect().width / vScrollContainerEl.getBoundingClientRect().width)
7327
+ // let translatedDeltaY = deltaY * (vScrollHandleEl.getBoundingClientRect().height / vScrollContainerEl.getBoundingClientRect().height)
7328
+ // // need to adjust the delta so that it scrolls at a reasonable speed/distance
7329
+ // const scrollHandleXEl = document.getElementById(`${this.elementId}_hScrollHandle`)
7330
+ // const scrollHandleYEl = document.getElementById(`${this.elementId}_vScrollHandle`)
7331
+ // // if (Math.abs(deltaY) > this.sizes.cellHeight) {
7332
+ // // this.isTouchScrolling = true
7333
+ // // }
7334
+ // // else {
7335
+ // // this.isTouchScrolling = false
7336
+ // // }
7337
+ // // console.log('delta', this.mouseYStart, event.targetTouches[0].pageY, deltaY)
7338
+ // // deltaX = deltaX * (scrollHandleXEl.offsetWidth / this.sizes.scrollableWidth)
7339
+ // // deltaY = deltaY * (scrollHandleYEl.offsetHeight / this.sizes.bodyHeight)
7340
+ // // console.log('delta', deltaY)
7341
+ // // NW
7342
+ // // else if (Math.abs(deltaX) > 50) {
7343
+ // // this.isTouchScrolling = false
7344
+ // // }
7345
+ // this.currentClientY = event.targetTouches[0].pageY
7346
+ // this.currentTouchtime = (new Date()).getTime()
7347
+ // // end
7348
+ // // delta = Math.min(10, delta)
7349
+ // // delta = Math.max(-10, delta)
7350
+ // if (this.isTouchScrolling === true) {
7351
+ // // this.$scope.scrollTop += (delta / (this.$scope.layout.qHyperCube.qSize.qcy / this.$scope.rowsToLoad / (this.$scope.totalSpaceAvailable / 250)))
7352
+ // if (Math.abs(deltaX) > Math.abs(deltaY) && deltaX > 20) {
7353
+ // // this.scrollX(Math.max(-5, Math.min(5, translatedDeltaX)))
7354
+ // this.scrollX(translatedDeltaX)
7355
+ // }
7356
+ // else if (deltaY > 20) {
7357
+ // // this.scrollY(Math.max(-5, Math.min(5, translatedDeltaY)))
7358
+ // this.scrollY(translatedDeltaY)
7359
+ // }
7360
+ // }
7308
7361
 
7309
- this.currentClientY = event.targetTouches[0].pageY;
7310
- this.currentTouchtime = new Date().getTime(); // end
7311
- // delta = Math.min(10, delta)
7312
- // delta = Math.max(-10, delta)
7313
-
7314
- if (this.isTouchScrolling === true) {
7315
- // this.$scope.scrollTop += (delta / (this.$scope.layout.qHyperCube.qSize.qcy / this.$scope.rowsToLoad / (this.$scope.totalSpaceAvailable / 250)))
7316
- if (Math.abs(deltaX) > Math.abs(deltaY) && deltaX > 20) {
7317
- // this.scrollX(Math.max(-5, Math.min(5, translatedDeltaX)))
7318
- this.scrollX(translatedDeltaX);
7319
- } else if (deltaY > 20) {
7320
- // this.scrollY(Math.max(-5, Math.min(5, translatedDeltaY)))
7321
- this.scrollY(translatedDeltaY);
7322
- }
7323
- }
7362
+ }
7363
+ }
7364
+
7365
+ if (this.scrollDragging === true) {
7366
+ event.preventDefault();
7367
+
7368
+ if (this.scrollDirection === 'y') {
7369
+ var diff = event.targetTouches[0].pageY - this.mouseYStart;
7370
+ this.scrollY(diff);
7371
+ } else if (this.scrollDirection === 'x') {
7372
+ var _diff2 = event.targetTouches[0].pageX - this.mouseXStart;
7373
+
7374
+ this.scrollX(_diff2);
7324
7375
  }
7325
7376
  }
7326
7377
  }
@@ -7336,19 +7387,44 @@ var WebsyTable3 = /*#__PURE__*/function () {
7336
7387
  } // console.log(event.target.classList)
7337
7388
 
7338
7389
 
7339
- if (this.options.virtualScroll === true) {
7340
- this.touchStartTime = new Date().getTime();
7341
- this.isTouchScrolling = true;
7342
- this.isPerpetual = false;
7343
- this.mouseYStart = event.targetTouches[0].pageY;
7344
- this.mouseXStart = event.targetTouches[0].pageX; // const touchScrollEl = document.getElementById(`${this.elementId}_touchScroller`)
7345
- // touchScrollEl.classList.remove('hidden')
7390
+ if (event.target.classList.contains('websy-table-touch-scroller')) {
7391
+ if (this.options.virtualScroll === true) {
7392
+ // this.touchStartTime = (new Date()).getTime()
7393
+ this.isTouchScrolling = true; // this.isPerpetual = false
7346
7394
 
7347
- var handleYEl = document.getElementById("".concat(this.elementId, "_vScrollHandle"));
7348
- this.handleYStart = handleYEl.offsetTop;
7349
- var handleXEl = document.getElementById("".concat(this.elementId, "_hScrollHandle"));
7350
- this.handleXStart = handleXEl.offsetLeft;
7395
+ this.touchYStart = event.targetTouches[0].pageY;
7396
+ this.touchXStart = event.targetTouches[0].pageX;
7397
+ }
7351
7398
  }
7399
+
7400
+ if (event.target.classList.contains('websy-scroll-handle-y')) {
7401
+ // set up the scroll start values
7402
+ this.scrollDragging = true;
7403
+ this.scrollDirection = 'y';
7404
+ var scrollHandleEl = document.getElementById("".concat(this.elementId, "_vScrollHandle"));
7405
+ this.handleYStart = scrollHandleEl.offsetTop;
7406
+ this.mouseYStart = event.targetTouches[0].pageY; // console.log('mouse down', this.handleYStart, this.mouseYStart)
7407
+ // console.log(scrollHandleEl.offsetTop)
7408
+ } else if (event.target.classList.contains('websy-scroll-handle-x')) {
7409
+ if (this.isTouchDevice) {
7410
+ event.preventDefault();
7411
+ }
7412
+
7413
+ this.scrollDragging = true;
7414
+ this.scrollDirection = 'x';
7415
+
7416
+ var _scrollHandleEl3 = document.getElementById("".concat(this.elementId, "_hScrollHandle"));
7417
+
7418
+ this.handleXStart = _scrollHandleEl3.offsetLeft;
7419
+ this.mouseXStart = event.targetTouches[0].pageX;
7420
+ } // // const touchScrollEl = document.getElementById(`${this.elementId}_touchScroller`)
7421
+ // // touchScrollEl.classList.remove('hidden')
7422
+ // const handleYEl = document.getElementById(`${this.elementId}_vScrollHandle`)
7423
+ // this.handleYStart = handleYEl.offsetTop
7424
+ // const handleXEl = document.getElementById(`${this.elementId}_hScrollHandle`)
7425
+ // this.handleXStart = handleXEl.offsetLeft
7426
+ // }
7427
+
7352
7428
  }
7353
7429
  }, {
7354
7430
  key: "hideError",
@@ -7493,7 +7569,7 @@ var WebsyTable3 = /*#__PURE__*/function () {
7493
7569
 
7494
7570
  if (this.hScrollRequired === true) {
7495
7571
  hScrollEl.style.left = "".concat(this.sizes.table.width - this.sizes.scrollableWidth, "px");
7496
- hScrollEl.style.width = "".concat(this.sizes.scrollableWidth - 20, "px");
7572
+ hScrollEl.style.width = "".concat(this.sizes.scrollableWidth - (this.isTouchDevice ? 30 : 20), "px");
7497
7573
  hHandleEl.style.width = Math.max(this.options.minHandleSize, this.sizes.scrollableWidth * (this.sizes.scrollableWidth / this.sizes.totalNonPinnedWidth)) + 'px';
7498
7574
  } else {
7499
7575
  hHandleEl.style.width = '0px';
@@ -9469,7 +9545,9 @@ var WebsyChart = /*#__PURE__*/function () {
9469
9545
  key: "removebar",
9470
9546
  value: function removebar(key) {
9471
9547
  /* global key d3 */
9472
- var bars = this.barLayer.selectAll(".bar_".concat(key)).transition(this.transition).style('fill-opacity', 1e-6).remove();
9548
+ this.barLayer.selectAll(".bar_".concat(key)).transition(this.transition).style('fill-opacity', 1e-6).remove(); // remove from the brush as well
9549
+
9550
+ this.brushArea.selectAll(".bar_".concat(key)).transition(this.transition).style('fill-opacity', 1e-6).remove();
9473
9551
  }
9474
9552
  }, {
9475
9553
  key: "renderLabels",