/*--------------------------------------------------------------------------
	           BOUTON COPIER CODE POUR LE BLOC CODE DE WORDPRESS
---------------------------------------------------------------------------*/

/*
Ce script permet de créer et positionner en haut et droite du bloc code
un bouton d'action qui permet de copier dans le presse papier le code
affiché a l'intérieur du bloc code.
Lorsqu'on clique le texte du bouton passe de Copy Code à Copied
puis revient au bout de 3s à Copy Code.

sur mobile:
Ce bouton est masqué par défaut, apparait lorqu'on touche
l'intérieur du bloc code,disparait lorsqu'on touche 
a l'extérieur du bloc code.
*/

// i18n prise en charge de l'internationalisation soit la traduction du plugin
// déstructuration uniquement de la fonction __ de l'objet global wp.i18n
// on obtiend ainsi la Réference __  pour la traduction des chaines texte selon le text domain */
const { __ } = wp.i18n;

jQuery(document).ready(function($) {
	
    $('.wp-block-code').each(function() {
		
        var codeBlock = $(this);
        var code = codeBlock.find('code');
        var button = $('<button>' + __('Copy Code', 'editor-custom-color-palette') + '</button>');
        
        button.css({
            'position': 'absolute',
            'top': '0',
            'right': '0',
            'margin': '8px',
            'padding': '4px 8px',
            'font-size': '12px',
            'background-color': '#1E5B99',
            'color': '#fff',
            'border': 'none',
            'border-radius': '4px',
            'cursor': 'pointer',
            'transition': 'all 0.2s ease-in-out',
        });

        button.hover(function() {
			/* lorsqu'on survole la couleur de fond est plus claire */
            button.css('background-color', '#1d8ab3');
        }, function() {
			/* lorsqu'on quitte le survol on revient a la couleur foncé d'origine */
            button.css('background-color', '#1E5B99');
        });

        button.click(function() {
			
            var range = document.createRange();
            range.selectNode(code.get(0));
            window.getSelection().addRange(range);
            document.execCommand('copy');
            window.getSelection().removeAllRanges();
			
			/* le texte du bouton est changé */
            button.text( __('Copied!', 'editor-custom-color-palette'));
            
			/* au clic la couleur de fond est plus claire */
			button.css({
                'background-color': '#1d8ab3',
                'color': '#fff'
            });
			
			/* 
			au bout de 3s la couleur de fond 
			revient a la couleur foncé d'origine, 
			le texte revient a celui d'origine
			*/
            setTimeout(function() {
                button.text( __('Copy Code', 'editor-custom-color-palette'));
                button.css({
                    'background-color': '#1E5B99',
                    'color': '#fff'
                });
            }, 3000);
			
        });

        codeBlock.css('position', 'relative');
        codeBlock.prepend(button);

        /* 
		Événement tactile pour afficher le bouton 
		au toucher a l'intérieur du bloc code
		*/
        codeBlock.on('touchstart', function() {
            button.css('display', 'block');
        });
		
    });

    /* 
	Événement tactile pour masquer le bouton 
	au toucher a l'extérieur du bloc code
	*/
    $(document).on('touchstart', function(e) {
        var target = $(e.target);
        if (!target.closest('.wp-block-code').length) {
            $('.wp-block-code button').css('display', 'none');
        }
    });

	/* requête média query */
	const mediaQueryList = window.matchMedia('(max-width: 767px)');

    /* 
	Appliquer le style spécifique aux mobiles
	on masque par défaut le bouton sur mobile
	*/
	if(mediaQueryList.matches) {
        $('.wp-block-code button').css('display', 'none');
    }

    $('.wp-block-code pre').css('color', '#fff');
	
});
