Skip to content

Instantly share code, notes, and snippets.

@julkue
Last active January 2, 2023 13:25
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save julkue/8821fcc323a7600df3a55ece2aac4dbf to your computer and use it in GitHub Desktop.
Save julkue/8821fcc323a7600df3a55ece2aac4dbf to your computer and use it in GitHub Desktop.
Technical Restriction of the Magic 360 Plugin by Magic Toolbox
  1. The plugin is written in a "global" syntax, meaning that it depends on this references to window. Also it creates a global variable Magic360 using var Magic 360 = X. That means, that it doesn't work in CommonJS (e.g. Webpack) or AMD (e.g. RequireJS) environments. In case of Webpack it's necessary to use the script loader that runs it in the global context.
  2. The plugin doesn't allow a way to initialize new 360 viewers by JS. The only way it can work is by parsing elements with a class Magic360 on DOM ready. This means that you can't e.g. provide settings by JS for a single instance. You need to provide all options globally for all instances. Also, this means that if you're using AJAX you can't use this plugin, as the plugin doesn't re-parse the DOM after a XMLHttpRequest was done. Also, this means that you need to pass an instance "id" on every method call, which brings an incredible overhead (you would also create an id attribute on every viewer HTML root element)
  3. The API is incomplete. For example it offers a method to open the fullscreen, but no method to close it.
  4. The plugin prevents using custom controls by adding !important to almost ALL styles!!! This is such a bad practice that you need to replace classes by JS with custom icon classes. It also doesn't offer a way to set custom classes for custom icons with an API method. You can't event prevent the plugin from creating its icons by any API method or option.
  5. There is no ready event for the fullscreen. If you need to patch the fullscreen close button with a custom icon, you can only add it with a timeout as it's not immediately available
  6. The fullscreen close button isn't visible in the latest Safari on macOS

Link: https://www.magictoolbox.com/magic360/integration/ Date: July 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment