0.6.x/js/20_ui/13_TileBox.js

   1 X.UI.Layout.Tile = X.UI.Layout.create( {        \r
   2         name : 'TileLayout',\r
   3         \r
   4         overrideAttrsForSelf : {\r
   5                 selectable  : false,\r
   6                 role        : [ 0,     X.UI.Dirty.CLEAN,  X.UI.Attr.USER.UINODE, X.UI.Attr.Type.INIT_ONLY | X.UI.Attr.Type.LIST, 'none,chrome,container' ],\r
   7                 childWidth  : [ '8em', X.UI.Dirty.LAYOUT, X.UI.Attr.USER.LAYOUT, X.UI.Attr.Type.LENGTH | X.UI.Attr.Type.PERCENT ],\r
   8                 childHeight : [ '8em', X.UI.Dirty.LAYOUT, X.UI.Attr.USER.LAYOUT, X.UI.Attr.Type.LENGTH | X.UI.Attr.Type.PERCENT ],\r
   9                 gapX        : [ 0,     X.UI.Dirty.LAYOUT, X.UI.Attr.USER.LAYOUT, X.UI.Attr.Type.LENGTH ],\r
  10                 gapY        : [ 0,     X.UI.Dirty.LAYOUT, X.UI.Attr.USER.LAYOUT, X.UI.Attr.Type.LENGTH ],\r
  11                 hCenter     : [ true,  X.UI.Dirty.LAYOUT, X.UI.Attr.USER.LAYOUT, X.UI.Attr.Type.BOOLEAN ],\r
  12                 vCenter     : [ true,  X.UI.Dirty.LAYOUT, X.UI.Attr.USER.LAYOUT, X.UI.Attr.Type.BOOLEAN ]\r
  13         },\r
  14         \r
  15         overrideAttrsForChild : {\r
  16                 left   : false,\r
  17                 right  : false,\r
  18                 top    : false,\r
  19                 bottom : false,\r
  20                 width  : false,\r
  21                 height : false\r
  22         },\r
  23         \r
  24         calculate : function( data, isNeedsDetection, x, y, w, h ){\r
  25                 var attrs   = data.attrObject || data.attrClass.prototype,\r
  26                         gapX, gapY, childW, childH,\r
  27                         uinodes, l, i, node,\r
  28                         _x, _y, _w, _h, numH, numV, n, startX, __x, __y;\r
  29 \r
  30                 data.preMesure( w, h );\r
  31                 \r
  32                 if( isNeedsDetection && ( data.boxWidth === X.UI.Attr.AUTO || data.boxHeight === X.UI.Attr.AUTO ) ) return;\r
  33                 \r
  34                 if( ( uinodes  = data.uinodes ) && ( l = uinodes.length ) ){\r
  35                         _x      = data.contentL;\r
  36                         _y      = data.contentT;\r
  37                         _w      = data.contentWidth;\r
  38                         gapX    = X.UI._AbstractUINode.calcValue( attrs[ data.supportAttrs.gapX.No ], contentW );\r
  39                         gapY    = X.UI._AbstractUINode.calcValue( attrs[ data.supportAttrs.gapY.No ], contentH );\r
  40                         childW  = X.UI._AbstractUINode.calcValue( attrs[ data.supportAttrs.childWidth.No ], contentW );\r
  41                         childH  = X.UI._AbstractUINode.calcValue( attrs[ data.supportAttrs.childHeight.No ], contentH );\r
  42                         numH    = X.UI.Attr.FLOOR( ( _w + gapX ) / ( childW + gapX ) );\r
  43                         numV    = l % numH ? X.UI.Attr.FLOOR( l / numH ) + 1 : l / numH;\r
  44                         _h      = _y + data.contentB + ( childH + gapY ) * numH - gapY;\r
  45                         \r
  46                         startX  = attrs[ data.supportAttrs.hCenter.No ] ?\r
  47                                                 ( _w - ( childW + gapX ) * numH - gapX ) / 2 : _x;\r
  48                         __x     = startX;\r
  49                         __y     = attrs[ data.supportAttrs.vCenter.No ] && _h <= h ?\r
  50                                                 ( h - _h ) / 2 + _y : _y;\r
  51                         \r
  52                         for( i = 0; i < l; ++i ){\r
  53                                 node = uinodes[ i ];\r
  54                                 node.calculate( false, __x, __y, childW, childH );\r
  55                                 \r
  56                                 if( i % numH === numH - 1 ){\r
  57                                         __x  = startX;\r
  58                                         __y += childH + gapY;\r
  59                                 } else {\r
  60                                         __x += childW + gapX;\r
  61                                 };\r
  62                         };\r
  63                         \r
  64                         data.contentHeight = _h;\r
  65                         \r
  66                 } else\r
  67                 if( data.contentHeight === X.UI.Attr.AUTO ){\r
  68                         data.contentHeight = data.minContentHeight !== X.UI.Attr.AUTO ? data.minContentHeight : 0;\r
  69                 };\r
  70                 \r
  71                 data.postMesure();\r
  72                 data.updateLayout( x + data.boxX, y + data.boxY );\r
  73         }\r
  74 });\r
  75 \r
  76 X.UI.TileBox = X.UI.Box.presets(\r
  77         'TileBox',\r
  78         X.UI.Layout.Tile,\r
  79         {\r
  80                 gapX    : '0.2em',\r
  81                 gapY    : '0.2em',\r
  82                 hCenter : true,\r
  83                 vCenter : true\r
  84         }\r
  85 );\r