Subversion Repositories DevTools

Rev

Rev 6625 | Rev 6641 | Go to most recent revision | Show entire file | Ignore whitespace | Details | Blame | Last modification | View Log | RSS feed

Rev 6625 Rev 6626
Line 291... Line 291...
291
        vixIframe = {};
291
        vixIframe = {};
292
    }
292
    }
293
}
293
}
294
 
294
 
295
//
295
//
-
 
296
//  Copy the HTML from an element into the clipboard
-
 
297
//  Highlight the element clipped
-
 
298
//
-
 
299
function vixEl2Clip( el ) {
-
 
300
    // Get the text and clean it up
-
 
301
    var html = $.trim(el.html());
-
 
302
 
-
 
303
    var breakToken = '_______break_______';
-
 
304
    var lineBreakedHtml = html.replace(/<br\s?\/?>/gi, breakToken).replace(/<p\.*?>(.*?)<\/p>/gi, breakToken + '$1' + breakToken);
-
 
305
    var text = $('<div>').html(lineBreakedHtml).text().replace(new RegExp(breakToken, 'g'), '\r\n');
-
 
306
    text = $.trim(text);
-
 
307
 
-
 
308
    // Copy to clipboard
-
 
309
    var $temp = $("<textarea>");
-
 
310
    $(el).append($temp);
-
 
311
    $temp.val(text).select();
-
 
312
    document.execCommand("copy");
-
 
313
    $temp.remove();
-
 
314
 
-
 
315
 
-
 
316
    // Highlight the text that has been selected
-
 
317
    el.effect("highlight", {}, 1000);
-
 
318
    // el.css('background-color', 'rgba(0, 102, 255, .5)');
-
 
319
    // el.animate({backgroundColor: 'transparent'}, '1000');
-
 
320
 
-
 
321
    return el;
-
 
322
}
-
 
323
 
-
 
324
//
296
//  Add copy to clipboard icon to every element with a class of 'clip'
325
//  Add copy to clipboard icon to every element with a class of 'clip'
297
//
326
//
298
$( document ).ready(function() {
327
$( document ).ready(function() {
299
    var myClipHandler = function (event)
328
    var myClipHandler = function (event) {
300
    {
-
 
301
        // Get element to clip
329
        // Get element to clip
302
        var el = $(this).closest('.clip').eq(0);
330
        vixEl2Clip($(this).find('.clipSel').eq(0));
303
 
-
 
304
        // Get the text and clean it up
-
 
305
        var text = $.trim(el.text());
-
 
306
            text = text.replace(/\s+/g, ' '); 
-
 
307
 
-
 
308
        // Copy to clipboard
-
 
309
        var $temp = $("<input>");
-
 
310
        $("body").append($temp);
-
 
311
        $temp.val(text).select();
-
 
312
        document.execCommand("copy");
-
 
313
        $temp.remove();
-
 
314
 
-
 
315
        // Highlight (the text that has been selected
-
 
316
        //  Appears to be no nice way to do this :(
-
 
317
        var doc = document, range, selection;    
-
 
318
        if (window.getSelection) {
-
 
319
            selection = window.getSelection();        
-
 
320
            range = document.createRange();
-
 
321
            range.selectNodeContents(el[0]);
-
 
322
            selection.removeAllRanges();
-
 
323
            selection.addRange(range);
-
 
324
            setTimeout(function(){selection.removeAllRanges();},500);
-
 
325
        } else { 
-
 
326
            range = document.body.createTextRange();
-
 
327
            range.moveToElementText(el[0]);
-
 
328
            range.select();
-
 
329
            setTimeout(function(){document.selection.empty();},500);
-
 
330
        }
-
 
331
    }
331
    }
332
 
332
 
-
 
333
    $('.clip').on("click", myClipHandler).on("dblclick", myClipHandler);
-
 
334
 
-
 
335
    // Add a clip image to every class of either .clip
333
    $('.clip').append(
336
    $('.clip').wrapInner('<span class=clipSel></span>').append(
334
        $('<img />')
337
        $('<img />')
335
            .attr({
338
            .attr({
336
                title : "Copy to clipboard",
339
                title : "Copy to clipboard",
337
                src : "images/CopyToClipboard.ico",
340
                src : "images/CopyToClipboard.ico",
338
                height : "12px",
341
                height : "12px",
339
                width : "12px",
342
                width : "12px",
340
                hspace : "0px",
343
                hspace : "0px",
341
                align : "absmiddle",
344
                align : "absmiddle",
342
                border : "0"
345
                border : "0"
343
                })
346
                })
344
            .on("click", myClipHandler)
-
 
345
        )
347
    );
-
 
348
});
-
 
349
 
-
 
350
// Copy data from a named element to clipboard
-
 
351
// Supports multi-line data with <p> and <br> in it
-
 
352
//      Elements have a class of clipElement and have an attribute of data-target=elementId
346
        .on("dblclick", myClipHandler);
353
$( document ).on('click', '.clipElement', function(event){
347
 
354
 
-
 
355
    var ename = $(this).data('target');
-
 
356
    var el = $('#' + ename);
-
 
357
    vixEl2Clip(el);
348
});
358
});
349
 
