Trello उपयोगकर्ता के क्लिपबोर्ड तक कैसे पहुंचता है?

Question

आप मंडराना में एक कार्ड पर जब Trello और प्रेस Ctrl+ C, इस कार्ड का URL क्लिपबोर्ड में कॉपी कर रहा है। वे ऐसा कैसे करते हैं?

जहां तक ​​मैं बता सकता हूं, इसमें कोई फ्लैश फिल्म शामिल नहीं है। मुझे फ्लैशब्लॉक स्थापित हो गया है, और फ़ायरफ़ॉक्स नेटवर्क टैब कोई फ्लैश मूवी लोड नहीं करता है। (यह सामान्य विधि है, उदाहरण के लिए, ZeroClipboard द्वारा।)

वे इस जादू को कैसे हासिल करते हैं?

(ठीक इस समय मुझे लगता है कि मेरे पास एक एपिफनी थी: आप पृष्ठ पर पाठ का चयन नहीं कर सकते हैं, इसलिए मुझे लगता है कि उनके पास एक अदृश्य तत्व है, जहां वे जावास्क्रिप्ट कोड के माध्यम से एक पाठ चयन बनाते हैं, और Ctrl+ Cब्राउज़र के डिफ़ॉल्ट व्यवहार को ट्रिगर करते हैं, इस अदृश्य को कॉपी करते हैं नोड का पाठ मान।)

Comments

यदि आप लाइव डोम को देखते हैं, तो क्लास "क्लिपबोर्ड-कंटेनर" के साथ एक div है। जब आप ctrl कुंजी को दबाए रखते हैं, तो यह एक textarea से भर जाता है (और जब आप ctrl कुंजी को हटाते हैं तो हटा दिया जाता है)। मुझे लगता है कि आपका समय सही है। मुझे बिलकुल यकीन नहीं है कि वे प्रति कार्ड URL कहाँ जमा कर रहे हैं

— इयान

@ मैं, हां, मैं पुष्टि कर सकता हूं, कि वास्तव में यह कैसे काम करता है। इसे खोदने के लिए धन्यवाद! (जहां URL संग्रहीत है, मैं उससे परेशान नहीं हूं। मुझे क्लिपबोर्ड-बिना-फ्लैश तकनीक में दिलचस्पी थी।)

— बोल्ड्यूइन

मैंने डैनियल की प्रोफ़ाइल देखी, और ऐसा लगता है, वह एक ट्रेलो डेवलपर है। (मैं सोच रहा था, जहां उसे कॉफ़ीस्क्रिप्ट स्रोत मिला है।) तो उसके पास एक अनुचित लाभ है ;-) वैसे भी धन्यवाद!

— बोल्ड्यूइन

मैं इस तकनीक की व्यापकता से अलग होने का इरादा नहीं रखता, यह काफी चतुर है; लेकिन मैं मदद नहीं कर सकता लेकिन लगता है कि यह सबसे अच्छा, खराब प्रचारित / प्रलेखित है, और सबसे खराब, बहुत सुंदर उपयोगकर्ता अनुभव है। दी, यह आक्रामक रूप से परेशान नहीं है (जैसा कि मैं उस समय को याद नहीं कर सकता हूं जिसमें मैंने गलती से कार्ड URL की नकल की थी), लेकिन लंबे समय तक ट्रोलो उपयोगकर्ता के रूप में मुझे बिल्कुल पता नहीं था कि यह अस्तित्व में था।

— माइकल वेल्स

@MichaelWales यह सुविधा 5 दिन पहले जोड़ी गई थी; हम अभी भी इसका परीक्षण कर रहे हैं, और यदि ऐसा लगता है कि यह काम कर रहा है तो इसे कीबोर्ड शॉर्टकट के रूप में प्रलेखित किया जाएगा।

— डैनियल लेकेमिंटेंट

Answer 1

प्रकटीकरण: मैंने वह कोड लिखा था जो ट्रेलो उपयोग करता है ; नीचे दिया गया कोड वास्तविक स्रोत कोड है Trello क्लिपबोर्ड ट्रिक को पूरा करने के लिए उपयोग करता है।

---

हम वास्तव में "उपयोगकर्ता के क्लिपबोर्ड तक पहुंच" नहीं करते हैं, इसके बजाय हम उपयोगकर्ता को कुछ उपयोगी का चयन करके मदद करते हैं जब वे Ctrl+ दबाते हैं C।

