Forum gratuit: forum de suport al utilizatorilor
Doriți să reacționați la acest mesaj? Creați un cont în câteva clickuri sau conectați-vă pentru a continua.

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 Vin Iun 12, 2020 9:52 pm

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 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 Mier Iun 17, 2020 4:31 am, editata de 2 ori


Forumul Forumurilor

Regulile Forumgratuit | Tutoriale |
FAQ | Recuperarea parolei pentru forum și unelte



*** Forumul de suport nu vă va solicita niciodată adresa de e-mail sau parola, așa că vă rugăm să nu le postați nicăieri! ***
Nu ofer suport prin PM!
Mihai

Mihai
Administrator
Administrator

Mesaje : 1580
Varsta : 26
Localizare : București, România
Data înscrierii : 25/09/2014
Mulțumiri : 103
Google Chrome Text și imagini ascunse ca în Discord Be_110

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 Sam Iun 13, 2020 4:33 am

Foarte bine!
Chanp

Chanp
Membru onorific
Membru onorific

Mesaje : 15
Varsta : 20
Localizare : Ceará, Brazil
Data înscrierii : 23/05/2020
Mulțumiri : 2
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 Dum Iun 14, 2020 7:06 pm

Da
Skouliki

Skouliki
Membru onorific
Membru onorific

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

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

Vezi subiectul anterior Vezi subiectul urmator Sus

- Subiecte similare

Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum