joicomponents
Version:
Design patterns to build native web components
48 lines (44 loc) • 1.28 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pinch test</title>
<style type="text/css" rel="stylesheet">
rotate-block,
scale-block,
scale-block-symmetric {
display: inline-block;
position: relative;
width: 150px;
height: 150px;
margin: 20px;
}
rotate-block {
border: 4px solid blue;
border-radius: 0 50% 50% 50%;
}
scale-block {
border: 4px solid orange;
}
scale-block-symmetric {
border: 4px solid red;
}
</style>
<script src="https://hammerjs.github.io/dist/hammer.js"></script>
<script src="//cdn.rawgit.com/hammerjs/touchemulator/0.0.2/touch-emulator.js"></script>
<script> TouchEmulator(); </script>
</head>
<body>
<rotate-block>rotate</rotate-block>
<scale-block-symmetric>symmetric scale</scale-block-symmetric>
<scale-block>free scale</scale-block>
<script type="module">
import {ScaleBlockSymmetric} from './ScaleBlockSymmetric.js';
import {ScaleBlock} from './ScaleBlock.js';
import {RotateBlock} from './RotateBlock.js';
customElements.define("scale-block-symmetric", ScaleBlockSymmetric);
customElements.define("scale-block", ScaleBlock);
customElements.define("rotate-block", RotateBlock);
</script>
</body>
</html>