absolute/HFlow.js at master · KAESapps/absolute · GitHub

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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
var compose = require('ksf/utils/compose')
var _Evented = require('ksf/base/_Evented')
var delegateGetSet = require('./utils/delegateGetSet')
var delegateGet = require('./utils/delegateGet')
var VPile = require('./VPile')
var HPile = require('./HPile')
var VAlign = require('./VAlign')
var defaults = require('lodash/object/defaults')
var defaultsDeep = require('lodash/object/defaultsDeep')

function normalizeContentArg(contentArg, defaultArgs) {
  return contentArg.map(function(userItemArg) {
    var itemArg
		if (Array.isArray(userItemArg)) {
      itemArg = defaults({
        cmp: userItemArg[1],
      }, userItemArg[0], defaultArgs)
		} else {
			itemArg = defaults({
				cmp: userItemArg,
			}, defaultArgs)
		}
    if (itemArg.width === 'auto') {
      // get width on component
      itemArg.width = itemArg.cmp.width()
    }
    return itemArg
	})
}

module.exports = compose(_Evented, function(args) {
  // normalize args
  this._args = defaultsDeep({}, args, {
    defaults: {
      width: 'auto',
    },
  })

  this._rowContainer = new VPile()
}, {
  content: function(content) {
    this._content = normalizeContentArg(content, this._args.defaults)
    this._layout()
    return this
  },
  _layout: function() {
    var width = this.width()

    if (width === undefined || !this._content) { return }

    // clear rows
    this._rows && this._rows.forEach(function(row, index) {
      this._rowContainer.remove(index)
    }.bind(this))
    // split items into rows
    this._rows = []
    var
      currentRow = [],
      rowWidth = 0
    this._rows.push(currentRow)

    this._content.forEach(function(itemArg) {
      // get item width
      var itemWidth = (itemArg.width === null && itemArg.cmp.width()) || itemArg.width

      if (rowWidth + itemWidth > width) {
        this._rows.push(currentRow = [])
        rowWidth = 0
      }

      currentRow.push(itemArg.cmp.width(itemWidth))
      rowWidth += itemWidth
    }.bind(this))

    this._rows.forEach(function(row, index) {
      // process max height
      var rowHeight = row.reduce(function(maxHeight, item) {
        return Math.max(item.height(), maxHeight)
      }, 0)

      // fill row with items
      this._rowContainer.add(index, new HPile().height(rowHeight).content(row.map(function(item) {
        return new VAlign(item, 'top')
      })))
    }.bind(this))

    this._emit('height')
  },
  width: function(width) {
    if (arguments.length) {
      this._rowContainer.width(width)
      this._layout()
      return this
    } else {
      return this._rowContainer.width()
    }
  },
  onHeight: function(cb) {
    return this._on('height', cb)
  },
	height: delegateGet('_rowContainer', 'height'),
	depth: delegateGetSet('_rowContainer', 'depth'),
	left: delegateGetSet('_rowContainer', 'left'),
	top: delegateGetSet('_rowContainer', 'top'),
	zIndex: delegateGetSet('_rowContainer', 'zIndex'),
	parentNode: delegateGetSet('_rowContainer', 'parentNode'),
	containerVisible: delegateGetSet('_rowContainer', 'containerVisible'),
	visible: delegateGetSet('_rowContainer', 'visible'),
})