X-Git-Url: http://git.osdn.jp/view?a=blobdiff_plain;ds=inline;f=0.6.x%2Fjs%2F02_dom%2F20_XNode.js;h=bb392e322246062eabf787fe4415fac385d10bc3;hb=ef25747bebf1799d49f9bd0d64e339da9ea61d13;hp=ab4e26b9e92b02809f6fa6c41517e5e6ea13b9f3;hpb=d93e0f2faddc687d56a9528402f74ba2415a0407;p=pettanr%2FclientJs.git diff --git a/0.6.x/js/02_dom/20_XNode.js b/0.6.x/js/02_dom/20_XNode.js index ab4e26b..bb392e3 100644 --- a/0.6.x/js/02_dom/20_XNode.js +++ b/0.6.x/js/02_dom/20_XNode.js @@ -155,7 +155,8 @@ var Node = X[ 'Node' ] = X_EventDispatcher[ 'inherits' ]( var uid = X_Node_CHASHE.length, css, xnodes, xnode, parent; - if( X_Node_newByTag ){ + // TODO 継承クラスで this.Super('DIV') ができない! -> サブクラスから呼ばれた場合も + if( X_Node_newByTag || this.constructor !== Node ){ X_Node_newByTag = false; this[ '_tag' ] = v.toUpperCase(); arguments[ 1 ] && this[ 'attr' ]( arguments[ 1 ] ); @@ -223,6 +224,7 @@ var Node = X[ 'Node' ] = X_EventDispatcher[ 'inherits' ]( X_Node_CHASHE[ this[ '_uid' ] = uid ] = this; }, + // TODO .mesure() -> X.Event.MESURED 'width' : X_Node_width, 'height' : X_Node_height, 'clientWidth' : X_Node_clientWidth, @@ -253,6 +255,8 @@ var Node = X[ 'Node' ] = X_EventDispatcher[ 'inherits' ]( 'createTextAt' : X_Node_createTextAt, + 'createRange' : X_Node_createRange, + 'clone' : X_Node_clone, 'append' : X_Node_append, @@ -289,7 +293,7 @@ var Node = X[ 'Node' ] = X_EventDispatcher[ 'inherits' ]( 'toggleClass' : X_Node_toggleClass, 'hasClass' : X_Node_hasClass, - 'html' : X_Node_html, + 'html' : X_Node__html, 'text' : X_Node_text, 'call' : X_Node_call, 'each' : X_Node_each @@ -360,6 +364,7 @@ function X_Node_getType( v ){ if( X_Type_isString( v ) ){ return '<' === v.charAt( 0 ) && v.charAt( v.length - 1 ) === '>' ? X_NodeType_HTML_STRING : X_NodeType_STRING; }; + // Node サブクラスのインスタンス if( v[ 'instanceOf' ] && v[ 'instanceOf' ]( Node ) ) return X_NodeType_XNODE; return 0; }; @@ -494,6 +499,15 @@ function X_Node_createTextAt( index, text ){ }; /** + * 選択されたテキストへの参照やテキスト座標情報 + * @alias Node.prototype.createRange + * @return {TextRange} 新規作成されたテキストレンジ + */ +function X_Node_createRange( a, b, c ){ + return X_TextRange( this, a, b, c ); +}; + +/** * Node のクローンを作成し返す。id もクローンされる点に注意。イベントリスナはクローンされない。 * http://d.hatena.ne.jp/think49/20110724/1311472811 * http://d.hatena.ne.jp/uupaa/20100508/1273299874 @@ -1103,14 +1117,14 @@ function X_Node_hasClass( v ){ * @return {string|Node} * @example node.html( '' ); */ -function X_Node_html( html ){ +function X_Node__html( html ){ var _ = '', q = '"', xnodes, n, i, l; // setter if( html !== undefined ){ // String 以外に Number や false null なども許可 if( !this[ '_tag' ] ) return this[ 'text' ]( html ); this[ 'empty' ](); - if( html ){ + if( html += '' ){ X_Node_append.apply( this, X_HtmlParser_parse( html, true ) ); }; return this; @@ -1202,7 +1216,7 @@ function X_Node_call( name /*, opt_args... */ ){ var args = arguments, l = args.length - 1, v, raw, parent, body, - childX, childY, childW, childH, + child, childX, childY, childW, childH, parentW, parentH, parentSX, parentSY, parentSW, parentSH, visibleX, visibleY, visibleW, visibleH, @@ -1223,7 +1237,7 @@ function X_Node_call( name /*, opt_args... */ ){ case 'treeIsDirty' : return !!X_Node_updateTimerID; case 'fontSize' : - return this.parent ? X_Node_CSS_getCharSize( this ) : 0; + return ( this[ '_flags' ] & X_NodeFlags_IN_TREE ) ? X_Node_CSS_getCharSize( this ) : 0; case 'inGPU' : return !!( this[ '_flags' ] & ( X_NodeFlags_GPU_NOW | X_NodeFlags_GPU_RELEASE_RESERVED ) ); case 'isGPUChild' : @@ -1258,6 +1272,7 @@ function X_Node_call( name /*, opt_args... */ ){ }; if( name === 'inView' ){ + if( !( this[ '_flags' ] & X_NodeFlags_IN_TREE ) ) return { 'isInView' : false }; body = X_elmBody; child = raw; visibleX = visibleY = visibleW = visibleH = 0; @@ -1367,7 +1382,7 @@ function X_Node_reserveUpdate(){ var X_Node_updateReservedByReleaseGPU = false; function X_Node_startUpdate( time ){ - var removal, i, xnodeOrElm; + var removal, i, xnodeOrElm, xnodesIEFilterFixAfter, xnode, active; if( !X_Node_updateTimerID || X_ViewPort_readyState < X_EVENT_INIT ){ return; @@ -1407,11 +1422,23 @@ function X_Node_startUpdate( time ){ removal.length = 0; }; + // 強制的に再描画を起こす, 但し activeElement からフォーカスが外れるため復帰する + // IE5mode win10 で 確認 + if( X_UA[ 'IE5' ] ){ + active = document.activeElement; + X_elmBody.style.visibility = 'hidden'; + }; + if( X_Node_html[ '_flags' ] & X_Node_BitMask_IS_DIRTY ){ - X_Node__commitUpdate( X_Node_html, X_Node_html[ '_rawObject' ].parentNode, null, X_Node_html[ '_flags' ], 1 ); + X_Node__commitUpdate( X_Node_html, X_Node_html[ '_rawObject' ].parentNode, null, X_Node_html[ '_flags' ], 1, xnodesIEFilterFixAfter = [] ); } else { - X_Node__commitUpdate( X_Node_head, X_Node_head[ '_rawObject' ].parentNode, null, X_Node_head[ '_flags' ], 1 ); - X_Node__commitUpdate( X_Node_body, X_Node_body[ '_rawObject' ].parentNode, null, X_Node_body[ '_flags' ], 1 ); + X_Node__commitUpdate( X_Node_head, X_Node_head[ '_rawObject' ].parentNode, null, X_Node_head[ '_flags' ], 1, xnodesIEFilterFixAfter = [] ); + X_Node__commitUpdate( X_Node_body, X_Node_body[ '_rawObject' ].parentNode, null, X_Node_body[ '_flags' ], 1, xnodesIEFilterFixAfter = [] ); + }; + + if( X_UA[ 'IE5' ] ){ + X_elmBody.style.visibility = ''; + active && active.parentNode && active.focus(); }; if( X_Node_updateReservedByReleaseGPU ){ @@ -1419,12 +1446,16 @@ function X_Node_startUpdate( time ){ X_Node_updateReservedByReleaseGPU = false; }; - if( time ){ - // X.Timer 経由でないと発火しない このイベントでサイズを取ると無限ループに - X_System[ '_listeners' ] && X_System[ '_listeners' ][ X_EVENT_UPDATED ] && X_System[ 'dispatch' ]( X_EVENT_UPDATED ); - } else { - X_System[ '_listeners' ] && X_System[ '_listeners' ][ X_EVENT_UPDATED ] && X_System[ 'asyncDispatch' ]( X_EVENT_UPDATED ); + if( X_NodeFlags_IE_FILTER_FIX_AFTER && xnodesIEFilterFixAfter.length ){ + for( i = 0; xnode = xnodesIEFilterFixAfter[ i ]; ++i ){ + xnode[ '_flags' ] &= ~X_NodeFlags_IE_FILTER_FIX_AFTER; + X_Node_CSS_onAfterUpdateIEFilterFix( xnode ); + }; }; + + // time を視て X.Timer 経由の場合、即座に発火する。 + // width() 等で強制的にツリーを構築している場合、UPDATE イベントのコールバックで要素を変更しサイズを取ると無限ループになる,これを防ぐため asyncDispatch とする + X_System[ '_listeners' ] && X_System[ '_listeners' ][ X_EVENT_UPDATED ] && X_System[ time ? 'dispatch' : 'asyncDispatch' ]( X_EVENT_UPDATED ); X_ViewPort[ '_listeners' ] && X_ViewPort[ '_listeners' ][ X_EVENT_AFTER_UPDATE ] && X_ViewPort[ 'asyncDispatch' ]( X_EVENT_AFTER_UPDATE ); }; @@ -1444,13 +1475,13 @@ function X_Node_startUpdate( time ){ */ var X_Node__commitUpdate = X_UA_DOM.W3C ? - ( function( that, parentElement, nextElement, accumulatedFlags, ie8opacity ){ + ( function( that, parentElement, nextElement, accumulatedFlags, ie8AccumulatedOpcity, xnodesIEFilterFixAfter ){ var elm = that[ '_rawObject' ], - created, xnodes, l, next; + created, xnodes, l, next, anime, v, currentOpcity; // 1. GPU 一切の更新をスキップ if( that[ '_flags' ] & X_NodeFlags_GPU_NOW ){ - console.log( '更新のskip ' + !!( that[ '_flags' ] & X_Node_BitMask_IS_DIRTY ) ); + console.log( '更新のskip ' + that[ '_className' ] + !!( that[ '_flags' ] & X_Node_BitMask_IS_DIRTY ) ); that[ '_flags' ] & X_Node_BitMask_IS_DIRTY && X_Node__updateRawNode( that, elm ); return elm; }; @@ -1474,7 +1505,8 @@ var X_Node__commitUpdate = if( that[ '_flags' ] & X_NodeFlags_STYLE_IS_DISPLAY_NONE ){ if( X_Node_displayNoneFixForIE5 ){ // filter の効いている要素を含む要素は display:none が無視される。 - // filter = '' で削除はできるが、再表示時に filter が消える。 -> filter な要素を削除してしまう。 + // filter = '' で削除はできるが、再表示時に filter が消える。 -> filter な要素を削除してしまう。 + // TODO filters[0].enabled = false なんてどう? if( elm && elm.parentNode ){ X_Node__actualRemove( that ); }; @@ -1497,7 +1529,12 @@ var X_Node__commitUpdate = if( !elm ){ if( !that[ '_tag' ] ){ that[ '_flags' ] &= X_Node_BitMask_RESET_DIRTY; - elm = document.createTextNode( X_String_chrReferanceTo( that[ '_text' ] ) ); + if( X_UA[ 'IE' ] < 8 ){ + // \n -> \r\n に変換しないと pre タグで開業されない win10ie7(ie11 emu) で確認 + elm = document.createTextNode( X_String_chrReferanceTo( that[ '_text' ] ).split( '\n' ).join( X_String_CRLF ) ); + } else { + elm = document.createTextNode( X_String_chrReferanceTo( that[ '_text' ] ) ); + }; if( !X_UA[ 'IE' ] ){ elm[ 'UID' ] = that[ '_uid' ]; }; @@ -1577,12 +1614,14 @@ var X_Node__commitUpdate = that[ '_flags' ] |= X_NodeFlags_ACTUAL_LISTENING; }; - ie8opacity = ie8opacity * ( that[ '_css' ] && 0 <= that[ '_css' ].opacity ? that[ '_css' ].opacity : 1 ); + // ie8 では子要素に opacity が反映されないため、親要素の opacity を積算する + currentOpcity = that[ '_css' ] && 0 <= that[ '_css' ].opacity && that[ '_css' ].opacity; + ie8AccumulatedOpcity = ie8AccumulatedOpcity * ( currentOpcity || 1 ); // 8. 更新の適用 if( accumulatedFlags & X_Node_BitMask_IS_DIRTY ){ delete that[ '_fontSize' ]; - X_Node__updateRawNode( that, elm, ie8opacity, accumulatedFlags ); + X_Node__updateRawNode( that, elm, currentOpcity, ie8AccumulatedOpcity, accumulatedFlags ); }; // 9. ie5 only @@ -1599,10 +1638,14 @@ var X_Node__commitUpdate = }; }; + if( that[ '_flags' ] & X_NodeFlags_IE_FILTER_FIX_AFTER ){ + xnodesIEFilterFixAfter[ xnodesIEFilterFixAfter.length ] = that; + }; + // 10. 子要素の更新。 if( ( xnodes = that[ '_xnodes' ] ) && ( l = xnodes.length ) ) { for( ; l; ){ - next = X_Node__commitUpdate( xnodes[ --l ], elm, next, accumulatedFlags, ie8opacity ); + next = X_Node__commitUpdate( xnodes[ --l ], elm, next, accumulatedFlags, ie8AccumulatedOpcity, xnodesIEFilterFixAfter ); }; }; @@ -1617,12 +1660,34 @@ var X_Node__commitUpdate = }; }; +/* + * if( ( anime = that[ '_anime' ] ) && 6 <= anime.phase && anime.doScroll ){ + if( anime.phase === 6 ){ + v = anime.fromScrollX; + if( v === v ){ + elm.scrollLeft = v; + } else { + anime.fromScrollX = elm.scrollLeft; + }; + v = anime.fromScrollY; + if( v === v ){ + elm.scrollTop = v; + } else { + anime.fromScrollY = elm.scrollTop; + }; + } else { + elm.scrollLeft = anime.scrollX; + elm.scrollTop = anime.scrollY; + }; + }; + */ + return elm; }) : X_UA_DOM.IE4 ? ( function( that, parentElement, prevElement, accumulatedFlags ){ var elm = that[ '_rawObject' ] || X_Node__ie4getRawNode( that ), - xnodes, l, i, dirty, mix, html, text, prev; + xnodes, l, i, dirty, mix, html, text, prev, anime, v; if( !that[ '_tag' ] ){ that[ '_flags' ] & X_NodeFlags_DIRTY_CONTENT && X_Node__updateRawNode( that, elm ); @@ -1646,68 +1711,90 @@ var X_Node__commitUpdate = prevElement.insertAdjacentHTML( 'AfterEnd', X_Node__actualCreate( that, false ) ) : parentElement.insertAdjacentHTML( 'AfterBegin', X_Node__actualCreate( that, false ) ); X_Node__afterActualCreate( that ); - return that[ '_rawObject' ] || X_Node__ie4getRawNode( that ); - }; - - accumulatedFlags |= that[ '_flags' ]; - - xnodes = that[ '_xnodes' ]; - l = xnodes ? xnodes.length : 0; - dirty = !!( that[ '_flags' ] & X_NodeFlags_IE4_DIRTY_CHILDREN ); - - /* - * HTML の下に TextNode だけ 。MIX_FIXED でない場合、削除、追加 を親に通知 - * HTML の下に HTML だけ - * HTML の下は MIX -> TextNode, html の削除、変更、追加 - * HTML の下は MIX_FIXED -> TextNode を に置き換えてあるのでW3C DON 的に触ることができる - */ - if( dirty ){ - that[ '_flags' ] &= ~X_NodeFlags_IE4_DIRTY_CHILDREN; - for( i = 0; i < l; ++i ){ - if( xnodes[ i ][ '_tag' ] ){ - that[ '_flags' ] |= X_NodeFlags_IE4_HAS_ELEMENT; - } else { - that[ '_flags' ] |= X_NodeFlags_IE4_HAS_TEXTNODE; + + elm = that[ '_rawObject' ] || X_Node__ie4getRawNode( that ); + } else { + accumulatedFlags |= that[ '_flags' ]; + + xnodes = that[ '_xnodes' ]; + l = xnodes ? xnodes.length : 0; + dirty = !!( that[ '_flags' ] & X_NodeFlags_IE4_DIRTY_CHILDREN ); + + /* + * HTML の下に TextNode だけ 。MIX_FIXED でない場合、削除、追加 を親に通知 + * HTML の下に HTML だけ + * HTML の下は MIX -> TextNode, html の削除、変更、追加 + * HTML の下は MIX_FIXED -> TextNode を に置き換えてあるのでW3C DON 的に触ることができる + */ + if( dirty ){ + that[ '_flags' ] &= ~X_NodeFlags_IE4_DIRTY_CHILDREN; + for( i = 0; i < l; ++i ){ + if( xnodes[ i ][ '_tag' ] ){ + that[ '_flags' ] |= X_NodeFlags_IE4_HAS_ELEMENT; + } else { + that[ '_flags' ] |= X_NodeFlags_IE4_HAS_TEXTNODE; + }; + if( that[ '_flags' ] & X_Node_BitMask_IE4_IS_MIX === X_Node_BitMask_IE4_IS_MIX ){ + mix = true; + break; + }; }; - if( that[ '_flags' ] & X_Node_BitMask_IE4_IS_MIX === X_Node_BitMask_IE4_IS_MIX ){ - mix = true; - break; + }; + + if( that[ '_flags' ] & X_NodeFlags_IE4_FIXED || that[ '_flags' ] & X_Node_BitMask_IE4_IS_MIX === X_NodeFlags_IE4_HAS_ELEMENT ){ + for( i = 0; i < l; ++i ){ + prev = X_Node__commitUpdate( xnodes[ i ], elm, prev, accumulatedFlags ); }; + } else + if( mix ){ + html = []; + for( i = 0; i < l; ++i ){ + html[ i ] = X_Node__actualCreate( xnodes[ i ], false ); + }; + elm.innerHTML = html.join( '' ); + for( i = 0; i < l; ++i ){ + X_Node__afterActualCreate( xnodes[ i ] ); + }; + that[ '_flags' ] |= X_NodeFlags_IE4_FIXED; + } else + if( that[ '_flags' ] & X_NodeFlags_IE4_HAS_TEXTNODE ){ + dirty = dirty || false; + for( i = 0; i < l; ++i ){ + text = xnodes[ i ]; + if( text[ '_flags' ] & X_Node_BitMask_IS_DIRTY ){ + text[ '_flags' ] &= X_Node_BitMask_RESET_DIRTY; + dirty = true; + }; + }; + if( dirty ) elm.innerHTML = that[ 'text' ](); }; + + if( accumulatedFlags & X_Node_BitMask_IS_DIRTY ) delete that[ '_fontSize' ]; + + that[ '_flags' ] &= ~X_NodeFlags_DIRTY_POSITION; + that[ '_flags' ] & X_Node_BitMask_IS_DIRTY && X_Node__updateRawNode( that, elm ); }; - if( that[ '_flags' ] & X_NodeFlags_IE4_FIXED || that[ '_flags' ] & X_Node_BitMask_IE4_IS_MIX === X_NodeFlags_IE4_HAS_ELEMENT ){ - for( i = 0; i < l; ++i ){ - prev = X_Node__commitUpdate( xnodes[ i ], elm, prev, accumulatedFlags ); - }; - } else - if( mix ){ - html = []; - for( i = 0; i < l; ++i ){ - html[ i ] = X_Node__actualCreate( xnodes[ i ], false ); - }; - elm.innerHTML = html.join( '' ); - for( i = 0; i < l; ++i ){ - X_Node__afterActualCreate( xnodes[ i ] ); - }; - that[ '_flags' ] |= X_NodeFlags_IE4_FIXED; - } else - if( that[ '_flags' ] & X_NodeFlags_IE4_HAS_TEXTNODE ){ - dirty = dirty || false; - for( i = 0; i < l; ++i ){ - text = xnodes[ i ]; - if( text[ '_flags' ] & X_Node_BitMask_IS_DIRTY ){ - text[ '_flags' ] &= X_Node_BitMask_RESET_DIRTY; - dirty = true; + if( ( anime = that[ '_anime' ] ) && 6 <= anime.phase && anime.doScroll ){ + if( anime.phase === 6 ){ + v = anime.fromScrollX; + if( v === v ){ + elm.scrollLeft = v; + } else { + anime.fromScrollX = elm.scrollLeft; + }; + v = anime.fromScrollY; + if( v === v ){ + elm.scrollTop = v; + } else { + anime.fromScrollY = elm.scrollTop; }; + } else { + elm.scrollLeft = anime.scrollX; + elm.scrollTop = anime.scrollY; }; - if( dirty ) elm.innerHTML = that[ 'text' ](); }; - - if( accumulatedFlags & X_Node_BitMask_IS_DIRTY ) delete that[ '_fontSize' ]; - - that[ '_flags' ] &= ~X_NodeFlags_DIRTY_POSITION; - that[ '_flags' ] & X_Node_BitMask_IS_DIRTY && X_Node__updateRawNode( that, elm ); + return elm; }) : (function(){}); @@ -1717,15 +1804,22 @@ var X_Node__commitUpdate = */ var X_Node__updateRawNode = X_UA_DOM.W3C ? - ( function( that, elm, ie8opacity, accumulatedFlags ){ - var attrs, rename, k, v, memory, f; + ( function( that, elm, currentOpcity, ie8AccumulatedOpcity, accumulatedFlags ){ + var // flags = that[ '_flags' ], + attrs, rename, k, v, f; // textNode if( !that[ '_tag' ] ){ - elm.data = X_String_chrReferanceTo( that[ '_text' ] ); + if( X_UA[ 'IE' ] < 8 ){ + // \n -> \r\n に変換しないと pre タグで開業されない win10ie7(ie11 emu) で確認 + elm.data = X_String_chrReferanceTo( that[ '_text' ] ).split( '\n' ).join( X_String_CRLF ); + } else { + elm.data = X_String_chrReferanceTo( that[ '_text' ] ); + }; that[ '_flags' ] &= X_Node_BitMask_RESET_DIRTY; return; }; + // id if( that[ '_flags' ] & X_NodeFlags_DIRTY_ID ){ that[ '_id' ] ? @@ -1742,7 +1836,7 @@ var X_Node__updateRawNode = elm.setAttribute( 'class', that[ '_className' ] ) : ( elm.className = that[ '_className' ] ) ) : - ( elm.className && elm.removeAttribute( X_UA[ 'IE' ] < 8 ? 'className' : 'class' ) ); // className は ie7- + ( elm.className && elm.removeAttribute( X_UA[ 'IE' ] < 8 ? 'className' : 'class' ) ); // className は ie7- }; // attr @@ -1793,10 +1887,9 @@ var X_Node__updateRawNode = }; if( accumulatedFlags & X_NodeFlags_IE8_OPACITY_FIX ){ - memory = that[ '_css' ] && that[ '_css' ].opacity; - if( f = true ){ - if( !that[ '_css' ] ) that[ '_css' ] = {}; - that[ '_css' ].opacity = ie8opacity; + if( 0 <= currentOpcity ){ + f = true; + that[ '_css' ].opacity = ie8AccumulatedOpcity; if( that[ '_flags' ] & X_NodeFlags_DIRTY_CSS ){ that[ '_flags' ] |= X_NodeFlags_OLD_CSSTEXT; } else @@ -1828,13 +1921,13 @@ var X_Node__updateRawNode = }; }; + /* + * http://jsdo.it/esukei/imOL + * IE8でのfilter:alpha継承 + * IE8でfilter:alphaの指定がposition:relative,position:absoluteの子要素に継承されない問題 + */ if( f ){ - if( 0 <= memory ){ - that[ '_css' ].opacity = memory; - } else { - delete that[ '_css' ].opacity; - if( X_Object_isEmpty( that[ '_css' ] ) ) delete that[ '_css' ]; - }; + that[ '_css' ].opacity = currentOpcity; }; that[ '_flags' ] &= X_Node_BitMask_RESET_DIRTY;