|
- define([
- 'js/system/events',
- 'js/system/client',
- 'html!ui/templates/stash/template',
- 'css!ui/templates/stash/styles',
- 'html!ui/templates/inventory/templateItem',
- 'js/input',
- 'ui/shared/renderItem'
- ], function (
- events,
- client,
- template,
- styles,
- tplItem,
- input,
- renderItem
- ) {
- return {
- tpl: template,
-
- centered: true,
- hoverItem: null,
-
- items: [],
- maxItems: null,
-
- modal: true,
- hasClose: true,
-
- postRender: function () {
- [
- 'onKeyUp',
- 'onKeyDown',
- 'onOpenStash',
- 'onAddStashItems',
- 'onRemoveStashItems'
- ]
- .forEach(e => {
- this.onEvent(e, this[e].bind(this));
- });
- },
-
- build: function () {
- const { el, maxItems, items } = this;
-
- el.removeClass('scrolls');
- if (maxItems > 50)
- el.addClass('scrolls');
-
- const container = this.el.find('.grid').empty();
-
- const renderItemCount = Math.max(items.length, maxItems);
-
- for (let i = 0; i < renderItemCount; i++) {
- const item = items[i];
- const itemEl = renderItem(container, item);
-
- if (!item)
- continue;
-
- let moveHandler = this.onHover.bind(this, itemEl, item);
- let downHandler = () => {};
- if (isMobile) {
- moveHandler = () => {};
- downHandler = this.onHover.bind(this, itemEl, item);
- }
-
- itemEl
- .data('item', item)
- .on('mousedown', downHandler)
- .on('mousemove', moveHandler)
- .on('mouseleave', this.hideTooltip.bind(this, itemEl, item))
- .find('.icon')
- .on('contextmenu', this.showContext.bind(this, item));
- }
- },
-
- showContext: function (item, e) {
- events.emit('onContextMenu', [{
- text: 'withdraw',
- callback: this.withdraw.bind(this, item)
- }], e);
-
- e.preventDefault();
- return false;
- },
-
- hideTooltip: function () {
- events.emit('onHideItemTooltip', this.hoverItem);
- this.hoverItem = null;
- },
-
- onHover: function (el, item, e) {
- if (item)
- this.hoverItem = item;
- else
- item = this.hoverItem;
-
- let ttPos = null;
-
- if (el) {
- el.removeClass('new');
- delete item.isNew;
-
- let elOffset = el.offset();
- ttPos = {
- x: ~~(elOffset.left + 74),
- y: ~~(elOffset.top + 4)
- };
- }
-
- events.emit('onShowItemTooltip', item, ttPos, true);
- },
-
- onGetStashItems: function (items) {
- this.items = items;
-
- if (this.shown)
- this.build();
- },
-
- onAddStashItems: function (addItems) {
- const { items } = this;
-
- addItems.forEach(newItem => {
- const existIndex = items.findIndex(i => i.id === newItem.id);
- if (existIndex !== -1)
- items.splice(existIndex, 1, newItem);
- else
- items.push(newItem);
- });
- },
-
- onRemoveStashItems: function (removeItemIds) {
- const { items } = this;
-
- removeItemIds.forEach(id => {
- const item = items.find(i => i.id === id);
- if (item === this.hoverItem)
- this.hideTooltip();
-
- items.spliceWhere(i => i.id === id);
- });
-
- if (this.shown)
- this.build();
- },
-
- onAfterShow: function () {
- if ((!this.shown) && (!window.player.stash.active))
- return;
-
- events.emit('onShowOverlay', this.el);
- this.build();
- },
-
- beforeHide: function () {
- if ((!this.shown) && (!window.player.stash.active))
- return;
-
- events.emit('onHideOverlay', this.el);
- events.emit('onHideContextMenu');
- },
-
- onOpenStash: function ({ items, maxItems }) {
- this.maxItems = maxItems;
-
- this.show();
-
- this.onGetStashItems(items);
- },
-
- beforeDestroy: function () {
- events.emit('onHideOverlay', this.el);
- },
-
- withdraw: function (item) {
- if (!item)
- return;
-
- client.request({
- cpn: 'player',
- method: 'performAction',
- data: {
- cpn: 'stash',
- method: 'withdraw',
- data: {
- itemId: item.id
- }
- }
- });
- },
-
- onKeyDown: function (key) {
- if (key === 'shift' && this.hoverItem)
- this.onHover();
- else if (key === 'esc' && this.shown)
- this.toggle();
- },
-
- onKeyUp: function (key) {
- if (key === 'shift' && this.hoverItem)
- this.onHover();
- }
- };
- });
|