@jswf/core
Version:
JavaScript Window Framework
195 lines • 6.85 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
/**
* ウインドウ等総合管理クラス
*
* @export
* @class Jwf
*/
var WindowManager = /** @class */ (function () {
function WindowManager() {
}
/**
* マウスとタッチイベントの座標取得処理
* @param {MouseEvent|TouchEvent} e
* @returns {Point} マウスの座標
*/
WindowManager.getPos = function (e) {
var p;
if (e.targetTouches &&
e.targetTouches.length) {
var touch = e.targetTouches[0];
p = { x: touch.pageX, y: touch.pageY };
}
else {
p = { x: e.clientX, y: e.clientY };
}
return p;
};
/**
* 対象ノードに対して移動を許可し、イベントを発生させる
*
* @static
* @param {HTMLElement} node
* @memberof Jwf
*/
WindowManager.enableMove = function (node) {
function mouseDown(e) {
if (WindowManager.moveNode == null) {
WindowManager.moveNode = node;
var p = WindowManager.getPos(e);
WindowManager.baseX = p.x;
WindowManager.baseY = p.y;
WindowManager.nodeX = node.offsetLeft;
WindowManager.nodeY = node.offsetTop;
WindowManager.nodeWidth = node.clientWidth;
WindowManager.nodeHeight = node.clientWidth;
e.preventDefault();
return false;
}
return true;
}
node.addEventListener("touchstart", mouseDown, { passive: false });
node.addEventListener("mousedown", mouseDown);
};
/**
* ノードに対してイベントを発生させる
*
* @static
* @param {HTMLElement} node 対象ノード
* @param {string} ename イベント名
* @param {*} [params] イベント発生時にevent.paramsの形で送られる
* @memberof Jwf
*/
WindowManager.callEvent = function (node, ename, params) {
node.dispatchEvent(WindowManager.createEvent(ename, params));
};
/**
*イベントを作成する
*
* @static
* @param {string} ename イベント名
* @param {*} [params] イベント発生時にevent.paramsの形で送られる
* @returns {Event} 作成したイベント
* @memberof Jwf
*/
WindowManager.createEvent = function (ename, params) {
var event;
try {
event = new CustomEvent(ename);
}
catch (e) {
event = document.createEvent("CustomEvent");
event.initCustomEvent(ename, false, false, null);
}
if (params)
event.params = params;
return event;
};
/**
*ノードを作成する
*
* @static
* @param {string} tagName タグ名
* @param {*} [params] タグパラメータ
* @returns {HTMLElement} 作成したノード
* @memberof Jwf
*/
WindowManager.createElement = function (tagName, params) {
var tag = document.createElement(tagName);
if (params) {
for (var index in params) {
var p = params[index];
if (typeof p == "object" && p) {
for (var _i = 0, _a = Object.keys(p); _i < _a.length; _i++) {
var index2 = _a[_i];
tag[index][index2] =
p[index2];
}
}
else
tag[index] = p;
}
}
return tag;
};
/**
*ウインドウレイアウトの更新要求
*実際の処理は遅延非同期で行われる
*
* @static
* @param {boolean} flag true:全Window強制更新 false:更新の必要があるWindowのみ更新
* @memberof Jwf
*/
WindowManager.layout = function (flag) {
WindowManager.layoutForced = WindowManager.layoutForced || flag;
if (!WindowManager.layoutHandler) {
//タイマーによる遅延実行
WindowManager.layoutHandler = window.setTimeout(function () {
WindowManager.layoutHandler = null;
var nodes = document.querySelectorAll("[data-jwf=Window]");
var count = nodes.length;
for (var i = 0; i < count; i++) {
var node = nodes[i];
if (!node.Jwf.getParent())
node.Jwf.onMeasure(WindowManager.layoutForced);
node.Jwf.onLayout(WindowManager.layoutForced);
}
WindowManager.layoutForced = false;
}, 0);
}
};
WindowManager.moveNode = null;
WindowManager.frame = null;
return WindowManager;
}());
exports.WindowManager = WindowManager;
function deactive() {
var activeWindows = document.querySelectorAll('[data-jwf="Window"][data-jwf-active="true"]');
for (var i = 0, l = activeWindows.length; i < l; i++) {
var w = activeWindows[i];
w.dataset.jwfActive = "false";
w.Jwf.callEvent("active", { active: false });
}
}
function mouseDown(e) {
var node = e.target;
do {
if (node.dataset && node.dataset.jwf === "Window") {
return true;
}
} while ((node = node.parentNode));
deactive();
return false;
}
//マウスが離された場合に選択をリセット
function mouseUp() {
WindowManager.moveNode = null;
WindowManager.frame = null;
}
//マウス移動時の処理
function mouseMove(e) {
if (WindowManager.moveNode) {
var node = WindowManager.moveNode; //移動中ノード
var p = WindowManager.getPos(e); //座標の取得
var params = {
event: e,
nodePoint: { x: WindowManager.nodeX, y: WindowManager.nodeY },
basePoint: { x: WindowManager.baseX, y: WindowManager.baseY },
nowPoint: { x: p.x, y: p.y },
nodeSize: { width: node.clientWidth, height: node.clientHeight }
};
WindowManager.callEvent(node, "move", params);
}
}
//各イベント設定
addEventListener("resize", function () {
WindowManager.layout(true);
});
addEventListener("mouseup", mouseUp, false);
addEventListener("touchend", mouseUp, { passive: false });
addEventListener("mousemove", mouseMove, false);
addEventListener("touchmove", mouseMove, { passive: false });
addEventListener("touchstart", mouseDown, { passive: false });
addEventListener("mousedown", mouseDown, false);
//# sourceMappingURL=WindowManager.js.map