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

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