Metro Layout

This example demonstrates the options you have when using the masonry layout.

<p>This example demonstrates the options you have when using the masonry layout. The Masonry Layout Engine organizes items automatically according to size, but you have options such as order, column and row sizing, gutter width, and more. You can also set grouping strategies which dictate how items are arranged.</p> <p>This demo gives you controls to show you what each option does. These controls are labeled by their JavaScript option names.</p> <ul> <li><strong>keepOrder</strong>: when set to <strong>true</strong>, the engine preserves the order of the data. When set to <strong>false</strong>, the engine optimizes the order.</li> <li><strong>rowHeight</strong>: sets the minimum vertical padding between items.</li> <li><strong>gutter</strong>: sets the padding between items.</li> <li><strong>columnWidth</strong>: sets the minimum horizontal padding between items.</li> </ul> <p>This demo also has three buttons, <strong>metro</strong>, <strong>pinterest</strong>, and <strong>random</strong>, that load preset grouping strategies. Metro groups items in a manner that optimizes layout. Pinterest uses a set item width. Random randomizes item size.</p>
<!DOCTYPE html> <html lang="en"> <head> <base href="/dataviewsjs/demos/en/sample/DataViews/Masonry/MetroLayout/purejs/" /> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="keywords" content="masonry, metro, pinterest, pinterest like" /> <meta name="description" content="This example demonstrates the options you have when using the masonry layout." /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Metro Layout | Data Views | GrapeCity DataViewsJS JavaScript Demos</title> <link href="/dataviewsjs/demos/node_modules/normalize.css/normalize.css" rel="stylesheet" type="text/css" /> <link href="/dataviewsjs/demos/static/css/base.css" rel="stylesheet" type="text/css" /> <link href="/dataviewsjs/demos/static/css/bootstrap-snippet.min.css" rel="stylesheet" type="text/css" /> <link href="/dataviewsjs/demos/node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css" /> <link href="/dataviewsjs/demos/static/dataviews/gc.dataviews.core.min.css" rel="stylesheet" type="text/css" /> <link href="/dataviewsjs/demos/static/dataviews/gc.dataviews.masonry.min.css" rel="stylesheet" type="text/css" /> <link href="styles.css" rel="stylesheet" type="text/css" /> <!-- Google Tag Manager --> <script> (function (w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-WT462SJ'); </script> <!-- End Google Tag Manager --> <script src="/dataviewsjs/demos/static/js/app-polyfills.min.js" type="text/javascript"></script> <script type="text/javascript"> window.process = { env: { NODE_ENV: 'production', USE_NPM: false, USE_CDN: false, SITE_ROOT: '/dataviewsjs/demos', FRAMEWORK: 'purejs', DVJS_LICENSE_KEY: 'E674186349827489#B0LYWQMpFdP3WSHlVaGdjTFtyLCxUQjdFV5MHey9kTyBnY0pkY6tWcr34caJjSPlEVlR6QpJnZEdjSj9kbkRUZChzMsRFS99mN4ZGO72yK7FXe5tmN59Eai5UM7dEVvgUeYN5MqdUTIpWTpBnSTJEWv24YwoFWr9mWEl6UNVmVMxUd5ckUQdlUNV4MDhENaV5KNNWbJtiSwFUYCVUax4GUuBjZDN7T5dWdDpFNyJjSxJkes3mUt94QrdnMK5mZORGeFZ4QyFTMmdWOWdlMmJ4ZJhTS5MmZatyZ7k5c0JXVB3mWVNke7AFRiojITJCLikjNBNjNzcjI0ICSiwSN8AjN9YjMwUTM0IicfJye35XX3JSWUVVOiojIDJCLiEjdgMlSzdXZpZVY4FGRiojIOJyebpjIkJHUiwiI9MDMykDMggDM8ATOxAjMiojI4J7QiwiIt36YukHdpNWZwFmcn9iKiojIz5GRiwiIj9WSgkHdpNUZwFmcHJiOiEmTDJCLlVnc4pjIsZXRiwiI9gDN7IDO9QzM6gTM4cjNiojIklkI1pjIEJCLi4TPn3UZuJ7cPZTW5hUMtN7MJN6aQFnT5gmd9FEZ4EETlFmW63kU8IGdiRGTJZle5UDbZJHTR34T0JzZoZmbalXQwNmM8EndEFEdSVlMiVnckFmQUJTOahmc7AzRHhlU4I4Vs3kN6lHaHR4LuhWULNIe', SJS_LICENSE_KEY: '*.grapecity.com,E613631884219496#B0qRgJHWSJ7NyBlc8BjNMRHW7g7YldTZXFTQuFnW4hVOCplVSlVV09ERlhEZuVTVKlTazE4Q6VGSw2CdWZUWSVmbjVXbrxmWFVWR8ZzQro7U84WMGdlbuVHb73kS5kjUTN4NvFVdLdXWVR4Nox6Z7UUSysEcXJEMsN6bDN4TxMDVwVmWBRzKxhkTzAXTaJmdD3CRFJTd8R4R6M5RklWa6oUaLlXMwR4R8ZUdtRWVxUUaQh6VXNDdEhlZ7FHR6QXTPJTVvkWcyZnbSdHRtZHcYF6TKN4axYGcZNjTDF7TvFTTr24VqZjVHVjcLd7QkRmdNxkI0IyUiwiI5gDOEF4QGVjI0ICSiwiMzkTO9kTOyMTM0IicfJye35XX3JSSGljQiojIDJCLiITMuYHITpEIkFWZyB7UiojIOJyebpjIkJHUiwiI4MDMyEDMgkDM8ATOxAjMiojI4J7QiwiIt36YukHdpNWZwFmcn9iKiojIz5GRiwiIj9WagkHdpNUZwFmcHJiOiEmTDJCLlVnc4pjIsZXRiwiI6kDN9EjM4gDOxMjNzEjNiojIklkIs4XZzxWYmpjIyNHZisnOiwmbBJye0ICRiwiI34TQ72kNBV6YXpXdGxGWxdHcol4MyUGUHJVbQVHRx44Sw84YxRkS4QnZadDNmhWWxV5QxFlTlZEbBJ5N8gUNQlDb7J6Kl36YHVnb4NGN92UMFdlNORFU8VDSaFlQSVlS4EHTrA5Ohh', }, }; </script> <script src="/dataviewsjs/demos/node_modules/lodash/lodash.min.js" type="text/javascript"></script> <script src="/dataviewsjs/demos/node_modules/jquery/dist/jquery.min.js" type="text/javascript"></script> <script src="/dataviewsjs/demos/static/dataviews/gc.dataviews.common.min.js" type="text/javascript"></script> <script src="/dataviewsjs/demos/static/dataviews/gc.dataviews.core.min.js" type="text/javascript"></script> <script src="/dataviewsjs/demos/static/dataviews/gc.dataviews.masonry.min.js" type="text/javascript"></script> <script src="/dataviewsjs/demos/static/js/license.js" type="text/javascript"></script> </head> <body class="theme-default"> <!-- Google Tag Manager (noscript) --> <noscript ><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WT462SJ" height="0" width="0" style="display: none; visibility: hidden;" ></iframe ></noscript> <!-- End Google Tag Manager (noscript) --> <noscript>You need to enable JavaScript to run this app.</noscript> <template id="rowTemplate" style="display: none;"> <div data-column="block"></div> </template> <div class="main-container responsive-container"> <div class="mobile-only toggle-options"> <span class="fa fa-cog"></span> </div> <div id="grid" class="grid main-content"></div> <div class="sample-options"> <div class="option-row"> <div class="btn-group" role="group"> <button id="metroData" class="btn btn-default active"> Metro </button> <button id="pinterestData" class="btn btn-default"> Pinterest </button> <button id="randomData" class="btn btn-default">Random</button> </div> </div> <div class="option-row"> <div class="range-container"> <b class="label">Keep Order:</b> <div class="range-wrapper"> <input type="range" id="keepOrder" min="0" max="1" style="width: 100px;" value="0" /> <span class="indicator" id="keepOrder-indicator">OFF</span> </div> </div> </div> <div class="option-row"> <div class="range-container"> <b class="label">Gutter:</b> <div class="range-wrapper"> <input type="range" id="gutter" min="0" max="50" style="width: 200px;" value="0" /> <span class="indicator" id="gutter-indicator">0</span> </div> </div> </div> <div class="option-row"> <div class="range-container"> <b class="label">Row Height:</b> <div class="range-wrapper"> <input type="range" id="rowHeight" min="1" max="200" style="width: 200px;" value="1" /> <span class="indicator" id="rowHeight-indicator">1</span> </div> </div> </div> <div class="option-row"> <div class="range-container"> <b class="label">Column Width:</b> <div class="range-wrapper"> <input type="range" id="columnWidth" min="1" max="200" style="width: 200px;" value="1" /> <span class="indicator" id="columnWidth-indicator">1</span> </div> </div> </div> </div> </div> <script src="locale.js" type="text/javascript"></script> <script src="data.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> </body> </html>
var cols = [ { id: 'block', dataField: 'block', presenter: '<div class="block" style="width:{{=it.block.width}}px;height:{{=it.block.height}}px;background-color:{{=it.currentColor}};"></div>', }, { id: 'currentColor', dataField: 'currentColor', visible: false, }, { id: 'color', dataField: 'color', visible: false, }, { id: 'darkerColor', dataField: 'darkerColor', visible: false, }, ]; var layout = new GC.DataViews.MasonryLayout({ rowTemplate: '#rowTemplate', keepOrder: false, }); var dataView = new GC.DataViews.DataView(document.getElementById('grid'), data, cols, layout); document.getElementById('grid').addEventListener('click', handleMouseClick); function setOption(name) { var input = document.getElementById(name); var indicator = document.getElementById(''.concat(name, '-indicator')); var value = parseInt(input.value, 10); indicator.innerHTML = name === 'keepOrder' ? (value ? locale.on : locale.off) : input.value; var opts = {}; opts[name] = value; Object.assign(dataView.options, opts); dataView.invalidate(); } function changeDataSet(name) { $('.btn-group .btn').removeClass('active'); $('#'.concat(name)).addClass('active'); var currData = window[name]; data.forEach(function (item, index) { var factor = item.size === 'small' ? 1 : 2; item.block.width = currData[index].width * factor; item.block.height = currData[index].height * factor; }); dataView.invalidate(); } function handleMouseClick(args) { var hitTestInfo = dataView.hitTest(args); if (hitTestInfo.row > -1) { var item = dataView.data.getItem(hitTestInfo.row); if (item) { toggleSize(item); dataView.invalidate(); } } } function toggleSize(item) { var maxWidth = dataView.getLayoutInfo().viewport.contentWidth; if (item.size === 'small') { item.block.width = Math.min(maxWidth, 2 * item.block.width); item.block.height *= 2; item.size = 'large'; item.currentColor = item.darkerColor; } else { item.block.width /= 2; item.block.height /= 2; item.size = 'small'; item.currentColor = item.color; } } $('#metroData').click(function () { return changeDataSet('metroData'); }); $('#pinterestData').click(function () { return changeDataSet('pinterestData'); }); $('#randomData').click(function () { return changeDataSet('randomData'); }); $('#keepOrder').change(function () { return setOption('keepOrder'); }); $('#gutter').change(function () { return setOption('gutter'); }); $('#rowHeight').change(function () { return setOption('rowHeight'); }); $('#columnWidth').change(function () { return setOption('columnWidth'); }); // helpers for responsive options panel $(function () { $('body').on('click', '.toggle-options', function () { const options = $('.sample-options'); const display = options.css('display'); options.css({ display: display === 'flex' ? 'none' : 'flex' }); $('.toggle-options .fa').toggleClass('fa-cog').toggleClass('fa-times'); }); window.addEventListener('resize', function () { if ($('.mobile-only').css('visibility') === 'hidden') { $('.sample-options').css({ display: 'flex' }); } }); });
var colors = ['#CFF09E', '#A8DBA8', '#79BD9A', '#3B8686']; var darkerColors = ['#67DB67', '#40BC7C', '#0E8787', '#00436B']; var data = []; var pinterestData = []; var metroData = []; var randomData = []; for (var i = 0; i < 80; i++) { // to control the probability var tempFactor = _.random(1, 13); var sideLength = tempFactor < 2 ? 160 : tempFactor < 5 ? 80 : 40; metroData.push({ width: sideLength, height: sideLength, }); pinterestData.push({ width: 100, height: _.random(4, 6) * 20, }); randomData.push({ width: _.random(1, 3) * 40, height: _.random(1, 3) * 40, }); data.push({ block: { width: metroData[i].width, height: metroData[i].height, }, size: 'small', currentColor: colors[i % colors.length], color: colors[i % colors.length], darkerColor: darkerColors[i % colors.length], }); } window.metroData = metroData; window.pinterestData = pinterestData; window.randomData = randomData;
var locale = { keepOrder: 'Keep Order', on: 'ON', off: 'OFF', rowHeight: 'Row Height', gutter: 'Gutter', columnWidth: 'Column Width', metro: 'Metro', pinterest: 'Pinterest', random: 'Random', };
.main-container { width: 100%; height: 100%; } .sample-options { background: #fbfbfb; box-sizing: border-box; height: 100%; overflow: auto; padding: 10px; min-width: 240px; max-width: 300px; } .sample-options label { display: inline-block; font-weight: normal; width: 75px; } .sample-options select { border: 1px solid #999; } .sample-options .range-container { width: 100%; } .sample-options .range-wrapper { display: flex; flex-direction: row; } .sample-options .range-wrapper input { flex: 1 1 auto; } .sample-options .range-wrapper .indicator { padding: 1rem; min-width: 2rem; } .sample-options .option-row { margin-bottom: 5px; } .sample-options .option-row .label { display: block; margin-bottom: 5px; } .sample-options .option-row range { width: 100%; } .sample-options .btn-group { display: inline-flex; white-space: nowrap; } #grid { height: 100%; } .block { border: 2px solid #f1f1f1; box-sizing: border-box; } .block:hover { border: 2px solid #fff; } .flex-break { flex-basis: 100%; height: 0; } .mobile-only { visibility: hidden; } .responsive-container { display: flex; box-sizing: border-box; } .responsive-container .main-content { box-sizing: border-box; height: 100%; flex-grow: 1; flex-shrink: 1; min-width: 50%; max-width: 100%; } .responsive-container .sample-options { box-sizing: border-box; display: inline-flex; flex-direction: column; height: 100%; flex-grow: 0; flex-shrink: 1; } .responsive-container .sample-options .option-row { box-sizing: border-box; display: inline-flex; align-items: center; flex-grow: 0; flex-shrink: 0; flex-basis: auto; white-space: nowrap; padding-right: 10px; width: auto; } .responsive-container .toggle-options { align-items: center; justify-content: center; position: absolute; top: 5px; right: 5px; background-color: #ebebeb; color: #84bd00; border-radius: 16px; cursor: pointer; width: 36px; height: 36px; font-size: 28px; z-index: 101; display: none; } @media (min-width: 320px) and (max-width: 480px) and (orientation: portrait) { .mobile-only { visibility: visible; } .responsive-container { display: block; position: relative; } .responsive-container .main-content { position: absolute; display: block; top: 0; left: 0; width: 100%; max-width: 100%; z-index: 99; } .responsive-container .toggle-options { display: flex; } .responsive-container .sample-options { display: none; position: absolute; top: 0; left: 0; width: 100%; max-width: 100%; height: 100%; z-index: 100; } .responsive-container .sample-options .option-row { padding-right: 20px; } } /*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkRhdGFWaWV3cy9NYXNvbnJ5L01ldHJvTGF5b3V0L3B1cmVqcy9zdHlsZXMuc2NzcyIsIkRhdGFWaWV3cy9NYXNvbnJ5L01ldHJvTGF5b3V0L3B1cmVqcy9zdHlsZXMuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0VBQ0UsV0FBQTtFQUNBLFlBQUE7QUNDRjs7QURFQTtFQUNFLG1CQUFBO0VBQ0Esc0JBQUE7RUFDQSxZQUFBO0VBQ0EsY0FBQTtFQUNBLGFBQUE7RUFDQSxnQkFBQTtFQUNBLGdCQUFBO0FDQ0Y7QURDRTtFQUNFLHFCQUFBO0VBQ0EsbUJBQUE7RUFDQSxXQUFBO0FDQ0o7QURFRTtFQUNFLHNCQUFBO0FDQUo7QURHRTtFQUNFLFdBQUE7QUNESjtBRElFO0VBQ0UsYUFBQTtFQUNBLG1CQUFBO0FDRko7QURJSTtFQUNFLGNBQUE7QUNGTjtBREtJO0VBQ0UsYUFBQTtFQUNBLGVBQUE7QUNITjtBRE9FO0VBQ0Usa0JBQUE7QUNMSjtBRE9JO0VBQ0UsY0FBQTtFQUNBLGtCQUFBO0FDTE47QURRSTtFQUNFLFdBQUE7QUNOTjtBRFVFO0VBQ0Usb0JBQUE7RUFDQSxtQkFBQTtBQ1JKOztBRFlBO0VBQ0UsWUFBQTtBQ1RGOztBRFlBO0VBQ0UseUJBQUE7RUFDQSxzQkFBQTtBQ1RGO0FEV0U7RUFDRSxzQkFBQTtBQ1RKOztBRDhCQTtFQUNFLGdCQUFBO0VBQ0EsU0FBQTtBQzNCRjs7QUQ4QkE7RUFDRSxrQkFBQTtBQzNCRjs7QUQ4QkE7RUFDRSxhQUFBO0VBQ0Esc0JBQUE7QUMzQkY7QUQ2QkU7RUFDRSxzQkFBQTtFQUNBLFlBQUE7RUFDQSxZQUFBO0VBQ0EsY0FBQTtFQUNBLGNBQUE7RUFDQSxlQUFBO0FDM0JKO0FEOEJFO0VBQ0Usc0JBQUE7RUFDQSxvQkFBQTtFQUNBLHNCQUFBO0VBQ0EsWUFBQTtFQUNBLFlBQUE7RUFDQSxjQUFBO0FDNUJKO0FEOEJJO0VBQ0Usc0JBQUE7RUFDQSxvQkFBQTtFQUNBLG1CQUFBO0VBQ0EsWUFBQTtFQUNBLGNBQUE7RUFDQSxnQkFBQTtFQUNBLG1CQUFBO0VBQ0EsbUJBQUE7RUFDQSxXQUFBO0FDNUJOO0FEZ0NFO0VBMURBLG1CQUFBO0VBQ0EsdUJBQUE7RUFDQSxrQkFBQTtFQUNBLFFBQUE7RUFDQSxVQUFBO0VBQ0EseUJBQUE7RUFDQSxjQUFBO0VBQ0EsbUJBQUE7RUFDQSxlQUFBO0VBQ0EsV0FBQTtFQUNBLFlBQUE7RUFDQSxlQUFBO0VBQ0EsWUFBQTtFQWdERSxhQUFBO0FDbEJKOztBRHVCQTtFQUNFO0lBQ0UsbUJBQUE7RUNwQkY7O0VEc0JBO0lBQ0UsY0FBQTtJQUNBLGtCQUFBO0VDbkJGO0VEcUJFO0lBQ0Usa0JBQUE7SUFDQSxjQUFBO0lBQ0EsTUFBQTtJQUNBLE9BQUE7SUFDQSxXQUFBO0lBQ0EsZUFBQTtJQUNBLFdBQUE7RUNuQko7RURzQkU7SUFDRSxhQUFBO0VDcEJKO0VEdUJFO0lBQ0UsYUFBQTtJQUNBLGtCQUFBO0lBQ0EsTUFBQTtJQUNBLE9BQUE7SUFDQSxXQUFBO0lBQ0EsZUFBQTtJQUNBLFlBQUE7SUFDQSxZQUFBO0VDckJKO0VEdUJJO0lBQ0UsbUJBQUE7RUNyQk47QUFDRiIsImZpbGUiOiJEYXRhVmlld3MvTWFzb25yeS9NZXRyb0xheW91dC9wdXJlanMvc3R5bGVzLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi5tYWluLWNvbnRhaW5lciB7XG4gIHdpZHRoOiAxMDAlO1xuICBoZWlnaHQ6IDEwMCU7XG59XG5cbi5zYW1wbGUtb3B0aW9ucyB7XG4gIGJhY2tncm91bmQ6ICNmYmZiZmI7XG4gIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gIGhlaWdodDogMTAwJTtcbiAgb3ZlcmZsb3c6IGF1dG87XG4gIHBhZGRpbmc6IDEwcHg7XG4gIG1pbi13aWR0aDogMjQwcHg7XG4gIG1heC13aWR0aDogMzAwcHg7XG5cbiAgbGFiZWwge1xuICAgIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbiAgICBmb250LXdlaWdodDogbm9ybWFsO1xuICAgIHdpZHRoOiA3NXB4O1xuICB9XG5cbiAgc2VsZWN0IHtcbiAgICBib3JkZXI6IDFweCBzb2xpZCAjOTk5O1xuICB9XG5cbiAgLnJhbmdlLWNvbnRhaW5lciB7XG4gICAgd2lkdGg6IDEwMCU7XG4gIH1cblxuICAucmFuZ2Utd3JhcHBlciB7XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBmbGV4LWRpcmVjdGlvbjogcm93O1xuXG4gICAgaW5wdXQge1xuICAgICAgZmxleDogMSAxIGF1dG87XG4gICAgfVxuXG4gICAgLmluZGljYXRvciB7XG4gICAgICBwYWRkaW5nOiAxcmVtO1xuICAgICAgbWluLXdpZHRoOiAycmVtO1xuICAgIH1cbiAgfVxuXG4gIC5vcHRpb24tcm93IHtcbiAgICBtYXJnaW4tYm90dG9tOiA1cHg7XG5cbiAgICAubGFiZWwge1xuICAgICAgZGlzcGxheTogYmxvY2s7XG4gICAgICBtYXJnaW4tYm90dG9tOiA1cHg7XG4gICAgfVxuXG4gICAgcmFuZ2Uge1xuICAgICAgd2lkdGg6IDEwMCU7XG4gICAgfVxuICB9XG5cbiAgLmJ0bi1ncm91cCB7XG4gICAgZGlzcGxheTogaW5saW5lLWZsZXg7XG4gICAgd2hpdGUtc3BhY2U6IG5vd3JhcDtcbiAgfVxufVxuXG4jZ3JpZCB7XG4gIGhlaWdodDogMTAwJTtcbn1cblxuLmJsb2NrIHtcbiAgYm9yZGVyOiAycHggc29saWQgI2YxZjFmMTtcbiAgYm94LXNpemluZzogYm9yZGVyLWJveDtcblxuICAmOmhvdmVyIHtcbiAgICBib3JkZXI6IDJweCBzb2xpZCAjZmZmO1xuICB9XG59XG5cbi8vIGhlbHBlcnMgZm9yIHJlc3BvbnNpdmUgb3B0aW9ucyBwYW5lbFxuQG1peGluIG1vYmlsZS1idG4oKSB7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIHRvcDogNXB4O1xuICByaWdodDogNXB4O1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAjZWJlYmViO1xuICBjb2xvcjogIzg0YmQwMDtcbiAgYm9yZGVyLXJhZGl1czogMTZweDtcbiAgY3Vyc29yOiBwb2ludGVyO1xuICB3aWR0aDogMzZweDtcbiAgaGVpZ2h0OiAzNnB4O1xuICBmb250LXNpemU6IDI4cHg7XG4gIHotaW5kZXg6IDEwMTtcbn1cblxuLmZsZXgtYnJlYWsge1xuICBmbGV4LWJhc2lzOiAxMDAlO1xuICBoZWlnaHQ6IDA7XG59XG5cbi5tb2JpbGUtb25seSB7XG4gIHZpc2liaWxpdHk6IGhpZGRlbjtcbn1cblxuLnJlc3BvbnNpdmUtY29udGFpbmVyIHtcbiAgZGlzcGxheTogZmxleDtcbiAgYm94LXNpemluZzogYm9yZGVyLWJveDtcblxuICAubWFpbi1jb250ZW50IHtcbiAgICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICAgIGhlaWdodDogMTAwJTtcbiAgICBmbGV4LWdyb3c6IDE7XG4gICAgZmxleC1zaHJpbms6IDE7XG4gICAgbWluLXdpZHRoOiA1MCU7XG4gICAgbWF4LXdpZHRoOiAxMDAlO1xuICB9XG5cbiAgLnNhbXBsZS1vcHRpb25zIHtcbiAgICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICAgIGRpc3BsYXk6IGlubGluZS1mbGV4O1xuICAgIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gICAgaGVpZ2h0OiAxMDAlO1xuICAgIGZsZXgtZ3JvdzogMDtcbiAgICBmbGV4LXNocmluazogMTtcblxuICAgIC5vcHRpb24tcm93IHtcbiAgICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gICAgICBkaXNwbGF5OiBpbmxpbmUtZmxleDtcbiAgICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAgICBmbGV4LWdyb3c6IDA7XG4gICAgICBmbGV4LXNocmluazogMDtcbiAgICAgIGZsZXgtYmFzaXM6IGF1dG87XG4gICAgICB3aGl0ZS1zcGFjZTogbm93cmFwO1xuICAgICAgcGFkZGluZy1yaWdodDogMTBweDtcbiAgICAgIHdpZHRoOiBhdXRvO1xuICAgIH1cbiAgfVxuXG4gIC50b2dnbGUtb3B0aW9ucyB7XG4gICAgQGluY2x1ZGUgbW9iaWxlLWJ0bjtcbiAgICBkaXNwbGF5OiBub25lO1xuICB9XG59XG5cbi8vIG1vc3Qgc21hcnRwaG9uZXNcbkBtZWRpYSAobWluLXdpZHRoOiAzMjBweCkgYW5kIChtYXgtd2lkdGg6IDQ4MHB4KSBhbmQgKG9yaWVudGF0aW9uOiBwb3J0cmFpdCkge1xuICAubW9iaWxlLW9ubHkge1xuICAgIHZpc2liaWxpdHk6IHZpc2libGU7XG4gIH1cbiAgLnJlc3BvbnNpdmUtY29udGFpbmVyIHtcbiAgICBkaXNwbGF5OiBibG9jaztcbiAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG5cbiAgICAubWFpbi1jb250ZW50IHtcbiAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICAgIGRpc3BsYXk6IGJsb2NrO1xuICAgICAgdG9wOiAwO1xuICAgICAgbGVmdDogMDtcbiAgICAgIHdpZHRoOiAxMDAlO1xuICAgICAgbWF4LXdpZHRoOiAxMDAlO1xuICAgICAgei1pbmRleDogOTk7XG4gICAgfVxuXG4gICAgLnRvZ2dsZS1vcHRpb25zIHtcbiAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgfVxuXG4gICAgLnNhbXBsZS1vcHRpb25zIHtcbiAgICAgIGRpc3BsYXk6IG5vbmU7XG4gICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICB0b3A6IDA7XG4gICAgICBsZWZ0OiAwO1xuICAgICAgd2lkdGg6IDEwMCU7XG4gICAgICBtYXgtd2lkdGg6IDEwMCU7XG4gICAgICBoZWlnaHQ6IDEwMCU7XG4gICAgICB6LWluZGV4OiAxMDA7XG5cbiAgICAgIC5vcHRpb24tcm93IHtcbiAgICAgICAgcGFkZGluZy1yaWdodDogMjBweDtcbiAgICAgIH1cbiAgICB9XG4gIH1cbn1cbiIsIi5tYWluLWNvbnRhaW5lciB7XG4gIHdpZHRoOiAxMDAlO1xuICBoZWlnaHQ6IDEwMCU7XG59XG5cbi5zYW1wbGUtb3B0aW9ucyB7XG4gIGJhY2tncm91bmQ6ICNmYmZiZmI7XG4gIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gIGhlaWdodDogMTAwJTtcbiAgb3ZlcmZsb3c6IGF1dG87XG4gIHBhZGRpbmc6IDEwcHg7XG4gIG1pbi13aWR0aDogMjQwcHg7XG4gIG1heC13aWR0aDogMzAwcHg7XG59XG4uc2FtcGxlLW9wdGlvbnMgbGFiZWwge1xuICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gIGZvbnQtd2VpZ2h0OiBub3JtYWw7XG4gIHdpZHRoOiA3NXB4O1xufVxuLnNhbXBsZS1vcHRpb25zIHNlbGVjdCB7XG4gIGJvcmRlcjogMXB4IHNvbGlkICM5OTk7XG59XG4uc2FtcGxlLW9wdGlvbnMgLnJhbmdlLWNvbnRhaW5lciB7XG4gIHdpZHRoOiAxMDAlO1xufVxuLnNhbXBsZS1vcHRpb25zIC5yYW5nZS13cmFwcGVyIHtcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IHJvdztcbn1cbi5zYW1wbGUtb3B0aW9ucyAucmFuZ2Utd3JhcHBlciBpbnB1dCB7XG4gIGZsZXg6IDEgMSBhdXRvO1xufVxuLnNhbXBsZS1vcHRpb25zIC5yYW5nZS13cmFwcGVyIC5pbmRpY2F0b3Ige1xuICBwYWRkaW5nOiAxcmVtO1xuICBtaW4td2lkdGg6IDJyZW07XG59XG4uc2FtcGxlLW9wdGlvbnMgLm9wdGlvbi1yb3cge1xuICBtYXJnaW4tYm90dG9tOiA1cHg7XG59XG4uc2FtcGxlLW9wdGlvbnMgLm9wdGlvbi1yb3cgLmxhYmVsIHtcbiAgZGlzcGxheTogYmxvY2s7XG4gIG1hcmdpbi1ib3R0b206IDVweDtcbn1cbi5zYW1wbGUtb3B0aW9ucyAub3B0aW9uLXJvdyByYW5nZSB7XG4gIHdpZHRoOiAxMDAlO1xufVxuLnNhbXBsZS1vcHRpb25zIC5idG4tZ3JvdXAge1xuICBkaXNwbGF5OiBpbmxpbmUtZmxleDtcbiAgd2hpdGUtc3BhY2U6IG5vd3JhcDtcbn1cblxuI2dyaWQge1xuICBoZWlnaHQ6IDEwMCU7XG59XG5cbi5ibG9jayB7XG4gIGJvcmRlcjogMnB4IHNvbGlkICNmMWYxZjE7XG4gIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG59XG4uYmxvY2s6aG92ZXIge1xuICBib3JkZXI6IDJweCBzb2xpZCAjZmZmO1xufVxuXG4uZmxleC1icmVhayB7XG4gIGZsZXgtYmFzaXM6IDEwMCU7XG4gIGhlaWdodDogMDtcbn1cblxuLm1vYmlsZS1vbmx5IHtcbiAgdmlzaWJpbGl0eTogaGlkZGVuO1xufVxuXG4ucmVzcG9uc2l2ZS1jb250YWluZXIge1xuICBkaXNwbGF5OiBmbGV4O1xuICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xufVxuLnJlc3BvbnNpdmUtY29udGFpbmVyIC5tYWluLWNvbnRlbnQge1xuICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICBoZWlnaHQ6IDEwMCU7XG4gIGZsZXgtZ3JvdzogMTtcbiAgZmxleC1zaHJpbms6IDE7XG4gIG1pbi13aWR0aDogNTAlO1xuICBtYXgtd2lkdGg6IDEwMCU7XG59XG4ucmVzcG9uc2l2ZS1jb250YWluZXIgLnNhbXBsZS1vcHRpb25zIHtcbiAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgZGlzcGxheTogaW5saW5lLWZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gIGhlaWdodDogMTAwJTtcbiAgZmxleC1ncm93OiAwO1xuICBmbGV4LXNocmluazogMTtcbn1cbi5yZXNwb25zaXZlLWNvbnRhaW5lciAuc2FtcGxlLW9wdGlvbnMgLm9wdGlvbi1yb3cge1xuICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICBkaXNwbGF5OiBpbmxpbmUtZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgZmxleC1ncm93OiAwO1xuICBmbGV4LXNocmluazogMDtcbiAgZmxleC1iYXNpczogYXV0bztcbiAgd2hpdGUtc3BhY2U6IG5vd3JhcDtcbiAgcGFkZGluZy1yaWdodDogMTBweDtcbiAgd2lkdGg6IGF1dG87XG59XG4ucmVzcG9uc2l2ZS1jb250YWluZXIgLnRvZ2dsZS1vcHRpb25zIHtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgdG9wOiA1cHg7XG4gIHJpZ2h0OiA1cHg7XG4gIGJhY2tncm91bmQtY29sb3I6ICNlYmViZWI7XG4gIGNvbG9yOiAjODRiZDAwO1xuICBib3JkZXItcmFkaXVzOiAxNnB4O1xuICBjdXJzb3I6IHBvaW50ZXI7XG4gIHdpZHRoOiAzNnB4O1xuICBoZWlnaHQ6IDM2cHg7XG4gIGZvbnQtc2l6ZTogMjhweDtcbiAgei1pbmRleDogMTAxO1xuICBkaXNwbGF5OiBub25lO1xufVxuXG5AbWVkaWEgKG1pbi13aWR0aDogMzIwcHgpIGFuZCAobWF4LXdpZHRoOiA0ODBweCkgYW5kIChvcmllbnRhdGlvbjogcG9ydHJhaXQpIHtcbiAgLm1vYmlsZS1vbmx5IHtcbiAgICB2aXNpYmlsaXR5OiB2aXNpYmxlO1xuICB9XG5cbiAgLnJlc3BvbnNpdmUtY29udGFpbmVyIHtcbiAgICBkaXNwbGF5OiBibG9jaztcbiAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIH1cbiAgLnJlc3BvbnNpdmUtY29udGFpbmVyIC5tYWluLWNvbnRlbnQge1xuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICBkaXNwbGF5OiBibG9jaztcbiAgICB0b3A6IDA7XG4gICAgbGVmdDogMDtcbiAgICB3aWR0aDogMTAwJTtcbiAgICBtYXgtd2lkdGg6IDEwMCU7XG4gICAgei1pbmRleDogOTk7XG4gIH1cbiAgLnJlc3BvbnNpdmUtY29udGFpbmVyIC50b2dnbGUtb3B0aW9ucyB7XG4gICAgZGlzcGxheTogZmxleDtcbiAgfVxuICAucmVzcG9uc2l2ZS1jb250YWluZXIgLnNhbXBsZS1vcHRpb25zIHtcbiAgICBkaXNwbGF5OiBub25lO1xuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICB0b3A6IDA7XG4gICAgbGVmdDogMDtcbiAgICB3aWR0aDogMTAwJTtcbiAgICBtYXgtd2lkdGg6IDEwMCU7XG4gICAgaGVpZ2h0OiAxMDAlO1xuICAgIHotaW5kZXg6IDEwMDtcbiAgfVxuICAucmVzcG9uc2l2ZS1jb250YWluZXIgLnNhbXBsZS1vcHRpb25zIC5vcHRpb24tcm93IHtcbiAgICBwYWRkaW5nLXJpZ2h0OiAyMHB4O1xuICB9XG59Il19 */