Disable all mouse/scroll/trackpad/touch rotation interactions

[BenComicGraphics]

Is there a way to disable all rotational interactions programatically with a button press? Using the Vue implimentation.

[giniedp]

no, there is no such option. However, you should be able to stop event propagation if you register own event listener around the spritespin instance. https://developer.mozilla.org/en-US/docs/Web/API/Event/stopImmediatePropagation

[BenComicGraphics]

Ok, how? This is my code.

$(function() {
  Vue.component('spritespin', {
    props: ['options'],
    template: '<div></div>',
    data: function () {
      return {
        api: null,
        data: null,
      }
    },
    mounted: function() {
      // create spritespin
      $(this.$el).spritespin(this.options)
      // access api object
      this.api = $(this.$el).spritespin('api')
      // access data object
      this.data = $(this.$el).spritespin('data')
      // watch changes and update spritespin
      this.$watch('options', (newVal, oldVal) => {
        $(this.$el).spritespin(newVal)
      })
    },
    updated: function() {
      // $(this.$el).spritespin(this.options)
    },
    beforeDestroy: function() {
      // destroy spritespin before Vue node is destroyed
      $(this.$el).spritespin('destroy')
    },
  })

  new Vue({
    el: '#threesixty',
    template: `
      <div id="threesixty">
        <button v-on:click="toggleShow">CREATE DESTROY</button>
        <button v-on:click="next">NEXT</button>
        <button v-on:click="prev">PREV</button>
        <button v-on:click="togglePlayback">TOGGLE</button>
        <button v-on:click="toggleFullscreen">FULLSCREEN</button>
        <spritespin v-bind:options="options" v-if="show" ref="spritespin"/>
      </div>
    `,
    data: {
      show: true,
      loop: false,
      options: {
   source: [
    'bunch of images here'
  ], 
   width:1280,
   height: 780,
        frameTime: 3,
        animate: true,
        loop: false,
        sense: -1
      },
    },
    methods: {
      toggleShow: function() {
        this.show = !this.show
      },
      prev: function() {
        if (this.$refs.spritespin) {
          this.$refs.spritespin.api.stopAnimation()
          this.$refs.spritespin.api.prevFrame()
        }
      },
      next: function() {
        if (this.$refs.spritespin) {
          this.$refs.spritespin.api.stopAnimation()
          this.$refs.spritespin.api.nextFrame()
        }
      },
      togglePlayback: function() {
        if (this.$refs.spritespin) {
          this.$refs.spritespin.api.toggleAnimation()
        }
      },
      toggleFullscreen: function() {
        if (this.$refs.spritespin) {
          this.$refs.spritespin.api.requestFullscreen()
        }
      },
    }
  })
})

[BenComicGraphics]

well, I attempted it, got "Stopimmediatepropagation is not a function". The issue is trackpad downward scroll is hijacking the scroll. I still want to have it rotate later on, and have it interactable if someone scrolls back up to it again.

[giniedp]

then you must have miss spelled the function name. This is how it would work:

  mounted: function() {
      $(this.$el).on('mousedown', (e) => {
        e.stopImmediatePropagation()
      });
      // ...
  }

you can do this for any event that should be stopped. In your case probably mousedown, touchstart and wheel. You would have to call e.stopImmediatePropagation() conditionally with an if statement

Another solution is CSS based. You can prevent all mouse events on a specific element via CSS. Lets say, if you want all events to be prevented, then you add the disabled class on the spritespin container.

methods: {
  enable: function() {
    this.$refs.spritespin.target.removeClass('disabled')
  },
  disable: function() {
    this.$refs.spritespin.target.addClass('disabled')
  },
}

no you need the following CSS for the disabled case

#threesixty.disabled {
  pointer-events: none;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events