/**
 * Captures any pasted data and sends it to method "receivedCopyPasteData" which has to be
 * defined on the component which uses this mixin
 */ import Vue from 'vue' ; import { debounce } from 'lodash' ; export const copyPaste = Vue . extend ( { data ( ) { return { copyPasteElementsGotCreated : false , } ; } , mounted ( ) { if ( this . copyPasteElementsGotCreated === true ) { return ; } this . copyPasteElementsGotCreated = true ; const style = document . createElement ( 'style' ) ; style . type = 'text/css' ; style . innerHTML = `
			.hidden-copy-paste {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 10px;
			height: 10px;
			display: block;
			font-size: 1px;
			z-index: -1;
			color: transparent;
			background: transparent;
			overflow: hidden;
			border: none;
			padding: 0;
			resize: none;
			outline: none;
			-webkit-user-select: text;
			user-select: text;
		}
		` ; document . getElementsByTagName ( 'head' ) [ 0 ] . appendChild ( style ) ; const isSafari = navigator . appVersion . search ( 'Safari' ) !== - 1 && navigator . appVersion . search ( 'Chrome' ) === - 1 && navigator . appVersion . search ( 'CrMo' ) === - 1 && navigator . appVersion . search ( 'CriOS' ) === - 1 ; const isIe = ( navigator . userAgent . toLowerCase ( ) . indexOf ( 'msie' ) !== - 1 || navigator . userAgent . toLowerCase ( ) . indexOf ( 'trident' ) !== - 1 ) ; const hiddenInput = document . createElement ( 'input' ) ; hiddenInput . setAttribute ( 'type' , 'text' ) ; hiddenInput . setAttribute ( 'id' , 'hidden-input-copy-paste' ) ; hiddenInput . setAttribute ( 'class' , 'hidden-copy-paste' ) ; document . body . append ( hiddenInput ) ; let ieClipboardDiv = null ; if ( isIe ) { ieClipboardDiv = document . createElement ( 'div' ) ; ieClipboardDiv . setAttribute ( 'id' , 'hidden-ie-clipboard-copy-paste' ) ; ieClipboardDiv . setAttribute ( 'class' , 'hidden-copy-paste' ) ; ieClipboardDiv . setAttribute ( 'contenteditable' , 'true' ) ; document . body . append ( ieClipboardDiv ) ; document . addEventListener ( 'beforepaste' , ( ) => { if ( hiddenInput . is ( ':focus' ) ) { this . focusIeClipboardDiv ( ieClipboardDiv as HTMLDivElement ) ; } } , true ) ; } let userInput = '' ; const hiddenInputListener = ( text ) => { } ; hiddenInput . addEventListener ( 'input' , ( e ) => { const value = hiddenInput . value ; userInput += value ; hiddenInputListener ( userInput ) ; if ( isSafari ) { hiddenInput . focus ( ) ; setTimeout ( ( ) => { this . focusHiddenArea ( hiddenInput ) ; } , 0 ) ; } else { this . focusHiddenArea ( hiddenInput ) ; } } ) ; [ 'paste' ] . forEach ( ( event ) => { document . addEventListener ( event , debounce ( ( e ) => { const path = e . path || ( e . composedPath && e . composedPath ( ) ) ; for ( let index = 0 ; index < path . length ; index ++ ) { if ( path [ index ] . className && typeof path [ index ] . className === 'string' && ( path [ index ] . className . includes ( 'el-message-box' ) || path [ index ] . className . includes ( 'ignore-key-press' ) ) ) { return ; } } if ( ieClipboardDiv !== null ) { this . ieClipboardEvent ( event , ieClipboardDiv ) ; } else { this . standardClipboardEvent ( event , e as ClipboardEvent ) ; if ( ! document . activeElement || ( document . activeElement && [ 'textarea' , 'text' , 'email' , 'password' ] . indexOf ( document . activeElement . type ) === - 1 ) ) { this . focusHiddenArea ( hiddenInput ) ; e . preventDefault ( ) ; } } } , 1000 , { leading : true } ) ) ; } ) ; } , methods : { receivedCopyPasteData ( plainTextData , event ? ) { } , standardClipboardEvent ( clipboardEventName , event ) { const clipboardData = event . clipboardData ; if ( clipboardData !== null && clipboardEventName === 'paste' ) { const clipboardText = clipboardData . getData ( 'text/plain' ) ; this . receivedCopyPasteData ( clipboardText , event ) ; } } , ieClipboardEvent ( clipboardEventName , ieClipboardDiv ) { const clipboardData = window . clipboardData ; if ( clipboardEventName === 'paste' ) { const clipboardText = clipboardData . getData ( 'Text' ) ; ieClipboardDiv . empty ( ) ; this . receivedCopyPasteData ( clipboardText ) ; } } , focusIeClipboardDiv ( ieClipboardDiv ) { ieClipboardDiv . focus ( ) ; const range = document . createRange ( ) ; range . selectNodeContents ( ( ieClipboardDiv . get ( 0 ) ) ) ; const selection = window . getSelection ( ) ; if ( selection !== null ) { selection . removeAllRanges ( ) ; selection . addRange ( range ) ; } } , focusHiddenArea ( hiddenInput ) { hiddenInput . value = ' ' ; hiddenInput . focus ( ) ; hiddenInput . select ( ) ; } , /**
         * Copies given data to clipboard
         */ copyToClipboard ( value ) { const element = document . createElement ( 'textarea' ) ; element . value = value ; element . setAttribute ( 'readonly' , '' ) ; element . style . position = 'absolute' ; element . style . left = '-9999px' ; document . body . appendChild ( element ) ; const selection = document . getSelection ( ) ; if ( selection === null ) { return ; } const selected = selection . rangeCount > 0 ? selection . getRangeAt ( 0 ) : false ; element . select ( ) ; document . execCommand ( 'copy' ) ; document . body . removeChild ( element ) ; if ( selected ) { selection . removeAllRanges ( ) ; selection . addRange ( selected ) ; } } , } , } ) ;