393 lines
No EOL
13 KiB
JavaScript
393 lines
No EOL
13 KiB
JavaScript
|
|
// Views
|
|
|
|
window.ls.container.get('view')
|
|
.add({
|
|
selector: 'data-acl',
|
|
controller: function(element, document, router, alerts) {
|
|
document.body.classList.remove('console');
|
|
document.body.classList.remove('home');
|
|
|
|
document.body.classList.add(router.getCurrent().view.scope);
|
|
|
|
if(!router.getCurrent().view.project) {
|
|
document.body.classList.add('hide-nav');
|
|
document.body.classList.remove('show-nav');
|
|
}
|
|
else {
|
|
document.body.classList.add('show-nav');
|
|
document.body.classList.remove('hide-nav');
|
|
}
|
|
|
|
// Special case for console index page
|
|
|
|
if('/console' === router.getCurrent().path) {
|
|
document.body.classList.add('index');
|
|
}
|
|
else {
|
|
document.body.classList.remove('index');
|
|
}
|
|
}
|
|
})
|
|
.add({
|
|
selector: 'data-cookie-policy',
|
|
repeat: false,
|
|
controller: function(element, alerts, cookie) {
|
|
if(!cookie.get('cp-cookie-alert')) {
|
|
let text = element.dataset['cookiePolicy'] || '';
|
|
|
|
alerts.send({text: text, class: 'cookie-alert', link: '/policy/cookies', remove: function () {
|
|
cookie.set('cp-cookie-alert', 'true', 365 * 10); // 10 years
|
|
}}, 0);
|
|
}
|
|
}
|
|
})
|
|
.add({
|
|
selector: 'data-login-fb',
|
|
controller: function(element, console, expression) {
|
|
let success = expression.parse(element.dataset['success'] || '');
|
|
let failure = expression.parse(element.dataset['failure'] || '');
|
|
element.href = console.auth.loginWithFacebook(success, failure);
|
|
}
|
|
})
|
|
.add({
|
|
selector: 'data-login-linkedin',
|
|
controller: function(element, console, expression) {
|
|
let success = expression.parse(element.dataset['success'] || '');
|
|
let failure = expression.parse(element.dataset['failure'] || '');
|
|
element.href = console.auth.loginWithLinkedIn(success, failure);
|
|
}
|
|
})
|
|
.add({
|
|
selector: 'data-login-github',
|
|
controller: function(element, console, expression) {
|
|
let success = expression.parse(element.dataset['success'] || '');
|
|
let failure = expression.parse(element.dataset['failure'] || '');
|
|
element.href = console.auth.loginWithGithub(success, failure);
|
|
}
|
|
})
|
|
.add({
|
|
selector: 'data-billing-invoice-print',
|
|
controller: function(element, expression, sdk) {
|
|
let id = expression.parse(element.dataset['billingInvoicePrint'] || '');
|
|
element.href = sdk.billing.invoices.getForPrint(id);
|
|
}
|
|
})
|
|
.add({
|
|
selector: 'data-billing-invoice-download',
|
|
controller: function(element, expression, sdk) {
|
|
let id = expression.parse(element.dataset['billingInvoiceDownload'] || '');
|
|
element.href = sdk.billing.invoices.getForDownload(id);
|
|
}
|
|
})
|
|
.add({
|
|
selector: 'data-auto-cc-master',
|
|
controller: function(element, expression, document) {
|
|
let price = parseInt(expression.parse(element.dataset['autoCcMaster'] || '0'));
|
|
let check = function () {
|
|
if(element.checked && 0 === price) {
|
|
document.body.classList.add('free-plan');
|
|
|
|
document.dispatchEvent(new CustomEvent('set-free-plan', {
|
|
bubbles: false,
|
|
cancelable: true
|
|
}));
|
|
}
|
|
else if(element.checked) {
|
|
document.body.classList.remove('free-plan');
|
|
|
|
document.dispatchEvent(new CustomEvent('unset-free-plan', {
|
|
bubbles: false,
|
|
cancelable: true
|
|
}));
|
|
}
|
|
};
|
|
|
|
element.addEventListener('change', check);
|
|
|
|
check();
|
|
}
|
|
})
|
|
.add({
|
|
selector: 'data-auto-cc-slave',
|
|
controller: function(element) {
|
|
document.addEventListener('set-free-plan', function () {
|
|
element.checked = true;
|
|
});
|
|
|
|
document.addEventListener('unset-free-plan', function () {
|
|
element.checked = false;
|
|
});
|
|
}
|
|
})
|
|
.add({
|
|
selector: 'data-ls-ui-alerts',
|
|
controller: function(element, window, view) {
|
|
window.document.addEventListener('alerted', function() {
|
|
view.render(element);
|
|
}, true);
|
|
}
|
|
})
|
|
.add({
|
|
selector: 'data-ls-ui-alerts-delete',
|
|
controller: function(document, element, alerts, expression) {
|
|
let message = expression.parse(element.dataset['message']);
|
|
|
|
let remove = function () {
|
|
alerts.remove(message);
|
|
};
|
|
|
|
element.addEventListener('click', remove);
|
|
}
|
|
})
|
|
.add({
|
|
selector: 'data-ls-ui-chart-line',
|
|
repeat: true,
|
|
controller: function(element, document, expression) {
|
|
new Chartist.Line(element, {
|
|
labels: ['16.05', '17.05', '18.05', '19.05', '20.05'],
|
|
series: [
|
|
[12, 9, 7, 8, 5],
|
|
[2, 1, 3.5, 7, 3],
|
|
[1, 3, 4, 5, 6],
|
|
[2, 6, 10, 5, 9],
|
|
[3, 1, 1, 8, 3]
|
|
]
|
|
}, {
|
|
height: '300px',
|
|
width: '100%',
|
|
fullWidth: true,
|
|
showArea: true,
|
|
//showPoint: false,
|
|
chartPadding: {
|
|
right: 30
|
|
}
|
|
});
|
|
|
|
}
|
|
})
|
|
.add({
|
|
selector: 'data-ls-ui-chart-pie',
|
|
repeat: true,
|
|
controller: function(element, document, expression) {
|
|
new Chartist.Pie(element, {
|
|
series: [20, 10, 30, 40]
|
|
}, {
|
|
donut: true,
|
|
donutSolid: true,
|
|
showLabel: true
|
|
});
|
|
|
|
}
|
|
})
|
|
.add({
|
|
selector: 'data-forms-headers',
|
|
repeat: false,
|
|
controller: function(element) {
|
|
let key = document.createElement('input');
|
|
let value = document.createElement('input');
|
|
let wrap = document.createElement('div');
|
|
let cell1 = document.createElement('div');
|
|
let cell2 = document.createElement('div');
|
|
|
|
key.type = 'text';
|
|
key.className = 'margin-bottom-no';
|
|
key.placeholder = 'Key';
|
|
value.type = 'text';
|
|
value.className = 'margin-bottom-no';
|
|
value.placeholder = 'Value';
|
|
|
|
wrap.className = 'row thin margin-bottom-small';
|
|
cell1.className = 'col span-6';
|
|
cell2.className = 'col span-6';
|
|
|
|
element.parentNode.insertBefore(wrap, element);
|
|
cell1.appendChild(key);
|
|
cell2.appendChild(value);
|
|
wrap.appendChild(cell1);
|
|
wrap.appendChild(cell2);
|
|
|
|
key.addEventListener('input', function () {
|
|
syncA();
|
|
});
|
|
|
|
value.addEventListener('input', function () {
|
|
syncA();
|
|
});
|
|
|
|
element.addEventListener('change', function () {
|
|
syncB();
|
|
});
|
|
|
|
let syncA = function () {
|
|
element.value = key.value.toLowerCase() + ':' + value.value.toLowerCase();
|
|
};
|
|
|
|
let syncB = function () {
|
|
let split = element.value.toLowerCase().split(':');
|
|
key.value = split[0] || '';
|
|
value.value = split[1] || '';
|
|
|
|
key.value = key.value.trim();
|
|
value.value = value.value.trim();
|
|
};
|
|
|
|
syncB();
|
|
}
|
|
})
|
|
.add({
|
|
selector: 'data-prism',
|
|
repeat: false,
|
|
controller: function(window, document, element, alerts) {
|
|
Prism.highlightElement(element);
|
|
|
|
let copy = document.createElement('i');
|
|
|
|
copy.className = 'icon-docs copy';
|
|
copy.title = 'Copy to Clipboard';
|
|
|
|
copy.addEventListener('click', function () {
|
|
window.getSelection().removeAllRanges();
|
|
|
|
let range = document.createRange();
|
|
|
|
range.selectNode(element);
|
|
|
|
window.getSelection().addRange(range);
|
|
|
|
try {
|
|
document.execCommand('copy');
|
|
alerts.send({text: 'Copied to clipboard', class: ''}, 3000);
|
|
} catch (err) {
|
|
alerts.send({text: "Failed to copy text ", class: 'error'}, 3000);
|
|
}
|
|
|
|
window.getSelection().removeAllRanges();
|
|
});
|
|
|
|
element.parentNode.parentNode.appendChild(copy);
|
|
}
|
|
})
|
|
.add({
|
|
selector: 'data-code-example',
|
|
repeat: false,
|
|
controller: function(window, document, element, cookie) {
|
|
let prefix = element.dataset['codeExample'] || 'unknown';
|
|
|
|
element.addEventListener('change', function () {
|
|
select(element.value);
|
|
});
|
|
|
|
let select = function (value) {
|
|
for (let i=0; i< element.length; i++){
|
|
document.body.classList.remove(prefix + '-' + element.options[i].value);
|
|
}
|
|
|
|
document.body.classList.add(prefix + '-' + value);
|
|
|
|
cookie.set('language-' + prefix, value, 365);
|
|
|
|
document.dispatchEvent(new CustomEvent('updated-language-' + prefix));
|
|
};
|
|
|
|
document.addEventListener('updated-language-' + prefix, function () {
|
|
element.value = cookie.get('language-' + prefix);
|
|
});
|
|
|
|
let def = cookie.get('language-' + prefix) || element.options[0].value;
|
|
|
|
select(def);
|
|
|
|
element.value = def;
|
|
}
|
|
})
|
|
.add({
|
|
selector: 'data-ls-ui-chart',
|
|
repeat: false,
|
|
controller: function(element, container, date, document) {
|
|
let child = document.createElement('canvas');
|
|
|
|
child.width = 500;
|
|
child.height = 175;
|
|
|
|
let stats = container.get('usage');
|
|
|
|
if(!stats || !stats['requests'] || !stats['requests']['data']) {
|
|
return;
|
|
}
|
|
|
|
let config = {
|
|
type: 'line',
|
|
data: {
|
|
labels: [],
|
|
datasets: [{
|
|
label: 'Requests',
|
|
backgroundColor: 'rgba(230, 248, 253, 0.3)',
|
|
borderColor: '#29b5d9',
|
|
borderWidth: 2,
|
|
data: [
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0
|
|
],
|
|
fill: true
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
title: {
|
|
display: false,
|
|
text: 'Stats'
|
|
},
|
|
legend: {
|
|
display: false
|
|
},
|
|
tooltips: {
|
|
mode: 'index',
|
|
intersect: false,
|
|
caretPadding: 0
|
|
},
|
|
hover: {
|
|
mode: 'nearest',
|
|
intersect: true
|
|
},
|
|
scales: {
|
|
xAxes: [{
|
|
display: false
|
|
}],
|
|
yAxes: [{
|
|
display: false,
|
|
}]
|
|
}
|
|
}
|
|
};
|
|
|
|
for (let i = 0; i < stats['requests']['data'].length; i++) {
|
|
config.data.datasets[0].data[i] = stats['requests']['data'][i].value;
|
|
config.data.labels[i] = date.format('d F Y', stats['requests']['data'][i].date);
|
|
}
|
|
|
|
let chart = container.get('chart');
|
|
|
|
if(chart) {
|
|
//if(JSON.stringify(chart.data.datasets[0].data) === JSON.stringify(config.data.datasets[0].data) && element.dataset['canvas']) {
|
|
// return;
|
|
//}
|
|
|
|
//chart.destroy();
|
|
}
|
|
|
|
element.innerHTML = '';
|
|
|
|
element.appendChild(child);
|
|
|
|
container.set('chart', new Chart(child.getContext('2d'), config), true);
|
|
|
|
element.dataset['canvas'] = true;
|
|
}
|
|
})
|
|
; |