diff --git a/app/templates/play/menu/inventory-modal.jade b/app/templates/play/menu/inventory-modal.jade index 4aeb5a8f2..0129f59b2 100644 --- a/app/templates/play/menu/inventory-modal.jade +++ b/app/templates/play/menu/inventory-modal.jade @@ -31,9 +31,10 @@ if itemGroups.availableItems.models.length h4#available-description(data-i18n="inventory.available_item") for item in itemGroups.availableItems.models - .item.available(class=item.classes, data-item-id=item.id) - img(src=item.getPortraitURL()) - button.btn.equip-item(data-i18n="inventory.equip") + if selectedHeroClass && item.classes.indexOf(selectedHeroClass) > -1 + .item.available(class=item.classes, data-item-id=item.id) + img + button.btn.equip-item(data-i18n="inventory.equip") .clearfix #double-click-hint.alert.alert-info @@ -43,15 +44,17 @@ if itemGroups.restrictedItems.models.length h4#restricted-description(data-i18n="inventory.restricted_title") for item in itemGroups.restrictedItems.models - .item(class=item.classes, data-item-id=item.id) - img(src=item.getPortraitURL(), draggable="false") + if selectedHeroClass && item.classes.indexOf(selectedHeroClass) > -1 + .item(class=item.classes, data-item-id=item.id) + img(draggable="false") .clearfix if itemGroups.lockedItems.models.length h4#locked-description(data-i18n="play.locked") for item in itemGroups.lockedItems.models - .item(class=item.classes, data-item-id=item.id) - img(src=item.getPortraitURL(), draggable="false") + if selectedHeroClass && item.classes.indexOf(selectedHeroClass) > -1 + .item(class=item.classes, data-item-id=item.id) + img(draggable="false") .clearfix #item-details-view diff --git a/app/views/play/menu/InventoryModal.coffee b/app/views/play/menu/InventoryModal.coffee index a6293997f..a6ba6e20a 100644 --- a/app/views/play/menu/InventoryModal.coffee +++ b/app/views/play/menu/InventoryModal.coffee @@ -35,6 +35,7 @@ module.exports = class InventoryModal extends ModalView 'click #close-modal': 'hide' 'click .buy-gems-prompt-button': 'onBuyGemsPromptButtonClicked' 'click': 'onClickedSomewhere' + 'update #unequipped .nano': 'onScrollUnequipped' shortcuts: 'esc': 'clearSelection' @@ -44,6 +45,7 @@ module.exports = class InventoryModal extends ModalView #- Setup initialize: (options) -> + @onScrollUnequipped = _.throttle(_.bind(@onScrollUnequipped, @), 200) super(arguments...) @items = new CocoCollection([], {model: ThangType}) # TODO: switch to item store loading system? @@ -121,6 +123,7 @@ module.exports = class InventoryModal extends ModalView context.itemGroups = @itemGroups context.slots = @slots context.selectedHero = @selectedHero + context.selectedHeroClass = @selectedHero?.get('heroClass') context.equipment = _.clone @equipment context.equipment[slot] = @items.findWhere {original: itemOriginal} for slot, itemOriginal of context.equipment context.gems = me.gems() @@ -524,6 +527,21 @@ module.exports = class InventoryModal extends ModalView onClickedSomewhere: (e) -> return if @destroyed @$el.find('.unlock-button').popover 'destroy' + + + #- Dynamic portrait loading + + onScrollUnequipped: -> + # dynamically load visible items when the user scrolls enough to see them + nanoContent = @$el.find('#unequipped .nano-content') + items = nanoContent.find('.item:visible:not(.loaded)') + threshold = nanoContent.height() + 100 + for itemEl in items + itemEl = $(itemEl) + if itemEl.position().top < threshold + itemEl.addClass('loaded') + item = @items.get(itemEl.data('item-id')) + itemEl.find('img').attr('src', item.getPortraitURL()) #- Paper doll equipment updating @@ -544,6 +562,7 @@ module.exports = class InventoryModal extends ModalView @$el.find('#hero-image-thumb').toggle not ('gloves' in slotsWithImages) @equipment = @options.equipment = equipment + @onScrollUnequipped() removeDollImages: -> @$el.find('.doll-image').remove()