Adicionar um botão do Spotify no SCEditor

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.

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/

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.

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/

por Harleen 11.06.17 2:09

Luiz~ escreveu:Obrigado pelo elogio!

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

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/

por Harleen 11.06.17 2:49

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

Resolvido

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.

Adicionar um botão do Spotify no SCEditor