Como o Trello acessa a área de transferência do usuário?

936

Quando você passa o mouse sobre um cartão no Trello e pressiona Ctrl+ C, o URL desse cartão é copiado para a área de transferência. Como eles fazem isso?

Até onde eu sei, não há nenhum filme em Flash envolvido. Eu tenho o Flashblock instalado e a guia de rede do Firefox não mostra nenhum filme em Flash carregado. (Esse é o método usual, por exemplo, pelo ZeroClipboard.)

Como eles conseguem essa mágica?

(Neste exato momento, acho que tive uma epifania: você não pode selecionar texto na página, portanto, suponho que eles tenham um elemento invisível, onde eles criam uma seleção de texto via código JavaScript e Ctrl+ Caciona o comportamento padrão do navegador, copiando o invisível valor de texto do nó.)

Boldewyn
fonte
22
Se você olhar para o DOM ao vivo, há uma div com a classe "clipboard-container". Quando você pressiona a tecla ctrl, ela é preenchida com uma área de texto (e é removida quando você retira a tecla ctrl). Eu diria que sua epifania está correta. Estou apenas não sei exatamente onde eles estão armazenando a URL por cartão
Ian
@ Ian, sim, posso confirmar, foi exatamente assim que funcionou. Obrigado por desenterrá-lo! (Eu não me incomodo com o local onde o URL é armazenada eu estava interessado na tecnologia clipboard-sem-flash..)
Boldewyn
2
Procurei o perfil de Daniel e, ao que parece, ele é desenvolvedor do Trello. (Eu me perguntava, de onde ele tirou a fonte do Coffeescript.) Então ele tem uma vantagem injusta ;-) De qualquer forma, obrigado!
Boldewyn
1
Não pretendo prejudicar a desenvoltura dessa técnica, é bastante inteligente; mas não posso deixar de pensar que isso é, na melhor das hipóteses, mal divulgado / documentado e, na pior, uma experiência bastante perturbadora para o usuário. É verdade que não é invasivo (como não me lembro de um período em que acidentalmente copiei o URL do cartão), mas como usuário antigo do Trello, eu não fazia ideia de que isso existia.
Michael Wales
3
@MichaelWales Este recurso foi adicionado 5 dias atrás; ainda estamos testando e, se parece estar funcionando, será documentado como um atalho de teclado.
Daniel LeCheminant

Respostas:

1547

Divulgação: escrevi o código que o Trello usa ; o código abaixo é o código-fonte real que o Trello usa para realizar o truque da área de transferência.


Na verdade, não "acessamos a área de transferência do usuário", em vez disso, ajudamos um pouco o usuário selecionando algo útil quando pressionamos Ctrl+ C.

Parece que você já descobriu; aproveitamos o fato de que, quando você deseja pressionar Ctrl+ C, deve pressionar a Ctrltecla primeiro. Quando a Ctrltecla é pressionada, exibimos uma área de texto que contém o texto que queremos terminar na área de transferência e selecionamos todo o texto nela, para que a seleção esteja definida quando a Ctecla for pressionada. (Então, ocultamos a área de texto quando a Ctrlchave é exibida)

Especificamente, o Trello faz isso:

TrelloClipboard = new class
  constructor: ->
    @value = ""

    $(document).keydown (e) =>
      # Only do this if there's something to be put on the clipboard, and it
      # looks like they're starting a copy shortcut
      if !@value || !(e.ctrlKey || e.metaKey)
        return

      if $(e.target).is("input:visible,textarea:visible")
        return

      # Abort if it looks like they've selected some text (maybe they're trying
      # to copy out a bit of the description or something)
      if window.getSelection?()?.toString()
        return

      if document.selection?.createRange().text
        return

      _.defer =>
        $clipboardContainer = $("#clipboard-container")
        $clipboardContainer.empty().show()
        $("<textarea id='clipboard'></textarea>")
        .val(@value)
        .appendTo($clipboardContainer)
        .focus()
        .select()

    $(document).keyup (e) ->
      if $(e.target).is("#clipboard")
        $("#clipboard-container").empty().hide()

  set: (@value) ->

No DOM, temos

<div id="clipboard-container"><textarea id="clipboard"></textarea></div>

CSS para o material da área de transferência:

