Trello kullanıcının panosuna nasıl erişir?

Trello'da bir kartın üzerine gelip Ctrl+ tuşuna bastığınızda C, bu kartın URL'si panoya kopyalanır. Bunu nasıl yapıyorlar?

Anlayabildiğim kadarıyla, Flash filmi dahil değil. Bende Flashblock yüklü ve Firefox ağ sekmesi gösterileri hiçbir Flash film yüklendi. (Bu, ZeroClipboard tarafından olağan yöntemdir.)

Bu büyüyü nasıl başarıyorlar?

(Şu anda bir epiphany olduğunu düşünüyorum: Sayfadaki metni seçemezsiniz, bu yüzden görünmez bir öğeye sahip olduklarını, JavaScript kodu ile bir metin seçimi oluşturduklarını ve Ctrl+ Ctarayıcının varsayılan davranışını tetiklediğini, düğümün metin değeri.)

Açıklama: Trello'nun kullandığı kodu yazdım ; Aşağıdaki kod Trello'nun pano numaralarını gerçekleştirmek için kullandığı gerçek kaynak kodudur.

Aslında "kullanıcının panosuna erişmiyoruz", bunun yerine Ctrl+ tuşuna bastığında kullanışlı bir şey seçerek kullanıcıya biraz yardımcı oluyoruz C.

Anladığınız gibi geliyor; Size vurmak istediğinizde gerçeği yararlanmak Ctrl+ C, sen vurmak zorunda Ctrlilk anahtarı. Ne zaman Ctrltuşuna basıldığında seçim ayarlanır böylece, biz panodaki sonunda istediğiniz metni içeren bir textarea pop ve içindeki tüm metni seçmek Canahtar vuruldu. (Sonra Ctrlanahtar geldiğinde metin alanını gizleriz )

Özellikle, Trello bunu yapar:

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) ->

DOM’de

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

Pano işleri için CSS:

#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;
}

... ve CSS bunu yapar, böylece metin geldiğinde metin alanını göremezsiniz ... ama kopyalanacak kadar "görünür".

Bir kartın üzerine geldiğinizde,

TrelloClipboard.set(cardUrl)

... böylece pano yardımcısı, Ctrltuşa basıldığında ne seçileceğini bilir .

Aslında tam olarak bunu yapan bir Chrome uzantısı oluşturdum ve tüm web sayfaları için. Kaynak kodu GitHub'da .

Trello'nun yaklaşımıyla üç hata buluyorum, biliyorum ki kendimle yüzleştim :)

Kopya şu senaryolarda çalışmaz:

1. Daha önce Ctrlbir bağlantıya bastıktan sonra fareyle üzerine geldiyseniz ve isabet ederseniz C, kopya çalışmaz.
2. İmleciniz sayfadaki başka bir metin alanındaysa, kopya çalışmaz.
3. İmleciniz adres çubuğundaysa, kopya çalışmaz.

Hep gizli bir açıklığa sahip, yerine bir kullanıcı isabet oluşturarak 1. çözüldü Ctrl/ Cmd.

Sıfır uzunluk seçimini geçici olarak temizleyerek, düzeltme konumu konumunu kaydederek, kopyalama yaparak ve düzeltme konumu geri yükleyerek # 2'yi çözdüm.

Henüz # 3 için bir düzeltme bulamadım :) (Bilgi için GitHub projemdeki açık sorunu kontrol edin).

Raincoat'ın ( GitHub'a bağlantı ) kodunun yardımıyla panoya düz JavaScript ile erişen çalışan bir sürüm almayı başardım.

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");

Tek sorun, bu sürümün yalnızca Chrome ile çalışmasıdır. Trello platformu tüm tarayıcıları destekler. Neyi kaçırdım?

VadimIvanov'a teşekkür etti.

Çalışan bir örneğe bakın: http://jsfiddle.net/AGEf7/

Daniel LeCheminant'ın kodu CoffeeScript'ten JavaScript'e ( js2coffee ) dönüştürüldükten sonra benim için çalışmadı . Hatta bombalamaya devam etti _.defer().

Bunun jQuery ertelemeleri ile ilgili bir şey olduğunu varsaydım, bu yüzden onu değiştirdim $.Deferred()ve şimdi çalışıyor. Bunu jQuery 2.1.1 ile Internet Explorer 11, Firefox 35 ve Chrome 39'da test ettim. Kullanım Daniel'in gönderisinde açıklananla aynıdır.

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;

})());

URL'yi kısalttığınızda http://goo.gl adresinde çok benzer bir şey görülebilir .

CTRL-CKopyalamak için araç ipucu ile programlı olarak odaklanan salt okunur bir giriş öğesi vardır .

Bu kısayola bastığınızda, giriş içeriği etkin bir şekilde panoya girer. Gerçekten hoş :)