diff options
| author |   Unit 193 <unit193@unit193.net> | 2021-02-03 19:17:00 -0500 |
|---|---|---|
| committer | Unit 193 <unit193@unit193.net> | 2021-02-03 19:17:00 -0500 |
| commit | 3a0d66f07b112b6d2bdc2b57bbf717a89a351ce6 (patch) | |
| tree | a7cf56282e54f05785243bc1e903d6594f2c06ba /npm_assets/node_modules/justified-layout/demo.html | |
| parent | 787b97a4cb24330b36f11297c6d3a7a473a907d0 (diff) | |
New upstream version 8.1.2.upstream/8.1.2
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> + |