estreui 1.2.5 → 1.2.6

package/README.md

@@ -125,9 +125,11 @@ EstreUI pages have a distinct lifecycle, similar to Android Activities:
 1.  **onBring**: Page is being prepared. Since the Active Struct hasn't been called yet, this is a good place for element creation tasks involving handles.
 2.  **onOpen**: Page is opening (transition start). Called only once.
 3.  **onShow**: Page is fully visible.
-4.  **onHide**: Page is hidden (covered by another page or closed).
-5.  **onClose**: Page is closed. Called only once.
-6.  **onRelease**: Page resources are released.
+4.  **onFocus**: Page takes active focus (after `onShow`, and on window/tab return). Second arg `isFirstFocus` is true only on the first focus of the instance. Return `true` to opt out of the default in-page autoFocus.
+5.  **onBlur**: Page loses active focus (before `onHide`, and on window/tab leave). `handle.isClosing` indicates the final blur along a close path.
+6.  **onHide**: Page is hidden (covered by another page or closed).
+7.  **onClose**: Page is closed. Called only once.
+8.  **onRelease**: Page resources are released.
 
 *   **onBack**: Called when back navigation is triggered. Return `true` to cancel the default action.
 *   **onReload**: Called when page reload is triggered. Return `true` to cancel the default action (which is closing and reopening the page).
@@ -394,9 +396,11 @@ EstreUI 페이지는 Android Activity와 유사한 뚜렷한 라이프사이클
 1.  **onBring**: 페이지가 준비되는 중입니다. Active struct가 호출되기 이전이므로 각종 handle 등을 포함하는 element 생성 작업을 할 수 있습니다.
 2.  **onOpen**: 페이지가 열리는 중입니다 (전환 시작). 1회만 호출됩니다.
 3.  **onShow**: 페이지가 완전히 보입니다.
-4.  **onHide**: 페이지가 숨겨졌습니다 (다른 페이지에 가려지거나 닫힘).
-5.  **onClose**: 페이지가 닫혔습니다. 1회만 호출됩니다.
-6.  **onRelease**: 페이지 리소스가 해제됩니다.
+4.  **onFocus**: 페이지가 활성 포커스를 받습니다 (`onShow` 이후, 그리고 창/탭 복귀 시). 두 번째 인자 `isFirstFocus` 는 이 인스턴스의 최초 포커스일 때만 `true`. `true` 를 반환하면 기본 autoFocus(페이지 내 DOM 포커스 이동)를 스킵합니다.
+5.  **onBlur**: 페이지가 포커스를 잃습니다 (`onHide` 직전, 그리고 창/탭 이탈 시). 닫힘 경로상 최종 blur 여부는 `handle.isClosing` 으로 식별합니다.
+6.  **onHide**: 페이지가 숨겨졌습니다 (다른 페이지에 가려지거나 닫힘).
+7.  **onClose**: 페이지가 닫혔습니다. 1회만 호출됩니다.
+8.  **onRelease**: 페이지 리소스가 해제됩니다.
 
 *   **onBack**: Back navigation이 호출될 때 실행되며, true를 반환할 경우 기본 작동이 취소됩니다.
 *   **onReload**: 페이지를 새로고침하려고 할 때 호출됩니다. true를 반환할 경우 기본 작동이 취소됩니다. 기본 작동은 해당 페이지를 닫은 후 다시 열어주는 것입니다.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "estreui",
-  "version": "1.2.5",
+  "version": "1.2.6",
   "description": "EstreUI Core Library - A comprehensive UI framework for web applications",
   "main": "scripts/estreUi.js",
   "files": [

package/scripts/estreUi-main.js

@@ -387,6 +387,27 @@ const estreUi = {
                 this.onBlur();
             });
 
+            // C (roadmap #006) — visibilitychange routes to onFocus/onBlur.
+            // More reliable on mobile browsers than window focus/blur, especially
+            // on Android WebView where native focus changes may not surface as JS events.
+            // Idempotent via the pageHandle.isFocused guard, so duplication with
+            // window focus/blur is harmless.
+            document.addEventListener("visibilitychange", () => {
+                if (window.isDebug) console.log(`[visibilitychange] state=${document.visibilityState} hasFocus=${document.hasFocus()}`);
+                if (document.visibilityState === "visible") this.onFocus();
+                else this.onBlur();
+            });
+
+            // A (roadmap #006) — track lastFocusedElement on the topmost showing handle.
+            // focusin bubbles (unlike blur), so a single document-level capture covers
+            // every page. Used by phase B's autoFocus to restore the prior focus point.
+            document.addEventListener("focusin", (e) => {
+                const topHandle = this.showingTopArticle ?? this.mainCurrentOnTop;
+                if (topHandle != null && topHandle.host?.contains(e.target)) {
+                    topHandle.lastFocusedElement = e.target;
+                }
+            }, true);
+
             if (setOnReady) this.checkOnReady();
         });
     },
