Skip to content

Commit e6966cb

Browse files
shengyuanshengyuan
committed
Merge branch 'dev' into simulator
* dev: Add enlarge and shrink buttons for simulatorArea. The setting of language.
2 parents b0dc061 + e5a3dcc commit e6966cb

3 files changed

Lines changed: 118 additions & 25 deletions

File tree

‎code.js‎

Lines changed: 73 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -597,21 +597,9 @@ Code.loadSimulator = function () {
597597
var frame = document.getElementById('simulator-frame');
598598
var btn = document.getElementById('simulatorButton');
599599
var closeBtn = document.querySelector('#simulator-area .close-btn');
600+
var enlargeBtn = document.querySelector('#simulator-area .icon-enlarge');
601+
var shrinkBtn = document.querySelector('#simulator-area .icon-shrink')
600602
var resizeBar = document.getElementById('simulator-resize-bar');
601-
var updateHeight = function () {
602-
var contentHeight = document.getElementById('content_blocks').offsetHeight;
603-
area.style.height = (contentHeight - 110) + 'px';
604-
};
605-
var frameReady = function () {
606-
if (storage.config) {
607-
frame.contentWindow.blockly.config(storage.config);
608-
}
609-
610-
if (storage.opened) {
611-
area.classList.add('show');
612-
btn.classList.add('opened');
613-
}
614-
};
615603
var storage = {};
616604

617605
if (localStorage.simulator) {
@@ -622,24 +610,19 @@ Code.loadSimulator = function () {
622610
}
623611
}
624612

625-
if (storage.width) {
626-
area.style.width = storage.width;
627-
}
628-
629613
if (frame.contentWindow.blockly) {
630614
frameReady();
631615
} else {
632616
frame.contentWindow.addEventListener('load', frameReady);
633617
}
634618

635-
updateHeight();
636-
637619
window.addEventListener('resize', updateHeight);
638620

639621
window.addEventListener('unload', function () {
640622
storage.config = frame.contentWindow.blockly.config();
641623
storage.opened = area.classList.contains('show');
642-
storage.width = area.style.width;
624+
storage.isFull = area.classList.contains('full');
625+
storage.width = area.dataset.width;
643626
localStorage.simulator = JSON.stringify(storage);
644627
});
645628

@@ -648,11 +631,30 @@ Code.loadSimulator = function () {
648631
});
649632

650633
Code.bindClick(closeBtn, function () {
651-
area.classList.remove('show');
634+
area.classList.remove('show', 'full');
652635
btn.classList.remove('opened');
636+
updateWidth();
637+
updateHeight();
638+
});
639+
640+
Code.bindClick(enlargeBtn, function () {
641+
area.classList.add('full');
642+
updateWidth();
643+
updateHeight();
644+
});
645+
646+
Code.bindClick(shrinkBtn, function () {
647+
area.classList.remove('full');
648+
updateWidth();
649+
updateHeight();
653650
});
654651

655652
resizeBar.addEventListener('mousedown', function (e) {
653+
654+
if (area.classList.contains('full')) {
655+
return;
656+
}
657+
656658
var cover = document.createElement('div');
657659
var ox = e.pageX;
658660
var dw = area.offsetWidth;
@@ -676,12 +678,61 @@ Code.loadSimulator = function () {
676678
cover.removeEventListener('mousemove', move);
677679
cover.removeEventListener('mouseup', up);
678680
cover.remove();
681+
area.dataset.width = area.style.width;
679682
};
680683

681684
cover.addEventListener('mousemove', move);
682685
cover.addEventListener('mouseup', up);
686+
683687
});
684688

689+
function updateHeight() {
690+
if (area.classList.contains('full')) {
691+
area.style.height = '';
692+
return;
693+
}
694+
695+
var contentHeight = document.getElementById('content_blocks').offsetHeight;
696+
area.style.height = (contentHeight - 110) + 'px';
697+
}
698+
699+
function updateWidth() {
700+
if (area.classList.contains('full')) {
701+
area.style.width = '';
702+
return;
703+
}
704+
705+
area.style.width = area.dataset.width || '';
706+
}
707+
708+
function frameReady() {
709+
var api = frame.contentWindow.blockly;
710+
711+
// 寬度的儲存
712+
storage.width && (area.dataset.width = storage.width);
713+
714+
// 語系
715+
api.lang(Code.getLang());
716+
717+
// 之前存檔的回復
718+
if (storage.config) {
719+
api.config(storage.config);
720+
}
721+
722+
if (storage.isFull) {
723+
area.classList.add('full');
724+
}
725+
726+
updateWidth();
727+
updateHeight();
728+
729+
if (storage.opened) {
730+
area.classList.add('show');
731+
btn.classList.add('opened');
732+
}
733+
734+
}
735+
685736
};
686737

687738
/**

‎css/style.css‎

Lines changed: 43 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1029,12 +1029,21 @@ td#copyCode div {
10291029
width: 400px;
10301030
min-width: 225px;
10311031
max-width: 70%;
1032-
background: rgba(255, 255, 255, .8);
1032+
background: rgba(255, 255, 255, 1);
10331033
border-radius: 20px;
10341034
border: 10px solid #ccc;
10351035
transition: opacity .3s;
10361036
}
10371037

1038+
#simulator-area.full {
1039+
max-width: none;
1040+
width: auto;
1041+
top: 15px;
1042+
left: 15px;
1043+
bottom: 15px;
1044+
z-index: 999;
1045+
}
1046+
10381047
#simulator-area.show {
10391048
display: block;
10401049
}
@@ -1058,7 +1067,7 @@ td#copyCode div {
10581067

10591068
#simulator-area .simulator-area-content {
10601069
position: relative;
1061-
overflow: auto;
1070+
overflow-y: hidden;
10621071
width: 100%;
10631072
height: 100%;
10641073
padding: 15px;
@@ -1079,7 +1088,38 @@ td#copyCode div {
10791088
cursor: pointer;
10801089
}
10811090

1082-
#simulator-area .simulator-area-content .close-btn:hover {
1091+
#simulator-area .simulator-area-content .icon-shrink {
1092+
display: none;
1093+
}
1094+
1095+
#simulator-area.full .simulator-area-content .icon-shrink {
1096+
display: block;
1097+
}
1098+
1099+
#simulator-area .simulator-area-content .icon-enlarge {
1100+
display: block;
1101+
}
1102+
1103+
#simulator-area.full .simulator-area-content .icon-enlarge {
1104+
display: none;
1105+
}
1106+
1107+
#simulator-area .simulator-area-content .icon-enlarge,
1108+
#simulator-area .simulator-area-content .icon-shrink {
1109+
position: absolute;
1110+
right: 27px;
1111+
top: 5px;
1112+
line-height: 22px;
1113+
width: 22px;
1114+
height: 22px;
1115+
opacity: 0.4;
1116+
transition: .3s;
1117+
cursor: pointer;
1118+
}
1119+
1120+
#simulator-area .simulator-area-content .close-btn:hover,
1121+
#simulator-area .simulator-area-content .icon-enlarge:hover,
1122+
#simulator-area .simulator-area-content .icon-shrink:hover {
10831123
opacity: 1;
10841124
}
10851125

‎views/index.handlebars‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,8 @@
127127
<div id="simulator-resize-bar"></div>
128128
<div class="simulator-area-content">
129129
<div class="close-btn"></div>
130+
<div class="icon-enlarge"></div>
131+
<div class="icon-shrink"></div>
130132
<iframe id="simulator-frame" src="components/simulator/index.html"></iframe>
131133
</div>
132134
</div>

0 commit comments

Comments
 (0)