359
 
350
// Add a clipThis handler to each element with a clipThis class
360
// Add a clipThis handler to each element with a clipThis class
351
//      Will copy the text of the element to the clipboard
361
//      Will copy the text of the element to the clipboard
352
//      Add dynamically so that it will be invoked on dynamically created elements
362
//      Add dynamically so that it will be invoked on dynamically created elements
Line 361... Line 371...
361
$( document ).on('click', '.clipData', function(event){
371
$( document ).on('click', '.clipData', function(event){
362
    var txt = $(this).data('clip');
372
    var txt = $(this).data('clip');
363
    vixTextToClipBoard(txt, {note : "Copied to Clipboard", duration : 1000});
373
    vixTextToClipBoard(txt, {note : "Copied to Clipboard", duration : 1000});
364
});
374
});
365
 
375
 
366
// Copy data from a named element to clipboard
-
 
367
// Supports multi-line data with <p> and <br> in it
-
 
368
//      Elements have a class of clipElement and an attribute of data-target=elementId
-
 
369
$( document ).on('click', '.clipElement', function(event){
-
 
370
    var ename = $(this).data('target');
-
 
371
    var html = $('#' + ename).eq(0).html();
-
 
372
    var breakToken = '_______break_______';
-
 
373
    var lineBreakedHtml = html.replace(/<br\s?\/?>/gi, breakToken).replace(/<p\.*?>(.*?)<\/p>/gi, breakToken + '$1' + breakToken);
-
 
374
    var txt = $('<div>').html(lineBreakedHtml).text().replace(new RegExp(breakToken, 'g'), '\r\n');
-
 
375
 
-
 
376
    vixTextToClipBoard(txt.trim(), {note : "Copied to Clipboard", duration : 1000});
-
 
377
});
-
 
378
 
-
 
379
 
376
 
380
// Invoke mailto on elements with a suitable class
377
// Invoke mailto on elements with a suitable class
381
//  Elements with class mailto. and a data item of email
378
//  Elements with class mailto. and a data item of email
382
// Add dynamically so that it will be invoked on newly created elements
379
// Add dynamically so that it will be invoked on newly created elements
383
$( document ).on('click', '.mailto', function(event){
380
$( document ).on('click', '.mailto', function(event){
Line 433... Line 430...
433
            not_on_firefox_position : {my: 'center', at: 'top', of: event},
430
            not_on_firefox_position : {my: 'center', at: 'top', of: event},
434
            modal : false,
431
            modal : false,
435
            minHeight: 10, 
432
            minHeight: 10, 
436
            hide: { effect: 'fade', duration: opts.duration }
433
            hide: { effect: 'fade', duration: opts.duration }
437
            });
434
            });
438
 
-
 
439
    }
435
    }
440
}
436
}
441
 
437
 
442
 
438
 
443
 
439