@@ -1575,12 +1596,15 @@ const estreUi = {
 
 
     async onFocus() {
-        // <= to do implement
-        // this.focus();
+        const top = this.showingTopArticle ?? this.mainCurrentOnTop;
+        if (window.isDebug) console.log(`[estreUi.onFocus] visibility=${document.visibilityState} hasFocus=${document.hasFocus()} top=${top?.pid ?? "(none)"}`);
+        top?.focus();
     },
-    
+
     async onBlur() {
-        // <= to do implement
+        const top = this.showingTopArticle ?? this.mainCurrentOnTop;
+        if (window.isDebug) console.log(`[estreUi.onBlur] visibility=${document.visibilityState} hasFocus=${document.hasFocus()} top=${top?.pid ?? "(none)"}`);
+        await top?.blur();
     },
 
 

package/scripts/estreUi-pageManager.js

@@ -521,6 +521,48 @@ class EstreUiPageManager {
             });
         });
     }
+
+    /**
+     * Default auto-focus policy for a newly-focused page handle.
+     * Priority:
+     *   1. On repeat focus, restore `handle.lastFocusedElement` if still in the DOM.
+     *   2. First `[data-autofocus]` element inside the host.
+     *   3. First tab-reachable focusable element inside the host.
+     *   4. Otherwise no-op.
+     * Invoked from `pageHandle.onFocus()` when `handler.onFocus` does not return true.
+     * Projects can override on an `EstreUiCustomPageManager` subclass if a different policy is needed.
+     * @param {EstrePageHandle} handle - The page handle receiving focus.
+     * @param {boolean} isFirstFocus - True on the first focus after onOpen; false on subsequent focuses.
+     * @returns {boolean} Whether a focus() call succeeded.
+     */
+    autoFocus(handle, isFirstFocus) {
+        const host = handle?.host;
+        if (host == null) return false;
+
+        if (!isFirstFocus) {
+            const last = handle.lastFocusedElement;
+            if (last != null && host.contains(last) && document.body.contains(last)) {
+                last.focus();
+                if (document.activeElement === last) return true;
+            }
+        }
+
+        const markedTarget = host.querySelector("[data-autofocus]");
+        if (markedTarget != null && !markedTarget.hasAttribute("disabled") && !markedTarget.hidden) {
+            markedTarget.focus();
+            if (document.activeElement === markedTarget) return true;
+        }
+
+        const candidates = host.querySelectorAll(
+            'input:not([disabled]),textarea:not([disabled]),select:not([disabled]),button:not([disabled]),[tabindex]:not([tabindex="-1"])'
+        );
+        for (const el of candidates) {
+            if (el.hidden) continue;
+            el.focus();
+            if (document.activeElement === el) return true;
+        }
+        return false;
+    }
 }
 
 const pageManager = new EstreUiPageManager();

package/scripts/estreUi-pageModel.js

