@jswf/core
Version:
JavaScript Window Framework
282 lines • 11.5 kB
JavaScript
;
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var BaseView_1 = require("./BaseView");
require("../scss/Splitter.scss");
var Splitter = /** @class */ (function (_super) {
__extends(Splitter, _super);
/**
*Creates an instance of Splitter.
* @param {number} [splitPos]
* @param {('ns'|'sn'|'ew'|'we')} [splitType] 分割領域のタイプ
* @memberof Splitter
*/
function Splitter(splitPos, splitType) {
var _this = _super.call(this) || this;
_this.drawerMode = false;
_this.drawerModeNow = false;
_this.splitterMoving = false;
_this.splitterThick = 10;
_this.splitterPos = 100;
_this.splitterType = "we";
_this.childList = [];
_this.drawerWidth = 0;
_this.pos = 0;
_this.type = "we";
_this.setJwfStyle("SplitterView");
_this.setSize(640, 480);
if (splitPos != null)
_this.splitterPos = splitPos;
if (splitType != null) {
_this.splitterType = splitType;
}
var client = _this.getClient();
client.dataset.splitterType = _this.splitterType;
_this.childList = [new BaseView_1.BaseView(), new BaseView_1.BaseView()];
_super.prototype.addChild.call(_this, _this.childList[0]);
_super.prototype.addChild.call(_this, _this.childList[1]);
var icon = document.createElement("div");
_this.menuIcon = icon;
icon.dataset.kind = "SplitterMenu";
icon.style.display = "none";
client.appendChild(icon);
icon.addEventListener("click", function () {
var child0 = _this.childList[0];
_this.childList[0].addEventListener("visibled", function (e) {
if (e.visible) {
_this.splitter.setVisible(true);
}
});
child0.setVisible(true);
child0.active(true);
icon.style.display = "none";
});
var splitter = new BaseView_1.BaseView();
_this.splitter = splitter;
splitter.setJwfStyle("Splitter");
splitter.setOrderTop(true);
splitter.setNoActive(true);
_super.prototype.addChild.call(_this, splitter);
var handle = null;
splitter.getNode().addEventListener("move", function (e) {
var p = e.params;
var width = _this.getClientWidth();
var height = _this.getClientHeight();
var splitterThick = _this.splitterThick;
var x = p.nodePoint.x + p.nowPoint.x - p.basePoint.x;
var y = p.nodePoint.y + p.nowPoint.y - p.basePoint.y;
switch (_this.getClient().dataset.splitterType) {
case "ns":
_this.splitterPos = y;
break;
case "sn":
_this.splitterPos = height - (y + splitterThick);
break;
case "we":
_this.splitterPos = x;
break;
case "ew":
_this.splitterPos = width - (x + splitterThick);
break;
}
_this.splitterMoving = true;
if (handle)
window.clearTimeout(handle);
handle = window.setTimeout(function () {
handle = null;
_this.splitterMoving = false;
_this.layout();
}, 1000);
_this.layout();
});
_this.addEventListener("layout", function () {
var child0 = _this.childList[0];
var child1 = _this.childList[1];
var active = function (e) {
if (!e.active) {
splitter.setVisible(false);
child0.setVisible(false);
_this.menuIcon.style.display = "block";
}
};
//動的分割機能の処理
if (_this.drawerMode && !_this.splitterMoving) {
var type = _this.splitterType;
var dsize = _this.drawerWidth + _this.splitterPos;
var ssize = type === "ew" || type === "we" ? _this.getWidth() : _this.getHeight();
if (!_this.drawerModeNow) {
if (dsize > 0 && ssize < dsize) {
_this.drawerModeNow = true;
child1.setChildStyle("client");
child0.setOrderTop(true);
_this.splitter.setVisible(false);
child0.addEventListener("active", active);
child0.setAnimation("show", _this.splitterType + "DrawerShow 0.5s ease 0s normal");
child0.setAnimation("close", _this.splitterType + "DrawerClose 0.5s ease 0s normal");
child0.active();
child0.setVisible(false);
_this.menuIcon.style.display = "block";
}
}
else {
if (dsize > 0 && ssize >= dsize) {
_this.drawerModeNow = false;
child0.removeEventListener("active", active);
child1.setChildStyle(null);
child0.setOrderTop(false);
child0.setVisible(true);
_this.splitter.setVisible(true);
_this.menuIcon.style.display = "none";
}
}
}
var width = _this.getClientWidth();
var height = _this.getClientHeight();
var splitterThick = _this.splitterThick;
var splitterPos = _this.splitterPos;
var p;
if (splitterPos < 0)
splitterPos = 0;
switch (_this.splitterType) {
case "we":
if (splitterPos >= width - splitterThick)
splitterPos = width - splitterThick - 1;
splitter.setSize(splitterThick, height);
splitter.setPos(splitterPos, 0);
child0.setPos(0, 0);
child0.setSize(splitter.getPosX(), height);
child1.setPos(splitterPos + splitterThick, 0);
child1.setSize(width - (splitterPos + splitterThick), height);
break;
case "ew":
if (splitterPos >= width - splitterThick)
splitterPos = width - splitterThick - 1;
p = width - splitterPos - splitterThick;
splitter.setSize(splitterThick, height);
splitter.setPos(p, 0);
child1.setPos(0, 0);
child1.setSize(p, height);
child0.setPos(p + splitterThick, 0);
child0.setSize(splitterPos, height);
break;
case "ns":
if (splitterPos >= height - splitterThick)
splitterPos = height - splitterThick - 1;
splitter.setSize(width, splitterThick);
splitter.setPos(0, splitterPos);
child0.setPos(0, 0);
child0.setSize(width, splitterPos);
child1.setPos(0, splitterPos + splitterThick);
child1.setSize(width, height - (splitterPos + splitterThick));
break;
case "sn":
if (splitterPos >= height - splitterThick)
splitterPos = height - splitterThick - 1;
splitter.setSize(width, splitterThick);
p = height - splitterPos - splitterThick;
splitter.setPos(0, p);
child1.setPos(0, 0);
child1.setSize(width, p);
child0.setPos(0, p + splitterThick);
child0.setSize(width, splitterPos);
break;
}
_this.splitterPos = splitterPos;
});
return _this;
}
/**
*子ウインドウの追加
*
* @param {number} index 追加位置
* @param {BaseView} child 追加ウインドウ
* @param {('left' | 'right' | 'top' | 'bottom' | 'client' | null)} [arrgement] ドッキングタイプ
* @memberof Splitter
*/
Splitter.prototype.addChild = function (index, child, arrgement) {
if (child instanceof BaseView_1.BaseView)
this.childList[index].addChild(child, arrgement);
};
/**
*子ウインドウを切り離す
*
* @param {number} index 削除位置
* @param {BaseView} [child] 削除ウインドウ
* @memberof Splitter
*/
Splitter.prototype.removeChild = function (index, child) {
if (child == null)
return;
this.childList[index].removeChild(child);
};
/**
*子ウインドウを全て切り離す
*
* @param {number} [index] 削除位置
* @memberof Splitter
*/
Splitter.prototype.removeChildAll = function (index) {
if (index == null)
return;
this.childList[index].removeChildAll();
};
/**
*分割バーの位置設定
*
* @param {number} pos
* @param {('ns'|'sn'|'ew'|'we')} [type]
* @memberof Splitter
*/
Splitter.prototype.setSplitterPos = function (pos, type) {
if (pos != null)
this.pos = pos;
if (type) {
this.type = type;
}
this.splitterPos = this.pos;
if (this.type != null) {
this.getClient().dataset.splitterType = this.type;
this.splitterType = this.type;
}
this.layout();
};
/**
*
*
* @param {boolean} flag true:有効 false:無効
* @param {number} [size] スライドを開始するサイズ
* @memberof Splitter
*/
Splitter.prototype.setOverlay = function (flag, size) {
if (flag) {
this.drawerMode = true;
this.drawerWidth = size != null ? size : 0;
}
this.layout();
};
/**
*子ウインドウの取得
*
* @param {number} index 位置
* @returns {BaseView} 子ウインドウ
* @memberof Splitter
*/
Splitter.prototype.getChild = function (index) {
return this.childList[index];
};
return Splitter;
}(BaseView_1.BaseView));
exports.Splitter = Splitter;
//# sourceMappingURL=Splitter.js.map