Adicionar um botão do Spotify no SCEditor

2 participantes

Ver o tópico anterior Ver o tópico seguinte Ir para baixo

Tópico resolvido Adicionar um botão do Spotify no SCEditor

Mensagem por Harleen 11.06.17 0:39

Detalhes da questão


Endereço do fórum: https://soulfulbrmusic.forumeiros.com/
Versão do fórum: ModernBB

Descrição


Olá pessoas, estou aqui de novo Envergonhado

A questão é, estou usando o código do tutorial, que por sinal é ótimo, poderia ser um botão padrão no editor... enfim, ele não está funcionado nos tópicos tipo blog, como podem ver aqui https://soulfulbrmusic.forumeiros.com/t89-

Já nos tópico normais funciona https://soulfulbrmusic.forumeiros.com/t90-

Gostaria se possível ter a possível adicional uma função para escolher o tamanho do player, como está no site do desenvolvedores http://prntscr.com/fic5qj

Desde já agradeço.


Última edição por Harleen em 11.06.17 2:50, editado 2 vez(es)
Harleen

Harleen
Super Membro

Membro desde : 09/07/2012
Mensagens : 1779
Pontos : 2373

https://antenadogames.forumeiros.com/

Ir para o topo Ir para baixo

Membro Entusiasta
  • 0

Tópico resolvido Re: Adicionar um botão do Spotify no SCEditor

Mensagem por Luiz 11.06.17 1:31

Olá,

Troque o código por:
Código:
/**
 * Adicione um botão do Spotify ao seu SCEditor.
 *
 * @author Luiz~
 * @author Kyo Panda
 *
 * @see <a href="http://ajuda.forumeiros.com/">Fórum dos Fóruns</a>
 * @licence MIT
 */
