Saturday, April 9, 2016

Freeze header in SharePoint List 2013

In this below script, Freeze header in SharePoint List 2013

Freeze header in SharePoint List
The stickyHeaders widget as part of the Sharepoint List .

_spBodyOnLoadFunctionNames.push("stickyHeaders");

function stickyHeaders() {//-----------------------------------------------------------------------------------------------------------------------------------------------
//Class
function List () {
this.list               = "";
this.webpart            = "";
this.sticky             = "";
this.header             = "";
this.dphm               = "";
this.s4                 = "";
this.contentBox = "";
this.top_old            = 0;
this.top_new            = 0;
this.bottom_old         = 0;
this.bottom_new         = 0;
this.wpBottomBorder_old = 0;
this.wpBottomBorder_new = 0;
this.wpTopBorder_old    = 0;
this.wpTopBorder_new    = 0;
this.wpScrollPos_old    = 0;
this.wpScrollPos_new    = 0;
this.prevHeight         = 0;
this.permsWithAnon      = 0;
this.fixedHeight        = 0;
this.fixedWidth         = 0;
this.widthChange        = true;
this.setWidth = function() {
if(this.widthChange){
if(this.fixedWidth) {
//TODO
//$(this.sticky).css("overflow-x","hidden")
//$(this.sticky).width($(this.sticky).closest("[id^=WebPartWPQ][style*=width]").width() - 18).children().each(function (j) {
// $(this.header).css("min-width",$(this.header).children('*:nth-child(' + (j+1) + ')').width())
//});
} else {
this.sticky.width(this.header.width());
for(var k=0, childrenLength = this.sticky.children().length; k<childrenLength; k++){
this.sticky.children().eq(k).width( this.header.children().eq(k).width() ).css("max-width","");
}
}
this.widthChange = false;
}
};
this.setLeftOffset = function() {
var parent = this.webpart.length != 0 ? this.webpart : this.dphm;
this.sticky.css("left",(parent.offset().left + parseInt(parent.css("padding-left")) - 2) + "px");
};
this.setTopPosition = function() {
if( !this.fixedHeight ){
this.sticky.css("top", (this.s4.offset().top + 2));
} else {
this.sticky.css("top",this.webpart.offset().top + "px")
if(this.sticky.attr('data-hidden', false) && this.sticky.offset().top < (this.s4.offset().top + 2)){
this.sticky.css("top", (this.s4.offset().top + 2));
}
}
};
this.update = function(eventType) {
if(this.sticky.attr('data-hidden', false)){
this.setLeftOffset();
this.setTopPosition();
}
if(eventType == "scrollList"){
this.wpScrollPos_old = this.wpScrollPos_new
this.wpScrollPos_new = this.webpart.scrollTop()

if(this.wpScrollPos_old <= this.prevHeight && this.wpScrollPos_new >= this.prevHeight ){
this.contentBox = this.list.find(".ms-core-menu-box")
this.contentBox.appendTo(this.sticky.find("th").eq(this.contentBox.closest("th").index()))
this.setWidth()
this.sticky.fadeIn().addClass("typeA");

} else if(this.wpScrollPos_old >= this.prevHeight && this.wpScrollPos_new <= this.prevHeight ) {
if(!this.sticky.hasClass("typeB")){
this.sticky.fadeOut().removeClass("typeA");
} else {
this.contentBox = this.sticky.find(".ms-core-menu-box")
this.contentBox.appendTo(this.header.find("th").eq(this.contentBox.closest("th").index())).css({"top":"auto","left":"auto"})
this.sticky.removeClass("typeA")
}
}
} else {
this.top_old = this.top_new;
this.top_new = this.header.offset().top - this.s4.offset().top;

this.bottom_old = this.bottom_new;
this.bottom_new = this.top_new - 30 + this.list.height();

if(this.fixedHeight) {
this.wpTopBorder_old = this.wpTopBorder_new;
this.wpTopBorder_new = this.webpart.parent().offset().top - this.s4.offset().top;
this.wpBottomBorder_old = this.wpBottomBorder_new
this.wpBottomBorder_new = this.webpart.parent().offset().top + parseInt(this.webpart.css("height")) - this.s4.offset().top


//fix for the permission this.when anonymous access is activated
this.bottom_new = this.permsWithAnon ? this.top_new - 30 + this.dphm.height() : this.bottom_new

this.bottom_old         = !this.bottom_old         ? this.bottom_new         : this.bottom_old;
this.top_old            = !this.top_old            ? this.top_new            : this.top_old;
this.wpBottomBorder_old = !this.wpBottomBorder_old ? this.wpBottomBorder_new : this.wpBottomBorder_old;
this.wpTopBorder_old    = !this.wpTopBorder_old    ? this.wpTopBorder_new    : this.wpTopBorder_old;

if (this.top_old >= 0 && this.top_new <= 0 || this.bottom_old <= 0 && this.bottom_new >= 0 || this.fixedHeight && ( this.wpBottomBorder_old <= 0 && this.wpBottomBorder_new >= 0 || this.wpTopBorder_old >= 0 && this.wpTopBorder_new <= 0 ) || ( this.top_old == this.top_new && this.bottom_old == this.bottom_new && this.top_old < 0 && this.bottom_old > 0 )) {
this.contentBox = this.list.find(".ms-core-menu-box")
if(this.contentBox){
this.contentBox.appendTo(this.sticky.find("th").eq(this.contentBox.closest("th").index()))
}
this.setWidth()
this.sticky.fadeIn().addClass("typeB")

} else if (this.top_old <= 0 && this.top_new >= 0 || this.bottom_old >= 0 && this.bottom_new <= 0 || this.fixedHeight && ( this.wpBottomBorder_old >= 0 && this.wpBottomBorder_new <= 0 || this.wpTopBorder_old <= 0 && this.wpTopBorder_new >= 0 )){
this.contentBox = this.sticky.find(".ms-core-menu-box")
this.contentBox.appendTo(this.header.find("th").eq(this.contentBox.closest("th").index())).css({"top":"auto","left":"auto"})
if(!this.sticky.hasClass("typeA")){
this.sticky.fadeOut().removeClass("typeB");

if(this.sticky.hasClass("typeA")){
if(this.wpBottomBorder_new <= 0){
this.sticky.removeClass("typeB").fadeOut();
} else {
this.sticky.removeClass("typeB")
}
}
}
}
}
}

(function (){
var wpq = $("#DeltaPlaceHolderMain [id^=MSOZoneCell_WebPartWPQ]:visible");
if (wpq.length === 1) {
function ShowContextRibbonSections() {
SP.Ribbon.WebPartComponent.registerWithPageManager({editable: true, isEditMode: false, allowWebPartAdder: false});
var wpcomp = SP.Ribbon.WebPartComponent.get_instance();
if (wpcomp) {
wpcomp.selectWebPart(document.getElementById(wpq.attr('id')), true);
}
}

ExecuteOrDelayUntilScriptLoaded(ShowContextRibbonSections, "sp.ribbon.js");
var DeselectAllWPItems_old = DeselectAllWPItems;
DeselectAllWPItems = function () {
DeselectAllWPItems_old();
setTimeout(function () { ShowContextRibbonSections(); }, 25);
};
}

var RibbonContainer = $("#RibbonContainer")
var ribbonHeight = RibbonContainer.height();
g_workspaceResizedHandlers.push(function () {
setTimeout(function () {
var newRibbonHeight = RibbonContainer.height();
if (ribbonHeight !== newRibbonHeight) {
findListsOnPage(false);
ribbonHeight = newRibbonHeight;
}
}, 500);
});

if (jQuery.inArray("spgantt.js", g_spPreFetchKeys) > -1) {
SP.SOD.executeOrDelayUntilScriptLoaded(function () {
setTimeout(function () { findListsOnPage(false); }, 500);
}, "spgantt.js");
} else {
findListsOnPage(false);
}

$(window).bind('hashchange.stickyHeaders', function () {
findListsOnPage(true);
});
})()

function findListsOnPage(hashchange) {
window['listContainer'] = {"lists":[]}

var quickEdit = false;

$("tr:has(>th[class^='ms-vh']):not(.sticky):visible, .ms-listviewgrid").closest("table").each(function(){
if($(this).find("tbody > tr").length > 1){
listContainer.lists.push(new List());
listContainer.lists[listContainer.lists.length - 1].list = $(this);
if($(this).hasClass('.ms-listviewgrid')){
quickEdit = true;
}
}
})

if (quickEdit) {
SP.GanttControl.WaitForGanttCreation(function () {
setTimeout(function () {
initializeStickyHeaders(listContainer,hashchange);
}, 1000);
return;
});
} else {
setTimeout(function(){initializeStickyHeaders(listContainer,hashchange);},0)

}
}

function initializeStickyHeaders(container,hashchange) {
$(window).unbind('resize.stickyHeaders');
$(window).bind ('resize.stickyHeaders', function () { $(container.lists).each(function(){this.update("resize")}) });

$('#s4-workspace').unbind('scroll.stickyHeaders');
$('#s4-workspace').bind('scroll.stickyHeaders', function () { $(container.lists).each(function(){this.update("scroll")}) });

$(container.lists).each(function(){
this.webpart        = this.list.closest("[id^=WebPartWPQ]")
this.header         = this.list.find("tr:has(>th):not(.sticky):visible")
this.dphm           = this.list.closest("#DeltaPlaceHolderMain");
this.s4             = $("#s4-workspace")
this.permsWithAnon  = this.list.closest("div[id$='rptrAnony__div']").length;
this.fixedHeight    = this.list.closest("[id^=WebPartWPQ][style*=height]").length;
this.fixedWidth     = this.list.closest("[id^=WebPartWPQ][style*=width]").length;

var prevElem = this.header.closest("table").prevAll()
for(var i=0, prevElemLength = prevElem.length;i<prevElemLength;i++){
this.prevHeight = this.prevHeight + $(prevElem[i]).outerHeight()
}

if(this.fixedHeight || this.fixedWidth){
this.webpart.bind("scroll",{elem:this}, function(event){
event.data.elem.update("scrollList")
})
}

if (!this.webpart.find(".sticky").length) {
this.list.before('<div class="sticky-anchor"><span></span></div>');
this.sticky = this.header.clone(true, true).addClass("sticky").attr('style', "position: fixed; border: 1px solid grey; background-color: white; box-shadow: 0 0 6px -2px black; display: none;").insertAfter(this.list);
this.sticky.find("#users_imn_header").attr("src", "/_layouts/15/images/imnhdr.gif")
this.sticky.find(".ms-selectall-span img").on("click",{header:this.header},function (event) {
var span = event.data.header.find(".ms-selectall-span")
span[0].checked = span[0].checked ? false : true;
ToggleAllItems2(span[0], span.attr("id").substr(17), span[0].checked)
});
} else {
if(hashchange){
this.sticky = this.list.closest("div").find(".sticky");
/*
var childrenLength = $(this.header).children().length
for(k=0; k<childrenLength; k++){
if(!this.header.children().eq(k).find(".ms-filter-iconouter").attr('data-hidden')){
this.header.children().eq(k).find(".ms-filter-iconouter").css("display","inline-block")
} else {
this.header.children().eq(k).find(".ms-filter-iconouter").css("display","none")
}
if(!this.header.children().eq(k).find(".ms-sortarrowdown-iconouter").attr('data-hidden')){
this.header.children().eq(k).find(".ms-sortarrowdown-iconouter").css("display","inline-block")
} else {
this.header.children().eq(k).find(".ms-sortarrowdown-iconouter").css("display","none")
}
}
*/
} else {
this.sticky = this.list.closest("div").find(".sticky");
}
}

//update stickies when grouped views are expanded or collapsed
this.list.children("tbody[id^='titl']").find(".ms-gb a").bind('click.stickyHeaders',{elem:this},function (event) {
var elem = event.data.elem
elem.widthChange = true
interval = setInterval(function(){
if($("#tbod" + $(event.target).closest("tbody").attr("id").substr(4) + "_").attr("isloaded") == "true"){
elem.update("expandCollapse");
clearInterval(interval);
}  
},1)
});
});
$(container.lists).each(function(){this.update("standard")})
}

(function () {
$("<div/>", {html: '&shy;<style>.sticky .ms-core-menu-box {top: auto !important; left: auto !important;}</style>'}).appendTo("body");
})();
}

No comments:

Post a Comment