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                         function createTree( xnode, childNodes, skipCleanup, textarea ){\r
  65                                 var i = 0,\r
  66                                         j = 0,\r
  67                                         l = childNodes.length,\r
  68                                         child, _xnode, f, tag, text, _xtext, doc;\r
  69                                 childNodes = X.copyArray( childNodes );\r
  70 \r
  71                                 if( textarea ){\r
  72                                         xnode.attr( 'value', xnode.html() ).empty();\r
  73                                         return;\r
  74                                 };\r
  75 \r
  76                                 for( ; i < l; ++i ){\r
  77                                         child = childNodes[ i ];\r
  78                                         tag   = child.tagName;\r
  79                                         if( ( child.nodeType !== 1 && child.nodeType !== 3 ) || tag === '!' || ( tag && tag.charAt( 0 ) === '/' ) ){\r
  80                                                 child.parentNode.removeChild( child );\r
  81                                                 continue;\r
  82                                         };\r
  83                                         f = false;\r
  84                                         while( xnode._xnodes && j < xnode._xnodes.length ){\r
  85                                                 _xnode = xnode._xnodes[ j ];\r
  86                                                 _xnode.parent   = xnode;\r
  87                                                 \r
  88                                                 if( _xnode._xnodeType === 1 ){\r
  89                                                         if( child.nodeType !== 1 ){\r
  90                                                                 if( !( text = child.data ) || ( text = X.Dom.cleanupWhiteSpace( text ) ) === ' ' ){\r
  91                                                                         child.parentNode.removeChild( child );\r
  92                                                                         break;\r
  93                                                                 };\r
  94                                                                 alert( '[' +xnode._tag + '>' +_xnode._tag + '] !== ' + child.nodeType + '\n' + child.data );\r
  95                                                                 ++j;\r
  96                                                                 continue;\r
  97                                                         };\r
  98                                                         if( _xnode._tag.toUpperCase() !== tag ){\r
  99                                                                 alert( '[' +xnode._tag + '>' +_xnode._tag + ' ' + (_xnode._xnodes ? _xnode._xnodes.length : '' ) + '] !== ' + tag + ' ' + (child.childNodes ? child.childNodes.length : '' ) + '\n' + child.outerHTML );\r
 100                                                                 ++j;\r
 101                                                                 continue;\r
 102                                                         } else {\r
 103                                                                 _xnode._rawNode = child;\r
 104                                                                 //if( ( doc = child.ownerDocument || child.document ) && ( doc.createElement( 'p' ).tagName === doc.createElement( 'P' ).tagName ) ){\r
 105                                                                         if( tag.charAt( 0 ) === '/' ) tag = tag.slice( 1 );\r
 106                                                                         _xnode._tag     = tag; // .toUpperCase()\r
 107                                                                 //};\r
 108                                                                 _xnode._root    = xnode._root;\r
 109                                                                 child.UID = _xnode._uid;\r
 110                                                                 if( 0 <= X.Dom.cleanupTagNames.indexOf( tag.toLowerCase() ) || tag === 'SCRIPT' ){ // ie で body 内の script が2度よばれるのに対処\r
 111                                                                         //alert( '[' +xnode._tag + '>' + _xnode._tag + '] remove ... ' );\r
 112                                                                         _xnode.destroy();\r
 113                                                                         ++n;\r
 114                                                                         continue;\r
 115                                                                 } else {\r
 116                                                                         //alert( '[' +xnode._tag + '>' + _xnode._tag + ' ' + (_xnode._xnodes ? _xnode._xnodes.length : '' ) + '] === ' + tag + ' ' + (child.childNodes ? child.childNodes.length : '' ) + ' Hit\n' + child.outerHTML );\r
 117                                                                         child.childNodes && child.childNodes.length && createTree( _xnode, child.childNodes, skipCleanup || 0 <= X.Dom.skipCleanupTagNames.indexOf( tag.toLowerCase() ), tag === 'TEXTAREA' );\r
 118                                                                 };\r
 119                                                                 _xtext = null;\r
 120                                                                 f = true;\r
 121                                                                 ++j;\r
 122                                                                 break;\r
 123                                                         };\r
 124                                                 } else\r
 125                                                 if( _xnode._xnodeType === 3 ){\r
 126                                                         \r
 127                                                         if( child.nodeType !== 3 ){\r
 128                                                                 if( !( text = _xnode._text ) || ( text = X.Dom.cleanupWhiteSpace( text ) ) === ' ' ){\r
 129                                                                         console.log( '[' +xnode._tag + '>' + _xnode._uid + '] destroy ... ' );\r
 130                                                                         _xnode.destroy();\r
 131                                                                         ++n;\r
 132                                                                         continue;\r
 133                                                                 };\r
 134                                                                 alert(  xnode._tag + '>' + '"' + _xnode._text + '" !== ' + tag + '\n' + child.outerHTML );\r
 135                                                                 ++j;\r
 136                                                                 continue;\r
 137                                                         };\r
 138                                                         \r
 139                                                         _xnode._rawNode = child;\r
 140                                                         _xnode._root    = xnode._root;\r
 141                                                         if( !skipCleanup ){\r
 142                                                                 if( !( text = _xnode._text ) || ( text = X.Dom.cleanupWhiteSpace( text ) ) === ' ' ){\r
 143                                                                         console.log( '[' +xnode._tag + '>' + _xnode._uid + '] destroy ... ' );\r
 144                                                                         _xnode.destroy();\r
 145                                                                         ++n;\r
 146                                                                         continue;\r
 147                                                                 };\r
 148                                                                 if( _xtext ){\r
 149                                                                         _xtext.text( _xtext._text + text );\r
 150                                                                         console.log( '[' +xnode._tag + '>' + _xnode._uid + '] xtext,destroy ... ' );\r
 151                                                                         _xnode.destroy();\r
 152                                                                         ++n;\r
 153                                                                         continue;\r
 154                                                                 } else {\r
 155                                                                         //alert( xnode._tag + '>' + '"' + text + '"\n' + child.data );\r
 156                                                                         _xnode.text( text );\r
 157                                                                 };\r
 158                                                         } else\r
 159                                                         if( _xtext ){\r
 160                                                                 _xtext.text( _xtext._text + _xnode.text );\r
 161                                                                 console.log( '[' +xnode._tag + '>' + _xnode._uid + '] xtext,destroy ... ' );\r
 162                                                                 _xnode.destroy();\r
 163                                                                 ++n;\r
 164                                                                 continue;\r
 165                                                         };\r
 166                                                         _xtext = _xtext || _xnode;\r
 167                                                         ++j;\r
 168                                                         break;\r
 169                                                 } else {\r
 170                                                         alert( 'no hit!' );\r
 171                                                 };\r
 172                                                 ++j;\r
 173 \r
 174                                         };                              \r
 175                                         //if( !f ) alert( '**** ' + child.outerHTML );\r
 176                                 };\r
 177                                 while( xnode._xnodes && j < xnode._xnodes.length ){\r
 178                                         _xnode = xnode._xnodes[ j ];\r
 179                                         _xnode.parent = xnode;\r
 180                                         _xnode.destroy();\r
 181                                         ++n;\r
 182                                         continue;\r
 183                                 };\r
 184                         };\r
 185         \r
 186         // body の属性値の取得\r
 187 \r
 188         X.Dom.asyncParse( body.innerHTML, true )\r
 189                 .listenOnce( X.Event.SUCCESS, X.Dom._onAsyncParseComplete, [ createTree ] );\r
 190                 //.listen( X.Event.PROGRESS, function(e){alert(e.progress);} );\r
 191 }) :\r
 192 document.all ?\r
 193 (function(){\r
 194         var r    = Node.root,\r
 195                 body = r._rawNode,\r
 196                 i, n = 0, parser, elmProgress = '_xdom_builder_progress';\r
 197                 \r
 198                         function createTree( xnode, children, skipCleanup, textarea ){\r
 199                                 var parent = xnode,\r
 200                                         xnodes = X.copyArray( parent._xnodes ),\r
 201                                         l      = xnodes && xnodes.length,\r
 202                                         m      = children.length,\r
 203                                         i = 0, j = 0, flag = 0,\r
 204                                         elm, tag, xtext, text;\r
 205                                 //children = X.copyArray( children );\r
 206 \r
 207                                 if( textarea ){\r
 208                                         xnode.attr( 'value', xnode.html() ).empty();\r
 209                                         return;\r
 210                                 };\r
 211 \r
 212                                 for( ; i < xnodes.length; ++i ){\r
 213                                         xnode = xnodes[ i ];\r
 214                                         xnode.parent = parent;\r
 215                                         \r
 216                                         if( xnode._xnodeType === 3 ){\r
 217                                                 //alert( X.Dom.cleanupWhiteSpace( xnode._text ) );\r
 218                                                 if( !skipCleanup ){\r
 219                                                         if( !( text = xnode._text ) || ( text = X.Dom.cleanupWhiteSpace( text ) ) === ' ' ){\r
 220                                                                 xnode.destroy();\r
 221                                                         } else\r
 222                                                         if( xtext ){\r
 223                                                                 //alert( 'xtext ' + text.charCodeAt( 0 ) + ' : ' + text.length );\r
 224                                                                 xtext.text( xtext._text + text );\r
 225                                                                 xnode.destroy();\r
 226                                                         } else {\r
 227                                                                 //alert( 'xnode ' + text.charCodeAt( 0 ) + ' : ' + text.length );\r
 228                                                                 xnode.text( text );\r
 229                                                         };\r
 230                                                 } else\r
 231                                                 if( xtext ){\r
 232                                                         //alert( 'skip ' + text.charCodeAt( 0 ) + ' : ' + text.length );\r
 233                                                         xtext.text( xtext._text + xnode._text );\r
 234                                                         xnode.destroy();\r
 235                                                 };\r
 236                                                 flag |= 4;\r
 237                                                 xtext = xtext || xnode;\r
 238                                                 continue;\r
 239                                         };\r
 240                                         \r
 241                                         if( xnode._xnodeType !== 1 ){\r
 242                                                 //alert( xnode._xnodeType )\r
 243                                                 continue;\r
 244                                         };\r
 245                                         \r
 246                                         for( ; j < m; ++j ){\r
 247                                                 elm = children[ j ];\r
 248                                                 tag = elm.tagName;\r
 249                                                 /*\r
 250                                                  * 未知のタグについては、閉じタグも含めてタグ名扱いになる\r
 251                                                  */\r
 252                                                 if( tag === '!' || tag.charAt( 0 ) === '/' ){\r
 253                                                         //alert( '## ' + tag );\r
 254                                                         continue;\r
 255                                                 } else\r
 256                                                 if( xnode._tag !== tag ){\r
 257                                                         alert( xnode._tag + ' ' + ' !== ' + tag + '\nxnode.html():' + xnode.attr('cite') + '\nelm.outerHTML:' +  elm.outerHTML );\r
 258                                                 } else {\r
 259                                                         xnode._rawNode = elm;\r
 260                                                         xnode._root    = parent._root;\r
 261                                                         //xnode._tag     = X.Dom.DTD.TAG_FIX[ tag ] || tag;\r
 262                                                         if( 0 <= X.Dom.cleanupTagNames.indexOf( tag.toLowerCase() ) || tag === 'SCRIPT' ){\r
 263                                                                 xnode.destroy();\r
 264                                                                 break;\r
 265                                                         } else {\r
 266                                                                 xnode._xnodes && xnode._xnodes.length && createTree( xnode, elm.children, skipCleanup || 0 <= X.Dom.skipCleanupTagNames.indexOf( tag.toLowerCase() ), tag === 'TEXTAREA' );\r
 267                                                                 \r
 268                                                                 !xnode._id && elm.setAttribute( 'id', 'ie4uid' + xnode._uid );\r
 269                                                                 elm.setAttribute( 'UID', xnode._uid );\r
 270                                                                 \r
 271                                                                 tag === 'INPUT' && (\r
 272                                                                         !xnode._attrs ?\r
 273                                                                                 ( xnode._attrs = { type : 'text' } ) :\r
 274                                                                                 !xnode._attrs.type || ( xnode._attrs.type = 'text' )\r
 275                                                                 );\r
 276                                                                 flag |= 3;\r
 277                                                                 xtext = null;\r
 278                                                                 break;\r
 279                                                         };\r
 280                                                 };\r
 281                                         };\r
 282                                         // for\r
 283                                         if( !xnode._rawNode ){\r
 284                                                 alert( xnode._tag + ' ' + xnode._id + ' !== none...' );\r
 285                                         };\r
 286                                         ++j;\r
 287                                         flag &= 6;\r
 288                                 };\r
 289                                 // textNode がある\r
 290                                 ( flag & 6 ) && ( parent._dirty |= X.Dom.Dirty.IE4_TEXTNODE_FIX );\r
 291                         };\r
 292         /*\r
 293          * http://support.microsoft.com/kb/812417/ja\r
 294          * PRB: outerHTML の HTML 要素のプロパティは、既定の属性は表示されません。\r
 295          * \r
 296          * body.innerHTML でなく、 body.outerHTML にはできなかった、、、\r
 297          */\r
 298         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
 299         elmProgress = document.all[ elmProgress ];\r
 300         \r
 301         parser = X.Dom.asyncParse( body.innerHTML, true )\r
 302                 .listenOnce( X.Event.SUCCESS, X.Dom._onAsyncParseComplete, [ createTree ] )\r
 303                 .listen( X.Event.PROGRESS,\r
 304                         function(e){\r
 305                                 elmProgress.style.width = ( e.progress * 100 | 0 ) + '%';\r
 306                         }\r
 307                 );\r
 308 }) :\r
 309 (function(){\r
 310         \r
 311 }) );\r
 312 \r
 313 X.Dom._onAsyncParseComplete = function( e, createTree ){\r
 314         var xnodes = Node.root._xnodes = [], t;\r
 315         xnodes.push.apply( xnodes, e.xnodes );\r
 316         \r
 317         //t = X.getTime();\r
 318         createTree( Node.root, document.body.childNodes || document.body.children );\r
 319         //alert( X.getTime() - t );\r
 320         \r
 321         X.Dom.asyncDispatch( 0, { type : X.Dom.Event.DOM_BUILDER_COMPLETE } );\r
 322         \r
 323         delete X.Dom._onAsyncParseComplete;\r
 324 };\r
 325 \r
 326 \r
 327 function asyncCreateTree( parent, elems, xnodeProgress, async ){\r
 328         var xnodes    = async ? 0             : X.copyArray( parent._xnodes ),\r
 329                 l         = async ? 0             : xnodes.length,\r
 330                 current   = async ? async.current : { xnodes : xnodes, l : l, i : 0 },\r
 331                 stack     = async ? async.stack   : [],\r
 332                 count     = async ? async.count   : 0,\r
 333                 startTime = X.getTime(),\r
 334                 xnodes, xnode, l, progress;\r
 335         while( current || ( current = stack.pop() ) ){\r
 336                 for( ; current.i < current.l; ++current.i ){\r
 337                         xnode = current.xnoeds[ current.i ];\r
 338                         \r
 339                         //\r
 340                         \r
 341                         ++count;\r
 342                         \r
 343                         if(( xnodes = xnode._xnodes ) && ( l = xnodes.length ) ){\r
 344                                 ++current.i;\r
 345                                 stack[ stack.length ] = current;\r
 346                                 current = {\r
 347                                         xnodes : X.copyArray( xnodes ),\r
 348                                         i      : -1,\r
 349                                         l      : l\r
 350                                 };\r
 351                                 continue;\r
 352                         };\r
 353                         \r
 354                         if( startTime + 16 <= X.getTime() ){\r
 355                                 if( async ){\r
 356                                         async.current = ++current.i < current.l && current;\r
 357                                         async.count   = count;\r
 358                                 };\r
 359                                 X.Timer.once( 0, asyncCreateTree, [ null, xnodeProgress, async || { stack : stack, current : ++current.i < current.l && current, count : count } ] );\r
 360                                 // progress\r
 361                                 progress = 1 - count / Node._chashe.length;\r
 362                                 return;\r
 363                         };\r
 364                 };\r
 365                 current = null;\r
 366         };\r
 367         // complete\r
 368         X.Dom.asyncDispatch( 0, { type : X.Dom.Event.DOM_BUILDER_COMPLETE } );\r
 369 };\r