0.6.x/js/ui/00_XUI.js

   1 X.UI = X.UI || {};\r
   2 \r
   3 X.UI.State = {\r
   4         DEFAULT     : 0,\r
   5         HOVER       : 1,\r
   6         FOCUSED     : 2,\r
   7         DISABLED    : 4,\r
   8         CHECKED     : 8,\r
   9         FIRST_CHILD : 16,\r
  10         LAST_CHILD  : 32\r
  11 };\r
  12 \r
  13 X.Css = {};\r
  14 \r
  15 X.Css.Type = {\r
  16         LENGTH            :  1,\r
  17         PERCENT           :  2,\r
  18         COLOR             :  4,\r
  19         U_DECIMAL         :  8,\r
  20         NUMERICAL         : 16,\r
  21         BOOLEAN           : 32,\r
  22         QUARTET           : 64,\r
  23         URL               : 128,\r
  24         FONT_NAME         : 256,\r
  25         LIST              : 512,\r
  26         AUTO              : 1024,\r
  27         COMBI             : 2048\r
  28 };\r
  29 \r
  30 var AUTO      = Number.POSITIVE_INFINITY;\r
  31 var FULL      = X.Css; // something unigue value;\r
  32 var FLOOR     = Math.floor;\r
  33 \r
  34 /*\r
  35  * uinode によって指定可能な css は異なる\r
  36  * + 直接 xnode.css() に渡す値\r
  37  * + uinode 内で加工してから xnode.css() に渡す値\r
  38  *    ChromeBox での css3 の fallback\r
  39  * + layoutManager で使う値がある\r
  40  *    x, y, gap, childW, childH など\r
  41  */\r
  42 \r
  43 X.Css.Option = {\r
  44         BORDER_STYLE      : 'none,hidden,dotted,dashed,solid,double,groove,ridge,inset,outset'.split(','),\r
  45         POSITION_X        : 'left,center,right'.split(','),\r
  46         POSITION_Y        : 'top,center,bottom'.split(','),\r
  47         ALIGN             : 'left,center,right,justify'.split(','),\r
  48         TEXT_DECORATION   : 'none,underline,overline,line-through,blink'.split(','),\r
  49         TEXT_TRANSFORM    : 'none,capitalize,lowercase,uppercase'.split(','),\r
  50         WIDTH_HEIGHT      : [ 'auto' ],\r
  51         BOX_SIZING        : 'content-box,padding-box,border-box'.split(',') // ,margin-box\r
  52 };\r
  53 \r
  54 X.Css.Dirty = {\r
  55         CLEAN             : 0,\r
  56         PAINT             : 1, // 再描画のみ必要\r
  57         REFLOW            : 2, // レイアウト（ボックスサイズ)の再計算が必要\r
  58         FONT              : 3, // フォントサイズが変更された\r
  59         CONTENT_UPDATE    : 4 // コンテンツが変更された\r
  60 };\r
  61 \r
  62 X.Css.Attr = {\r
  63         borderWidth       : [ X.Css.Dirty.REFLOW,  0, X.Css.Type.QUARTET | X.Css.Type.LENGTH  ], // em [ top, right, bottom, left ]\r
  64         borderColor       : [ X.Css.Dirty.PAINT,   4, X.Css.Type.QUARTET | X.Css.Type.COLOR   ], // color [ top, right, bottom, left ]\r
  65         borderStyle       : [ X.Css.Dirty.PAINT,   8, X.Css.Type.QUARTET | X.Css.Type.LIST, X.Css.Option.BORDER_STYLE ], // string [ top, right, bottom, left ]\r
  66         cornerRadius      : [ X.Css.Dirty.PAINT,  12, X.Css.Type.QUARTET | X.Css.Type.LENGTH | X.Css.Type.PERCENT ], // em, px [ top, right, bottom, left ]\r
  67         bgColor           : [ X.Css.Dirty.PAINT,  16, X.Css.Type.COLOR     ], // color\r
  68         bgAlpha           : [ X.Css.Dirty.PAINT,  17, X.Css.Type.U_DECIMAL ], // 0 - 1\r
  69         bgImgUrl          : [ X.Css.Dirty.PAINT,  18, X.Css.Type.URL       ], // url\r
  70         bgImgRepeatX      : [ X.Css.Dirty.PAINT,  19, X.Css.Type.BOOLEAN   ], // true / false\r
  71         bgImgRepeatY      : [ X.Css.Dirty.PAINT,  20, X.Css.Type.BOOLEAN   ], // true / false\r
  72         bgImgPositionX    : [ X.Css.Dirty.PAINT,  21, X.Css.Type.LENGTH | X.Css.Type.PERCENT | X.Css.Type.LIST, X.Css.Option.POSITION_X ], // em %, px, string\r
  73         bgImgPositionY    : [ X.Css.Dirty.PAINT,  22, X.Css.Type.LENGTH | X.Css.Type.PERCENT | X.Css.Type.LIST, X.Css.Option.POSITION_Y ], // em %, px, string\r
  74         shadowColor       : [ X.Css.Dirty.PAINT,  23, X.Css.Type.COLOR     ], // color\r
  75         shadowAlpha       : [ X.Css.Dirty.PAINT,  24, X.Css.Type.U_DECIMAL ], // 0 - 1\r
  76         shadowOffsetX     : [ X.Css.Dirty.PAINT,  25, X.Css.Type.LENGTH    ], // em\r
  77         shadowOffsetY     : [ X.Css.Dirty.PAINT,  26, X.Css.Type.LENGTH    ], // em\r
  78         shadowBlur        : [ X.Css.Dirty.PAINT,  27, X.Css.Type.LENGTH    ], // em\r
  79         shadowSpread      : [ X.Css.Dirty.PAINT,  28, X.Css.Type.LENGTH    ], // em\r
  80         shadowInset       : [ X.Css.Dirty.PAINT,  29, X.Css.Type.BOOLEAN   ], // true / false\r
  81         \r
  82         color             : [ X.Css.Dirty.PAINT,  30, X.Css.Type.COLOR     ], // color\r
  83         fontFamily        : [ X.Css.Dirty.FONT,   31, X.Css.Type.FONT_NAME ], // string\r
  84         fontSize          : [ X.Css.Dirty.FONT,   32, X.Css.Type.LENGTH | X.Css.Type.PERCENT ], // em, %\r
  85         bold              : [ X.Css.Dirty.FONT,   33, X.Css.Type.BOOLEAN   ], // true / false\r
  86         italic            : [ X.Css.Dirty.FONT,   34, X.Css.Type.BOOLEAN   ], // true / false\r
  87         lineHeight        : [ X.Css.Dirty.FONT,   35, X.Css.Type.LENGTH | X.Css.Type.PERCENT | X.Css.Type.NUMERICAL ], // em, %, \r
  88         letterSpacing     : [ X.Css.Dirty.FONT,   36, X.Css.Type.LENGTH    ], // em\r
  89         wordSpacing       : [ X.Css.Dirty.FONT,   37, X.Css.Type.LENGTH    ],\r
  90         align             : [ X.Css.Dirty.FONT,   38, X.Css.Type.LIST, X.Css.Type.ALIGN           ],\r
  91         decoration        : [ X.Css.Dirty.PAINT,  39, X.Css.Type.LIST, X.Css.Type.TEXT_DECORATION ],\r
  92         transform         : [ X.Css.Dirty.FONT,   40, X.Css.Type.LIST, X.Css.Type.TEXT_TRANSFORM  ],\r
  93         textShadowColor   : [ X.Css.Dirty.PAINT,  41, X.Css.Type.COLOR     ],\r
  94         textShadowOffsetX : [ X.Css.Dirty.PAINT,  42, X.Css.Type.LENGTH    ],\r
  95         textShadowOffsetY : [ X.Css.Dirty.PAINT,  43, X.Css.Type.LENGTH    ],\r
  96         shadowBlur        : [ X.Css.Dirty.PAINT,  44, X.Css.Type.LENGTH    ],\r
  97         \r
  98         width             : [ X.Css.Dirty.REFLOW, 45, X.Css.Type.LENGTH | X.Css.Type.PERCENT, X.Css.Option.WIDTH_HEIGHT ],\r
  99         minWidth          : [ X.Css.Dirty.REFLOW, 46, X.Css.Type.LENGTH | X.Css.Type.PERCENT ],\r
 100         maxWidth          : [ X.Css.Dirty.REFLOW, 47, X.Css.Type.LENGTH | X.Css.Type.PERCENT ],\r
 101         height            : [ X.Css.Dirty.REFLOW, 48, X.Css.Type.LENGTH | X.Css.Type.PERCENT, X.Css.Option.WIDTH_HEIGHT ],\r
 102         minHeight         : [ X.Css.Dirty.REFLOW, 49, X.Css.Type.LENGTH | X.Css.Type.PERCENT ],\r
 103         maxHeight         : [ X.Css.Dirty.REFLOW, 50, X.Css.Type.LENGTH | X.Css.Type.PERCENT ],\r
 104         padding           : [ X.Css.Dirty.REFLOW, 51, X.Css.Type.QUARTET | X.Css.Type.LENGTH | X.Css.Type.PERCENT ],\r
 105         margin            : [ X.Css.Dirty.REFLOW, 55, X.Css.Type.QUARTET | X.Css.Type.LENGTH | X.Css.Type.PERCENT ],\r
 106         sizing            : [ X.Css.Dirty.REFLOW, 59, X.Css.Type.LIST, X.Css.Option.BOX_SIZING ],\r
 107         pageBox           : [ X.Css.Dirty.REFLOW, 60, X.Css.Type.BOOLEAN ], // true / false\r
 108         left              : [ X.Css.Dirty.REFLOW, 61, X.Css.Type.LENGTH | X.Css.Type.PERCENT ],\r
 109         top               : [ X.Css.Dirty.REFLOW, 62, X.Css.Type.LENGTH | X.Css.Type.PERCENT ],\r
 110         bottom            : [ X.Css.Dirty.REFLOW, 63, X.Css.Type.LENGTH | X.Css.Type.PERCENT ],\r
 111         right             : [ X.Css.Dirty.REFLOW, 64, X.Css.Type.LENGTH | X.Css.Type.PERCENT ]\r
 112 };\r
 113 \r
 114 X.Css.Attr.x = X.Css.Attr.left;\r
 115 X.Css.Attr.y = X.Css.Attr.top;\r
 116 \r
 117 X.Css.AttrNo = ( function(){\r
 118         var ret = {},\r
 119                 obj = X.Css.Attr,\r
 120                 max = 0,\r
 121                 p, no;\r
 122         for( p in obj ){\r
 123                 ret[ p ] = no = obj[ p ][ 1 ];\r
 124                 if( max < no ) max = no;\r
 125         };\r
 126         ret.max = max;\r
 127         return ret;\r
 128 })();