<commit_before><template>
  <div class="k-interval-pointer"
        v-bind:style="pointerStyle"
        @mousedown="startDrag"
  >
    {{pointerLabel}}
  </div>
</template>

<script>
import moment from 'moment'

export default {
  name: 'k-time-pointer',
  components: {
  },
  props: [
    'position',
    'time',
    'componentLeft',
    'componentWidth',
    'timeInterval',
    'pointerColor',
    'pointerTextColor'
  ],
  data () {
    return {
      // Dragging of the pointer
      dragging: false
    }
  },
  mounted () {
    window.addEventListener('mouseup', this.stopDrag)
    window.addEventListener('mousemove', this.doDrag)
  },
  beforeDestroy () {
    window.removeEventListener('mouseup', this.stopDrag)
    window.removeEventListener('mousemove', this.doDrag)
  },  
  computed: {
    pointerStyle () {
      return {
        // Put the "tip" of the pointer's downward pointing arrow at the right place. We need an offset
        // of 25px, this is the distance of the downward "arrow" from the left side of the label box.
        left: this.position - 25 + 'px',
        color: this.pointerTextColor,
        backgroundColor: this.pointerColor,
        // Set a CSS var that gets used in the ::after pseudo-element,
        // see: https://forum.vuejs.org/t/style-binding-on-pseudo-selector/5544/7
        '--pointerColor': this.pointerColor
      }
    },
    pointerLabel () {
      // Formats the label value for the time interval, taking into account the interval type (hour, day, week etc)

      const value = new Date(this.time)
      const type = this.timeInterval.type

      let label

      if (type === 'h' || type === 'm') {
        label = moment(value).format('h:mm A')

      } else if (type === 'd') {
        label = moment(value).format('dddd D - h A')

      } else {
        label = ''
      }

      return label
    }
  },
  methods: {
    // Dragging of the pointer
    startDrag () {
      this.dragging = true
    },
    stopDrag () {
      this.dragging = false
    },
    doDrag (event) {
      if (this.dragging) {
        let newPosition = event.clientX - this.componentLeft

        // Don't allow a position out of bounds
        if (newPosition < 0) {
          newPosition = 0
        } else if (newPosition > this.componentWidth) {
          newPosition = this.componentWidth
        }

        this.$emit('change', newPosition)
      }
    }
  }
}
</script>

<style>
  .k-interval-pointer {
    position: absolute;
    bottom: 19px;
    border-radius: 7px;
    font-size: 12px;
    padding-bottom: 6px;
    padding-top: 6px;
    padding-left: 8px;
    padding-right: 8px;
    cursor: grab;
    height: 26px;
    white-space: nowrap;
    user-select: none;
    z-index: 300;
  }
<commit_msg>Timeline controller: add support for touch events (mobile)<commit_after><template>
  <div class="k-interval-pointer"
        v-bind:style="pointerStyle"
        @mousedown="startDrag"
        v-touch-pan.nomouse.horizontal="doPan"
  >
    {{pointerLabel}}
  </div>
</template>

<script>
import moment from 'moment'
import { TouchPan } from 'quasar'

export default {
  name: 'k-time-pointer',
  directives: {
    TouchPan
  },
  props: [
    'position',
    'time',
    'componentLeft',
    'componentWidth',
    'timeInterval',
    'pointerColor',
    'pointerTextColor'
  ],
  data () {
    return {
      // Dragging of the pointer
      dragging: false
    }
  },
  mounted () {
    window.addEventListener('mouseup', this.stopDrag)
    window.addEventListener('mousemove', this.doDrag)
  },
  beforeDestroy () {
    window.removeEventListener('mouseup', this.stopDrag)
    window.removeEventListener('mousemove', this.doDrag)
  },  
  computed: {
    pointerStyle () {
      return {
        // Put the "tip" of the pointer's downward pointing arrow at the right place. We need an offset
        // of 25px, this is the distance of the downward "arrow" from the left side of the label box.
        left: this.position - 25 + 'px',
        color: this.pointerTextColor,
        backgroundColor: this.pointerColor,
        // Set a CSS var that gets used in the ::after pseudo-element,
        // see: https://forum.vuejs.org/t/style-binding-on-pseudo-selector/5544/7
        '--pointerColor': this.pointerColor
      }
    },
    pointerLabel () {
      // Formats the label value for the time interval, taking into account the interval type (hour, day, week etc)

      const value = new Date(this.time)
      const type = this.timeInterval.type

      let label

      if (type === 'h' || type === 'm') {
        label = moment(value).format('h:mm A')

      } else if (type === 'd') {
        label = moment(value).format('dddd D - h A')

      } else {
        label = ''
      }

      return label
    }
  },
  methods: {
    // Dragging of the pointer
    startDrag () {
      this.dragging = true
    },
    stopDrag () {
      this.dragging = false
    },
    doDrag (event) {
      if (this.dragging) {
        this.doMove(event.clientX)
      }
    },
    doPan (obj) {
      this.doMove(obj.position.left)
    },
    doMove (targetPosition) {
      let newPosition = targetPosition - this.componentLeft

      // Don't allow a position out of bounds
      if (newPosition < 0) {
        newPosition = 0
      } else if (newPosition > this.componentWidth) {
        newPosition = this.componentWidth
      }

      this.$emit('change', newPosition)
    }
  }
}
</script>

<style>
  .k-interval-pointer {
    position: absolute;
    bottom: 19px;
    border-radius: 7px;
    font-size: 12px;
    padding-bottom: 6px;
    padding-top: 6px;
    padding-left: 8px;
    padding-right: 8px;
    cursor: grab;
    height: 26px;
    white-space: nowrap;
    user-select: none;
    z-index: 300;
  }

{'fraction_non_alphanumeric': 0.12721584984358708, 'fraction_numerical': 0.008689607229753215, 'mean_word_length': 2.2222844344904815, 'pattern_counts': {'":': 0, '<': 19, '<?xml version=': 0, '>': 19, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2129619', 'n_tokens_mistral': 1845, 'n_tokens_neox': 1773, 'n_words': 463}