all files / src/datums/ lazyPhoto.cjsx

0% Statements 0/30
0% Branches 0/11
0% Functions 0/5
0% Lines 0/25
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64                                                                                                                               
 
React = require('react')
Datum = require('./datum')
Options = require('../options')
 
 
###
  This is a lazy loading image.
 
  To prevent a page heavily loaded with images preventing other content from loading, a small
  blank image is downloaded and rendered first and then onLoad the real image src is used and
  rerender.
 
  On error a notFoundUrl is set as the image src to prevent broken image display.
 
  The model attribute specified in @props.attr should return a fully qualified
  url.  The image is only rendered if it's visible and in view. Otherwise the placeholder
  image is rendered.
###
module.exports = class LazyPhoto extends Datum
  @displayName: "react-datum.LazyPhoto"
 
  subClassName: 'lazy-image'
 
  # these are updated as events are fired
  notFound: false
  initialLoadComplete: false
  
  isEditable: -> false
  
  # override
  renderForDisplay: () ->
    modelValue = @getModelValue()
    if !modelValue || modelValue != @lastModelValue
      @notFound = @initialLoadComplete = !(modelValue?.length > 0)
      @lastModelValue = modelValue
 
    notFoundUrl = Options.get('LazyPhoto').notFoundUrl 
    loadingUrl = Options.get('LazyPhoto').loadingUrl 
      
    source = switch
      when @notFound then notFoundUrl
      when @initialLoadComplete then modelValue
      else loadingUrl
 
    <img src={source}
         onLoad={@onLoad}
         onError={@onError}
    />
 
 
  onLoad: (evt) =>
    return if @initialLoadComplete
    # TODO : should this be state?
    @initialLoadComplete = true
    @forceUpdate()
 
 
  onError: (evt) =>
    return unless @initialLoadComplete # ignore error on initial load of blank image
    return if @notFound   # of if already noted
    @notFound = true
    @forceUpdate()