MindTouch Community Portal
Logged in: Logged in as: Log in
Register
Search:
Page last modified 14:03, 27 Feb 2010 by arnec
MindTouch Community Portal > MindTouch Community Portal > Knowledge Base > Showing File Descriptions for file links
Page Notifications Off
Was this page helpful?

Showing File Descriptions for file links

     Table of Contents

    1. 1. Introduction
    2. 2. History
    3. 3. Requirements
    4. 4. How do I install it?
    5. 5. A quick note about the examples on this page
    6. 6. How do I use it?
    7. 7. Arguments
    8. 8. Examples
    9. 9. Reference(s)
    10. 10. Template/Extension Source Code
    11. 11. Disclaimers
    		 This Page was viewed: 4368 Times

     

    Introduction

     This template was created to change the hover text of a linked file to the file description.  I simply assign the title attribute of the link to ensure maximum browser compatibility.  All discussion of this template should be directed to this forum thread.

    History

    Version Date Author Description
    2.1 11/20/2009 rberinger Added a few adjustments to account for the bottom of the screen and very large file descriptions
    2.0 11/09/2009 rberinger Rewrote code to be cleaner.  Also added ability for tool tip to show left or right depending on parent edges
    1.2 10/28/2009 rberinger Added custom tooltips if desired
    1.1 10/08/2009 rberinger  Files are no longer required to be on the same page as the link.
     1.0 10/07/2009  rberinger  Initial Release

    Requirements

    • This template has only been tested on MindTouch Core (9.02)
    • jQuery Extension.

    How do I install it?

    1. Create a template, call it "Template:TemplateName" (or rename as you desire).  You must have UNSAFECONTENT permission for this to work.
    2. Create a "DekiScript" block on the template page (use the "Style" menu in the editor")
    3. Copy the code from the end of this page and paste it into the DekiScript block.  To copy, click "expand source", then mouse over the top right corner of the source code, and click the "view source" button.  This will pop up a window with the source code.  Select all, then copy to clipboard.
    4. Make sure there isn't an extra blank paragraph after the DekiScript block! Do this every time you edit!!!  
    5. Save.

     

    A quick note about the examples on this page

    For all the examples on this page, the code is shown before the working example.  The code is shown with the syntax extension, and looks like this:

    FileLinkDescriptions();

    This means that the actual code on the page should be enclosed in a DekiScript block.  If you want to copy the code from this page, then use the same procedure as described in steps 2-4 above. 

    How do I use it?

    Just insert the template on a page with file links using the Curly Braces notation {{}} or inside a DekiScript Block.  Currently the Linked files must be attached to the same page they are linked on.

    Arguments

    Name
    		 Type
    		 Default
    		 Description
     class str N/A  A custom class to give the tool tips so you can control to look.
     parent str #pageText  ID or Class of the parent container to mark screen boundries
     width str auto Max-Width of tool tip.  This will cause words to wrap if needed.  Auto will automatically be converted to 95% of parent container.  If a number is passed in it sets the percentage of the parent window to use.

    Examples

     

    Here are a few links to file attached to this page:

    WebSiteAnatomy.pdf

    css-cheat-sheet-v2.pdf

    jQuery1.2.cheatsheet.v1.0.pdf

     

    This should be a link to a file on an entirely different page.

    dotguide.pdf

     

    When you hover over the links a custom tool tip should display the Description of the file if it has one.

    {{FileLinkDescriptions{width: 80}; }}
     

     

    Reference(s)

    See this forum thread for discussion. 

     

    Template/Extension Source Code

    /* 
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>

     

    Disclaimers

    None.

    Was this page helpful?
    Tag page
    What links here

    Files 3

    Attach file or image
    FileVersionSizeModified 
    You must login to post a comment.
    MindTouch Social Knowledge Base

    Copyright © 2011 MindTouch, Inc. Powered by