diff options
| author |   Unit 193 <unit193@unit193.net> | 2021-02-03 19:17:50 -0500 |
|---|---|---|
| committer | Unit 193 <unit193@unit193.net> | 2021-02-03 19:17:50 -0500 |
| commit | 475d074fd74425efbe783fad08f97f2df0c4909f (patch) | |
| tree | 2acdae53999b3c74b716efa4edb5b40311fa356a /npm_assets/node_modules/justified-layout/demo.html | |
| parent | cd502d52787f666fff3254d7d7e7578930c813c2 (diff) | |
| parent | 3a0d66f07b112b6d2bdc2b57bbf717a89a351ce6 (diff) | |
Update upstream source from tag 'upstream/8.1.2'
Update to upstream version '8.1.2'
with Debian dir e5e966a9e6010ef70618dc9a61558fa4db35aceb
Diffstat (limited to 'npm_assets/node_modules/justified-layout/demo.html')
| -rw-r--r-- | npm_assets/node_modules/justified-layout/demo.html | 80 |
1 files changed, 80 insertions, 0 deletions
diff --git a/npm_assets/node_modules/justified-layout/demo.html b/npm_assets/node_modules/justified-layout/demo.html new file mode 100644 index 0000000..bf500df --- /dev/null +++ b/npm_assets/node_modules/justified-layout/demo.html @@ -0,0 +1,80 @@ +<!DOCTYPE html> + +<head> + <title>Justified Layout Demo</title> + <script type="text/javascript" src="dist/justified-layout.js"></script> + <script type="text/javascript"> + + document.addEventListener('DOMContentLoaded', function() { + + var justifiedLayout = require('justified-layout'); + + var demos = [ + { + sizes: [0.5, 1.5, 1, 1.8, 0.4, 0.7, 0.9, 1.1, 1.7, 2, 2.1], + className: "various", + config: {} + }, + { + sizes: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1], + className: "squares", + config: {} + }, + { + sizes: [1, 1, 1, 1, 1, 2, 1, 1, 1, 1, 1, 1.5, 1.73, 1.1, 0.5, 1], + className: "breakout", + config: { + "fullWidthBreakoutRowCadence": 3 + } + } + ]; + + // Loop through the demos and put them in the page + demos.forEach(function (demo) { + + var section = document.createElement("section"); + section.innerHTML = ` + <h2>Input: <code>[${demo.sizes.join(", ")}]</code></h2> + <div class="justified"></div> + `; + document.body.appendChild(section); + + var geometry = justifiedLayout(demo.sizes, demo.config); + + console.log("geometry", geometry); + var boxes = geometry.boxes.map(function (box) { + return `<div class="box" style="width: ${box.width}px; height: ${box.height}px; top: ${box.top}px; left: ${box.left}px"></div>`; + }).join('\n') + + section.querySelector('.justified').innerHTML = boxes; + section.querySelector('.justified').style.height = geometry.containerHeight + "px"; + + }); + + }, false); + + </script> + + <style type="text/css" media="screen"> + + .justified { + position: relative; + background: seagreen; + width: 1060px; + } + + .box { + position: absolute; + background: yellowgreen; + } + + </style> + +</head> + +<body> + + <h1>justified-layout demo</h1> + +</body> + |