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