Subversion Repositories DevTools

//  Vix specific Javascript for jquery use

//

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

//  Generate a confirmation dialog

//  Args:   text - Body of the message

//          parms - A simple object of options - see defaults

//                  Special: position of 'center' will place in center of visible screen.

//  Note: will return BEFORE the user makes a selection

//        Can call a function and/or a URL if confirmed

//        Can 'show' a progress element

//        See 'defaults' below for bits that can be modified

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

function vixConfirm(text, parms){

     var defaults = {

        resizable: true,

        height: 'auto',

        width : 'auto',

        modal: true,

        position: { my: "top", at: "top+100", of: window },

        title: "Confirm",

        icon: "images/i_warning.gif",

        url : null,

        ok : null,

        post : null,

        button : "Confirm",

        progress : "#ProgressBar",

        cancel : true,

        timeout : null,

        dlg : null

     };

     $.extend( defaults, parms);

     defaults.open = function() {

        $(this).siblings('.ui-dialog-buttonpane').find('button:eq(1)').focus(); 

        var markup = "";

        if (defaults.icon != null ) {

            markup += '<img src="'+ defaults.icon+ '" style="float:left; margin:0 7px 20px 0;">';

            }

        markup += text;

        $(this).html(markup);

         if ( defaults.timeout != null ) {

             setTimeout(function(){

                 defaults.dlg.dialog("close");

                }, defaults.timeout);

         }

     };

    defaults.close = function() {

        $(this).remove();

    };

    defaults.buttons = [];

    if ( defaults.button != null ) {

        defaults.buttons.push({

            text : defaults.button,

            click : function (){

                    if (defaults.ok != null ){

                        defaults.ok(defaults);

                    }

                    if ( defaults.progress != null) {

                        $(defaults.progress).show().css("visibility", "visible");    

                    }

                    if (defaults.url != null ) {

                        window.location.href = defaults.url;

                    }

                    if (defaults.post != null ) {

                        $('form[name="'+defaults.post+'"]').submit();    

                    }

                    $(this).dialog("close");

                }

        });

    }

    if(typeof(defaults.cancel) == 'boolean' && defaults.cancel) {

        defaults.buttons.push({

            text : 'Cancel',

            click : function (){

                $(this).dialog("close");

                }

        });

    }

     var dd = $( "<div>Confirm</div>" ).dialog(defaults);

     defaults.dlg = dd;

     // Once the dialog has been instantiated the autosize dimensions are known

     // and the dialog can be correctly positioned

     if (defaults.position == 'center')

     {

         dd.dialog("widget").center();

         //console.log("Center in Window");

     }

     else

     {

         dd.dialog("widget").position(defaults.position);

         //console.log("Original position");

     }

     // Return false incase this is used as an onClick

     return false;

}

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

// Compatability function

//      Confirm Deletion of an item

//      Assumes that the item is within an 'anchor' and that an href can be located

//      Uses VixConfirm to do the heavy lifting

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

function vixConfirmDelete (txt)

{

    var href = window.event.currentTarget.href;

    vixConfirm('Are you sure you want to delete '+ txt +'?', {url : href})

    return false;

}

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

//  Similar to 'alert', but uses the jquery dialog mechnaism

//  Note: will return BEFORE the user makes a selection

//  Returns a Defereed object that will be rejected when the dialog is closed.

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

function vixAlert(text){

     var dbo = $.Deferred();

     var dd = $( "<div>Alert</div>" ).dialog({

        resizable: true,

        height: 'auto',

        width : 'auto',

        modal: true,

        title:'Alert',

        position: { my: "top", at: "top+100", of: window },

        open: function() {

            $(this).html('<img src="images/i_critical.gif" style="float:left; margin:0 7px 20px 0;">' + text);

        },

        close : function() {

            $(this).remove();

            dbo.reject();

        },

        buttons: {

            "Ok": function() {

                $(this).dialog("close");

            }

        }

     });

     // Once the dialog has been instantiated the autosize dimensions are known

     // and the dialog can be correctly positioned

     // Note: Appears that we need to position it twice

     //       Once in the dialog creation, and once here

     dd.dialog("widget").position({ my: "top", at: "top+100", of: window });

     return dbo;

}

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

//  jQuery extension function

//  Position an element inthe center of the visible window. Not the document and not the window(viewport).

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

jQuery.fn.center = function () {

    //  Support many browsers

    var w = window.innerWidth  || document.documentElement.clientWidth  || document.body.clientWidth;

    var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

    this.css("position","fixed");

    this.css("top", Math.max(0,  ((h - $(this).outerHeight()) / 2) ) + "px");

    this.css("left", Math.max(0, ((w - $(this).outerWidth()) / 2) ) + "px");

    return this;

}