लगता है कि आपने इसे समझ लिया है; हम इस तथ्य का लाभ उठाते हैं कि जब आप हिट करना चाहते हैं Ctrl+ C, तो आपको Ctrlपहले कुंजी को हिट करना होगा । जब Ctrlकुंजी को दबाया जाता है, तो हम एक textarea में पॉप करते हैं जिसमें वह पाठ होता है जिसे हम क्लिपबोर्ड पर समाप्त करना चाहते हैं, और इसमें सभी पाठ का चयन करते हैं, इसलिए Cकुंजी के हिट होने पर चयन बिल्कुल सेट हो जाता है। (तब हम Ctrlकुंजी को छिपाने पर टेक्सारिया छिपाते हैं )

विशेष रूप से, ट्रेलो ऐसा करता है:

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 में हमें मिला है

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

क्लिपबोर्ड सामान के लिए सीएसएस:

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

... और सीएसएस इसे बनाता है ताकि आप वास्तव में टैक्स्टेरिया को तब न देख सकें जब यह पॉप हो जाता है ... लेकिन यह "दृश्यमान" है जिससे इसे कॉपी किया जा सकता है।

जब आप एक कार्ड पर होवर करते हैं, तो यह कॉल करता है

TrelloClipboard.set(cardUrl)

... तो तब क्लिपबोर्ड सहायक जानता है कि Ctrlकुंजी को दबाने पर क्या चुनना है।

Comments

बहुत बढ़िया! लेकिन आपके पास मैक ओएस कैसे है - क्या आप वहां कमांड की को "सुनते हैं"?

— सुमन

यह ध्यान देने योग्य है कि एक समान विधि पेस्ट की गई सामग्री को कैप्चर करने के लिए भी काम करती है

— माइकल रॉबिन्सन

ऐसा लगता है कि यह कीबोर्ड उपयोगकर्ताओं के लिए बुरा होगा - जब भी आप कॉपी करने की कोशिश करते हैं (या किसी अन्य विंडो में खोलने के लिए ctrl + क्लिक करें, या Ctrl + F खोज करने के लिए, और इसी तरह), आपका ध्यान कहीं असंबंधित है।

— एडम ए

+1। इस जवाब में बहुत सारा साफ-सुथरा सामान। मुझे यह पसंद है कि आपने वास्तव में स्रोत कोड साझा किया है। लेकिन जो मैंने सोचा था कि चतुर था ctrl + c कार्यक्षमता प्रदान करने के लिए उपयोग की जाने वाली प्रक्रिया का वास्तविक विवरण था। मेरी राय में, इस तथ्य का लाभ उठाने के लिए यह बहुत ही स्मार्ट था कि ctrl और c को एक ही समय में ctrl के धकेलने की तैयारी के लिए शुरू करके दबाया नहीं जा सकता। मुझे वास्तव में वह तरीका पसंद आया।

— ट्रैविस जे

यदि ऐसा है तो मूल js में अनुवाद करने के लिए js2cfish.org का उपयोग करने के लिए स्वतंत्र महसूस करें ।

— एलेक्जेंड्रा कुरिलिन

Answer 2

मैंने वास्तव में एक क्रोम एक्सटेंशन का निर्माण किया है जो ठीक यही करता है, और सभी वेब पेजों के लिए। स्रोत कोड GitHub पर है ।

मुझे ट्रेलो के दृष्टिकोण के साथ तीन कीड़े मिलते हैं, जो मुझे पता है क्योंकि मैंने खुद उनका सामना किया है :)

प्रतिलिपि इन परिदृश्यों में काम नहीं करती है:

1. यदि आपने पहले से ही Ctrlदबाया है और फिर एक लिंक को हिट करें और हिट करें C, तो कॉपी काम नहीं करती है।
2. यदि आपका कर्सर पृष्ठ के किसी अन्य टेक्स्ट फ़ील्ड में है, तो कॉपी काम नहीं करती है।
3. यदि आपका कर्सर एड्रेस बार में है, तो कॉपी काम नहीं करती है।

मैंने # 1 को हमेशा एक गुप्त स्पैन के द्वारा हल किया, न कि उपयोगकर्ता द्वारा हिट Ctrl/ बनाने के बजाय Cmd।

मैंने जीरो-लेंथ सेलेक्शन को अस्थायी रूप से क्लीयर करते हुए, कैरेट पोजीशन को सेव करते हुए, कॉपी करते हुए और कैरेट पोजीशन को रिस्टोर करके # 2 हल किया।