#clipboard-container {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 0px;
  height: 0px;
  z-index: 100;
  display: none;
  opacity: 0;
}
#clipboard {
  width: 1px;
  height: 1px;       
  padding: 0px;
}

... e o CSS faz com que você não consiga ver a área de texto quando ela aparece ... mas é "visível" o suficiente para copiar.

Quando você passa o mouse sobre um cartão, ele chama

TrelloClipboard.set(cardUrl)

... para que o auxiliar da área de transferência saiba o que selecionar quando a Ctrltecla for pressionada.

Daniel LeCheminant
fonte
3
Impressionante! Mas como você tem o Mac OS - você "escuta" a tecla Command lá?
Suman
28
É importante notar que um método semelhante funciona tão bem para capturar conteúdo colado
Michael Robinson
17
Parece ruim para os usuários de teclado - sempre que você tenta copiar (ou pressione Ctrl + clique para abrir em outra janela, ou Ctrl + F para pesquisar e assim por diante), seu foco é movido para algum lugar não relacionado.
Adam A
2
+1. Muitas coisas legais estão acontecendo nesta resposta. Eu gosto que você realmente compartilhou o código fonte. Mas o que eu achei inteligente era a explicação real do processo usado para fornecer a funcionalidade ctrl + c. Na minha opinião, foi muito inteligente aproveitar o fato de que ctrl ec não podem ser pressionados ao mesmo tempo, começando a se preparar para o c quando o ctrl é pressionado. Eu realmente gostei dessa abordagem.
Travis J
8
Sinta-se à vontade para usar o js2coffee.org para traduzir o original em js, se assim for.
Alexandr Kurilin
79

Na verdade, criei uma extensão do Chrome que faz exatamente isso e para todas as páginas da web. O código fonte está no GitHub .

Encontro três bugs com a abordagem do Trello, que eu sei porque os enfrentei :)

A cópia não funciona nesses cenários:

  1. Se você já Ctrlpressionou e passou o mouse e pressionou um link C, a cópia não funcionará.
  2. Se o cursor estiver em algum outro campo de texto da página, a cópia não funcionará.
  3. Se o cursor estiver na barra de endereço, a cópia não funcionará.

Resolvi o número 1 sempre tendo um intervalo oculto, em vez de criar um quando o usuário clica em Ctrl/ Cmd.

Eu resolvi o número 2 limpando temporariamente a seleção de comprimento zero, salvando a posição do cursor, fazendo a cópia e restaurando a posição do cursor.

Ainda não encontrei uma correção para o # 3 :) (Para obter informações, verifique o problema em aberto no meu projeto do GitHub).

Dhruv Vemula
fonte
10
Então você realmente fez isso da mesma maneira que o Trello. Doce quando tais coisas convergem
Thomas Ahle
@ThomasAhle, o que você quer dizer?
Pacerier
7
@Pacerier, presumo que Thomas fez alusão a Convergent Evolução - "... evolução independente de características semelhantes em espécies de diferentes linhagens"
yoniLavi
vaca sagrada que você poderia abrir uma nova conversa sobre este tema
carkod
20

Com a ajuda do código da capa de chuva ( link para o GitHub ), consegui obter uma versão em execução acessando a área de transferência com JavaScript simples.

function TrelloClipboard() {
    var me = this;

    var utils = {
        nodeName: function (node, name) {
            return !!(node.nodeName.toLowerCase() === name)
        }
    }
    var textareaId = 'simulate-trello-clipboard',
        containerId = textareaId + '-container',
        container, textarea

    var createTextarea = function () {
        container = document.querySelector('#' + containerId)
        if (!container) {
            container = document.createElement('div')
            container.id = containerId
            container.setAttribute('style', [, 'position: fixed;', 'left: 0px;', 'top: 0px;', 'width: 0px;', 'height: 0px;', 'z-index: 100;', 'opacity: 0;'].join(''))
            document.body.appendChild(container)
        }
        container.style.display = 'block'
        textarea = document.createElement('textarea')
        textarea.setAttribute('style', [, 'width: 1px;', 'height: 1px;', 'padding: 0px;'].join(''))
        textarea.id = textareaId
        container.innerHTML = ''
        container.appendChild(textarea)

        textarea.appendChild(document.createTextNode(me.value))
        textarea.focus()
        textarea.select()
    }

    var keyDownMonitor = function (e) {
        var code = e.keyCode || e.which;
        if (!(e.ctrlKey || e.metaKey)) {
            return
        }
        var target = e.target
        if (utils.nodeName(target, 'textarea') || utils.nodeName(target, 'input')) {
            return
        }
        if (window.getSelection && window.getSelection() && window.getSelection().toString()) {
            return
        }
        if (document.selection && document.selection.createRange().text) {
            return
        }
        setTimeout(createTextarea, 0)
    }

    var keyUpMonitor = function (e) {
        var code = e.keyCode || e.which;
        if (e.target.id !== textareaId || code !== 67) {
            return
        }
        container.style.display = 'none'
    }

    document.addEventListener('keydown', keyDownMonitor)
    document.addEventListener('keyup', keyUpMonitor)
}