//--------- Support to open modal dialog in an iFrame

//  Example: <a class="vixIframeDialog" href="aaa.asp" title="Some Title">Link Text</a>

//

var vixIframe = {};

$(document).ready(function () {

    $('.vixIframeDialog').on('click', function(e){

		if (!vixIframe.parent) {

			e.preventDefault();

			vixIframe.parent = this;

			vixIframe.pagetitle = $(this).attr("title");

			if (! vixIframe.pagetitle) {

				vixIframe.pagetitle = $(this).text();

			}

			vixIframe.url = $(this).attr("href");

			vixIframeDialogCommon();

		}

	});

    //

    // Prevent (at least control) the user from navigating within the iframe

    // If this invocation is within an iFrame, then close the iFrame if

    // the user attempt to navigate away from the iFrame.

    //      This means that the iFrame cannot replace itself

    // 

    if (typeof parent.vixIframe.pagetitle !== 'undefined')

    {

        //console.log("DocumentReady within iframe");

        window.onunload = function(){

            //console.log("Unloading within iframe");

        }

    }

});

//

//	Callable function to instantiate an Iframe Dialog

//  Used in a replacement for MM_openBrWindow called MM_openVixIFrame

// 	Parameters:

// 		pthis	- The parent's context

//		url		- URL of the windoe content

//  	winName	- Title of the new Window

function vixIframeDialog2(pthis, url, winName)

{

	vixIframe.parent = pthis;

	vixIframe.pagetitle = winName;

	vixIframe.url = url;

	vixIframeDialogCommon();

}

function vixIframeDialogCommon()

{

	var iframe = $('<iframe onload="IframeLoaded(this);" id="iframe" style="border:0px; overflow: scroll;" src="' + vixIframe.url + '" width="100%" height="100%" ></iframe>');

	var $dialog = $('<div></div>').html(iframe);

	var $dialog2 = $dialog.dialog({

		autoOpen: true,

		modal: true,

		height : 'auto,', 

		width : 'auto',

		resizable: false,

		position : { my:'top', at: 'top+100', of : window },

		dialogClass: "rounded_box",

		title: 'Loading - ' + vixIframe.pagetitle,

		close: function(event, ui){

			//console.log('closing dialog');

			$(this).dialog("destroy");

			vixIframe = {};

			window.onbeforeunload = null;

			window.onunload = null;

			},

		// Prevent Chrome from adding scrollbars when dragged

		dragStop: function( event, ui ){

			vixIframe.IFrame.parentElement.style.overflow = "";

			},

		dragStart: function( event, ui ){

			vixIframe.IFrame.parentElement.style.overflow = "hidden";

			}

	});

	vixIframe.Dialog = $dialog;

	vixIframe.DialogProps = $dialog2;

	vixIframe.DialogWidget = $($dialog2).dialog('widget');

	return false;

}

//

//	Called when the iframe is loaded or reloaded

//

function IframeLoaded(iframe) {

	// Save to resize iframe

	vixIframe.IFrame = iframe;

	// Reset the title

	vixIframe.Dialog.dialog('option','title', vixIframe.pagetitle);

	// Resize the frame

	resizeIframe();

};

//

//	This function can be called from within the iframe to have it resized

//	Used if the iframe is too dynamic and extends itself from time to time

//

function resizeIframe()

{

    if (vixIframe.IFrame != null) {

		iframe.height = iframe.contentWindow.document.body.scrollHeight + "px";

		$(vixIframe.Dialog).height(iframe.height);

		//console.log ("Resize Iframe:",iframe.height );

		iframe.width = iframe.contentWindow.document.body.scrollWidth + "px";

		$(vixIframe.Dialog).width(iframe.width);

		//console.log ("Resize Iframe:",iframe.width );

		// Reposition the dialog

		$(vixIframe.DialogWidget).position($(vixIframe.DialogProps).dialog("option").position);

	}

}

//

//	This function can be called from with the iframe to close the Iframe

//	Often wired up to the cancel button

function closeIFrame()

{

    if (vixIframe.Dialog != null) {

        //console.log('closing iframe');

        vixIframe.Dialog.dialog('close');

        vixIframe = {};

    }

}

//

//  Add copy to clipboard icon to every element with a class of 'clip'

//

