Events | Features | MESCIUS DataViewsJS Demos

This example shows events fired by DataViews and how to use them. The events and information associated with those events will show up in the text area when they are checked in the list and the event occurs in the grid. Those events are as follows: rowClick: Occurs when the user clicks on a row. rowDbClick: Occurs when the user double-clicks on a row. columnChanged: Occurs when the user changes columns (in this case, clicking on the arrow next to 'Days Taken' to change the columns). columnReorder: Occurs when the user moves columns around by clicking and dragging. editing: Occurs when the user starts and stops editing. grouping: Occurs when the user groups a column by clicking on it and dragging it to the top of the grid. focusChanged: Occurs when the user changes the focus on different rows/columns/cells. selectionChanged: Occurs when the user changes the selection of rows/columns/cells in the grid. You can change the selection mode to choose how many rows can be selected at a time. The ToolPanel button can be used to select which columns you want to see in the grid.

<!DOCTYPE html>
<html lang="en">
<head>
<base href="/dataviewsjs/demos/en/sample/Features/Basics/Events/purejs/" />
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="keywords" content="events" />
<meta
name="description"
content="This example shows events fired by DataViews and how to use them.  The events and information associated with those events will show up in the text area when they are checked in the list and the event occurs in the grid."
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Events | Features | MESCIUS 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/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.grid.min.css" rel="stylesheet" type="text/css" />
<link href="styles.css" rel="stylesheet" type="text/css" />
<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:
'E348418822993781#B0EWvwY4dNNVQqJHUDpFROVWe5ZWNYFlVQFmRsJWRht4Z6lDO4Vla7YUaXhEWxd7Z5YXMuRnY7tWTQRHSlVnaYlXNhlEOpdkZ0FHWYJ5QKd6VXN5aR3ieGhUav9kZTBXWahkYBhEVutmZ72CbjdlZvV5TVdGdiplQsZXe95kUmNmZVF5cJ3mcypWNyx4UydESE3UblxGZyE7KQ94R4BjbUxUewsiaoREMxRDNllWREV6Voh4Q4dDZPRjWrIzUJl4TERXcQZWMHp4Sp9WaMZzN5o6StJmVDJXcwIVVmR6UMVGOlxUW8RmTxZDZTJWVN5GZqJHZuVDMkVGSW3WdxNzKCdDdSB7TzY7cqlnMU5GVyNzNP9WMyhDRvEEOFdkQORDM4dFVlFFWqFWSyMjNQJiOiMlIsISQyIkQ9YjQxIiOigkIsUTM7YjNxYTM0IicfJye&amp;Qf35VfikFVVljI0IyQiwiIxYHITp4c7VWaWFGdhRkI0IiTis7W0ICZyBlIsIiNxUTN6ADI8EDMxMjMwIjI0ICdyNkIsIyc59yc5l6YzVWbuoCLwpmLzVXajNXZt9iKs2WauMXdpN6cl5mLqwSbvNmLzVXajNXZt9iKsAnau26YuMXdpN6cl5mLqwSbvNmL6VGZ9RXajVGchJ7ZuoCLuNmLt36YukHdpNWZwFmcn9iKs46bj9Se4l6YlBXYydmLqwicr9ybj9Se4l6YlBXYydmLqwCcq9ybj9Se4l6YlBXYydmLqIiOiMXbEJCLiMVVJN4UF5kI0ISYONkIsUWdyRnOiwmdFJCLiEDO7MTO9IjM8gTM4gDNzIiOiQWSisnOiQkIsISP3EkVxBVUHFDMplzLlVUdGd7cI9UeIt4SshESzV7NvY7ZxlDOuNTb5tzLr',
SJS_LICENSE_KEY:
'E518585142165236#B0wm4nx4QzdlTHRTSOFzcvVnaJdjSnNEeXdTMUtSUzk6bU94QuVXNwZVZjd4SzYjcadXRIVEMzEXTThkVyR7R85UayoHZZBTYQ5mZyh4Shd6VxFXazF4cBNGRG5WTvUGTsV4T6knQYRzKxxUdk9EarplU7d6VLF6KIR7bPJ5N6ZUMWZWaURGRKRDbLJDN5YjSN5mUoxmaxonSD56LEh7Y7RXenpmTvomevZlV9dkaysCO7hTRQFHcGRWQyc5LI9kQmB7QwR4Z7ZHOR3CSXp6SiFWYzFXeXZUSp94K8VDTkFjdwl4KptSYlRWcDxmNE5kS6kzdrkVcNJXROVGbLJkcTNGRzIER8tmd4YGNhh7dxAnMvIHRv46VtBXS4U5KvJ6dZJ6M5p4TxIjd9I5QSpXTTV6SDZXb7lzaL56ZiojITJCLikTQxUTQFV4NiojIIJCLyETO7UzM7kTO0IicfJye&amp;Qf35VfikkR9IkI0IyQiwiIyEjL6ByUKBCZhVmcwNlI0IiTis7W0ICZyBlIsISNwkTN6ADI8EDMxMjMwIjI0ICdyNkIsIyc59yc5l6YzVWbuoCLwpmLzVXajNXZt9iKs2WauMXdpN6cl5mLqwSbvNmLzVXajNXZt9iKsAnau26YuMXdpN6cl5mLqwSbvNmL6VGZ9RXajVGchJ7ZuoCLuNmLt36YukHdpNWZwFmcn9iKs46bj9Se4l6YlBXYydmLqwicr9ybj9Se4l6YlBXYydmLqwCcq9ybj9Se4l6YlBXYydmLqIiOiMXbEJCLiMVVJN4UF5kI0ISYONkIsUWdyRnOiwmdFJCLiYzMyUjNxIDNxUDO5gTM5IiOiQWSiwSfdtlOicGbmJCLlNHbhZmOiI7ckJye0ICbuFkI1pjIEJCLi4TPRtGOhtWWEFWd4IDOLRVRvx4SyMGcDhTW6n4ep',
},
};
</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.grid.min.js" type="text/javascript"></script>
<script src="/dataviewsjs/demos/static/js/license.js" type="text/javascript"></script>
</head>
<body class="theme-default">
<noscript>You need to enable JavaScript to run this app.</noscript>
<div class="wrapper responsive-container">
<div class="mobile-only toggle-options">
<span class="fa fa-cog"></span>
</div>
<div class="main-container main-content">
<div id="grid" class="grid"></div>
<div class="event-container">
<div id="console" class="console"></div>
</div>
</div>
<div class="sample-options">
<div class="option-row">
<label>Selection Mode:</label>
<select id="grid-select-mode">
<option value="none">none</option>
<option value="single" selected>single</option>
<option value="multiple">multiple</option>
</select>
</div>
<div class="option-row">
<button class="btnShowToolPanel">ToolPanel</button>
</div>
<div class="option-row">
<div class="checkboxPanel">
<ul class="list-items">
<li>
<input type="checkbox" id="rowClick" class="cmd-btn" />
<label for="rowClick">rowClick</label>
</li>
<li>
<input type="checkbox" id="rowDbClick" class="cmd-btn" />
<label for="rowDbClick">rowDbClick</label>
</li>
<li>
<input type="checkbox" id="columnChanged" class="cmd-btn" />
<label for="columnChanged">columnChanged</label>
</li>
<li>
<input type="checkbox" id="columnReorder" class="cmd-btn" />
<label for="columnReorder">
<span>columnReorder</span>
<span class="badge badge-warning">cancellable</span>
</label>
</li>
<li>
<input type="checkbox" id="editing" class="cmd-btn" />
<label for="editing">
<span>editing</span>
<span class="badge badge-warning">cancellable</span>
</label>
</li>
<li>
<input type="checkbox" id="grouping" class="cmd-btn" />
<label for="grouping">
<span>grouping</span>
<span class="badge badge-warning">cancellable</span>
</label>
</li>
<li>
<input type="checkbox" id="focusChanged" class="cmd-btn" />
<label for="focusChanged">focusChanged</label>
</li>
<li>
<input type="checkbox" id="selectionChanged" class="cmd-btn" />
<label for="selectionChanged">selectionChanged</label>
</li>
</ul>
<div>
<button class="bindButton">Bind All</button>
<button class="unBindButton">Unbind All</button>
</div>
<ul class="list-items">
<li title="Apply to cancellable events">
<input style="margin-left: 0" type="checkbox" id="cancelEventArgs" />
<label for="cancelEventArgs">Set cancel</label>
</li>
</ul>
</div>
</div>
<div class="option-row">
<button class="clearButton">Clear Console</button>
</div>
</div>
</div>
<script src="data.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
</body>
</html>

