Page last modified 06:35, 20 Nov 2009 by rberinger
Template:FileLinkDescriptions

No headers
/* 
AUTHOR: rberinger

PURPOSE: To assign tool tips containing the description to links of attachements within the MindTouch Installation.
VERSION: 2.1

ARGUMENTS:
    $class = The class that controls to look of the tip box.  
            TIP: You can setup several custom style in the style block 
                 below and just identify with this parameter.
    
    $parent = This is the main parent container (For fiesta its div.pageContentFrame). This is the 
              container that sets the boundries for the tooltips to wrap left or right.

    $width = Maximum width for the tool tip box.  This should allow your text to wrap if very long.
             NOTE:  Should at least be wide enough to accomodate your longest words for the wrapping to look right.
*/

var tbclass = ($class ?? $1 ?? 'tipBox');
var parentContainer = ($parent ?? $2 ?? '#pageText');
var maxwidth = ($width ?? $3 ?? 'auto');


var siteapi = site.api;

// <div id="tipshere" class=(tbclass)></div>

<html><head>
<script type="text/javascript">"
var pcontainerRight = '';
var pcontainerLeft = '';
var pcontainerBottom = '';
var parentCntr = "..json.emit(parentContainer)..";
var tipclass = "..json.emit(tbclass)..";

$(document).ready(function() {
    // Add our tip container to the Parent Container
    $(parentCntr).append('<div id=\"tipshere\" class=\"' + tipclass + '\"></div>');

    // Start the build the Site File API url
    var fileapi = "..json.emit(siteapi).." + '/files/';

        // Find all Anchor tags on this page that originated from within the site
        $('a[href^=' + fileapi + ']').each(function() {

            // Grab the url to the file
            var fileuri = $(this).attr('href');
            $(this).addClass('tipify');

            // Parse the File ID out of the url
            var TheFileID = fileuri.replace(fileapi, '');
            var myIdx = TheFileID.indexOf('/');
            TheFileID = TheFileID.substr(0,myIdx);

            // Do an ajax call to the file and get the description
            // This function will also set the title attribute for this anchor
            GetFileDescription($(this), fileapi + TheFileID);
        });

});

$('body').ready(function() {
    var maxwidth = "..json.emit(maxwidth)..";
    var theMaxWidth = 'auto';

        // This should help keep the tipbox within the confines of the parent Container and allow us to 
        // See all of it reguardless of text length (within reason of course).
        if(maxwidth == 'auto') {
            // Here we are going to set the max width to half of our parent container.
            theMaxWidth = ( (95 / 100) * parseInt($(parentCntr).css('width')) ) ;
        } else {
            theMaxWidth = ( (parseInt(maxwidth) / 100) * parseInt($(parentCntr).css('width')) );
        }
        $('#tipshere').css({'position':'absolute','display':'none', 'max-width':theMaxWidth});


    $('#tipshere').css({'position':'absolute','display':'none' });

    // We likely only need to get this once.  But may need to move to mousemove function if window resizeing is and issue.
        pcontainerRight = $(parentCntr).width() + $(parentCntr).position().left;
        pcontainerLeft = $(parentCntr).position().left;

    $('.tipify').mousemove(function(e) {

        //update the content
        var myTitle = $(this).attr('ttl');
        $('#tipshere').html('<span>' + myTitle + '</span>');

        // Get the width of the tipbox and add to the mouse position to determine where the right side really is
        var virtualWidth = e.pageX + GetTheWidth($('#tipshere'));

        var virtualHeight = e.pageY + GetTheHeight($('#tipshere'));
        var windowHeight = $(window).height();

        // Some variable to hold our calculated css values
        var leftSide='';
        var topSide='';

if(virtualWidth < pcontainerRight) {
    // On the Left
    leftSide = e.pageX;
} else if( ( e.pageX - GetTheWidth($('#tipshere')) ) < 0) {
    // Center it
    leftSide = ( e.pageX - GetTheWidth($('#tipshere')) /2 )
} else {
    // To the Right
    leftSide = ( e.pageX - GetTheWidth($('#tipshere')) )
}

        // position the box Left/Right accordingly
/*
        if(virtualWidth >= pcontainerRight) {
            leftSide = ( e.pageX - GetTheWidth($('#tipshere')) );
            if(leftSide < 0) {
                leftSide = ( e.pageX - GetTheWidth($('#tipshere')) /2 );
            }
        } else {
            leftSide = e.pageX;
        }
*/

        // position the box Up/Down accordingly
        if(virtualHeight >= windowHeight) {
            topSide = ((e.pageY - 16) - GetTheHeight($('#tipshere')));
        } else {
            topSide = (e.pageY + 16);
        }

        // Put our calculated CSS into effect
         $('#tipshere').css({'left': leftSide ,'display':'block', 'top': topSide });

    });

    $('.tipify').mouseout(function(e) {
        $('#tipshere').css({'display':'none'});
    });

});

function GetTheWidth(el){
    var ttlWidth = el.width();
    ttlWidth += parseInt(el.css('padding-left'), 10) + parseInt(el.css('padding-right'), 10); //Total Padding Width
    ttlWidth += parseInt(el.css('margin-left'), 10) + parseInt(el.css('margin-right'), 10); //Total Margin Width
    ttlWidth += parseInt(el.css('borderLeftWidth'), 10) + parseInt(el.css('borderRightWidth'), 10); //Total Border Width
                    
    return ttlWidth;
}

function GetTheHeight(el){
    var ttlHeight = el.height();
    ttlHeight += parseInt(el.css('padding-top'), 10) + parseInt(el.css('padding-bottom'), 10); //Total Padding Width
    ttlHeight += parseInt(el.css('margin-top'), 10) + parseInt(el.css('margin-bottom'), 10); //Total Margin Width
    ttlHeight += parseInt(el.css('borderTopWidth'), 10) + parseInt(el.css('borderBottomWidth'), 10); //Total Border Width
                    
    return ttlHeight;
}

function GetFileDescription(anchor, fileapiurl) {
    fileapiurl = fileapiurl + '/description';

    Deki.$.ajax({
                type: 'GET',
                url: fileapiurl,
                dataType: 'text',
                success: function(data){
                        if(data=='') {data='No Description'}
                        $(anchor).attr('ttl', data);
                        $(anchor).attr('title', '');

                }    
     });

}

"</script>

    <style type="text/css">"
		/******* DEFAULT TIPBOX *******/
		.tipBox{
			background: #f7fafb;
			border: 1px solid #ace4ff;
			font-size: 10px;
			padding: 3px;
                        height: auto;
		}
		/******* DEFAULT TIPBOX *******/        
    "</style>

</head></html>
Tag page
What links here
Files 0

Attach file or image
Images 0
No images to display in the gallery.
You must login to post a comment.
MindTouch Social Knowledge Base
Template:FileLinkDescriptions

Table of contents

Files 0

Table of contents

Login or Join Community

Template:FileLinkDescriptions

Table of contents

Files 0

Table of contents
