Text și imagini ascunse ca în Discord

Vezi subiectul anterior Vezi subiectul urmator In jos

Text și imagini ascunse ca în Discord Empty Text și imagini ascunse ca în Discord

Mesaj Scris de Mihai 12.06.20 21:52

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:
Text și imagini ascunse ca în Discord Discord-example

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:
[table class="hide-text"​]​[tr​]​[td​]Hidden text​[​/td​]​[​/tr​]​[​/table​]
[table class="hide-img"​]​[tr​]​[td​​]​[img​](IMAGE LINK)​[/img​]​[​/td​]​[​/tr​]​[​/table​]

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:
L-am adăugat după butonul de atac, dar îl puteți adăuga după spoiler modificând linia 26 la aceasta:
Cod:
toolbar = toolbar.replace(/faspoiler/, 'faspoiler,hidden')

Puteți schimba, de asemenea, butonul spoilerului la unul nou:
Cod:
toolbar = toolbar.replace(/faspoiler/, 'hidden')

Ș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 Foarte fericit

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


Ultima editare efectuata de catre Mihai in 17.06.20 4:31, editata de 2 ori
Mihai

Mihai
Administrator
Administrator

Mesaje : 1444
Varsta : 23
Localizare : București, România
Data înscrierii : 25/09/2014
Mulțumiri : 85
Pachetul Premium Google Chrome phpBB3

http://fgsuport.forumgratuit.ro
Mihai a fost mulțumit de autorul acestui subiect.

Text și imagini ascunse ca în Discord Empty Re: Text și imagini ascunse ca în Discord

Mesaj Scris de Chanp 13.06.20 4:33

Foarte bine!
Chanp

Chanp
Membru onorific
Membru onorific

Mesaje : 15
Varsta : 16
Localizare : Ceará, Brazil
Data înscrierii : 23/05/2020
Mulțumiri : 2
Pachetul Gratuit Google Chrome AwesomeBB

https://2forum2.forumeiros.com/
Chanp a fost mulțumit de autorul acestui subiect.

Text și imagini ascunse ca în Discord Empty Re: Text și imagini ascunse ca în Discord

Mesaj Scris de Skouliki 14.06.20 19:06

Da
Skouliki

Skouliki
Membru onorific
Membru onorific

Mesaje : 150
Localizare : Greece
Data înscrierii : 16/09/2018
Mulțumiri : 9
Pachetul Gratuit Google Chrome punBB

http://iconskouliki.forumgreek.com
Skouliki a fost mulțumit de autorul acestui subiect.

Vezi subiectul anterior Vezi subiectul urmator Sus


Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum