mirror of
https://github.com/ducbao414/win32.run.git
synced 2025-12-16 17:22:51 +09:00
1654 lines
60 KiB
JavaScript
1654 lines
60 KiB
JavaScript
/*eslint-disable*/
|
|
((exports) => {
|
|
|
|
// TODO: E\("([a-z]+)"\) -> "<$1>" or get rid of jQuery as a dependency
|
|
function E(tagName) {
|
|
return document.createElement(tagName);
|
|
}
|
|
|
|
function element_to_string(element) {
|
|
// returns a CSS-selector-like string for the given element
|
|
// if (element instanceof Element) { // doesn't work with different window.Element from iframes
|
|
if (typeof element === "object" && "tagName" in element) {
|
|
return element.tagName.toLowerCase() +
|
|
(element.id ? "#" + element.id : "") +
|
|
(element.className ? "." + element.className.split(" ").join(".") : "") +
|
|
(element.src ? `[src="${element.src}"]` : "") + // Note: not escaped; may not actually work as a selector (but this is for debugging)
|
|
(element.srcdoc ? "[srcdoc]" : "") + // (srcdoc can be long)
|
|
(element.href ? `[href="${element.href}"]` : "");
|
|
} else if (element) {
|
|
return element.constructor.name;
|
|
} else {
|
|
return `${element}`;
|
|
}
|
|
}
|
|
|
|
function find_tabstops(container_el) {
|
|
const $el = $(container_el);
|
|
// This function finds focusable controls, but not necessarily all of them;
|
|
// for radio elements, it only gives one: either the checked one, or the first one if none are checked.
|
|
|
|
// Note: for audio[controls], Chrome at least has two tabstops (the audio element and three dots menu button).
|
|
// It might be possible to detect this in the shadow DOM, I don't know, I haven't worked with the shadow DOM.
|
|
// But it might be more reliable to make a dummy tabstop element to detect when you tab out of the first/last element.
|
|
// Also for iframes!
|
|
// Assuming that doesn't mess with screen readers.
|
|
// Right now you can't tab to the three dots menu if it's the last element.
|
|
// @TODO: see what ally.js does. Does it handle audio[controls]? https://allyjs.io/api/query/tabsequence.html
|
|
|
|
let $controls = $el.find(`
|
|
input:enabled,
|
|
textarea:enabled,
|
|
select:enabled,
|
|
button:enabled,
|
|
a[href],
|
|
[tabIndex='0'],
|
|
details summary,
|
|
iframe,
|
|
object,
|
|
embed,
|
|
video[controls],
|
|
audio[controls],
|
|
[contenteditable]:not([contenteditable='false'])
|
|
`).filter(":visible");
|
|
// const $controls = $el.find(":tabbable"); // https://api.jqueryui.com/tabbable-selector/
|
|
|
|
// Radio buttons should be treated as a group with one tabstop.
|
|
// If there's no selected ("checked") radio, it should still visit the group,
|
|
// but if there is a selected radio in the group, it should skip all unselected radios in the group.
|
|
const radios = {}; // best radio found so far, per group
|
|
const to_skip = [];
|
|
for (const el of $controls.toArray()) {
|
|
if (el.nodeName.toLowerCase() === "input" && el.type === "radio") {
|
|
if (radios[el.name]) {
|
|
if (el.checked) {
|
|
to_skip.push(radios[el.name]);
|
|
radios[el.name] = el;
|
|
} else {
|
|
to_skip.push(el);
|
|
}
|
|
} else {
|
|
radios[el.name] = el;
|
|
}
|
|
}
|
|
}
|
|
const $tabstops = $controls.not(to_skip);
|
|
// debug viz:
|
|
// $tabstops.css({boxShadow: "0 0 2px 2px green"});
|
|
// $(to_skip).css({boxShadow: "0 0 2px 2px gray"})
|
|
return $tabstops;
|
|
}
|
|
var $G = $(window);
|
|
|
|
|
|
$Window.Z_INDEX = 5;
|
|
|
|
var minimize_slots = []; // for if there's no taskbar
|
|
|
|
// @TODO: make this a class,
|
|
// instead of a weird pseudo-class
|
|
function $Window(options) {
|
|
options = options || {};
|
|
// @TODO: handle all option defaults here
|
|
// and validate options.
|
|
|
|
var $w = $(E("div")).addClass("window os-window").appendTo("body");
|
|
$w[0].$window = $w;
|
|
$w.element = $w[0];
|
|
$w[0].id = `os-window-${Math.random().toString(36).substr(2, 9)}`;
|
|
$w.$titlebar = $(E("div")).addClass("window-titlebar").appendTo($w);
|
|
$w.$title_area = $(E("div")).addClass("window-title-area").appendTo($w.$titlebar);
|
|
$w.$title = $(E("span")).addClass("window-title").appendTo($w.$title_area);
|
|
if (options.toolWindow) {
|
|
options.minimizeButton = false;
|
|
options.maximizeButton = false;
|
|
}
|
|
if (options.minimizeButton !== false) {
|
|
$w.$minimize = $(E("button")).addClass("window-minimize-button window-action-minimize window-button").appendTo($w.$titlebar);
|
|
$w.$minimize.attr("aria-label", "Minimize window"); // @TODO: for taskbarless minimized windows, "restore"
|
|
$w.$minimize.append("<span class='window-button-icon'></span>");
|
|
}
|
|
if (options.maximizeButton !== false) {
|
|
$w.$maximize = $(E("button")).addClass("window-maximize-button window-action-maximize window-button").appendTo($w.$titlebar);
|
|
$w.$maximize.attr("aria-label", "Maximize or restore window"); // @TODO: specific text for the state
|
|
if (!options.resizable) {
|
|
$w.$maximize.attr("disabled", true);
|
|
}
|
|
$w.$maximize.append("<span class='window-button-icon'></span>");
|
|
}
|
|
if (options.closeButton !== false) {
|
|
$w.$x = $(E("button")).addClass("window-close-button window-action-close window-button").appendTo($w.$titlebar);
|
|
$w.$x.attr("aria-label", "Close window");
|
|
$w.$x.append("<span class='window-button-icon'></span>");
|
|
}
|
|
$w.$content = $(E("div")).addClass("window-content").appendTo($w);
|
|
$w.$content.attr("tabIndex", "-1");
|
|
$w.$content.css("outline", "none");
|
|
if (options.toolWindow) {
|
|
$w.addClass("tool-window");
|
|
}
|
|
if (options.parentWindow) {
|
|
options.parentWindow.addChildWindow($w);
|
|
// semantic parent logic is currently only suited for tool windows
|
|
// for dialog windows, it would make the dialog window not show as focused
|
|
// (alternatively, I could simply, when following the semantic parent chain, look for windows that are not tool windows)
|
|
if (options.toolWindow) {
|
|
$w[0].dataset.semanticParent = options.parentWindow[0].id;
|
|
}
|
|
}
|
|
|
|
var $component = options.$component;
|
|
if (typeof options.icon === "object" && "tagName" in options.icon) {
|
|
options.icons = { any: options.icon };
|
|
} else if (options.icon) {
|
|
// old terrible API using globals that you have to define
|
|
console.warn("DEPRECATED: use options.icons instead of options.icon, e.g. new $Window({icons: {16: 'app-16x16.png', any: 'app-icon.svg'}})");
|
|
if (typeof $Icon !== "undefined" && typeof TITLEBAR_ICON_SIZE !== "undefined") {
|
|
$w.icon_name = options.icon;
|
|
$w.$icon = $Icon(options.icon, TITLEBAR_ICON_SIZE).prependTo($w.$titlebar);
|
|
} else {
|
|
throw new Error("Use {icon: img_element} or {icons: {16: url_or_img_element}} options");
|
|
}
|
|
}
|
|
$w.icons = options.icons || {};
|
|
let iconSize = 16;
|
|
$w.setTitlebarIconSize = function (target_icon_size) {
|
|
if ($w.icons) {
|
|
$w.$icon?.remove();
|
|
$w.$icon = $($w.getIconAtSize(target_icon_size));
|
|
$w.$icon.prependTo($w.$titlebar);
|
|
}
|
|
iconSize = target_icon_size;
|
|
$w.trigger("icon-change");
|
|
};
|
|
$w.getTitlebarIconSize = function () {
|
|
return iconSize;
|
|
};
|
|
// @TODO: this could be a static method, like OSGUI.getIconAtSize(icons, targetSize)
|
|
$w.getIconAtSize = function (target_icon_size) {
|
|
let icon_size;
|
|
if ($w.icons[target_icon_size]) {
|
|
icon_size = target_icon_size;
|
|
} else if ($w.icons["any"]) {
|
|
icon_size = "any";
|
|
} else {
|
|
const sizes = Object.keys($w.icons).filter(size => isFinite(size) && isFinite(parseFloat(size)));
|
|
sizes.sort((a, b) => Math.abs(a - target_icon_size) - Math.abs(b - target_icon_size));
|
|
icon_size = sizes[0];
|
|
}
|
|
if (icon_size) {
|
|
const icon = $w.icons[icon_size];
|
|
let icon_element;
|
|
if (icon.nodeType !== undefined) {
|
|
icon_element = icon.cloneNode(true);
|
|
} else {
|
|
icon_element = E("img");
|
|
const $icon = $(icon_element);
|
|
if (icon.srcset) {
|
|
$icon.attr("srcset", icon.srcset);
|
|
} else {
|
|
$icon.attr("src", icon.src || icon);
|
|
}
|
|
$icon.attr({
|
|
width: icon_size,
|
|
height: icon_size,
|
|
draggable: false,
|
|
});
|
|
$icon.css({
|
|
width: target_icon_size,
|
|
height: target_icon_size,
|
|
});
|
|
}
|
|
return icon_element;
|
|
}
|
|
return null;
|
|
};
|
|
// @TODO: automatically update icon size based on theme (with a CSS variable)
|
|
$w.setTitlebarIconSize(iconSize);
|
|
|
|
$w.getIconName = () => {
|
|
console.warn("DEPRECATED: use $w.icons object instead of $w.icon_name");
|
|
return $w.icon_name;
|
|
};
|
|
$w.setIconByID = (icon_name) => {
|
|
console.warn("DEPRECATED: use $w.setIcons(icons) instead of $w.setIconByID(icon_name)");
|
|
var old_$icon = $w.$icon;
|
|
$w.$icon = $Icon(icon_name, TITLEBAR_ICON_SIZE);
|
|
old_$icon.replaceWith($w.$icon);
|
|
$w.icon_name = icon_name;
|
|
$w.task?.updateIcon();
|
|
$w.trigger("icon-change");
|
|
return $w;
|
|
};
|
|
$w.setIcons = (icons) => {
|
|
$w.icons = icons;
|
|
$w.setTitlebarIconSize(iconSize);
|
|
$w.task?.updateIcon();
|
|
// icon-change already sent by setTitlebarIconSize
|
|
};
|
|
|
|
if ($component) {
|
|
$w.addClass("component-window");
|
|
}
|
|
|
|
setTimeout(() => {
|
|
if (get_direction() == "rtl") {
|
|
$w.addClass("rtl"); // for reversing the titlebar gradient
|
|
}
|
|
}, 0);
|
|
|
|
// returns writing/layout direction, "ltr" or "rtl"
|
|
function get_direction() {
|
|
return window.get_direction ? window.get_direction() : getComputedStyle($w[0]).direction;
|
|
}
|
|
|
|
// This is very silly, using jQuery's event handling to implement simpler event handling.
|
|
// But I'll implement it in a non-silly way at least when I remove jQuery. Maybe sooner.
|
|
const $event_target = $({});
|
|
const make_simple_listenable = (name) => {
|
|
return (callback) => {
|
|
const fn = () => {
|
|
callback();
|
|
};
|
|
$event_target.on(name, fn);
|
|
const dispose = () => {
|
|
$event_target.off(name, fn);
|
|
};
|
|
return dispose;
|
|
};
|
|
};
|
|
$w.onFocus = make_simple_listenable("focus");
|
|
$w.onBlur = make_simple_listenable("blur");
|
|
$w.onClosed = make_simple_listenable("closed");
|
|
|
|
$w.setDimensions = ({ innerWidth, innerHeight, outerWidth, outerHeight }) => {
|
|
let width_from_frame, height_from_frame;
|
|
// It's good practice to make all measurements first, then update the DOM.
|
|
// Once you update the DOM, the browser has to recalculate layout, which can be slow.
|
|
if (innerWidth) {
|
|
width_from_frame = $w.outerWidth() - $w.$content.outerWidth();
|
|
}
|
|
if (innerHeight) {
|
|
height_from_frame = $w.outerHeight() - $w.$content.outerHeight();
|
|
const $menu_bar = $w.$content.find(".menus"); // only if inside .content; might move to a slot outside .content later
|
|
if ($menu_bar.length) {
|
|
// maybe this isn't technically part of the frame, per se? but it's part of the non-client area, which is what I technically mean.
|
|
height_from_frame += $menu_bar.outerHeight();
|
|
}
|
|
}
|
|
if (outerWidth) {
|
|
$w.outerWidth(outerWidth);
|
|
}
|
|
if (outerHeight) {
|
|
$w.outerHeight(outerHeight);
|
|
}
|
|
if (innerWidth) {
|
|
$w.outerWidth(innerWidth + width_from_frame);
|
|
}
|
|
if (innerHeight) {
|
|
$w.outerHeight(innerHeight + height_from_frame);
|
|
}
|
|
};
|
|
$w.setDimensions(options);
|
|
|
|
let child_$windows = [];
|
|
$w.addChildWindow = ($child_window) => {
|
|
child_$windows.push($child_window);
|
|
};
|
|
const showAsFocused = () => {
|
|
if ($w.hasClass("focused")) {
|
|
return;
|
|
}
|
|
$w.addClass("focused");
|
|
$event_target.triggerHandler("focus");
|
|
};
|
|
const stopShowingAsFocused = () => {
|
|
if (!$w.hasClass("focused")) {
|
|
return;
|
|
}
|
|
$w.removeClass("focused");
|
|
$event_target.triggerHandler("blur");
|
|
};
|
|
$w.focus = () => {
|
|
// showAsFocused();
|
|
$w.bringToFront();
|
|
refocus();
|
|
};
|
|
$w.blur = () => {
|
|
stopShowingAsFocused();
|
|
if (document.activeElement && document.activeElement.closest(".window") == $w[0]) {
|
|
document.activeElement.blur();
|
|
}
|
|
};
|
|
|
|
if (options.toolWindow) {
|
|
if (options.parentWindow) {
|
|
options.parentWindow.onFocus(showAsFocused);
|
|
options.parentWindow.onBlur(stopShowingAsFocused);
|
|
// TODO: also show as focused if focus is within the window
|
|
|
|
// initial state
|
|
// might need a setTimeout, idk...
|
|
if (document.activeElement && document.activeElement.closest(".window") == options.parentWindow[0]) {
|
|
showAsFocused();
|
|
}
|
|
} else {
|
|
// the browser window is the parent window
|
|
// show focus whenever the browser window is focused
|
|
$(window).on("focus", showAsFocused);
|
|
$(window).on("blur", stopShowingAsFocused);
|
|
// initial state
|
|
if (document.hasFocus()) {
|
|
showAsFocused();
|
|
}
|
|
}
|
|
}
|
|
/*else - PATCHED; I want focus tracking in a tool window; @TODO: dissolve the concept of a "tool window" */
|
|
{
|
|
// global focusout is needed, to continue showing as focused while child windows or menu popups are focused (@TODO: Is this redundant with focusin?)
|
|
// global focusin is needed, to show as focused when a child window becomes focused (when perhaps nothing was focused before, so no focusout event)
|
|
// global blur is needed, to show as focused when an iframe gets focus, because focusin/out doesn't fire at all in that case
|
|
// global focus is needed, to stop showing as focused when an iframe loses focus
|
|
// pretty ridiculous!!
|
|
// but it still doesn't handle the case where the browser window is not focused, and the user clicks an iframe directly.
|
|
// for that, we need to listen inside the iframe, because no events are fired at all outside in that case,
|
|
// and :focus/:focus-within doesn't work with iframes so we can't even do a hack with transitionstart.
|
|
// @TODO: simplify the strategy; I ended up piling a few strategies on top of each other, and the earlier ones may be redundant.
|
|
// In particular, 1. I ended up making it proactively inject into iframes, rather than when focused since there's a case where focus can't be detected otherwise.
|
|
// 2. I ended up simulating focusin events for iframes.
|
|
// I may want to rely on that, or, I may want to remove that and set up a refocus chain directly instead,
|
|
// avoiding refocus() which may interfere with drag operations in an iframe when focusing the iframe (e.g. clicking into Paint to draw or drag a sub-window).
|
|
|
|
// console.log("adding global focusin/focusout/blur/focus for window", $w[0].id);
|
|
const global_focus_update_handler = make_focus_in_out_handler($w[0], true); // must be $w and not $content so semantic parent chain works, with [data-semantic-parent] pointing to the window not the content
|
|
window.addEventListener("focusin", global_focus_update_handler);
|
|
window.addEventListener("focusout", global_focus_update_handler);
|
|
window.addEventListener("blur", global_focus_update_handler);
|
|
window.addEventListener("focus", global_focus_update_handler);
|
|
|
|
function setupIframe(iframe) {
|
|
if (!focus_update_handlers_by_container.has(iframe)) {
|
|
const iframe_update_focus = make_focus_in_out_handler(iframe, false);
|
|
// this also operates as a flag to prevent multiple handlers from being added, or waiting for the iframe to load duplicately
|
|
focus_update_handlers_by_container.set(iframe, iframe_update_focus);
|
|
|
|
// @TODO: try removing setTimeout(s)
|
|
setTimeout(() => { // for iframe src to be set? I forget.
|
|
// Note: try must be INSIDE setTimeout, not outside, to work.
|
|
try {
|
|
const wait_for_iframe_load = (callback) => {
|
|
// Note: error may occur accessing iframe.contentDocument; this must be handled by the caller.
|
|
// To that end, this function must access it synchronously, to allow the caller to handle the error.
|
|
if (iframe.contentDocument.readyState == "complete") {
|
|
callback();
|
|
} else {
|
|
// iframe.contentDocument.addEventListener("readystatechange", () => {
|
|
// if (iframe.contentDocument.readyState == "complete") {
|
|
// callback();
|
|
// }
|
|
// });
|
|
setTimeout(() => {
|
|
wait_for_iframe_load(callback);
|
|
}, 100);
|
|
}
|
|
};
|
|
wait_for_iframe_load(() => {
|
|
// console.log("adding focusin/focusout/blur/focus for iframe", iframe);
|
|
iframe.contentWindow.addEventListener("focusin", iframe_update_focus);
|
|
iframe.contentWindow.addEventListener("focusout", iframe_update_focus);
|
|
iframe.contentWindow.addEventListener("blur", iframe_update_focus);
|
|
iframe.contentWindow.addEventListener("focus", iframe_update_focus);
|
|
observeIframes(iframe.contentDocument);
|
|
});
|
|
} catch (error) {
|
|
warn_iframe_access(iframe, error);
|
|
}
|
|
}, 100);
|
|
}
|
|
}
|
|
|
|
function observeIframes(container_node) {
|
|
const observer = new MutationObserver((mutations) => {
|
|
for (const mutation of mutations) {
|
|
for (const node of mutation.addedNodes) {
|
|
if (node.tagName == "IFRAME") {
|
|
setupIframe(node);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
observer.observe(container_node, { childList: true, subtree: true });
|
|
// needed in recursive calls (for iframes inside iframes)
|
|
// (for the window, it shouldn't be able to have iframes yet)
|
|
for (const iframe of container_node.querySelectorAll("iframe")) {
|
|
setupIframe(iframe);
|
|
}
|
|
}
|
|
|
|
observeIframes($w.$content[0]);
|
|
|
|
function make_focus_in_out_handler(logical_container_el, is_root) {
|
|
// In case of iframes, logical_container_el is the iframe, and container_node is the iframe's contentDocument.
|
|
// container_node is not a parameter here because it can change over time, may be an empty document before the iframe is loaded.
|
|
|
|
return function handle_focus_in_out(event) {
|
|
const container_node = logical_container_el.tagName == "IFRAME" ? logical_container_el.contentDocument : logical_container_el;
|
|
const document = container_node.ownerDocument ?? container_node;
|
|
// is this equivalent?
|
|
// const document = logical_container_el.tagName == "IFRAME" ? logical_container_el.contentDocument : logical_container_el.ownerDocument;
|
|
|
|
// console.log(`handling ${event.type} for container`, container_el);
|
|
let newly_focused = event ? (event.type === "focusout" || event.type === "blur") ? event.relatedTarget : event.target : document.activeElement;
|
|
if (event?.type === "blur") {
|
|
newly_focused = null; // only handle iframe
|
|
}
|
|
|
|
// console.log(`[${$w.title()}] (is_root=${is_root})`, `newly_focused is (preliminarily)`, element_to_string(newly_focused), `\nlogical_container_el`, logical_container_el, `\ncontainer_node`, container_node, `\ndocument.activeElement`, document.activeElement, `\ndocument.hasFocus()`, document.hasFocus(), `\ndocument`, document);
|
|
|
|
// Iframes are stingy about focus events, so we need to check if focus is actually within an iframe.
|
|
if (
|
|
document.activeElement &&
|
|
document.activeElement.tagName === "IFRAME" &&
|
|
(event?.type === "focusout" || event?.type === "blur") &&
|
|
!newly_focused // doesn't exist for security reasons in this case
|
|
) {
|
|
newly_focused = document.activeElement;
|
|
// console.log(`[${$w.title()}] (is_root=${is_root})`, `newly_focused is (actually)`, element_to_string(newly_focused));
|
|
}
|
|
|
|
const outside_or_at_exactly =
|
|
!newly_focused ||
|
|
// contains() only works with DOM nodes (elements and documents), not window objects.
|
|
// Since container_node is a DOM node, it will never have a Window inside of it (ignoring iframes).
|
|
newly_focused.window === newly_focused || // is a Window object (cross-frame test)
|
|
!container_node.contains(newly_focused); // Note: node.contains(node) === true
|
|
const firmly_outside = outside_or_at_exactly && container_node !== newly_focused;
|
|
|
|
// console.log(`[${$w.title()}] (is_root=${is_root})`, `outside_or_at_exactly=${outside_or_at_exactly}`, `firmly_outside=${firmly_outside}`);
|
|
if (firmly_outside && is_root) {
|
|
if (!options.toolWindow) { // PATCHED
|
|
stopShowingAsFocused();
|
|
}
|
|
}
|
|
if (
|
|
!outside_or_at_exactly &&
|
|
newly_focused.tagName !== "HTML" &&
|
|
newly_focused.tagName !== "BODY" &&
|
|
newly_focused !== container_node &&
|
|
!newly_focused.matches(".window-content") &&
|
|
!newly_focused.closest(".menus") &&
|
|
!newly_focused.closest(".window-titlebar")
|
|
) {
|
|
last_focus_by_container.set(logical_container_el, newly_focused); // overwritten for iframes below
|
|
debug_focus_tracking(document, container_node, newly_focused, is_root);
|
|
}
|
|
|
|
if (
|
|
!outside_or_at_exactly &&
|
|
newly_focused.tagName === "IFRAME"
|
|
) {
|
|
const iframe = newly_focused;
|
|
// console.log("iframe", iframe, onfocusin_by_container.has(iframe));
|
|
try {
|
|
const focus_in_iframe = iframe.contentDocument.activeElement;
|
|
if (
|
|
focus_in_iframe &&
|
|
focus_in_iframe.tagName !== "HTML" &&
|
|
focus_in_iframe.tagName !== "BODY" &&
|
|
!focus_in_iframe.closest(".menus")
|
|
) {
|
|
// last_focus_by_container.set(logical_container_el, iframe); // done above
|
|
last_focus_by_container.set(iframe, focus_in_iframe);
|
|
debug_focus_tracking(iframe.contentDocument, iframe.contentDocument, focus_in_iframe, is_root);
|
|
}
|
|
} catch (e) {
|
|
warn_iframe_access(iframe, e);
|
|
}
|
|
}
|
|
|
|
|
|
// For child windows and menu popups, follow "semantic parent" chain.
|
|
// Menu popups and child windows aren't descendants of the window they belong to,
|
|
// but should keep the window shown as focused.
|
|
// (In principle this sort of feature could be useful for focus tracking*,
|
|
// but right now it's only for child windows and menu popups, which should not be tracked for refocus,
|
|
// so I'm doing this after last_focus_by_container.set, for now anyway.)
|
|
// ((*: and it may even be surprising if it doesn't work, if one sees the attribute on menus and attempts to use it.
|
|
// But who's going to see that? The menus close so it's a pain to see the DOM structure! :P **))
|
|
// (((**: without window.debugKeepMenusOpen)))
|
|
if (is_root) {
|
|
do {
|
|
// if (!newly_focused?.closest) {
|
|
// console.warn("what is this?", newly_focused);
|
|
// break;
|
|
// }
|
|
const waypoint = newly_focused?.closest?.("[data-semantic-parent]");
|
|
if (waypoint) {
|
|
const id = waypoint.dataset.semanticParent;
|
|
const parent = waypoint.ownerDocument.getElementById(id);
|
|
// console.log("following semantic parent, from", newly_focused, "\nto", parent, "\nvia", waypoint);
|
|
newly_focused = parent;
|
|
if (!parent) {
|
|
console.warn("semantic parent not found with id", id);
|
|
break;
|
|
}
|
|
} else {
|
|
break;
|
|
}
|
|
} while (true);
|
|
}
|
|
|
|
// Note: allowing showing window as focused from listeners inside iframe (non-root) too,
|
|
// in order to handle clicking an iframe when the browser window was not previously focused (e.g. after reload)
|
|
if (
|
|
newly_focused &&
|
|
newly_focused.window !== newly_focused && // cross-frame test for Window object
|
|
container_node.contains(newly_focused)
|
|
) {
|
|
if (!options.toolWindow) { // PATCHED
|
|
showAsFocused();
|
|
}
|
|
$w.bringToFront();
|
|
if (!is_root) {
|
|
// trigger focusin events for iframes
|
|
// @TODO: probably don't need showAsFocused() here since it'll be handled externally (on this simulated focusin),
|
|
// and might not need a lot of other logic frankly if I'm simulating focusin events
|
|
let el = logical_container_el;
|
|
while (el) {
|
|
// console.log("dispatching focusin event for", el);
|
|
el.dispatchEvent(new Event("focusin", {
|
|
bubbles: true,
|
|
target: el,
|
|
view: el.ownerDocument.defaultView,
|
|
}));
|
|
el = el.currentView?.frameElement;
|
|
}
|
|
}
|
|
} else if (is_root) {
|
|
if (!options.toolWindow) { // PATCHED
|
|
stopShowingAsFocused();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// initial state is unfocused
|
|
}
|
|
|
|
$w.css("touch-action", "none");
|
|
|
|
let minimize_target_el = null; // taskbar button (optional)
|
|
$w.setMinimizeTarget = function (new_taskbar_button_el) {
|
|
minimize_target_el = new_taskbar_button_el;
|
|
};
|
|
|
|
let task;
|
|
Object.defineProperty($w, "task", {
|
|
get() {
|
|
return task;
|
|
},
|
|
set(new_task) {
|
|
console.warn("DEPRECATED: use $w.setMinimizeTarget(taskbar_button_el) instead of setting $window.task object");
|
|
task = new_task;
|
|
},
|
|
});
|
|
|
|
let before_minimize;
|
|
$w.minimize = () => {
|
|
minimize_target_el = minimize_target_el || task?.$task[0];
|
|
if (animating_titlebar) {
|
|
when_done_animating_titlebar.push($w.minimize);
|
|
return;
|
|
}
|
|
if ($w.is(":visible")) {
|
|
if (minimize_target_el && !$w.hasClass("minimized-without-taskbar")) {
|
|
const before_rect = $w.$titlebar[0].getBoundingClientRect();
|
|
const after_rect = minimize_target_el.getBoundingClientRect();
|
|
$w.animateTitlebar(before_rect, after_rect, () => {
|
|
$w.hide();
|
|
$w.blur();
|
|
});
|
|
} else {
|
|
// no taskbar
|
|
|
|
// @TODO: make this metrically similar to what Windows 98 does
|
|
// @TODO: DRY! This is copied heavily from maximize()
|
|
// @TODO: after minimize (without taskbar) and maximize, restore should restore original position before minimize
|
|
// OR should it not maximize but restore the unmaximized state? I think I tested it but I forget.
|
|
|
|
const to_width = 150;
|
|
const spacing = 10;
|
|
if ($w.hasClass("minimized-without-taskbar")) {
|
|
// unminimizing
|
|
minimize_slots[$w._minimize_slot_index] = null;
|
|
} else {
|
|
// minimizing
|
|
let i = 0;
|
|
while (minimize_slots[i]) {
|
|
i++;
|
|
}
|
|
$w._minimize_slot_index = i;
|
|
minimize_slots[i] = $w;
|
|
}
|
|
const to_x = $w._minimize_slot_index * (to_width + spacing) + 10;
|
|
const titlebar_height = $w.$titlebar.outerHeight();
|
|
let before_unminimize;
|
|
const instantly_minimize = () => {
|
|
before_minimize = {
|
|
position: $w.css("position"),
|
|
left: $w.css("left"),
|
|
top: $w.css("top"),
|
|
width: $w.css("width"),
|
|
height: $w.css("height"),
|
|
};
|
|
|
|
$w.addClass("minimized-without-taskbar");
|
|
if ($w.hasClass("maximized")) {
|
|
$w.removeClass("maximized");
|
|
$w.addClass("was-maximized");
|
|
$w.$maximize.removeClass("window-action-restore");
|
|
$w.$maximize.addClass("window-action-maximize");
|
|
}
|
|
$w.$minimize.removeClass("window-action-minimize");
|
|
$w.$minimize.addClass("window-action-restore");
|
|
if (before_unminimize) {
|
|
$w.css({
|
|
position: before_unminimize.position,
|
|
left: before_unminimize.left,
|
|
top: before_unminimize.top,
|
|
width: before_unminimize.width,
|
|
height: before_unminimize.height,
|
|
});
|
|
} else {
|
|
$w.css({
|
|
position: "fixed",
|
|
top: `calc(100% - ${titlebar_height + 5}px)`,
|
|
left: to_x,
|
|
width: to_width,
|
|
height: titlebar_height,
|
|
});
|
|
}
|
|
};
|
|
const instantly_unminimize = () => {
|
|
before_unminimize = {
|
|
position: $w.css("position"),
|
|
left: $w.css("left"),
|
|
top: $w.css("top"),
|
|
width: $w.css("width"),
|
|
height: $w.css("height"),
|
|
};
|
|
|
|
$w.removeClass("minimized-without-taskbar");
|
|
if ($w.hasClass("was-maximized")) {
|
|
$w.removeClass("was-maximized");
|
|
$w.addClass("maximized");
|
|
$w.$maximize.removeClass("window-action-maximize");
|
|
$w.$maximize.addClass("window-action-restore");
|
|
}
|
|
$w.$minimize.removeClass("window-action-restore");
|
|
$w.$minimize.addClass("window-action-minimize");
|
|
$w.css({ width: "", height: "" });
|
|
if (before_minimize) {
|
|
$w.css({
|
|
position: before_minimize.position,
|
|
left: before_minimize.left,
|
|
top: before_minimize.top,
|
|
width: before_minimize.width,
|
|
height: before_minimize.height,
|
|
});
|
|
}
|
|
};
|
|
|
|
const before_rect = $w.$titlebar[0].getBoundingClientRect();
|
|
let after_rect;
|
|
$w.css("transform", "");
|
|
if ($w.hasClass("minimized-without-taskbar")) {
|
|
instantly_unminimize();
|
|
after_rect = $w.$titlebar[0].getBoundingClientRect();
|
|
instantly_minimize();
|
|
} else {
|
|
instantly_minimize();
|
|
after_rect = $w.$titlebar[0].getBoundingClientRect();
|
|
instantly_unminimize();
|
|
}
|
|
$w.animateTitlebar(before_rect, after_rect, () => {
|
|
if ($w.hasClass("minimized-without-taskbar")) {
|
|
instantly_unminimize();
|
|
} else {
|
|
instantly_minimize();
|
|
$w.blur();
|
|
}
|
|
});
|
|
}
|
|
}
|
|
};
|
|
$w.unminimize = () => {
|
|
if (animating_titlebar) {
|
|
when_done_animating_titlebar.push($w.unminimize);
|
|
return;
|
|
}
|
|
if ($w.hasClass("minimized-without-taskbar")) {
|
|
$w.minimize();
|
|
return;
|
|
}
|
|
if ($w.is(":hidden")) {
|
|
const before_rect = minimize_target_el.getBoundingClientRect();
|
|
$w.show();
|
|
const after_rect = $w.$titlebar[0].getBoundingClientRect();
|
|
$w.hide();
|
|
$w.animateTitlebar(before_rect, after_rect, () => {
|
|
$w.show();
|
|
$w.bringToFront();
|
|
$w.focus();
|
|
});
|
|
}
|
|
};
|
|
|
|
let before_maximize;
|
|
$w.maximize = () => {
|
|
if (!options.resizable) {
|
|
return;
|
|
}
|
|
if (animating_titlebar) {
|
|
when_done_animating_titlebar.push($w.maximize);
|
|
return;
|
|
}
|
|
if ($w.hasClass("minimized-without-taskbar")) {
|
|
$w.minimize();
|
|
return;
|
|
}
|
|
|
|
const instantly_maximize = () => {
|
|
before_maximize = {
|
|
position: $w.css("position"),
|
|
left: $w.css("left"),
|
|
top: $w.css("top"),
|
|
width: $w.css("width"),
|
|
height: $w.css("height"),
|
|
};
|
|
|
|
$w.addClass("maximized");
|
|
const $taskbar = $(".taskbar");
|
|
const scrollbar_width = window.innerWidth - $(window).width();
|
|
const scrollbar_height = window.innerHeight - $(window).height();
|
|
const taskbar_height = $taskbar.length ? $taskbar.outerHeight() + 1 : 0;
|
|
$w.css({
|
|
position: "fixed",
|
|
top: 0,
|
|
left: 0,
|
|
width: `calc(100vw - ${scrollbar_width}px)`,
|
|
height: `calc(100vh - ${scrollbar_height}px - ${taskbar_height}px)`,
|
|
});
|
|
};
|
|
const instantly_unmaximize = () => {
|
|
$w.removeClass("maximized");
|
|
$w.css({ width: "", height: "" });
|
|
if (before_maximize) {
|
|
$w.css({
|
|
position: before_maximize.position,
|
|
left: before_maximize.left,
|
|
top: before_maximize.top,
|
|
width: before_maximize.width,
|
|
height: before_maximize.height,
|
|
});
|
|
}
|
|
};
|
|
|
|
const before_rect = $w.$titlebar[0].getBoundingClientRect();
|
|
let after_rect;
|
|
$w.css("transform", "");
|
|
const restoring = $w.hasClass("maximized");
|
|
if (restoring) {
|
|
instantly_unmaximize();
|
|
after_rect = $w.$titlebar[0].getBoundingClientRect();
|
|
instantly_maximize();
|
|
} else {
|
|
instantly_maximize();
|
|
after_rect = $w.$titlebar[0].getBoundingClientRect();
|
|
instantly_unmaximize();
|
|
}
|
|
$w.animateTitlebar(before_rect, after_rect, () => {
|
|
if (restoring) {
|
|
instantly_unmaximize(); // finalize in some way
|
|
$w.$maximize.removeClass("window-action-restore");
|
|
$w.$maximize.addClass("window-action-maximize");
|
|
} else {
|
|
instantly_maximize(); // finalize in some way
|
|
$w.$maximize.removeClass("window-action-maximize");
|
|
$w.$maximize.addClass("window-action-restore");
|
|
}
|
|
});
|
|
};
|
|
$w.restore = () => {
|
|
if ($w.is(".minimized-without-taskbar, .minimized")) {
|
|
$w.unminimize();
|
|
} else if ($w.is(".maximized")) {
|
|
$w.maximize();
|
|
}
|
|
};
|
|
// must not pass event to functions by accident; also methods may not be defined yet
|
|
$w.$minimize?.on("click", (e) => { $w.minimize(); });
|
|
$w.$maximize?.on("click", (e) => { $w.maximize(); });
|
|
$w.$x?.on("click", (e) => { $w.close(); });
|
|
$w.$title_area.on("dblclick", (e) => { $w.maximize(); });
|
|
|
|
$w.css({
|
|
position: "absolute",
|
|
zIndex: $Window.Z_INDEX++
|
|
});
|
|
$w.bringToFront = () => {
|
|
$w.css({
|
|
zIndex: $Window.Z_INDEX++
|
|
});
|
|
for (const $childWindow of child_$windows) {
|
|
$childWindow.bringToFront();
|
|
}
|
|
};
|
|
|
|
// Keep track of last focused elements per container,
|
|
// where containers include:
|
|
// - window (global focus tracking)
|
|
// - $w[0] (window-local, for restoring focus when refocusing window)
|
|
// - any iframes that are same-origin (for restoring focus when refocusing window)
|
|
// @TODO: should these be WeakMaps? probably.
|
|
// @TODO: share this Map between all windows? but clean it up when destroying windows? or would a WeakMap take care of that?
|
|
var last_focus_by_container = new Map(); // element to restore focus to, by container
|
|
var focus_update_handlers_by_container = new Map(); // event handlers by container; note use as a flag to avoid adding multiple handlers
|
|
var debug_svg_by_container = new Map(); // visualization
|
|
var debug_svgs_in_window = []; // visualization
|
|
var warned_iframes = new WeakSet(); // prevent spamming console
|
|
|
|
const warn_iframe_access = (iframe, error) => {
|
|
const log_template = (message) => [`OS-GUI.js failed to access an iframe (${element_to_string(iframe)}) for focus integration.
|
|
${message}
|
|
Original error:
|
|
`, error];
|
|
|
|
let cross_origin;
|
|
if (iframe.srcdoc) {
|
|
cross_origin = false;
|
|
} else {
|
|
try {
|
|
const url = new URL(iframe.src);
|
|
cross_origin = url.origin !== window.location.origin; // shouldn't need to use iframe.ownerDocument.location.origin because intermediate iframes must be same-origin
|
|
} catch (parse_error) {
|
|
console.error(...log_template(`This may be a bug in OS-GUI. Is this a cross-origin iframe? Failed to parse URL (${parse_error}).`));
|
|
return;
|
|
}
|
|
}
|
|
if (cross_origin) {
|
|
if (options.iframes?.ignoreCrossOrigin && !warned_iframes.has(iframe)) {
|
|
console.warn(...log_template(`Only same-origin iframes can work with focus integration (showing window as focused, refocusing last focused controls).
|
|
If you can re-host the content on the same origin, you can resolve this and enable focus integration.
|
|
You can also disable this warning by passing {iframes: {ignoreCrossOrigin: true}} to $Window.`));
|
|
warned_iframes.add(iframe);
|
|
}
|
|
} else {
|
|
console.error(...log_template(`This may be a bug in OS-GUI, since it doesn't appear to be a cross-origin iframe.`));
|
|
}
|
|
};
|
|
|
|
const debug_focus_tracking = (document, container_el, descendant_el, is_root) => {
|
|
if (!$Window.DEBUG_FOCUS) {
|
|
return;
|
|
}
|
|
let svg = debug_svg_by_container.get(container_el);
|
|
if (!svg) {
|
|
svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
|
svg.style.position = "fixed";
|
|
svg.style.top = "0";
|
|
svg.style.left = "0";
|
|
svg.style.width = "100%";
|
|
svg.style.height = "100%";
|
|
svg.style.pointerEvents = "none";
|
|
svg.style.zIndex = "100000000";
|
|
svg.style.direction = "ltr"; // position labels correctly
|
|
debug_svg_by_container.set(container_el, svg);
|
|
debug_svgs_in_window.push(svg);
|
|
document.body.appendChild(svg);
|
|
}
|
|
svg._container_el = container_el;
|
|
svg._descendant_el = descendant_el;
|
|
svg._is_root = is_root;
|
|
animate_debug_focus_tracking();
|
|
};
|
|
const update_debug_focus_tracking = (svg) => {
|
|
const container_el = svg._container_el;
|
|
const descendant_el = svg._descendant_el;
|
|
const is_root = svg._is_root;
|
|
|
|
while (svg.lastChild) {
|
|
svg.removeChild(svg.lastChild);
|
|
}
|
|
const descendant_rect = descendant_el.getBoundingClientRect?.() ?? { left: 0, top: 0, width: innerWidth, height: innerHeight, right: innerWidth, bottom: innerHeight };
|
|
const container_rect = container_el.getBoundingClientRect?.() ?? { left: 0, top: 0, width: innerWidth, height: innerHeight, right: innerWidth, bottom: innerHeight };
|
|
// draw rectangles with labels
|
|
for (const rect of [descendant_rect, container_rect]) {
|
|
const rect_el = document.createElementNS("http://www.w3.org/2000/svg", "rect");
|
|
rect_el.setAttribute("x", rect.left);
|
|
rect_el.setAttribute("y", rect.top);
|
|
rect_el.setAttribute("width", rect.width);
|
|
rect_el.setAttribute("height", rect.height);
|
|
rect_el.setAttribute("stroke", rect === descendant_rect ? "#f44" : "#f44");
|
|
rect_el.setAttribute("stroke-width", "2");
|
|
rect_el.setAttribute("fill", "none");
|
|
if (!is_root) {
|
|
rect_el.setAttribute("stroke-dasharray", "5,5");
|
|
}
|
|
svg.appendChild(rect_el);
|
|
const text_el = document.createElementNS("http://www.w3.org/2000/svg", "text");
|
|
text_el.setAttribute("x", rect.left);
|
|
text_el.setAttribute("y", rect.top + (rect === descendant_rect ? 20 : 0)); // align container text on outside, descendant text on inside
|
|
text_el.setAttribute("fill", rect === descendant_rect ? "#f44" : "aqua");
|
|
text_el.setAttribute("font-size", "20");
|
|
text_el.style.textShadow = "1px 1px 1px black, 0 0 10px black";
|
|
text_el.textContent = element_to_string(rect === descendant_rect ? descendant_el : container_el);
|
|
svg.appendChild(text_el);
|
|
}
|
|
// draw lines connecting the two rects
|
|
const lines = [
|
|
[descendant_rect.left, descendant_rect.top, container_rect.left, container_rect.top],
|
|
[descendant_rect.right, descendant_rect.top, container_rect.right, container_rect.top],
|
|
[descendant_rect.left, descendant_rect.bottom, container_rect.left, container_rect.bottom],
|
|
[descendant_rect.right, descendant_rect.bottom, container_rect.right, container_rect.bottom],
|
|
];
|
|
for (const line of lines) {
|
|
const line_el = document.createElementNS("http://www.w3.org/2000/svg", "line");
|
|
line_el.setAttribute("x1", line[0]);
|
|
line_el.setAttribute("y1", line[1]);
|
|
line_el.setAttribute("x2", line[2]);
|
|
line_el.setAttribute("y2", line[3]);
|
|
line_el.setAttribute("stroke", "green");
|
|
line_el.setAttribute("stroke-width", "2");
|
|
svg.appendChild(line_el);
|
|
}
|
|
};
|
|
let debug_animation_frame_id;
|
|
const animate_debug_focus_tracking = () => {
|
|
cancelAnimationFrame(debug_animation_frame_id);
|
|
if (!$Window.DEBUG_FOCUS) {
|
|
clean_up_debug_focus_tracking();
|
|
return;
|
|
}
|
|
debug_animation_frame_id = requestAnimationFrame(animate_debug_focus_tracking);
|
|
for (const svg of debug_svgs_in_window) {
|
|
update_debug_focus_tracking(svg);
|
|
}
|
|
};
|
|
const clean_up_debug_focus_tracking = () => {
|
|
cancelAnimationFrame(debug_animation_frame_id);
|
|
for (const svg of debug_svgs_in_window) {
|
|
svg.remove();
|
|
}
|
|
debug_svgs_in_window.length = 0;
|
|
debug_svg_by_container.clear();
|
|
};
|
|
|
|
const refocus = (container_el = $w.$content[0]) => {
|
|
const logical_container_el = container_el.matches(".window-content") ? $w[0] : container_el;
|
|
const last_focus = last_focus_by_container.get(logical_container_el);
|
|
if (last_focus) {
|
|
last_focus.focus({ preventScroll: true });
|
|
if (last_focus.tagName === "IFRAME") {
|
|
try {
|
|
refocus(last_focus);
|
|
} catch (e) {
|
|
warn_iframe_access(last_focus, e);
|
|
}
|
|
}
|
|
return;
|
|
}
|
|
const $tabstops = find_tabstops(container_el);
|
|
const $default = $tabstops.filter(".default");
|
|
if ($default.length) {
|
|
$default[0].focus({ preventScroll: true });
|
|
return;
|
|
}
|
|
if ($tabstops.length) {
|
|
if ($tabstops[0].tagName === "IFRAME") {
|
|
try {
|
|
refocus($tabstops[0]); // not .contentDocument.body because we want the container tracked by last_focus_by_container
|
|
} catch (e) {
|
|
warn_iframe_access($tabstops[0], e);
|
|
}
|
|
} else {
|
|
$tabstops[0].focus({ preventScroll: true });
|
|
}
|
|
return;
|
|
}
|
|
if (options.toolWindow && options.parentWindow) {
|
|
options.parentWindow.triggerHandler("refocus-window");
|
|
return;
|
|
}
|
|
container_el.focus({ preventScroll: true });
|
|
if (container_el.tagName === "IFRAME") {
|
|
try {
|
|
refocus(container_el.contentDocument.body);
|
|
} catch (e) {
|
|
warn_iframe_access(container_el, e);
|
|
}
|
|
}
|
|
};
|
|
|
|
$w.on("refocus-window", () => {
|
|
refocus();
|
|
});
|
|
|
|
// redundant events are for handling synthetic events,
|
|
// which may be sent individually, rather than in tandem
|
|
$w.on("pointerdown mousedown", handle_pointer_activation);
|
|
// Note that jQuery treats some events differently, and can't listen for some synthetic events
|
|
// but pointerdown and mousedown seem to be supported. That said, if you trigger() either,
|
|
// addEventListener() handlers will not be called. So if I remove the dependency on jQuery,
|
|
// it will not be possible to listen for some .trigger() events.
|
|
// https://jsfiddle.net/1j01/ndvwts9y/1/
|
|
|
|
// Assumption: focusin comes after pointerdown/mousedown
|
|
// This is probably guaranteed, because you can prevent the default of focusing from pointerdown/mousedown
|
|
$G.on("focusin", (e) => {
|
|
last_focus_by_container.set(window, e.target);
|
|
// debug_focus_tracking(document, window, e.target);
|
|
});
|
|
|
|
function handle_pointer_activation(event) {
|
|
// console.log("handle_pointer_activation", event.type, event.target);
|
|
$w.bringToFront();
|
|
// Test cases where it should refocus the last focused control in the window:
|
|
// - Click in the blank space of the window
|
|
// - Click in blank space again now that something's focused
|
|
// - Click on the window title bar
|
|
// - Click on title bar buttons
|
|
// - Closing a second window should focus the first window
|
|
// - Open a dialog window from an app window that has a tool window, then close the dialog window
|
|
// - @TODO: Even if the tool window has controls, it should focus the parent window, I think
|
|
// - Clicking on a control in the window should focus said control
|
|
// - Clicking on a disabled control in the window should focus the window
|
|
// - Make sure to test this with another window previously focused
|
|
// - Simulated clicks (important for JS Paint's eye gaze and speech recognition modes)
|
|
// - (@TODO: Should clicking a child window focus the parent window?)
|
|
// - After potentially selecting text but not selecting anything
|
|
// It should NOT refocus when:
|
|
// - Clicking on a control in a different window
|
|
// - When other event handlers set focus
|
|
// - Using the keyboard to focus something outside the window, such as a menu popup
|
|
// - Clicking a control that focuses something outside the window
|
|
// - Button that opens another window (e.g. Recursive Dialog button in tests)
|
|
// - Button that focuses a control in another window (e.g. Focus Other button in tests)
|
|
// - Trying to select text
|
|
|
|
// Wait for other pointerdown handlers and default behavior, and focusin events.
|
|
requestAnimationFrame(() => {
|
|
const last_focus_global = last_focus_by_container.get(window);
|
|
// const last_focus_in_window = last_focus_by_container.get($w.$content[0]);
|
|
// console.log("a tick after", event.type, { last_focus_in_window, last_focus_global, activeElement: document.activeElement, win_elem: $w[0] });
|
|
// console.log("did focus change?", document.activeElement !== last_focus_global);
|
|
|
|
// If something programmatically got focus, don't refocus.
|
|
if (
|
|
document.activeElement &&
|
|
document.activeElement !== document &&
|
|
document.activeElement !== document.body &&
|
|
document.activeElement !== $w.$content[0] &&
|
|
document.activeElement !== last_focus_global
|
|
) {
|
|
return;
|
|
}
|
|
// If menus got focus, don't refocus.
|
|
if (document.activeElement?.closest?.(".menus, .menu-popup")) {
|
|
// console.log("click in menus");
|
|
return;
|
|
}
|
|
|
|
// If the element is selectable, wait until the click is done and see if anything was selected first.
|
|
// This is a bit of a weird compromise, for now.
|
|
const target_style = getComputedStyle(event.target);
|
|
if (target_style.userSelect !== "none") {
|
|
// Immediately show the window as focused, just don't refocus a specific control.
|
|
$w.$content.focus();
|
|
|
|
$w.one("pointerup pointercancel", () => {
|
|
requestAnimationFrame(() => { // this seems to make it more reliable in regards to double clicking
|
|
if (!getSelection().toString().trim()) {
|
|
refocus();
|
|
}
|
|
});
|
|
});
|
|
return;
|
|
}
|
|
// Set focus to the last focused control, which should be updated if a click just occurred.
|
|
refocus();
|
|
});
|
|
}
|
|
|
|
$w.on("keydown", (e) => {
|
|
if (e.isDefaultPrevented()) {
|
|
return;
|
|
}
|
|
if (e.ctrlKey || e.altKey || e.metaKey) {
|
|
return;
|
|
}
|
|
// console.log("keydown", e.key, e.target);
|
|
if (e.target.closest(".menus")) {
|
|
// console.log("keydown in menus");
|
|
return;
|
|
}
|
|
const $buttons = $w.$content.find("button");
|
|
const $focused = $(document.activeElement);
|
|
const focused_index = $buttons.index($focused);
|
|
switch (e.keyCode) {
|
|
case 40: // Down
|
|
case 39: // Right
|
|
if ($focused.is("button") && !e.shiftKey) {
|
|
if (focused_index < $buttons.length - 1) {
|
|
$buttons[focused_index + 1].focus();
|
|
e.preventDefault();
|
|
}
|
|
}
|
|
break;
|
|
case 38: // Up
|
|
case 37: // Left
|
|
if ($focused.is("button") && !e.shiftKey) {
|
|
if (focused_index > 0) {
|
|
$buttons[focused_index - 1].focus();
|
|
e.preventDefault();
|
|
}
|
|
}
|
|
break;
|
|
case 32: // Space
|
|
case 13: // Enter (doesn't actually work in chrome because the button gets clicked immediately)
|
|
if ($focused.is("button") && !e.shiftKey) {
|
|
$focused.addClass("pressed");
|
|
const release = () => {
|
|
$focused.removeClass("pressed");
|
|
$focused.off("focusout", release);
|
|
$(window).off("keyup", keyup);
|
|
};
|
|
const keyup = (e) => {
|
|
if (e.keyCode === 32 || e.keyCode === 13) {
|
|
release();
|
|
}
|
|
};
|
|
$focused.on("focusout", release);
|
|
$(window).on("keyup", keyup);
|
|
}
|
|
break;
|
|
case 9: { // Tab
|
|
// wrap around when tabbing through controls in a window
|
|
const $controls = find_tabstops($w.$content[0]);
|
|
if ($controls.length > 0) {
|
|
const focused_control_index = $controls.index($focused);
|
|
if (e.shiftKey) {
|
|
if (focused_control_index === 0) {
|
|
e.preventDefault();
|
|
$controls[$controls.length - 1].focus();
|
|
}
|
|
} else {
|
|
if (focused_control_index === $controls.length - 1) {
|
|
e.preventDefault();
|
|
$controls[0].focus();
|
|
}
|
|
}
|
|
}
|
|
break;
|
|
}
|
|
case 27: // Escape
|
|
// @TODO: make this optional, and probably default false
|
|
$w.close();
|
|
break;
|
|
}
|
|
});
|
|
|
|
$w.applyBounds = () => {
|
|
// TODO: outerWidth vs width? not sure
|
|
const bound_width = Math.max(document.body.scrollWidth, innerWidth);
|
|
const bound_height = Math.max(document.body.scrollHeight, innerHeight);
|
|
$w.css({
|
|
left: Math.max(0, Math.min(bound_width - $w.width(), $w.position().left)),
|
|
top: Math.max(0, Math.min(bound_height - $w.height(), $w.position().top)),
|
|
});
|
|
};
|
|
|
|
$w.bringTitleBarInBounds = () => {
|
|
// Try to make the titlebar always accessible
|
|
const bound_width = Math.max(document.body.scrollWidth, innerWidth);
|
|
const bound_height = Math.max(document.body.scrollHeight, innerHeight);
|
|
const min_horizontal_pixels_on_screen = 40; // enough for space past a close button
|
|
$w.css({
|
|
left: Math.max(
|
|
min_horizontal_pixels_on_screen - $w.outerWidth(),
|
|
Math.min(
|
|
bound_width - min_horizontal_pixels_on_screen,
|
|
$w.position().left
|
|
)
|
|
),
|
|
top: Math.max(0, Math.min(
|
|
bound_height - $w.$titlebar.outerHeight() - 5,
|
|
$w.position().top
|
|
)),
|
|
});
|
|
};
|
|
|
|
$w.center = () => {
|
|
$w.css({
|
|
left: (innerWidth - $w.width()) / 2 + window.scrollX,
|
|
top: (innerHeight - $w.height()) / 2 + window.scrollY,
|
|
});
|
|
$w.applyBounds();
|
|
};
|
|
|
|
|
|
$G.on("resize", $w.bringTitleBarInBounds);
|
|
|
|
var drag_offset_x, drag_offset_y, drag_pointer_x, drag_pointer_y, drag_pointer_id;
|
|
var update_drag = (e) => {
|
|
const pointerId = e.pointerId ?? e.originalEvent?.pointerId; // originalEvent doesn't exist for triggerHandler()
|
|
if (
|
|
drag_pointer_id === pointerId ||
|
|
pointerId === undefined || // (allowing synthetic events to affect the drag without pointerId)
|
|
drag_pointer_id === undefined || // (allowing real events to affect a drag started with a synthetic event without a pointerId, for jspaint's Eye Gaze Mode... uh...)
|
|
drag_pointer_id === 1234567890 // allowing real events to affect a drag started with a synthetic event with this fake pointerId, for jspaint's Eye Gaze Mode!!
|
|
// @TODO: find a better way to support synthetic events (could make the fake pointerId a formal part of the API contract at least...)
|
|
) {
|
|
drag_pointer_x = e.clientX ?? drag_pointer_x;
|
|
drag_pointer_y = e.clientY ?? drag_pointer_y;
|
|
}
|
|
$w.css({
|
|
left: drag_pointer_x + scrollX - drag_offset_x,
|
|
top: drag_pointer_y + scrollY - drag_offset_y,
|
|
});
|
|
};
|
|
$w.$titlebar.css("touch-action", "none");
|
|
$w.$titlebar.on("selectstart", (e) => { // preventing mousedown would break :active state, I'm not sure if just selectstart is enough...
|
|
e.preventDefault();
|
|
});
|
|
$w.$titlebar.on("mousedown", "button", (e) => {
|
|
// Prevent focus on titlebar buttons.
|
|
// This can break the :active state. In Firefox, a setTimeout before any focus() was enough,
|
|
// but now in Chrome 95, focus() breaks the :active state too, and setTimeout only delays the brokenness,
|
|
// so I have to use a CSS class now for the pressed state.
|
|
refocus();
|
|
// Emulate :enabled:active:hover state with .pressing class
|
|
const button = e.currentTarget;
|
|
if (!$(button).is(":enabled")) {
|
|
return;
|
|
}
|
|
button.classList.add("pressing");
|
|
const release = (event) => {
|
|
// blur is just to handle the edge case of alt+tabbing/ctrl+tabbing away
|
|
if (event && event.type === "blur") {
|
|
// if (document.activeElement?.tagName === "IFRAME") {
|
|
if (document.hasFocus()) {
|
|
return; // the window isn't really blurred; an iframe got focus
|
|
}
|
|
}
|
|
button.classList.remove("pressing");
|
|
$G.off("mouseup blur", release);
|
|
$(button).off("mouseenter", on_mouse_enter);
|
|
$(button).off("mouseleave", on_mouse_leave);
|
|
};
|
|
const on_mouse_enter = () => { button.classList.add("pressing"); };
|
|
const on_mouse_leave = () => { button.classList.remove("pressing"); };
|
|
$G.on("mouseup blur", release);
|
|
$(button).on("mouseenter", on_mouse_enter);
|
|
$(button).on("mouseleave", on_mouse_leave);
|
|
});
|
|
$w.$titlebar.on("pointerdown", (e) => {
|
|
if ($(e.target).closest("button").length) {
|
|
return;
|
|
}
|
|
if ($w.hasClass("maximized")) {
|
|
return;
|
|
}
|
|
const customEvent = $.Event("window-drag-start");
|
|
$w.trigger(customEvent);
|
|
if (customEvent.isDefaultPrevented()) {
|
|
return; // allow custom drag behavior of component windows in jspaint (Tools / Colors)
|
|
}
|
|
drag_offset_x = e.clientX + scrollX - $w.position().left;
|
|
drag_offset_y = e.clientY + scrollY - $w.position().top;
|
|
drag_pointer_x = e.clientX;
|
|
drag_pointer_y = e.clientY;
|
|
drag_pointer_id = (e.pointerId ?? e.originalEvent?.pointerId); // originalEvent doesn't exist for triggerHandler()
|
|
$G.on("pointermove", update_drag);
|
|
$G.on("scroll", update_drag);
|
|
$("body").addClass("dragging"); // for when mouse goes over an iframe
|
|
});
|
|
$G.on("pointerup pointercancel", (e) => {
|
|
const pointerId = e.pointerId ?? e.originalEvent?.pointerId; // originalEvent doesn't exist for triggerHandler()
|
|
if (pointerId !== drag_pointer_id && pointerId !== undefined) { return; } // (allowing synthetic events to affect the drag without pointerId)
|
|
$G.off("pointermove", update_drag);
|
|
$G.off("scroll", update_drag);
|
|
$("body").removeClass("dragging");
|
|
// $w.applyBounds(); // Windows doesn't really try to keep windows on screen
|
|
// but you also can't really drag off of the desktop, whereas here you can drag to way outside the web page.
|
|
$w.bringTitleBarInBounds();
|
|
drag_pointer_id = -1; // prevent bringTitleBarInBounds from making the window go to top left when unminimizing window from taskbar after previously dragging it
|
|
});
|
|
$w.$titlebar.on("dblclick", (e) => {
|
|
if ($component) {
|
|
$component.dock();
|
|
}
|
|
});
|
|
|
|
if (options.resizable) {
|
|
|
|
const HANDLE_MIDDLE = 0;
|
|
const HANDLE_START = -1;
|
|
const HANDLE_END = 1;
|
|
const HANDLE_LEFT = HANDLE_START;
|
|
const HANDLE_RIGHT = HANDLE_END;
|
|
const HANDLE_TOP = HANDLE_START;
|
|
const HANDLE_BOTTOM = HANDLE_END;
|
|
|
|
[
|
|
[HANDLE_TOP, HANDLE_RIGHT], // ↗
|
|
[HANDLE_TOP, HANDLE_MIDDLE], // ↑
|
|
[HANDLE_TOP, HANDLE_LEFT], // ↖
|
|
[HANDLE_MIDDLE, HANDLE_LEFT], // ←
|
|
[HANDLE_BOTTOM, HANDLE_LEFT], // ↙
|
|
[HANDLE_BOTTOM, HANDLE_MIDDLE], // ↓
|
|
[HANDLE_BOTTOM, HANDLE_RIGHT], // ↘
|
|
[HANDLE_MIDDLE, HANDLE_RIGHT], // →
|
|
].forEach(([y_axis, x_axis]) => {
|
|
// const resizes_height = y_axis !== HANDLE_MIDDLE;
|
|
// const resizes_width = x_axis !== HANDLE_MIDDLE;
|
|
const $handle = $("<div>").addClass("handle").appendTo($w);
|
|
|
|
let cursor = "";
|
|
if (y_axis === HANDLE_TOP) { cursor += "n"; }
|
|
if (y_axis === HANDLE_BOTTOM) { cursor += "s"; }
|
|
if (x_axis === HANDLE_LEFT) { cursor += "w"; }
|
|
if (x_axis === HANDLE_RIGHT) { cursor += "e"; }
|
|
cursor += "-resize";
|
|
|
|
// Note: MISNOMER: innerWidth() is less "inner" than width(), because it includes padding!
|
|
// Here's a little diagram of sorts:
|
|
// outerWidth(true): margin, [ outerWidth(): border, [ innerWidth(): padding, [ width(): content ] ] ]
|
|
const handle_thickness = ($w.outerWidth() - $w.width()) / 2; // padding + border
|
|
const border_width = ($w.outerWidth() - $w.innerWidth()) / 2; // border; need to outset the handles by this amount so they overlap the border + padding, and not the content
|
|
const window_frame_height = $w.outerHeight() - $w.$content.outerHeight(); // includes titlebar and borders, padding, but not content
|
|
const window_frame_width = $w.outerWidth() - $w.$content.outerWidth(); // includes borders, padding, but not content
|
|
$handle.css({
|
|
position: "absolute",
|
|
top: y_axis === HANDLE_TOP ? -border_width : y_axis === HANDLE_MIDDLE ? `calc(${handle_thickness}px - ${border_width}px)` : "",
|
|
bottom: y_axis === HANDLE_BOTTOM ? -border_width : "",
|
|
left: x_axis === HANDLE_LEFT ? -border_width : x_axis === HANDLE_MIDDLE ? `calc(${handle_thickness}px - ${border_width}px)` : "",
|
|
right: x_axis === HANDLE_RIGHT ? -border_width : "",
|
|
width: x_axis === HANDLE_MIDDLE ? `calc(100% - ${handle_thickness}px * 2 + ${border_width * 2}px)` : `${handle_thickness}px`,
|
|
height: y_axis === HANDLE_MIDDLE ? `calc(100% - ${handle_thickness}px * 2 + ${border_width * 2}px)` : `${handle_thickness}px`,
|
|
// background: x_axis === HANDLE_MIDDLE || y_axis === HANDLE_MIDDLE ? "rgba(255,0,0,0.4)" : "rgba(0,255,0,0.8)",
|
|
touchAction: "none",
|
|
cursor,
|
|
});
|
|
|
|
let rect;
|
|
let resize_offset_x, resize_offset_y, resize_pointer_x, resize_pointer_y, resize_pointer_id;
|
|
$handle.on("pointerdown", (e) => {
|
|
e.preventDefault();
|
|
|
|
$G.on("pointermove", handle_pointermove);
|
|
$G.on("scroll", update_resize); // scroll doesn't have clientX/Y, so we have to remember it
|
|
$("body").addClass("dragging"); // for when mouse goes over an iframe
|
|
$G.on("pointerup pointercancel", end_resize);
|
|
|
|
rect = {
|
|
x: $w.position().left,
|
|
y: $w.position().top,
|
|
width: $w.outerWidth(),
|
|
height: $w.outerHeight(),
|
|
};
|
|
|
|
resize_offset_x = e.clientX + scrollX - rect.x - (x_axis === HANDLE_RIGHT ? rect.width : 0);
|
|
resize_offset_y = e.clientY + scrollY - rect.y - (y_axis === HANDLE_BOTTOM ? rect.height : 0);
|
|
resize_pointer_x = e.clientX;
|
|
resize_pointer_y = e.clientY;
|
|
resize_pointer_id = (e.pointerId ?? e.originalEvent?.pointerId); // originalEvent doesn't exist for triggerHandler()
|
|
|
|
$handle[0].setPointerCapture(resize_pointer_id); // keeps cursor consistent when mouse moves over other elements
|
|
|
|
// handle_pointermove(e); // was useful for checking that the offset is correct (should not do anything, if it's correct!)
|
|
});
|
|
function handle_pointermove(e) {
|
|
const pointerId = e.pointerId ?? e.originalEvent?.pointerId; // originalEvent doesn't exist for triggerHandler()
|
|
if (pointerId !== resize_pointer_id && pointerId !== undefined) { return; } // (allowing synthetic events to affect the drag without pointerId)
|
|
resize_pointer_x = e.clientX;
|
|
resize_pointer_y = e.clientY;
|
|
update_resize();
|
|
}
|
|
function end_resize(e) {
|
|
const pointerId = e.pointerId ?? e.originalEvent?.pointerId; // originalEvent doesn't exist for triggerHandler()
|
|
if (pointerId !== resize_pointer_id && pointerId !== undefined) { return; } // (allowing synthetic events to affect the drag without pointerId)
|
|
$G.off("pointermove", handle_pointermove);
|
|
$G.off("scroll", onscroll);
|
|
$("body").removeClass("dragging");
|
|
$G.off("pointerup pointercancel", end_resize);
|
|
$w.bringTitleBarInBounds();
|
|
}
|
|
function update_resize() {
|
|
const mouse_x = resize_pointer_x + scrollX - resize_offset_x;
|
|
const mouse_y = resize_pointer_y + scrollY - resize_offset_y;
|
|
let delta_x = 0;
|
|
let delta_y = 0;
|
|
let width, height;
|
|
if (x_axis === HANDLE_RIGHT) {
|
|
delta_x = 0;
|
|
width = ~~(mouse_x - rect.x);
|
|
} else if (x_axis === HANDLE_LEFT) {
|
|
delta_x = ~~(mouse_x - rect.x);
|
|
width = ~~(rect.x + rect.width - mouse_x);
|
|
} else {
|
|
width = ~~(rect.width);
|
|
}
|
|
if (y_axis === HANDLE_BOTTOM) {
|
|
delta_y = 0;
|
|
height = ~~(mouse_y - rect.y);
|
|
} else if (y_axis === HANDLE_TOP) {
|
|
delta_y = ~~(mouse_y - rect.y);
|
|
height = ~~(rect.y + rect.height - mouse_y);
|
|
} else {
|
|
height = ~~(rect.height);
|
|
}
|
|
let new_rect = {
|
|
x: rect.x + delta_x,
|
|
y: rect.y + delta_y,
|
|
width,
|
|
height,
|
|
};
|
|
|
|
new_rect.width = Math.max(1, new_rect.width);
|
|
new_rect.height = Math.max(1, new_rect.height);
|
|
|
|
// Constraints
|
|
if (options.constrainRect) {
|
|
new_rect = options.constrainRect(new_rect, x_axis, y_axis);
|
|
}
|
|
new_rect.width = Math.max(new_rect.width, options.minOuterWidth ?? 100);
|
|
new_rect.height = Math.max(new_rect.height, options.minOuterHeight ?? 0);
|
|
new_rect.width = Math.max(new_rect.width, (options.minInnerWidth ?? 0) + window_frame_width);
|
|
new_rect.height = Math.max(new_rect.height, (options.minInnerHeight ?? 0) + window_frame_height);
|
|
// prevent free movement via resize past minimum size
|
|
if (x_axis === HANDLE_LEFT) {
|
|
new_rect.x = Math.min(new_rect.x, rect.x + rect.width - new_rect.width);
|
|
}
|
|
if (y_axis === HANDLE_TOP) {
|
|
new_rect.y = Math.min(new_rect.y, rect.y + rect.height - new_rect.height);
|
|
}
|
|
|
|
$w.css({
|
|
top: new_rect.y,
|
|
left: new_rect.x,
|
|
});
|
|
$w.outerWidth(new_rect.width);
|
|
$w.outerHeight(new_rect.height);
|
|
}
|
|
});
|
|
}
|
|
|
|
$w.$Button = (text, handler) => {
|
|
var $b = $(E("button"))
|
|
.appendTo($w.$content)
|
|
.text(text)
|
|
.on("click", () => {
|
|
if (handler) {
|
|
handler();
|
|
}
|
|
$w.close();
|
|
});
|
|
return $b;
|
|
};
|
|
$w.title = title => {
|
|
if (title) {
|
|
$w.$title.text(title);
|
|
$w.trigger("title-change");
|
|
if ($w.task) {
|
|
$w.task.updateTitle();
|
|
}
|
|
return $w;
|
|
} else {
|
|
return $w.$title.text();
|
|
}
|
|
};
|
|
$w.getTitle = () => {
|
|
return $w.title();
|
|
};
|
|
let animating_titlebar = false;
|
|
let when_done_animating_titlebar = []; // queue of functions to call when done animating,
|
|
// so maximize() / minimize() / restore() eventually gives the same result as if there was no animation
|
|
$w.animateTitlebar = (from, to, callback = () => { }) => {
|
|
// flying titlebar animation
|
|
animating_titlebar = true;
|
|
const $eye_leader = $w.$titlebar.clone(true);
|
|
$eye_leader.find("button").remove();
|
|
$eye_leader.appendTo("body");
|
|
const duration_ms = $Window.OVERRIDE_TRANSITION_DURATION ?? 200; // TODO: how long?
|
|
const duration_str = `${duration_ms}ms`;
|
|
$eye_leader.css({
|
|
transition: `left ${duration_str} linear, top ${duration_str} linear, width ${duration_str} linear, height ${duration_str} linear`,
|
|
position: "fixed",
|
|
zIndex: 10000000,
|
|
pointerEvents: "none",
|
|
left: from.left,
|
|
top: from.top,
|
|
width: from.width,
|
|
height: from.height,
|
|
});
|
|
setTimeout(() => {
|
|
$eye_leader.css({
|
|
left: to.left,
|
|
top: to.top,
|
|
width: to.width,
|
|
height: to.height,
|
|
});
|
|
}, 5);
|
|
let handled_transition_completion = false;
|
|
const handle_transition_completion = () => {
|
|
if (handled_transition_completion) {
|
|
return; // ignore multiple calls (an idempotency pattern)
|
|
} else {
|
|
handled_transition_completion = true;
|
|
}
|
|
animating_titlebar = false;
|
|
$eye_leader.remove();
|
|
callback();
|
|
when_done_animating_titlebar.shift()?.(); // relies on animating_titlebar = false;
|
|
};
|
|
$eye_leader.on("transitionend transitioncancel", handle_transition_completion);
|
|
setTimeout(handle_transition_completion, duration_ms * 1.2);
|
|
};
|
|
$w.close = (force) => {
|
|
if (force && force !== true) {
|
|
throw new TypeError("force must be a boolean or undefined, not " + Object.prototype.toString.call(force));
|
|
}
|
|
if (!force) {
|
|
var e = $.Event("close");
|
|
$w.trigger(e);
|
|
if (e.isDefaultPrevented()) {
|
|
return;
|
|
}
|
|
}
|
|
if ($component) {
|
|
$component.detach();
|
|
}
|
|
$w.closed = true;
|
|
$event_target.triggerHandler("closed");
|
|
$w.trigger("closed");
|
|
// TODO: change usages of "close" to "closed" where appropriate
|
|
// and probably rename the "close" event ("before[-]close"? "may-close"? "close-request"?)
|
|
|
|
// MUST be after any events are triggered!
|
|
$w.remove();
|
|
|
|
// TODO: support modals, which should focus what was focused before the modal was opened.
|
|
// (Note: must consider the element being removed from the DOM, or hidden, or made un-focusable)
|
|
// (Also: modals should steal focus / be brought to the front when focusing the parent window, and the parent window's content should be inert/uninteractive)
|
|
|
|
// Focus next-topmost window
|
|
var $next_topmost = $($(".window:visible").toArray().sort((a, b) => b.style.zIndex - a.style.zIndex)[0]);
|
|
$next_topmost.triggerHandler("refocus-window");
|
|
|
|
// Cleanup
|
|
clean_up_debug_focus_tracking();
|
|
};
|
|
$w.closed = false;
|
|
|
|
let current_menu_bar;
|
|
// @TODO: should this be like setMenus(menu_definitions)?
|
|
// It seems like setMenuBar(menu_bar) might be prone to bugs
|
|
// trying to set the same menu bar on multiple windows.
|
|
$w.setMenuBar = (menu_bar) => {
|
|
// $w.find(".menus").remove(); // ugly, if only because of the class name haha
|
|
if (current_menu_bar) {
|
|
current_menu_bar.element.remove();
|
|
}
|
|
if (menu_bar) {
|
|
$w.$titlebar.after(menu_bar.element);
|
|
menu_bar.setKeyboardScope($w[0]);
|
|
current_menu_bar = menu_bar;
|
|
}
|
|
};
|
|
|
|
if (options.title) {
|
|
$w.title(options.title);
|
|
}
|
|
|
|
if (!$component) {
|
|
$w.center();
|
|
}
|
|
|
|
// mustHaveMethods($w, windowInterfaceMethods);
|
|
|
|
return $w;
|
|
}
|
|
|
|
function $FormWindow(title) {
|
|
var $w = new $Window();
|
|
|
|
$w.title(title);
|
|
$w.$form = $(E("form")).appendTo($w.$content);
|
|
$w.$main = $(E("div")).appendTo($w.$form);
|
|
$w.$buttons = $(E("div")).appendTo($w.$form).addClass("button-group");
|
|
|
|
$w.$Button = (label, action) => {
|
|
var $b = $(E("button")).appendTo($w.$buttons).text(label);
|
|
$b.on("click", (e) => {
|
|
// prevent the form from submitting
|
|
// @TODO: instead, prevent the form's submit event
|
|
e.preventDefault();
|
|
|
|
action();
|
|
});
|
|
|
|
$b.on("pointerdown", () => {
|
|
$b.focus();
|
|
});
|
|
|
|
return $b;
|
|
};
|
|
|
|
return $w;
|
|
}
|
|
|
|
exports.$Window = $Window;
|
|
exports.$FormWindow = $FormWindow;
|
|
|
|
})(window);
|