$( document ).ready(function() {

    var myClipHandler = function (event)

    {

        // Get element to clip

        var el = $(this).closest('.clip').eq(0);

        // Get the text and clean it up

        var text = $.trim(el.text());

            text = text.replace(/\s+/g, ' '); 

        // Copy to clipboard

        var $temp = $("<input>");

        $("body").append($temp);

        $temp.val(text).select();

        document.execCommand("copy");

        $temp.remove();

        // Highlight (the text that has been selected

        //  Appears to be no nice way to do this :(

        var doc = document, range, selection;    

        if (window.getSelection) {

            selection = window.getSelection();        

            range = document.createRange();

            range.selectNodeContents(el[0]);

            selection.removeAllRanges();

            selection.addRange(range);

            setTimeout(function(){selection.removeAllRanges();},500);

        } else { 

            range = document.body.createTextRange();

            range.moveToElementText(el[0]);

            range.select();

            setTimeout(function(){document.selection.empty();},500);

        }

    }

    $('.clip').append(

        $('<img />')

            .attr({

                title : "Copy to clipboard",

                src : "images/CopyToClipboard.ico",

                height : "12px",

                width : "12px",

                hspace : "0px",

                align : "absmiddle",

                border : "0"

                })

            .on("click", myClipHandler)

        )

        .on("dblclick", myClipHandler);

});

// Add a clipThis handler to each element with a clipThis class

//      Will copy the text of the element to the clipboard

//      Add dynamically so that it will be invoked on dynamically created elements

$( document ).on('click', '.clipThis', function(event){

    var txt = $(this).eq(0).text();

    vixTextToClipBoard(txt, {note : "Copied to Clipboard", duration : 1000});

});

// Copy data from element to clipboard

//      Elements have a class of clipData and an attribute of data-clip=xxx

//  Add dynamically so that it will be invoked on dynamically created elements

$( document ).on('click', '.clipData', function(event){

    var txt = $(this).data('clip');

    vixTextToClipBoard(txt, {note : "Copied to Clipboard", duration : 1000});

});

// Copy data from a named element to clipboard

// Supports multi-line data with <p> and <br> in it

//      Elements have a class of clipElement and an attribute of data-target=elementId

$( document ).on('click', '.clipElement', function(event){

    var ename = $(this).data('target');

    var html = $('#' + ename).eq(0).html();

    var breakToken = '_______break_______';

    var lineBreakedHtml = html.replace(/<br\s?\/?>/gi, breakToken).replace(/<p\.*?>(.*?)<\/p>/gi, breakToken + '$1' + breakToken);

    var txt = $('<div>').html(lineBreakedHtml).text().replace(new RegExp(breakToken, 'g'), '\r\n');

    vixTextToClipBoard(txt.trim(), {note : "Copied to Clipboard", duration : 1000});

});

// Invoke mailto on elements with a suitable class

//  Elements with class mailto. and a data item of email

// Add dynamically so that it will be invoked on newly created elements

$( document ).on('click', '.mailto', function(event){

    var email = $(this).data('email');

    var name =  $(this).data('name');

    var uname =  $(this).data('uname');

    if ( !name ) {

        name =  $(this).eq(0).text();

    }

    var menu = '<div class="rex_clm" >&nbsp;Select Operation</div>';

    if ( name ) {

        menu += '<div class="mmItem clipData" data-clip="' + name + '">Copy Name to Clipboard</div>';

    }

    if ( uname ) {

        menu += '<div class="mmItem clipData" data-clip="' + uname + '">Copy Login Name to Clipboard</div>';

    }

    menu += '<div class="mmItem clipData" data-clip="' + email + '">Copy Email Address to Clipboard</div>';

    menu += '<div onClick="window.open(\'mailto:' + email + '\', \'_blank\');" class="mmItem">Send Email</div>';

    showmenu(event,menu);

    event.stopImmediatePropagation();

    event.stopPropagation();

    return false;

});

// Copy text to clipboard

function vixTextToClipBoard(txt, options){

    if ( txt == null ) {

        return;

    }

    var opts  = {

        note : "Data copied to Clipboard",

        title: "Notification",

        notify : true,

        timeout : 100,

        duration: 2000,

    }

    $.extend(opts, options);

    var $temp = $("<textarea>");

    $("body").append($temp);

    $temp.val(txt).select();

    document.execCommand("copy");

    $temp.remove();

    if ( opts.notify ) {

        vixConfirm(opts.note, {

            title: opts.title,

            icon : "images/i_info.png", 

            cancel: false, 

            button: null,

            timeout : opts.timeout,

            not_on_firefox_position : {my: 'center', at: 'top', of: event},

            modal : false,

            minHeight: 10, 

            hide: { effect: 'fade', duration: opts.duration }

            });

    }

}