Consolidate popup/iframe handling code in common areas

common/js/common.js

@@ -737,6 +737,23 @@ function zbxe_folder_close(id) {
 	jQuery("#folder_"+id).hide();
 }
 
+/**
+ * 팝업창 대신 전체 화면 iframe을 띄우는 함수
+ */
+function openFullScreenIframe(url, target) {
+	const iframe = document.createElement('iframe');
+	const iframe_sequence = String(Date.now()) + Math.round(Math.random() * 1000000);
+	iframe.setAttribute('id', '_rx_iframe_' + iframe_sequence);
+	iframe.setAttribute('name', target || ('_rx_iframe_' + iframe_sequence))
+	iframe.setAttribute('src', url + '&iframe_sequence=' + iframe_sequence);
+	iframe.setAttribute('width', '100%');
+	iframe.setAttribute('height', '100%');
+	iframe.setAttribute('frameborder', '0');
+	iframe.setAttribute('scrolling', 'no');
+	iframe.setAttribute('style', 'position:fixed; top:0; left:0; width:100%; height:100%; z-index:999999999; background-color: #fff; overflow-y:auto');
+	$(document.body).append(iframe);
+}
+
 /**
  * @brief 팝업의 경우 내용에 맞춰 현 윈도우의 크기를 조절해줌
  * 팝업의 내용에 맞게 크기를 늘리는 것은... 쉽게 되지는 않음.. ㅡ.ㅜ

common/tpl/popup_layout.html

@@ -1,12 +1,33 @@
 @version(2)
 @load('../../modules/admin/tpl/css/admin.bootstrap.css')
 @load('../../modules/admin/tpl/css/admin.css')
+
 <div class="x popup">
 	{!! $content !!}
 </div>
+
+@if (isset($iframe_sequence) && preg_match('/^\w+$/', $iframe_sequence))
+	<script>
+		const iframe_sequence = '{{ $iframe_sequence }}';
+		window.opener = window.parent;
+		window.close = function() {
+			const iframe = parent.document.getElementById('_rx_iframe_' + iframe_sequence);
+			if (iframe) {
+				iframe.remove();
+			}
+		};
+	</script>
+	<style>
+		.x.popup { width: 100vw; height: 100vh; }
+		.x.popup > div { width: 100vw; height: 100vh; display: flex; flex-direction: column; }
+		.x_modal-header { flex: 0 0 auto; }
+		.x_modal-body { flex: 1; overflow: scroll; }
+	</style>
+@else
 	<script>
 		jQuery(function() {
 			setTimeout(setFixedPopupSize, 500);
 		});
 		var _isPoped = true;
 	</script>
+@endif

modules/editor/tpl/component_not_founded.html

@@ -1,5 +1,3 @@
-<include target="popup_iframe.blade.php" />
-
 <script>
     alert("{$message}");
     window.close();

modules/editor/tpl/js/editor_common.js

@@ -211,26 +211,12 @@ function openComponent(component_name, editor_sequence, manual_url) {
 	if(typeof(current_mid)!="undefined" && current_mid) popup_url += "&mid="+escape(current_mid);
 
 	if (navigator.userAgent.match(/mobile/i)) {
-		openComponentInIframe(popup_url);
+		openFullScreenIframe(popup_url, 'editorComponent');
 	} else {
 		popopen(popup_url, 'editorComponent');
 	}
 }
 
-function openComponentInIframe(popup_url) {
-	var iframe_sequence = String(Date.now()) + Math.round(Math.random() * 1000000);
-	var iframe = document.createElement('iframe');
-	popup_url += '&iframe_sequence=' + iframe_sequence;
-	iframe.setAttribute('id', 'editor_iframe_' + iframe_sequence);
-	iframe.setAttribute('src', popup_url);
-	iframe.setAttribute('width', '100%');
-	iframe.setAttribute('height', '100%');
-	iframe.setAttribute('frameborder', '0');
-	iframe.setAttribute('scrolling', 'no');
-	iframe.setAttribute('style', 'position:fixed; top:0; left:0; width:100%; height:100%; z-index:999999999; background-color: #fff; overflow-y:auto');
-	$(document.body).append(iframe);
-}
-
 // 더블클릭 이벤트 발생시에 본문내에 포함된 컴포넌트를 찾는 함수
 var editorPrevNode = null;
 function editorSearchComponent(evt) {
@@ -256,7 +242,12 @@ function editorSearchComponent(evt) {
 		editorPrevNode = obj;
 
 		if(editorMode[editor_sequence]=='html') return;
-		popopen(request_uri+"?module=widget&act=dispWidgetGenerateCodeInPage&selected_widget="+widget+"&module_srl="+editor_sequence,'GenerateCodeInPage');
+		var popup_url = request_uri+"?module=widget&act=dispWidgetGenerateCodeInPage&selected_widget="+widget+"&module_srl="+editor_sequence
+		if (navigator.userAgent.match(/mobile/i)) {
+			openFullScreenIframe(popup_url, 'GenerateCodeInPage');
+		} else {
+			popopen(popup_url, 'GenerateCodeInPage');
+		}
 		return;
 	}
 

modules/editor/tpl/popup.html

@@ -1,5 +1,3 @@
-<include target="popup_iframe.blade.php" />
-
 <div>
 {$popup_content|noescape}
 </div>

modules/editor/tpl/popup_iframe.blade.php

@@ -1,15 +0,0 @@
-@if (isset($iframe_sequence) && !empty($iframe_sequence))
-<script>
-	const iframe_sequence = '{{ $iframe_sequence }}';
-	window.opener = window.parent;
-	window.close = function() {
-		parent.document.getElementById('editor_iframe_' + iframe_sequence).remove();
-	};
-</script>
-<style>
-	.x.popup { width: 100vw; height: 100vh; }
-	.x.popup > div { width: 100vw; height: 100vh; display: flex; flex-direction: column; }
-	.x_modal-header { flex: 0 0 auto; }
-	.x_modal-body { flex: 1; overflow: scroll; }
-</style>
-@endif