Text și imagini ascunse ca în Discord

Acesta este un truc pentru a crea texte și imagini ascunse care sunt dezvăluite atunci când faceți clic pe ele, exact ca în Discord. Practic, este o alternativă la butonul „Spoiler”.
Este destul de simplu, deci funcționează în toate versiunile.

Textul poate fi format din mai multe linii și va arăta exact ca în Discord.

Exemplu:

Modul în care funcționează este prin definirea a două tipuri noi de clasă de tabel, care este aceeași metodă pe care acest forum o folosește pentru codul inline.

BBCode:

Desigur, doar cu asta, utilizatorii nu vor putea să-l folosească direct, așa că vă recomand să definiți un nou buton pentru SCEditor (a se vedea mai jos).
În mod alternativ, puteți să-l setați ca o scurtătură nouă în suplimentul Text Shortcuts.

1. CSS

Cod:

/* Hidden text format */
.hide-text {
  display: inline;
  top: -2px;
  position: relative;
}
 
.hide-text td {
  background: #202225;
  display: inline;
  color: transparent;
  cursor: pointer;
  padding: 1px 0;
  line-height: 150%;
  user-select: none;
  border-radius: 4px;
}
 
.hide-text:not(.unhidden) td:hover {
  background: #272a2f;
}
 
/* Hidden image format */
.hide-img td {
  display: inline-block;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  border-radius: 4px;
}
 
.hide-img img {
  filter: blur(30px);
}
 
/* Hidden image button */
.hide-button {
  background: #000;
  color: #fff;
  filter: opacity(0.6);
  position: relative;
  width: 90px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 100px;
  cursor: pointer;
}
 
.hide-button.hide-select {
  filter: opacity(1);
}
 
/* Unhidden effects (on click) */
.hide-text.unhidden td { color: inherit; cursor: text; user-select: inherit; }
.hide-img.unhidden img { filter: blur(0); }
.hide-img.unhidden td { cursor: inherit; user-select: inherit; }
.hide-img.unhidden .hide-button { visibility: hidden; }

2. Javascript

Adăugați acest lucru pe lista Javascript, cu opțiunea de poziție „În topicuri”.

Cod:

/*
* -- Discord-like Hidden Add-on --
* Version: 1.0 EN (2020-06-11)
* Author: Wecoc
* Description: Allows to make hidden texts and images that are revealed when you click them.
* BBCode examples:
*  [table class="hide-text"][tr][td]Hidden text[/td][/tr][/table]
*  [table class="hide-img"][tr][td][img]IMAGE LINK[/img][/td][/tr][/table]
*/
 
$(function() {
  // Reveal hidden text/image on click
  $('.hide-text').on("click", function() { $(this).addClass("unhidden"); });
  $('.hide-img').on("click",  function() { $(this).addClass("unhidden"); });
  // Create Spoiler button
  $('.hide-img').filter(function(){
    $(this).append('<div class="hide-button">SPOILER</div>');
  });
  // Change the Spoiler button state when hovering the image
  $('.hide-img').on("mouseover", function() {
    var button = document.querySelector('.hide-button', this);
    $(button).addClass("hide-select");
  });
  $('.hide-img').on("mouseout", function() {
    var button = document.querySelector('.hide-button', this);
    $(button).removeClass("hide-select");
  });
  // Move the Spoiler button to the center of the image
  $('.hide-button').filter(function(){
    var button_w = this.clientWidth, button_h = this.clientHeight;
    var img = $(this).parent()[0];
    var img_w = img.clientWidth, img_h = img.clientHeight;
    this.style.top = "-" + (img_h / 2) + "px";
    this.style.left = ((img_w / 2) - (button_w / 2)) + "px";
  });
});

Button Scedittor (opțional)

Cod:

/* SCeditor Button for Hidden text/image */
 
$(function() {
  if ($.sceditor) {
    $.sceditor.command.set('hidden', {
      exec: function() {
        var textarea = fa_mentionner.textarea;
        var selection = textarea.value.slice(textarea.selectionStart, textarea.selectionEnd);
        if (selection.match(/^\[img\]/)){
          this.insert('[table class="hide-img"][tr][td]', '[/td][/tr][/table]');
        } else {
          this.insert('[table class="hide-text"][tr][td]', '[/td][/tr][/table]');
        }
      },
      txtExec: function() {
        var textarea = fa_mentionner.textarea;
        var selection = textarea.value.slice(textarea.selectionStart, textarea.selectionEnd);
        if (selection.match(/^\[img\]/)){
          this.insert('[table class="hide-img"][tr][td]', '[/td][/tr][/table]');
        } else {
          this.insert('[table class="hide-text"][tr][td]', '[/td][/tr][/table]');
        }
      },
      tooltip: 'Hide text/image'
    });
    toolbar = toolbar.replace(/strike/, 'strike,hidden')
  }
});

Poziția butonului:

Și în final, puteți schimba pictograma butonului adăugând acest lucru pe CSS:

Cod:

.sceditor-button-hidden div {
  background-image: url(https://i.postimg.cc/nrRGNczN/hidden-button.png);
}

Sper că îți place

Scris de Wecoc
Topic original: Hidden text and images like in Discord
și tradus de @Mihai

Foarte bine!