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.
Conectar-se

Esqueci minha senha

Últimos assuntos
» Como adicionar um fundo a barra de menus?
Hoje à(s) 01:38 am por SetRaiden

» Como remover essas bordas dos avatares?
Hoje à(s) 01:31 am por SetRaiden

» Preciso de uma logo
Hoje à(s) 01:05 am por odelgado

» [FAQ] Gerir e configurar o Topic'it no seu fórum Forumeiros
Ontem à(s) 11:15 pm por Shek

» Preciso de Ajuda.
Ontem à(s) 11:12 pm por Shek

» Plaquinhas de Rank para o meu Fórum
Ontem à(s) 07:41 pm por Lost154

» Publicidade bugada
Ontem à(s) 07:31 pm por virus

Instale agora o aplicativo Topic'it e acesse o suporte de Forumeiros pelo celular.
Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Quem está conectado
207 usuários online :: 2 usuários cadastrados, 1 Invisível e 204 Visitantes :: 1 Motor de busca

Herbert Silva, Key of Destiny

[ 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
Membro do Fórum

Feminino
Inscrito dia : 09/07/2012
Mensagens : 1499
Pontos Ativos : 1941

Ver perfil do usuário 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/


Bem-vindo ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Seja cordial e respeite o tempo dos voluntários para atender o seu pedido.
Luiz — Ajudeiro
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 4111
Pontos Ativos : 4734

Ver perfil do usuário 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
Membro do Fórum

Feminino
Inscrito dia : 09/07/2012
Mensagens : 1499
Pontos Ativos : 1941

Ver perfil do usuário 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/


Bem-vindo ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Seja cordial e respeite o tempo dos voluntários para atender o seu pedido.
Luiz — Ajudeiro
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 4111
Pontos Ativos : 4734

Ver perfil do usuário 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
Membro do Fórum

Feminino
Inscrito dia : 09/07/2012
Mensagens : 1499
Pontos Ativos : 1941

Ver perfil do usuário 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/


Bem-vindo ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Seja cordial e respeite o tempo dos voluntários para atender o seu pedido.
Luiz — Ajudeiro
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 4111
Pontos Ativos : 4734

Ver perfil do usuário 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
Membro do Fórum

Feminino
Inscrito dia : 09/07/2012
Mensagens : 1499
Pontos Ativos : 1941

Ver perfil do usuário 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.


Bem-vindo ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Seja cordial e respeite o tempo dos voluntários para atender o seu pedido.
Luiz — Ajudeiro
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 4111
Pontos Ativos : 4734

Ver perfil do usuário 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