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

<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="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>
 

[videobox={{videobreite}},{{videohoehe}}]
 

...
 

[/videobox]
 

<span data-name="youtube" class="convert_youtube" data-modified-by-klaro="yes"><iframe data-name="youtube" allowfullscreen allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" width="{{videobreite}}" height="{{videohoehe}}" style="padding: 12px 6px; border: 1px groove rgb(86, 86, 86); border-radius: 4px; box-shadow: rgb(92, 92, 92) 3px 3px 3px;" frameborder="0" data-modified-by-klaro="yes" data-original-display src="" data-src="
 

...
 

"></iframe></span>
 

https://img.homepagemodules.de/ds/static/gaia/movie.png
 

Reihenfolge: 0
 

<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>
 

[img={{breite}}={{hoehe}}]
 

...
 

[/img]
 

<img style="width:{{breite}}; height:{{hoehe}}" src="
 

...
 

" border="0">
 

https://img.homepagemodules.de/ds/static/gaia/picture.png
 

Reihenfolge: 0
 

[img_mod={{breite}}={{hoehe}}]
 

...
 

[/img]
 

<dl class="bildmodal"><img class="myImgModal" style="width:{{breite}}; height:{{hoehe}}; border:0;object-fit: scale-down;"  src="
 

...
 

"></dl>
 

https://img.homepagemodules.de/ds/static/gaia/picture.png
 

Reihenfolge: 0
 

[img_modal={{breite}}={{hoehe}} {{data}}]
 

...
 

[/img]
 

<dl class="bildmodal"><img class="myImgModal" style="width:{{breite}}; height:{{hoehe}}; border:0;" data="<center><dl class='bildmodal'><dd>{{data}}</dl></center>" src="
 

...
 

"><p><dd>{{data}}</dd></p></dl>
 

https://img.homepagemodules.de/ds/static/gaia/picture.png
 

Reihenfolge: 0
 

<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&#246;sung! */
$('.xob_hassub').click(function(){
if(!$('.ppage_user,.ttreetalk').length){
$('.xob_subiconlist').hide(300);
 
/* Multidialog-Assistent */
$('#addMyVideo,#addMyLink,#addMyZitat,#addMySpoiler2,#addMyIMG,#addMyMail').not(this).dialog("close");
}else{
$('.xob_subiconlist').css('visibility','hidden').closest(this).find('.xob_subiconlist').css('visibility','visible');
};
});
var dialog;
 
