OSDN Git Service

version0.5.37, update Finder.
authoritozyun <itozyun@gmail.com>
Mon, 31 Dec 2012 13:32:29 +0000 (22:32 +0900)
committeritozyun <itozyun@gmail.com>
Mon, 31 Dec 2012 13:32:29 +0000 (22:32 +0900)
0.5.x/javascripts/system.js
0.5.x/stylesheets/system.css

index 4a4136e..64a6830 100644 (file)
@@ -1,6 +1,6 @@
 /*
  * pettanR system.js
- *   version 0.5.36
+ *   version 0.5.37
  *
  * gadgetOS
  *   author:
@@ -2161,19 +2161,24 @@ var PointingDeviceEventTree = ( function(){
                                data.addEventListener( 'mouseover', scrollReady, data );
                        },
                        update : function( data ){
-                               if( data !== currentNodeData ) return;
-
+                               // if( data !== currentNodeData ) return;
+                               var isCurrent = data === currentNodeData;
+                               
                                var contentH = data._scrollH = data.elm.scrollHeight,
                                        clipH    = data.h,
                                        offsetH  = contentH - clipH,
                                        scrollY  = data._scrollY = 0 < data._scrollY ? 0 : ( data._scrollY < -offsetH ? -offsetH : data._scrollY ),
                                        barH, barY;
-                               elmScroller.style.width  = data.w + 'px';
-                               elmScroller.style.height = clipH + 'px';                                
+                               if( isCurrent === true ){
+                                       elmScroller.style.width  = data.w + 'px';
+                                       elmScroller.style.height = clipH + 'px';                                        
+                               };
+                               
                                if( offsetH < 1 ){
                                        data._scrollY = scrollY = 0;
-                                       elmBar.style.display = 'none';
-                               } else {
+                                       if( isCurrent === true ) elmBar.style.display = 'none';
+                               } else
+                               if( isCurrent === true ){
                                        barH     = Math.floor( clipH * ( clipH / contentH ) );
                                        barY     = Math.floor( ( clipH - barH ) * - scrollY / offsetH );
                                        elmBar.style.cssText = [
@@ -4999,52 +5004,55 @@ var UIForm = ( function(){
 })();
 
 var Finder = ( function(){
+       var FINDER_LIST              = [],
+               ELM_ORIGIN_LOCATION_ITEM = Util.pullHtmlAsTemplete( '<div class="finder-location-item"></div>' ),
+               ICON_CLASSNAME           = 'finder-icon-thumbnail';
+       
        var HTML_FINDER_ICON = ( function(){
-               return ( UA.isIE === true && UA.ieVersion < 8 ?
-               [
-                       '<div class="finder-icon fnder-icon-ie7">',
-                               '<span class="finder-icon-handle"></span>',
-                               '<span class="finder-icon-thumbnail"></span>',
-                               '<span class="finder-icon-cell finder-icon-ie-filename">',
-                                       '<span class="finder-icon-vertical-middle-outer">',
-                                               '<span class="finder-icon-vertical-middle-inner">',
-                                                       '<span class="finder-icon-filename break-word">file name</span>',
+                       return ( UA.isIE === true && UA.ieVersion < 8 ?
+                       [
+                               '<div class="finder-icon fnder-icon-ie7">',
+                                       '<span class="finder-icon-handle"></span>',
+                                       '<span class="' + ICON_CLASSNAME + '"></span>',
+                                       '<span class="finder-icon-cell finder-icon-ie-filename">',
+                                               '<span class="finder-icon-vertical-middle-outer">',
+                                                       '<span class="finder-icon-vertical-middle-inner">',
+                                                               '<span class="finder-icon-filename break-word">file name</span>',
+                                                       '</span>',
                                                '</span>',
                                        '</span>',
-                               '</span>',
-                               '<span class="finder-icon-cell finder-icon-ie-summary">',
-                                       '<span class="finder-icon-vertical-middle-outer">',
-                                               '<span class="finder-icon-vertical-middle-inner">',
-                                                       '<span class="finder-icon-summary break-word">file descriptiion</span>',
+                                       '<span class="finder-icon-cell finder-icon-ie-summary">',
+                                               '<span class="finder-icon-vertical-middle-outer">',
+                                                       '<span class="finder-icon-vertical-middle-inner">',
+                                                               '<span class="finder-icon-summary break-word">file descriptiion</span>',
+                                                       '</span>',
                                                '</span>',
                                        '</span>',
-                               '</span>',
-                       '</div>'
-               ] :
-               [
-                       '<div class="finder-icon fnder-icon-modern">',
-                               '<span class="finder-icon-handle"></span>',
-                               '<span class="finder-icon-thumbnail"></span>',
-                               '<span class="finder-icon-filename break-word">file name</span>',
-                               '<span class="finder-icon-summary break-word">file descriptiion</span>',
-                       '</div>'
-               ] ).join( '' );
-       })();
-
+                                       '<span class="finder-icon-down"></span>',
+                               '</div>'
+                       ] :
+                       [
+                               '<div class="finder-icon fnder-icon-modern">',
+                                       '<span class="finder-icon-handle"></span>',
+                                       '<span class="' + ICON_CLASSNAME + '"></span>',
+                                       '<span class="finder-icon-filename break-word">file name</span>',
+                                       '<span class="finder-icon-summary break-word">file descriptiion</span>',
+                                       '<span class="finder-icon-down">&gt;</span>',
+                               '</div>'
+                       ] ).join( '' );
+               })(),
+               ELM_ORIGIN_FINDER_ICON = Util.pullHtmlAsTemplete( HTML_FINDER_ICON ),
+               ICON_HEIGHT            = Util.getElementSize( ELM_ORIGIN_FINDER_ICON ).height;
        
-       var FINDER_LIST              = [],
-               ELM_ORIGIN_LOCATION_ITEM = Util.pullHtmlAsTemplete( '<div class="finder-location-item"></div>' ),
-               ELM_ORIGIN_FINDER_ICON   = Util.pullHtmlAsTemplete( HTML_FINDER_ICON ),
-               ELM_ORIGIN_CONTAINER     = Util.pullHtmlAsTemplete( '<div class="finder-body"></div>' ),
-               ICON_HEIGHT              = Util.getElementSize( ELM_ORIGIN_FINDER_ICON ).height,
-               ICON_CLASSNAME           = 'finder-icon-thumbnail',
-               elmConsole               = Util.pullHtmlAsTemplete( [
-                       '<div class="finder-icon-console">',
-                               '<a href="#" class="finder-icon-console-action"></a>',
-                               '<a href="#" class="finder-icon-console-editor-apps"></a>',
-                               '<a href="#" class="finder-icon-console-viewer-apps"></a>',
-                       '</div>'
-               ].join( '' ) );
+       // t : 時間
+    // b : 開始の値(開始時の座標やスケールなど)
+    // c : 開始と終了の値の差分
+    // d : Tween(トゥイーン)の合計時間
+
+       function easeOutQuad( t, b, c, d ){
+               t /= d;
+               return -c * t*( t-2 ) + b;
+       };
        
 /**
  * FinderIconClass
@@ -5057,14 +5065,14 @@ var Finder = ( function(){
                node             : null,
                _index           : -1,
                _style           : -1,
-               init : function( finderData, file, w, index, style ){
+               init : function( page, file, w, index, style ){
                        if( !this.elm ) this.elm  = ELM_ORIGIN_FINDER_ICON.cloneNode( true );
 
-                       if( this.finderData !== finderData ){
-                               this.finderData = finderData;
-                               finderData.elmScroll.appendChild( this.elm );
+                       if( this.page !== page ){
+                               this.page = page;
+                               page.elm.appendChild( this.elm );
                                this.node && this.node.remove();
-                               this.node = finderData.nodeRoot.createNode( this.elm, false, true, 'finder-icon-hover', '' );
+                               this.node = page.node.createNode( this.elm, false, true, 'finder-icon-hover', '' );
                        };
                        if( this.file !== file ){
                                this.file && this.file.destroy();
@@ -5123,7 +5131,7 @@ var Finder = ( function(){
                        this.elm && this.elm.parentNode.removeChild( this.elm );
                        this.file && this.file.destroy();
                        this.node && this.node.remove();
-                       delete this.finderData;
+                       delete this.page;
                        delete this.file;
                        delete this.node;
                        delete this._index;
@@ -5132,9 +5140,9 @@ var Finder = ( function(){
                }       
        };
        FinderIconClass.pool = [];
-       FinderIconClass.get = function( finderData, file, w, index, style ){
+       FinderIconClass.get = function( page, file, w, index, style ){
                var _icon = FinderIconClass.pool.length > 0 ? FinderIconClass.pool.shift() : new FinderIconClass();
-               _icon.init( finderData, file, w, index, style );
+               _icon.init( page, file, w, index, style );
                return _icon;
        };
 
@@ -5162,10 +5170,7 @@ var Finder = ( function(){
                                this.file = file;
                                this.draw();
                        };
-                       if( this._index !== index ){
-                               this._index = index;
-                               this.resize( index );
-                       };
+                       this._index = index;
                        if( !this.node ) this.node = finderData.nodePath.createNode( this.elm, false, true, 'finder-path-hover', 'pointer' );
                },
                draw  : function(){
@@ -5176,13 +5181,10 @@ var Finder = ( function(){
                        this.elm.style.width = 'auto';
                        var ret = this.elm.offsetWidth;
                        this.elm.style.width = '';
-                       return ret;
+                       return ret + 15;
                },
                update : function( x, w ){
-                       this.node.update( x, undefined, w - 15 );
-               },
-               resize : function(){
-                       this.elm.style.left = ( this._index * 90 ) + 'px';
+                       this.node.update( x - 15, undefined, w );
                },
                index : function( _index ){
                        return this._index;
@@ -5206,6 +5208,225 @@ var Finder = ( function(){
                return _bread;
        };
        
+       
+       /**
+        * Page
+        */
+       var PageClass = function(){};
+       PageClass.prototype = {
+               nodeRoot     : null,
+               elmRoot      : null,
+               elmScroll    : null,
+               elm          : null,
+               node         : null,
+               folder       : null,
+               iconList     : null,
+               sliding      : false,
+               currentX     : 0,
+               panTime      : 0,
+               startX       : 0,
+               offsetX      : 0,
+               panTotalTime : 0,
+               isPanOut     : false,
+               init : function( nodeRoot, elmRoot, elmScroll ){
+                       this.nodeRoot  = nodeRoot;
+                       this.elmRoot   = elmRoot;
+                       this.elmScroll = elmScroll;
+                       
+                       if( this.elm === null ){
+                               this.elm = document.createElement( 'div' );
+                       };
+                       elmScroll.appendChild( this.elm );
+                       this.elm.style.cssText = 'position:absolute;top:0;';
+                       // this.elm.style.display = 'none';
+                       this.node = this.nodeRoot.createNode( this.elm, true, false );
+                       if( this.iconList === null ){
+                               this.iconList = [];
+                       };
+               },
+               panInReady : function( way ){
+                       this.elm.style.display = '';
+                       var x = this.sliding === true ? this.currentX : way * this.nodeRoot.width();
+                       this.startX       = this.currentX = x;
+                       this.targetX      = 0;
+                       this.offsetX      = -x;
+                       this.panTime      = 0;
+                       this.panTotalTime = 20;
+                       this.sliding      = true;
+                       this.isPanOut     = false;
+                       // this.elm.style.left = x + 'px';
+                       this.node.x( x );
+               },
+               panOutReady : function( way ){
+                       var x = -way * this.nodeRoot.width();
+                       this.startX       = this.currentX || 0;
+                       this.targetX      = x;
+                       this.offsetX      = x - this.startX;
+                       this.panTime      = 0;
+                       this.panTotalTime = 20;
+                       this.sliding      = true;
+                       this.isPanOut     = true;
+               },
+               pan : function(){
+                       var page = this,
+                               x    = page.currentX = easeOutQuad( page.panTime, page.startX, page.offsetX, page.panTotalTime );
+                       // page.elm.style.left = x + 'px';
+                       this.node.x( x );
+                       if( page.panTotalTime < ++page.panTime ){
+                               delete page.panTime;
+                               delete page.startX;
+                               delete page.offsetX;                                    
+                               delete page.panTotalTime;
+                               delete page.sliding;
+                               if( this.isPanOut === true ) this.elm.style.display = 'none';
+                       };
+               },
+               draw : function( folder ){
+                       _w = this.nodeRoot.width();
+                       this.folder = folder;
+                       var data     = this,
+                               iconList = data.iconList,
+                               i        = 0,
+                               j        = 0,
+                               l        = folder.getChildFileLength(),
+                               m        = iconList.length,
+                               scrollY  = -this.nodeRoot.scrollY(),
+                               rootH    = scrollY + this.nodeRoot.height(),
+                               icon;
+
+                       for( ; i < l; ++i ){
+                               if( ( i + 1 ) * ICON_HEIGHT < scrollY || rootH < i * ICON_HEIGHT ) continue;
+                               if( j < m ){
+                                       iconList[ j ].init( this, folder.getChildFileAt( i ), _w, i, data.style );
+                               } else {
+                                       iconList.push( FinderIconClass.get( this, folder.getChildFileAt( i ), _w, i, data.style ) );
+                               };
+                               j++;
+                       };
+                       data.elmRoot.className    = folder.getState() === Const.FILE.STATE.LOADING ? 'finder-body loading' : 'finder-body';
+                       // data.elmRoot.style.height = ( data.h - data.headH ) + 'px';
+                       
+                       while( j < iconList.length ) iconList.pop().destroy();
+                       data.elmScroll.style.height = ( l * ICON_HEIGHT ) + 'px';
+               },
+               onScroll : function(){
+                       var _w       = this.nodeRoot.width();
+                       
+                       var data     = this,
+                               iconList = data.iconList,
+                               folder   = this.folder,
+                               i        = 0,
+                               j        = 0,
+                               l        = folder.getChildFileLength(),
+                               scrollY  = -this.nodeRoot.scrollY(),
+                               rootH    = scrollY + this.nodeRoot.height(),
+                               startIndex = 0 < iconList.length ? iconList[ 0 ]._index : 0,
+                               icon;
+                       
+                       // console.log( ' > ' + scrollY + ' , ' + rootH )
+                       for( ; i < l; ++i ){
+                               if( ( i + 1 ) * ICON_HEIGHT < scrollY || rootH < i * ICON_HEIGHT ){
+                                       if( iconList.length <= j ) continue;
+                                       icon = iconList[ j ];
+                                       if( icon._index !== i ) continue;
+                                       icon.destroy();
+                                       iconList.splice( j, 1 );
+                                       continue;
+                               };
+                               if( iconList.length <= j || iconList[ j ]._index !== i ){
+                                       if( i < startIndex ){
+                                               iconList.splice( j, 0, FinderIconClass.get( this, folder.getChildFileAt( i ), _w, i, data.style ) );                    
+                                       } else
+                                       if( startIndex + iconList.length <= i ){
+                                               iconList.push( FinderIconClass.get( this, folder.getChildFileAt( i ), _w, i, data.style ) );                    
+                                       };                                      
+                               };
+                               ++j;
+                       };
+                       
+                       //while( j < iconList.length ) iconList.pop().destroy();
+               },
+               resize : function( w ){
+                       var list = this.iconList,
+                               i    = list.length;
+                       for( ; i; ) list[ --i ].resize( w );
+               },
+               destroy : function(){
+                       var icon;
+                       while( icon = this.iconList.shift() ) icon.destroy();
+                       
+                       this.elm.parentNode.removeChild( this.elm );
+               }
+       };
+       
+       var DetailPageClass = function(){};
+       DetailPageClass.prototype = Util.extend( new PageClass(), {
+               init : function( finderData ){
+                       this.finderData = finderData;
+                       this.apiuser    = finderData.apiuser;
+                       this.nodeRoot   = finderData.nodeRoot;
+                       this.elmRoot    = finderData.elmRoot;
+                       this.elmScroll  = finderData.elmScroll;
+                       
+                       if( this.elm === null ){
+                               this.elm = Util.pullHtmlAsTemplete( [
+                                       '<div class="finder-detail">',
+                                               '<div class="finder-icon"><div class="finder-detail-thumbnail"></div></div>',
+                                               '<div class="finder-detail-filename break-word">file name</div>',
+                                               '<div class="finder-detail-summary break-word">file descriptiion</div>',
+                                       '</div>'
+                               ].join( '' ) );
+                       };
+                       this.elm.style.display = 'none';
+                       this.elmScroll.appendChild( this.elm );
+                       this.node = this.nodeRoot.createNode( this.elm, true, false );
+               },
+               draw : function( file ){                        
+                       var elm        = this.elm,
+                               thumb      = file.getThumbnail(),
+                               elmThumb   = Util.getElementsByClassName( elm, 'finder-detail-thumbnail' )[ 0 ],
+                               elmName    = Util.getElementsByClassName( elm, 'finder-detail-filename' )[ 0 ],
+                               elmDesc    = Util.getElementsByClassName( elm, 'finder-detail-summary' )[ 0 ];
+                       if( thumb.image ){
+                               elmThumb.className = 'finder-detail-thumbnail has-thumbnail';
+                               elmThumb.style.backgroundImage = [ 'url(', thumb.image, ')' ].join( '' );
+                       } else {
+                               elmThumb.className = 'finder-detail-thumbnail ' + thumb.className;
+                               elmThumb.style.backgroundImage = '';
+                       };
+                       
+                       elmName.firstChild.data = file.getName();
+                       elmDesc.firstChild.data = file.getSummary();
+                       this.node.width( this.nodeRoot.width() );
+                       this.node.height( this.nodeRoot.height() );
+                       
+                       this.elmScroll.style.height = this.nodeRoot.height() + 'px';
+               },
+               pan : function(){
+                       var page = this,
+                               x    = page.currentX = easeOutQuad( page.panTime, page.startX, page.offsetX, page.panTotalTime );
+                       // page.elm.style.left = x + 'px';
+                       this.node.x( x );
+                       if( page.panTotalTime < ++page.panTime ){
+                               delete page.panTime;
+                               delete page.startX;
+                               delete page.offsetX;                                    
+                               delete page.panTotalTime;
+                               delete page.sliding;
+                               if( this.isPanOut === true ) this.elm.style.display = 'none';
+                       };
+               },
+               onScroll : function(){
+                       
+               },
+               resize : function(){
+               
+               },
+               destroy : function(){
+                       
+               }
+       });
+       
 /**
  * FinderPrivateData
  */
