メッセージボックスを一捻り

スクロールするページでcm.MsgBoxを表示した時、ヘッダやフッタのボタンを基準にcm.MsgBallonを表示した時に「あ”」ってなったので、位置固定フラグを追加します

/Src/cm.ts

namespace cm{

    ....

    /*
     * メッセージバルーン
     */
    export class MsgBallon {
        onClosed(result: boolean) { ; };
        constructor(message: string, positionTo: any, positionFixed: boolean, hasCancel?: boolean) {
            let scope = this;

            let content = "";
            content += "<div";
            content += " data-role='popup'";
            content += " data-history='false'";
            content += " data-overlay-theme='a'";
            content += ">";

            content += " <div role='main' class='ui-content'>";
            content += "  <p>" + message + "</p>";
            content += " </div>";

            content += " <div data-role='footer' style='text-align:right;padding:0.3em;'>";
            content += "  <a href='#' class='ui-btn ui-btn-inline ui-btn-active' cmd='apply'>OK</a>";
            if (hasCancel) {
                content += "  <a href='#' class='ui-btn ui-btn-inline' cmd='cancel'>キャンセル</a>";
            }
            content += " </div>";
            content += "</div>";

            // 作成
            let box = $(content)
                .appendTo(cm.getActivePage())
                .enhanceWithin()
                .popup();

            // ボタン押下
            let result = false;
            box.find(".ui-btn").off("click").on("click", function (event: Event) {
                let cmd = $(this).attr("cmd");
                switch (cmd) {
                    case "apply":
                        result = true;
                        box.popup("close");
                        break;

                    case "cancel":
                        box.popup("close");
                        break;
                }
            });

            // 表示
            Popup.open(box, {
                transition: "pop"
                , positionTo: positionTo
                , positionFixed: positionFixed
                , arrow: true
                , closeButton: true
                , onClosed: function () {
                    scope.onClosed(result);
                    box.remove();
                }
            });
        }
    }

    export namespace MsgBallon {
        export function show(message: string, positionTo: any, positionFixed: boolean, hasCancel?: boolean) {
            return new MsgBallon(message, positionTo, positionFixed, hasCancel);
        }
    }

    /*
     * メッセージボックス
     */
    export class MsgBox {
        onClosed(result: boolean) { ; };

        constructor(message: string, title: string, hasCancel?: boolean) {
            let scope = this;

            let content = "";
            content += "<div";
            content += " data-role='popup'";
            content += " data-history='false'";
            content += " data-overlay-theme='b'";
            content += " data-dismissible='false'";
            content += ">";

            content += " <div data-role='header'>";
            content += "  <h1>" + title + "</h1>";
            content += " </div>";

            content += " <div role='main' class='ui-content'>";
            content += "  <p style='text-align:center;'>" + message + "</p>";
            content += " </div>";

            content += " <div data-role='footer' style=text-align:center;padding:0.3em;>";
            content += "  <a href='#' class='ui-btn ui-btn-inline ui-btn-active' cmd='apply'>OK</a>";
            if (hasCancel) {
                content += "  <a href='#' class='ui-btn ui-btn-inline' cmd='cancel'>キャンセル</a>";
            }
            content += " </div>";
            content += "</div>";

            // 作成
            let box = $(content)
                .appendTo(cm.getActivePage())
                .enhanceWithin()
                .popup();

            // ボタン押下
            let result = false;
            box.find(".ui-btn").off("click").on("click", function (event: Event) {
                let cmd = $(this).attr("cmd");
                switch (cmd) {
                    case "apply":
                        result = true;
                        box.popup("close");
                        break;

                    case "cancel":
                        box.popup("close");
                        break;
                }
            });

            // 表示
            Popup.open(box, {
                transition: "pop"
                , positionFixed: true
                , onClosed: function () {
                    scope.onClosed(result);
                    box.remove();
                }
            });
        }
    }

    export namespace MsgBox {
        export function show(message: string, title: string, hasCancel?: boolean) {
            return new MsgBox(message, title, hasCancel);
        }
    }

    ....

}

ページのスクロールに付いていかなようにMsgBoxは常に位置固定、MsgBallonはパラメータ指定としました

ついでにPopupをボタンのドロップダウンメニューとして使えるように設定位置取得ヘルパーを追加
Popupオプションのx1,y1,x2,y2に与える数値を取得します
/Src/cm.ts

namespace Popup {

    ....

    export namespace Pos {
        export function downLeft(selector: JQuery | string, fixedParent: boolean) {
            return getPosition(selector, "down", "left", fixedParent);
        }
        export function downRight(selector: JQuery | string, fixedParent: boolean) {
            return getPosition(selector, "down", "right", fixedParent);
        }
        export function upLeft(selector: JQuery | string, fixedParent: boolean) {
            return getPosition(selector, "up", "left", fixedParent);
        }
        export function upRight(selector: JQuery | string, fixedParent: boolean) {
            return getPosition(selector, "up", "right", fixedParent);
        }
        export function rightDown(selector: JQuery | string, fixedParent: boolean) {
            return getPosition(selector, "right", "down", fixedParent);
        }
        export function rightUp(selector: JQuery | string, fixedParent: boolean) {
            return getPosition(selector, "right", "up", fixedParent);
        }
        export function leftDown(selector: JQuery | string, fixedParent: boolean) {
            return getPosition(selector, "left", "down", fixedParent);
        }
        export function leftUp(selector: JQuery | string, fixedParent: boolean) {
            return getPosition(selector, "left", "up", fixedParent);
        }

        function getPosition(selector: JQuery | string, location: string, align: string, fixedParent: boolean) {
            let target = $(selector);
            let offset = target.offset();

            let x1: number = NaN;
            let y1: number = NaN;
            let x2: number = NaN;
            let y2: number = NaN;

            switch (location) {
                case "down":
                    y1 = offset.top + target.outerHeight();
                    break;
                case "up":
                    y2 = $(window).height() - offset.top;
                    break;
                case "right":
                    x1 = offset.left + target.outerWidth();
                    break;
                case "left":
                    x2 = $(window).width() - offset.left;
                    break;
            }

            switch (align) {
                case "left":
                    x1 = offset.left;
                    break;
                case "right":
                    x2 = $(window).width() - offset.left - target.outerWidth();
                    break;
                case "down":
                    y1 = offset.top;
                    break;
                case "up":
                    y2 = $(window).height() - offset.top - target.outerHeight();
                    break;
            }
            return { x1: x1, y1: y1, x2: x2, y2: y2 };
        }
    }
}