codeninjasllc/codecombat
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

The PlayItemsModal now dynamically loads portrait images as they scroll into view.

Browse source
This commit is contained in:
Scott Erickson 2014-12-01 17:33:37 -08:00
parent 4f9dc39567
commit 7f97a3b91e
2 changed files with 19 additions and 4 deletions
app
templates/play/modal
play-items-modal.jade
views/play/modal
PlayItemsModal.coffee

5
app/templates/play/modal/play-items-modal.jade
View file

@ -31,15 +31,14 @@
if item.silhouetted && !item.owned if item.silhouetted && !item.owned
span.glyphicon.glyphicon-lock.bolder span.glyphicon.glyphicon-lock.bolder
span.glyphicon.glyphicon-lock span.glyphicon.glyphicon-lock
img.item-silhouette(src=item.getPortraitURL(), draggable="false") img.item-silhouette(draggable="false") // dynamically loaded by view on scroll
if item.level if item.level
.required-level .required-level
div(data-i18n="general.player_level") div(data-i18n="general.player_level")
div= item.level div= item.level
else else
strong.big-font= item.name strong.big-font= item.name
img.item-img(src=item.getPortraitURL(), draggable="false") img.item-img(draggable="false") // dynamically loaded by view on scroll
//img.item-shadow(src=item.getPortraitURL(), draggable="false") // Not performant, takes too much memory with filter
if item.owned if item.owned
span.big-font.owned(data-i18n="play.owned") span.big-font.owned(data-i18n="play.owned")

18
app/views/play/modal/PlayItemsModal.coffee
View file

@ -51,8 +51,10 @@ module.exports = class PlayItemsModal extends ModalView
'click .buy-gems-prompt-button': 'onBuyGemsPromptButtonClicked' 'click .buy-gems-prompt-button': 'onBuyGemsPromptButtonClicked'
'click #close-modal': 'hide' 'click #close-modal': 'hide'
'click': 'onClickedSomewhere' 'click': 'onClickedSomewhere'
'update .tab-pane .nano': 'onScrollItemPane'
constructor: (options) -> constructor: (options) ->
@onScrollItemPane = _.throttle(_.bind(@onScrollItemPane, @), 200)
super options super options
@items = new Backbone.Collection() @items = new Backbone.Collection()
@itemCategoryCollections = {} @itemCategoryCollections = {}
@ -143,7 +145,21 @@ module.exports = class PlayItemsModal extends ModalView
onTabClicked: (e) -> onTabClicked: (e) ->
@playSound 'game-menu-tab-switch' @playSound 'game-menu-tab-switch'
$($(e.target).attr('href')).find('.nano').nanoScroller({alwaysVisible: true}) nano = $($(e.target).attr('href')).find('.nano')
nano.nanoScroller({alwaysVisible: true})
@paneNanoContent = nano.find('.nano-content')
@onScrollItemPane()
onScrollItemPane: ->
# dynamically load visible items when the user scrolls enough to see them
items = @paneNanoContent.find('.item:not(.loaded)')
threshold = @paneNanoContent.height() + 100
for itemEl in items
itemEl = $(itemEl)
if itemEl.position().top < threshold
$(itemEl).addClass('loaded')
item = @idToItem[itemEl.data('item-id')]
itemEl.find('.item-silhouette, .item-img').attr('src', item.getPortraitURL())
onUnlockButtonClicked: (e) -> onUnlockButtonClicked: (e) ->
e.stopPropagation() e.stopPropagation()