-
Notifications
You must be signed in to change notification settings - Fork 0
/
jquery.rumiPopup.js
187 lines (153 loc) · 6.27 KB
/
jquery.rumiPopup.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
/*
* 명 칭 : rumiPopup (한글명칭:루미팝업)
* 제 작 일 : 2019년 01월 31일
* 제 작 자 : 조정영(루미집사)
* 이 메 일 : [email protected]
* 홈페이지 : https://www.suu.kr
* 라이센스 : FREE
* 자유롭게 수정 및 배포 가능합니다.
**/
document.addEventListener("DOMContentLoaded", function(){
rumiPopup.start();
});
var rumiPopup = (function(){
var arr = {
width : 800,
height : 600,
fadeIn : true,
fadeinTime : 500,
url : "#",
title : "rumiPopup",
buttonView : true,
reloadBtn : true,
button : function() {},
open : function() {},
close : function() {}
}
var el = {};
var currentScroll=0;
var top_height = '';
this.init = function() {
// 레이어팝업창으로 사용할 요소 생성. (레이어 팝업후 부모페이지 클릭 방지하기 위해 div#rumipopup_sub를 화면크기로 생성한다.)
var divTag = "<div id='rumipopup_sub'></div>"; // 배경클릭 방지용 레이어
divTag += "<div id='rumipopup' class='rumi_layer pop_layer' style='display:none;'>"; // 팝업레이어
divTag += "<div class='rumiTitle'></div>"; // 상단 문서 타이틀
divTag += "<span class='rumiClose' onclick='rumiPopup.close();'><i class='fa fa-times' aria-hidden='true'></i></span>"; // 창닫기 "X" 버튼
divTag += "<iframe name='rumiIframe' id='rumiIframe' class='rumiIframe' src='' width='100%'></iframe>"; // 문서 로드되는 iframe
divTag += "<div class='rumiButton'></div>"; // 하단 사용자 버튼
divTag += "<span class='rumiReload'><button type='button' class='rumi_btn' onclick='rumiPopup.iframeReload();'><i class='fa fa-refresh' aria-hidden='true'></i> 새로고침</button></span>"; // 새로고침 버튼
divTag += "</div>";
$("body").append(divTag);
// 셀렉터 - 플러그인에서 사용될 전역변수 (고정값.)
el.Pop_sub = $("#rumipopup_sub");
el.Popup = $("#rumipopup");
el.Title = $("#rumipopup > .rumiTitle");
el.Iframe = $("#rumiIframe");
el.iframe = $(".rumiIframe");
el.Button = $("div.rumiButton");
el.noFrame = $("#rumipopup .noIframe");
el.FName = "rumiIframe";
}
var popup = function(option) {
if(option && typeof option == "object") {
arr = $.extend(arr, option);
};
if(arr.width <= 100) {
var W = arr.width+"%";
var margin_left = (parseInt(arr.width/2)*-1)+"%";
} else {
var W = arr.width+"px";
var margin_left = (parseInt(arr.width/2)*-1)+"px";
}
if(arr.height <= 100) {
var H = arr.height+"%";
var window_H = parseInt(window.innerHeight);
var margin_top = (parseInt((window_H * (arr.height/100))/2) * -1);
} else {
var H = arr.height+"px";
var margin_top = (parseInt(arr.height/2)*-1)+"px";
}
if(g5_is_mobile) {
margin_left = "0px";
margin_top = "0px";
el.Popup.css({"left":"0px", "top":"0px"});
H = window.innerHeight+"px";
}
el.Popup.css({ "width" : W, "height" : H, "margin-left" : margin_left, "margin-top" : margin_top });
// 외부문서를 불러올경우 항상 Iframe 방식을 사용.
if(arr.iframe==true || arr.url) {
el.Iframe.attr("src",arr.url);
} else {
el.Iframe.hide();
el.noIframe.show();
}
el.Title.html("<i class='fa fa-folder-open' aria-hidden='true'></i> "+arr.title); //상단 타이틀
el.Button.empty(); // 버튼 초기화
el.Pop_sub.show(); // 팝업이후 부모페이지 클릭 방지 레이어.
popup_kind(arr.fadeIn); // 팝업 모션(fadeIn 또는 즉시.)
if(arr.print==true) {
print();
}
if(arr.button && arr.buttonView==true) {
buttons(arr.button);
}
if(arr.open) {
arr.open();
}
if(arr.reloadBtn==false) {
document.querySelector('.rumiReload').style.display = 'none';
} else {
document.querySelector('.rumiReload').style.display = 'block';
}
if(arr.buttonView==false) {
document.querySelector('.rumiButton').style.display = 'none';
document.querySelector('.rumiIframe').style.padding = '0px 0px 60px 20px';
} else {
document.querySelector('.rumiButton').style.display = 'block';
}
if(g5_is_mobile) {
document.querySelector('.rumiIframe').style.padding = '0px 5px 90px 10px';
}
}
var popup_kind = function(v) {
top_height = $(document).scrollTop();
$('html').css({'height' : '100%', 'left' : '0px', 'top' : - top_height+"px"});
$('html').addClass("rumi_html_fixed"); //스크롤 락
if(v==true) {
setTimeout(function(){
el.Popup.fadeIn(arr.fadeinTime);
},100);
} else {
setTimeout(function(){
el.Popup.show();
},100);
};
};
var close = function(a,b) {
arr.close();
$('html').css({'height' : '', 'left' : '', 'top' : ''});
$('html').removeClass("rumi_html_fixed"); //스크롤 락 해제
$(window).scrollTop(top_height);
$("#"+el.FName).attr("src",""); // 프레임 src 초기화.
el.Pop_sub.hide();
el.Popup.hide();
}
var iframeReload = function() {
document.getElementById(el.FName).contentDocument.location.reload(true);
}
var print = function(e) {
}
// 레이어 팝업 하단에 사용자 버튼 생성.
var buttons = function(btn) {
$.each(btn, function(index, item){
el.Button.append("<button type='button' class='rumi_btn'>"+index+"</button>");
$(".rumiButton button:contains('"+index+"')").click(item);
});
}
return {
popup : popup,
close : close,
iframeReload : iframeReload,
start : init
}
}());