Gazelle/static/functions/wall.js

function wall(parent, children, style, min) {
  var min = +min || 2
  var b = $(parent+':not(.hidden)').raw()
  var bs = $(parent+':not(.hidden) '+children).toArray()

  if (!window.getComputedStyle(b).height) {return}

  bs.forEach(function(el){el.style.width='';el.style.height=''})

  var rows = []
  if (typeof(style) === 'string') { style = +style }
  if (typeof(style) === 'number') {
    for (var i=0; i<bs.length; i+=style)
      rows.push(bs.slice(i,i+style))
  } else {
    var a = 0
    for (i in style) {
      rows.push(bs.slice(a, a+style[i]))
      a += style[i]
    }
  }
  if (rows.length >= 2 && rows[rows.length-1].length < min) {
    var needed = min - rows[rows.length-1].length
    if (rows[rows.length-2].length - needed >= min) {
      for(i=0; i<needed; i++) {
        rows[rows.length-1]=[rows[rows.length-2].pop()].concat(rows[rows.length-1])
      }
    } else {
      rows[rows.length-2] = rows[rows.length-2].concat(rows[rows.length-1])
      rows.splice(rows.length-1, 1)
    }
  }

  function getW(e) {
    var a = window.getComputedStyle(e).width.match(/[0-9.]+/)
    return a ? parseFloat(a[0]) : 0
  }
  function getH(e) {
    var a = window.getComputedStyle(e).height.match(/[0-9.]+/)
    return a ? parseFloat(a[0]) : 0
  }

  for (i in rows) {
    for (j in rows[i]) {
      rows[i][j].style.width = (getW(rows[i][j]) / getH(rows[i][j]) * 100) + 'px'
      rows[i][j].style.height = 100 + 'px'
    }
    var w = rows[i].reduce(function(x, y) { return x + getW(y) }, 0)
    for (j in rows[i]) {
      rows[i][j].style.height=(getH(rows[i][j])*(getW(b)-(4*rows[i].length))/w)+'px'
      rows[i][j].style.width=(getW(rows[i][j])*(getW(b)-(4*rows[i].length))/w)+'px'
      rows[i][j].style.display = 'inline-block'
      rows[i][j].style.margin = '1px'
    }
  }
}

$(function() {
  $('[data-wall-child]').each(function(i, el) {
    wall('#'+el.id, el.attributes['data-wall-child'].value, el.attributes['data-wall-size'].value, el.attributes['data-wall-min']?el.attributes['data-wall-min']:false)
    var sel = '#'+el.id+' '+el.attributes['data-wall-child'].value+' img'
    $(sel).on('load', function() {
      var test = true;
      $(sel).each(function(j, img) {
        if (!img.complete) test = false
      })
      if (test) wall('#'+el.id, el.attributes['data-wall-child'].value, el.attributes['data-wall-size'].value, el.attributes['data-wall-min']?el.attributes['data-wall-min']:false)
    })
  })
})