Forum - Multi-Dialog-Assistent für die Iconbar

<div onclick="insertLinkTag()" class="xob_icon_cont multiTag_false"><img class="xob_hassub" title="[url][/url]" alt="[url][/url]" class="xob_icon" src="//img.homepagemodules.de/ds/static/gaia/link.png"></div>
<div onclick="insertMyLinkTag()" class="xob_icon_cont multiTag_true"><img class="xob_hassub" title="[url][/url]" alt="[url][/url]" class="xob_icon" src="//img.homepagemodules.de/ds/static/gaia/link.png"></div>
 

<div onclick="insertVideoTag()" class="xob_icon_cont multiTag_false"><img class="xob_hassub" alt="[video][/video]" title="[video][/video]" src="//img.homepagemodules.de/ds/static/gaia/movie.png"></div>
<div onclick="insertMyVideoTag()" class="xob_icon_cont multiTag_true"><img class="xob_hassub" alt="[video][/video]" title="[video][/video]" src="//img.homepagemodules.de/ds/static/gaia/movie.png"></div>
 

<div onclick="xob_insert('[img]','[/img]')" class="xob_icon_cont multiTag_false"><img alt="[img][/img]" title="[img][/img]" class="xob_icon" src="https://img.homepagemodules.de/ds/static/gaia/picture.png" ></div>
<div onclick="insertMyIMGTag()" class="xob_icon_cont multiTag_true"><img class="xob_hassub" title="[img][/img]" alt="[img][/img]" src="//img.homepagemodules.de/ds/static/gaia/picture.png"></div>
 

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
 
<script type='text/javascript' src='//code.jquery.com/ui/1.12.0/jquery-ui.min.js'></script> 
<script>
/* Gegenseitige Auslösung! */
window.addEventListener('load', function(){
$('.xob_hassub').click(function(){
$('#addMyVideo,#addMyLink,#addMyIMG').not(this).dialog("close");
});
});
 
/* Dialoge */
var dialog;
 
//Video
function insertMyVideoTag(){ 
if(!$("#addMyVideo").length){
dialog = $(`<div id="addMyVideo">
 
<ul class="myText">
<li>Geben Sie die Adresse für das Video ein, z.B.:
<br>"https://www.youtube.com/watch?v=bGJOmGL6mYM" 
<br>"https://www.youtube.com/embed/bGJOmGL6mYM" 
<br>"https://youtu.be/bGJOmGL6mYM"</li>
<li>Ändern Sie gegebenfalls die Größe des Videos!<br></li>
<li>Oder klicken Sie einfach auf "Video einfügen"!</li>
</ul>
 
<br><br>
Adresse:<br><input class="gotovideo" type="text" placeholder="https://......" value=""><br><br>
Breite: <input id="gotovideobreite" type="text" value="360px" style="text-align:center;width:50px;margin-right:10px;"> 
Höhe: <input id="gotovideohoehe" type="text" value="200px" style="text-align:center;width:50px;margin-right:10px;"> 
Autoplay: <input type="checkbox" class="checkbox" onclick=\'$(".myCheckbox_videoplay_toggle").toggle();\'> 
 
<br><br><br>
<input class="myCheckbox_videoplay_toggle" id="insertvideo" type="button" value="Video einfügen" onclick=\'xob_insert("[videobox="+$("#gotovideobreite").val()+","+$("#gotovideohoehe").val()+"]",""+$(".gotovideo").val()+"[/videobox]");$("#addMyVideo").dialog("close");\'>
<input style="display:none;" class="myCheckbox_videoplay_toggle" id="insertvideo" type="button" value="Video einfügen" onclick=\'xob_insert("[videobox="+$("#gotovideobreite").val()+","+$("#gotovideohoehe").val()+"]",""+$(".gotovideo").val()+"?autoplay=1&mute=1[/videobox]");$("#addMyVideo").dialog("close");\'> 
<input type="button" value="Abbrechen" onclick=\'$("#addMyVideo").dialog("close");\'>
 
<br><br></div>`).appendTo("body").dialog({title:"Video einbinden",resizable: false,});
} else{
$("#addMyVideo").dialog("open");
} 
}
 
