From f6313d44d983c292578ccc2c78123a7ad05badfc Mon Sep 17 00:00:00 2001
From: Kijin Sung <kijin@kijinsung.com>
Date: Wed, 14 May 2025 01:09:59 +0900
Subject: [PATCH] Use iframe instead of popup window to display editor
 components in mobile

---
 modules/editor/editor.view.php                | 13 +++++++++++-
 modules/editor/tpl/component_not_founded.html |  2 ++
 modules/editor/tpl/js/editor_common.js        | 20 ++++++++++++++++++-
 modules/editor/tpl/popup.html                 |  2 ++
 modules/editor/tpl/popup_iframe.blade.php     | 15 ++++++++++++++
 5 files changed, 50 insertions(+), 2 deletions(-)
 create mode 100644 modules/editor/tpl/popup_iframe.blade.php

diff --git a/modules/editor/editor.view.php b/modules/editor/editor.view.php
index 2acfb5220..6021a1870 100644
--- a/modules/editor/editor.view.php
+++ b/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())
diff --git a/modules/editor/tpl/component_not_founded.html b/modules/editor/tpl/component_not_founded.html
index 2ce7608e1..bbbb13df7 100644
--- a/modules/editor/tpl/component_not_founded.html
+++ b/modules/editor/tpl/component_not_founded.html
@@ -1,3 +1,5 @@
+<include target="popup_iframe.blade.php" />
+
 <script>
     alert("{$message}");
     window.close();
diff --git a/modules/editor/tpl/js/editor_common.js b/modules/editor/tpl/js/editor_common.js
index 6d65fc018..d7f90aae9 100644
--- a/modules/editor/tpl/js/editor_common.js
+++ b/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);
 }
 
 // 더블클릭 이벤트 발생시에 본문내에 포함된 컴포넌트를 찾는 함수
diff --git a/modules/editor/tpl/popup.html b/modules/editor/tpl/popup.html
index aa8c8f175..269c23b35 100644
--- a/modules/editor/tpl/popup.html
+++ b/modules/editor/tpl/popup.html
@@ -1,3 +1,5 @@
+<include target="popup_iframe.blade.php" />
+
 <div>
 {$popup_content|noescape}
 </div>
diff --git a/modules/editor/tpl/popup_iframe.blade.php b/modules/editor/tpl/popup_iframe.blade.php
new file mode 100644
index 000000000..cf0a400cc
--- /dev/null
+++ b/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