var cols = [
{
id: 'paidVacation',
caption: 'Paid Vacation',
dataField: 'PaidVacation',
width: 115,
pinned: 'left',
},
{
caption: 'Employee Info',
columns: [
{
id: 'name',
caption: 'Name',
dataField: 'Name',
width: 145,
},
{
id: 'dept',
caption: 'Department',
dataField: 'Department',
width: 110,
},
],
},
{
caption: 'Days Taken',
isCollapsed: false,
columns: [
{
id: 'Jan',
caption: 'Jan',
dataField: 'Jan',
headerGroupShow: 'expanded',
width: 50,
aling: 'center',
},
{
id: 'Feb',
caption: 'Feb',
dataField: 'Feb',
headerGroupShow: 'expanded',
width: 50,
aling: 'center',
},
{
id: 'Mar',
caption: 'Mar',
dataField: 'Mar',
headerGroupShow: 'expanded',
width: 50,
aling: 'center',
},
{
id: 'Apr',
caption: 'Apr',
dataField: 'Apr',
headerGroupShow: 'expanded',
width: 50,
aling: 'center',
},
{
id: 'May',
caption: 'May',
dataField: 'May',
headerGroupShow: 'expanded',
width: 50,
aling: 'center',
},
{
id: 'Jun',
caption: 'Jun',
dataField: 'Jun',
headerGroupShow: 'expanded',
width: 50,
aling: 'center',
},
{
id: 'Jul',
caption: 'Jul',
dataField: 'Jul',
headerGroupShow: 'expanded',
width: 50,
aling: 'center',
},
{
id: 'Aug',
caption: 'Aug',
dataField: 'Aug',
headerGroupShow: 'expanded',
width: 50,
aling: 'center',
},
{
id: 'Sep',
caption: 'Sep',
dataField: 'Sep',
headerGroupShow: 'expanded',
width: 50,
aling: 'center',
},
{
id: 'Oct',
caption: 'Oct',
dataField: 'Oct',
headerGroupShow: 'expanded',
width: 50,
aling: 'center',
},
{
id: 'Nov',
caption: 'Nov',
dataField: 'Nov',
headerGroupShow: 'expanded',
width: 50,
aling: 'center',
},
{
id: 'Dec',
caption: 'Dec',
dataField: 'Dec',
headerGroupShow: 'expanded',
width: 50,
aling: 'center',
},
{
id: 'total',
caption: 'Total Leave',
dataField: '=[Jan]+[Feb]+[Mar]+[Apr]+[May]+[Jun]+[Jul]+[Aug]+[Sep]+[Oct]+[Nov]+[Dec]',
width: 120,
},
],
},
];
var layout = new GC.DataViews.GridLayout({
dataSourceLength: 250,
allowEditing: true,
allowGrouping: true,
showToolPanel: false,
editMode: 'inline',
selectionMode: 'single',
loadOnDemand: true,
});
var dataView = new GC.DataViews.DataView(document.getElementById('grid'), dataSource, cols, layout);
var events = {
rowClick: {},
rowDbClick: {},
columnChanged: {},
columnReorder: {
cancel: function cancel(e) {
return e.status === 'endColumnReorder';
},
},
editing: {
cancel: true,
},
grouping: {
cancel: true,
},
focusChanged: {},
selectionChanged: {},
};
_.each(events, function (e, name) {
if (e.cancel === true) {
e.cancel = _.constant(true);
} else if (!e.cancel) {
e.cancel = _.constant(false);
}
var customHandler = e.handler || _.noop;
e.handler = function (args) {
var cancelChecked = document.getElementById('cancelEventArgs').checked;
if (e.cancel(args) && cancelChecked) {
args.cancel = true;
}
logEvent(name, args);
customHandler(args);
};
});
function serialize(obj) {
var onetab = '&nbsp;&nbsp;';
var collect = function collect(obj, tab, level) {
if (!obj) return '';
var EOL = '<br/>';
var prevTab = tab ? tab.slice(0, tab.length - onetab.length) : '';
var nextTab = tab + onetab;
var isArray = _.isArray(obj);
var items = _.map(obj, function (val, key) {
return {
content: convert(val, nextTab, level + 1),
key: key,
};
});
var multiline =
level === 0 ||
_.some(items, function (t) {
return t.content.indexOf(EOL) >= 0;
}) ||
_.sumBy(items, function (t) {
return t.content.length;
}) > 100;
var separator = multiline ? ','.concat(EOL) : ', ';
var prefix = multiline ? tab : '';
var content = _.reduce(
items,
function (acc, item) {
if (acc) acc += separator;
var prop = isArray ? '' : ''.concat(item.key, ': ');
return acc + ''.concat(prefix).concat(prop).concat(item.content);
},
''
);
if (level > 0) {
var open = isArray ? '[' : '{';
var close = isArray ? ']' : '}';
if (multiline) {
return ''.concat(open).concat(EOL).concat(content).concat(EOL).concat(prevTab).concat(close);
}
return ''.concat(open, ' ').concat(content, ' ').concat(close);
}
return content;
};
var convert = function convert(obj, tab, level) {
return _.isArray(obj) || _.isObject(obj) ? collect(obj, tab, level) : String(obj);
};
return convert(obj, '', 0);
}
function logEvent(eventName, eventArgs) {
var EOL = '<br/>';
var separator = '-------- '.concat(eventName, ' fired -------').concat(EOL).concat(EOL);
var content = serialize(eventArgs);
var console = document.getElementById('console');
var container = document.createElement('div');
container.innerHTML = '<div class="event-detail">'
.concat(separator)
.concat(content)
.concat(EOL)
.concat(EOL, '</div>');
var detail = container.childNodes[0];
console.insertBefore(detail, console.childNodes[0]);
requestAnimationFrame(function () {
detail.style.marginTop = 0;
detail.style.backgroundColor = '#f5f7f8';
});
}
function showToolPanel() {
dataView.options.showToolPanel = !dataView.options.showToolPanel;
}
function clearConsole() {
document.getElementById('console').innerHTML = '';
}
function bindEvents(checked) {
_.each(events, function (e, id) {
var elem = document.getElementById(id);
if (elem.checked !== checked) {
$(elem).click();
}
});
}
$('.btnShowToolPanel').click(showToolPanel);
$('.bindButton').click(bindEvents.bind(null, true));
$('.unBindButton').click(bindEvents.bind(null, false));
$('.clearButton').click(clearConsole);
$('.cmd-btn').change(function () {
var eventName = this.id;
var handler = events[eventName].handler;
if (this.checked) {
dataView[eventName].addHandler(handler);
} else {
dataView[eventName].removeHandler(handler);
}
});
$('#grid-select-mode').change(function () {
dataView.stopEditing();
var sel = document.getElementById('grid-select-mode');
dataView.options.selectionMode = sel.options[sel.selectedIndex].value;
}); // focus data.view by default
document.getElementById('grid').focus();
// 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 firstNames = ['Sophie', 'Isabelle', 'Emily', 'Olivia', 'Lily', 'Chloe', 'Isabella', 'Amelia', 'Jessica', 'Sophia', 'Ava', 'Charlotte', 'Mia', 'Lucy', 'Grace', 'Ruby', 'Ella', 'Evie', 'Freya', 'Isla', 'Poppy', 'Daisy', 'Layla'];
var lastNames = ['Beckham', 'Black', 'Braxton', 'Brennan', 'Brock', 'Bryson', 'Cadwell', 'Cage', 'Carson', 'Chandler', 'Cohen', 'Cole', 'Corbin', 'Dallas', 'Dalton', 'Dane', 'Donovan', 'Easton', 'Fisher', 'Fletcher', 'Grady', 'Greyson', 'Griffin', 'Gunner', 'Hayden', 'Hudson', 'Hunter', 'Jacoby', 'Jagger', 'Jaxon', 'Jett', 'Kade', 'Kane', 'Keating', 'Keegan', 'Kingston', 'Kobe'];
var departments = ['Admin', 'IT', 'HR', 'Payroll'];
var monthsNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
var size = 50;
function createData(size) {
var arr = [];
for (var i = 0; i < size; ++i) {
var months = _.zipObject(monthsNames, _.map(monthsNames, function () {
return _.random(3);
}));
arr[i] = _.assign(months, {
PaidVacation: _.random(20, 25),
Name: "".concat(_.sample(firstNames), " ").concat(_.sample(lastNames)),
Department: _.sample(departments)
});
}
return arr;
}
var currentIndex = 0;
var dataSource = {
loadRange: function loadRange(params) {
params.start = currentIndex++ * size;
params.size = size;
params.success(createData(size));
}
};

