@egjs/grid
Version:
A component that can arrange items according to the type of grids
1,543 lines (1,366 loc) • 212 kB
JavaScript
/*
Copyright (c) 2021-present NAVER Corp.
name: @egjs/grid
license: MIT
author: NAVER Corp.
repository: https://github.com/naver/egjs-grid
version: 1.18.0
*/
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
(global = global || self, global.Grid = factory());
}(this, (function () { 'use strict';
/*! *****************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
/* global Reflect, Promise */
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 (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p];
};
return extendStatics(d, b);
};
function __extends(d, b) {
if (typeof b !== "function" && b !== null) throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() {
this.constructor = d;
}
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
var __assign = function () {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
function __decorate(decorators, target, key, desc) {
var c = arguments.length,
r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
}
function __spreadArray(to, from) {
for (var i = 0, il = from.length, j = to.length; i < il; i++, j++) to[j] = from[i];
return to;
}
/*
Copyright (c) NAVER Corp.
name: @egjs/component
license: MIT
author: NAVER Corp.
repository: https://github.com/naver/egjs-component
version: 3.0.5
*/
/*! *****************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
function __values(o) {
var s = typeof Symbol === "function" && Symbol.iterator,
m = s && o[s],
i = 0;
if (m) return m.call(o);
if (o && typeof o.length === "number") return {
next: function () {
if (o && i >= o.length) o = void 0;
return {
value: o && o[i++],
done: !o
};
}
};
throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
}
function __read(o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o),
r,
ar = [],
e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
} catch (error) {
e = {
error: error
};
} finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
} finally {
if (e) throw e.error;
}
}
return ar;
}
function __spread() {
for (var ar = [], i = 0; i < arguments.length; i++) ar = ar.concat(__read(arguments[i]));
return ar;
}
/*
* Copyright (c) 2015 NAVER Corp.
* egjs projects are licensed under the MIT license
*/
var isUndefined = function (value) {
return typeof value === "undefined";
};
// This class name is not matched to file name intentionally
/**
* Event class to provide additional properties
* @ko Component에서 추가적인 프로퍼티를 제공하는 이벤트 클래스
*/
var ComponentEvent = /*#__PURE__*/function () {
/**
* Create a new instance of ComponentEvent.
* @ko ComponentEvent의 새로운 인스턴스를 생성한다.
* @param eventType The name of the event.<ko>이벤트 이름.</ko>
* @param props An object that contains additional event properties.<ko>추가적인 이벤트 프로퍼티 오브젝트.</ko>
*/
function ComponentEvent(eventType, props) {
var e_1, _a;
this._canceled = false;
if (props) {
try {
for (var _b = __values(Object.keys(props)), _c = _b.next(); !_c.done; _c = _b.next()) {
var key = _c.value;
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
this[key] = props[key];
}
} catch (e_1_1) {
e_1 = {
error: e_1_1
};
} finally {
try {
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
} finally {
if (e_1) throw e_1.error;
}
}
}
this.eventType = eventType;
}
/**
* Stop the event. {@link ComponentEvent#isCanceled} will return `true` after.
* @ko 이벤트를 중단한다. 이후 {@link ComponentEvent#isCanceled}가 `true`를 반환한다.
*/
var __proto = ComponentEvent.prototype;
__proto.stop = function () {
this._canceled = true;
};
/**
* Returns a boolean value that indicates whether {@link ComponentEvent#stop} is called before.
* @ko {@link ComponentEvent#stop}이 호출되었는지 여부를 반환한다.
* @return {boolean} A boolean value that indicates whether {@link ComponentEvent#stop} is called before.<ko>이전에 {@link ComponentEvent#stop}이 불려졌는지 여부를 반환한다.</ko>
*/
__proto.isCanceled = function () {
return this._canceled;
};
return ComponentEvent;
}();
/**
* A class used to manage events in a component
* @ko 컴포넌트의 이벤트을 관리할 수 있게 하는 클래스
*/
var Component = /*#__PURE__*/function () {
/**
* @support {"ie": "7+", "ch" : "latest", "ff" : "latest", "sf" : "latest", "edge" : "latest", "ios" : "7+", "an" : "2.1+ (except 3.x)"}
*/
function Component() {
this._eventHandler = {};
}
/**
* Trigger a custom event.
* @ko 커스텀 이벤트를 발생시킨다
* @param {string | ComponentEvent} event The name of the custom event to be triggered or an instance of the ComponentEvent<ko>발생할 커스텀 이벤트의 이름 또는 ComponentEvent의 인스턴스</ko>
* @param {any[]} params Event data to be sent when triggering a custom event <ko>커스텀 이벤트가 발생할 때 전달할 데이터</ko>
* @return An instance of the component itself<ko>컴포넌트 자신의 인스턴스</ko>
* @example
* ```ts
* import Component, { ComponentEvent } from "@egjs/component";
*
* class Some extends Component<{
* beforeHi: ComponentEvent<{ foo: number; bar: string }>;
* hi: { foo: { a: number; b: boolean } };
* someEvent: (foo: number, bar: string) => void;
* someOtherEvent: void; // When there's no event argument
* }> {
* some(){
* if(this.trigger("beforeHi")){ // When event call to stop return false.
* this.trigger("hi");// fire hi event.
* }
* }
* }
*
* const some = new Some();
* some.on("beforeHi", e => {
* if(condition){
* e.stop(); // When event call to stop, `hi` event not call.
* }
* // `currentTarget` is component instance.
* console.log(some === e.currentTarget); // true
*
* typeof e.foo; // number
* typeof e.bar; // string
* });
* some.on("hi", e => {
* typeof e.foo.b; // boolean
* });
* // If you want to more know event design. You can see article.
* // https://github.com/naver/egjs-component/wiki/How-to-make-Component-event-design%3F
* ```
*/
var __proto = Component.prototype;
__proto.trigger = function (event) {
var params = [];
for (var _i = 1; _i < arguments.length; _i++) {
params[_i - 1] = arguments[_i];
}
var eventName = event instanceof ComponentEvent ? event.eventType : event;
var handlers = __spread(this._eventHandler[eventName] || []);
if (handlers.length <= 0) {
return this;
}
if (event instanceof ComponentEvent) {
event.currentTarget = this;
handlers.forEach(function (handler) {
handler(event);
});
} else {
handlers.forEach(function (handler) {
// eslint-disable-next-line @typescript-eslint/no-unsafe-call
handler.apply(void 0, __spread(params));
});
}
return this;
};
/**
* Executed event just one time.
* @ko 이벤트가 한번만 실행된다.
* @param {string} eventName The name of the event to be attached or an event name - event handler mapped object.<ko>등록할 이벤트의 이름 또는 이벤트 이름-핸들러 오브젝트</ko>
* @param {function} handlerToAttach The handler function of the event to be attached <ko>등록할 이벤트의 핸들러 함수</ko>
* @return An instance of the component itself<ko>컴포넌트 자신의 인스턴스</ko>
* @example
* ```ts
* import Component, { ComponentEvent } from "@egjs/component";
*
* class Some extends Component<{
* hi: ComponentEvent;
* }> {
* hi() {
* alert("hi");
* }
* thing() {
* this.once("hi", this.hi);
* }
* }
*
* var some = new Some();
* some.thing();
* some.trigger(new ComponentEvent("hi"));
* // fire alert("hi");
* some.trigger(new ComponentEvent("hi"));
* // Nothing happens
* ```
*/
__proto.once = function (eventName, handlerToAttach) {
var _this = this;
if (typeof eventName === "object" && isUndefined(handlerToAttach)) {
var eventHash = eventName;
for (var key in eventHash) {
this.once(key, eventHash[key]);
}
return this;
} else if (typeof eventName === "string" && typeof handlerToAttach === "function") {
var listener_1 = function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
// eslint-disable-next-line @typescript-eslint/no-unsafe-call
handlerToAttach.apply(void 0, __spread(args));
_this.off(eventName, listener_1);
};
this.on(eventName, listener_1);
}
return this;
};
/**
* Checks whether an event has been attached to a component.
* @ko 컴포넌트에 이벤트가 등록됐는지 확인한다.
* @param {string} eventName The name of the event to be attached <ko>등록 여부를 확인할 이벤트의 이름</ko>
* @return {boolean} Indicates whether the event is attached. <ko>이벤트 등록 여부</ko>
* @example
* ```ts
* import Component from "@egjs/component";
*
* class Some extends Component<{
* hi: void;
* }> {
* some() {
* this.hasOn("hi");// check hi event.
* }
* }
* ```
*/
__proto.hasOn = function (eventName) {
return !!this._eventHandler[eventName];
};
/**
* Attaches an event to a component.
* @ko 컴포넌트에 이벤트를 등록한다.
* @param {string} eventName The name of the event to be attached or an event name - event handler mapped object.<ko>등록할 이벤트의 이름 또는 이벤트 이름-핸들러 오브젝트</ko>
* @param {function} handlerToAttach The handler function of the event to be attached <ko>등록할 이벤트의 핸들러 함수</ko>
* @return An instance of a component itself<ko>컴포넌트 자신의 인스턴스</ko>
* @example
* ```ts
* import Component, { ComponentEvent } from "@egjs/component";
*
* class Some extends Component<{
* hi: void;
* }> {
* hi() {
* console.log("hi");
* }
* some() {
* this.on("hi",this.hi); //attach event
* }
* }
* ```
*/
__proto.on = function (eventName, handlerToAttach) {
if (typeof eventName === "object" && isUndefined(handlerToAttach)) {
var eventHash = eventName;
for (var name in eventHash) {
this.on(name, eventHash[name]);
}
return this;
} else if (typeof eventName === "string" && typeof handlerToAttach === "function") {
var handlerList = this._eventHandler[eventName];
if (isUndefined(handlerList)) {
this._eventHandler[eventName] = [];
handlerList = this._eventHandler[eventName];
}
handlerList.push(handlerToAttach);
}
return this;
};
/**
* Detaches an event from the component.<br/>If the `eventName` is not given this will detach all event handlers attached.<br/>If the `handlerToDetach` is not given, this will detach all event handlers for `eventName`.
* @ko 컴포넌트에 등록된 이벤트를 해제한다.<br/>`eventName`이 주어지지 않았을 경우 모든 이벤트 핸들러를 제거한다.<br/>`handlerToAttach`가 주어지지 않았을 경우 `eventName`에 해당하는 모든 이벤트 핸들러를 제거한다.
* @param {string?} eventName The name of the event to be detached <ko>해제할 이벤트의 이름</ko>
* @param {function?} handlerToDetach The handler function of the event to be detached <ko>해제할 이벤트의 핸들러 함수</ko>
* @return An instance of a component itself <ko>컴포넌트 자신의 인스턴스</ko>
* @example
* ```ts
* import Component, { ComponentEvent } from "@egjs/component";
*
* class Some extends Component<{
* hi: void;
* }> {
* hi() {
* console.log("hi");
* }
* some() {
* this.off("hi",this.hi); //detach event
* }
* }
* ```
*/
__proto.off = function (eventName, handlerToDetach) {
// Detach all event handlers.
if (isUndefined(eventName)) {
this._eventHandler = {};
return this;
}
// Detach all handlers for eventname or detach event handlers by object.
if (isUndefined(handlerToDetach)) {
if (typeof eventName === "string") {
delete this._eventHandler[eventName];
return this;
} else {
var eventHash = eventName;
for (var name in eventHash) {
this.off(name, eventHash[name]);
}
return this;
}
}
// Detach single event handler
var handlerList = this._eventHandler[eventName];
if (handlerList) {
var length = handlerList.length;
for (var i = 0; i < length; ++i) {
if (handlerList[i] === handlerToDetach) {
handlerList.splice(i, 1);
if (length <= 1) {
delete this._eventHandler[eventName];
}
break;
}
}
}
return this;
};
/**
* Version info string
* @ko 버전정보 문자열
* @name VERSION
* @static
* @example
* Component.VERSION; // ex) 3.0.0
* @memberof Component
*/
Component.VERSION = "3.0.5";
return Component;
}();
/*
* Copyright (c) 2015 NAVER Corp.
* egjs projects are licensed under the MIT license
*/
// eslint-disable-next-line @typescript-eslint/naming-convention, @typescript-eslint/no-unsafe-assignment
var ComponentEvent$1 = ComponentEvent;
var DEFAULT_GRID_OPTIONS = {
horizontal: false,
useTransform: false,
percentage: false,
isEqualSize: false,
isConstantSize: false,
gap: 0,
attributePrefix: "data-grid-",
resizeDebounce: 100,
maxResizeDebounce: 0,
autoResize: true,
preserveUIOnDestroy: false,
defaultDirection: "end",
externalContainerManager: null,
externalItemRenderer: null,
renderOnPropertyChange: true,
useFit: true,
outlineLength: 0,
outlineSize: 0,
useRoundedSize: true,
useResizeObserver: false,
observeChildren: false
};
var PROPERTY_TYPE;
(function (PROPERTY_TYPE) {
PROPERTY_TYPE[PROPERTY_TYPE["PROPERTY"] = 1] = "PROPERTY";
PROPERTY_TYPE[PROPERTY_TYPE["RENDER_PROPERTY"] = 2] = "RENDER_PROPERTY";
})(PROPERTY_TYPE || (PROPERTY_TYPE = {}));
var MOUNT_STATE;
(function (MOUNT_STATE) {
MOUNT_STATE[MOUNT_STATE["UNCHECKED"] = 1] = "UNCHECKED";
MOUNT_STATE[MOUNT_STATE["UNMOUNTED"] = 2] = "UNMOUNTED";
MOUNT_STATE[MOUNT_STATE["MOUNTED"] = 3] = "MOUNTED";
})(MOUNT_STATE || (MOUNT_STATE = {}));
var UPDATE_STATE;
(function (UPDATE_STATE) {
UPDATE_STATE[UPDATE_STATE["NEED_UPDATE"] = 1] = "NEED_UPDATE";
UPDATE_STATE[UPDATE_STATE["WAIT_LOADING"] = 2] = "WAIT_LOADING";
UPDATE_STATE[UPDATE_STATE["UPDATED"] = 3] = "UPDATED";
})(UPDATE_STATE || (UPDATE_STATE = {}));
var GRID_PROPERTY_TYPES = {
gap: PROPERTY_TYPE.RENDER_PROPERTY,
defaultDirection: PROPERTY_TYPE.PROPERTY,
renderOnPropertyChange: PROPERTY_TYPE.PROPERTY,
preserveUIOnDestroy: PROPERTY_TYPE.PROPERTY,
useFit: PROPERTY_TYPE.PROPERTY,
outlineSize: PROPERTY_TYPE.RENDER_PROPERTY,
outlineLength: PROPERTY_TYPE.RENDER_PROPERTY
};
var GRID_METHODS = ["syncElements", "updateItems", "getItems", "setItems", "renderItems", "getContainerInlineSize", "getContainerElement"];
var GRID_EVENTS = ["renderComplete", "contentError"];
var RECT_NAMES = {
horizontal: {
inlinePos: "top",
contentPos: "left",
inlineSize: "height",
contentSize: "width"
},
vertical: {
inlinePos: "left",
contentPos: "top",
inlineSize: "width",
contentSize: "height"
}
};
/*
Copyright (c) 2019-present NAVER Corp.
name: @egjs/list-differ
license: MIT
author: NAVER Corp.
repository: https://github.com/naver/egjs-list-differ
version: 1.0.0
*/
/*
egjs-list-differ
Copyright (c) 2019-present NAVER Corp.
MIT license
*/
var PolyMap =
/*#__PURE__*/
function () {
function PolyMap() {
this.keys = [];
this.values = [];
}
var __proto = PolyMap.prototype;
__proto.get = function (key) {
return this.values[this.keys.indexOf(key)];
};
__proto.set = function (key, value) {
var keys = this.keys;
var values = this.values;
var prevIndex = keys.indexOf(key);
var index = prevIndex === -1 ? keys.length : prevIndex;
keys[index] = key;
values[index] = value;
};
return PolyMap;
}();
/*
egjs-list-differ
Copyright (c) 2019-present NAVER Corp.
MIT license
*/
var HashMap =
/*#__PURE__*/
function () {
function HashMap() {
this.object = {};
}
var __proto = HashMap.prototype;
__proto.get = function (key) {
return this.object[key];
};
__proto.set = function (key, value) {
this.object[key] = value;
};
return HashMap;
}();
/*
egjs-list-differ
Copyright (c) 2019-present NAVER Corp.
MIT license
*/
var SUPPORT_MAP = typeof Map === "function";
/*
egjs-list-differ
Copyright (c) 2019-present NAVER Corp.
MIT license
*/
var Link =
/*#__PURE__*/
function () {
function Link() {}
var __proto = Link.prototype;
__proto.connect = function (prevLink, nextLink) {
this.prev = prevLink;
this.next = nextLink;
prevLink && (prevLink.next = this);
nextLink && (nextLink.prev = this);
};
__proto.disconnect = function () {
// In double linked list, diconnect the interconnected relationship.
var prevLink = this.prev;
var nextLink = this.next;
prevLink && (prevLink.next = nextLink);
nextLink && (nextLink.prev = prevLink);
};
__proto.getIndex = function () {
var link = this;
var index = -1;
while (link) {
link = link.prev;
++index;
}
return index;
};
return Link;
}();
/*
egjs-list-differ
Copyright (c) 2019-present NAVER Corp.
MIT license
*/
function orderChanged(changed, fixed) {
// It is roughly in the order of these examples.
// 4, 6, 0, 2, 1, 3, 5, 7
var fromLinks = []; // 0, 1, 2, 3, 4, 5, 6, 7
var toLinks = [];
changed.forEach(function (_a) {
var from = _a[0],
to = _a[1];
var link = new Link();
fromLinks[from] = link;
toLinks[to] = link;
}); // `fromLinks` are connected to each other by double linked list.
fromLinks.forEach(function (link, i) {
link.connect(fromLinks[i - 1]);
});
return changed.filter(function (_, i) {
return !fixed[i];
}).map(function (_a, i) {
var from = _a[0],
to = _a[1];
if (from === to) {
return [0, 0];
}
var fromLink = fromLinks[from];
var toLink = toLinks[to - 1];
var fromIndex = fromLink.getIndex(); // Disconnect the link connected to `fromLink`.
fromLink.disconnect(); // Connect `fromLink` to the right of `toLink`.
if (!toLink) {
fromLink.connect(undefined, fromLinks[0]);
} else {
fromLink.connect(toLink, toLink.next);
}
var toIndex = fromLink.getIndex();
return [fromIndex, toIndex];
});
}
var Result =
/*#__PURE__*/
function () {
function Result(prevList, list, added, removed, changed, maintained, changedBeforeAdded, fixed) {
this.prevList = prevList;
this.list = list;
this.added = added;
this.removed = removed;
this.changed = changed;
this.maintained = maintained;
this.changedBeforeAdded = changedBeforeAdded;
this.fixed = fixed;
}
var __proto = Result.prototype;
Object.defineProperty(__proto, "ordered", {
get: function () {
if (!this.cacheOrdered) {
this.caculateOrdered();
}
return this.cacheOrdered;
},
enumerable: true,
configurable: true
});
Object.defineProperty(__proto, "pureChanged", {
get: function () {
if (!this.cachePureChanged) {
this.caculateOrdered();
}
return this.cachePureChanged;
},
enumerable: true,
configurable: true
});
__proto.caculateOrdered = function () {
var ordered = orderChanged(this.changedBeforeAdded, this.fixed);
var changed = this.changed;
var pureChanged = [];
this.cacheOrdered = ordered.filter(function (_a, i) {
var from = _a[0],
to = _a[1];
var _b = changed[i],
fromBefore = _b[0],
toBefore = _b[1];
if (from !== to) {
pureChanged.push([fromBefore, toBefore]);
return true;
}
});
this.cachePureChanged = pureChanged;
};
return Result;
}();
/**
*
* @memberof eg.ListDiffer
* @static
* @function
* @param - Previous List <ko> 이전 목록 </ko>
* @param - List to Update <ko> 업데이트 할 목록 </ko>
* @param - This callback function returns the key of the item. <ko> 아이템의 키를 반환하는 콜백 함수입니다.</ko>
* @return - Returns the diff between `prevList` and `list` <ko> `prevList`와 `list`의 다른 점을 반환한다.</ko>
* @example
* import { diff } from "@egjs/list-differ";
* // script => eg.ListDiffer.diff
* const result = diff([0, 1, 2, 3, 4, 5], [7, 8, 0, 4, 3, 6, 2, 1], e => e);
* // List before update
* // [1, 2, 3, 4, 5]
* console.log(result.prevList);
* // Updated list
* // [4, 3, 6, 2, 1]
* console.log(result.list);
* // Index array of values added to `list`
* // [0, 1, 5]
* console.log(result.added);
* // Index array of values removed in `prevList`
* // [5]
* console.log(result.removed);
* // An array of index pairs of `prevList` and `list` with different indexes from `prevList` and `list`
* // [[0, 2], [4, 3], [3, 4], [2, 6], [1, 7]]
* console.log(result.changed);
* // The subset of `changed` and an array of index pairs that moved data directly. Indicate an array of absolute index pairs of `ordered`.(Formatted by: Array<[index of prevList, index of list]>)
* // [[4, 3], [3, 4], [2, 6]]
* console.log(result.pureChanged);
* // An array of index pairs to be `ordered` that can synchronize `list` before adding data. (Formatted by: Array<[prevIndex, nextIndex]>)
* // [[4, 1], [4, 2], [4, 3]]
* console.log(result.ordered);
* // An array of index pairs of `prevList` and `list` that have not been added/removed so data is preserved
* // [[0, 2], [4, 3], [3, 4], [2, 6], [1, 7]]
* console.log(result.maintained);
*/
function diff(prevList, list, findKeyCallback) {
var mapClass = SUPPORT_MAP ? Map : findKeyCallback ? HashMap : PolyMap;
var callback = findKeyCallback || function (e) {
return e;
};
var added = [];
var removed = [];
var maintained = [];
var prevKeys = prevList.map(callback);
var keys = list.map(callback);
var prevKeyMap = new mapClass();
var keyMap = new mapClass();
var changedBeforeAdded = [];
var fixed = [];
var removedMap = {};
var changed = [];
var addedCount = 0;
var removedCount = 0; // Add prevKeys and keys to the hashmap.
prevKeys.forEach(function (key, prevListIndex) {
prevKeyMap.set(key, prevListIndex);
});
keys.forEach(function (key, listIndex) {
keyMap.set(key, listIndex);
}); // Compare `prevKeys` and `keys` and add them to `removed` if they are not in `keys`.
prevKeys.forEach(function (key, prevListIndex) {
var listIndex = keyMap.get(key); // In prevList, but not in list, it is removed.
if (typeof listIndex === "undefined") {
++removedCount;
removed.push(prevListIndex);
} else {
removedMap[listIndex] = removedCount;
}
}); // Compare `prevKeys` and `keys` and add them to `added` if they are not in `prevKeys`.
keys.forEach(function (key, listIndex) {
var prevListIndex = prevKeyMap.get(key); // In list, but not in prevList, it is added.
if (typeof prevListIndex === "undefined") {
added.push(listIndex);
++addedCount;
} else {
maintained.push([prevListIndex, listIndex]);
removedCount = removedMap[listIndex] || 0;
changedBeforeAdded.push([prevListIndex - removedCount, listIndex - addedCount]);
fixed.push(listIndex === prevListIndex);
if (prevListIndex !== listIndex) {
changed.push([prevListIndex, listIndex]);
}
}
}); // Sort by ascending order of 'to(list's index).
removed.reverse();
return new Result(prevList, list, added, removed, changed, maintained, changedBeforeAdded, fixed);
}
/*
Copyright (c) 2019-present NAVER Corp.
name: @egjs/children-differ
license: MIT
author: NAVER Corp.
repository: https://github.com/naver/egjs-children-differ
version: 1.0.1
*/
/*
egjs-children-differ
Copyright (c) 2019-present NAVER Corp.
MIT license
*/
var findKeyCallback = typeof Map === "function" ? undefined : function () {
var childrenCount = 0;
return function (el) {
return el.__DIFF_KEY__ || (el.__DIFF_KEY__ = ++childrenCount);
};
}();
/*
egjs-children-differ
Copyright (c) 2019-present NAVER Corp.
MIT license
*/
/**
*
* @memberof eg.ChildrenDiffer
* @static
* @function
* @param - Previous List <ko> 이전 목록 </ko>
* @param - List to Update <ko> 업데이트 할 목록 </ko>
* @return - Returns the diff between `prevList` and `list` <ko> `prevList`와 `list`의 다른 점을 반환한다.</ko>
* @example
* import { diff } from "@egjs/children-differ";
* // script => eg.ChildrenDiffer.diff
* const result = diff([0, 1, 2, 3, 4, 5], [7, 8, 0, 4, 3, 6, 2, 1]);
* // List before update
* // [1, 2, 3, 4, 5]
* console.log(result.prevList);
* // Updated list
* // [4, 3, 6, 2, 1]
* console.log(result.list);
* // Index array of values added to `list`
* // [0, 1, 5]
* console.log(result.added);
* // Index array of values removed in `prevList`
* // [5]
* console.log(result.removed);
* // An array of index pairs of `prevList` and `list` with different indexes from `prevList` and `list`
* // [[0, 2], [4, 3], [3, 4], [2, 6], [1, 7]]
* console.log(result.changed);
* // The subset of `changed` and an array of index pairs that moved data directly. Indicate an array of absolute index pairs of `ordered`.(Formatted by: Array<[index of prevList, index of list]>)
* // [[4, 3], [3, 4], [2, 6]]
* console.log(result.pureChanged);
* // An array of index pairs to be `ordered` that can synchronize `list` before adding data. (Formatted by: Array<[prevIndex, nextIndex]>)
* // [[4, 1], [4, 2], [4, 3]]
* console.log(result.ordered);
* // An array of index pairs of `prevList` and `list` that have not been added/removed so data is preserved
* // [[0, 2], [4, 3], [3, 4], [2, 6], [1, 7]]
* console.log(result.maintained);
*/
function diff$1(prevList, list) {
return diff(prevList, list, findKeyCallback);
}
function getKeys(obj) {
return Object.keys(obj);
}
function getUpdatedItems(items, entries) {
var mountedItems = getMountedItems(items);
return diff$1(entries.map(function (entry) {
return entry.target;
}), mountedItems.map(function (item) {
return item.element;
})).maintained.filter(function (_a) {
var prevIndex = _a[0],
nextIndex = _a[1];
var entrySize = entries[prevIndex].size;
var item = items[nextIndex];
return !item.inlineSize || !item.contentSize || entrySize.inlineSize !== item.computedInlineSize || entrySize.blockSize !== item.computedContentSize;
}).map(function (_a) {
var nextIndex = _a[1];
return items[nextIndex];
});
}
function getMountedItems(items) {
return items.filter(function (item) {
return item.element;
});
}
function getMountedElements(items) {
return getMountedItems(items).map(function (item) {
return item.element;
});
}
function isString(val) {
return typeof val === "string";
}
function isObject(val) {
return typeof val === "object";
}
function isFunction(val) {
return typeof val === "function";
}
function isNumber(val) {
return typeof val === "number";
}
function camelize(str) {
return str.replace(/[\s-_]([a-z])/g, function (all, letter) {
return letter.toUpperCase();
});
}
function sum(arr) {
return arr.reduce(function (a, b) {
return a + b;
}, 0);
}
function getDataAttributes(element, attributePrefix) {
var dataAttributes = {};
var attributes = element.attributes;
var length = attributes.length;
for (var i = 0; i < length; ++i) {
var attribute = attributes[i];
var name = attribute.name,
value = attribute.value;
if (name.indexOf(attributePrefix) === -1) {
continue;
}
dataAttributes[camelize(name.replace(attributePrefix, ""))] = value;
}
return dataAttributes;
}
/* Class Decorator */
function GetterSetter(component) {
var prototype = component.prototype,
propertyTypes = component.propertyTypes;
var _loop_1 = function (name) {
var shouldRender = propertyTypes[name] === PROPERTY_TYPE.RENDER_PROPERTY;
var descriptor = Object.getOwnPropertyDescriptor(prototype, name) || {};
var getter = descriptor.get || function get() {
return this.options[name];
};
var setter = descriptor.set || function set(value) {
var options = this.options;
var prevValue = options[name];
if (prevValue === value) {
return;
}
options[name] = value;
if (shouldRender && options.renderOnPropertyChange) {
this.scheduleRender();
}
};
var attributes = {
enumerable: true,
configurable: true,
get: getter,
set: setter
};
Object.defineProperty(prototype, name, attributes);
};
for (var name in propertyTypes) {
_loop_1(name);
}
}
function withMethods(methods) {
return function (prototype, memberName) {
methods.forEach(function (name) {
if (name in prototype) {
return;
}
prototype[name] = function () {
var _a;
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
var result = (_a = this[memberName])[name].apply(_a, args); // fix `this` type to return your own `class` instance to the instance using the decorator.
if (result === this[memberName]) {
return this;
} else {
return result;
}
};
});
};
}
function range(length) {
var arr = [];
for (var i = 0; i < length; ++i) {
arr.push(i);
}
return arr;
}
function getRangeCost(value, valueRange) {
return Math.max(value - valueRange[1], valueRange[0] - value, 0) + 1;
}
function between(value, min, max) {
return Math.min(max, Math.max(value, min));
}
function throttle(num, unit) {
if (!unit) {
return num;
}
var reverseUnit = 1 / unit;
return Math.round(num / unit) / reverseUnit;
}
/**
* Decorator that makes the method of grid available in the framework.
* @ko 프레임워크에서 그리드의 메소드를 사용할 수 있게 하는 데코레이터.
* @memberof eg.Grid
* @private
* @example
* ```js
* import { withGridMethods } from "@egjs/grid";
*
* class Grid extends React.Component<Partial<GridProps & GridOptions>> {
* @withGridMethods
* private grid: NativeGrid;
* }
* ```
*/
var withGridMethods = withMethods(GRID_METHODS);
var ResizeWatcher =
/*#__PURE__*/
function () {
function ResizeWatcher(container, options) {
var _this = this;
if (options === void 0) {
options = {};
}
this._resizeTimer = 0;
this._maxResizeDebounceTimer = 0;
this.rect = {
width: 0,
height: 0
};
this._updatedEntries = [];
this._onWindowResize = function () {
_this._scheduleResize([{
target: _this.container
}]);
};
this._onObserve = function (entries) {
var options = _this._options;
var container = _this.container;
var containerRectBox = options.rectBox;
var childrenRectBox = options.childrenRectBox;
_this._scheduleResize(entries.map(function (entry) {
var target = entry.target;
var rectBox = target === container ? containerRectBox : childrenRectBox;
var sizes = rectBox === "border-box" ? entry.borderBoxSize : entry.contentBoxSize; // Safari < 15.3
if (!sizes) {
var contentRect = entry.contentRect;
sizes = [{
inlineSize: contentRect.width,
blockSize: contentRect.height
}];
}
return {
// not array in old browser
size: sizes[0] || sizes,
target: entry.target
};
}));
};
this._scheduleResize = function (entries) {
var _a = _this._options,
resizeDebounce = _a.resizeDebounce,
maxResizeDebounce = _a.maxResizeDebounce;
var updatedEntries = _this._updatedEntries;
updatedEntries.push.apply(updatedEntries, entries);
_this._updatedEntries = updatedEntries.filter(function (entry, index) {
return updatedEntries.lastIndexOf(entry) === index;
});
if (!_this._maxResizeDebounceTimer && maxResizeDebounce >= resizeDebounce) {
_this._maxResizeDebounceTimer = window.setTimeout(_this._onResize, maxResizeDebounce);
}
if (_this._resizeTimer) {
clearTimeout(_this._resizeTimer);
_this._resizeTimer = 0;
}
_this._resizeTimer = window.setTimeout(_this._onResize, resizeDebounce);
};
this._onResize = function () {
clearTimeout(_this._resizeTimer);
clearTimeout(_this._maxResizeDebounceTimer);
_this._maxResizeDebounceTimer = 0;
_this._resizeTimer = 0;
var updated = _this._updatedEntries;
var container = _this.container;
var containerEntry;
var childEntries = updated.filter(function (entry) {
if (entry.target === container) {
containerEntry = entry;
return false;
} else {
return true;
}
});
var isResizeChildren = childEntries.length > 0;
var isResizeContainer = !!containerEntry;
if (isResizeContainer) {
var watchDirection = _this._options.watchDirection;
var prevRect = _this.rect;
var containerEntrySize = containerEntry.size;
if (containerEntrySize) {
// ResizeObserver
_this.setRect({
width: containerEntrySize.inlineSize,
height: containerEntrySize.blockSize
});
} else {
// window's resize event
_this.resize();
}
var rect = _this.rect;
var isWatchWidth = watchDirection === "box" || watchDirection === "width";
var isWatchHeight = watchDirection === "box" || watchDirection === "height";
isResizeContainer = !watchDirection || isWatchWidth && prevRect.width !== rect.width || isWatchHeight && prevRect.height !== rect.height;
}
_this._updatedEntries = [];
if (isResizeContainer || isResizeChildren) {
_this._emitter.trigger("resize", {
isResizeContainer: isResizeContainer,
childEntries: childEntries
});
}
};
this._options = __assign({
resizeDebounce: 100,
maxResizeDebounce: 0,
useResizeObserver: false,
useWindowResize: true,
watchDirection: false,
rectBox: "content-box",
childrenRectBox: "border-box"
}, options);
this.container = isString(container) ? document.querySelector(container) : container;
this._init();
}
var __proto = ResizeWatcher.prototype;
__proto.getRect = function () {
return this.rect;
};
__proto.setRect = function (rect) {
this.rect = __assign({}, rect);
};
__proto.isObserverEnabled = function () {
return !!this._observer;
};
__proto.resize = function () {
var container = this.container;
this.setRect(this._options.rectBox === "border-box" ? {
width: container.offsetWidth,
height: container.offsetHeight
} : {
width: container.clientWidth,
height: container.clientHeight
});
};
__proto.observeChildren = function (children) {
var observer = this._observer;
if (!observer) {
return;
}
var box = this._options.childrenRectBox;
children.forEach(function (element) {
if (element) {
observer.observe(element, {
box: box
});
}
});
};
__proto.unobserveChildren = function (children) {
var observer = this._observer;
if (!observer) {
return;
}
children.forEach(function (element) {
if (element) {
observer.unobserve(element);
}
});
};
__proto.listen = function (callback) {
this._emitter.on("resize", callback);
return this;
};
__proto.destroy = function () {
var _a;
(_a = this._observer) === null || _a === void 0 ? void 0 : _a.disconnect();
if (this._options.useWindowResize) {
window.removeEventListener("resize", this._onWindowResize);
}
};
__proto._init = function () {
var container = this.container;
var options = this._options;
this._emitter = new Component();
if (options.useResizeObserver && !!window.ResizeObserver) {
this._observer = new window.ResizeObserver(this._onObserve);
this._observer.observe(container, {
box: options.rectBox
});
}
if (options.useWindowResize) {
window.addEventListener("resize", this._onWindowResize);
}
this.resize();
};
return ResizeWatcher;
}();
var ContainerManager =
/*#__PURE__*/
function (_super) {
__extends(ContainerManager, _super);
function ContainerManager(container, options) {
var _this = _super.call(this) || this;
_this.container = container;
_this._onResize = function (e) {
_this.trigger("resize", e);
};
_this.options = __assign({
horizontal: DEFAULT_GRID_OPTIONS.horizontal,
autoResize: DEFAULT_GRID_OPTIONS.autoResize,
resizeDebounce: DEFAULT_GRID_OPTIONS.resizeDebounce,
maxResizeDebounce: DEFAULT_GRID_OPTIONS.maxResizeDebounce,
useResizeObserver: DEFAULT_GRID_OPTIONS.useResizeObserver
}, options);
_this._init();
return _this;
}
var __proto = ContainerManager.prototype;
__proto.resize = function () {
var container = this.container;
this.setRect({
width: container.clientWidth,
height: container.clientHeight
});
};
__proto.isObserverEnabled = function () {
return this._watcher.isObserverEnabled();
};
__proto.getRect = function () {
return this._watcher.getRect();
};
__proto.observeChildren = function (children) {
this._watcher.observeChildren(children);
};
__proto.unobserveChildren = function (children) {
this._watcher.unobserveChildren(children);
};
__proto.setRect = function (rect) {
this._watcher.setRect(rect);
};
__proto.getInlineSize = function () {
return this.getRect()[this._names.inlineSize];
};
__proto.getContentSize = function () {
return this.getRect()[this._names.contentSize];
};
__proto.getStatus = function () {
return {
rect: this._watcher.getRect()
};
};
__proto.setStatus = function (status) {
this.setRect(status.rect);
this.setContentSize(this.getContentSize());
};
__proto.setContentSize = function (size) {
var _a;
var sizeName = this.options.horizontal ? "width" : "height";
this.setRect(__assign(__assign({}, this.getRect()), (_a = {}, _a[sizeName] = size, _a)));
this.container.style[sizeName] = size + "px";
};
__proto.destroy = function (options) {
if (options === void 0) {
options = {};
}
this._watcher.destroy();
if (!options.preserveUI) {
this.container.style.cssText = this.orgCSSText;
}
};
__proto._init = function () {
var container = this.container;
var style = window.getComputedStyle(container);
this.orgCSSText = container.style.cssText;
if (style.position === "static") {
container.style.position = "relative";
}
var options = this.options;
this._watcher = new ResizeWatcher(container, {
useWindowResize: options.autoResize,
useResizeObserver: options.useResizeObserver,
resizeDebounce: options.resizeDebounce,
maxResizeDebounce: options.maxResizeDebounce,
watchDirection: options.useResizeObserver ? this._names.inlineSize : false
}).listen(this._onResize);
};
Object.defineProperty(__proto, "_names", {
get: function () {
return RECT_NAMES[this.options.horizontal ? "horizontal" : "vertical"];
},
enumerable: false,
configurable: true
});
return ContainerManager;
}(Component);
/*
Copyright (c) NAVER Corp.
name: @egjs/imready
license: MIT
author: NAVER Corp.
repository: https://github.com/naver/egjs-imready
version: 1.4.2
*/
/******************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
/* global Reflect, Promise */
var extendStatics$1 = function (d, b) {
extendStatics$1 = Object.setPrototypeOf || {
__proto__: []
} instanceof Array && function (d, b) {
d.__proto__ = b;
} || function (d, b) {
for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p];
};
return extendStatics$1(d, b);
};
function __extends$1(d, b) {
if (typeof b !== "function" && b !== null) throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics$1(d, b);
function __() {
this.constructor = d;
}
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
var __assign$1 = function () {
__assign$1 = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign$1.apply(this, arguments);
};
/** @deprecated */
function __spreadArrays() {
for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
for (var r = Array(s), k = 0, i = 0; i < il; i++) for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++) r[k] = a[j];
return r;
}
/*
egjs-imready
Copyright (c) 2020-present NAVER Corp.
MIT license
*/
var isWindow = typeof window !== "undefined";
var ua = isWindow ? window.navigator.userAgent : "";
var SUPPORT_COMPUTEDSTYLE = isWindow ? !!("getComputedStyle" in window) : false;