2
I created a popup in the tinymce for Wordpress, for inserting shortcodes video on the page. When opening the window, it shows a listbox menu with various video source options (sites like Youtube, Vimeo, etc) and a checkbox, if checked, makes the video to be embedded with the option self-play.
A simplified version, for better understanding:
( function() {
tinymce.PluginManager.add( 'fb_test', function( editor, url ) {
editor.addButton( 'fb_test_button_key', {
type: 'listbox',
text: 'Shortcodes',
icon: false,
onselect: function(e) {
},
values: [
{
text: 'Vídeos',
onclick: function() {
editor.windowManager.open({
title: 'Vídeo Incorporado',
body: [
{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: '' },
{type: 'checkbox',
name: 'video_autoplay',
label: 'Executar automaticamente?',
text: 'Sim',
classes: 'checkclass' },
],
onsubmit: function( e ) {
editor.insertContent('[video origem="' + e.data.video_site + '" id="' + e.data.video_id + '" autoplay='+ e.data.video_autoplay +']'); }
});
}
}
]
});
});
})();
The shortcode will be something like [video id="XXXX" origem="YouTube" autoplay="true"].
The window stays like this:
This is the HTML of checkbox:
<div id="mceu_130" class="mce-checkclass mce-last mce-abs-layout-item" unselectable="on" aria-labelledby="mceu_130-l" tabindex="-1" role="checkbox" aria-checked="false" style="left: 213px; top: 0px; width: 187px; height: 19px;">
<i class="mce-ico mce-i-checkbox"></i>
<span id="mceu_130-al" class="mce-label">Sim</span>
</div>
HTML of listbox open:
<div id="mceu_139" class="mce-container mce-panel mce-floatpanel mce-menu mce-fixed mce-menu-align" hidefocus="1" tabindex="-1" role="application" style="border-width: 1px; z-index: 100102; left: 735.5px; top: 136.145835876465px; width: 185px;">
<div id="mceu_139-body" class="mce-container-body mce-stack-layout" role="menu" style="width: 185px;">
<div id="mceu_140" class="mce-menu-item mce-menu-item-normal mce-first mce-stack-layout-item" tabindex="-1" role="menuitem" aria-checked="false" aria-pressed="false"><i class="mce-ico mce-i-none"></i> <span id="mceu_140-text" class="mce-text">YouTube</span></div>
<div id="mceu_141" class="mce-menu-item mce-menu-item-normal mce-stack-layout-item" tabindex="-1" role="menuitem" aria-checked="false" aria-pressed="false"><i class="mce-ico mce-i-none"></i> <span id="mceu_141-text" class="mce-text">Vimeo</span></div>
<div id="mceu_153" class="mce-menu-item mce-menu-item-normal mce-last mce-stack-layout-item" tabindex="-1" role="menuitem" aria-checked="false" aria-pressed="false"><i class="mce-ico mce-i-none"></i> <span id="mceu_153-text" class="mce-text">Vine</span></div>
</div>
</div>
And this is the HTML of listbox with the Vine option selected:
<div id="mceu_131" class="mce-widget mce-btn mce-menubtn mce-listbox mce-last mce-abs-layout-item" tabindex="-1" aria-labelledby="mceu_131-l" role="button" aria-haspopup="true" style="left: 213px; top: 0px; width: 184.33333325386px; height: 28.3333332538605px;" aria-expanded="false">
<button id="mceu_131-open" role="presentation" type="button" tabindex="-1" style="height: 100%; width: 100%;">
<span>Vine</span> <i class="mce-caret"></i>
</button>
</div>
The problem is that not all video sites give the option self-play, then I need to, by changing the listbox for these sites, the checkbox disappear/be disabled. The most I could do was create a Alert warning that that site does not accept the parameter self-play, removing the attribute in shortcode final, but it’s quite gambiarra.
How to do to, by changing the listbox for "Vine", for example, disable the checkbox? And bring him back if the listbox back to another like Youtube?
Can you include the HTML this code generates? Inspect the DOM with the browser tools and see what the checkbox HTML looks like. And you can try
document.querySelector('[name="video_autoplay"]').disabled = true;– bfavaretto
The checkbox HTML:
<div id="mceu_137" class="mce-checai mce-last mce-abs-layout-item mce-checked" unselectable="on" aria-labelledby="mceu_137-l" tabindex="-1" role="checkbox" aria-checked="true" style="left: 213px; top: 0px; width: 187px; height: 19px;"><i class="mce-ico mce-i-checkbox"></i><span id="mceu_137-al" class="mce-label"></span></div>Includes a class in it, but I still can’t point to it when changing the listbox...– Daniel Lemes
The problem is intercepting the listbox change, disabling the checkbox, or both? If it involves changing the listbox, we need to see its html as well.
– bfavaretto
It’s disabling the checkbox once the listbox has value "Vine", and rehabilitating when it has value "youtube". This before confirming the shortcode, that is, intercept the change, and according to value, disable or not the checkbox. I will post the full tinymce code and the generated HTML.
– Daniel Lemes
@Daniellemes can [Edit] the question and join the HTML of that select where you choose
Vine? Then we can answer how to do it.– Sergio
Done. I can even get the box change with a function (onselect) on listbox:
if (this.value() == 'vine')and...$('input[type="checkbox"][name="video_autoplay"]').prop('disabled',true);...but it does not work and the menu does not collect when selecting Vine.– Daniel Lemes
Apparently this Tinymce-generated checkbox is not a real checkbox, which is probably why it doesn’t work.
– bfavaretto