用 slide 方式加载树形结构数据项

查找指定容器下所有 a 根据属性决定是否应用 ajax 方式加载内容。

使用层次深度来控制slide的方向。

使用 margin-left/margin-right animation 显示过渡效果。

ZH || (ZH = {});
ZH.TreeSlider = function () {
if (window.history && window.history.pushState) if ($( " #slider " ).length != 0 ) if ( ! navigator.userAgent.match( / (iPod|iPhone|iPad) / )) {
var a = this ;
a.enabled = true ;
$( " #slider a.js-slide-to, .breadcrumb a " ).live( " click " , function (d) {
return a.clickHandler(d)
});
$(window).bind( " popstate " , function (d) {
a.popStateHandler(d.originalEvent)
})
}
};
ZH.TreeSlider.prototype = {
enabled: false ,
sliding: false ,
slideSpeed: 400 ,
frameForPath: function (a) {
return $( ' .frame[data-path=" ' + a + ' "] ' )
},
frameForURL: function (a) {
return this .frameForPath( this .pathFromURL(a))
},
pathFromURL: function (a) {
var d = / \/(tree|blob)\/[^\/]+\/ / ;
a = a.split(d)[ 2 ] || " / " ;
if (a.slice(a.length - 1 , a.length) != " / " ) a += " / " ;
return unescape(a)
},
scrollToBreadcrumb: function () {
this .visibleInBrowser( " .breadcrumb:visible " ) || $( " .breadcrumb:visible " ).scrollTo( 50 )
},
visibleInBrowser: function (a) {
var d = $(window).scrollTop(),
c = d + $(window).height(),
b = $(a).offset().top;
a = b + $(a).height();
return a >= d && b <= c
},
clickHandler: function (a) {
if (a.which == 2 || a.metaKey || a.ctrlKey) return true ;
if ( this .sliding) return false ;
a = a.target.href;
var d = this .pathFromURL(a);
window.history.pushState({
path: d
}, "" , a);
typeof _gaq != " undefined " && _gaq.push([ " _trackPageview " ]);
this .slideTo(a);
return false
},
popStateHandler: function () {
this .slideTo(location.pathname)
},
doneSliding: function () {
$( " #slider " ).trigger( " pageUpdate " );
if ( this .sliding) {
this .sliding = false ;
$( " #slider .frame-center " ).nextAll( " .frame " ).hide();
$( " #slider .frame-center " ).prevAll( " .frame " ).css( " visibility " , " hidden " );
var a = $( " .frame-loading:visible " );
a.length ? a.removeClass( " frame-loading " ) : $( " #slider " ).trigger( " slid " )
}
},
slideTo: function (a) {
var d = this .pathFromURL(a),
c = this .frameForPath(d),
b = $( " #slider .frame-center " ).attr( " data-path " ) || "" ;
c.is( " .frame-center " ) || (b == " / " || d.split( " / " ).length > b.split( " / " ).length ? this .slideForwardTo(a) : this .slideBackTo(a))
},
slideForwardTo: function (a) {
debug( " Sliding forward to %s " , a);
var d = this .frameForURL(a);
if (d.length) this .slideForwardToFrame(d);
else {
var c = this .slideForwardToLoading();
this .loadFrame(a, function (b) {
c.replaceWith($(b).find( " .frame-center " ))
})
}
},
slideForwardToFrame: function (a) {
if ( ! this .sliding) {
this .sliding = true ;
var d = this ;
$( " #slider .frame-center " ).after(a.css( " marginLeft " , 0 )).addClass( " frame " ).removeClass( " frame-center " ).animate({
marginLeft: " -1200px "
}, this .slideSpeed, function () {
d.doneSliding()
});
this .makeCenterFrame(a);
this .setFrameTitle(a);
this .setFrameCanonicalURL(a)
}
},
slideForwardToLoading: function () {
var a = $( " .frame-loading " ).clone();
a.find( " img " ).hide();
setTimeout( function () {
a.find( " img " ).show()
}, 500 );
$( " .frames " ).append(a);
this .slideForwardToFrame(a);
return a
},
slideBackTo: function (a) {
debug( " Sliding back to %s " , a);
var d = this .frameForURL(a);
if (d.length) this .slideBackToFrame(d);
else {
var c = this .slideBackToLoading(),
b = this .pathFromURL(a);
this .loadFrame(a, function (e) {
c.removeClass( " frame-loading " ).empty().append($(e).find( " .frame-center " ).contents()).attr( " data-path " , b)
})
}
},
slideBackToFrame: function (a) {
if ( ! this .sliding) {
this .sliding = true ;
$( " #slider .frame-center " ).before(a.css( " marginLeft " , " -1200px " )).addClass( " frame " ).removeClass( " frame-center " );
var d = this ;
a.animate({
marginLeft: " 0 "
}, this .slideSpeed, function () {
d.doneSliding()
});
this .makeCenterFrame(a);
this .setFrameTitle(a);
this .setFrameCanonicalURL(a)
}
},
slideBackToLoading: function () {
var a = $( " .frame-loading " ).clone();
a.find( " img " ).hide();
setTimeout( function () {
a.find( " img " ).show()
}, 350 );
$( " .frames " ).prepend(a.show());
slider.slideBackToFrame(a);
return a
},
makeCenterFrame: function (a) {
a.css( " visibility " , " visible " ).show().addClass( " frame-center " );
this .scrollToBreadcrumb();
var d = $( ' .breadcrumb[data-path=" ' + a.attr( " data-path " ) + ' "] ' );
if (d.length > 0 ) {
$( " .breadcrumb:visible " ).hide();
d.show()
}
d = $( ' .announce[data-path=" ' + a.attr( " data-path " ) + ' "] ' );
$( " .announce " ).fadeOut();
d.length > 0 && d.fadeIn();
a = $( " .js-ufo[data-path= " + a.attr( " data-path " ) + " ] " );
$( " .js-ufo " ).fadeOut();
a.length > 0 && a.fadeIn();
ZH.currentPath = this .pathFromURL(location.pathname).replace( / \/$ / , "" )
},
setFrameTitle: function (a) {
a = a.attr( " data-path " );
if ( ! ( ! a || a.length == 0 )) {
var d = unescape(unescape(ZH.currentRef));
a = unescape(a.slice( 0 , a.length - 1 ));
document.title = a.length > 0 ? a + " at " + d + " from " + ZH.nameWithOwner + " - ZH " : ZH.nameWithOwner + " at " + d + " - ZH "
}
},
setFrameCanonicalURL: function (a) {
(a = a.attr( " data-canonical-url " )) && $( " link[rel=canonical] " ).attr( " href " , a)
},
loadFrame: function (a, d) {
debug( " Loading " + a + " ?slide=1 " );
var c = this ;
$.ajax({
url: a + " ?slide=1 " ,
cache: false ,
success: function (b) {
d.call( this , b);
$( " #slider " ).trigger( " slid " );
$( " #slider .breadcrumb " ).hide().last().after($(b).find( " .breadcrumb " ));
b = c.frameForURL(a);
b.trigger( " pageUpdate " );
ZH.Tree.rewriteSHAsInLinksWithRef();
ZH.CachedCommitDataPoller( 50 , b);
ZH.Blob.show();
c.setFrameTitle(b);
c.setFrameCanonicalURL(b)
},
error: function () {
$( " #slider .frame-center " ).html( " <h3>Something went wrong.</h3> " )
},
complete: function () {
c.sliding = false
}
})
}
};
$( function () {
window.slider = new ZH.TreeSlider
});