-
Notifications
You must be signed in to change notification settings - Fork 31
/
matter-tools.demo.min.js
6 lines (6 loc) · 19.6 KB
/
matter-tools.demo.min.js
1
2
3
4
5
6
/*!
* matter-tools 0.14.0 by @liabru
* https://github.com/liabru/matter-tools
* License MIT
*/
!function(e,n){"object"==typeof exports&&"object"==typeof module?module.exports=n(require("matter-js"),require("matter-tools/src/tools/Gui"),require("matter-tools/src/tools/Inspector")):"function"==typeof define&&define.amd?define("Demo",["matter-js","matter-tools/src/tools/Gui","matter-tools/src/tools/Inspector"],n):"object"==typeof exports?exports.Demo=n(require("matter-js"),require("matter-tools/src/tools/Gui"),require("matter-tools/src/tools/Inspector")):(e.MatterTools=e.MatterTools||{},e.MatterTools.Demo=n(e.Matter,e.MatterTools.Gui,e.MatterTools.Inspector))}(this,(function(e,n,t){return function(e){var n={};function t(o){if(n[o])return n[o].exports;var r=n[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,t),r.l=!0,r.exports}return t.m=e,t.c=n,t.d=function(e,n,o){t.o(e,n)||Object.defineProperty(e,n,{enumerable:!0,get:o})},t.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.t=function(e,n){if(1&n&&(e=t(e)),8&n)return e;if(4&n&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(t.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&n&&"string"!=typeof e)for(var r in e)t.d(o,r,function(n){return e[n]}.bind(null,r));return o},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},t.p="/demo/lib/",t(t.s=9)}([function(n,t){n.exports=e},function(e,n,t){"use strict";const o=e.exports={};o.injectStyles=function(e,n){if(document.getElementById(n))return;let t=document.createElement("div");t.innerHTML=`<style id="${n}" type="text/css">${e}</style>`;let r=document.head.querySelector("style:last-of-type");r?o.domInsertBefore(t.firstElementChild,r):document.head.appendChild(t.firstElementChild)},o.injectScript=function(e,n,t){if(document.getElementById(n))return;let o=document.createElement("script");o.id=n,o.src=e,o.onload=t,document.body.appendChild(o)},o.domRemove=function(e){return e.parentElement.removeChild(e)},o.domInsertBefore=function(e,n){return n.parentNode.insertBefore(e,n.previousElementSibling)}},,,,,,,,function(e,n,t){"use strict";const o=e.exports={},r=t(10),l=t(11),a=t(1),i=t(0).Common;o._isIOS=window.navigator&&/iPad|iPhone|iPod/.test(navigator.userAgent)&&!window.MSStream,o._matterLink="https://brm.io/matter-js/",o.create=function(e){let n=Object.assign({example:{instance:null},examples:[],resetOnOrientation:!1,preventZoom:!1,fullPage:!1,startExample:!0,appendTo:document.body,toolbar:{title:null,url:null,reset:!0,source:!1,inspector:!1,tools:!1,fullscreen:!0,exampleSelect:!1},tools:{inspector:null,gui:null},dom:{}},e||{});return(!e.toolbar||n.examples.length>1&&e.toolbar&&!1!==e.toolbar.exampleSelect)&&(n.toolbar.exampleSelect=!0),o._isIOS&&(n.toolbar.fullscreen=!1),r||(n.toolbar.tools=!1,n.tools.gui=!1),l||(n.toolbar.inspector=!1,n.tools.inspector=!1),n.dom=o._createDom(n),o._bindDom(n),n.fullPage||!1===n.inline||n.dom.root.classList.add("matter-demo-inline"),n.appendTo&&n.appendTo.appendChild(n.dom.root),n.startExample&&o.start(n,n.startExample),n},o.start=function(e,n){n="string"==typeof n?n:e.examples[0].id,window.location.hash.length>0&&(n=window.location.hash.slice(1)),o.setExampleById(e,n)},o.stop=function(e){e.example&&e.example.instance&&e.example.instance.stop()},o.reset=function(e){i._nextId=0,i._seed=0,o.setExample(e,e.example)},o.setExampleById=function(e,n){let t=e.examples.filter((e=>e.id===n))[0];o.setExample(e,t)},o.setExample=function(e,n){if(n){let t=e.example.instance;t&&(t.stop(),t.canvas&&t.canvas.parentElement.removeChild(t.canvas)),window.location.hash=n.id,e.example.instance=null,e.example=n,e.example.instance=t=n.init(e),!t.canvas&&t.render&&(t.canvas=t.render.canvas),t.canvas&&e.dom.root.appendChild(t.canvas),e.dom.exampleSelect.value=n.id,e.dom.buttonSource.href=n.sourceLink||e.url||"#",setTimeout((function(){e.tools.inspector&&o.setInspector(e,!0),e.tools.gui&&o.setGui(e,!0)}),500)}else o.setExample(e,e.examples[0])},o.setInspector=function(e,n){if(!n)return o._destroyTools(e,!0,!1),void e.dom.root.classList.toggle("matter-inspect-active",!1);let t=e.example.instance;o._destroyTools(e,!0,!1),e.dom.root.classList.toggle("matter-inspect-active",!0),e.tools.inspector=l.create(t.engine,t.render)},o.setGui=function(e,n){if(!n)return o._destroyTools(e,!1,!0),void e.dom.root.classList.toggle("matter-gui-active",!1);let t=e.example.instance;o._destroyTools(e,!1,!0),e.dom.root.classList.toggle("matter-gui-active",!0),e.tools.gui=r.create(t.engine,t.runner,t.render)},o._destroyTools=function(e,n,t){let o=e.tools.inspector,a=e.tools.gui;n&&o&&!0!==o&&(l.destroy(o),e.tools.inspector=null),t&&a&&!0!==a&&(r.destroy(a),e.tools.gui=null)},o._toggleFullscreen=function(e){let n=document.fullscreenElement||document.mozFullScreenElement||document.webkitFullscreenElement;n?document.exitFullscreen?document.exitFullscreen():document.mozCancelFullScreen?document.mozCancelFullScreen():document.webkitExitFullscreen&&document.webkitExitFullscreen():(n=e.dom.root,n.requestFullscreen?n.requestFullscreen():n.mozRequestFullScreen?n.mozRequestFullScreen():n.webkitRequestFullscreen&&n.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT))},o._bindDom=function(e){var n=e.dom;if(window.addEventListener("orientationchange",(function(){setTimeout((()=>{e.resetOnOrientation&&o.reset(e)}),300)})),e.preventZoom){document.body.addEventListener("gesturestart",(function(e){e.preventDefault()}));var t,r=!0;document.body.addEventListener("touchstart",(function(e){r||e.preventDefault(),r=!1,clearTimeout(t),t=setTimeout((function(){r=!0}),500)}))}if(n.exampleSelect&&n.exampleSelect.addEventListener("change",(function(){let n=this.options[this.selectedIndex].value;o.setExampleById(e,n)})),n.buttonReset&&n.buttonReset.addEventListener("click",(function(){o.reset(e)})),n.buttonInspect&&n.buttonInspect.addEventListener("click",(function(){var n=!e.tools.inspector;o.setInspector(e,n)})),n.buttonTools&&n.buttonTools.addEventListener("click",(function(){var n=!e.tools.gui;o.setGui(e,n)})),n.buttonFullscreen){n.buttonFullscreen.addEventListener("click",(function(){o._toggleFullscreen(e)}));var l=function(){var e=document.fullscreen||document.webkitIsFullScreen||document.mozFullScreen;document.body.classList.toggle("matter-is-fullscreen",e)};document.addEventListener("webkitfullscreenchange",l),document.addEventListener("mozfullscreenchange",l),document.addEventListener("fullscreenchange",l)}},o._createDom=function(e){let n=t(12);a.injectStyles(n,"matter-demo-style");let r=document.createElement("div"),l=e.examples.map((e=>`<option value="${e.id}">${e.name}</option>`)).join(" ");var i=e.preventZoom&&o._isIOS?"prevent-zoom-ios":"";r.innerHTML=`\n <div class="matter-demo ${e.toolbar.title} ${i}">\n <div class="matter-header-outer">\n <header class="matter-header">\n <div class="matter-header-inner">\n <h1 class="matter-demo-title">\n <a href="${e.toolbar.url}" target="_blank">\n ${e.toolbar.title}\n <svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">\n <path d="M0 0h24v24H0z" fill="none"/>\n <path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5z"/>\n </svg>\n </a>\n </h1>\n <div class="matter-toolbar">\n <div class="matter-select-wrapper">\n <select aria-label="Select example" title="Select example" class="matter-example-select matter-select">\n ${l}\n </select>\n <svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">\n <path d="M7 10l5 5 5-5z"/>\n <path d="M0 0h24v24H0z" fill="none"/>\n </svg>\n </div>\n <button class="matter-btn matter-btn-reset" title="Reset">\n <svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">\n <path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/>\n <path d="M0 0h24v24H0z" fill="none"/>\n </svg>\n </button>\n <a href="#" class="matter-btn matter-btn-source" title="Source" target="_blank">{ }</a>\n <button class="matter-btn matter-btn-tools" title="Tools">\n <svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">\n <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>\n <path d="M0 0h24v24H0z" fill="none"/>\n </svg>\n </button>\n <button class="matter-btn matter-btn-inspect" title="Inspect">\n <svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">\n <path d="M0 0h24v24H0z" fill="none"/>\n <path d="M11 4.07V2.05c-2.01.2-3.84 1-5.32 2.21L7.1 5.69c1.11-.86 2.44-1.44 3.9-1.62zm7.32.19C16.84 3.05 15.01 2.25 13 2.05v2.02c1.46.18 2.79.76 3.9 1.62l1.42-1.43zM19.93 11h2.02c-.2-2.01-1-3.84-2.21-5.32L18.31 7.1c.86 1.11 1.44 2.44 1.62 3.9zM5.69 7.1L4.26 5.68C3.05 7.16 2.25 8.99 2.05 11h2.02c.18-1.46.76-2.79 1.62-3.9zM4.07 13H2.05c.2 2.01 1 3.84 2.21 5.32l1.43-1.43c-.86-1.1-1.44-2.43-1.62-3.89zM15 12c0-1.66-1.34-3-3-3s-3 1.34-3 3 1.34 3 3 3 3-1.34 3-3zm3.31 4.9l1.43 1.43c1.21-1.48 2.01-3.32 2.21-5.32h-2.02c-.18 1.45-.76 2.78-1.62 3.89zM13 19.93v2.02c2.01-.2 3.84-1 5.32-2.21l-1.43-1.43c-1.1.86-2.43 1.44-3.89 1.62zm-7.32-.19C7.16 20.95 9 21.75 11 21.95v-2.02c-1.46-.18-2.79-.76-3.9-1.62l-1.42 1.43z"/>\n </svg>\n </button>\n <button class="matter-btn matter-btn-fullscreen" title="Fullscreen">\n <svg fill="#000000" height="22" viewBox="0 0 22 22" width="22" xmlns="http://www.w3.org/2000/svg">\n <path d="M0 0h24v24H0z" fill="none"/>\n <path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/>\n </svg>\n </button>\n </div>\n <a class="matter-link" href="${o._matterLink}" title="matter.js" target="_blank">\n <svg class="matter-logo" height="100" viewBox="0 952.04859 330 100" width="268" xmlns="http://www.w3.org/2000/svg">\n <path id="m-triangle" style="fill:#76f09b;" d="m 115.83215,1052.3622 -57.916072,0 -57.916078053812107,0 L 28.958038,1002.2054 57.916077,952.04859 86.874114,1002.2054 Z" />\n <path id="m-square" style="fill:#f55f5f" d="m 168.03172,952.36218 0,100.00002 100,0 0,-100.00002 -100,0 z" />\n <circle id="m-circle" style="fill:#f5b862" r="12.947398" cy="1039.4148" cx="140.28374" />\n </svg>\n </a>\n </div>\n </header>\n </div>\n </div>\n `;let s={root:r.firstElementChild,title:r.querySelector(".matter-demo-title"),header:r.querySelector(".matter-header"),exampleSelect:r.querySelector(".matter-example-select"),buttonReset:r.querySelector(".matter-btn-reset"),buttonSource:r.querySelector(".matter-btn-source"),buttonTools:r.querySelector(".matter-btn-tools"),buttonInspect:r.querySelector(".matter-btn-inspect"),buttonFullscreen:r.querySelector(".matter-btn-fullscreen")};return e.toolbar.title||a.domRemove(s.title),e.toolbar.exampleSelect||a.domRemove(s.exampleSelect.parentElement),e.toolbar.reset||a.domRemove(s.buttonReset),e.toolbar.source||a.domRemove(s.buttonSource),e.toolbar.inspector||a.domRemove(s.buttonInspect),e.toolbar.tools||a.domRemove(s.buttonTools),e.toolbar.fullscreen||a.domRemove(s.buttonFullscreen),s}},function(e,t){e.exports=n},function(e,n){e.exports=t},function(e,n){e.exports='/*\n*\tMatterTools.Demo\n*/\n\n.matter-demo {\n display: flex;\n background: #14151f;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n height: 100vh;\n padding: 50px 0 0 0;\n}\n\n.matter-demo,\n.matter-demo * {\n box-sizing: border-box;\n font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.matter-demo *:focus,\n.matter-demo *:active {\n outline: 0;\n}\n\n.matter-demo *:-moz-focusring {\n outline: 3px solid #4da4e4;\n outline-offset: -1px;\n z-index: 5;\n}\n\n.matter-demo *:focus-visible {\n outline: 3px solid #4da4e4;\n outline-offset: -1px;\n z-index: 5;\n}\n\n.matter-demo.matter-demo-inline {\n padding: 0;\n height: inherit;\n}\n\n.matter-demo canvas {\n border-radius: 8px;\n border: 1px solid rgba(255, 255, 255, 0.07);\n max-width: 100%;\n max-height: 100%;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n.matter-demo.matter-demo-inline canvas {\n max-height: calc(100% - 49px);\n}\n\n.matter-is-fullscreen .matter-demo {\n width: 100%;\n}\n\n.matter-is-fullscreen .dg.ac,\n.matter-is-fullscreen .ins-container {\n display: none;\n}\n\n.matter-header-outer {\n position: fixed;\n z-index: 100;\n top: 0;\n left: 0;\n right: 0;\n background: #0e0f19;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.matter-demo-inline .matter-header-outer {\n position: static;\n background: transparent;\n z-index: 0;\n width: 100%;\n}\n\n.matter-header {\n width: 100%;\n padding: 7px 20px 8px 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.matter-header-inner {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n}\n\n.matter-header h1 {\n display: none;\n margin: 0 12px 0 0;\n width: 18px;\n overflow: hidden;\n flex-shrink: 0;\n}\n\n.matter-header h1 a {\n color: #c5c5cc;\n font-size: 14px;\n font-weight: 400;\n display: block;\n text-decoration: none;\n padding: 3px 0 2px 0;\n border-bottom: 1px solid transparent;\n white-space: nowrap;\n float: right;\n}\n\n.matter-header h1 a:hover,\n.matter-header h1 a:focus {\n border-bottom: 1px solid #f5b862;\n color: #fff;\n outline: 0;\n}\n\n@media screen and (min-width: 300px) {\n .matter-header h1 {\n display: inline;\n }\n}\n\n@media screen and (min-width: 600px) {\n .matter-header h1 {\n width: auto;\n overflow: visible;\n }\n}\n\n.btn-home {\n display: none;\n}\n\n.matter-demo-title svg {\n fill: #fff;\n width: 14px;\n height: 14px;\n margin: 0px 0 -2px 2px;\n}\n\n.matter-link {\n text-decoration: none;\n line-height: 13px;\n margin: 0 -10px 0 0;\n flex-shrink: 0;\n}\n\n.matter-link:focus {\n outline: none;\n}\n\n.matter-logo {\n height: 33px;\n width: 46px;\n}\n\n@media screen and (min-width: 1024px) {\n .matter-logo {\n width: 50px;\n }\n}\n\n.matter-logo #m-triangle {\n transform-origin: 14px 856px;\n transition: transform 400ms ease;\n}\n\n.matter-link:focus #m-triangle,\n.matter-logo:hover #m-triangle {\n transform: rotate(-30deg) translate(-98px, -25px);\n}\n\n.matter-logo #m-circle {\n transition: transform 200ms ease;\n transition-delay: 300ms;\n}\n\n.matter-link:focus #m-circle,\n.matter-logo:hover #m-circle {\n transform: translate(18px, -33px);\n}\n\n.matter-logo #m-square {\n transition: transform 150ms ease;\n transition-delay: 400ms;\n}\n\n.matter-link:focus #m-square,\n.matter-logo:hover #m-square {\n transform: translate(47px, -2px);\n}\n\n.matter-toolbar {\n flex-grow: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0 18px 0 0;\n}\n\n.matter-select {\n background: transparent;\n color: #c5c5cc;\n font-size: 14px;\n line-height: 33px;\n width: 100%;\n outline: none;\n padding: 0 25px 0 7px;\n margin: 0;\n border: 0;\n border-radius: 0;\n appearance: none;\n -moz-appearance: none;\n -webkit-appearance: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n.matter-select option {\n background: #fff;\n color: #000;\n}\n\n.matter-select-wrapper {\n height: 33px;\n width: 100%;\n min-width: 100px;\n max-width: 175px;\n position: relative;\n display: inline-block;\n margin-right: 4%;\n}\n\n.matter-select-wrapper:after {\n content: " ";\n display: block;\n position: absolute;\n pointer-events: none;\n width: 28px;\n height: 100%;\n background: linear-gradient(-90deg, rgb(14 15 25), rgb(14 15 25 / 0));\n right: 23px;\n top: 0;\n}\n\n.matter-demo-inline .matter-select-wrapper:after {\n display: none;\n}\n\n.matter-select:hover,\n.matter-select-wrapper:hover .matter-select {\n color: #fff;\n}\n\n.matter-select:focus-visible {\n color: #fff;\n}\n\n.matter-select:-moz-focusring {\n color: #fff;\n}\n\n.matter-select:focus {\n outline: 0;\n}\n\n.matter-select-wrapper svg:hover,\n.matter-select-wrapper:hover svg {\n background: #232635;\n}\n\n.matter-select-wrapper:hover:after svg {\n fill: #fff;\n}\n\n.matter-select-wrapper svg {\n display: block;\n pointer-events: none;\n fill: #cecece;\n width: 20px;\n height: 20px;\n position: absolute;\n z-index: 2;\n top: 6px;\n right: 0;\n border-radius: 5px;\n background: #101119;\n}\n\n.matter-btn {\n border: 0;\n background: #0b0c15;\n width: 40px;\n height: 33px;\n border-radius: 2px;\n display: inline-block;\n font-size: 16px;\n line-height: 1;\n color: #c2cad4;\n text-decoration: none;\n text-align: center;\n cursor: default;\n flex-shrink: 0;\n flex-grow: 0;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n.matter-btn svg {\n fill: #fff;\n width: 15px;\n height: 15px;\n margin: 2px 0 0 0;\n}\n\n.matter-demo-inline .matter-btn {\n background: #0f0f13;\n}\n\n.matter-btn:hover {\n background: #1c1f2d;\n outline: none;\n}\n\n.matter-btn:active {\n transform: translate(0px, 1px);\n}\n\n.matter-btn:focus-visible {\n background: #1c1f2d;\n outline: none;\n}\n\n.matter-btn:-moz-focusring {\n background: #1c1f2d;\n outline: none;\n}\n\n.matter-btn-tools {\n position: relative;\n display: none;\n font-size: 15px;\n}\n\n.matter-btn-tools svg {\n margin-left: -3px;\n}\n\n.matter-btn-inspect {\n position: relative;\n display: none;\n}\n\n.matter-btn-inspect svg {\n margin-left: -3px;\n}\n\n.matter-btn-source {\n display: none;\n font-size: 12px;\n text-align: center;\n line-height: 31px;\n}\n\n.matter-btn-fullscreen {\n position: relative;\n font-size: 18px;\n}\n\n.matter-btn-fullscreen svg {\n margin-left: -3px;\n}\n\n.matter-is-fullscreen .matter-btn-tools,\n.matter-is-fullscreen .matter-btn-inspect {\n display: none;\n}\n\n.matter-btn-fullscreen:after,\n.matter-btn-tools:after,\n.matter-btn-inspect:after {\n content: " ";\n position: absolute;\n bottom: 10px;\n width: 3px;\n height: 3px;\n background: #f5df75;\n border-radius: 1px;\n opacity: 0;\n transform: scale(0);\n transition: opacity 100ms ease, transform 100ms ease;\n}\n\n.matter-btn-inspect:after {\n left: 31px;\n}\n\n.matter-btn-tools:after {\n background: #f45f5f;\n left: 28px;\n}\n\n.matter-btn-fullscreen:after {\n background: #76f09b;\n left: 32px;\n}\n\n.matter-is-fullscreen .matter-btn-fullscreen:after,\n.matter-gui-active .matter-btn-tools:after,\n.matter-inspect-active .matter-btn-inspect:after {\n opacity: 1;\n transform: scale(1);\n}\n\n.ins-container,\nbody .dg {\n display: none;\n}\n\n@media screen and (min-width: 500px) {\n .ins-container,\n body .dg,\n .matter-btn-tools,\n .matter-btn-inspect,\n .matter-btn-source {\n display: block;\n }\n}\n'}])}));