Skip to content

Commit 140542e

Browse files
shengyuanshengyuan
committed
Save simulator config and improve the resizing of simulator.
1 parent 8fef12c commit 140542e

2 files changed

Lines changed: 93 additions & 41 deletions

File tree

‎code.js‎

Lines changed: 83 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -594,59 +594,94 @@ Code.loadSample = function () {
594594

595595
Code.loadSimulator = function () {
596596
var area = document.getElementById('simulator-area');
597+
var frame = document.getElementById('simulator-frame');
597598
var btn = document.getElementById('simulatorButton');
598-
var close = document.querySelector('#simulator-area .close-btn');
599+
var closeBtn = document.querySelector('#simulator-area .close-btn');
599600
var resizeBar = document.getElementById('simulator-resize-bar');
600601
var updateHeight = function () {
601602
var contentHeight = document.getElementById('content_blocks').offsetHeight;
602603
area.style.height = (contentHeight - 110) + 'px';
603604
};
605+
var frameReady = function () {
606+
if (storage.config) {
607+
frame.contentWindow.blockly.config(storage.config);
608+
}
604609

605-
if (!area.dataset.init) {
606-
area.dataset.init = true;
607-
updateHeight();
608-
window.addEventListener('resize', updateHeight);
610+
if (storage.opened) {
611+
area.classList.add('show');
612+
btn.classList.add('opened');
613+
}
614+
};
615+
var storage = {};
609616

610-
if (localStorage.simulatorAreaWidth) {
611-
area.style.width = localStorage.simulatorAreaWidth;
617+
if (localStorage.simulator) {
618+
try {
619+
storage = JSON.parse(localStorage.simulator);
620+
} catch (e) {
621+
storage = {};
612622
}
613-
614-
Code.bindClick(close, function () {
615-
area.classList.remove('show');
616-
btn.classList.remove('opened');
617-
});
623+
}
618624

619-
resizeBar.addEventListener('mousedown', function (e) {
620-
var frame = document.getElementById('simulator-frame');
621-
var ox = e.pageX;
622-
var dw = area.offsetWidth;
623-
624-
area.style.opacity = '0.4';
625-
frame.style.pointerEvents = 'none';
626-
area.classList.add('resize');
627-
628-
var move = function (evt) {
629-
var rx = evt.pageX;
630-
area.style.width = dw - rx + ox - 20 + 'px';
631-
localStorage.simulatorAreaWidth = area.style.width;
632-
};
633-
634-
var up = function () {
635-
area.style.opacity = '1';
636-
frame.style.pointerEvents = 'auto';
637-
area.classList.remove('resize');
638-
document.removeEventListener('mousemove', move);
639-
document.removeEventListener('mouseup', up);
640-
};
641-
642-
document.addEventListener('mousemove', move);
643-
document.addEventListener('mouseup', up);
644-
});
625+
if (storage.width) {
626+
area.style.width = storage.width;
627+
}
645628

629+
if (frame.contentWindow.blockly) {
630+
frameReady();
631+
} else {
632+
frame.contentWindow.addEventListener('load', frameReady);
646633
}
647634

648-
area.classList.toggle('show');
649-
btn.classList.toggle('opened');
635+
updateHeight();
636+
637+
window.addEventListener('resize', updateHeight);
638+
639+
window.addEventListener('unload', function () {
640+
storage.config = frame.contentWindow.blockly.config();
641+
storage.opened = area.classList.contains('show');
642+
storage.width = area.style.width;
643+
localStorage.simulator = JSON.stringify(storage);
644+
});
645+
646+
Code.bindClick('runButton', function () {
647+
frame.contentWindow.blockly.toggleRunning();
648+
});
649+
650+
Code.bindClick(closeBtn, function () {
651+
area.classList.remove('show');
652+
btn.classList.remove('opened');
653+
});
654+
655+
resizeBar.addEventListener('mousedown', function (e) {
656+
var cover = document.createElement('div');
657+
var ox = e.pageX;
658+
var dw = area.offsetWidth;
659+
660+
area.style.opacity = '0.4';
661+
frame.style.pointerEvents = 'none';
662+
area.classList.add('resize');
663+
664+
cover.classList.add('simulator-cover');
665+
document.body.appendChild(cover);
666+
667+
var move = function (evt) {
668+
var rx = evt.pageX;
669+
area.style.width = dw - rx + ox - 20 + 'px';
670+
};
671+
672+
var up = function () {
673+
area.style.opacity = '1';
674+
frame.style.pointerEvents = 'auto';
675+
area.classList.remove('resize');
676+
cover.removeEventListener('mousemove', move);
677+
cover.removeEventListener('mouseup', up);
678+
cover.remove();
679+
};
680+
681+
cover.addEventListener('mousemove', move);
682+
cover.addEventListener('mouseup', up);
683+
});
684+
650685
};
651686

652687
/**
@@ -950,7 +985,14 @@ Code.init = function (toolbox) {
950985
linkButton.className = 'disabled';
951986
}
952987

953-
Code.bindClick('simulatorButton', Code.loadSimulator);
988+
Code.loadSimulator();
989+
990+
Code.bindClick('simulatorButton', function () {
991+
var area = document.getElementById('simulator-area');
992+
var btn = document.getElementById('simulatorButton');
993+
area.classList.toggle('show');
994+
btn.classList.toggle('opened');
995+
});
954996

955997
for (var i = 0; i < Code.TABS_.length; i++) {
956998
var name = Code.TABS_[i];

‎css/style.css‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1089,3 +1089,13 @@ td#copyCode div {
10891089
border: none;
10901090
z-index: 2;
10911091
}
1092+
1093+
.simulator-cover {
1094+
position: fixed;
1095+
top: 0;
1096+
bottom: 0;
1097+
left: 0;
1098+
right: 0;
1099+
opacity: 0;
1100+
z-index: 9999;
1101+
}

0 commit comments

Comments
 (0)