(function($) {
  'use strict';
 
  var faAtributes = {
    scBtn: [
      'class="sceditor-button sceditor-button-spotify" ',
      'data-sceditor-command="spotify" ',
      'unselectable="on" ',
      'title="Inserir playlist do spotify" ',
      'style="',
      'background-image: url(http://i.imgur.com/helTFAw.png)!important;',
      'background-size: 16px!important;',
      'background-position: center!important;',
      'background-repeat: no-repeat!important;',
      '"',
    ].join('\n')
  };
   
  $(document).on('ready', function () {
      var $sceditor = $("#text_editor_textarea");
      
      if (!$sceditor.length) {
        return;
      }
 
      // [?] Criar os novos estilos:
      $([
        '<div class="sceditor-group fa-spotify-group">',
        '  <a ' + faAtributes.scBtn + '>',
        '    <div unselectable="on" style="background-image: none!important;">Spotify</div>',
        '  </a>',
        '</div>',
      ].join('\n'))
        .on('click', function () {
          $('.sceditor-insertspotify').toggle();
        })
          .insertAfter('.sceditor-group:last')
      ;
 
      // [?] Colocar o Dropdown no <body>:
      $([
        '<div class="sceditor-dropdown sceditor-insertspotify">',
        '  <div>',
        '    <label for="fa-spotify-input">ID da Playlist (Opcional):</label>',
        '    <input id="fa-spotify-input" value="">',
        '  </div>',
        '  <div>',
        '    <input type="button" class="button" ' +
        '    id="fa-spotify-button" value="Inserir">',
        '  </div>',
        '</div>',
      ].join('\n'))
        .css({
          left: $('.fa-spotify-group').offset().left + 'px',
          top: $('.fa-spotify-group').offset().top + 'px',
          marginTop: '28px',
          display: 'none'
        })
          .appendTo('body')
      ;
 
    // [?] Evento de inserção no SCEditor:
    $('#fa-spotify-button')
      .on('click', function () {
        $sceditor.sceditor('instance').insertText('[spotify]' + $('#fa-spotify-input').val() + '[/spotify]');
        $('.sceditor-insertspotify').toggle();
        $('#fa-spotify-input').val('');
    });
  });
 
  // [?] Substituir a tag nas mensagens:
  $(function () {
    $('.entry-content > div, .content > div, .content').each(function() {
        var $this = $(this);
        $this.html($this.html().replace(/\[spotify\]([^\[]+)\[\/spotify\]/gi, function(text, match) {
          return $('<iframe>', {
            width: 300,
            height: 80,
            frameborder: 0,
            src: 'https://embed.spotify.com/?uri=' + match,
            allowtransparency: true
          }).prop('outerHTML');
        }));
    });

    $('.entry-content > div, .content > div, .content').each(function() {
        var $this = $(this);
        $this.html($this.html().replace(/\[spotifyGrande\]([^\[]+)\[\/spotifyGrande\]/gi, function(text, match) {
          return $('<iframe>', {
            width: 300,
            height: 380,
            frameborder: 0,
            src: 'https://embed.spotify.com/?uri=' + match,
            allowtransparency: true
          }).prop('outerHTML');
        }));
    });
  });
}(jQuery));

Agora, a tag [spotify] retornará o tamanho menor (300x80), enquanto a tag [spotifyGrande], retornará o antigo.
Exemplo:
Código:
[spotifyGrande] LINK [/spotifyGrande]

o/
Luiz

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar um botão do Spotify no SCEditor

Mensagem por Harleen 11.06.17 1:48

Oi Luiz~, mais uma vez me ajudando, você está fera Positivo

Antes de encerrar o tópico só uma última coisa, a tag do código sempre ficará no 380x80px e quando eu quiser usar o outro tamanho eu adiciono a tag spotifyGrande?

Mais uma vez obrigada.

Harleen

Harleen
Super Membro

Membro desde : 09/07/2012
Mensagens : 1779
Pontos : 2373

https://antenadogames.forumeiros.com/

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Adicionar um botão do Spotify no SCEditor

Mensagem por Luiz 11.06.17 1:56

Harleen escreveu:Oi Luiz~, mais uma vez me ajudando, você está fera 
Obrigado pelo elogio! Rosa


---


Sim, o tamanho do widget criado pela tag [spotify] sempre será de 80   pixels de altura e 300 pixels de largura.
Já o [spotifyGrande] sempre será o outro tamanho (380x300).


PS: A senhora não precisa necessariamente escrever [spotifyGrande]. Caso você escreva [spotifygrande] ou [SPOTIFYGRANDE], também irá resultar. Essas tag's não são case-sensetive.

o/
Luiz

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar um botão do Spotify no SCEditor

Mensagem por Harleen 11.06.17 2:09

Luiz~ escreveu:Obrigado pelo elogio! Rosa

Não há de que, a última coisa mesmo Rindo .
Já aproveitando de sua boa vontade, teria como essas duas estarem disponíveis no código? ao invés de estar assim http://prntscr.com/ficu6o

Harleen

Harleen
Super Membro

Membro desde : 09/07/2012
Mensagens : 1779
Pontos : 2373

https://antenadogames.forumeiros.com/

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Adicionar um botão do Spotify no SCEditor

Mensagem por Luiz 11.06.17 2:41

Claro!
Troque por:
Código:
/**
 * Adicione um botão do Spotify ao seu SCEditor.
 *
 * @author Luiz~
 * @author Kyo Panda
 *
 * @see <a href="http://ajuda.forumeiros.com/">Fórum dos Fóruns</a>
 * @licence MIT
 */
(function($) {
  'use strict';

  var faAtributes = {
    scBtn: [
      'class="sceditor-button sceditor-button-spotify" ',
      'data-sceditor-command="spotify" ',
      'unselectable="on" ',
      'title="Inserir playlist do spotify" ',
      'style="',
      'background-image: url(http://i.imgur.com/helTFAw.png)!important;',
      'background-size: 16px!important;',
      'background-position: center!important;',
      'background-repeat: no-repeat!important;',
      '"',
    ].join('\n')
  };

  $(document).on('ready', function () {
      var $sceditor = $("#text_editor_textarea");

      if (!$sceditor.length) {
        return;
      }

      // [?] Criar os novos estilos:
      $([
        '<div class="sceditor-group fa-spotify-group">',
        '  <a ' + faAtributes.scBtn + '>',
        '    <div unselectable="on" style="background-image: none!important;">Spotify</div>',
        '  </a>',
        '</div>',
      ].join('\n'))
        .on('click', function () {
          $('.sceditor-insertspotify').toggle();
        })
          .insertAfter('.sceditor-group:last')
      ;

      // [?] Colocar o Dropdown no <body>:
      $([
        '<div class="sceditor-dropdown sceditor-insertspotify">',
        '  <div>',
        '    <label for="fa-spotify-input">ID da Playlist (Opcional):</label>',
        '    <input id="fa-spotify-input" value="">',
        '  </div>',
        '  <div>',
        '    <label for="fa-spotify-tamanho">Tamanho:</label>',
        '    <select id="fa-spotify-tamanho">',
        '      <option value="spotify" selected>Pequeno</option>',
        '      <option value="spotifyGrande">Grande</option>',
        '    </select>',
        '  </div>',
        '  <div>',
        '    <input type="button" class="button" ' +
        '    id="fa-spotify-button" value="Inserir">',
        '  </div>',
        '</div>',
      ].join('\n'))
        .css({
          left: $('.fa-spotify-group').offset().left + 'px',
          top: $('.fa-spotify-group').offset().top + 'px',
          marginTop: '28px',
          display: 'none'
        })
          .appendTo('body')
      ;

    // [?] Evento de inserção no SCEditor:
    $('#fa-spotify-button')
      .on('click', function () {
        $sceditor.sceditor('instance').insertText('[' + $('#fa-spotify-tamanho').val() + ']' + $('#fa-spotify-input').val() + '[/' + $('#fa-spotify-tamanho').val() + ']');
        $('.sceditor-insertspotify').toggle();
        $('#fa-spotify-input').val('');
    });
  });

  // [?] Substituir a tag nas mensagens:
  $(function () {
    $('.entry-content > div, .content > div, .content').each(function() {
        var $this = $(this);
        $this.html($this.html().replace(/\[spotify\]([^\[]+)\[\/spotify\]/gi, function(text, match) {
          return $('<iframe>', {
            width: 300,
            height: 80,
            frameborder: 0,
            src: 'https://embed.spotify.com/?uri=' + match,
            allowtransparency: true
          }).prop('outerHTML');
        }));
    });

    $('.entry-content > div, .content > div, .content').each(function() {
        var $this = $(this);
        $this.html($this.html().replace(/\[spotifyGrande\]([^\[]+)\[\/spotifyGrande\]/gi, function(text, match) {
          return $('<iframe>', {
            width: 300,
            height: 380,
            frameborder: 0,
            src: 'https://embed.spotify.com/?uri=' + match,
            allowtransparency: true
          }).prop('outerHTML');
        }));
    });
  });
}(jQuery));

o/
Luiz

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar um botão do Spotify no SCEditor

Mensagem por Harleen 11.06.17 2:49

Mais uma vez muito obrigada pela ajuda e desculpe qualquer coisa Amigos

Resolvido
Harleen

Harleen
Super Membro

Membro desde : 09/07/2012
Mensagens : 1779
Pontos : 2373

https://antenadogames.forumeiros.com/

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Adicionar um botão do Spotify no SCEditor

Mensagem por Luiz 11.06.17 2:52

Sempre às ordens. Rosa

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.
Tópico marcado como Resolvido e movido para Questões resolvidas.
Luiz

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Permissões neste sub-fórum
Não podes responder a tópicos