Fórum dos Fóruns

Fórum dos Fóruns Forumeiros

Welcome FdF Bem-vindo ao fórum de suporte Forumeiros  Muito feliz


Para aproveitar tudo o que o nosso fórum lhe oferece, agradecemos que se identifique, se já é nosso membro, ou que se junte à nossa comunidade, fazendo o seu registo.
Acesso rápido

Fóruns de suporte oficiais
Conectar-se

Esqueci minha senha

Últimos assuntos
» Imagem em determinada área
Hoje à(s) 03:27 pm por Harleen

» Melhorar a aparência desta caixa
Hoje à(s) 03:18 pm por Harleen

» #10422 Forumeiros desativa e reenvia a url para este site
Hoje à(s) 01:35 pm por Shek

» Efeito no avatar em mensagens no tópico
Hoje à(s) 12:35 pm por Harleen

» Remover permissão
Hoje à(s) 11:22 am por Harleen

» Imagem do topico
Hoje à(s) 11:07 am por Harleen

» Template tópicos recentes
Hoje à(s) 10:45 am por Harleen

Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Parceiros Forumeiros
Os membros mais ativos da semana
Kyo Panda
 
Harleen
 
Fatalisss
 
JulioPais
 
Holkis
 
Shek
 
APOllO
 
Forumpw
 
MtX
 
Roger_Crazzy
 

Quem está conectado
236 usuários online :: 5 usuários cadastrados, Nenhum Invisível e 231 Visitantes :: 2 Motores de busca

Angeloid, Connor R., Dark Hunter, Lincoln, Roger_Crazzy

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em 24/12/09, 01:05 pm

Adicionar um botão do Spotify no SCEditor

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

Resolvido Adicionar um botão do Spotify no SCEditor

Mensagem por Harleen em 10/06/17, 08:39 pm

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 10/06/17, 10:50 pm, editado 2 vez(es)
avatar

Harleen
Ajudeira
Ajudeira

Feminino
Inscrito dia : 09/07/2012
Mensagens : 1230
Pontos Ativos : 1642

https://soulfulbrmusic.forumeiros.com/
  • 0

Resolvido Re: Adicionar um botão do Spotify no SCEditor

Mensagem por Luiz em 10/06/17, 09:31 pm

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

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 3510
Pontos Ativos : 4207

https://github.com/lffg/

Resolvido Re: Adicionar um botão do Spotify no SCEditor

Mensagem por Harleen em 10/06/17, 09:48 pm

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.

avatar

Harleen
Ajudeira
Ajudeira

Feminino
Inscrito dia : 09/07/2012
Mensagens : 1230
Pontos Ativos : 1642

https://soulfulbrmusic.forumeiros.com/

Resolvido Re: Adicionar um botão do Spotify no SCEditor

Mensagem por Luiz em 10/06/17, 09:56 pm

@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/
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 3510
Pontos Ativos : 4207

https://github.com/lffg/

Resolvido Re: Adicionar um botão do Spotify no SCEditor

Mensagem por Harleen em 10/06/17, 10:09 pm

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

avatar

Harleen
Ajudeira
Ajudeira

Feminino
Inscrito dia : 09/07/2012
Mensagens : 1230
Pontos Ativos : 1642

https://soulfulbrmusic.forumeiros.com/

Resolvido Re: Adicionar um botão do Spotify no SCEditor

Mensagem por Luiz em 10/06/17, 10:41 pm

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

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 3510
Pontos Ativos : 4207

https://github.com/lffg/

Resolvido Re: Adicionar um botão do Spotify no SCEditor

Mensagem por Harleen em 10/06/17, 10:49 pm

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

Resolvido
avatar

Harleen
Ajudeira
Ajudeira

Feminino
Inscrito dia : 09/07/2012
Mensagens : 1230
Pontos Ativos : 1642

https://soulfulbrmusic.forumeiros.com/

Resolvido Re: Adicionar um botão do Spotify no SCEditor

Mensagem por Luiz em 10/06/17, 10:52 pm

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

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 3510
Pontos Ativos : 4207

https://github.com/lffg/

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum