I created a popup in tinymce for WordPress, for inserting shortcodes on the page. When you open the window, it shows a menu listbox with several video source options (sites like YouTube, Vimeo, etc.) and a checkbox , if checked, makes the video autoplay option.
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 generated will be something like [video id="XXXX" origem="YouTube" autoplay="true"] .
The window looks like this:
ThisistheHTMLofthecheckbox:
<divid="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 the listbox opened:
<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 the 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 autoplay option, so I need to change the listbox to these sites, the checkbox disappear / be disabled. The most I could do was create an alert warning that that site does not accept the autoplay parameter, removing the attribute in the shortcode , but it is well gambiarra .
How do I change the listbox to "Vine", for example, to disable the checkbox ? And bring it back if the listbox back to another one like YouTube?