diff options
author | Jeremy Thomas <bbxdesign@gmail.com> | 2022-05-13 19:00:50 +0300 |
---|---|---|
committer | Jeremy Thomas <bbxdesign@gmail.com> | 2022-05-13 19:00:50 +0300 |
commit | 800fa207c53e6398813bb3e0cdb16e250c165e0b (patch) | |
tree | 3aab547fdbc748dc8d52f3b37c9c810ca0726638 | |
parent | d82b9943879d7a77588a892c42a382d0adec678b (diff) |
Add grid interactionssmart-grid
-rw-r--r-- | docs/_javascript/playground.js | 23 | ||||
-rw-r--r-- | docs/cyp/grid/grid.html | 87 | ||||
-rw-r--r-- | docs/lib/playground.js | 23 |
3 files changed, 111 insertions, 22 deletions
diff --git a/docs/_javascript/playground.js b/docs/_javascript/playground.js new file mode 100644 index 00000000..2b5a967c --- /dev/null +++ b/docs/_javascript/playground.js @@ -0,0 +1,23 @@ +document.addEventListener("DOMContentLoaded", () => { + const $grid = document.getElementById("grid"); + const $columns = document.querySelectorAll(".jsColumns"); + + $columns.forEach(($) => + $.addEventListener( + "input", + (event) => { + const count = event.target.valueAsNumber; + const suffix = event.target.dataset.suffix; + console.log("Column count", count); + $grid.className = `grid has-${count}-cols${suffix}`; + const $columnsCount = getAll("strong", $.parentNode); + $columnsCount.innerHTML = count; + }, + false + ) + ); + + function getAll(selector, parent = document) { + return Array.prototype.slice.call(parent.querySelectorAll(selector), 0); + } +}); diff --git a/docs/cyp/grid/grid.html b/docs/cyp/grid/grid.html index 46c8c698..b5b38fdd 100644 --- a/docs/cyp/grid/grid.html +++ b/docs/cyp/grid/grid.html @@ -1,27 +1,70 @@ --- layout: cypress title: Grid/Grid +breakpoints: +- name: mobile + visibility: mobile + count: 2 + suffix: '-mobile' +- name: tablet + visibility: tablet-only + count: 4 + suffix: '-tablet' +- name: desktop + visibility: desktop-only + count: 8 + suffix: '-desktop' +- name: widescreen + visibility: widescreen-only + count: 12 + suffix: '-widescreen' +- name: fullhd + visibility: fullhd + count: 16 + suffix: '-fullhd' --- -<div class="grid"> - <div class="cell">#1</div> - <div class="cell">#2</div> - <div class="cell">#3</div> - <div class="cell">#4</div> - <div class="cell">#5</div> - <div class="cell">#6</div> - <div class="cell">#7</div> - <div class="cell">#8</div> - <div class="cell">#9</div> - <div class="cell">#10</div> - <div class="cell">#11</div> - <div class="cell">#12</div> - <div class="cell">#13</div> - <div class="cell">#14</div> - <div class="cell">#15</div> - <div class="cell">#16</div> - <div class="cell">#17</div> - <div class="cell">#18</div> - <div class="cell">#19</div> - <div class="cell">#20</div> -</div>
\ No newline at end of file +<script src="{{ site.url }}/lib/playground.js"></script> + +<section style="padding: 3rem;"> + {% for breakpoint in page.breakpoints %} + <p style="display: none;" class="block is-block-{{ breakpoint.visibility }}"> + Current breakpoint: <strong>{{ breakpoint.name }}</strong> + </p> + {% endfor %} + + <div style="display: flex; flex-wrap: wrap;"> + {% for breakpoint in page.breakpoints %} + <div style="margin: 0 1.5em 1.5em 0; position: relative; width: 180px;"> + <p style="border: 2px solid hsl(153, 53%, 53%); border-radius: 1em; pointer-events: none; display: none; position: absolute; left: -1em; right: -1em; top: -1em; bottom: -1em;" class="has-background-success-light is-block-{{ breakpoint.visibility }}"></p> + <div style="position: relative;"> + <p style="font-size: 0.75em"><strong>{{ breakpoint.count }}</strong> columns on {{ breakpoint.name }}</p> + <input id="columns" class="jsColumns" type="range" min="1" max="16" value="{{ breakpoint.count }}" data-suffix="{{ breakpoint.suffix }}"> + </div> + </div> + {% endfor %} + </div> + + <div id="grid" class="grid"> + <div class="cell">#1</div> + <div class="cell">#2</div> + <div class="cell">#3</div> + <div class="cell">#4</div> + <div class="cell">#5</div> + <div class="cell">#6</div> + <div class="cell">#7</div> + <div class="cell">#8</div> + <div class="cell">#9</div> + <div class="cell">#10</div> + <div class="cell">#11</div> + <div class="cell">#12</div> + <div class="cell">#13</div> + <div class="cell">#14</div> + <div class="cell">#15</div> + <div class="cell">#16</div> + <div class="cell">#17</div> + <div class="cell">#18</div> + <div class="cell">#19</div> + <div class="cell">#20</div> + </div> +</section> diff --git a/docs/lib/playground.js b/docs/lib/playground.js new file mode 100644 index 00000000..be6f0173 --- /dev/null +++ b/docs/lib/playground.js @@ -0,0 +1,23 @@ +"use strict"; + +document.addEventListener("DOMContentLoaded", function () { + var $grid = document.getElementById("grid"); + var $columns = document.querySelectorAll(".jsColumns"); + + $columns.forEach(function ($) { + return $.addEventListener("input", function (event) { + var count = event.target.valueAsNumber; + var suffix = event.target.dataset.suffix; + console.log("Column count", count); + $grid.className = "grid has-" + count + "-cols" + suffix; + var $columnsCount = getAll("strong", $.parentNode); + $columnsCount.innerHTML = count; + }, false); + }); + + function getAll(selector) { + var parent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : document; + + return Array.prototype.slice.call(parent.querySelectorAll(selector), 0); + } +});
\ No newline at end of file |