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 X.Css.Option = {\r
  35         BORDER_STYLE      : 'none,hidden,dotted,dashed,solid,double,groove,ridge,inset,outset'.split(','),\r
  36         POSITION_X        : 'left,center,right'.split(','),\r
  37         POSITION_Y        : 'top,center,bottom'.split(','),\r
  38         ALIGN             : 'left,center,right,justify'.split(','),\r
  39         TEXT_DECORATION   : 'none,underline,overline,line-through,blink'.split(','),\r
  40         TEXT_TRANSFORM    : 'none,capitalize,lowercase,uppercase'.split(','),\r
  41         WIDTH_HEIGHT      : [ 'auto' ],\r
  42         BOX_SIZING        : 'content-box,padding-box,border-box'.split(',') // ,margin-box\r
  43 };\r
  44 \r
  45 X.Css.Dirty = {\r
  46         CLEAN             : 0,\r
  47         PAINT             : 1, // 再描画のみ必要\r
  48         REFLOW            : 2, // レイアウト（ボックスサイズ)の再計算が必要\r
  49         FONT              : 3, // フォントサイズが変更された\r
  50         CONTENT_UPDATE    : 4 // コンテンツが変更された\r
  51 };\r
  52 \r
  53 X.Css.Attr = {\r
  54         borderWidth       : [ X.Css.Dirty.REFLOW,  0, X.Css.Type.QUARTET | X.Css.Type.LENGTH  ], // em [ top, right, bottom, left ]\r
  55         borderColor       : [ X.Css.Dirty.PAINT,   4, X.Css.Type.QUARTET | X.Css.Type.COLOR   ], // color [ top, right, bottom, left ]\r
  56         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
  57         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
  58         bgColor           : [ X.Css.Dirty.PAINT,  16, X.Css.Type.COLOR     ], // color\r
  59         bgAlpha           : [ X.Css.Dirty.PAINT,  17, X.Css.Type.U_DECIMAL ], // 0 - 1\r
  60         bgImgUrl          : [ X.Css.Dirty.PAINT,  18, X.Css.Type.URL       ], // url\r
  61         bgImgRepeatX      : [ X.Css.Dirty.PAINT,  19, X.Css.Type.BOOLEAN   ], // true / false\r
  62         bgImgRepeatY      : [ X.Css.Dirty.PAINT,  20, X.Css.Type.BOOLEAN   ], // true / false\r
  63         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
  64         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
  65         shadowColor       : [ X.Css.Dirty.PAINT,  23, X.Css.Type.COLOR     ], // color\r
  66         shadowAlpha       : [ X.Css.Dirty.PAINT,  24, X.Css.Type.U_DECIMAL ], // 0 - 1\r
  67         shadowOffsetX     : [ X.Css.Dirty.PAINT,  25, X.Css.Type.LENGTH    ], // em\r
  68         shadowOffsetY     : [ X.Css.Dirty.PAINT,  26, X.Css.Type.LENGTH    ], // em\r
  69         shadowBlur        : [ X.Css.Dirty.PAINT,  27, X.Css.Type.LENGTH    ], // em\r
  70         shadowSpread      : [ X.Css.Dirty.PAINT,  28, X.Css.Type.LENGTH    ], // em\r
  71         shadowInset       : [ X.Css.Dirty.PAINT,  29, X.Css.Type.BOOLEAN   ], // true / false\r
  72         \r
  73         color             : [ X.Css.Dirty.PAINT,  30, X.Css.Type.COLOR     ], // color\r
  74         fontFamily        : [ X.Css.Dirty.FONT,   31, X.Css.Type.FONT_NAME ], // string\r
  75         fontSize          : [ X.Css.Dirty.FONT,   32, X.Css.Type.LENGTH | X.Css.Type.PERCENT ], // em, %\r
  76         bold              : [ X.Css.Dirty.FONT,   33, X.Css.Type.BOOLEAN   ], // true / false\r
  77         italic            : [ X.Css.Dirty.FONT,   34, X.Css.Type.BOOLEAN   ], // true / false\r
  78         lineHeight        : [ X.Css.Dirty.FONT,   35, X.Css.Type.LENGTH | X.Css.Type.PERCENT | X.Css.Type.NUMERICAL ], // em, %, \r
  79         letterSpacing     : [ X.Css.Dirty.FONT,   36, X.Css.Type.LENGTH    ], // em\r
  80         wordSpacing       : [ X.Css.Dirty.FONT,   37, X.Css.Type.LENGTH    ],\r
  81         align             : [ X.Css.Dirty.FONT,   38, X.Css.Type.LIST, X.Css.Type.ALIGN           ],\r
  82         decoration        : [ X.Css.Dirty.PAINT,  39, X.Css.Type.LIST, X.Css.Type.TEXT_DECORATION ],\r
  83         transform         : [ X.Css.Dirty.FONT,   40, X.Css.Type.LIST, X.Css.Type.TEXT_TRANSFORM  ],\r
  84         textShadowColor   : [ X.Css.Dirty.PAINT,  41, X.Css.Type.COLOR     ],\r
  85         textShadowOffsetX : [ X.Css.Dirty.PAINT,  42, X.Css.Type.LENGTH    ],\r
  86         textShadowOffsetY : [ X.Css.Dirty.PAINT,  43, X.Css.Type.LENGTH    ],\r
  87         shadowBlur        : [ X.Css.Dirty.PAINT,  44, X.Css.Type.LENGTH    ],\r
  88         \r
  89         width             : [ X.Css.Dirty.REFLOW, 45, X.Css.Type.LENGTH | X.Css.Type.PERCENT, X.Css.Option.WIDTH_HEIGHT ],\r
  90         minWidth          : [ X.Css.Dirty.REFLOW, 46, X.Css.Type.LENGTH | X.Css.Type.PERCENT ],\r
  91         maxWidth          : [ X.Css.Dirty.REFLOW, 47, X.Css.Type.LENGTH | X.Css.Type.PERCENT ],\r
  92         height            : [ X.Css.Dirty.REFLOW, 48, X.Css.Type.LENGTH | X.Css.Type.PERCENT, X.Css.Option.WIDTH_HEIGHT ],\r
  93         minHeight         : [ X.Css.Dirty.REFLOW, 49, X.Css.Type.LENGTH | X.Css.Type.PERCENT ],\r
  94         maxHeight         : [ X.Css.Dirty.REFLOW, 50, X.Css.Type.LENGTH | X.Css.Type.PERCENT ],\r
  95         padding           : [ X.Css.Dirty.REFLOW, 51, X.Css.Type.QUARTET | X.Css.Type.LENGTH | X.Css.Type.PERCENT ],\r
  96         margin            : [ X.Css.Dirty.REFLOW, 55, X.Css.Type.QUARTET | X.Css.Type.LENGTH | X.Css.Type.PERCENT ],\r
  97         sizing            : [ X.Css.Dirty.REFLOW, 59, X.Css.Type.LIST, X.Css.Option.BOX_SIZING ],\r
  98         pageBox           : [ X.Css.Dirty.REFLOW, 60, X.Css.Type.BOOLEAN ], // true / false\r
  99         left              : [ X.Css.Dirty.REFLOW, 61, X.Css.Type.LENGTH | X.Css.Type.PERCENT ],\r
 100         top               : [ X.Css.Dirty.REFLOW, 62, X.Css.Type.LENGTH | X.Css.Type.PERCENT ],\r
 101         bottom            : [ X.Css.Dirty.REFLOW, 63, X.Css.Type.LENGTH | X.Css.Type.PERCENT ],\r
 102         right             : [ X.Css.Dirty.REFLOW, 64, X.Css.Type.LENGTH | X.Css.Type.PERCENT ]\r
 103 };\r
 104 \r
 105 X.Css.Attr.x = X.Css.Attr.left;\r
 106 X.Css.Attr.y = X.Css.Attr.top;\r
 107 \r
 108 X.Css.AttrNo = ( function(){\r
 109         var ret = {},\r
 110                 obj = X.Css.Attr,\r
 111                 max = 0,\r
 112                 p, no;\r
 113         for( p in obj ){\r
 114                 ret[ p ] = no = obj[ p ][ 1 ];\r
 115                 if( max < no ) max = no;\r
 116         };\r
 117         ret.max = max;\r
 118         return ret;\r
 119 })();