[javascript] 다중팝업 제어

이번 내용은 저번에 다뤘던 팝업 제어 하는 내용과 비슷하긴 합니다 

하지만 저번엔 상세한 내용은 아니었습니다 주제에 대한 상세한 코드도 아니었고요 ㅎㅎ

 

이번엔 제가 현업에서 시간이 조금 나서 저번에 했던 팝업이 여러개가 있을 때 포커스 이동에 대한 내용이기도 합니다 

 

포커스에 대한 자세한 내용은 검색해보시면 아시겠지만 원활하진 않습니다

 

main 화면으로 focus를 보냈다가 다시 팝업으로 focus 이런 현상이 쉽지가 않게 되었습니다 

 

왜냐하면 팝업을 호출 한 parent window에서 컨트롤이 가능하지만 호출당한 팝업이 main 으로 focus를 했을 땐

크롬 정책으로 인해 동작하질 않더라고요 

 

며칠 찾아보니 결론적으론 안된다에 도착했죠 ㅜ 

 

그래서 구조 자체를 변경하고 다른 방법을 생각해 낸 것이 

 

common.js에서 팝업 호출 구문을 만들고 어느 팝업에서도 common.js에 있는 공통 팝업 오픈 함수를 만들어서 

일관적인 코드로 변경 후 그 common.js에 팝업에 필요한 클래스를 만들고 그 데이터를 가지고 최소화 원형복원

할 수 있는 코드를 짜봤습니다 

 

제가 한 방법이 결코 정답은 아닙니다 그냥 제가 처한 상황은 메인화면 위에 팝업이 많게는 세 개까지 표출되었다가 

어떠한 버튼을 클릭하면 메인화면을 보여주고 메인화면에서 클릭 앤 드래그 이벤트 발생하면 원래 표출되었던 

팝업의 순서 그대로 표출되어야 하는 그런 상황입니다 

 

이러한 상황과 비슷한 이슈를 겪고 계시는 분들이 있다면 도움이 되실까 아니면 조금 참고정도라도 하실 수 있지 않을까

라는 생각에 작성해보겠습니다 ㅎㅎ

 

먼저 저는 common.js에 팝업 제어에 필요한 객체를 하나 만들었습니다 

 

//javascript 맞습니다 

class PopElmt {

	constructor (win) {
    	
        this.pWin = win;
        this.pName = win.name;
        this.pLocation = win.location;
        this.pOuterHeight = win.outerHeight;
        this.pOuterWidth = win.outerWidth;
        this.pScreenLeft = win.screenLeft;
        this.pScreenTop = win.screenTop;

	}
    
}JAVASCRIPT

객체를 생성할 때 팝업에 필요한 내용들을 생성자로 받아 저장합니다

 

//팝업 객체를 저장할 배열
const g_PopListArr = new Array();

PopController = {

	//팝업 추가
	addPopList : function (win) {
    
    	g_PopListArr.push(new PopElmt(win));
        
        win.addEventListener('beforeunload', (e) => {
        	
           //팝업이 닫힐때 배열에서 삭제
           PopController.delPopList(win.name);
        
        });
        
    },

	//팝업 최소화
    minPopList : function () {
    
    	g_PopListArr.foEach(function (win, index) {
        
        	win.pWin.resizeTo(1,1);
            win.pWin.moveTo(0,0);
        });
    },
    
    //팝업 원형복구
    restorationPopList : function () {

		g_PopListArr.foEach(function (win, index) {
        	win.pWin.moveTo(win.pScreenLeft, win.pScreenTop);
            win.pWin.resizeTo(win.pOuterWidth, win.pOuterHeight);
            win.pWin.focus();
        });

	},
    
    //팝업 객체 삭제 
    delPopList : function (pName) {
    
    	g_PopListArr.forEach(function (win, index){
        	if (win.pName == pName) {
            	g_PopListArr.splice(index, 1);
            }
        });
    }

}JAVASCRIPT

 

이처럼 코드를 짜봤습니다 

이게 맞을지 아닐진 모르지만 도움 되시는 분들이 있으셨으면 하는 마음으로 포스팅하고요 ㅎㅎ

 

생성할 때는 window.open 함수로 팝업을 표출할 때 return을 받아 생성합니다 ㅎㅎ 

 

//이방식도 가능하구 
PopController.addPopList(window.open( 데이터 ));


//변수에 받아서도 가능합니다
const pop1 = window.open(데이터);
PopController.addPopList(pop1);JAVASCRIPT

 addPopList 함수를 보시면 객체를 사용해서 데이터를 저장하게 됩니다 이는 우리가 일부러 new 키워드로 객체를 

생성해서 전역번수인 PopListArr에 몇 번째에 데이터를 넣어야지~ 이 작업을 안 하도록 하기 위해서입니다 ㅎㅎ

 

그리고 이 코드를 작성하면서 가장 고민됐던 게 창이 닫힐 때를 감지 후 배열에서 해당 객체를 지워야 하는데 

그럼 각 팝업마다 다 beforeunload나 onunload를 작성해놔야 하나 싶었는데 그러면 너무 효율이 안 나온다 이럴 거면 

팝업마다 다 함수를 짜는 꼴이나 다름없다 싶어서 

addPopList 함수에서 받아온 window를 이용해서 이벤트 리스너에 추가시켜 줬습니다 ㅎㅎ 

 

근데 중요한 게 팝업에 이미 onunload가 작성되어있으면 이벤트 리스너에 추가시켜도 잘 동작하지 않습니다 

제가 직접 경험해 보면서 진행했습니다 ㅎㅎ 

 

일단 1차적인 기능은 여기서 마쳤습니다 지금도 테스트해보며 수정 보완하는 중인데 

 

최종적으로 제대로 동작하게 되면 이 글을 더 수정하여 보완하도록 하겠습니다

 

어떻게 보면 좀 하찮은 코드일지 몰라도 혹여 필요하신 분이 계실까 하여 업로드하는 것이니 너무 심한 비방보다는 

이런 방식보다 이 방식이 더 좋아요 이런 건 너무너무 환영합니다 

서로 발전하는 그런 개발자가 되도록 합시다 감사합니다 ~