Skip to content

Commit 8e57f1e

Browse files
shengyuanshengyuan
committed
Add the functions, resize and drag, to demo area
1 parent 39435ff commit 8e57f1e

3 files changed

Lines changed: 242 additions & 33 deletions

File tree

‎code.js‎

Lines changed: 217 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -442,17 +442,21 @@ Code.getHotKey = function (e) {
442442

443443
Code.loadDemoArea = function () {
444444
var area = document.getElementById('demo-area');
445+
var content = document.querySelector('.demo-area-content');
445446
var btn = document.getElementById('demoButton');
446447
var select = document.getElementById('demo-select');
447448
var close = document.querySelector('.close-btn');
448449
var contentHeight = document.getElementById('content_blocks').offsetHeight;
449-
var resizeBar = document.getElementById('demo-resize-bar');
450+
var resizeLeftBar = document.querySelector('#demo-area .resize-bar-left');
451+
var resizeRightBar = document.querySelector('#demo-area .resize-bar-right');
452+
var resizeBottomBar = document.querySelector('#demo-area .resize-bar-bottom');
453+
var resizeTopBar = document.querySelector('#demo-area .resize-bar-top');
450454

451-
area.style.height = (contentHeight - 110) + 'px';
452455
area.className = area.className.replace("show", "");
453456

454-
if (localStorage.demoAreaWidth) {
457+
if (localStorage.demoAreaWidth && localStorage.demoAreaWidth) {
455458
area.style.width = localStorage.demoAreaWidth;
459+
area.style.height = localStorage.demoAreaHeight;
456460
}
457461

458462
if (localStorage.demoArea == 'open') {
@@ -467,33 +471,229 @@ Code.loadDemoArea = function () {
467471
select.value = localStorage.demoAreaSelect;
468472
Code.reloadSandbox();
469473

470-
window.addEventListener('resize', function () {
471-
contentHeight = document.getElementById('content_blocks').offsetHeight;
472-
area.style.height = (contentHeight - 110) + 'px';
474+
content.addEventListener('mousedown', function (e) {
475+
e.stopPropagation();
473476
});
474477

475-
resizeBar.onmousedown = function (e) {
476-
area.style.opacity = '0.4';
478+
area.addEventListener('mousedown', function (e) {
479+
480+
var cover = document.createElement('div');
477481
var frame = document.getElementById('demo-frame');
482+
483+
var mouseX = e.pageX;
484+
var mouseY = e.pageY;
485+
var positionRight = document.body.offsetWidth - area.offsetLeft - area.offsetWidth;
486+
var positionTop = area.offsetTop;
487+
488+
area.style.opacity = '0.4';
478489
frame.style.pointerEvents = 'none';
490+
491+
cover.classList.add('demo-cover');
492+
document.body.appendChild(cover);
493+
494+
var move = function (evt) {
495+
var mouseMoveX = evt.pageX;
496+
var mouseMoveY = evt.pageY;
497+
area.style.right = positionRight - (mouseMoveX - mouseX) + 'px';
498+
area.style.top = positionTop + (mouseMoveY - mouseY) + 'px';
499+
};
500+
501+
var up = function () {
502+
area.style.opacity = '1';
503+
frame.style.pointerEvents = 'auto';
504+
cover.removeEventListener('mousemove', move);
505+
cover.removeEventListener('mouseup', up);
506+
cover.remove();
507+
};
508+
509+
cover.addEventListener('mousemove', move);
510+
cover.addEventListener('mouseup', up);
511+
512+
});
513+
514+
resizeLeftBar.addEventListener('mousedown', function (e) {
515+
516+
var cover = document.createElement('div');
517+
var frame = document.getElementById('demo-frame');
479518
var ox = e.pageX;
480519
var dw = area.offsetWidth;
520+
521+
area.style.opacity = '0.4';
522+
frame.style.pointerEvents = 'none';
481523
area.className += " resize";
482524

483-
document.onmousemove = function (event) {
484-
var rx = event.pageX;
525+
cover.classList.add('demo-cover');
526+
document.body.appendChild(cover);
527+
528+
var move = function (evt) {
529+
var rx = evt.pageX;
485530
area.style.width = dw - rx + ox - 20 + 'px';
486531
localStorage.demoAreaWidth = area.style.width;
532+
};
533+
534+
var up = function () {
535+
area.style.opacity = '1';
536+
frame.style.pointerEvents = 'auto';
537+
area.classList.remove('resize');
538+
cover.removeEventListener('mousemove', move);
539+
cover.removeEventListener('mouseup', up);
540+
cover.remove();
541+
area.dataset.width = area.style.width;
487542
};
488-
};
489543

490-
document.onmouseup = function () {
491-
area.style.opacity = '1';
544+
cover.addEventListener('mousemove', move);
545+
cover.addEventListener('mouseup', up);
546+
e.stopPropagation();
547+
548+
});
549+
550+
resizeRightBar.addEventListener('mousedown', function (e) {
551+
552+
var cover = document.createElement('div');
492553
var frame = document.getElementById('demo-frame');
493-
frame.style.pointerEvents = 'auto';
494-
area.className = area.className.replace("resize", "");
495-
document.onmousemove = null;
496-
};
554+
555+
var frameWidth = area.offsetWidth;
556+
var mouseX = e.pageX;
557+
var positionRight = document.body.offsetWidth - area.offsetLeft - frameWidth;
558+
559+
area.style.opacity = '0.4';
560+
frame.style.pointerEvents = 'none';
561+
area.className += " resize";
562+
563+
cover.classList.add('demo-cover');
564+
document.body.appendChild(cover);
565+
566+
var move = function (evt) {
567+
568+
var mouseMoveX = evt.pageX;
569+
var dist = mouseMoveX - mouseX;
570+
var width = frameWidth + dist - 20;
571+
572+
if (width < 225) {
573+
return;
574+
}
575+
576+
area.style.width = width + 'px';
577+
area.style.right = positionRight - dist + 'px';
578+
579+
};
580+
581+
var up = function () {
582+
area.style.opacity = '1';
583+
frame.style.pointerEvents = 'auto';
584+
area.classList.remove('resize');
585+
cover.removeEventListener('mousemove', move);
586+
cover.removeEventListener('mouseup', up);
587+
cover.removeEventListener('selectstart', disableSelect);
588+
cover.remove();
589+
area.dataset.width = area.style.width;
590+
};
591+
592+
var disableSelect = function (evt) {
593+
evt.preventDefault();
594+
};
595+
596+
cover.addEventListener('mousemove', move);
597+
cover.addEventListener('mouseup', up);
598+
cover.addEventListener('selectstart', disableSelect);
599+
e.stopPropagation();
600+
601+
});
602+
603+
resizeBottomBar.addEventListener('mousedown', function (e) {
604+
605+
var cover = document.createElement('div');
606+
var frame = document.getElementById('demo-frame');
607+
var oy = e.pageY;
608+
var dh = area.offsetHeight;
609+
610+
area.style.opacity = '0.4';
611+
frame.style.pointerEvents = 'none';
612+
area.className += " resize";
613+
614+
cover.classList.add('demo-cover');
615+
document.body.appendChild(cover);
616+
617+
var move = function (evt) {
618+
var ry = evt.pageY;
619+
area.style.height = dh + ry - oy - 20 + 'px';
620+
localStorage.demoAreaHeight = area.style.height;
621+
};
622+
623+
var up = function () {
624+
area.style.opacity = '1';
625+
frame.style.pointerEvents = 'auto';
626+
area.classList.remove('resize');
627+
cover.removeEventListener('mousemove', move);
628+
cover.removeEventListener('mouseup', up);
629+
cover.removeEventListener('selectstart', disableSelect);
630+
cover.remove();
631+
area.dataset.height = area.style.height;
632+
};
633+
634+
var disableSelect = function (evt) {
635+
evt.preventDefault();
636+
};
637+
638+
cover.addEventListener('mousemove', move);
639+
cover.addEventListener('mouseup', up);
640+
cover.addEventListener('selectstart', disableSelect);
641+
e.stopPropagation();
642+
643+
});
644+
645+
resizeTopBar.addEventListener('mousedown', function (e) {
646+
647+
var cover = document.createElement('div');
648+
var frame = document.getElementById('demo-frame');
649+
650+
var frameHeight = area.offsetHeight;
651+
var mouseY = e.pageY;
652+
var positionTop = area.offsetTop;
653+
654+
area.style.opacity = '0.4';
655+
frame.style.pointerEvents = 'none';
656+
area.className += " resize";
657+
658+
cover.classList.add('demo-cover');
659+
document.body.appendChild(cover);
660+
661+
var move = function (evt) {
662+
663+
var mouseMoveY = evt.pageY;
664+
var dist = mouseMoveY - mouseY;
665+
var height = frameHeight - dist - 20;
666+
667+
if (height < 225 ) {
668+
return;
669+
}
670+
671+
area.style.height = height + 'px';
672+
area.style.top = positionTop + dist + 'px';
673+
674+
};
675+
676+
var up = function () {
677+
area.style.opacity = '1';
678+
frame.style.pointerEvents = 'auto';
679+
area.classList.remove('resize');
680+
cover.removeEventListener('mousemove', move);
681+
cover.removeEventListener('mouseup', up);
682+
cover.removeEventListener('selectstart', disableSelect);
683+
cover.remove();
684+
area.dataset.height = area.style.height;
685+
};
686+
687+
var disableSelect = function (evt) {
688+
evt.preventDefault();
689+
};
690+
691+
cover.addEventListener('mousemove', move);
692+
cover.addEventListener('mouseup', up);
693+
cover.addEventListener('selectstart', disableSelect);
694+
e.stopPropagation();
695+
696+
});
497697

498698
btn.onclick = function () {
499699
if (localStorage.demoArea == 'open') {

‎css/style.css‎

Lines changed: 21 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -617,33 +617,25 @@ td#copyCode div {
617617

618618
#demo-area {
619619
display: none;
620-
z-index: 99;
620+
z-index: 999;
621621
position: absolute;
622622
right: 30px;
623623
top: 125px;
624624
width: 400px;
625+
height: 400px;
625626
min-width: 225px;
626-
max-width: 70%;
627-
background: rgba(255, 255, 255, .8);
627+
min-height: 225px;
628+
background: rgba(255, 255, 255, 1);
628629
border-radius: 20px;
629630
border: 10px solid #ccc;
630631
transition: opacity .3s;
632+
cursor: move;
631633
}
632634

633635
#demo-area.show {
634636
display: block;
635637
}
636638

637-
#demo-resize-bar {
638-
height: calc(100% - 40px);
639-
width: 10px;
640-
background: #ccc;
641-
position: absolute;
642-
left: -10px;
643-
top: 20px;
644-
cursor: col-resize;
645-
}
646-
647639
#demo-area.resize {
648640
-webkit-user-select: none;
649641
-moz-user-select: none;
@@ -658,6 +650,7 @@ td#copyCode div {
658650
height: 100%;
659651
padding: 0 20px 20px;
660652
box-sizing: border-box;
653+
cursor: default;
661654
}
662655

663656
#demo-area .demo-area-content .close-btn {
@@ -1018,6 +1011,16 @@ td#copyCode div {
10181011
z-index: 2;
10191012
}
10201013

1014+
.demo-cover {
1015+
position: fixed;
1016+
top: 0;
1017+
bottom: 0;
1018+
left: 0;
1019+
right: 0;
1020+
opacity: 0;
1021+
z-index: 9999;
1022+
}
1023+
10211024
/* simulation area */
10221025

10231026
#simulator-area {
@@ -1029,10 +1032,12 @@ td#copyCode div {
10291032
width: 400px;
10301033
height: 400px;
10311034
min-height: 225px;
1035+
min-width: 225px;
10321036
background: rgba(255, 255, 255, 1);
10331037
border-radius: 20px;
10341038
border: 10px solid #ccc;
10351039
transition: opacity .3s;
1040+
cursor: move;
10361041
}
10371042

10381043
#simulator-area.init {
@@ -1043,8 +1048,8 @@ td#copyCode div {
10431048
#simulator-area.full {
10441049
max-width: none;
10451050
width: auto;
1046-
height: auto;
10471051
max-height: none;
1052+
height: auto;
10481053
top: 15px;
10491054
left: 15px;
10501055
bottom: 15px;
@@ -1061,6 +1066,7 @@ td#copyCode div {
10611066
height: 10px;
10621067
background-image: url(../media/resize-bar.png);
10631068
background-repeat: no-repeat;
1069+
z-index: 99;
10641070
}
10651071

10661072
.resize-bar-left {
@@ -1109,6 +1115,7 @@ td#copyCode div {
11091115
height: 100%;
11101116
padding: 15px;
11111117
box-sizing: border-box;
1118+
cursor: default;
11121119
}
11131120

11141121
#simulator-area .simulator-area-content .close-btn {
@@ -1117,7 +1124,6 @@ td#copyCode div {
11171124
top: 5px;
11181125
width: 22px;
11191126
height: 22px;
1120-
background: #fff;
11211127
background-image: url(../media/icons.png);
11221128
background-position: -82px 0px;
11231129
opacity: 0.4;

‎views/index.handlebars‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,10 @@
104104
</div>
105105
</div>
106106
<div id="demo-area">
107-
<div id="demo-resize-bar"></div>
107+
<div class="resize-area resize-bar-left"></div>
108+
<div class="resize-area resize-bar-right"></div>
109+
<div class="resize-area resize-bar-bottom"></div>
110+
<div class="resize-area resize-bar-top"></div>
108111
<div class="demo-area-content">
109112
<div class="close-btn"></div>
110113
<h4>{{demoAreaTitle}}</h4>

0 commit comments

Comments
 (0)