Tuesday, June 29, 2010

Jquery: List Items QuickView

 hoverImg = '/_layouts/images/OPENDB.GIF';
      hoverImgDescription = 'Hover mouse over this image to preview the metadata';
                              // The description text added to the top of the page.
                              // If left blank, no description is added to the top of the page.
      arrOfFieldsToShow = ['Title','Description']; // Leave blank to show all fields. To have only the content and not the label, use this format ['Title|0']
      prependHoverImageTo = ''; // The standard placement is "Title-field" for lists and "Name-field" for document library.
                                  // If used with multi line text with append, insert FieldInternalName of "append-field" here.



function getLoadedFields(){
  var res = {};
  $("#jLoadMe td.ms-formbody").each(function(){
      if($(this).html().indexOf('FieldInternalName="')<0) return;
      var start = $(this).html().indexOf('FieldInternalName="')+19;
      var stopp = $(this).html().indexOf('FieldType="')-7;
      var nm = $(this).html().substring(start,stopp);
      res[nm] = {'label':nm,'html':$(this).html()};
  });
  return res;
}

function jLoadMe(t,pX,pY,listBaseType) {//load content
if(listBaseType==0){
    var whatToLoad = " #part1";
}else if(listBaseType==1){
    var whatToLoad = " #onetIDListForm";
}
    $("#jLoadMe").load(t + whatToLoad, function() {
        if(arrOfFieldsToShow.length==0){
            $("#jLoadMe").css({'width':'590'});
            $("#jLoadMe h3").css({'font-size':'8pt'});
            $("#jLoadMe .ms-formtoolbar:first").hide();
            $("#jLoadMe table.ms-toolbar").hide();
            $("#jLoadMe .ms-ButtonHeightWidth").hide();
            var contentWidth = '590';
            var contentHeight = $("#jLoadMe").height();
        }else{
            $("#jLoadMe h3").css({'font-size':'8pt'});
            var contentWidth = '400';
            var selectedRow = '';
            $.each(arrOfFieldsToShow,function(idx,item){
                var split = item.split('|');
                var fieldTitle = split[0];
                var showTitle = split[1];
                jLoadMeFields = getLoadedFields();
               
               
                if(showTitle!=0){
                    selectedRow += "<b>" + jLoadMeFields[fieldTitle].label + "</b>" + " - ";
                }
                selectedRow += jLoadMeFields[fieldTitle].html + "</br>";
            });
            selectedRow = "<div style='width:" + contentWidth + "'>" + selectedRow + "</div>";




            //    if(showTitle!=0){
                //    selectedRow += "<div style='font-weight:bold;border-bottom:1px silver solid;'>" + jLoadMeFields[fieldTitle].label + "</div>";
            //    }
            //    selectedRow += "<div style='padding:0 0 5 3;margin-left:5;border-left:1px silver solid'>" + jLoadMeFields[fieldTitle].html + "</div>";
        //    });
        //    selectedRow = "<div style='width:" + contentWidth + "'>" + selectedRow + "</div>";
            $("#jLoadMe").html(selectedRow);
            var contentHeight = $("#jLoadMe").height();
        }
        // Get height and width of current window
        var winHeight = $(window).height();
        var winWidth = $(window).width();
        var winScroll = $(window).scrollTop();
        // Calculate the best position for the popup Y-axis
        if((winHeight - pY) < contentHeight){
            if((pY - winScroll) < contentHeight){
                pY = winScroll + 10
            }else{
                pY = (pY - contentHeight) - 30
            }
        }
        // Calculate the best position for the popup X-axis
        if((winWidth - pX) < contentWidth){
            pX = (pX - contentWidth) - 30;
        }
        // Show popup
        $("#jLoadMe")
            .css({'position':'absolute',
                'left':pX,
                'top':pY,
                'background-color':'f8f8ff',
                'border':'2px silver ridge',
                'padding':3})
            .show().mouseenter(function(){
                $(this).hide();
            });
    });
}

function initjLoadMe() { // Loop trough all elements and add hover function
isAppendField = false;
    $("div[id^='WebPartWPQ']").each(function(){
        var thisListCTX = $(this).find("table[ctxname]:first").attr('ctxname');
        if(thisListCTX!=undefined){
            thisListCTX = eval(thisListCTX);
            var listBaseType = thisListCTX.listBaseType;
            if(listBaseType==0){ // List
                if(prependHoverImageTo!=''){// Apend style field
                    whatToFind = "a[href$='SPBookmark_" + prependHoverImageTo + "']";
                    isAppendField = true;
                }else{
                    var whatToFind = "a[href*='DispForm.aspx'][target='_self']";
                }
            }else if(listBaseType==1){ // Document library
                var whatToFind = "td.ms-vb-title";
            }
        }else if($(this).find("a[href*='DispForm.aspx']").length>0){ // Catch calendar views
            var listBaseType = 0;
            var whatToFind = "a[href*='DispForm.aspx'][target='_self']";
        }

        $(this).find(whatToFind).each(function(){
            if($(this).parent().find(".mouseOverImg").length==0){
                if(listBaseType==0){
                    if(isAppendField){
                        var url = $(this).attr("href");
                        url = url.substring(0,url.indexOf('#'));
                    }else{
                        var url = $(this).attr("href");
                        if(url.indexOf('#')>-1) return;
                    }
                    //$(this).before("<a href='" + url + "'><img class='mouseOverImg' src='" + hoverImg + "' height='8' width='8' border='0'></a>&nbsp;");
                }else if(listBaseType==1){
                    // Get id of item from table id
                    var table = $(this).find('table:first');
                    var tableId = table.attr('id');
                    var url = eval(table.attr('ctxname')).displayFormUrl+"?ID=" + tableId;
                    //$(this).find('a').before("<a href='" + url + "'><img class='mouseOverImg' src='/_layouts/images/OPENDB.GIF' height='8' width='8' border='0'></a>&nbsp;&nbsp;");
                }
                // Hover function
                $(this).parent().hover(function(e){
                    posX = e.pageX + 10;
                    posY = e.pageY + 15;
                    jLoadMe(url,posX,posY,listBaseType)
                },
                function(){
                    $("#jLoadMe").html('').hide();
                });
            }
        });
    });
}

$(document).ready(function() {
    // Add description above ms-bodyareaframe
    //if(hoverImgDescription!=''){
    //    $("#onetidPageTitle").append("<div style='font-size:xx-small;float:right;margin:-12 0 0 0'><img src='" + hoverImg + "' height='8' width='8'>&nbsp;" + hoverImgDescription + "&nbsp;</div>");
    //}
    $(".ms-bodyareaframe").append("<div id='jLoadMe' style='display:none;'></div>");
    window.onerror = handleError; // needed for IE
    initjLoadMe();
});

function handleError() { // fn needed for IE
    return true;
}

// Attaches a call to the function to the "expand grouped elements function" for it to function in grouped listview's
function ExpGroupRenderData(htmlToRender, groupName, isLoaded){
    var tbody=document.getElementById("tbod"+groupName+"_");
    var wrapDiv=document.createElement("DIV");
    wrapDiv.innerHTML="<TABLE><TBODY id=\"tbod"+groupName+"_\" isLoaded=\""+isLoaded+"\">"+htmlToRender+"</TBODY></TABLE>";
    tbody.parentNode.replaceChild(wrapDiv.firstChild.firstChild,tbody);
initjLoadMe();
}

No comments: