Use iframe instead of popup window to display editor components in mobile

modules/editor/editor.view.php

@@ -55,12 +55,23 @@ class EditorView extends Editor
 	{
 		// add a css file
 		Context::loadFile($this->module_path."tpl/css/editor.css", true);
+
 		// List variables
 		$editor_sequence = Context::get('editor_sequence');
-		$component = Context::get('component');
+		$iframe_sequence = Context::get('iframe_sequence');
+		if (empty($editor_sequence) || !ctype_alnum($editor_sequence))
+		{
+			return new BaseObject(-1, 'msg_invalid_request');
+		}
+		if (isset($iframe_sequence) && !ctype_alnum($iframe_sequence))
+		{
+			return new BaseObject(-1, 'msg_invalid_request');
+		}
 
+		$component = Context::get('component');
 		$site_module_info = Context::get('site_module_info');
 		$site_srl = (int)$site_module_info->site_srl;
+
 		// Get compoenet object
 		$oComponent = EditorModel::getComponentObject($component, $editor_sequence, $site_srl);
 		if(!$oComponent->toBool())

modules/editor/tpl/component_not_founded.html

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

modules/editor/tpl/js/editor_common.js

@@ -210,7 +210,25 @@ function openComponent(component_name, editor_sequence, manual_url) {
 	if(typeof(manual_url)!="undefined" && manual_url) popup_url += "&manual_url="+escape(manual_url);
 	if(typeof(current_mid)!="undefined" && current_mid) popup_url += "&mid="+escape(current_mid);
 
-	popopen(popup_url, 'editorComponent');
+	if (navigator.userAgent.match(/mobile/i)) {
+		openComponentInIframe(popup_url);
+	} 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);
 }
 
 // 더블클릭 이벤트 발생시에 본문내에 포함된 컴포넌트를 찾는 함수

modules/editor/tpl/popup.html

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

modules/editor/tpl/popup_iframe.blade.php

@@ -0,0 +1,15 @@
+@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