0.6.x/js/dom/22_XDomBuilder.js

   1 \r
   2 X.Dom._useBuilder = true;\r
   3 \r
   4 /* --------------------------------------\r
   5  *  通常のwebページに対して使用する場合、dom ready で dom tree を写し取るために使う．\r
   6  *  完全にワンページアプリで<body/>が空な場合、このコードはビルドに含める必要はない\r
   7  */\r
   8 X.Dom.listenOnce( X.Dom.Event.DOM_PRE_INIT,\r
   9         document.getElementById ?\r
  10 (function(){\r
  11         var r    = Node.root,\r
  12                 body = r._rawNode,\r
  13                 i, n = 0;\r
  14         \r
  15         // cleanup tree \r
  16         (function( elm, skip, head ){\r
  17                 var me         = arguments.callee,\r
  18                         moveToHead = 'style,bgsound,area,base,meta'.split( ',' ),\r
  19                         remove     = 'script,noscript,noframes,comment,!,noembed,nolayer'.split( ',' ),\r
  20                         noncleanup = 'pre,textarea,code,kbd,samp,xmp,plaintext,listing'.split( ',' ),\r
  21                         nodes      = X.copyArray( elm.childNodes ),\r
  22                         i          = 0,\r
  23                         l          = nodes.length,\r
  24                         node, tag, textNode, content;\r
  25                 for( ; i < l; ++i ){\r
  26                         node = nodes[ i ];\r
  27                         switch( node.nodeType ){\r
  28                                 case 1 :\r
  29                                         tag = node.tagName.toLowerCase();\r
  30                                         if( moveToHead.indexOf( tag ) !== -1 ){\r
  31                                                 head = head || document.getElementsByTagName( 'head' )[ 0 ];\r
  32                                                 head.appendChild( node );\r
  33                                                 continue;\r
  34                                         } else\r
  35                                         if( remove.indexOf( tag ) !== -1 ){\r
  36                                                 elm.removeChild( node );\r
  37                                                 continue;\r
  38                                         } else {\r
  39                                                 // pre タグ以下はスペースの置換は行わない\r
  40                                                 node.childNodes && node.childNodes.length &&  me( node, skip || noncleanup.indexOf( tag ) !== -1, head );\r
  41                                         };\r
  42                                         textNode = false;       \r
  43                                         break;\r
  44                                 case 3 :\r
  45                                         content = skip ? node.data : X.Dom.cleanupWhiteSpace( node.data );\r
  46                                         //console.log( 'Delete space ' + node.data.length + ' => ' + content.length );\r
  47                                         if( !textNode && content !== ' ' && content.length ){\r
  48                                                 node.data = content;\r
  49                                                 textNode  = node;\r
  50                                                 break;\r
  51                                         } else\r
  52                                         if( textNode ){\r
  53                                                 textNode.data += content; // 直前が TextNode の場合 一本化して削除\r
  54                                         };\r
  55                                         // ブロック要素直下のスペースだけは削除？？\r
  56                                 default :\r
  57                                         //console.log( 'Remove type: ' + node.nodeType + ' value: ' + node.nodeValue );\r
  58                                         elm.removeChild( node );\r
  59                                         //++count;\r
  60                         };\r
  61                 };\r
  62         })( body );\r
  63         \r
  64         // body の属性値の取得\r
  65 \r
  66         body.appendChild( elmProgress = document.createElement( 'div' ) );\r
  67         elmProgress.style.cssText = 'position:absolute;top:0;left:0;z-index:9999;width:0;height:0.5em;background:#00f;overflow:hidden;';\r
  68         \r
  69         X.Dom.asyncParse( body.innerHTML, true )\r
  70                 .listen( X.Event.PROGRESS,\r
  71                         function(e){\r
  72                                 elmProgress.style.width = ( e.progress * 100 | 0 ) + '%';\r
  73                         }\r
  74                 )\r
  75                 .listenOnce( X.Event.SUCCESS, function( e ){\r
  76                         var xnodes = Node.root._xnodes = [], t;\r
  77                         xnodes.push.apply( xnodes, e.xnodes );\r
  78                         \r
  79                         X.Dom._asyncCreateTree( Node.root, body.childNodes, elmProgress );\r
  80                 } );\r
  81 \r
  82 }) :\r
  83 document.all ?\r
  84 (function(){\r
  85         var r    = Node.root,\r
  86                 body = r._rawNode,\r
  87                 i, n = 0, elmProgress = '_xdom_builder_progress';\r
  88 \r
  89         /*\r
  90          * http://support.microsoft.com/kb/812417/ja\r
  91          * PRB: outerHTML の HTML 要素のプロパティは、既定の属性は表示されません。\r
  92          * \r
  93          * body.innerHTML でなく、 body.outerHTML にはできなかった、、、\r
  94          */\r
  95         body.insertAdjacentHTML( 'BeforeEnd', '<div id="' + elmProgress + '" style="position:absolute;top:0;left:0;z-index:9999;width:0;height:0.5em;background:#00f;overflow:hidden;"></div>' );\r
  96         elmProgress = document.all[ elmProgress ];\r
  97         \r
  98         X.Dom.asyncParse( body.innerHTML, true )\r
  99                 .listen( X.Event.PROGRESS,\r
 100                         function(e){\r
 101                                 elmProgress.style.width = ( e.progress * 100 | 0 ) + '%';\r
 102                         }\r
 103                 )\r
 104                 .listenOnce( X.Event.SUCCESS, function( e ){\r
 105                         var xnodes = Node.root._xnodes = [], t;\r
 106                         xnodes.push.apply( xnodes, e.xnodes );\r
 107                         \r
 108                         X.Dom._asyncCreateTree( Node.root, body.childNodes || body.children, elmProgress );\r
 109                 } );\r
 110 }) :\r
 111 (function(){\r
 112         \r
 113 }) );\r
 114 \r
 115 X.Dom._asyncCreateTree = function ( parent, elems, elmProgress, async ){\r
 116         var xnodes      = async ? 0             : X.copyArray( parent._xnodes ),\r
 117                 l           = async ? 0             : xnodes.length,\r
 118                 current     = async ? async.current : {\r
 119                         me     : parent,\r
 120                         xnodes : xnodes,\r
 121                         l      : l,\r
 122                         i      : 0,\r
 123                         elems  : elems,\r
 124                         j      : 0,\r
 125                         xtext  : null,\r
 126                         flag   : 0\r
 127                 },\r
 128                 stack       = async ? async.stack   : [],\r
 129                 done        = async ? async.done    : 0,\r
 130                 startTime = X.getTime(),\r
 131                 xnode, i, dive;\r
 132         while( current || ( current = stack.pop() ) ){\r
 133                 i = current.i;\r
 134                 l = current.l;\r
 135                 if( i < l ){\r
 136                         parent = current.me;\r
 137                         xnodes = current.xnodes;\r
 138                         while( xnode = xnodes[ i ] ){                   \r
 139                                 //\r
 140                                 dive = bindElementToXnode( parent, xnode, current );\r
 141                                 \r
 142                                 ++i;\r
 143                                 ++done;\r
 144                                 if( dive ){\r
 145                                         current.i = i;\r
 146                                         stack[ stack.length ] = current;\r
 147                                         \r
 148                                         current = dive;\r
 149                                         i       = 0;\r
 150                                         l       = dive.l;\r
 151                                         parent  = xnode;\r
 152                                         xnodes  = dive.xnodes;\r
 153                                         continue;\r
 154                                 };\r
 155                                 \r
 156                                 if( startTime + 16 <= X.getTime() ){\r
 157                                         current.i = i;\r
 158                                         if( async ){\r
 159                                                 async.current = i < l && current;\r
 160                                                 async.done    = done;\r
 161                                         };\r
 162                                         X.Timer.once( 0, X.Dom._asyncCreateTree, [ null, null, elmProgress, async || { stack : stack, current : i < l && current, done : done } ] );\r
 163                                         // progress\r
 164                                         elmProgress.style.width = ( ( 1 - done / Node._chashe.length ) * 100 | 0 ) + '%';\r
 165                                         return;\r
 166                                 };\r
 167                         };                      \r
 168                 };\r
 169                 current = null;\r
 170         };\r
 171         // complete\r
 172         X.Dom.asyncDispatch( 0, { type : X.Dom.Event.DOM_BUILDER_COMPLETE } );\r
 173         elmProgress.parentNode ? elmProgress.parentNode.removeChild( elmProgress ) : ( elmProgress.outerHTML = '' );\r
 174         delete X.Dom._asyncCreateTree;\r
 175 };\r
 176 \r
 177 bindElementToXnode =\r
 178 document.getElementById ?\r
 179 (function( parent, xnode, current ){\r
 180         var elems = current.elems,\r
 181                 //j     = current.j,\r
 182                 m     = elems.length,\r
 183                 xtext = current.xtext,\r
 184                 skipCleanup = current.skipCleanup,\r
 185                 elm, tag, text;\r
 186 \r
 187         xnode.parent = parent;\r
 188 \r
 189         for( ; current.j < m; ++current.j ){\r
 190                 elm = elems[ current.j ];\r
 191                 tag = elm.tagName;\r
 192                 if( ( elm.nodeType !== 1 && elm.nodeType !== 3 ) || tag === '!' || ( tag && tag.charAt( 0 ) === '/' ) ){\r
 193                         elm.parentNode.removeChild( elm );\r
 194                         continue;\r
 195                 };\r
 196 \r
 197                 if( xnode._xnodeType === 1 ){\r
 198                         if( elm.nodeType === 3 ){\r
 199                                 if( !( text = elm.data ) || ( text = X.Dom.cleanupWhiteSpace( text ) ) === ' ' ){\r
 200                                         elm.parentNode.removeChild( elm );\r
 201                                         continue;\r
 202                                 };\r
 203                                 alert( '[' +parent._tag + '>' +xnode._tag + '] !== ' + elm.nodeType + '\n' + elm.data );\r
 204                         } else\r
 205                         if( xnode._tag.toUpperCase() !== tag ){\r
 206                                 alert( '[' +parent._tag + '>' +xnode._tag + ' ' + (xnode._xnodes ? xnode._xnodes.length : '' ) + '] !== ' + tag + ' ' + (elm.childNodes ? elm.childNodes.length : '' ) + '\n' + elm.outerHTML );\r
 207                         } else {\r
 208                                 xnode._rawNode = elm;\r
 209                                 //if( ( doc = elm.ownerDocument || elm.document ) && ( doc.createElement( 'p' ).tagName === doc.createElement( 'P' ).tagName ) ){\r
 210                                         if( tag.charAt( 0 ) === '/' ) tag = tag.slice( 1 );\r
 211                                         xnode._tag = tag; // .toUpperCase()\r
 212                                 //};\r
 213                                 xnode._root = parent._root;\r
 214                                 elm.UID     = xnode._uid;\r
 215                                 \r
 216                                 if( tag === 'TEXTAREA' ){\r
 217                                         xnode.attr( 'value', xnode.html() ).empty();\r
 218                                 } else\r
 219                                 if( 0 <= X.Dom.cleanupTagNames.indexOf( tag.toLowerCase() ) || tag === 'SCRIPT' ){ // ie で body 内の script が2度よばれるのに対処\r
 220                                         //alert( '[' +parent._tag + '>' + xnode._tag + '] remove ... ' );\r
 221                                         xnode.destroy();\r
 222                                 } else\r
 223                                 if( elm.childNodes && elm.childNodes.length ){\r
 224                                         //alert( '[' +parent._tag + '>' + xnode._tag + ' ' + (xnode._xnodes ? xnode._xnodes.length : '' ) + '] === ' + tag + ' ' + (elm.childNodes ? elm.childNodes.length : '' ) + ' Hit\n' + elm.outerHTML );\r
 225                                         ++current.j;\r
 226                                         return {\r
 227                                                 me     : xnode,\r
 228                                                 xnodes : X.copyArray( xnode._xnodes ),\r
 229                                                 xtext  : null,\r
 230                                                 flag   : 0,\r
 231                                                 i      : 0,\r
 232                                                 l      : xnode._xnodes.length,\r
 233                                                 elems  : elm.childNodes,\r
 234                                                 j      : 0,\r
 235                                                 skipCleanup : skipCleanup || 0 <= X.Dom.skipCleanupTagNames.indexOf( tag.toLowerCase() )\r
 236                                         };\r
 237                                 };\r
 238                                 current.xtext = null;\r
 239                         };\r
 240                         ++current.j;\r
 241                         break;\r
 242                 };\r
 243                 \r
 244                 if( elm.nodeType !== 3 ){\r
 245                         if( !( text = xnode._text ) || ( text = X.Dom.cleanupWhiteSpace( text ) ) === ' ' ){\r
 246                                 console.log( '[' +parent._tag + '>' + xnode._uid + '] destroy ... ' );\r
 247                                 xnode.destroy();\r
 248                                 break;\r
 249                         };\r
 250                         alert(  parent._tag + '>' + '"' + xnode._text + '" !== ' + tag + '\n' + elm.outerHTML );\r
 251                         break;\r
 252                 };\r
 253                 \r
 254                 ++current.j;\r
 255                 xnode._rawNode = elm;\r
 256                 xnode._root    = parent._root;\r
 257                 if( !skipCleanup ){\r
 258                         if( !( text = xnode._text ) || ( text = X.Dom.cleanupWhiteSpace( text ) ) === ' ' ){\r
 259                                 console.log( '[' +parent._tag + '>' + xnode._uid + '] destroy ... ' );\r
 260                                 xnode.destroy();\r
 261                         };\r
 262                         if( xtext ){\r
 263                                 xtext.text( xtext._text + text );\r
 264                                 console.log( '[' +parent._tag + '>' + xnode._uid + '] xtext,destroy ... ' );\r
 265                                 xnode.destroy();\r
 266                         } else {\r
 267                                 //alert( parent._tag + '>' + '"' + text + '"\n' + elm.data );\r
 268                                 xnode.text( text );\r
 269                         };\r
 270                 } else\r
 271                 if( xtext ){\r
 272                         xtext.text( xtext._text + xnode._text );\r
 273                         console.log( '[' +parent._tag + '>' + xnode._uid + '] xtext,destroy ... ' );\r
 274                         xnode.destroy();\r
 275                 };\r
 276                 current.xtext = xtext || xnode;\r
 277                 break;\r
 278         };\r
 279 }) :\r
 280 (function ( parent, xnode, current ){\r
 281         var elems = current.elems,\r
 282                 j     = current.j,\r
 283                 m     = elems.length,\r
 284                 xtext = current.xtext,\r
 285                 skipCleanup = current.skipCleanup,\r
 286                 elm, tag, text;\r
 287 \r
 288         xnode.parent = parent;\r
 289         \r
 290         if( xnode._xnodeType === 3 ){\r
 291                 //alert( X.Dom.cleanupWhiteSpace( xnode._text ) );\r
 292                 if( !skipCleanup ){\r
 293                         if( !( text = xnode._text ) || ( text = X.Dom.cleanupWhiteSpace( text ) ) === ' ' ){\r
 294                                 xnode.destroy();\r
 295                         } else\r
 296                         if( xtext ){\r
 297                                 //alert( 'xtext ' + text.charCodeAt( 0 ) + ' : ' + text.length );\r
 298                                 xtext.text( xtext._text + text );\r
 299                                 xnode.destroy();\r
 300                         } else {\r
 301                                 //alert( 'xnode ' + text.charCodeAt( 0 ) + ' : ' + text.length );\r
 302                                 xnode.text( text );\r
 303                         };\r
 304                 } else\r
 305                 if( xtext ){\r
 306                         //alert( 'skip ' + text.charCodeAt( 0 ) + ' : ' + text.length );\r
 307                         xtext.text( xtext._text + xnode._text );\r
 308                         xnode.destroy();\r
 309                 };\r
 310                 current.flag |= 4;\r
 311                 current.xtext = xtext || xnode;\r
 312                 return;\r
 313         };\r
 314         \r
 315         if( xnode._xnodeType !== 1 ){\r
 316                 //alert( xnode._xnodeType )\r
 317                 return;\r
 318         };\r
 319         \r
 320         for( ; j < m; ++j, ++current.j ){\r
 321                 elm = elems[ j ];\r
 322                 tag = elm.tagName;\r
 323                 /*\r
 324                  * 未知のタグについては、閉じタグも含めてタグ名扱いになる\r
 325                  */\r
 326                 if( tag === '!' || tag.charAt( 0 ) === '/' ){\r
 327                         //alert( '## ' + tag );\r
 328                         continue;\r
 329                 } else\r
 330                 if( xnode._tag !== tag ){\r
 331                         alert( xnode._tag + ' ' + ' !== ' + tag + '\nxnode.html():' + xnode.attr('cite') + '\nelm.outerHTML:' +  elm.outerHTML );\r
 332                 } else {\r
 333                         ++current.j;\r
 334                         \r
 335                         xnode._rawNode = elm;\r
 336                         xnode._root    = parent._root;\r
 337                         //xnode._tag     = X.Dom.DTD.TAG_FIX[ tag ] || tag;\r
 338                         if( 0 <= X.Dom.cleanupTagNames.indexOf( tag.toLowerCase() ) || tag === 'SCRIPT' ){\r
 339                                 xnode.destroy();\r
 340                                 break;\r
 341                         };\r
 342                         \r
 343                         !xnode._id && elm.setAttribute( 'id', 'ie4uid' + xnode._uid );\r
 344                         elm.setAttribute( 'UID', xnode._uid );\r
 345                         \r
 346                         tag === 'INPUT' && (\r
 347                                 !xnode._attrs ?\r
 348                                         ( xnode._attrs = { type : 'text' } ) :\r
 349                                         !xnode._attrs.type || ( xnode._attrs.type = 'text' )\r
 350                         );\r
 351                         current.flag |= 3;\r
 352                         current.xtext = null;\r
 353                         \r
 354                         if( tag === 'TEXTAREA' ){\r
 355                                 xnode.attr( 'value', xnode.html() ).empty();\r
 356                         } else\r
 357                         if( xnode._xnodes && xnode._xnodes.length ){\r
 358                                 return {\r
 359                                         me     : xnode,\r
 360                                         xnodes : X.copyArray( xnode._xnodes ),\r
 361                                         xtext  : null,\r
 362                                         flag   : 0,\r
 363                                         i      : 0,\r
 364                                         l      : xnode._xnodes.length,\r
 365                                         elems  : elm.children,\r
 366                                         j      : 0,\r
 367                                         skipCleanup : skipCleanup || 0 <= X.Dom.skipCleanupTagNames.indexOf( tag.toLowerCase() )\r
 368                                 };\r
 369                         };\r
 370                         break;\r
 371                 };\r
 372         };\r
 373         // for\r
 374         if( !xnode._rawNode ){\r
 375                 alert( xnode._tag + ' ' + xnode._id + ' !== none...' );\r
 376         };\r
 377 \r
 378         // textNode がある\r
 379         ( current.flag & 6 ) && ( parent._dirty |= X.Dom.Dirty.IE4_TEXTNODE_FIX );\r
 380 });\r