Shopify Model Viewer UI inside slideshow

modelviewer-extra.js

/*
A Gist to keep track of what was needed to make the Shopify Model Viewer UI 
propagate events in a way that allows us to use it in a slideshow/carousel.

Works in Slick and Swiper. Other JS was obviously required outside here.
This is just for reference. This was called on a loop for each 3D model.

Add this SCSS:

.shopify-model-viewer-ui {
  .theme-event-proxy {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 1;
  }

  .shopify-model-viewer-ui__controls-area--playing + .theme-event-proxy {
    display: none;
  }
}
*/

window.Shopify.loadFeatures([
  {
    name: 'model-viewer-ui',
    version: '1.0',
    onLoad: (function(){
      $(this).data('player', new Shopify.ModelViewerUI(element));
      // insert mouseup event proxy, to allow mouseup to bubble up outside 
      // model viewer ui when player is paused, for carousel swipe gestures
      $('<div class="theme-event-proxy">').on('mouseup', function(e){
        e.stopPropagation();
        e.preventDefault();
        var newEventTarget = $(e.currentTarget).closest('.product-media')[0];
        newEventTarget.dispatchEvent(new MouseEvent('mouseup', { bubbles: true }));
      }).appendTo(
        $(this).find('.shopify-model-viewer-ui__controls-overlay')
      );
      // when playing or loading, intercept events that bubble up outside the viewer:
      // - prevent bubbling of mouse/touch start, for carousel gestures
      // - prevent bubbling of keydown, for carousel navigation
      $(this).find('model-viewer').on('shopify_model_viewer_ui_toggle_play', function(){
        $(this).closest('.product-media').on('touchstart.themeModelViewerFix mousedown.themeModelViewerFix keydown.themeModelViewerFix', function(e){
          e.stopPropagation();
        });
      }).on('shopify_model_viewer_ui_toggle_pause', function(){
        $(this).closest('.shopify-model-viewer-ui').off('.themeMediaEventFix');
      });
      // ensure play exclusivity
      $(this).find('model-viewer').on('shopify_model_viewer_ui_toggle_play', function(){
        $('.product-media').not($currentMedia).trigger('mediaHidden');
      });
      // set class and re-trigger visible event now loaded
      $(this).addClass('product-media--model-loaded').removeClass('product-media--model-loading');
      if(callbacks.onModelViewerInit) {
        callbacks.onModelViewerInit(element);
      }
      if(autoplay) {
        $(this).trigger('mediaVisible');
      }
    }).bind(this)
  }
]);

66356