@@ -5223,12 +5444,17 @@ var Finder = ( function(){
                onSelect     : null,
                viewerOption : null,
                editorOption : null,
-               iconList     : null,
                pathList     : null,
                headH        : 0,
                iconW        : 0,
                iconH        : 0,
                style        : 0,
+               pageIcons1   : null,
+               pageIcons2   : null,
+               panInPage    : null,
+               panOutPage   : null,
+               pageDetail   : null,
+               currentFile  : null,
                init : function( finder, apiuser, elm, tree, onSelect, viewerOption, editorOption ){
                        this.finder       = finder;
                        this.apiuser      = apiuser;
@@ -5245,15 +5471,14 @@ var Finder = ( function(){
                        
                        this.elmScroll    = document.createElement( 'div' );
                        this.elmRoot.appendChild( this.elmScroll );
-                       this.elmScroll.style.cssText = 'width:100%;';
+                       this.elmScroll.className     = 'finder-elm-scroll';
+                       this.elmScroll.style.cssText = 'width:100%;overflow:hidden;';
                        
                        this.tree         = tree;
                        this.onSelect     = onSelect;
                        this.viewerOption = viewerOption;
                        this.editorOption = editorOption;
                        
-                       this.iconList     = [];
-                       
                        var size          = Util.getElementSize( ELM_ORIGIN_FINDER_ICON );
                        this.iconW        = size.width;
                        this.iconH        = size.height;
@@ -5261,11 +5486,19 @@ var Finder = ( function(){
                        tree.addTreeEventListener( Const.TREE.EVENT.UPDATE, this.draw, this );
                        Util.addClass( this.elmRoot, 'finder-body' );
                        
+                       if( this.panInPage === null ){
+                               this.pageIcons1 = new PageClass();
+                               this.pageIcons2 = new PageClass();
+                               this.pageDetail = new DetailPageClass();
+                       };
+                       this.pageIcons1.init( this.nodeRoot, this.elmRoot, this.elmScroll );
+                       this.pageIcons2.init( this.nodeRoot, this.elmRoot, this.elmScroll );
+                       this.pageDetail.init( this );
                        FinderPrivateData.LIST.push( this );
                },
                onIconClick : function( e ){
                        var target = e.target,
-                               list   = this.iconList,
+                               list   = this.panInPage.iconList,
                                i, icon,
                                file;
                        if( target === this.nodeRoot ) return;
@@ -5273,12 +5506,16 @@ var Finder = ( function(){
                                icon = list[ --i ];
                                if( icon.node === target ){
                                        i = icon._index;
-                                       file = this.tree.getCurrentFile().getChildFileAt( i );
-                                       if( file !== null && ( file.getChildFileLength() !== -1 || file.getType() === Const.FILE.TYPE.FOLDER )){
+                                       file = this.currentFile.getChildFileAt( i );
+                                       if( file.getChildFileLength() !== -1 || file.getType() === Const.FILE.TYPE.FOLDER ){
                                                this.tree.down( i );
-                                               this.draw();
+                                               this.draw( this.w, this.h, 1 );
+                                       } else
+                                       if( Type.isFunction( this.onSelect ) === true ){ /* && this.onSelect( file ) === true */
+                                               this.onSelect( file );
                                        } else {
-                                               Type.isFunction( this.onSelect ) === true && this.onSelect( file );
+                                               this.tree.down( i );
+                                               this.draw( this.w, this.h, 1 );
                                        };
                                        file.destroy();
                                        break;
@@ -5286,57 +5523,61 @@ var Finder = ( function(){
                        };
                },
                onScroll : function( e ){
-                       var _w       = this.w;
-                       
-                       var data     = this,
-                               iconList = data.iconList,
-                               folder   = data.tree.getCurrentFile(),
-                               i        = 0,
-                               j        = 0,
-                               l        = folder.getChildFileLength(),
-                               scrollY  = -this.nodeRoot.scrollY(),
-                               rootH    = scrollY + this.nodeRoot.height(),
-                               startIndex = 0 < iconList.length ? iconList[ 0 ]._index : 0,
-                               icon;
-                       
-                       // console.log( ' > ' + scrollY + ' , ' + rootH )
-                       for( ; i < l; ++i ){
-                               if( ( i + 1 ) * ICON_HEIGHT < scrollY || rootH < i * ICON_HEIGHT ){
-                                       if( iconList.length <= j ) continue;
-                                       icon = iconList[ j ];
-                                       if( icon._index !== i ) continue;
-                                       icon.destroy();
-                                       iconList.splice( j, 1 );
-                                       continue;
-                               };
-                               if( iconList.length <= j || iconList[ j ]._index !== i ){
-                                       if( i < startIndex ){
-                                               iconList.splice( j, 0, FinderIconClass.get( this, folder.getChildFileAt( i ), _w, i, data.style ) );                    
-                                       } else
-                                       if( startIndex + iconList.length <= i ){
-                                               iconList.push( FinderIconClass.get( this, folder.getChildFileAt( i ), _w, i, data.style ) );                    
-                                       };                                      
-                               };
-                               ++j;
-                       };
-                       
-                       //while( j < iconList.length ) iconList.pop().destroy();
+                       this.panInPage.onScroll( e );
                },
                onPathClick : function( e ){
                        var target = e.target,
                                i      = target.nodeIndex();
                        if( target === this.nodePath || this.nodePath.numNode() - 1 === i ) return;
                        this.tree.up( i );
-                       this.draw();
-               },
-               draw : function( _w, _h ){
-                       var data = this;
-                       data.w   = _w = Type.isFinite( _w ) === true ? _w : data.w;
-                       data.h   = _h = Type.isFinite( _h ) === true ? _h : data.h;
-                       data.elmPath && data.drawPath( _w );
-                       data.drawBody( _w, _h );
+                       this.draw( this.w, this.h, -1 );
+               },
+               draw : function( w, h, way ){
+                       var data = this, page;
+                       data.w = w = Type.isFinite( w ) === true ? w : data.w;
+                       data.h = h = Type.isFinite( h ) === true ? h : data.h;
+                       
+                       var file     = this.currentFile = this.tree.getCurrentFile(),
+                               isFolder = file.getChildFileLength() !== -1 || file.getType() === Const.FILE.TYPE.FOLDER;
+                       
+                       data.elmPath && data.drawPath( w );
+                       page = this.panInPage;
+                       if( Type.isNumber( way ) === true ){
+                               if( page.sliding === false ){
+                                       if( isFolder === true ){
+                                               this.panInPage = page === this.pageIcons1 ? this.pageIcons2 : ( page === this.pageIcons2 ? this.pageIcons1 : this.panOutPage );
+                                       } else {
+                                               this.panInPage = this.pageDetail;
+                                       };
+                                       this.panOutPage = page;
+                               };
+                               this.panInPage.panInReady( way );
+                               //this.panInPage.elm.className = 'panIN';
+                               this.panOutPage.panOutReady( way );
+                               //this.panOutPage.elm.className = 'panOut';
+                               this.nodeRoot.disabled( true );
+                               SystemTimer.add( this.apiuser, this.tick, 16, false, this );
+                       } else {
+                               if( isFolder === true ){
+                                       this.panInPage = page === null ? this.pageIcons1 : page;
+                               } else {
+                                       this.panInPage = this.pageDetail;
+                               };
+                       };
+                       this.panInPage.draw( file );
+                       
                        data.nodeRoot.invalidateScrollbar();
                },
+               tick : function(){
+                       if( this.panInPage.sliding === false && this.panOutPage.sliding === false ){
+                               SystemTimer.remove( this.apiuser, this.tick );
+                               this.nodeRoot.disabled( false );
+                               this.nodeRoot.invalidateScrollbar();
+                               return;
+                       };
+                       this.panInPage.sliding === true && this.panInPage.pan();
+                       this.panOutPage.sliding  === true && this.panOutPage.pan();
+               },
                drawPath : function( w ){
                        if( !this.elmPath.parentNode ) return;
                        w = this.nodePath.width();
@@ -5352,7 +5593,7 @@ var Finder = ( function(){
                                file, path, pathW, offset, remove, pathX = 0, fit = false;
                        
                        for( ; i < l; ++i ){
-                               file = i !== l - 1 ? tree.getParentFileAt( i ) : tree.getCurrentFile();
+                               file = i !== l - 1 ? tree.getParentFileAt( i ) : this.currentFile;
                                if( i < m ){
                                        pathList[ i ].init( this, file, i );
                                } else {
@@ -5399,33 +5640,6 @@ var Finder = ( function(){
                                
                        //};
                },
-               drawBody : function( _w, _h ){
-                       var data     = this,
-                               iconList = data.iconList,
-                               file     = data.tree.getCurrentFile(),
-                               i        = 0,
-                               j        = 0,
-                               l        = file.getChildFileLength(),
-                               m        = iconList.length,
-                               scrollY  = -this.nodeRoot.scrollY(),
-                               rootH    = scrollY + this.nodeRoot.height(),
-                               icon;
-
-                       for( ; i < l; ++i ){
-                               if( ( i + 1 ) * ICON_HEIGHT < scrollY || rootH < i * ICON_HEIGHT ) continue;
-                               if( j < m ){
-                                       iconList[ j ].init( this, file.getChildFileAt( i ), _w, i, data.style );
-                               } else {
-                                       iconList.push( FinderIconClass.get( this, file.getChildFileAt( i ), _w, i, data.style ) );
-                               };
-                               j++;
-                       };
-                       data.elmRoot.className    = file.getState() === Const.FILE.STATE.LOADING ? 'finder-body loading' : 'finder-body';
-                       // data.elmRoot.style.height = ( data.h - data.headH ) + 'px';
-                       
-                       while( j < iconList.length ) iconList.pop().destroy();
-                       data.elmScroll.style.height = ( l * ICON_HEIGHT ) + 'px';
-               },
                createPath : function( node ){
                        if( this.elmPath ) return;
                        
@@ -5439,7 +5653,7 @@ var Finder = ( function(){
                                // this.elmPath.className = ;
                                this.pathList = [];
                                // this.headH    = 0;
-                               AsyncCall.add( this.apiuser, this.draw, null, this );                           
+                               AsyncCall.add( this.apiuser, this.draw, null, this );
                        };
                },
                destroy : function(){
@@ -5448,12 +5662,11 @@ var Finder = ( function(){
                        if( this.pathList ){
                                while( this.pathList.length > 0 ) this.pathList.shift().destroy();
                        };
-                       while( this.iconList.length > 0 ) this.iconList.shift().destroy();
                        
+                       this.pageIcons1.destroy();
+                       this.pageIcons2.destroy();
+                       this.pageDetail.destroy();
                        this.nodeRoot.remove();
-                       // this.nodePath && this.nodePath.remove();                     
-                       
-                       // this.elmRoot.removeChild( this.elmRoot );
                        
                        FINDER_LIST.splice( Util.getIndex( FINDER_LIST, this.finder ), 1 );
                        var data = ApplicationPrivateData.get( this.apiuser ),
@@ -5484,23 +5697,10 @@ var Finder = ( function(){
                MIN_WIDTH  : 200,
                MIN_HEIGHT : 200,
                init       : function(){
-                       var data = FinderPrivateData.get( this );
-                       // var position = Util.getAbsolutePosition( elmPath );
-                       // data.headX = position.x;
-                       // data.headY = position.y;
-                       // data.bodyY = Util.getAbsolutePosition( data.elmBody ).y;
-                       //data.apiuser.addEventListener( data.elmRoot, 'mousemove',  data.mousemove,  data );
-                       //data.apiuser.addEventListener( data.elmRoot, 'click',      data.click,      data );
-                       //data.apiuser.addEventListener( data.elmRoot, 'mousewheel', data.mousewheel, data );
                },
                resize : function( w, h ){
-                       var data = FinderPrivateData.get( this ),
-                               i    = data.iconList.length;
-                       //data.draw( _w, _h );                  
-       
-                       //data.elmRoot.style.height = ( _h - data.headH ) + 'px';
-                       
-                       for( ; i; ) data.iconList[ --i ].resize( w );
+                       var data = FinderPrivateData.get( this );
+                       data.panInPage && data.panInPage.resize( w );
                },
                createPath : function( node ){
                        return FinderPrivateData.get( this ).createPath( node );
index 973fb7f..f414194 100644 (file)
@@ -1,7 +1,7 @@
 @charset "UTF-8";\r
 \r
 /* pettanR system.css\r
- *   version 0.5.34\r
+ *   version 0.5.37\r
  * \r
  *   author:\r
  *     itozyun\r
        .finder-icon-hover {\r
                background-color:                       #eee;\r
        }\r
-               .fnder-icon-modern .finder-icon-handle,\r
-               .fnder-icon-modern .finder-icon-thumbnail,\r
-               .fnder-icon-modern .finder-icon-filename,\r
-               .fnder-icon-modern .finder-icon-summary {\r
+               .fnder-icon-modern span {\r
                        display:                                        table-cell;\r
                vertical-align:                         middle;\r
                line-height:                            1.3em;\r
                        height:                                         74px;\r
                }\r
                \r
-               .finder-icon-thumbnail {\r
+               .finder-icon-thumbnail,\r
+               .finder-detail-thumbnail {\r
                        width:                                          64px;\r
                        height:                                         74px;\r
                        cursor:                                         pointer;\r
                        background-image:                       url('../images/sprite.gif');\r
                }\r
                \r
+               .finder-icon-down {\r
+                       font-size:                                      40px;\r
+                       line-height:                            74px !important;\r
+                       color:                                          #999;\r
+                       position:                                       absolute;\r
+                       right:                                          0;\r
+                       top:                                            0;\r
+               }\r
+               .finder-icon-down-hover {\r
+                       color:                                          #111;\r
+               }\r
+               \r
+               \r
                .finder-icon .file-type-folder {\r
                        background-position:            0 -75px;\r
                }\r
                                                        top:                    -50%;\r
                                        }\r
                                        \r
-       /*  Finder Icon Console\r
-       --------------------------------------------------------------------------------------*/                \r
-               .finder-icon-console {\r
-                       position:                                       absolute;\r
-                       top:                                            0;\r
-                       right:                                          0;\r
-               }\r
-                       .finder-icon-console a {\r
-                               display:                                        block;\r
-                               width:                                          74px;\r
-                               height:                                         74px;\r
-                               border-left:                            1px solid #ccc;\r
-                               float:                                          right;\r
-                               background-image:                       url('../images/sprite.gif') !important;\r
-                               background-repeat:                      no-repeat;\r
-                       }\r
-                       .finder-icon-console a:hover {\r
-                               background-color:                       #ccc !important;\r
-                       }\r
-                       .finder-icon-console-action {\r
-                               background-position:            0px -355px;\r
-                       }\r
-                       .finder-icon-console-editor-apps {\r
-                               background-position:            -70px -355px;\r
-                       }\r
-                       .finder-icon-console-viewer-apps {\r
-                               background-position:            0px -425px;\r
-                       }
\ No newline at end of file
+       /*  Finder Detail\r
+       --------------------------------------------------------------------------------------*/\r
+       .finder-detail {\r
+               position:                                       absolute;\r
+               left:                                           0;\r
+               top:                                            0;\r
+               background-color:                       #e6e6e6;\r
+       }
\ No newline at end of file