bulma/docs/lib/index.js

85 lines
2.6 KiB
JavaScript
Raw Normal View History

2017-07-01 17:30:39 +00:00
'use strict';
document.addEventListener('DOMContentLoaded', function () {
2017-10-10 16:48:01 +00:00
// Intro
2017-10-11 16:25:33 +00:00
var introVideo = document.getElementById('introVideo');
var introIframe = document.getElementById('introIframe');
2017-10-10 16:48:01 +00:00
var npmClipboard = new Clipboard('#npmCopy');
2018-08-01 10:28:08 +00:00
if (Vimeo) {
var introPlayer = new Vimeo.Player(introIframe);
introPlayer.ready().then(function () {
introVideo.classList.add('has-loaded');
});
}
2017-10-10 16:48:01 +00:00
npmClipboard.on('success', function (e) {
e.trigger.innerText = 'copied!';
e.trigger.classList.add('is-success');
setTimeout(function () {
e.trigger.innerText = 'copy';
e.trigger.classList.remove('is-success');
}, 500);
e.clearSelection();
});
npmClipboard.on('error', function (e) {
e.trigger.innerText = 'error!';
e.trigger.classList.add('is-error');
setTimeout(function () {
e.trigger.innerText = 'copy';
e.trigger.classList.remove('is-error');
}, 500);
});
// Grid
2017-07-01 17:30:39 +00:00
var $grid = document.getElementById('grid');
var $columns = Array.prototype.slice.call(document.querySelectorAll('#grid > .column'), 0);
var $markup = document.querySelector('#markup code');
var $message = document.getElementById('message');
var $add = document.getElementById('add');
var $remove = document.getElementById('remove');
var showing = 5;
function showColumns() {
if (showing === 13) {
$message.style.display = 'block';
} else {
$message.style.display = 'none';
}
2018-04-10 11:26:37 +00:00
showing = Math.min(Math.max(parseInt(showing), 1), 12);
2017-07-01 17:30:39 +00:00
$columns.forEach(function ($el) {
$el.style.display = 'none';
});
$columns.slice(0, showing).forEach(function ($el) {
$el.style.display = 'block';
});
$markup.innerHTML = '<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;columns&quot;</span><span class="nt">&gt;</span>';
$markup.insertAdjacentHTML('beforeend', '\n');
for (var i = 0; i < showing; i++) {
$markup.insertAdjacentHTML('beforeend', ' <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;column&quot;</span><span class="nt">&gt;</span>');
$markup.insertAdjacentHTML('beforeend', i + 1);
$markup.insertAdjacentHTML('beforeend', '<span class="nt">&lt;/div&gt;</span>');
$markup.insertAdjacentHTML('beforeend', '\n');
}
$markup.insertAdjacentHTML('beforeend', '<span class="nt">&lt;/div&gt;</span>');
}
$add.addEventListener('click', function () {
showing++;
showColumns();
});
$remove.addEventListener('click', function () {
showing--;
showColumns();
});
});