web-dev-qa-db-fra.com

Comment désactiver la case à cocher lorsque la valeur de la zone de liste change dans tinymce

Je crée une popup personnalisée dans tinyMCE pour WordPress, afin d'insérer des shortcodes vidéo. J'ai donc une liste de sites Web (YouTube, Vimeo, Vine et autres) dans une liste déroulante, ainsi qu'une case à cocher permettant à l'utilisateur de décider d'ajouter la particule. "lecture automatique".

Ceci est une version simplifiée du script (la section vidéo):

{
    text: 'Vídeos',
        onclick: function() {       
            editor.windowManager.open({
                title: 'Vídeo Incorporado',
                body: [
                    {type: 'checkbox',
                    name: 'video_autoplay',
                    label: 'Executar automaticamente?',
                    text: 'Sim',
                    classes: 'checkclass'
                    },

                    {type: 'listbox',   
                    name: 'video_site',
                    label: 'Escolha o site de origem',
                    'values': [
                        {text: 'YouTube', value: 'youtube'},
                        {text: 'Vimeo', value: 'vimeo'},
                        {text: 'Vine', value: 'Vine'},
                        ],
                    },

                    {type: 'textbox',
                    name: 'video_id',
                    label: 'ID do vídeo',
                    value: ''
                        },
                    ],
        onsubmit: function( e ) {
        editor.insertContent('[video origem="' + e.data.video_site + '" id="' + e.data.video_id +'" autoplay="'+ e.data.video_autoplay +'"]');
            }
        });
    } 
},

... et c'est la fenêtre qu'il génère (la seule différence est la position de la case à cocher, celle que j'ai placée en premier lieu après cette impression:

enter image description here

Je peux donc obtenir un shortcode comme [video origem=youtube id=XXXXXX autoplay=true]

Mais autoplay param ne fonctionne pas sur tous les sites vidéo, je dois désactiver la case à cocher lorsque, par exemple, Vine est sélectionné. Comment désactiver ou masquer la case à cocher lorsque ma liste est sur l'option "Vine" ou "Vimeo", et la réactiver si l'option revient à YouTube?

Qu'as-tu essayé?

Peut-être que je suis sur la mauvaise voie, mais à présent, je sais qu'une fonction peut être utilisée avec les paramètres de la listbox, alors ceci ...

   {
    type: 'listbox',    
    name: 'video_site',
    onselect: function( ) {
        if (this.value() == 'Vine') {
            alert("Value is "+this.value());
        }
    },
    label: 'Escolha o site de origem',
    'values': [
        {text: 'YouTube', value: 'youtube'},
        {text: 'Vimeo', value: 'vimeo'},
        {text: 'Vine', value: 'Vine'},
        ],
    },

... prendra la valeur de ma liste avec onselect. Mais je ne pouvais pas l'utiliser pour cibler et désactiver la case à cocher précédente, en utilisant à la fois:

$('input.mce-checkclass').prop('disabled',true);

et

$('input.mce-checkclass').attr('disabled',true);

Idem pour "aria-disabled" et ciblage 'input [name = video_autoplay]'. Une idée, s'il te plaît?

EDIT: le script fonctionne!

Comme suggéré par bonger, la fenêtre peut être chargée à partir d'une variable, il est donc facile de cibler n'importe quel élément. J'ai ajouté des setStyle pour réduire l'opacité des cases à cocher et des libellés lorsque les deux sont désactivés, car cela ne se produisait pas par défaut, du moins dans Chrome.

Le script final, fonctionnant comme il me faut:

{
    text: 'Videos',
    onclick: function() {   
        var win = editor.windowManager.open({
            title: 'Embed Video',
            body: [
                {type: 'checkbox',
                name: 'video_autoplay',
                label: 'Autoplay?',
                text: 'Yes',
                id: 'check-autoplay',
                },

                {type: 'listbox',   
                name: 'video_site',
                onselect: function( ) {
                    var autoplay = win.find('#video_autoplay');
                    if (this.value() == 'Vine') {
                        autoplay.disabled(true);
                        autoplay.value('');
                        tinyMCE.DOM.setStyle( 'check-autoplay-l','opacity', '.5');
                        tinyMCE.DOM.setStyle( 'check-autoplay','opacity', '.5');
                    } 
                    else {
                        autoplay.disabled(false);
                        tinyMCE.DOM.setStyle( 'check-autoplay','opacity', '1');     
                        tinyMCE.DOM.setStyle( 'check-autoplay-l','opacity', '1');
                    }   
                },
                label: 'Choose source',
                    'values': [
                        {text: 'YouTube', value: 'youtube'},
                        {text: 'Vimeo', value: 'vimeo'},
                        {text: 'Vine', value: 'Vine'},
                    ],
                },

                {type: 'textbox',
                name: 'video_id',
                label: 'Video ID',
                value: ''
                },
            ],

        onsubmit: function( e ) {
            editor.insertContent('[video source="' + e.data.video_site + '" id="' + e.data.video_id +'" autoplay="'+ e.data.video_autoplay +'"]');
        }
    });
}
},
jqueryshortcodetinymce
3
Daniel Lemes

En regardant à travers les plugins existants, la méthode standard pour y parvenir consiste à enregistrer la fenêtre contextuelle dans une variable win:

{
    text: 'Vídeos',
        onclick: function() {       
            var win = editor.windowManager.open({ //etc

Et utilisez ensuite win.find('#name') pour cibler le contrôle, par exemple:

{type: 'listbox',   
name: 'video_site',
onselect: function( ) {
    var autoplay = win.find('#video_autoplay');
    if (this.value() == 'Vine') {
        autoplay.disabled(true);
        autoplay.value('');
    } else {
        autoplay.disabled(false);
    }
},
0
bonger