.wrapper {
width: 100%;
height: 100%;
overflow: auto;
}
.main-container {
display: flex;
flex-direction: column;
width: calc(100% - 280px);
height: 100%;
flex-grow: 1;
flex-shrink: 1;
}
.sample-options {
background: #fbfbfb;
height: 100%;
overflow: auto;
padding: 10px;
}
.sample-options label {
font-weight: normal;
margin: 0 5px;
}
.sample-options select {
border: 1px solid #999;
}
.sample-options .option-row {
font-size: 14px;
margin: 5px 0;
}
.grid {
height: 65%;
width: 100%;
flex-grow: 1;
flex-shrink: 1;
}
.event-container {
background-color: #f1f1f1;
border: solid 1px #e0e0e0;
width: 100%;
height: 100px;
flex-grow: 1;
flex-shrink: 1;
display: flex;
flex-direction: column;
align-content: center;
margin-top: 5px;
}
.badge {
display: inline-block;
padding: 0.25em 0.4em;
margin: 0 5px;
font-size: 12px;
font-weight: 700;
line-height: 1;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: 0.25rem;
}
.badge.badge-warning {
color: #212529;
background-color: #ffc107;
}
.list-items {
font-size: 16px;
list-style: none;
margin: 0;
padding: 0;
}
.list-items li {
margin: 3px 0;
display: flex;
align-items: center;
}
.unBindButton {
margin-left: 5px;
}
#console {
background: #fff;
font-family: monospace;
font-size: 12px;
height: 100%;
overflow: auto;
flex-grow: 0;
flex-shrink: 1;
}
#console .event-detail {
margin-top: -50px;
background-color: #2a92ff;
}
.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: #47a06c;
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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkZlYXR1cmVzL0Jhc2ljcy9FdmVudHMvcHVyZWpzL3N0eWxlcy5zY3NzIiwiRmVhdHVyZXMvQmFzaWNzL0V2ZW50cy9wdXJlanMvc3R5bGVzLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNFLFdBQUE7RUFDQSxZQUFBO0VBQ0EsY0FBQTtBQ0NGOztBREVBO0VBQ0UsYUFBQTtFQUNBLHNCQUFBO0VBQ0EseUJBQUE7RUFDQSxZQUFBO0VBQ0EsWUFBQTtFQUNBLGNBQUE7QUNDRjs7QURFQTtFQUNFLG1CQUFBO0VBQ0EsWUFBQTtFQUNBLGNBQUE7RUFDQSxhQUFBO0FDQ0Y7QURDRTtFQUNFLG1CQUFBO0VBQ0EsYUFBQTtBQ0NKO0FERUU7RUFDRSxzQkFBQTtBQ0FKO0FER0U7RUFDRSxlQUFBO0VBQ0EsYUFBQTtBQ0RKOztBREtBO0VBQ0UsV0FBQTtFQUNBLFdBQUE7RUFDQSxZQUFBO0VBQ0EsY0FBQTtBQ0ZGOztBREtBO0VBQ0UseUJBQUE7RUFDQSx5QkFBQTtFQUNBLFdBQUE7RUFDQSxhQUFBO0VBQ0EsWUFBQTtFQUNBLGNBQUE7RUFDQSxhQUFBO0VBQ0Esc0JBQUE7RUFDQSxxQkFBQTtFQUNBLGVBQUE7QUNGRjs7QURLQTtFQUNFLHFCQUFBO0VBQ0EscUJBQUE7RUFDQSxhQUFBO0VBQ0EsZUFBQTtFQUNBLGdCQUFBO0VBQ0EsY0FBQTtFQUNBLGtCQUFBO0VBQ0EsbUJBQUE7RUFDQSx3QkFBQTtFQUNBLHNCQUFBO0FDRkY7QURJRTtFQUNFLGNBQUE7RUFDQSx5QkFBQTtBQ0ZKOztBRE1BO0VBQ0UsZUFBQTtFQUNBLGdCQUFBO0VBQ0EsU0FBQTtFQUNBLFVBQUE7QUNIRjtBREtFO0VBQ0UsYUFBQTtFQUNBLGFBQUE7RUFDQSxtQkFBQTtBQ0hKOztBRE9BO0VBQ0UsZ0JBQUE7QUNKRjs7QURPQTtFQUNFLGdCQUFBO0VBQ0Esc0JBQUE7RUFDQSxlQUFBO0VBQ0EsWUFBQTtFQUNBLGNBQUE7RUFDQSxZQUFBO0VBQ0EsY0FBQTtBQ0pGO0FETUU7RUFDRSxpQkFBQTtFQUNBLHlCQUFBO0FDSko7O0FEeUJBO0VBQ0UsZ0JBQUE7RUFDQSxTQUFBO0FDdEJGOztBRHlCQTtFQUNFLGtCQUFBO0FDdEJGOztBRHlCQTtFQUNFLGFBQUE7RUFDQSxzQkFBQTtBQ3RCRjtBRHdCRTtFQUNFLHNCQUFBO0VBQ0EsWUFBQTtFQUNBLFlBQUE7RUFDQSxjQUFBO0VBQ0EsY0FBQTtFQUNBLGVBQUE7QUN0Qko7QUR5QkU7RUFDRSxzQkFBQTtFQUNBLG9CQUFBO0VBQ0Esc0JBQUE7RUFDQSxZQUFBO0VBQ0EsWUFBQTtFQUNBLGNBQUE7QUN2Qko7QUR5Qkk7RUFDRSxzQkFBQTtFQUNBLG9CQUFBO0VBQ0EsbUJBQUE7RUFDQSxZQUFBO0VBQ0EsY0FBQTtFQUNBLGdCQUFBO0VBQ0EsbUJBQUE7RUFDQSxtQkFBQTtFQUNBLFdBQUE7QUN2Qk47QUQyQkU7RUExREEsbUJBQUE7RUFDQSx1QkFBQTtFQUNBLGtCQUFBO0VBQ0EsUUFBQTtFQUNBLFVBQUE7RUFDQSx5QkFBQTtFQUNBLGNBQUE7RUFDQSxtQkFBQTtFQUNBLGVBQUE7RUFDQSxXQUFBO0VBQ0EsWUFBQTtFQUNBLGVBQUE7RUFDQSxZQUFBO0VBZ0RFLGFBQUE7QUNiSjs7QURrQkE7RUFDRTtJQUNFLG1CQUFBO0VDZkY7O0VEaUJBO0lBQ0UsY0FBQTtJQUNBLGtCQUFBO0VDZEY7RURnQkU7SUFDRSxrQkFBQTtJQUNBLGNBQUE7SUFDQSxNQUFBO0lBQ0EsT0FBQTtJQUNBLFdBQUE7SUFDQSxlQUFBO0lBQ0EsV0FBQTtFQ2RKO0VEaUJFO0lBQ0UsYUFBQTtFQ2ZKO0VEa0JFO0lBQ0UsYUFBQTtJQUNBLGtCQUFBO0lBQ0EsTUFBQTtJQUNBLE9BQUE7SUFDQSxXQUFBO0lBQ0EsZUFBQTtJQUNBLFlBQUE7SUFDQSxZQUFBO0VDaEJKO0VEa0JJO0lBQ0UsbUJBQUE7RUNoQk47QUFDRiIsImZpbGUiOiJGZWF0dXJlcy9CYXNpY3MvRXZlbnRzL3B1cmVqcy9zdHlsZXMuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLndyYXBwZXIge1xuICB3aWR0aDogMTAwJTtcbiAgaGVpZ2h0OiAxMDAlO1xuICBvdmVyZmxvdzogYXV0bztcbn1cblxuLm1haW4tY29udGFpbmVyIHtcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgd2lkdGg6IGNhbGMoMTAwJSAtIDI4MHB4KTtcbiAgaGVpZ2h0OiAxMDAlO1xuICBmbGV4LWdyb3c6IDE7XG4gIGZsZXgtc2hyaW5rOiAxO1xufVxuXG4uc2FtcGxlLW9wdGlvbnMge1xuICBiYWNrZ3JvdW5kOiAjZmJmYmZiO1xuICBoZWlnaHQ6IDEwMCU7XG4gIG92ZXJmbG93OiBhdXRvO1xuICBwYWRkaW5nOiAxMHB4O1xuXG4gIGxhYmVsIHtcbiAgICBmb250LXdlaWdodDogbm9ybWFsO1xuICAgIG1hcmdpbjogMCA1cHg7XG4gIH1cblxuICBzZWxlY3Qge1xuICAgIGJvcmRlcjogMXB4IHNvbGlkICM5OTk7XG4gIH1cblxuICAub3B0aW9uLXJvdyB7XG4gICAgZm9udC1zaXplOiAxNHB4O1xuICAgIG1hcmdpbjogNXB4IDA7XG4gIH1cbn1cblxuLmdyaWQge1xuICBoZWlnaHQ6IDY1JTtcbiAgd2lkdGg6IDEwMCU7XG4gIGZsZXgtZ3JvdzogMTtcbiAgZmxleC1zaHJpbms6IDE7XG59XG5cbi5ldmVudC1jb250YWluZXIge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAjZjFmMWYxO1xuICBib3JkZXI6IHNvbGlkIDFweCAjZTBlMGUwO1xuICB3aWR0aDogMTAwJTtcbiAgaGVpZ2h0OiAxMDBweDtcbiAgZmxleC1ncm93OiAxO1xuICBmbGV4LXNocmluazogMTtcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgYWxpZ24tY29udGVudDogY2VudGVyO1xuICBtYXJnaW4tdG9wOiA1cHg7XG59XG5cbi5iYWRnZSB7XG4gIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbiAgcGFkZGluZzogMC4yNWVtIDAuNGVtO1xuICBtYXJnaW46IDAgNXB4O1xuICBmb250LXNpemU6IDEycHg7XG4gIGZvbnQtd2VpZ2h0OiA3MDA7XG4gIGxpbmUtaGVpZ2h0OiAxO1xuICB0ZXh0LWFsaWduOiBjZW50ZXI7XG4gIHdoaXRlLXNwYWNlOiBub3dyYXA7XG4gIHZlcnRpY2FsLWFsaWduOiBiYXNlbGluZTtcbiAgYm9yZGVyLXJhZGl1czogMC4yNXJlbTtcblxuICAmLmJhZGdlLXdhcm5pbmcge1xuICAgIGNvbG9yOiAjMjEyNTI5O1xuICAgIGJhY2tncm91bmQtY29sb3I6ICNmZmMxMDc7XG4gIH1cbn1cblxuLmxpc3QtaXRlbXMge1xuICBmb250LXNpemU6IDE2cHg7XG4gIGxpc3Qtc3R5bGU6IG5vbmU7XG4gIG1hcmdpbjogMDtcbiAgcGFkZGluZzogMDtcblxuICBsaSB7XG4gICAgbWFyZ2luOiAzcHggMDtcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIH1cbn1cblxuLnVuQmluZEJ1dHRvbiB7XG4gIG1hcmdpbi1sZWZ0OiA1cHg7XG59XG5cbiNjb25zb2xlIHtcbiAgYmFja2dyb3VuZDogI2ZmZjtcbiAgZm9udC1mYW1pbHk6IG1vbm9zcGFjZTtcbiAgZm9udC1zaXplOiAxMnB4O1xuICBoZWlnaHQ6IDEwMCU7XG4gIG92ZXJmbG93OiBhdXRvO1xuICBmbGV4LWdyb3c6IDA7XG4gIGZsZXgtc2hyaW5rOiAxO1xuXG4gIC5ldmVudC1kZXRhaWwge1xuICAgIG1hcmdpbi10b3A6IC01MHB4O1xuICAgIGJhY2tncm91bmQtY29sb3I6IHJnYig0MiwgMTQ2LCAyNTUpO1xuICB9XG59XG5cbi8vIGhlbHBlcnMgZm9yIHJlc3BvbnNpdmUgb3B0aW9ucyBwYW5lbFxuQG1peGluIG1vYmlsZS1idG4oKSB7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIHRvcDogNXB4O1xuICByaWdodDogNXB4O1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAjZWJlYmViO1xuICBjb2xvcjogIzQ3YTA2YztcbiAgYm9yZGVyLXJhZGl1czogMTZweDtcbiAgY3Vyc29yOiBwb2ludGVyO1xuICB3aWR0aDogMzZweDtcbiAgaGVpZ2h0OiAzNnB4O1xuICBmb250LXNpemU6IDI4cHg7XG4gIHotaW5kZXg6IDEwMTtcbn1cblxuLmZsZXgtYnJlYWsge1xuICBmbGV4LWJhc2lzOiAxMDAlO1xuICBoZWlnaHQ6IDA7XG59XG5cbi5tb2JpbGUtb25seSB7XG4gIHZpc2liaWxpdHk6IGhpZGRlbjtcbn1cblxuLnJlc3BvbnNpdmUtY29udGFpbmVyIHtcbiAgZGlzcGxheTogZmxleDtcbiAgYm94LXNpemluZzogYm9yZGVyLWJveDtcblxuICAubWFpbi1jb250ZW50IHtcbiAgICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICAgIGhlaWdodDogMTAwJTtcbiAgICBmbGV4LWdyb3c6IDE7XG4gICAgZmxleC1zaHJpbms6IDE7XG4gICAgbWluLXdpZHRoOiA1MCU7XG4gICAgbWF4LXdpZHRoOiAxMDAlO1xuICB9XG5cbiAgLnNhbXBsZS1vcHRpb25zIHtcbiAgICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICAgIGRpc3BsYXk6IGlubGluZS1mbGV4O1xuICAgIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gICAgaGVpZ2h0OiAxMDAlO1xuICAgIGZsZXgtZ3JvdzogMDtcbiAgICBmbGV4LXNocmluazogMTtcblxuICAgIC5vcHRpb24tcm93IHtcbiAgICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gICAgICBkaXNwbGF5OiBpbmxpbmUtZmxleDtcbiAgICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAgICBmbGV4LWdyb3c6IDA7XG4gICAgICBmbGV4LXNocmluazogMDtcbiAgICAgIGZsZXgtYmFzaXM6IGF1dG87XG4gICAgICB3aGl0ZS1zcGFjZTogbm93cmFwO1xuICAgICAgcGFkZGluZy1yaWdodDogMTBweDtcbiAgICAgIHdpZHRoOiBhdXRvO1xuICAgIH1cbiAgfVxuXG4gIC50b2dnbGUtb3B0aW9ucyB7XG4gICAgQGluY2x1ZGUgbW9iaWxlLWJ0bjtcbiAgICBkaXNwbGF5OiBub25lO1xuICB9XG59XG5cbi8vIG1vc3Qgc21hcnRwaG9uZXNcbkBtZWRpYSAobWluLXdpZHRoOiAzMjBweCkgYW5kIChtYXgtd2lkdGg6IDQ4MHB4KSBhbmQgKG9yaWVudGF0aW9uOiBwb3J0cmFpdCkge1xuICAubW9iaWxlLW9ubHkge1xuICAgIHZpc2liaWxpdHk6IHZpc2libGU7XG4gIH1cbiAgLnJlc3BvbnNpdmUtY29udGFpbmVyIHtcbiAgICBkaXNwbGF5OiBibG9jaztcbiAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG5cbiAgICAubWFpbi1jb250ZW50IHtcbiAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICAgIGRpc3BsYXk6IGJsb2NrO1xuICAgICAgdG9wOiAwO1xuICAgICAgbGVmdDogMDtcbiAgICAgIHdpZHRoOiAxMDAlO1xuICAgICAgbWF4LXdpZHRoOiAxMDAlO1xuICAgICAgei1pbmRleDogOTk7XG4gICAgfVxuXG4gICAgLnRvZ2dsZS1vcHRpb25zIHtcbiAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgfVxuXG4gICAgLnNhbXBsZS1vcHRpb25zIHtcbiAgICAgIGRpc3BsYXk6IG5vbmU7XG4gICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICB0b3A6IDA7XG4gICAgICBsZWZ0OiAwO1xuICAgICAgd2lkdGg6IDEwMCU7XG4gICAgICBtYXgtd2lkdGg6IDEwMCU7XG4gICAgICBoZWlnaHQ6IDEwMCU7XG4gICAgICB6LWluZGV4OiAxMDA7XG5cbiAgICAgIC5vcHRpb24tcm93IHtcbiAgICAgICAgcGFkZGluZy1yaWdodDogMjBweDtcbiAgICAgIH1cbiAgICB9XG4gIH1cbn1cbiIsIi53cmFwcGVyIHtcbiAgd2lkdGg6IDEwMCU7XG4gIGhlaWdodDogMTAwJTtcbiAgb3ZlcmZsb3c6IGF1dG87XG59XG5cbi5tYWluLWNvbnRhaW5lciB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gIHdpZHRoOiBjYWxjKDEwMCUgLSAyODBweCk7XG4gIGhlaWdodDogMTAwJTtcbiAgZmxleC1ncm93OiAxO1xuICBmbGV4LXNocmluazogMTtcbn1cblxuLnNhbXBsZS1vcHRpb25zIHtcbiAgYmFja2dyb3VuZDogI2ZiZmJmYjtcbiAgaGVpZ2h0OiAxMDAlO1xuICBvdmVyZmxvdzogYXV0bztcbiAgcGFkZGluZzogMTBweDtcbn1cbi5zYW1wbGUtb3B0aW9ucyBsYWJlbCB7XG4gIGZvbnQtd2VpZ2h0OiBub3JtYWw7XG4gIG1hcmdpbjogMCA1cHg7XG59XG4uc2FtcGxlLW9wdGlvbnMgc2VsZWN0IHtcbiAgYm9yZGVyOiAxcHggc29saWQgIzk5OTtcbn1cbi5zYW1wbGUtb3B0aW9ucyAub3B0aW9uLXJvdyB7XG4gIGZvbnQtc2l6ZTogMTRweDtcbiAgbWFyZ2luOiA1cHggMDtcbn1cblxuLmdyaWQge1xuICBoZWlnaHQ6IDY1JTtcbiAgd2lkdGg6IDEwMCU7XG4gIGZsZXgtZ3JvdzogMTtcbiAgZmxleC1zaHJpbms6IDE7XG59XG5cbi5ldmVudC1jb250YWluZXIge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAjZjFmMWYxO1xuICBib3JkZXI6IHNvbGlkIDFweCAjZTBlMGUwO1xuICB3aWR0aDogMTAwJTtcbiAgaGVpZ2h0OiAxMDBweDtcbiAgZmxleC1ncm93OiAxO1xuICBmbGV4LXNocmluazogMTtcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgYWxpZ24tY29udGVudDogY2VudGVyO1xuICBtYXJnaW4tdG9wOiA1cHg7XG59XG5cbi5iYWRnZSB7XG4gIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbiAgcGFkZGluZzogMC4yNWVtIDAuNGVtO1xuICBtYXJnaW46IDAgNXB4O1xuICBmb250LXNpemU6IDEycHg7XG4gIGZvbnQtd2VpZ2h0OiA3MDA7XG4gIGxpbmUtaGVpZ2h0OiAxO1xuICB0ZXh0LWFsaWduOiBjZW50ZXI7XG4gIHdoaXRlLXNwYWNlOiBub3dyYXA7XG4gIHZlcnRpY2FsLWFsaWduOiBiYXNlbGluZTtcbiAgYm9yZGVyLXJhZGl1czogMC4yNXJlbTtcbn1cbi5iYWRnZS5iYWRnZS13YXJuaW5nIHtcbiAgY29sb3I6ICMyMTI1Mjk7XG4gIGJhY2tncm91bmQtY29sb3I6ICNmZmMxMDc7XG59XG5cbi5saXN0LWl0ZW1zIHtcbiAgZm9udC1zaXplOiAxNnB4O1xuICBsaXN0LXN0eWxlOiBub25lO1xuICBtYXJnaW46IDA7XG4gIHBhZGRpbmc6IDA7XG59XG4ubGlzdC1pdGVtcyBsaSB7XG4gIG1hcmdpbjogM3B4IDA7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG59XG5cbi51bkJpbmRCdXR0b24ge1xuICBtYXJnaW4tbGVmdDogNXB4O1xufVxuXG4jY29uc29sZSB7XG4gIGJhY2tncm91bmQ6ICNmZmY7XG4gIGZvbnQtZmFtaWx5OiBtb25vc3BhY2U7XG4gIGZvbnQtc2l6ZTogMTJweDtcbiAgaGVpZ2h0OiAxMDAlO1xuICBvdmVyZmxvdzogYXV0bztcbiAgZmxleC1ncm93OiAwO1xuICBmbGV4LXNocmluazogMTtcbn1cbiNjb25zb2xlIC5ldmVudC1kZXRhaWwge1xuICBtYXJnaW4tdG9wOiAtNTBweDtcbiAgYmFja2dyb3VuZC1jb2xvcjogIzJhOTJmZjtcbn1cblxuLmZsZXgtYnJlYWsge1xuICBmbGV4LWJhc2lzOiAxMDAlO1xuICBoZWlnaHQ6IDA7XG59XG5cbi5tb2JpbGUtb25seSB7XG4gIHZpc2liaWxpdHk6IGhpZGRlbjtcbn1cblxuLnJlc3BvbnNpdmUtY29udGFpbmVyIHtcbiAgZGlzcGxheTogZmxleDtcbiAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbn1cbi5yZXNwb25zaXZlLWNvbnRhaW5lciAubWFpbi1jb250ZW50IHtcbiAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgaGVpZ2h0OiAxMDAlO1xuICBmbGV4LWdyb3c6IDE7XG4gIGZsZXgtc2hyaW5rOiAxO1xuICBtaW4td2lkdGg6IDUwJTtcbiAgbWF4LXdpZHRoOiAxMDAlO1xufVxuLnJlc3BvbnNpdmUtY29udGFpbmVyIC5zYW1wbGUtb3B0aW9ucyB7XG4gIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gIGRpc3BsYXk6IGlubGluZS1mbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICBoZWlnaHQ6IDEwMCU7XG4gIGZsZXgtZ3JvdzogMDtcbiAgZmxleC1zaHJpbms6IDE7XG59XG4ucmVzcG9uc2l2ZS1jb250YWluZXIgLnNhbXBsZS1vcHRpb25zIC5vcHRpb24tcm93IHtcbiAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgZGlzcGxheTogaW5saW5lLWZsZXg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIGZsZXgtZ3JvdzogMDtcbiAgZmxleC1zaHJpbms6IDA7XG4gIGZsZXgtYmFzaXM6IGF1dG87XG4gIHdoaXRlLXNwYWNlOiBub3dyYXA7XG4gIHBhZGRpbmctcmlnaHQ6IDEwcHg7XG4gIHdpZHRoOiBhdXRvO1xufVxuLnJlc3BvbnNpdmUtY29udGFpbmVyIC50b2dnbGUtb3B0aW9ucyB7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIHRvcDogNXB4O1xuICByaWdodDogNXB4O1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAjZWJlYmViO1xuICBjb2xvcjogIzQ3YTA2YztcbiAgYm9yZGVyLXJhZGl1czogMTZweDtcbiAgY3Vyc29yOiBwb2ludGVyO1xuICB3aWR0aDogMzZweDtcbiAgaGVpZ2h0OiAzNnB4O1xuICBmb250LXNpemU6IDI4cHg7XG4gIHotaW5kZXg6IDEwMTtcbiAgZGlzcGxheTogbm9uZTtcbn1cblxuQG1lZGlhIChtaW4td2lkdGg6IDMyMHB4KSBhbmQgKG1heC13aWR0aDogNDgwcHgpIGFuZCAob3JpZW50YXRpb246IHBvcnRyYWl0KSB7XG4gIC5tb2JpbGUtb25seSB7XG4gICAgdmlzaWJpbGl0eTogdmlzaWJsZTtcbiAgfVxuXG4gIC5yZXNwb25zaXZlLWNvbnRhaW5lciB7XG4gICAgZGlzcGxheTogYmxvY2s7XG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICB9XG4gIC5yZXNwb25zaXZlLWNvbnRhaW5lciAubWFpbi1jb250ZW50IHtcbiAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgZGlzcGxheTogYmxvY2s7XG4gICAgdG9wOiAwO1xuICAgIGxlZnQ6IDA7XG4gICAgd2lkdGg6IDEwMCU7XG4gICAgbWF4LXdpZHRoOiAxMDAlO1xuICAgIHotaW5kZXg6IDk5O1xuICB9XG4gIC5yZXNwb25zaXZlLWNvbnRhaW5lciAudG9nZ2xlLW9wdGlvbnMge1xuICAgIGRpc3BsYXk6IGZsZXg7XG4gIH1cbiAgLnJlc3BvbnNpdmUtY29udGFpbmVyIC5zYW1wbGUtb3B0aW9ucyB7XG4gICAgZGlzcGxheTogbm9uZTtcbiAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgdG9wOiAwO1xuICAgIGxlZnQ6IDA7XG4gICAgd2lkdGg6IDEwMCU7XG4gICAgbWF4LXdpZHRoOiAxMDAlO1xuICAgIGhlaWdodDogMTAwJTtcbiAgICB6LWluZGV4OiAxMDA7XG4gIH1cbiAgLnJlc3BvbnNpdmUtY29udGFpbmVyIC5zYW1wbGUtb3B0aW9ucyAub3B0aW9uLXJvdyB7XG4gICAgcGFkZGluZy1yaWdodDogMjBweDtcbiAgfVxufSJdfQ== */