当前版本为历史版本V1.4。请点击此处以查询所有版本文章。
简介
本组件可实现在 HTML 页面中创建可自由移动、最大化、最小化的窗口。
功能
- 窗口可最大化、最小化；
- 窗口可自由移动；
- 支持鼠标、触控移动窗口；
- 支持更改窗口颜色；
- 适应浏览器窗口大小改变，窗口总在用户视野内；
- 用户点击的窗口自动置顶于其他窗口之上。
本次更新
- 修复了触屏移动窗口时，触摸手势会使页面滚动以及进行其他默认行为的问题；
- 新增全局变量iwindow_attributes，记录所有窗口的部分属性，包含创建窗口时parameter中的合法属性、窗口菜单和其他部分属性；
- 移除了全局变量iwindow_menus，其功能转移至iwindow_attributes；
- 新增窗口按钮样式5、6，样式5为菜单、按钮（若menu为null，则转至样式3），样式6为菜单（若menu为null，则转至样式4）；
- 修复了当最大化按钮、最小化按钮和关闭按钮不存在时，使用函数更改窗口大小样式会报错的问题；
- 函数iwindow_normal(i)更名为iwindow_normalize(i)，函数iwindow_normal_execute(i)更名为iwindow_normalize_execute(i)；
- 修复了以最小化样式（size=3）创建窗口时，窗口位置不正常的问题；
- 新增自定义事件iwindow_normalize，由iwindow_normalize_execute(i)还原窗口后触发；
- 修复了menu为稀疏数组时，菜单创建不正确的问题。
近期更新
- 移除了自定义类型Dictionary，改用Array类型，移除了Dictionary类型相关函数：Dictionary()，add(key, value)，find(key)，remove(key)，showAll()，count()，clear()；
- 修复代码中的函数名错误：window_window_start_move_touch修正为iwindow_window_start_move_touch，window_window_on_move_touch修正为iwindow_window_on_move_touch；
- iwindow(parameter)函数将返回窗口编号；
- 在全部函数列表中补充了iwindow_menu_close(i)，先前代码已有此函数但函数表中未列出；
- 在全部函数列表中补充了部分函数的解释；
- 添加常用函数 iwindow_normal(i) ，可指定还原某一窗口；
- 添加函数 iwindow_normal_execute(i) ，还原窗口执行函数；
- 修复了使用函数 iwindow_maximize(i) 会导致最大化窗口还原为正常窗口的问题；
- 修复了使用函数 iwindow_minimize(i) 会导致最小化窗口还原为正常窗口的问题；
- 移除了自定义事件 iwindow_d_m_max ，并由 iwindow_d_maximize 代替。
预览
试用
试用仅对最新版本可用，当前版本为历史版本V1.4。请点击此处以寻找最新版本的文章。
使用方法（JavaScript）
常用函数
创建窗口
iwindow(parameter)| 参数名 | 描述 | 可选值 | 值的描述 | 缺省值 |
| parameter | 参数字典 | 数组字典 | 包含下表中的键与值 | 对应各键的缺省值 |
| 返回值类型 | 解释 |
| Int | 窗口编号 |
parameter 字典键值表
| 参数名 | 描述 | 可选值 | 值的描述 | 缺省值 |
| height | 窗口高 | 正整数，大于或等于100 | 单位px | 100 |
| width | 窗口宽 | 正整数，大于或等于150 | 单位px | 150 |
| title | 窗口标题 | 字符串 | 任意字符串 | “窗口”+编号 |
| content | 窗口内容 | 字符串 | 任意字符串 | null |
| mode | 窗口按钮样式 | 数字1,2,3,4,5,6 | 1: 菜单、最小化、最大化、关闭 （若menu为null，则转向2） 2: 最小化、最大化、关闭 3: 关闭 4: 无按钮 5: 菜单、关闭（若menu为null，则转向3） 6: 菜单（若menu为null，则转向4） | 1 |
| menu | 菜单 | 二维数组Array | 每个字数组中第一项为显示文字，第二项为函数名称，其调用时附带参数“窗口编号” | null |
| size | 窗口大小样式 | 数字1,2,3 | 1: 普通 2: 最大化 3: 最小化 | 1 |
| color | 窗口颜色 | 字符串 | HEX或RGB或RGBA，决定标题栏、内容部分的背景颜色，以及文字颜色（自动调整明暗两色） | #FFFFFF |
| x | 窗口横坐标 | 数字 | 单位px | null |
| y | 窗口纵坐标 | 数字 | 单位px | null |
| mask | 是否生成屏障 | 布尔值 | true或false | false |
| content_overflow | 指定内容Overflow属性 | 字符串 | 参照CSS标准 | auto |
获取窗口编号
iwindow(parameter)的返回值为窗口编号。
或者尝试定位到父元素”iwindow_frame_”+i（i为窗口编号，如iwindow_frame_1），记为el，
则可通过以下代码获取窗口编号
var i = el.getAttribute("iNumber");更改窗口颜色
iwindow_change_color(color, i)| 参数名 | 描述 | 可选值 | 解释 | 缺省值 |
| color | 目标颜色 | 字符串 | HEX或RGB或RGBA | #FFFFFF |
| i | 窗口编号 | 正整数 | 指定更改某一窗口颜色，缺省则为更改所有窗口颜色 | null |
设置窗口置顶
iwindow_top(i)| 参数名 | 描述 | 可选值 | 解释 | 缺省值 |
| i | 窗口编号 | 正整数 | 指定置顶某一窗口，缺省无效 | null |
关闭窗口
iwindow_close(i)| 参数名 | 描述 | 可选值 | 解释 | 缺省值 |
| i | 窗口编号 | 正整数 | 指定关闭某一窗口，缺省则为关闭所有窗口 | null |
最大化窗口
iwindow_maximize(i)| 参数名 | 描述 | 可选值 | 解释 | 缺省值 |
| i | 窗口编号 | 正整数 | 指定最大化某一窗口，缺省则为最大化所有窗口 | null |
最小化窗口
iwindow_minimize(i)| 参数名 | 描述 | 可选值 | 解释 | 缺省值 |
| i | 窗口编号 | 正整数 | 指定最小化某一窗口，缺省则为最小化所有窗口 | null |
还原窗口
iwindow_normalize(i)| 参数名 | 描述 | 可选值 | 解释 | 缺省值 |
| i | 窗口编号 | 正整数 | 指定还原某一窗口，缺省则为还原所有窗口 | null |
打开窗口菜单
iwindow_create_menu(i, menu, cx, cy)| 参数名 | 描述 | 可选值 | 解释 | 缺省值 |
| i | 窗口编号 | 正整数 | 指定打开某一窗口的菜单 | null |
| menu | 菜单 | 二维数组Array | 指定要打开的菜单，每个字数组中第一项为显示文字，第二项为函数名称，其调用时附带参数“窗口编号”，缺省则为打开创建窗口时的菜单，以创建窗口时指定的menu为准，而无论是否创建菜单按钮 | null |
| cx | 菜单横坐标 | 数字 | 指定菜单横坐标，缺省则为event.clientX，若event.clientX为null，则按如下过程处理： 若菜单按钮存在且可见，则cx=菜单横坐标+15，否则，cx=窗口横坐标+15 且无论如何，坐标都将坐标处理为菜单在屏幕中完整可见 | null |
| cy | 菜单纵坐标 | 数字 | 指定菜单纵坐标缺省则为event.clientY，若event.clientY为null，则按如下过程处理： 若菜单按钮存在且可见，则cy=菜单纵坐标+15，否则，cy=窗口纵坐标+15 且无论如何，坐标都将坐标处理为菜单在屏幕中完整可见 | null |
全部函数
| 函数 | 参数类型 | 参数解释 | 返回类型 | 返回值解释 | 解释 |
| iwindow(parameter) | parameter:Array | parameter:数组字典，含指定参数 | Int | 窗口编号 | 创建窗口 |
| iwindow_change_color(color, i) | color:String i:Int | color:HEX颜色代码 i:窗口编号 | void | null | 更改窗口颜色 |
| iwindow_top(i) | i:Int | i:窗口编号 | void | null | 设置窗口置顶 |
| iwindow_close(i) | i:Int | i:窗口编号 | void | null | 关闭窗口 |
| iwindow_maximize(i) | i:Int | i:窗口编号 | void | null | 最大化窗口 |
| iwindow_minimize(i) | i:Int | i:窗口编号 | void | null | 最小化窗口 |
| iwindow_normalize(i) | i:Int | i:窗口编号 | void | null | 还原窗口 |
| iwindow_create_menu(i, menu, cx, cy) | i:Int | i:窗口编号 iwindow_menu:菜单二维数组 cx:菜单横坐标 cy:菜单纵坐标 | void | null | 打开窗口菜单 |
| iwindow_dynamicColor(bg) | bg:String | bg:HEX颜色代码 | String | HEX颜色代码 | 根据颜色返回亮/暗文字颜色 |
| iwindow_isLight(rgb = [0, 0, 0]) | rgb:Array | rgb:RGB颜色数组 | Boolean | true/false | 判断颜色亮/暗 |
| iwindow_HexToRgb(str) | str:String | str:HEX颜色代码 | Array | RGB颜色数组 | 将HEX颜色代码转换为RGB颜色数组 |
| iwindow_RgbToHex(str) | str:String | str:RGB颜色代码 | String | HEX颜色代码 | 将RGB颜色代码转换为HEX颜色代码 |
| iwindow_getDarkColor(color, level) | color:String level:Int | color:HEX颜色代码 level:程度值(0~1) | String | HEX颜色代码 | 将颜色加深 |
| iwindow_getLightColor(color, level) | color:String level:Int | color:HEX颜色代码 level:程度值(0~1) | String | HEX颜色代码 | 将颜色变浅 |
| iwindow_window_create_menu(i, iwindow_menu, mx, my) | i:Int iwindow_menu:Array mx:Int my:Int | i:窗口编号 iwindow_menu:菜单二维数组 mx:菜单横坐标 my:菜单纵坐标 | void | null | 创建菜单的操作 |
| iwindow_menu_create_line(i, x, iwindow_menu) | i:Int x:Int iwindow_menu:Array | i:窗口编号 x:行编号 iwindow_menu:菜单二维数组 | void | null | 创建菜单单行内容 |
| iwindow_menu_close(i) | i:Int | i:窗口编号 | void | null | 删除菜单（含操作） |
| iwindow_window_start_move(i) | i:Int | i:窗口编号 | void | null | 开始通过鼠标移动窗口 |
| iwindow_window_on_move(i, iwindow_delta_x, iwindow_delta_y) | i:Int iwindow_delta_x:Int iwindow_delta_y:Int | i:窗口编号 iwindow_delta_x:鼠标位置相对窗口原位置的差值 iwindow_delta_y:鼠标位置相对窗口原位置的差值 | void | null | 正在通过鼠标移动窗口 |
| iwindow_window_complete_move(i) | i:Int | i:窗口编号 | void | null | 完成通过鼠标移动窗口 |
| window_window_start_move_touch(i) | i:Int | i:窗口编号 | void | null | 开始通过触摸移动窗口 |
| window_window_on_move_touch(i) | i:Int | i:窗口编号 | void | null | 正在通过触摸移动窗口 |
| iwindow_window_complete_move_touch(i) | i:Int | i:窗口编号 | void | null | 完成通过触摸移动窗口 |
| iwindow_window_move_step(i, w, z) | i:Int w:Int z:Int | i:窗口编号 w:实时横坐标 z:实时纵坐标 | void | null | 移动窗口操作 |
| iwindow_min_array_add(i) | i:Int | i:窗口编号 | void | null | 向 iwindow_min_array 头部添加指定窗口编号 |
| iwindow_min_array_remove(i) | i:Int | i:窗口编号 | void | null | 在 iwindow_min_array 中移除指定窗口编号 |
| iwindow_min_sort() | void | null | void | null | 按照 iwindow_min_array 对最小化窗口排序 |
| iwindow_change_color_execute(color, i) | color:String i:Int | color:HEX颜色代码 i:窗口编号 | void | null | 更改窗口颜色操作 |
| iwindow_top_execute(i, m) | i:Int m:Int | i:要置顶的窗口编号 m:尝试操作的窗口编号 | void | null | 尝试置顶窗口操作 |
| iwindow_close_execute(i) | i:Int | i:窗口编号 | void | null | 关闭窗口操作 |
| iwindow_maximize_execute(i) | i:Int | i:窗口编号 | void | null | 最大化窗口操作 |
| iwindow_minimize_execute(i) | i:Int | i:窗口编号 | void | null | 最小化窗口操作 |
| iwindow_normalize_execute(i) | i:Int | i:窗口编号 | void | null | 还原窗口操作 |
| iwindow_check_body_overflow() | void | null | void | null | 按照是否有窗口最大化来显示/隐藏页面滚动条 |
自定义事件（CustomEvent）
本组件中使用以下自定义事件：
| 事件名 | customEventInit | 解释 |
| iwindow_create | { detail: { “i”: i } } | 已创建窗口，编号为i |
| iwindow_create_menu | { detail: { “i”: i } } | 已创建窗口菜单，编号为i |
| iwindow_top | { detail: { “i”: i } } | 已置顶窗口，编号为i |
| iwindow_close | { detail: { “i”: i } } | 已关闭窗口，编号为i |
| iwindow_maximize | { detail: { “i”: i } } | 已最大化窗口，编号为i |
| iwindow_d_maximize | { detail: { “i”: i } } | 已从最大化还原窗口，编号为i |
| iwindow_minimize | { detail: { “i”: i } } | 已最小化窗口，编号为i |
| iwindow_d_minimize | { detail: { “i”: i } } | 已从最小化还原窗口，编号为i |
| iwindow_normalize | { detail: { “i”: i } } | 已还原窗口大小，编号为i |
| iwindow_moving | { detail: { “i”: i, “x”: x, “y”: y } } | 正在移动窗口，编号为i，横坐标为x，纵坐标为y |
| iwindow_moved | { detail: { “i”: i, “x”: x, “y”: y } } | 完成移动窗口，编号为i，横坐标为x，纵坐标为y |
全局变量
本组件中使用以下全局变量：
| 变量名 | 类型 | 解释 |
| iwindow_min_array | Array | 记录所有最小化的窗口编号，越新出现的最小化窗口，其窗口编号在数组的位置越前 |
| iwindow_attributes | Array | 记录所有窗口的部分属性，包含创建窗口时parameter中的合法属性、窗口菜单和其他部分属性 |
全局事件监听器
本组件中使用以下全局事件监听器：
| 事件名 | 解释 |
| resize | 适应窗口大小变化，调整最大化的窗口大小，调整在可见区域外的窗口位置 |
代码（JavaScript）
//version 1.4
//parameter 字典类型 可含如下键与值：
//height 窗口高 正整数，大于或等于100 缺省值为100
//width 窗口宽 正整数，大于或等于150 缺省值为150
//title 窗口标题 字符串 缺省值为“窗口”+编号
//content 窗口内容 字符串 缺省值为null
//mode 窗口按钮样式 数字1,2,3,4,5,6 缺省值为1
// 1 菜单、最小化、最大化、关闭 （若menu为null，则转向2）
// 2 最小化、最大化、关闭
// 3 关闭
// 4 无按钮
// 5 菜单、关闭（若menu为null，则转向3）
// 6 菜单（若menu为null，则转向4）
//menu 菜单 二维数组Array，例如 [["关于", about], ["帮助", help], ["使用", use]] 缺省值为null
//size 窗口大小样式 数字1,2,3 缺省值为1
// 1 普通
// 2 最大化
// 3 最小化
//color 窗口颜色 字符串，HEX或RGB或RGBA，决定标题栏、内容部分的背景颜色，以及文字颜色（自动调整明暗两色），缺省值为"#FFFFFF"
//x 窗口横坐标 数字 缺省值为null
//y 窗口纵坐标 数字 缺省值为null
//mask 是否生成屏障 布尔值（true或false），缺省值为false
//content_overflow 指定内容Overflow属性 字符串 缺省值为auto
function iwindow(parameter) {
for (var i = 1; ; i++) {
if (iwindow_attributes[i] == null) break;
}
window.iwindow_attributes[i] = new Array();
if (parameter.width == null || parameter.width < 150) iwindow_attributes[i].width = 150;
else iwindow_attributes[i].width = parameter.width;
if (parameter.height == null || parameter.height < 100) iwindow_attributes[i].height = 100;
else iwindow_attributes[i].height = parameter.height;
if (parameter.title == null) iwindow_attributes[i].title = "窗口_" + i;
else iwindow_attributes[i].title = parameter.title;
if (parameter.content == null) iwindow_attributes[i].content = "窗口内容_" + i;
else iwindow_attributes[i].content = parameter.content;
if (parameter.mode != 1 && parameter.mode != 2 && parameter.mode != 3 && parameter.mode != 4 && parameter.mode != 5 && parameter.mode != 6) iwindow_attributes[i].mode = 1;
else iwindow_attributes[i].mode = parameter.mode;
if (iwindow_attributes[i].mode == 1 && parameter.menu == null) iwindow_attributes[i].mode = 2;
else if (iwindow_attributes[i].mode == 5 && parameter.menu == null) iwindow_attributes[i].mode = 3;
else if (iwindow_attributes[i].mode == 6 && parameter.menu == null) iwindow_attributes[i].mode = 4;
if (parameter.size != 1 && parameter.size != 2 && parameter.size != 3) iwindow_attributes[i].size = 1;
else iwindow_attributes[i].size = parameter.size;
if (parameter.mask != true) iwindow_attributes[i].mask = false;
else iwindow_attributes[i].mask = parameter.mask;
if (parameter.color == null) iwindow_attributes[i].color = "#FFFFFF";
else iwindow_attributes[i].color = parameter.color;
if (parameter.content_overflow == null) iwindow_attributes[i].content_overflow = "auto";
else iwindow_attributes[i].content_overflow = parameter.content_overflow;
if (parameter.menu != null) iwindow_attributes[i].menu = parameter.menu;
iwindow_attributes[i].x = parameter.x;
iwindow_attributes[i].y = parameter.y;
window.iwindow_top_zIndex = 10001;
//框架
var div = document.createElement("div");
div.id = "iwindow_frame_" + i;
div.setAttribute("iNumber", i);
document.body.appendChild(div);
//框架->窗口
var div = document.createElement("div");
div.id = "iwindow_window_" + i;
div.style.transition = "all .3s ease";
if (iwindow_attributes[i].mask) div.style.zIndex = "2000000002";
else div.style.zIndex = "10001";
div.style.color = "#000000";
div.style.fontSize = "14px";
div.style.lineHeight = "24px";
div.style.position = "fixed";
div.style.borderRadius = "5px";
div.style.webkitBoxShadow = "2px 2px 10px #909090";
div.style.boxShadow = "2px 2px 10px #909090";
div.style.backgroundColor = "#FFFFFF";
div.style.width = iwindow_attributes[i].width + "px";
div.style.height = iwindow_attributes[i].height + "px";
div.style.opacity = "0";
iwindow_attributes[i]["display_mode"] = "normal";
iwindow_attributes[i]["dafault_width"] = iwindow_attributes[i].width + "px";
iwindow_attributes[i]["dafault_height"] = iwindow_attributes[i].height + "px";
iwindow_attributes[i]["dafault_title_width"] = iwindow_attributes[i].width + "px";
div.onmousedown = function () {
iwindow_top(i);
}
div.ontouchstart = function () {
iwindow_top(i);
}
if (iwindow_attributes[i].mode == 2) iwindow_attributes[i]["dafault_title_words_width"] = iwindow_attributes[i].width - 5 - 90 + "px";
else if (iwindow_attributes[i].mode == 3) iwindow_attributes[i]["dafault_title_words_width"] = iwindow_attributes[i].width - 5 - 30 + "px";
else if (iwindow_attributes[i].mode == 4) iwindow_attributes[i]["dafault_title_words_width"] = iwindow_attributes[i].width - 5 + "px";
else if (iwindow_attributes[i].mode == 5) iwindow_attributes[i]["dafault_title_words_width"] = iwindow_attributes[i].width - 5 - 60 + "px";
else if (iwindow_attributes[i].mode == 6) iwindow_attributes[i]["dafault_title_words_width"] = iwindow_attributes[i].width - 5 - 30 + "px";
else iwindow_attributes[i]["dafault_title_words_width"] = iwindow_attributes[i].width - 5 - 120 + "px";
document.getElementById("iwindow_frame_" + i).appendChild(div);
var mx;
if (iwindow_attributes[i].x == null) mx = document.documentElement.clientWidth - document.getElementById("iwindow_window_" + i).offsetWidth - 80 + "px";
else mx = iwindow_attributes[i].x + 10 + "px";
document.getElementById("iwindow_window_" + i).style.left = mx;
var uy;
if (iwindow_attributes[i].y == null) uy = document.documentElement.clientHeight - document.getElementById("iwindow_window_" + i).offsetHeight - 30 + "px";
else uy = iwindow_attributes[i].y + "px";
document.getElementById("iwindow_window_" + i).style.top = uy;
//框架->窗口->标题
var div = document.createElement("div");
div.id = "iwindow_window_title_" + i;
div.style.webkitUserSelect = "none";
div.style.userSelect = "none";
div.onselectstart = function () { return false; }
div.style.borderRadius = "5px 5px 0 0";
div.style.height = "30px";
div.style.borderBottom = "solid 1px #F2F2F2";
div.style.width = iwindow_attributes[i]["dafault_title_width"];
document.getElementById("iwindow_window_" + i).appendChild(div);
//框架->窗口->标题->标题文字
var div = document.createElement("div");
div.id = "iwindow_window_title_words_" + i;
div.style.float = "left";
div.style.fontSize = "14px";
div.style.lineHeight = "30px";
div.style.padding = "0 0 0 5px";
div.style.overflow = "hidden";
div.style.textOverflow = "ellipsis";
div.style.whiteSpace = "nowrap";
div.style.width = iwindow_attributes[i]["dafault_title_words_width"];
div.innerHTML = iwindow_attributes[i].title;
div.style.cursor = "move";
div.onmousedown = function () {
iwindow_window_start_move(i);
}
div.ontouchstart = function () {
iwindow_window_start_move_touch(i);
}
div.ontouchmove = function () {
iwindow_window_on_move_touch(i);
}
div.ontouchend = function () {
iwindow_window_complete_move_touch(i);
}
div.ontouchcancel = function () {
iwindow_window_complete_move_touch(i);
}
if (iwindow_attributes[i].mode == 1 || iwindow_attributes[i].mode == 2) {
div.addEventListener("touchmove", (e) => {
e.preventDefault();
}, { passive: false });
}
document.getElementById("iwindow_window_title_" + i).appendChild(div);
if (iwindow_attributes[i].mode == 1 || iwindow_attributes[i].mode == 5 || iwindow_attributes[i].mode == 6) {
//框架->窗口->标题->菜单按钮
var div = document.createElement("div");
div.id = "iwindow_window_menu_button_" + i;
div.style.fontFamily = "\"Fira Sans\",\"Noto Sans SC\",\"sans-serif\"";
div.style.position = "absolute";
if (iwindow_attributes[i].mode == 5) div.style.right = "30px";
else if (iwindow_attributes[i].mode == 6) div.style.right = "0";
else div.style.right = "90px";
div.style.textAlign = "center";
div.style.height = "30px";
div.style.width = "30px";
div.style.border = "none";
div.style.transition = "all .3s ease";
if (iwindow_attributes[i].mode == 6) div.style.borderRadius = "0 5px 0 0";
div.onmouseover = function () {
document.getElementById("iwindow_window_menu_button_" + i).style.backgroundColor = "#12B7F5";
document.getElementById("iwindow_window_menu_button_svg_line1_" + i).style.stroke = "#FFFFFF";
document.getElementById("iwindow_window_menu_button_svg_line2_" + i).style.stroke = "#FFFFFF";
document.getElementById("iwindow_window_menu_button_svg_line3_" + i).style.stroke = "#FFFFFF";
}
div.onmouseleave = function () {
document.getElementById("iwindow_window_menu_button_" + i).style.backgroundColor = "";
var ncol;
if (iwindow_attributes[i]["content_color"] != null) ncol = iwindow_attributes[i]["content_color"];
else ncol = "#000000";
document.getElementById("iwindow_window_menu_button_svg_line1_" + i).style.stroke = ncol;
document.getElementById("iwindow_window_menu_button_svg_line2_" + i).style.stroke = ncol;
document.getElementById("iwindow_window_menu_button_svg_line3_" + i).style.stroke = ncol;
}
div.onclick = function () {
iwindow_create_menu(i, iwindow_attributes[i].menu);
}
div.innerHTML = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\"><defs><style>.cls-iwindow_window_menu_button_svg{fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:40px;transition:all .3s ease;}</style></defs><line id=\"iwindow_window_menu_button_svg_line1_" + i + "\" class=\"cls-iwindow_window_menu_button_svg\" x1=\"132.5\" y1=\"320\" x2=\"507.5\" y2=\"320\"/><line id=\"iwindow_window_menu_button_svg_line2_" + i + "\" class=\"cls-iwindow_window_menu_button_svg\" x1=\"132.5\" y1=\"180\" x2=\"507.5\" y2=\"180\"/><line id=\"iwindow_window_menu_button_svg_line3_" + i + "\" class=\"cls-iwindow_window_menu_button_svg\" x1=\"132.5\" y1=\"460\" x2=\"507.5\" y2=\"460\"/></svg>"
document.getElementById("iwindow_window_title_" + i).appendChild(div);
}
if (iwindow_attributes[i].mode == 1 || iwindow_attributes[i].mode == 2) {
//框架->窗口->标题->最小化按钮
var div = document.createElement("div");
div.id = "iwindow_window_minimize_button_" + i;
div.style.fontFamily = "\"Fira Sans\",\"Noto Sans SC\",\"sans-serif\"";
div.style.position = "absolute";
div.style.right = "60px";
div.style.textAlign = "center";
div.style.height = "30px";
div.style.width = "30px";
div.style.border = "none";
div.style.transition = "all .3s ease";
div.onmouseover = function () {
document.getElementById("iwindow_window_minimize_button_" + i).style.backgroundColor = "#12B7F5";
if (document.getElementById("iwindow_window_minimize_button_svg1_line_" + i) != null) document.getElementById("iwindow_window_minimize_button_svg1_line_" + i).style.stroke = "#FFFFFF";
if (document.getElementById("iwindow_window_minimize_button_svg2_rect_" + i) != null) document.getElementById("iwindow_window_minimize_button_svg2_rect_" + i).style.stroke = "#FFFFFF";
if (document.getElementById("iwindow_window_minimize_button_svg2_polygon_" + i) != null) document.getElementById("iwindow_window_minimize_button_svg2_polygon_" + i).style.stroke = "#FFFFFF";
}
div.onmouseleave = function () {
document.getElementById("iwindow_window_minimize_button_" + i).style.backgroundColor = "";
var ncol;
if (iwindow_attributes[i]["content_color"] != null) ncol = iwindow_attributes[i]["content_color"];
else ncol = "#000000";
if (document.getElementById("iwindow_window_minimize_button_svg1_line_" + i) != null) document.getElementById("iwindow_window_minimize_button_svg1_line_" + i).style.stroke = ncol;
if (document.getElementById("iwindow_window_minimize_button_svg2_rect_" + i) != null) document.getElementById("iwindow_window_minimize_button_svg2_rect_" + i).style.stroke = ncol;
if (document.getElementById("iwindow_window_minimize_button_svg2_polygon_" + i) != null) document.getElementById("iwindow_window_minimize_button_svg2_polygon_" + i).style.stroke = ncol;
}
div.onclick = function () {
iwindow_minimize(i);
}
div.innerHTML = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\"><defs><style>.cls-iwindow_window_minimize_button_svg1{fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:40px;transition:all .3s ease;}</style></defs><line id=\"iwindow_window_minimize_button_svg1_line_" + i + "\" class=\"cls-iwindow_window_minimize_button_svg1\" x1=\"132.5\" y1=\"312.21\" x2=\"507.5\" y2=\"312.21\"/></svg>"
document.getElementById("iwindow_window_title_" + i).appendChild(div);
//框架->窗口->标题->最大化按钮
var div = document.createElement("div");
div.id = "iwindow_window_maximize_button_" + i;
div.style.fontFamily = "\"Fira Sans\",\"Noto Sans SC\",\"sans-serif\"";
div.style.position = "absolute";
div.style.right = "30px";
div.style.textAlign = "center";
div.style.height = "30px";
div.style.width = "30px";
div.style.border = "none";
div.style.transition = "all .3s ease";
div.innerHTML = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\"><defs><style>.cls-iwindow_window_maximize_button_svg{fill:none;stroke:#000000;stroke-miterlimit:10;stroke-width:40px;transition:all .3s ease;}</style></defs><rect id=\"iwindow_window_maximize_button_svg_rect_" + i + "\" class=\"cls-iwindow_window_maximize_button_svg\" x=\"126.88\" y=\"161.84\" width=\"386.24\" height=\"316.33\"/></svg>";
div.onmouseover = function () {
document.getElementById("iwindow_window_maximize_button_" + i).style.backgroundColor = "#12B7F5";
document.getElementById("iwindow_window_maximize_button_svg_rect_" + i).style.stroke = "#FFFFFF";
if (document.getElementById("iwindow_window_maximize_button_svg_polygon_" + i) != null) document.getElementById("iwindow_window_maximize_button_svg_polygon_" + i).style.stroke = "#FFFFFF";
}
div.onmouseleave = function () {
document.getElementById("iwindow_window_maximize_button_" + i).style.backgroundColor = "";
var ncol;
if (iwindow_attributes[i]["content_color"] != null) ncol = iwindow_attributes[i]["content_color"];
else ncol = "#000000";
document.getElementById("iwindow_window_maximize_button_svg_rect_" + i).style.stroke = ncol;
if (document.getElementById("iwindow_window_maximize_button_svg_polygon_" + i) != null) document.getElementById("iwindow_window_maximize_button_svg_polygon_" + i).style.stroke = ncol;
}
div.onclick = function () {
iwindow_maximize(i);
}
document.getElementById("iwindow_window_title_" + i).appendChild(div);
}
if (iwindow_attributes[i].mode == 1 || iwindow_attributes[i].mode == 2 || iwindow_attributes[i].mode == 3 || iwindow_attributes[i].mode == 5) {
//框架->窗口->标题->关闭按钮
var div = document.createElement("div");
div.id = "iwindow_window_close_button_" + i;
div.style.fontFamily = "\"Fira Sans\",\"Noto Sans SC\",\"sans-serif\"";
div.style.position = "absolute";
div.style.right = "0";
div.style.textAlign = "center";
div.style.height = "30px";
div.style.width = "30px";
div.style.border = "none";
div.style.borderRadius = "0 5px 0 0";
div.style.transition = "all .3s ease";
div.onmouseover = function () {
document.getElementById("iwindow_window_close_button_" + i).style.backgroundColor = "#FF0000";
document.getElementById("iwindow_window_close_button_svg_line1_" + i).style.stroke = "#FFFFFF";
document.getElementById("iwindow_window_close_button_svg_line2_" + i).style.stroke = "#FFFFFF";
}
div.onmouseleave = function () {
document.getElementById("iwindow_window_close_button_" + i).style.backgroundColor = "";
var ncol;
if (iwindow_attributes[i]["content_color"] != null) ncol = iwindow_attributes[i]["content_color"];
else ncol = "#000000";
document.getElementById("iwindow_window_close_button_svg_line1_" + i).style.stroke = ncol;
document.getElementById("iwindow_window_close_button_svg_line2_" + i).style.stroke = ncol;
}
div.onclick = function () {
iwindow_close(i);
}
div.innerHTML = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\"><defs><style>.cls-iwindow_window_close_button_svg{fill:none;stroke:#000000;stroke-miterlimit:10;stroke-width:50px;transition:all .3s ease;}</style></defs><line id=\"iwindow_window_close_button_svg_line1_" + i + "\" class=\"cls-iwindow_window_close_button_svg\" x1=\"496.78\" y1=\"496.78\" x2=\"143.22\" y2=\"143.22\"/><line id=\"iwindow_window_close_button_svg_line2_" + i + "\" class=\"cls-iwindow_window_close_button_svg\" x1=\"143.22\" y1=\"496.78\" x2=\"496.78\" y2=\"143.22\"/></svg>"
document.getElementById("iwindow_window_title_" + i).appendChild(div);
}
//框架->窗口->内容
var div = document.createElement("div");
div.id = "iwindow_window_content_" + i;
div.style.width = "100%";
div.style.height = document.getElementById("iwindow_window_" + i).offsetHeight - 30 + "px";
div.style.borderRadius = "0 0 5px 5px";
div.style.overflow = iwindow_attributes[i].content_overflow;
div.innerHTML = iwindow_attributes[i].content;
document.getElementById("iwindow_window_" + i).appendChild(div);
//框架->屏障
if (iwindow_attributes[i].mask) {
var div = document.createElement("div");
div.id = "iwindow_mask_x_" + i;
div.style.position = "fixed";
div.style.top = "0";
div.style.right = "0";
div.style.bottom = "0";
div.style.left = "0";
div.style.zIndex = "2000000001";
div.style.backgroundColor = "#000000";
div.style.opacity = "0.5";
document.getElementById("iwindow_frame_" + i).appendChild(div);
}
document.getElementById("iwindow_window_" + i).style.opacity = "1";
var ux;
if (iwindow_attributes[i].x == null) ux = document.documentElement.clientWidth - document.getElementById("iwindow_window_" + i).offsetWidth - 90 + "px";
else ux = iwindow_attributes[i].x + "px";
iwindow_change_color(iwindow_attributes[i].color, i);
document.getElementById("iwindow_window_" + i).style.left = ux;
if (iwindow_attributes[i].size == 2) iwindow_maximize(i);
if (iwindow_attributes[i].size == 3) iwindow_minimize(i);
iwindow_attributes[i]["old_left"] = ux;
iwindow_attributes[i]["old_top"] = uy;
document.getElementById("iwindow_window_" + i).style.display = "";
window.dispatchEvent(new CustomEvent("iwindow_create", { detail: { "i": i } }));
return i;
}
function iwindow_dynamicColor(bg) {
if (!bg || bg.search('gradient') != -1) {
return '#000000';
}
var bgcolorArry;
if (/^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(bg)) bgcolorArry = iwindow_HexToRgb(bg);
else if (/^(rgb|RGB|rgba|RGBA)/.test(bg)) bgcolorArry = bg.replace("rgb(", "").replace("rgba(", "").replace(")", "").split(",");
return iwindow_isLight(bgcolorArry) ? '#000000' : 'rgb(255,255,255,0.7)';
}
function iwindow_isLight(rgb = [0, 0, 0]) {
return (0.213 * rgb[0] + 0.715 * rgb[1] + 0.072 * rgb[2] > 255 / 2);
};
function iwindow_HexToRgb(str) {
var reg = /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/
if (!reg.test(str)) { return; }
let newStr = (str.toLowerCase()).replace(/\#/g, '')
let len = newStr.length;
if (len == 3) {
let t = ''
for (var i = 0; i < len; i++) {
t += newStr.slice(i, i + 1).concat(newStr.slice(i, i + 1))
}
newStr = t
}
let arr = [];
for (var i = 0; i < 6; i = i + 2) {
let s = newStr.slice(i, i + 2)
arr.push(parseInt("0x" + s))
}
return arr;
}
function iwindow_RgbToHex(str) {
let reg = /^(rgb|RGB|rgba|RGBA)/;
if (!reg.test(str)) { return; }
var arr = str.slice(4, str.length - 1).split(",")
let color = '#';
for (var i = 0; i < arr.length; i++) {
var t = Number(arr[i]).toString(16)
if (t == "0") {
t = t + "0"
}
color += t;
}
return color;
}
function iwindow_getDarkColor(color, level) {
var r = /^#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$/;
var trgb = /^(rgb|RGB|rgba|RGBA)/;
var rgbc;
if (r.test(color)) rgbc = iwindow_HexToRgb(color);
else if (trgb.test(color)) rgbc = color.replace("rgb(", "").replace("rgba(", "").replace(")", "").split(",");
else rgbc = iwindow_HexToRgb("#FFFFFF");
for (var i = 0; i < 3; i++) rgbc[i] = Math.floor(rgbc[i] * (1 - level));
return iwindow_RgbToHex("rgb(" + rgbc.join(',') + ")");
}
function iwindow_getLightColor(color, level) {
var r = /^#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$/;
var trgb = /^(rgb|RGB|rgba|RGBA)/;
var rgbc;
if (r.test(color)) rgbc = iwindow_HexToRgb(color);
else if (trgb.test(color)) rgbc = color.replace("rgb(", "").replace("rgba(", "").replace(")", "").split(",");
else rgbc = iwindow_HexToRgb("#FFFFFF");
for (var i = 0; i < 3; i++) rgbc[i] = Math.floor((255 - rgbc[i]) * level + rgbc[i]);
return iwindow_RgbToHex("rgb(" + rgbc.join(',') + ")");
}
function iwindow_window_create_menu(i, iwindow_menu, mx, my) {
//框架
var div = document.createElement("div");
div.id = "iwindow_menu_frame_" + i;
document.getElementById("iwindow_frame_" + i).appendChild(div);
//框架->菜单
var div = document.createElement("div");
div.className = "iwindow_menu";
div.id = "iwindow_menu_" + i;
div.style.top = my + "px";
div.style.left = mx + "px";
div.style.zIndex = "2000000005";
div.style.webkitUserSelect = "none";
div.style.userSelect = "none";
div.style.fontSize = "14px";
div.style.position = "fixed";
div.style.borderRadius = "5px";
if (iwindow_attributes[i]["background_color"] == null) div.style.backgroundColor = "#FFFFFF";
else div.style.backgroundColor = iwindow_attributes[i]["background_color"];
if (iwindow_attributes[i]["content_color"] == null) div.style.color = "#000000";
else div.style.color = iwindow_attributes[i]["content_color"];
div.style.webkitBoxShadow = "2px 2px 10px #909090";
div.style.boxShadow = "2px 2px 10px #909090";
div.style.transition = "all .1s ease";
div.style.padding = "5px 0";
div.style.opacity = "0";
div.style.lineHeight = "30px";
document.getElementById("iwindow_menu_frame_" + i).appendChild(div);
//框架->菜单->行
iwindow_menu.forEach((value, index) => {
iwindow_menu_create_line(i, index, iwindow_menu);
})
//框架->遮罩
var div = document.createElement("div");
div.id = "iwindow_menu_mask_" + i;
div.style.position = "fixed";
div.style.top = "0";
div.style.right = "0";
div.style.bottom = "0";
div.style.left = "0";
div.style.zIndex = "2000000004";
div.style.opacity = "0";
div.onclick = function () { iwindow_menu_close(i); };
document.getElementById("iwindow_menu_frame_" + i).appendChild(div);
if (document.getElementById("iwindow_menu_" + i).getBoundingClientRect().left < 0) document.getElementById("iwindow_menu_" + i).style.left = 10 + "px";
if (document.getElementById("iwindow_menu_" + i).getBoundingClientRect().left > document.documentElement.clientWidth - 10 - document.getElementById("iwindow_menu_" + i).offsetWidth) document.getElementById("iwindow_menu_" + i).style.left = document.documentElement.clientWidth - 10 - document.getElementById("iwindow_menu_" + i).offsetWidth + "px";
if (document.getElementById("iwindow_menu_" + i).getBoundingClientRect().top < 0) document.getElementById("iwindow_menu_" + i).style.top = 10 + "px";
if (document.getElementById("iwindow_menu_" + i).getBoundingClientRect().top > document.documentElement.clientHeight - 10 - document.getElementById("iwindow_menu_" + i).offsetHeight) document.getElementById("iwindow_menu_" + i).style.top = document.documentElement.clientHeight - 10 - document.getElementById("iwindow_menu_" + i).offsetHeight + "px";
setTimeout(() => {
if (document.getElementById("iwindow_menu_" + i) != null) document.getElementById("iwindow_menu_" + i).style.opacity = "1";
window.dispatchEvent(new CustomEvent("iwindow_create_menu", { detail: { "i": i } }));
}, 100);
}
function iwindow_menu_create_line(i, x, iwindow_menu) {
var div = document.createElement("div");
div.id = "iwindow_menu_line_" + x + "_" + i;
div.style.height = "30px";
div.style.lineHeight = "30px";
div.style.margin = "0";
div.style.padding = "0 5px";
div.style.whiteSpace = "nowrap";
div.innerHTML = iwindow_menu[x][0];
div.onclick = function () {
iwindow_menu[x][1](i);
iwindow_menu_close(i);
}
div.onmouseover = function () {
document.getElementById("iwindow_menu_line_" + x + "_" + i).style.backgroundColor = "#F0F0F0";
document.getElementById("iwindow_menu_line_" + x + "_" + i).style.color = "#000000";
}
div.onmouseleave = function () {
document.getElementById("iwindow_menu_line_" + x + "_" + i).style.backgroundColor = "";
document.getElementById("iwindow_menu_line_" + x + "_" + i).style.color = "";
}
document.getElementById("iwindow_menu_" + i).appendChild(div);
}
function iwindow_menu_close(i) {
if (document.getElementById("iwindow_menu_frame_" + i) != null) document.getElementById("iwindow_menu_frame_" + i).parentNode.removeChild(document.getElementById("iwindow_menu_frame_" + i));
}
function iwindow_window_start_move(i) {
var iwindow_delta_x = event.clientX - document.getElementById("iwindow_window_" + i).getBoundingClientRect().left;
var iwindow_delta_y = event.clientY - document.getElementById("iwindow_window_" + i).getBoundingClientRect().top;
var div = document.createElement("div");
div.id = "iwindow_mask_" + i;
div.style.position = "fixed";
div.style.top = "0";
div.style.right = "0";
div.style.bottom = "0";
div.style.left = "0";
div.style.zIndex = "2000000003";
div.style.opacity = "0";
div.style.cursor = "move";
document.getElementById("iwindow_frame_" + i).appendChild(div);
document.getElementById("iwindow_window_" + i).style.transition = "";
div.onmousemove = function () {
iwindow_window_on_move(i, iwindow_delta_x, iwindow_delta_y);
}
div.onmouseup = function () {
iwindow_window_complete_move(i);
}
}
function iwindow_window_on_move(i, iwindow_delta_x, iwindow_delta_y) {
iwindow_check_body_overflow();
iwindow_min_array_remove(i);
var z, w;
if (iwindow_delta_x > document.getElementById("iwindow_window_" + i).offsetWidth)
var z = event.clientX - document.getElementById("iwindow_window_" + i).offsetWidth / 2;
else var z = event.clientX - iwindow_delta_x;
var w = event.clientY - iwindow_delta_y;
iwindow_window_move_step(i, w, z);
}
function iwindow_window_complete_move(i) {
document.getElementById("iwindow_window_" + i).style.transition = "all .3s ease";
document.getElementById("iwindow_mask_" + i).parentNode.removeChild(document.getElementById("iwindow_mask_" + i));
window.dispatchEvent(new CustomEvent("iwindow_moved", { detail: { "i": i, "x": document.getElementById("iwindow_window_" + i).getBoundingClientRect().left, "y": document.getElementById("iwindow_window_" + i).getBoundingClientRect().top } }));
}
function iwindow_window_start_move_touch(i) {
iwindow_attributes[i]["iwindow_delta_x"] = event.touches[0].pageX - document.getElementById("iwindow_window_" + i).getBoundingClientRect().left;
iwindow_attributes[i]["iwindow_delta_y"] = event.touches[0].pageY - document.getElementById("iwindow_window_" + i).getBoundingClientRect().top;
document.getElementById("iwindow_window_" + i).style.transition = "";
}
function iwindow_window_on_move_touch(i) {
iwindow_check_body_overflow();
iwindow_min_array_remove(i);
var iwindow_delta_x = iwindow_attributes[i]["iwindow_delta_x"];
var iwindow_delta_y = iwindow_attributes[i]["iwindow_delta_y"];
var z, w;
if (iwindow_delta_x > document.getElementById("iwindow_window_" + i).offsetWidth)
var z = event.touches[0].pageX - document.getElementById("iwindow_window_" + i).offsetWidth / 2;
else var z = event.touches[0].pageX - iwindow_delta_x;
var w = event.touches[0].pageY - iwindow_delta_y;
iwindow_window_move_step(i, w, z);
}
function iwindow_window_complete_move_touch(i) {
document.getElementById("iwindow_window_" + i).style.transition = "all .3s ease";
delete iwindow_attributes[i]["iwindow_delta_x"];
delete iwindow_attributes[i]["iwindow_delta_y"];
window.dispatchEvent(new CustomEvent("iwindow_moved", { detail: { "i": i, "x": document.getElementById("iwindow_window_" + i).getBoundingClientRect().left, "y": document.getElementById("iwindow_window_" + i).getBoundingClientRect().top } }));
}
function iwindow_window_move_step(i, w, z) {
if (iwindow_attributes[i]["display_mode"] == "maximize" && !(iwindow_attributes[i].mode == 1 || iwindow_attributes[i].mode == 2)) return;
if (iwindow_attributes[i]["display_mode"] == "minimize") {
if (z < 110 - document.getElementById("iwindow_window_" + i).offsetWidth) z = 110 - document.getElementById("iwindow_window_" + i).offsetWidth;
}
else if (z < 140 - document.getElementById("iwindow_window_" + i).offsetWidth) z = 140 - document.getElementById("iwindow_window_" + i).offsetWidth;
if (z > (document.documentElement.clientWidth - 20)) z = document.documentElement.clientWidth - 20;
if (w < -10) w = -10;
if (w > (document.documentElement.clientHeight - 20)) w = document.documentElement.clientHeight - 20;
document.getElementById("iwindow_window_" + i).style.left = z + "px";
document.getElementById("iwindow_window_" + i).style.top = w + "px";
if (iwindow_attributes[i]["display_mode"] == "minimize") {
iwindow_attributes[i]["minimize_top"] = w + "px";
iwindow_attributes[i]["minimize_left"] = z + "px";
}
if (iwindow_attributes[i]["display_mode"] == "maximize") iwindow_normalize(i);
window.dispatchEvent(new CustomEvent("iwindow_moving", { detail: { "i": i, "x": z, "y": w } }));
}
function iwindow_min_array_add(i) {
if (!(iwindow_attributes[i]["minimize_top"] != null && iwindow_attributes[i]["minimize_left"] != null)) {
iwindow_min_array.unshift(i);
iwindow_min_sort();
}
}
function iwindow_min_array_remove(i) {
for (var mm = 0; mm + 1 <= iwindow_min_array.length; mm++) {
if (iwindow_min_array[mm] == i) {
iwindow_min_array.splice(mm, 1);
break;
}
}
iwindow_min_sort();
}
function iwindow_min_sort() {
for (var mm = 0; mm + 1 <= iwindow_min_array.length; mm++) {
if (!(iwindow_attributes[iwindow_min_array[mm]]["minimize_top"] != null && iwindow_attributes[iwindow_min_array[mm]]["minimize_left"] != null)) {
document.getElementById("iwindow_window_" + iwindow_min_array[mm]).style.top = document.documentElement.clientHeight - document.getElementById("iwindow_window_title_" + iwindow_min_array[mm]).offsetHeight - 20 - Math.floor(mm / Math.floor((document.documentElement.clientWidth - 10) / 160)) * 35 + "px";
document.getElementById("iwindow_window_" + iwindow_min_array[mm]).style.left = 10 + mm % Math.floor((document.documentElement.clientWidth - 10) / 160) * 160 + "px";
}
}
}
function iwindow_change_color(color, i) {
if (i == null) for (var m = 1; ; m++) {
if (document.getElementById("iwindow_window_" + m) != null) iwindow_change_color_execute(color, m);
else break;
}
else iwindow_change_color_execute(color, i);
}
function iwindow_change_color_execute(color, i) {
if (document.getElementById("iwindow_window_" + i) != null) {
document.getElementById("iwindow_window_" + i).style.backgroundColor = color;
document.getElementById("iwindow_window_title_" + i).style.borderBottomColor = iwindow_getDarkColor(color, 0.05);
document.getElementById("iwindow_window_" + i).style.color = iwindow_dynamicColor(color);
iwindow_attributes[i]["background_color"] = color;
iwindow_attributes[i]["content_color"] = iwindow_dynamicColor(color);
if (document.getElementById("iwindow_window_close_button_svg_line1_" + i) != null) document.getElementById("iwindow_window_close_button_svg_line1_" + i).style.stroke = iwindow_dynamicColor(color);
if (document.getElementById("iwindow_window_close_button_svg_line2_" + i) != null) document.getElementById("iwindow_window_close_button_svg_line2_" + i).style.stroke = iwindow_dynamicColor(color);
if (document.getElementById("iwindow_window_maximize_button_svg_rect_" + i) != null) document.getElementById("iwindow_window_maximize_button_svg_rect_" + i).style.stroke = iwindow_dynamicColor(color);
if (document.getElementById("iwindow_window_maximize_button_svg_polygon_" + i) != null) document.getElementById("iwindow_window_maximize_button_svg_polygon_" + i).style.stroke = iwindow_dynamicColor(color);
if (document.getElementById("iwindow_window_minimize_button_svg1_line_" + i) != null) document.getElementById("iwindow_window_minimize_button_svg1_line_" + i).style.stroke = iwindow_dynamicColor(color);
if (document.getElementById("iwindow_window_minimize_button_svg2_rect_" + i) != null) document.getElementById("iwindow_window_minimize_button_svg2_rect_" + i).style.stroke = iwindow_dynamicColor(color);
if (document.getElementById("iwindow_window_minimize_button_svg2_polygon_" + i) != null) document.getElementById("iwindow_window_minimize_button_svg2_polygon_" + i).style.stroke = iwindow_dynamicColor(color);
if (document.getElementById("iwindow_window_menu_button_svg_line1_" + i) != null) document.getElementById("iwindow_window_menu_button_svg_line1_" + i).style.stroke = iwindow_dynamicColor(color);
if (document.getElementById("iwindow_window_menu_button_svg_line2_" + i) != null) document.getElementById("iwindow_window_menu_button_svg_line2_" + i).style.stroke = iwindow_dynamicColor(color);
if (document.getElementById("iwindow_window_menu_button_svg_line3_" + i) != null) document.getElementById("iwindow_window_menu_button_svg_line3_" + i).style.stroke = iwindow_dynamicColor(color);
if (document.getElementById("iwindow_menu_" + i) != null) {
document.getElementById("iwindow_menu_" + i).style.backgroundColor = color;
document.getElementById("iwindow_menu_" + i).style.color = iwindow_dynamicColor(color);
}
}
}
function iwindow_top(i) {
if (i == null || document.getElementById("iwindow_window_" + i) == null) return;
for (var m = 1; ; m++) {
if (document.getElementById("iwindow_window_" + m) != null) iwindow_top_execute(i, m);
else break;
}
}
function iwindow_top_execute(i, m) {
if (document.getElementById("iwindow_window_" + m) != null && iwindow_attributes[m]["mask"] != "true") {
if (iwindow_attributes[m]["topmost"] != "true" && m == i) {
iwindow_attributes[m]["topmost"] = "true";
iwindow_top_zIndex++;
if (iwindow_top_zIndex >= 2000000000) iwindow_top_zIndex = 2000000000;
document.getElementById("iwindow_window_" + m).style.zIndex = iwindow_top_zIndex;
window.dispatchEvent(new CustomEvent("iwindow_top", { detail: { "i": i } }));
}
else if (iwindow_attributes[m]["topmost"] == "true" && m != i) delete iwindow_attributes[m]["topmost"];
}
}
function iwindow_close(i) {
if (i == null) for (var m = 1; ; m++) {
if (document.getElementById("iwindow_window_" + m) != null) iwindow_close_execute(m);
else break;
}
else iwindow_close_execute(i);
}
function iwindow_close_execute(i) {
if (document.getElementById("iwindow_window_" + i) != null) {
iwindow_attributes[i]["display_mode"] = "close";
iwindow_min_array_remove(i);
iwindow_check_body_overflow();
document.getElementById("iwindow_window_" + i).style.transition = "all .1s ease";
document.getElementById("iwindow_window_" + i).style.webkitTransform = "translate(2px, 2px)";
document.getElementById("iwindow_window_" + i).style.transform = "translate(2px, 2px)";
document.getElementById("iwindow_window_" + i).style.opacity = "0";
setTimeout(function () {
if (document.getElementById("iwindow_frame_" + i) != null) {
document.getElementById("iwindow_frame_" + i).parentNode.removeChild(document.getElementById("iwindow_frame_" + i));
window.dispatchEvent(new CustomEvent("iwindow_close", { detail: { "i": i } }));
delete iwindow_attributes[i];
}
}, 100);
}
}
function iwindow_maximize(i) {
if (i == null) for (var m = 1; ; m++) {
if (document.getElementById("iwindow_window_" + m) != null) iwindow_maximize_execute(m);
else break;
}
else iwindow_maximize_execute(i);
}
function iwindow_maximize_execute(i) {
if (document.getElementById("iwindow_window_" + i) != null) {
iwindow_top(i);
if (iwindow_attributes[i]["display_mode"] != "maximize") {
iwindow_min_array_remove(i);
if (iwindow_attributes[i]["display_mode"] == "normal") {
iwindow_attributes[i]["old_top"] = document.getElementById("iwindow_window_" + i).getBoundingClientRect().top + "px";
iwindow_attributes[i]["old_left"] = document.getElementById("iwindow_window_" + i).getBoundingClientRect().left + "px";
}
document.getElementById("iwindow_window_" + i).style.height = "";
document.getElementById("iwindow_window_" + i).style.width = "";
document.getElementById("iwindow_window_title_" + i).style.width = "100%";
if (iwindow_attributes[i].mode == 2) document.getElementById("iwindow_window_title_words_" + i).style.width = document.documentElement.clientWidth - 5 - 90 + "px";
else if (iwindow_attributes[i].mode == 3) document.getElementById("iwindow_window_title_words_" + i).style.width = document.documentElement.clientWidth - 5 - 30 + "px";
else if (iwindow_attributes[i].mode == 4) document.getElementById("iwindow_window_title_words_" + i).style.width = document.documentElement.clientWidth - 5 + "px";
else if (iwindow_attributes[i].mode == 5) document.getElementById("iwindow_window_title_words_" + i).style.width = document.documentElement.clientWidth - 5 - 60 + "px";
else if (iwindow_attributes[i].mode == 6) document.getElementById("iwindow_window_title_words_" + i).style.width = document.documentElement.clientWidth - 5 - 30 + "px";
else document.getElementById("iwindow_window_title_words_" + i).style.width = document.documentElement.clientWidth - 5 - 120 + "px";
document.getElementById("iwindow_window_content_" + i).style.height = document.documentElement.clientHeight - 30 + "px";
document.getElementById("iwindow_window_content_" + i).style.display = "";
if (iwindow_attributes[i].mode == 1 || iwindow_attributes[i].mode == 5 || iwindow_attributes[i].mode == 6) document.getElementById("iwindow_window_menu_button_" + i).style.display = "";
document.getElementById("iwindow_window_" + i).style.top = "0";
document.getElementById("iwindow_window_" + i).style.left = "0";
document.getElementById("iwindow_window_" + i).style.right = "0";
document.getElementById("iwindow_window_" + i).style.bottom = "0";
document.getElementById("iwindow_window_" + i).style.borderRadius = "0";
document.getElementById("iwindow_window_title_" + i).style.borderRadius = "0";
if (iwindow_attributes[i].mode != 4 && iwindow_attributes[i].mode != 6) document.getElementById("iwindow_window_close_button_" + i).style.borderRadius = "0";
else if (iwindow_attributes[i].mode == 6) document.getElementById("iwindow_window_menu_button_" + i).style.borderRadius = "0";
document.getElementById("iwindow_window_content_" + i).style.borderRadius = "0";
if (iwindow_attributes[i].mode == 1 || iwindow_attributes[i].mode == 2) {
document.getElementById("iwindow_window_minimize_button_" + i).innerHTML = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\"><defs><style>.cls-iwindow_window_minimize_button_svg1{fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:40px;transition:all .3s ease;}</style></defs><line id=\"iwindow_window_minimize_button_svg1_line_" + i + "\" class=\"cls-iwindow_window_minimize_button_svg1\" x1=\"132.5\" y1=\"312.21\" x2=\"507.5\" y2=\"312.21\"/></svg>";
document.getElementById("iwindow_window_maximize_button_" + i).innerHTML = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\"><defs><style>.cls-iwindow_window_maximize_button_svg{fill:none;stroke:#000000;stroke-miterlimit:10;stroke-width:40px;transition:all .3s ease;}</style></defs><polygon id=\"iwindow_window_maximize_button_svg_polygon_" + i + "\" class=\"cls-iwindow_window_maximize_button_svg\" points=\"202.16 201.39 202.16 281.19 412.72 281.19 412.72 413.28 502.02 413.28 502.02 201.39 202.16 201.39\"/><rect id=\"iwindow_window_maximize_button_svg_rect_" + i + "\" class=\"cls-iwindow_window_maximize_button_svg\" x=\"112.87\" y=\"281.19\" width=\"299.86\" height=\"211.89\"/></svg>";
document.getElementById("iwindow_window_minimize_button_" + i).onmouseleave();
document.getElementById("iwindow_window_maximize_button_" + i).onmouseleave();
document.getElementById("iwindow_window_minimize_button_" + i).onclick = function () {
iwindow_minimize(i);
}
document.getElementById("iwindow_window_maximize_button_" + i).onclick = function () {
iwindow_normalize(i);
}
}
document.body.parentNode.style.overflow = "hidden";
iwindow_attributes[i]["display_mode"] = "maximize";
window.dispatchEvent(new CustomEvent("iwindow_maximize", { detail: { "i": i } }));
}
}
}
function iwindow_minimize(i) {
if (i == null) for (var m = 1; ; m++) {
if (document.getElementById("iwindow_window_" + m) != null) iwindow_minimize_execute(m);
else break;
}
else iwindow_minimize_execute(i);
}
function iwindow_minimize_execute(i) {
if (document.getElementById("iwindow_window_" + i) != null) {
if (iwindow_attributes[i]["display_mode"] != "minimize") {
if (iwindow_attributes[i]["display_mode"] == "normal") {
iwindow_attributes[i]["old_top"] = document.getElementById("iwindow_window_" + i).getBoundingClientRect().top + "px";
iwindow_attributes[i]["old_left"] = document.getElementById("iwindow_window_" + i).getBoundingClientRect().left + "px";
}
iwindow_attributes[i]["display_mode"] = "minimize";
if (iwindow_attributes[i]["minimize_top"] != null && iwindow_attributes[i]["minimize_left"] != null) {
document.getElementById("iwindow_window_" + i).style.top = iwindow_attributes[i]["minimize_top"];
document.getElementById("iwindow_window_" + i).style.left = iwindow_attributes[i]["minimize_left"];
}
else {
document.getElementById("iwindow_window_" + i).style.top = document.documentElement.clientHeight - document.getElementById("iwindow_window_title_" + i).offsetHeight - 20 + "px";
document.getElementById("iwindow_window_" + i).style.left = 10 + "px";
}
document.getElementById("iwindow_window_" + i).style.right = "";
document.getElementById("iwindow_window_" + i).style.bottom = "";
document.getElementById("iwindow_window_" + i).style.borderRadius = "5px";
document.getElementById("iwindow_window_title_" + i).style.borderRadius = "5px 5px 5px 5px";
if (iwindow_attributes[i].mode != 4 && iwindow_attributes[i].mode != 6) document.getElementById("iwindow_window_close_button_" + i).style.borderRadius = "0 5px 0 0";
else if (iwindow_attributes[i].mode == 6) document.getElementById("iwindow_window_menu_button_" + i).style.borderRadius = "0 5px 0 0";
document.getElementById("iwindow_window_" + i).style.width = "150px";
document.getElementById("iwindow_window_" + i).style.height = "";
document.getElementById("iwindow_window_title_" + i).style.width = "150px";
if (iwindow_attributes[i].mode == 1 || iwindow_attributes[i].mode == 2) document.getElementById("iwindow_window_title_words_" + i).style.width = "55px";
else if (iwindow_attributes[i].mode == 3 || iwindow_attributes[i].mode == 5) document.getElementById("iwindow_window_title_words_" + i).style.width = "115px";
else if (iwindow_attributes[i].mode == 4 || iwindow_attributes[i].mode == 6) document.getElementById("iwindow_window_title_words_" + i).style.width = "145px";
if (iwindow_attributes[i].mode == 1 || iwindow_attributes[i].mode == 5 || iwindow_attributes[i].mode == 6) document.getElementById("iwindow_window_menu_button_" + i).style.display = "none";
document.getElementById("iwindow_window_content_" + i).style.display = "none";
if (iwindow_attributes[i].mode == 1 || iwindow_attributes[i].mode == 2) {
document.getElementById("iwindow_window_minimize_button_" + i).innerHTML = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\"><defs><style>.cls-iwindow_window_minimize_button_svg2{fill:none;stroke:#000000;stroke-miterlimit:10;stroke-width:40px;transition:all .3s ease;}</style></defs><polygon id=\"iwindow_window_minimize_button_svg2_polygon_" + i + "\" class=\"cls-iwindow_window_minimize_button_svg2\" points=\"202.16 201.39 202.16 281.19 412.72 281.19 412.72 413.28 502.02 413.28 502.02 201.39 202.16 201.39\"/><rect id=\"iwindow_window_minimize_button_svg2_rect_" + i + "\" class=\"cls-iwindow_window_minimize_button_svg2\" x=\"112.87\" y=\"281.19\" width=\"299.86\" height=\"211.89\"/></svg>";
document.getElementById("iwindow_window_minimize_button_" + i).onclick = function () {
iwindow_normalize(i);
}
document.getElementById("iwindow_window_minimize_button_" + i).onmouseleave();
document.getElementById("iwindow_window_maximize_button_" + i).innerHTML = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\"><defs><style>.cls-iwindow_window_maximize_button_svg{fill:none;stroke:#000000;stroke-miterlimit:10;stroke-width:40px;transition:all .3s ease;}</style></defs><rect id=\"iwindow_window_maximize_button_svg_rect_" + i + "\" class=\"cls-iwindow_window_maximize_button_svg\" x=\"126.88\" y=\"161.84\" width=\"386.24\" height=\"316.33\"/></svg>";
document.getElementById("iwindow_window_maximize_button_" + i).onclick = function () {
iwindow_maximize(i);
}
document.getElementById("iwindow_window_maximize_button_" + i).onmouseleave();
}
document.getElementById("iwindow_window_" + i).style.zIndex = 10001;
iwindow_min_array_add(i);
iwindow_check_body_overflow();
window.dispatchEvent(new CustomEvent("iwindow_minimize", { detail: { "i": i } }));
}
}
}
function iwindow_normalize(i) {
if (i == null) for (var m = 1; ; m++) {
if (document.getElementById("iwindow_window_" + m) != null) iwindow_normalize_execute(m);
else break;
}
else iwindow_normalize_execute(i);
}
function iwindow_normalize_execute(i) {
if (document.getElementById("iwindow_window_" + i) != null) {
if ((document.documentElement.clientWidth - 75) < parseFloat(iwindow_attributes[i]["old_left"])) {
document.getElementById("iwindow_window_" + i).style.left = document.documentElement.clientWidth - 75 + "px";
}
else document.getElementById("iwindow_window_" + i).style.left = iwindow_attributes[i]["old_left"];
if ((document.documentElement.clientHeight - 75) < parseFloat(iwindow_attributes[i]["old_top"])) {
document.getElementById("iwindow_window_" + i).style.top = document.documentElement.clientHeight - 75 + "px";
}
else document.getElementById("iwindow_window_" + i).style.top = iwindow_attributes[i]["old_top"];
document.getElementById("iwindow_window_" + i).style.bottom = "";
document.getElementById("iwindow_window_" + i).style.right = "";
document.getElementById("iwindow_window_" + i).style.borderRadius = "5px";
document.getElementById("iwindow_window_title_" + i).style.borderRadius = "5px 5px 0 0";
if (iwindow_attributes[i].mode != 4 && iwindow_attributes[i].mode != 6) document.getElementById("iwindow_window_close_button_" + i).style.borderRadius = "0 5px 0 0";
else if (iwindow_attributes[i].mode == 6) document.getElementById("iwindow_window_menu_button_" + i).style.borderRadius = "0 5px 0 0";
document.getElementById("iwindow_window_content_" + i).style.borderRadius = "0 0 5px 5px";
document.getElementById("iwindow_window_" + i).style.height = iwindow_attributes[i]["dafault_height"];
document.getElementById("iwindow_window_" + i).style.width = iwindow_attributes[i]["dafault_width"];
document.getElementById("iwindow_window_title_" + i).style.width = iwindow_attributes[i]["dafault_title_width"];
document.getElementById("iwindow_window_title_words_" + i).style.width = iwindow_attributes[i]["dafault_title_words_width"]
document.getElementById("iwindow_window_content_" + i).style.height = document.getElementById("iwindow_window_" + i).offsetHeight - 30 + "px";
document.getElementById("iwindow_window_content_" + i).style.display = "";
if (iwindow_attributes[i].mode == 1 || iwindow_attributes[i].mode == 5 || iwindow_attributes[i].mode == 6) document.getElementById("iwindow_window_menu_button_" + i).style.display = "";
if (iwindow_attributes[i].mode == 1 || iwindow_attributes[i].mode == 2) {
document.getElementById("iwindow_window_maximize_button_" + i).innerHTML = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\"><defs><style>.cls-iwindow_window_maximize_button_svg{fill:none;stroke:#000000;stroke-miterlimit:10;stroke-width:40px;transition:all .3s ease;}</style></defs><rect id=\"iwindow_window_maximize_button_svg_rect_" + i + "\" class=\"cls-iwindow_window_maximize_button_svg\" x=\"126.88\" y=\"161.84\" width=\"386.24\" height=\"316.33\"/></svg>";
document.getElementById("iwindow_window_maximize_button_" + i).onclick = function () {
iwindow_maximize(i);
}
document.getElementById("iwindow_window_maximize_button_" + i).onmouseleave();
document.getElementById("iwindow_window_minimize_button_" + i).innerHTML = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\"><defs><style>.cls-iwindow_window_minimize_button_svg1{fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:40px;transition:all .3s ease;}</style></defs><line id=\"iwindow_window_minimize_button_svg1_line_" + i + "\" class=\"cls-iwindow_window_minimize_button_svg1\" x1=\"132.5\" y1=\"312.21\" x2=\"507.5\" y2=\"312.21\"/></svg>";
document.getElementById("iwindow_window_minimize_button_" + i).onclick = function () {
iwindow_minimize(i);
}
document.getElementById("iwindow_window_minimize_button_" + i).onmouseleave();
}
if (iwindow_attributes[i]["display_mode"] == "maximize") window.dispatchEvent(new CustomEvent("iwindow_d_maximize", { detail: { "i": i } }));
else if (iwindow_attributes[i]["display_mode"] == "minimize") window.dispatchEvent(new CustomEvent("iwindow_d_minimize", { detail: { "i": i } }));
iwindow_attributes[i]["display_mode"] = "normal";
window.dispatchEvent(new CustomEvent("iwindow_normalize", { detail: { "i": i } }));
iwindow_min_array_remove(i);
iwindow_check_body_overflow();
}
}
function iwindow_create_menu(i, menu, cx, cy) {
if (document.getElementById("iwindow_window_" + i) != null) {
if (cx == null) {
if (event != null) cx = event.clientX;
else if (document.getElementById("iwindow_window_menu_button_" + i) != null && document.getElementById("iwindow_window_menu_button_" + i).style.display != "none") cx = document.getElementById("iwindow_window_menu_button_" + i).getBoundingClientRect().left + 15;
else cx = document.getElementById("iwindow_window_" + i).getBoundingClientRect().left + 15;
}
if (cy == null) {
if (event != null) cy = event.clientY;
else if (document.getElementById("iwindow_window_menu_button_" + i) != null && document.getElementById("iwindow_window_menu_button_" + i).style.display != "none") cy = document.getElementById("iwindow_window_menu_button_" + i).getBoundingClientRect().top + 15;
else cy = document.getElementById("iwindow_window_" + i).getBoundingClientRect().top + 15;
}
if (menu != null) iwindow_window_create_menu(i, menu, cx, cy);
else if (iwindow_attributes[i].menu != null) iwindow_window_create_menu(i, iwindow_attributes[i].menu, cx, cy);
}
}
function iwindow_check_body_overflow() {
var ifmm = false;
for (var m = 1; ; m++) {
if (document.getElementById("iwindow_window_" + m) != null) {
if (iwindow_attributes[m]["display_mode"] == "maximize") {
ifmm = true;
break;
}
}
else break;
}
if (!ifmm) document.body.parentNode.style.overflow = "auto";
}
window.iwindow_min_array = new Array();
window.iwindow_attributes = new Array();
window.addEventListener("resize", () => {
for (var i = 1; ; i++) {
if (document.getElementById("iwindow_window_" + i) != null) {
document.getElementById("iwindow_window_" + i).style.transition = "";
if (iwindow_attributes[i]["display_mode"] == "maximize") {
document.getElementById("iwindow_window_title_" + i).style.width = "100%";
if (iwindow_attributes[i].mode == 2) document.getElementById("iwindow_window_title_words_" + i).style.width = document.documentElement.clientWidth - 5 - 90 + "px";
else if (iwindow_attributes[i].mode == 3) document.getElementById("iwindow_window_title_words_" + i).style.width = document.documentElement.clientWidth - 5 - 30 + "px";
else if (iwindow_attributes[i].mode == 4) document.getElementById("iwindow_window_title_words_" + i).style.width = document.documentElement.clientWidth - 5 + "px";
else if (iwindow_attributes[i].mode == 5) document.getElementById("iwindow_window_title_words_" + i).style.width = document.documentElement.clientWidth - 5 - 60 + "px";
else if (iwindow_attributes[i].mode == 6) document.getElementById("iwindow_window_title_words_" + i).style.width = document.documentElement.clientWidth - 5 - 30 + "px";
else document.getElementById("iwindow_window_title_words_" + i).style.width = document.documentElement.clientWidth - 5 - 120 + "px";
document.getElementById("iwindow_window_content_" + i).style.height = document.documentElement.clientHeight - 30 + "px";
}
else {
if ((document.documentElement.clientWidth - 100) < document.getElementById("iwindow_window_" + i).getBoundingClientRect().left) {
document.getElementById("iwindow_window_" + i).style.left = document.documentElement.clientWidth - 100 + "px";
}
if ((document.documentElement.clientHeight - 100) < document.getElementById("iwindow_window_" + i).getBoundingClientRect().top) {
document.getElementById("iwindow_window_" + i).style.top = document.documentElement.clientHeight - 100 + "px";
}
}
document.getElementById("iwindow_window_" + i).style.transition = "all .3s ease";
}
else break;
}
});兼容性
不支持Internet Explorer。