ajobi/vue-snip

Programmatically detect snipping

Closed this issue · 6 comments

JEK58 commented

Is there a way to tell if a text was snipped?
For example to show a "read more" link.

ajobi commented

@JEK58 not really, but I think it's a good idea. I am planning a new release in January, will consider this 👍

Edit: @JEK58 the feature will be postponed until February / March because of other projects

  • ❤️1
hannesfant commented

Was looking for the same thing, would be really useful

unikitty37 commented

On a related note, is there any way of just getting the user-visible text when using CSS mode? If This is a long piece of text gets snipped as This is…, the innerText and so on still return the full thing, which is making writing tests a little tricky.

ajobi commented

@unikitty37 this is not possible as far as I know. What is possible in both modes is counting the element lines (https://github.com/ajobi/vue-snip/blob/master/src/element/element.lines.ts). Right now the library itself doesn't expose this utility so you need to copy the code, but I am thinking about exposing it in the next versions as well.

unikitty37 commented

That's great — thanks!

ajobi commented

@JEK58 @hannesfant the ability to detect if a text was snipped was just added in 2.0.0, see demo for a working example with a READ MORE button. Here is the example code:

<template>
  <p v-snip="{ lines: 3, onSnipped }"> ... </p>
</template>

<script>
export default {
  data () {
    return {
      hasEllipsis: false,
    }
  },
  methods: {
    onSnipped (newState) {
      this.hasEllipsis = newState.hasEllipsis
    }
  }
}
</script>

Unfortunately the directives don't allow us to control the state directly - that's why a callback is needed for now. In the future releases the switch to a component would be required so that the hasEllipsis could be automatically connected to the reactive state with v-model or similar without the need for a callback.

@unikitty37 the 2.0.0 uses js-snip which exposes the getLines utility you can use in your tests. You can import it with a named import like here after you install the vue-snip@2.0.0.

  • 👍1