//Video
function insertMyVideoTag(){ 
 
  if(!$("#addMyVideo").length){
    dialog = $(`
      <div id="addMyVideo">
        <div class="myCheckbox_videoplay_toggle">
          <div class="myText">
            <ul><li>Geben Sie die URL f&#252;r das Video ein.
            </li>
            <li>
              &#196;ndern Sie gegebenfalls die Gr&#246;&#223;e. <br>
              Oder klicken einfach auf "Video einbinden"!
            </li></ul>
          </div><br>
          Videoadresse:<br>
          <input class="gotovideo" placeholder="https://www.youtube.com/watch?v=" value="" type="text">
        </div><br><br>
 
        Breite: <input id="gotovideobreite" value="360px" type="text" style="width:60px;text-align:center;margin-right:5px;"> 
        H&#246;he: <input id="gotovideohoehe" value="auto" type="text" style="width:60px;text-align:center;margin-right:10px;">
 
        <input type="checkbox" class="checkbox" onclick=\'if($(this).is(":checked")){$("#gotovideobreite").val("315px"); $("#gotovideohoehe").val("560px");}else {$("#gotovideobreite").val("360px"); $("#gotovideohoehe").val("200px");} \'> Shorts<br> <br><br>
        <input class="myCheckbox_videoplay_toggle" id="insertvideo" type="button" value="Video einbinden" onclick=\'xob_insert("[videobox="+$("#gotovideobreite").val()+","+$("#gotovideohoehe").val()+"]",""+$(".gotovideo").val()+"[/videobox]");$("#addMyVideo").dialog("close");\'>
        <input type="button" value="Abbrechen" onclick=\'$("#addMyVideo").dialog("close");\'><br><br>
 
      </div>`).appendTo("body").dialog({title:"Videos & Shorts einbinden"});
 

 
  } else{
    $("#addMyVideo").dialog("open");
  } 
}
 

 
//URL
function insertMyLinkTag(){ 
  if(!$("#addMyLink").length){
    dialog = $(`
      <div id="addMyLink">
        <div class="myText">
          <ul><li>Geben Sie die URL des Links ein.</li>
          <li>Geben Sie einen Namen oder eine Grafik als Foren-Code ein.</li>
          </ul>
        </div><br>
 
        Linkadresse:<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("[domain_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'});
  } else{
    $("#addMyLink").dialog("open");
  } 
}
 

//Zitat
function insertMyZitatTag(){ 
//$('#addMyVideo,#addMyLink,#addMyZitat,#addMySpoiler2,#addMyIMG,#addMyMail').dialog("close");
if(!$("#addMyZitat").length){
dialog = $('<div id="addMyZitat"><div class="myText">Tragen Sie den Namen und das Zitat ein oder klicken einfach auf "Zitat einbinden"!</div><br>Name:<br><input id="gotozitat" type="text" value="Name"><br><br>Zitat:<br><textarea id="insertzitat" name="text" cols="35" rows="4"></textarea><br><br><br><input type="button" value="Zitat einbinden" onclick=\'xob_insert("[Zitat="+$("#gotozitat").val()+"]",""+$("#insertzitat").val()+"[/Zitat]");$("#addMyZitat").dialog("close");\'> <input type="button" value="Abbrechen" onclick=\'$("#addMyZitat").dialog("close");\'><br><br></div>').appendTo("body").dialog({title:"Zitat einbinden"});
} else{
$("#addMyZitat").dialog("open");
} 
}
//Spoiler2
function insertMySpoiler2Tag(){
if(!$("#addMySpoiler2").length){
dialog = $('<div id="addMySpoiler2"><div class="myText"><ul><li>Tragen Sie den Namen und den Inhalt ein.</li><li>Oder klicken Sie einfach auf "Spoiler einbinden"!</li></ul></div><br>Titel:<br><input id="gotospoiler2" type="text" value="Name"><br><br>Inhalt:<br><textarea id="insertspoiler2" name="text" cols="35" rows="4"></textarea><br><br><br><input type="button" value="Spoiler einbinden" onclick=\'xob_insert("[spoiler2="+$("#gotospoiler2").val()+"]",""+$("#insertspoiler2").val()+"[/spoiler2][style=display:block; color:#000000; font-size:10px; margin-left:10px;]Spoiler mit einem Klick &#246;ffnen und schlie&#223;en![/style]");$("#addMySpoiler2").dialog("close");\'> <input type="button" value="Abbrechen" onclick=\'$("#addMySpoiler2").dialog("close");\'><br><br></div>').appendTo("body").dialog({title:"Spoiler einbinden"});
} else{
$("#addMySpoiler2").dialog("open");
} 
}
 
//Bild
function insertMyIMGTag(){ 
  if(!$("#addMyIMG").length){
    dialog = $(`
      <div id="addMyIMG">
        <div class="myText">
          <ul>
            <li>Geben Sie die Bildadresse und die Bildbreite ein oder auch eine Bildbeschreibung.</li>
            <li>Oder klicken Sie einfach auf "Bild einbinden"!</li>
            <li>Einheiten f&#252;r H&#246;he und Breite: auto, px, em, %</li>
          </ul>
        </div><br>
 
        Bildadresse:<br>
        <input id="gotoimg" type="url" placeholder="https://www......" value=""><br /><br />
 
        Breite: <input id="insertimg" type="text" value="auto" style="width:60px;text-align:center;margin-right:5px;">  
        H&#246;he: <input id="insertimgHoehe" type="text" value="300px" style="width:60px;text-align:center;margin-right:10px;"><br /><br />
 
        <input type="checkbox" class="checkbox myCheckbox_modal_toggle" style="display:none;" disabled>
        <input type="checkbox" class="checkbox myCheckbox_modal_toggle" onclick=\'$(".myCheckbox_img_mo_toggle").toggle();\'> Bildbeschreibung &nbsp;&nbsp;&nbsp;
 
        <input type="checkbox" class="checkbox" checked onclick=\'$(".myCheckbox_modal_toggle").toggle();\'> Modal<br><br>
 
        <span class="myCheckbox_modal_toggle" style="display:none;"><br>
          <!--  <input type="button" value="Bild einbinden" onclick=\'xob_insert("[img="+$("#insertimg").val()+"]",""+$("#gotoimg").val()+"[/img]"); $("#addMyIMG").dialog("close");\'> -->
           <input type="button" value="Bild einbinden" onclick=\'xob_insert("[img="+$("#insertimg").val()+"="+$("#insertimgHoehe").val()+"]",""+$("#gotoimg").val()+"[/img]"); $("#addMyIMG").dialog("close");\'>
        </span>
 
        <span class="myCheckbox_modal_toggle">
          <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 einbinden" onclick=\'xob_insert("[img_modal="+$("#insertimg").val()+"="+$("#insertimgHoehe").val()+" "+$("#gotobildtext_mo").val()+"]",""+$("#gotoimg").val()+"[/img]"); $("#addMyIMG").dialog("close");\'>
          </span>
 
          <span class="myCheckbox_img_mo_toggle"><br>
            <input type="button" value="Bild einbinden" onclick=\'xob_insert("[img_mod="+$("#insertimg").val()+"="+$("#insertimgHoehe").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:"Bilder einbinden"});
  } 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*/
window.addEventListener('load', function ( ) {
  $('.convert_youtube, .embed-responsive').html(function(index, link) {
    return link.replace("/watch?v=", "/embed/").replace("youtu.be/" , "youtube.com/embed/").replace("/shorts/" , "/embed/").replace(/&.+/g, '">');
  });
}); 
</script>