//URL
function insertMyLinkTag(){ 
if(!$("#addMyLink").length){
dialog = $(`<div id="addMyLink">
 
<ul class="myText">
<li>Geben Sie die URL des Links ein.
<br>z.B.: "https://www.hilfe-tricks-tipps.de"</li>
<li>Geben Sie einen Namen oder eine Grafik ein.
<br>z.B.: "Forum" oder "[smile]"</li>
</ul>
 
<br><br>
URL:<br><input id="gotourl" type="url" placeholder="https://www......" value=""><br><br>
Name:<br><input id="gototext" type="text" value="Forum">
 
<br><br><br>
<input type="button" value="Link einbinden" onclick=\'xob_insert("[url=",""+$("#gotourl").val()+"]"+$("#gototext").val()+"[/url]");$("#addMyLink").dialog("close");\'> <input type="button" value="Abbrechen" onclick=\'$("#addMyLink").dialog("close");\'>
 
<br><br></div>`).appendTo("body").dialog({title:"Link einbinden",resizable: false});
} else{
$("#addMyLink").dialog("open");
} 
} 
 
//Bild
function insertMyIMGTag(){ 
if(!$("#addMyIMG").length){
dialog = $(`<div id="addMyIMG">
 
<ul class="myText">
<li>Geben Sie die Bildadresse und die Bildbreite ein oder wenn notwendig, ein Bildbeschreibung.</li>
<li>Oder klicken Sie einfach auf "Bild einbinden"!</li>
</ul>
 
<br><br>
Bildadresse:<br><input id="gotoimg" type="url" placeholder="https://www......" value=""><br><br>
Bildbreite (auto, px, em, %):<br><input id="insertimg" type="text" value="300px"><br><br>
 
<span class="myCheckbox_modal_toggle"><input type="checkbox" class="checkbox" onclick=\'$(".myCheckbox_img_toggle").toggle();\'> Bildbeschreibung</span>
<span class="myCheckbox_modal_toggle" style="display:none;"><input type="checkbox" class="checkbox" onclick=\'$(".myCheckbox_img_mo_toggle").toggle();\'> Bildbeschreibung</span> &nbsp;&nbsp;&nbsp;
 
<input type="checkbox" class="checkbox" onclick=\'$(".myCheckbox_modal_toggle").toggle();\'> Modal<br><br>
<span class="myCheckbox_modal_toggle"><span class="myCheckbox_img_toggle" style="display:none;">
<textarea id="gotobildtext" name="text" style="height:100px;"></textarea><br><br><br>
<input type="button" value="Bild einbinden" onclick=\'xob_insert("[unterschrift][img="+$("#insertimg").val()+"]",""+$("#gotoimg").val()+"[/img][beschreibung]"+$("#gotobildtext").val()+"[/beschreibung][/unterschrift]");$("#addMyIMG").dialog("close");\'>
</span>
 
<span class="myCheckbox_img_toggle"><br><input type="button" value="Bild einbinden" onclick=\'xob_insert("[img="+$("#insertimg").val()+"]",""+$("#gotoimg").val()+"[/img]");$("#addMyIMG").dialog("close");\'>
</span></span>
 
<span class="myCheckbox_modal_toggle" style="display:none;"><span class="myCheckbox_img_mo_toggle" style="display:none;">
<textarea id="gotobildtext_mo" name="text" style="height:100px;"></textarea><br><br><br>
<input type="button" value="Bild modal einbinden" onclick=\'xob_insert("[img_modal="+$("#insertimg").val()+" "+$("#gotobildtext_mo").val()+"]",""+$("#gotoimg").val()+"[/img]");$("#addMyIMG").dialog("close");\'></span>
<span class="myCheckbox_img_mo_toggle"><br>
<input type="button" value="Bild modal einbinden" onclick=\'xob_insert("[img_mod="+$("#insertimg").val()+"]",""+$("#gotoimg").val()+"[/img]");$("#addMyIMG").dialog("close");\'></span></span> 
<input type="button" value="Abbrechen" onclick=\'$("#addMyIMG").dialog("close");\'> 
 
<br><br></div>`).appendTo("body").dialog({title:"Bild einbinden",resizable: false});
} 
else{
$("#addMyIMG").dialog("open");
} 
}
</script>
 

<!-- Modal-Modus Bilder einfügen -->
<div id="myModal">
<div id="closeImg">&times;</div>
<img id="imgAll">
<div id="caption"></div>
</div>
 
<script>
$('.myImgModal').click(function(){
$('#myModal').show(500).click(function(){$('#myModal,#caption').hide(500);});
$('#imgAll').attr('src', $(this).attr('src'));
$('#caption').html($(this).attr('data')).show();
});
</script>
 
<script>
/* YouTube Konverter  Video einfügen*/
$(document).ready(function(){
$('.convert_youtube,.embed-responsive').html(function(index, link) {
return link.replace("/watch?v=", "/embed/").replace("youtu.be/" , "www.youtube.com/embed/");
});
});
</script>