मुझे अभी तक # 3 के लिए एक फिक्स नहीं मिला है :) (जानकारी के लिए, मेरे गिटहब प्रोजेक्ट में खुले मुद्दे की जांच करें)।

Comments

इसलिए आपने वास्तव में ट्रेलो की तरह ही ऐसा किया। मीठी जब ऐसी चीजें

— अभिसिंचित

@ThomasAhle, तुम्हारा क्या मतलब है?

— पचेरियर

@Pacerier, मुझे लगता है कि थॉमस ने अभिसरण विकास के लिए कहा - "... विभिन्न वंशावली की प्रजातियों में समान विशेषताओं का स्वतंत्र विकास"

— yoniLavi

पवित्र गाय आप इस विषय के बारे में एक नई बातचीत खोल सकते हैं

— carkod

Answer 3

रेनकोट की ( GitHub से लिंक ) कोड की मदद से , मैं एक रनिंग संस्करण प्राप्त करने में कामयाब रहा, जो सादे जावास्क्रिप्ट के साथ क्लिपबोर्ड तक पहुंच रहा था।

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

एकमात्र समस्या यह है, कि यह संस्करण केवल क्रोम के साथ काम करता है। ट्रेलो मंच सभी ब्राउज़रों का समर्थन करता है। मुझे क्या याद आ रहा है?

वादिम इवानोव के लिए धन्यवाद।

एक कार्यशील उदाहरण देखें: http://jsfiddle.net/AGEf7/

Comments

@ don41382 यह ठीक से सफारी (कम से कम मैक संस्करण) पर काम नहीं करता है। उचित के तहत मेरा मतलब है कि यह कॉपी करता है, लेकिन आपको दो बार cmd + C को पुश करना होगा।

— वादिम इवानोव

@VadimIvanov सच! क्या किसी को पता है क्यों?

— फेलिक्स

@ don41382 मुझे ठीक से पता नहीं क्यों, लेकिन मुझे एक समाधान मिला। आपके पास एक मामूली बग है, ऑनकाउनडाउन स्टेटमेंट पहला स्टेटमेंट होना चाहिए अगर ((e.ctrlKey 'e.metaKey)) {रिटर्न; } इसका मतलब है कि हमें मेटाके पर कॉपी किए गए टेक्स्टरी को तैयार करने की जरूरत है (यह है कि ट्रेलो के लोगों ने एक चाल बनाई है)। यह trello.com gist.github.com/fustic/10870311

— वादिम इवानोव

@VadimIvanov धन्यवाद। मैं इसे ऊपर ठीक कर दूँगा।

— फेलिक्स

यह FF 33.1 में काम नहीं कर रहा el.innerTextथा क्योंकि अपरिभाषित था, इसलिए मैंने अधिक क्रॉस-ब्राउज़र संगतता के लिए clipboard()फ़ंक्शन की अंतिम पंक्ति बदल दी clip.setValue(el.innerText || el.textContent);। लिंक: jsfiddle.net/AGEf7/31

— RevanProdigalKnight

Answer 4

कॉफीस्क्रिप्ट से जावास्क्रिप्ट ( js2cfish ) में परिवर्तित करने के बाद डैनियल लेकेमिंट के कोड ने मेरे लिए काम नहीं किया । यह _.defer()लाइन पर बमबारी करता रहा ।

मुझे लगा कि यह jQuery deferreds के साथ कुछ करना है, इसलिए मैंने इसे बदल दिया $.Deferred()और अब यह काम कर रहा है। मैंने इसे इंटरनेट एक्सप्लोरर 11, फ़ायरफ़ॉक्स 35 और क्रोम 39 में jQuery 2.1.1 के साथ परीक्षण किया। उपयोग वही है जो डैनियल के पोस्ट में वर्णित है।

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;

})());

Answer 5

जब आप URL को छोटा करते हैं तो http://goo.gl पर कुछ ऐसा ही देखा जा सकता है ।

एक आसानी से इनपुट तत्व है जो प्रोग्रामेटिक रूप से केंद्रित हो जाता है, CTRL-Cकॉपी करने के लिए टूलटिप प्रेस के साथ ।

जब आप उस शॉर्टकट को हिट करते हैं, तो इनपुट सामग्री प्रभावी रूप से क्लिपबोर्ड में आ जाती है। बहुत अच्छे :)