Controlador deslizante de comparação de imagens

Componente de tema
1

|||
|-|-|-|
| :information_source: | Resumo | Adiciona um botão ao editor para criar um controle deslizante interativo de comparação de imagens arrastável.
| :hammer_and_wrench:|Repositório| GitHub - josephclaytonhansen/discourse-image-comparison-slider |
| :question:|Guia de Instalação|Como instalar um tema ou componente de tema|
| :open_book:|Novo em Temas do Discourse?| Guia para iniciantes no uso de Temas do Discourse

Instalar este componente de tema

Este componente adiciona um botão ao editor para criar controles deslizantes de comparação de imagens arrastáveis. As configurações do controle deslizante, como direção ou ícone do botão, podem ser personalizadas nas configurações do administrador.

IMG_2908
IMG_2908526×616 123 KB

Esta é minha primeira incursão no desenvolvimento do Discourse, então peço desculpas se cometi algum erro.

27 curtidas
2

O que é WIP? (Agora são 20 caracteres?)

2 curtidas
3
4 curtidas
4

WIP é trabalho em andamento.

3 curtidas
5

Isso é incrível! Obrigado por esta contribuição :+1:

Que tipo de atualizações você tem em mente?

4 curtidas
6

Principalmente, preciso limpar o código e torná-lo mais alinhado com o Discourse. Está um pouco desleixado no momento, já que eu estava aprendendo ativamente como fazer um componente de tema aqui :slight_smile:

Também estou planejando adicionar uma maneira de alterar a direção do controle deslizante a partir do composer - no momento, a direção é a que foi definida nas configurações do administrador, eu gostaria de tornar isso controlável pelo usuário. (EDIT: isso foi adicionado!)

Eu também gostaria de adicionar mais controle sobre os estilos da alça/divisor do controle deslizante, mas infelizmente não é realmente possível. O JavaScript que lida com o controle deslizante constrói o controle deslizante antes de quaisquer alterações de CSS e não reconstrói o controle deslizante quando as alterações de CSS ocorrem.

9 curtidas
7

Coisas legais! :heart:
Obrigado por contribuir :raised_hands:

4 curtidas
8

Adicionei a capacidade do usuário de escolher um controle deslizante vertical ou horizontal, usando um atributo data-direction-horizontal ou data-direction-vertical. A configuração padrão escolhida nas configurações do administrador será usada se o usuário não especificar uma direção


Esta atualização está disponível agora no GitHub ou no painel de administração do Discourse, se você instalou o componente de tema

5 curtidas
9

Muito legal, obrigado Joseph! Funciona bem, mas estou vendo este erro no meu site:

image
image1582×146 61.6 KB

Ele desaparece se eu atualizar a página, e é tudo o que vejo no console:

image
image1866×132 59.6 KB

2 curtidas
10

Isto é legal. Bom trabalho. :+1:

2 curtidas
11

É difícil dizer o que está causando isso, não consigo reproduzir aqui :confused: Desses erros, apenas o primeiro pode ser deste componente, pois não estou usando um tooltipContainer ou um ResizeObserver loop, mas novamente, não tenho certeza. Você atualizou para a versão mais recente? Fiz algumas alterações ontem que podem corrigir isso.

1 curtida
12

Obrigado Joseph, estou na versão mais recente. É estranho, não consigo fazer esta mensagem aparecer novamente e não vejo nenhum problema, então talvez tenha sido um acaso?

Outra coisa, o ícone não quer mudar. Eu, é claro, adicionei-o ao subconjunto de ícones SVG. Também tentei ícones diferentes que já estão funcionando no meu site e ele simplesmente não muda do raio. Estou tentando mudá-lo para arrows-alt-h

2 curtidas
13

Minha culpa, acabei de confirmar uma alteração que corrigirá isso. Obrigado por pegar isso!

3 curtidas
15

Muito legal, tenho alguns problemas:

Localização

Em meu fórum, mudamos para a localidade en_GB, então quando passo o mouse sobre, recebo:

image
image311×119 2.23 KB

em vez do texto alternativo/sabor das configurações do componente:
image
image606×262 5.85 KB

Não consigo selecionar texto

O plugin parece roubar todos os eventos de clique do mouse e me impede de selecionar qualquer texto na página para copiar/colar/citar, etc. Isso não é um problema em meta.discourse… ele desapareceu… Eu amo tecnologia.

3.1.0.beta4

(f0bdb2ee9a)

Não funciona no Firefox (e em alguns usuários de Chrome mobile)

image
image574×471 64.9 KB

Criei um post de instrução para usar o recurso, e algumas pessoas disseram que não estavam vendo nada. (feedback não muito útil, já que não tenho relatórios de bugs reais das pessoas).

2 curtidas
16

Hmm… isso é estranho, testei no Firefox sem problemas. Vou ver se consigo reproduzir isso. Adoro bugs aleatórios :melting_face: a biblioteca que estou usando não tem problemas no repositório do GitHub para Firefox, aberto ou fechado, o que torna a correção de bugs ainda mais difícil.

Locales - Não tenho certeza de qual é o processo para fornecer arquivos de locale, posso adicionar um en.GB, já que falo esse idioma, mas isso é o máximo da minha expertise. Algum outro autor de componente de tema sabe como funcionam as traduções de arquivos de locale? Devo apenas passar o texto pelo Google Tradutor? :sweat_smile:

1 curtida
17

A única diferença que consigo ver entre o seu e um componente que funciona (giphy) é a indentação…

Talvez seja que toda a “bondade” do yml esteja no mesmo nível de indentação, algo sobre o parser, algo assim.

Basicamente… sou um hack e não tenho ideia do que estou fazendo.

3 curtidas
18

Eu sei como você se sente :slight_smile: Vou verificar, estou usando o analisador YML do VS Studio, mas ele pode não estar 100% de acordo com o padrão. Vou tentar uma indentação manual tradicional no Notepad.

1 curtida
19

@Frully Corrigi o problema do Firefox - agora deve funcionar em todos os navegadores (testei Chrome, Firefox, Safari e versões mobile sem problemas). Se você atualizar isso, funcionará para seus usuários do Firefox.

2 curtidas
20

Olá

Este tema-componente é muito legal, obrigado e acabei de instalá-lo :slight_smile:

Um problema com o texto do botão e com o texto de espaço reservado

Eu também tenho o tema-componente

Após a instalação, tenho:

  • o texto do botão “Image comparison slider” também no botão “Masonry Image Gallery”
  • o texto de espaço reservado de “Image comparison slider” em vez do texto de espaço reservado de “Masonry Image Gallery”

image
image932×647 31.9 KB

Estranho, não?

Stéphane

1 curtida
21

Eu não tinha pensado nesse problema. Obrigado por apontá-lo, @Stephane_Roy!

O problema é que ambos os componentes de tema usam as mesmas variáveis de tradução. Outros TCs podem ter o mesmo problema. A correção é atualizar/alterar o nome de button_text e add_images_prompt nos locais abaixo. Eu também atualizarei a Galeria de Imagens em Alvenaria.

traduções.button_text = configurações.button_text;
traduções.composer.add_images_prompt =
configurações.add_images_prompt;

api.onToolbarCreate(function(toolbar){
toolbar.addButton({
trimLeading: true,
id: “image-comparison-slider”,
group: “insertions”,
icon: settings.button_icon,
title: “button_text”,
perform: e => e.applySurround(
[“<div data-image-comparison-slider data-direction-”,settings.default_direction,“<0xC2><0xA0>\n\n”].join(‘’),
“\n\n”,
“add_images_prompt”,
{ multiline: false }
)
});

1 curtida