TrelloClipboard.prototype.setValue = function (value) {
    this.value = value;
}

var clip = new TrelloClipboard();
clip.setValue("test");

O único problema é que esta versão funciona apenas com o Chrome. A plataforma Trello suporta todos os navegadores. O que estou perdendo?

Agradecido por VadimIvanov.

Veja um exemplo de trabalho: http://jsfiddle.net/AGEf7/

Felix
fonte
@ don41382 não funciona corretamente no Safari (pelo menos na versão Mac). Sob adequada, quero dizer que ele copia, mas você deve pressionar cmd + C duas vezes.
Vadim Ivanov
@VadimIvanov True! Alguém sabe o porquê?
Felix #
1
@ don41382 Não sei exatamente por que, mas encontrei uma solução. Você tem um bug menor, onKeyDown a primeira instrução deve ser if (! (E.ctrlKey || e.metaKey)) {return; } Isso significa que precisamos preparar a área de texto para cópia na metaKey pressionada (é assim que os caras do trello fizeram um truque). Este é um código de trello.com gist.github.com/fustic/10870311
Vadim Ivanov
@VadimIvanov Thanks. Eu vou consertar isso acima.
Felix
1
Ele não estava funcionando no FF 33.1 porque el.innerTextestava indefinido, então mudei a última linha da clipboard()função clip.setValue(el.innerText || el.textContent);para mais compatibilidade entre navegadores. link: jsfiddle.net/AGEf7/31
RevanProdigalKnight
7

O código de Daniel LeCheminant não funcionou para mim depois de convertido do CoffeeScript para JavaScript ( js2coffee ). Continuava bombardeando a _.defer()linha.

Presumi que isso tivesse algo a ver com adiados do jQuery, então mudei para $.Deferred()e está funcionando agora. Eu testei no Internet Explorer 11, Firefox 35 e Chrome 39 com o jQuery 2.1.1. O uso é o mesmo descrito na postagem de Daniel.

var TrelloClipboard;

TrelloClipboard = new ((function () {
    function _Class() {
        this.value = "";
        $(document).keydown((function (_this) {
            return function (e) {
                var _ref, _ref1;
                if (!_this.value || !(e.ctrlKey || e.metaKey)) {
                    return;
                }
                if ($(e.target).is("input:visible,textarea:visible")) {
                    return;
                }
                if (typeof window.getSelection === "function" ? (_ref = window.getSelection()) != null ? _ref.toString() : void 0 : void 0) {
                    return;
                }
                if ((_ref1 = document.selection) != null ? _ref1.createRange().text : void 0) {
                    return;
                }
                return $.Deferred(function () {
                    var $clipboardContainer;
                    $clipboardContainer = $("#clipboard-container");
                    $clipboardContainer.empty().show();
                    return $("<textarea id='clipboard'></textarea>").val(_this.value).appendTo($clipboardContainer).focus().select();
                });
            };
        })(this));

        $(document).keyup(function (e) {
            if ($(e.target).is("#clipboard")) {
                return $("#clipboard-container").empty().hide();
            }
        });
    }

    _Class.prototype.set = function (value) {
        this.value = value;
    };

    return _Class;

})());
RebocadorCapitão
fonte
5

Algo muito semelhante pode ser visto em http://goo.gl quando você diminui o URL.

Há um elemento de entrada somente leitura que é focado programaticamente, com a dica de ferramenta pressionada CTRL-Cpara copiar.

Quando você pressiona esse atalho, o conteúdo de entrada entra efetivamente na área de transferência. Really nice :)

Boris Brdarić
fonte