chore: demo index to es5 that ie can run

This commit is contained in:
huangtong.ht 2018-10-28 11:11:12 +08:00
parent 8243e1d1d0
commit b1cee08333

View File

@ -1,14 +1,17 @@
(function () {
// filtering
const $query = $('#query');
var $query = $('#query');
function filter() {
const str = $query.val();
var str = $query.val();
if (!str) {
$('.demo-thumbnail').show();
} else {
$('.demo-thumbnail').each(function () {
const $thumbnail = $(this);
const basename = $thumbnail.data('basename');
var $thumbnail = $(this);
var basename = $thumbnail.data('basename');
if (basename.indexOf(str) === -1) {
$thumbnail.hide();
} else {
@ -17,28 +20,24 @@
});
}
}
$query.on('input', _.debounce(filter));
// router
let currentId;
const $code = $('#code');
const htmlEditor = CodeMirror.fromTextArea($code[0], {
$query.on('input', _.debounce(filter)); // router
var currentId;
var $code = $('#code');
var htmlEditor = CodeMirror.fromTextArea($code[0], {
mode: "text/html",
extraKeys: {
'Ctrl-Space': 'autocomplete'
},
foldGutter: true,
gutters: [
'CodeMirror-linenumbers',
'CodeMirror-foldgutter'
],
gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
lineNumbers: true,
lineWrapping: false
});
const $docContainer = $('#doc-container');
const $chartPanel = $('#chart-panel');
const $codePanel = $('#code-panel');
var $docContainer = $('#doc-container');
var $chartPanel = $('#chart-panel');
var $codePanel = $('#code-panel');
function syncCode(code) {
$chartPanel.html('<iframe class="chart-frame" frameborder="0"></iframe>');
@ -47,59 +46,58 @@
}
routie({
'/:id': id => {
'/:id': function id(_id) {
$docContainer.show();
const $htmlCode = $(`#code-${id}`);
const code = $htmlCode.text();
syncCode(code)
var $htmlCode = $("#code-" + _id);
var code = $htmlCode.text();
syncCode(code);
},
'': () => {
'': function _(id) {
$docContainer.hide();
}
});
}); // resizable
// resizable
$codePanel.resizable({
handleSelector: '#resize-handler',
resizeWidthFrom: 'right',
resizeHeight: false,
onDragStart() {
onDragStart: function onDragStart() {
$docContainer.css('pointer-events', 'none');
$docContainer.css('cursor', 'col-resize');
$codePanel.find('.CodeMirror-gutter-elt').css('cursor', 'col-resize');
},
onDragEnd() {
onDragEnd: function onDragEnd() {
$docContainer.css('pointer-events', 'auto');
$docContainer.css('cursor', 'default');
$codePanel.find('.CodeMirror-gutter-elt').css('cursor', 'default');
},
});
}
}); // copy code
// copy code
const BTN_COPY_SELECTOR = '#copy-code';
const clipboard = new Clipboard(BTN_COPY_SELECTOR, {
text: () => htmlEditor.getValue(),
var BTN_COPY_SELECTOR = '#copy-code';
var clipboard = new Clipboard(BTN_COPY_SELECTOR, {
text: function text() {
return htmlEditor.getValue();
}
});
let timer;
clipboard.on('success', e => {
var timer;
clipboard.on('success', function (e) {
e.clearSelection();
$(BTN_COPY_SELECTOR).text('Succeed!');
clearTimeout(timer);
timer = setTimeout(() => {
timer = setTimeout(function () {
$(BTN_COPY_SELECTOR).text('Copy');
}, 2000);
});
clipboard.on('error', e => {
clipboard.on('error', function (e) {
e.clearSelection();
$(BTN_COPY_SELECTOR).text('Failed!');
clearTimeout(timer);
timer = setTimeout(() => {
timer = setTimeout(function () {
$(BTN_COPY_SELECTOR).text('Copy');
}, 2000);
});
}); // run code
// run code
$('#execute').on('click', () => {
$('#execute').on('click', function () {
syncCode(htmlEditor.getValue());
});
})();
})();