@@ -99,6 +99,8 @@ class EstrePageHandle {
     get isShowing() { return this.isOpened && this.#isShowing; }
     #isFocused = false;
     get isFocused() { return this.isShowing && this.#isFocused; }
+    #everFocused = false;
+    get everFocused() { return this.#everFocused; }
 
     #isHiding = false;
     get isHiding() { return this.#isHiding; }
@@ -123,6 +125,8 @@ class EstrePageHandle {
     #isProcessing = f;
     get isProcessing() { return this.#isProcessing; }
 
+    lastFocusedElement = null;
+
     get mainArticle() { return this; }
 
 
@@ -381,7 +385,9 @@ class EstrePageHandle {
             const task = this.hide();
             return postAsyncQueue(async _ => {
                 await task;
-                return await this.onClose(isTermination, isOnRelease);
+                const result = await this.onClose(isTermination, isOnRelease);
+                this.#isClosing = false;
+                return result;
             });
         } else return false;
     }
@@ -416,10 +422,18 @@ class EstrePageHandle {
 
     onFocus() {
         if (!this.isFocused) {
+            const isFirstFocus = !this.#everFocused;
             if (window.isDebug) console.log("[onFocus] " + this.sectionBound + " " + this.hostType + " " + this.pid);//, this.host);
             this.#isFocused = true;
-            if (this.handler?.onFocus != null) this.handler.onFocus(this);
+            this.#everFocused = true;
+            const handled = this.handler?.onFocus?.(this, isFirstFocus);
             if (this.intent?.onFocus != null) for (var item of this.intent.onFocus) if (item.from == this.hostType && !item.disabled) this.processAction(item);
+            if (handled === true) {
+                // Snapshot activeElement so a later refocus (e.g. background→foreground)
+                // can restore whatever the handler focused, even if focusin didn't record it.
+                const ae = document.activeElement;
+                if (ae != null && ae !== document.body && this.host?.contains(ae)) this.lastFocusedElement = ae;
+            } else pageManager.autoFocus?.(this, isFirstFocus);
             return true;
         } else return false;
     }
@@ -451,7 +465,7 @@ class EstrePageHandle {
             this.#isFocused = false;
             if (window.isDebug) console.log("[onBlur] " + this.sectionBound + " " + this.hostType + " " + this.pid);//, this.host);
             if (this.intent?.onBlur != null) for (var item of this.intent.onBlur) if (item.from == this.hostType && !item.disabled) await this.processAction(item);
-            if (this.handler?.onBlur != null) await this.handler.onBlur(this);
+            await this.handler?.onBlur?.(this, this.isClosing);
             return true;
         } else return false;
     }
@@ -474,6 +488,7 @@ class EstrePageHandle {
                     postQueue(_ => pageManager.bringPage(pid));
                 }
             }
+            this.#isHiding = false;
             return true;
         } else return false;
     }
@@ -481,6 +496,8 @@ class EstrePageHandle {
     async onClose(isTermination = false, isOnRelease = false) {
         if (this.isOpened && (isOnRelease || !this.isStatic)) {
             this.#isOpened = false;
+            this.#everFocused = false;
+            this.lastFocusedElement = null;
             if (window.isDebug) console.log("[onClose] " + this.sectionBound + " " + this.hostType + " " + this.pid);//, this.host);
             if (this.intent?.onClose != null) for (var item of this.intent.onClose) if (item.from == this.hostType && !item.disabled) await this.processAction(item);
             if (this.handler?.onClose != null) await this.handler.onClose(this);
@@ -2975,6 +2992,7 @@ class EstreAlertDialogPageHandler extends EstreDialogPageHandler {
 
     onFocus(handle) {
         this.$confirm.focus();
+        return true;
     }
 }
 
@@ -3022,6 +3040,7 @@ class EstreConfirmDialogPageHandler extends EstreDialogPageHandler {
 
     onFocus(handle) {
         this.$negative.focus();
+        return true;
     }
 }
 
@@ -3081,6 +3100,7 @@ class EstrePromptDialogPageHandler extends EstreDialogPageHandler {
 
     onFocus(handle) {
         this.$input.focus();
+        return true;
     }
 }
 
@@ -3110,6 +3130,7 @@ class EstreOptionDialogPageHandler extends EstreDialogPageHandler {
 
     onFocus(handle) {
         this.$optionItems[0]?.focus();
+        return true;
     }
 }
 
@@ -3213,6 +3234,7 @@ class EstreSelectionDialogPageHandler extends EstreDialogPageHandler {
 
     onFocus(handle) {
         this.$confirm.focus();
+        return true;
     }
 
     checkValidSelectAction(handle, handler, index, value, checked) {
@@ -3291,6 +3313,7 @@ class EstreDialsDialogPageHandler extends EstreDialogPageHandler {
 
     onFocus(handle) {
         this.$confirm.focus();
+        return true;
     }
 
     onClose(handle) {

package/serviceWorker.js

@@ -1,4 +1,4 @@
-const INSTALLATION_VERSION_NAME = "1.2.4-r20260418";
+const INSTALLATION_VERSION_NAME = "1.2.6-r20260422";
 // ^^ Use for check new update "Native application(webview) version(or Android/iOS version combo) - PWA release version"
 // ex) "1.0.1/1.0.0-r20251101k"
 
@@ -21,7 +21,7 @@ const INSTALLATION_FILE_LIST = [
 
 
 // Common files cache - Be changes some time but, well not changed very often
-const CACHE_NAME_COMMON_FILES = "common-files-cache-v1-20260418";
+const CACHE_NAME_COMMON_FILES = "common-files-cache-v1-20260422";
 
 const COMMON_FILES_TO_CACHE = [
     "./",