Skip to content

Commit 79d8a53

Browse files
shengyuanshengyuan
committed
Add the resize to the corners of demo area
1 parent 049f2a1 commit 79d8a53

2 files changed

Lines changed: 283 additions & 0 deletions

File tree

‎code.js‎

Lines changed: 279 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -451,6 +451,10 @@ Code.loadDemoArea = function () {
451451
var resizeRightBar = document.querySelector('#demo-area .resize-bar-right');
452452
var resizeBottomBar = document.querySelector('#demo-area .resize-bar-bottom');
453453
var resizeTopBar = document.querySelector('#demo-area .resize-bar-top');
454+
var resizeTopLeftBar = document.querySelector('#demo-area .resize-bar-top-left');
455+
var resizeTopRightBar = document.querySelector('#demo-area .resize-bar-top-right');
456+
var resizeBottomLeftBar = document.querySelector('#demo-area .resize-bar-bottom-left');
457+
var resizeBottomRightBar = document.querySelector('#demo-area .resize-bar-bottom-right');
454458
var simulatorArea = document.getElementById('simulator-area');
455459

456460
area.className = area.className.replace("show", "");
@@ -709,6 +713,281 @@ Code.loadDemoArea = function () {
709713

710714
});
711715

716+
resizeTopLeftBar.addEventListener('mousedown', function (e) {
717+
718+
var cover = document.createElement('div');
719+
var frame = document.getElementById('demo-frame');
720+
721+
var frameHeight = area.offsetHeight;
722+
var frameWidth = area.offsetWidth;
723+
var mouseX = e.pageX;
724+
var mouseY = e.pageY;
725+
var positionTop = area.offsetTop;
726+
727+
area.style.opacity = '0.4';
728+
frame.style.pointerEvents = 'none';
729+
simulatorArea.style.zIndex = '';
730+
area.style.zIndex = '9999';
731+
area.className += " resize";
732+
733+
cover.classList.add('demo-cover');
734+
document.body.appendChild(cover);
735+
736+
var move = function (evt) {
737+
738+
var mouseMoveX = evt.pageX;
739+
var mouseMoveY = evt.pageY;
740+
var distX = mouseMoveX - mouseX;
741+
var distY = mouseMoveY - mouseY;
742+
var height = frameHeight - distY - 20;
743+
var width = frameWidth - distX - 20;
744+
745+
if (height < 225 && width >= 225) {
746+
area.style.width = width + 'px';
747+
748+
return;
749+
}
750+
751+
if (height < 225 && width < 225) {
752+
return;
753+
}
754+
755+
area.style.width = width + 'px';
756+
area.style.height = height + 'px';
757+
area.style.top = positionTop + distY + 'px';
758+
759+
};
760+
761+
var up = function () {
762+
area.style.opacity = '1';
763+
frame.style.pointerEvents = 'auto';
764+
area.classList.remove('resize');
765+
cover.removeEventListener('mousemove', move);
766+
cover.removeEventListener('mouseup', up);
767+
cover.removeEventListener('selectstart', disableSelect);
768+
cover.remove();
769+
area.dataset.width = area.style.width;
770+
area.dataset.height = area.style.height;
771+
};
772+
773+
var disableSelect = function (evt) {
774+
evt.preventDefault();
775+
};
776+
777+
cover.addEventListener('mousemove', move);
778+
cover.addEventListener('mouseup', up);
779+
cover.addEventListener('selectstart', disableSelect);
780+
e.stopPropagation();
781+
782+
});
783+
784+
resizeTopRightBar.addEventListener('mousedown', function (e) {
785+
786+
var cover = document.createElement('div');
787+
var frame = document.getElementById('demo-frame');
788+
789+
var frameHeight = area.offsetHeight;
790+
var frameWidth = area.offsetWidth;
791+
var mouseX = e.pageX;
792+
var mouseY = e.pageY;
793+
var positionTop = area.offsetTop;
794+
var positionRight = document.body.offsetWidth - area.offsetLeft - frameWidth;
795+
796+
area.style.opacity = '0.4';
797+
frame.style.pointerEvents = 'none';
798+
simulatorArea.style.zIndex = '';
799+
area.style.zIndex = '9999';
800+
area.className += " resize";
801+
802+
cover.classList.add('demo-cover');
803+
document.body.appendChild(cover);
804+
805+
var move = function (evt) {
806+
807+
var mouseMoveX = evt.pageX;
808+
var mouseMoveY = evt.pageY;
809+
var distX = mouseMoveX - mouseX;
810+
var distY = mouseMoveY - mouseY;
811+
var height = frameHeight - distY - 20;
812+
var width = frameWidth + distX - 20;
813+
814+
if (width < 225 && height >= 225) {
815+
area.style.height = height + 'px';
816+
area.style.top = positionTop + distY + 'px';
817+
818+
return;
819+
}
820+
821+
if (height < 225 && width >= 225) {
822+
area.style.width = width + 'px';
823+
area.style.right = positionRight - distX + 'px';
824+
825+
return;
826+
}
827+
828+
if (height < 225 && width < 225) {
829+
return;
830+
}
831+
832+
area.style.width = width + 'px';
833+
area.style.right = positionRight - distX + 'px';
834+
835+
area.style.height = height + 'px';
836+
area.style.top = positionTop + distY + 'px';
837+
838+
};
839+
840+
var up = function () {
841+
area.style.opacity = '1';
842+
frame.style.pointerEvents = 'auto';
843+
area.classList.remove('resize');
844+
cover.removeEventListener('mousemove', move);
845+
cover.removeEventListener('mouseup', up);
846+
cover.removeEventListener('selectstart', disableSelect);
847+
cover.remove();
848+
area.dataset.width = area.style.width;
849+
area.dataset.height = area.style.height;
850+
};
851+
852+
var disableSelect = function (evt) {
853+
evt.preventDefault();
854+
};
855+
856+
cover.addEventListener('mousemove', move);
857+
cover.addEventListener('mouseup', up);
858+
cover.addEventListener('selectstart', disableSelect);
859+
e.stopPropagation();
860+
861+
});
862+
863+
resizeBottomLeftBar.addEventListener('mousedown', function (e) {
864+
865+
var cover = document.createElement('div');
866+
var frame = document.getElementById('demo-frame');
867+
868+
var frameHeight = area.offsetHeight;
869+
var frameWidth = area.offsetWidth;
870+
var mouseX = e.pageX;
871+
var mouseY = e.pageY;
872+
873+
area.style.opacity = '0.4';
874+
frame.style.pointerEvents = 'none';
875+
simulatorArea.style.zIndex = '';
876+
area.style.zIndex = '9999';
877+
area.className += " resize";
878+
879+
cover.classList.add('demo-cover');
880+
document.body.appendChild(cover);
881+
882+
var move = function (evt) {
883+
884+
var mouseMoveX = evt.pageX;
885+
var mouseMoveY = evt.pageY;
886+
var distX = mouseMoveX - mouseX;
887+
var distY = mouseMoveY - mouseY;
888+
var height = frameHeight + distY - 20;
889+
var width = frameWidth - distX - 20;
890+
891+
if (height < 225 && width < 225) {
892+
return;
893+
}
894+
895+
area.style.width = width + 'px';
896+
area.style.height = height + 'px';
897+
898+
};
899+
900+
var up = function () {
901+
area.style.opacity = '1';
902+
frame.style.pointerEvents = 'auto';
903+
area.classList.remove('resize');
904+
cover.removeEventListener('mousemove', move);
905+
cover.removeEventListener('mouseup', up);
906+
cover.removeEventListener('selectstart', disableSelect);
907+
cover.remove();
908+
area.dataset.width = area.style.width;
909+
area.dataset.height = area.style.height;
910+
};
911+
912+
var disableSelect = function (evt) {
913+
evt.preventDefault();
914+
};
915+
916+
cover.addEventListener('mousemove', move);
917+
cover.addEventListener('mouseup', up);
918+
cover.addEventListener('selectstart', disableSelect);
919+
e.stopPropagation();
920+
921+
});
922+
923+
resizeBottomRightBar.addEventListener('mousedown', function (e) {
924+
925+
var cover = document.createElement('div');
926+
var frame = document.getElementById('demo-frame');
927+
928+
var frameHeight = area.offsetHeight;
929+
var frameWidth = area.offsetWidth;
930+
var mouseX = e.pageX;
931+
var mouseY = e.pageY;
932+
var positionRight = document.body.offsetWidth - area.offsetLeft - frameWidth;
933+
934+
area.style.opacity = '0.4';
935+
frame.style.pointerEvents = 'none';
936+
simulatorArea.style.zIndex = '';
937+
area.style.zIndex = '9999';
938+
area.className += " resize";
939+
940+
cover.classList.add('demo-cover');
941+
document.body.appendChild(cover);
942+
943+
var move = function (evt) {
944+
945+
var mouseMoveX = evt.pageX;
946+
var mouseMoveY = evt.pageY;
947+
var distX = mouseMoveX - mouseX;
948+
var distY = mouseMoveY - mouseY;
949+
var height = frameHeight + distY - 20;
950+
var width = frameWidth + distX - 20;
951+
952+
if (width < 225 && height >= 225) {
953+
area.style.height = height + 'px';
954+
955+
return;
956+
}
957+
958+
if (height < 225 && width < 225) {
959+
return;
960+
}
961+
962+
area.style.width = width + 'px';
963+
area.style.height = height + 'px';
964+
area.style.right = positionRight - distX + 'px';
965+
966+
};
967+
968+
var up = function () {
969+
area.style.opacity = '1';
970+
frame.style.pointerEvents = 'auto';
971+
area.classList.remove('resize');
972+
cover.removeEventListener('mousemove', move);
973+
cover.removeEventListener('mouseup', up);
974+
cover.removeEventListener('selectstart', disableSelect);
975+
cover.remove();
976+
area.dataset.width = area.style.width;
977+
area.dataset.height = area.style.height;
978+
};
979+
980+
var disableSelect = function (evt) {
981+
evt.preventDefault();
982+
};
983+
984+
cover.addEventListener('mousemove', move);
985+
cover.addEventListener('mouseup', up);
986+
cover.addEventListener('selectstart', disableSelect);
987+
e.stopPropagation();
988+
989+
});
990+
712991
btn.onclick = function () {
713992
if (localStorage.demoArea == 'open') {
714993
area.className = area.className.replace("show", "");

‎views/index.handlebars‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,10 @@
108108
<div class="resize-area resize-bar-right"></div>
109109
<div class="resize-area resize-bar-bottom"></div>
110110
<div class="resize-area resize-bar-top"></div>
111+
<div class="resize-area resize-bar-top-left"></div>
112+
<div class="resize-area resize-bar-top-right"></div>
113+
<div class="resize-area resize-bar-bottom-left"></div>
114+
<div class="resize-area resize-bar-bottom-right"></div>
111115
<div class="demo-area-content">
112116
<div class="close-btn"></div>
113117
<h4>{{demoAreaTitle}}</h4>

0 commit comments

Comments
 (0)