কিভাবে ট্রেলো ব্যবহারকারীর ক্লিপবোর্ডে অ্যাক্সেস করতে পারে?

Question

আপনি যখন ট্রেলোতে কোনও কার্ডের উপর ঘুরে বেড়ান এবং Ctrl+ টিপুন C, এই কার্ডটির URL টি ক্লিপবোর্ডে অনুলিপি করা হবে। তারা এটা কিভাবে করে?

আমি যতদূর বলতে পারি, এতে কোনও ফ্ল্যাশ মুভি জড়িত নেই। আমি ফ্ল্যাশব্লক ইনস্টল করেছি এবং ফায়ারফক্স নেটওয়ার্ক ট্যাবে কোনও ফ্ল্যাশ চলচ্চিত্র লোড হওয়া দেখায় না। (এটি সাধারণ পদ্ধতি, উদাহরণস্বরূপ, জিরো ক্লিপবোর্ডের মাধ্যমে))

কীভাবে তারা এই যাদু অর্জন করবে?

(এই মুহুর্তে আমার মনে হয় আমার একটি এপিফ্যানি ছিল: আপনি পৃষ্ঠায় পাঠ্যটি নির্বাচন করতে পারবেন না, তাই আমি ধরে নিই যে তাদের একটি অদৃশ্য উপাদান রয়েছে, যেখানে তারা জাভাস্ক্রিপ্ট কোডের মাধ্যমে একটি পাঠ্য নির্বাচন তৈরি করে এবং Ctrl+ Cঅদৃশ্যটিকে অনুলিপি করে ব্রাউজারের ডিফল্ট আচরণকে ট্রিগার করে) নোডের পাঠ্যের মান)

Comments

আপনি যদি লাইভ ডিওএমটি দেখেন তবে "ক্লিপবোর্ড-ধারক" শ্রেণীর সাথে একটি ডিভ রয়েছে। আপনি যখন সিটিআরএল কীটি ধরে রাখেন তখন এটি একটি টেক্সারিয়াতে পূর্ণ হয়ে যায় (এবং আপনি যখন সিটিআরএল কীটি সরিয়ে ফেলেন তখন তা সরানো হবে)। আমি আপনার এপিফেনি সঠিক বলে ধরে নেব। আমি ঠিক নিশ্চিত নই যে তারা কোথায় কার্ডে ইউআরএল সংরক্ষণ করছে

— ইয়ান

@ ইয়ান, হ্যাঁ, আমি নিশ্চিত করতে পারি, ঠিক কীভাবে এটি কাজ করেছিল। এটি খনন করার জন্য ধন্যবাদ! (ইউআরএলটি কোথায় সংরক্ষণ করা হয়েছে তা নিয়ে আমি মাথা

— ঘামাই

আমি ড্যানিয়েলের প্রোফাইল সন্ধান করেছি এবং দেখে মনে হচ্ছে, সে ট্রেলো বিকাশকারী। (আমি ভাবলাম, তিনি কোফিসিপি উত্সটি কোথা থেকে পেয়েছেন)) সুতরাং তার একটি অন্যায় সুবিধা রয়েছে ;-) যাইহোক ধন্যবাদ!

— বোল্ডউইন

আমি এই কৌশলটির কৌতূহল থেকে বিরত নেওয়ার ইচ্ছা করি না, এটি যথেষ্ট চালাক; তবে আমি সাহায্য করতে পারছি না তবে মনে করি এটি সর্বোত্তম, খারাপ প্রকাশিত / ডকুমেন্টেড এবং সবচেয়ে খারাপ দিক থেকে, একটি দুর্দান্ত ঝাঁকুনির ব্যবহারকারীর অভিজ্ঞতা। মঞ্জুর, এটি আক্রমণাত্মকভাবে ঝাঁকুনি দেয় না (কারণ আমি এমন কোনও সময় স্মরণ করতে পারি না যাতে আমি ঘটনাক্রমে কার্ডের ইউআরএলটি অনুলিপি করেছিলাম), তবে দীর্ঘকালীন ট্রেলো ব্যবহারকারী হিসাবে আমার এই সম্পর্কে কোন ধারণা ছিল না।

— মাইকেল ওয়েলস

@ মিশেলওয়েলস এই বৈশিষ্ট্যটি 5 দিন আগে যুক্ত করা হয়েছিল; আমরা এখনও এটি পরীক্ষা করে দেখছি এবং যদি মনে হয় এটি কাজ করছে তবে এটি একটি কীবোর্ড শর্টকাট হিসাবে নথিভুক্ত করা হবে।

— ড্যানিয়েল লেচেমিন্যান্ট

Answer 1

প্রকাশ: ট্রেলো যে কোড ব্যবহার করে তা আমি লিখেছিলাম ; ক্লিপবোর্ডের কৌশলটি সম্পাদন করতে ট্রেলো ব্যবহার করেছেন নীচের কোডটি হ'ল আসল উত্স কোড।

---

আমরা আসলে "ব্যবহারকারীর ক্লিপবোর্ডে অ্যাক্সেস" পাই না, পরিবর্তে তারা যখন Ctrl+ টিপুন তখন দরকারী কিছু নির্বাচন করে আমরা ব্যবহারকারীকে কিছুটা সাহায্য করতে পারি C।

মনে হচ্ছে আপনি এটি বের করেছেন; আমরা আসলে যখন আপনি আঘাত করতে চান যে সুবিধা গ্রহণ Ctrl+ + C, তোমাকে আঘাত করতে হবে Ctrlপ্রথম কী। যখন Ctrlকি টেপা না হলে, আমরা একটি পাঠ্য এলাকা যে পাঠ্য আমরা ক্লিপবোর্ড আপ শেষ করার বিষয়ে রয়েছে পপ, এবং এটি মধ্যে সমস্ত পাঠ্য নির্বাচন, তাই নির্বাচন সব সেট যখন 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) ->

ডোমে আমরা পেয়েছি

<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কী নির্বাচন করবেন তা জানেন knows

Comments

অসাধারণ! তবে আপনার কীভাবে ম্যাক ওএস রয়েছে - আপনি কি সেখানে কমান্ড কীটি "শুনছেন"?

— সুমন

এটি লক্ষ্য করার মতো যে অনুরূপ পদ্ধতি পেস্ট করা সামগ্রী ক্যাপচারের জন্য ঠিক একইভাবে কাজ করে

— মাইকেল রবিনসন

এটি কীবোর্ড ব্যবহারকারীদের পক্ষে খারাপ লাগবে বলে মনে হয় - যে কোনও সময় আপনি অনুলিপি করার চেষ্টা করেন (বা অন্য উইন্ডোতে খোলার জন্য সিআরটিএল + ক্লিক করুন, বা অনুসন্ধানে Ctrl + F ইত্যাদি), আপনার ফোকাসটি অন্য কোনও জায়গায় সম্পর্কিত নয় moved

— আদম এ

+1 টি। এই উত্তরে প্রচুর ঝরঝরে স্টাফ চলছে। আমি পছন্দ করি যে আপনি আসলে উত্স কোডটি ভাগ করেছেন। তবে আমি যেটাকে চালাক বলে মনে করেছি তা হ'ল সিআরটিএল + সি কার্যকারিতা সরবরাহ করার জন্য ব্যবহৃত প্রক্রিয়াটির আসল ব্যাখ্যা। আমার মতে সিটিআরএলটি সিলেক্ট করার সময় সিটির প্রস্তুতি নেওয়া শুরু করে ঠিক একই সময়ে সিটিআরএল এবং সি টিপানো যায় না, এই সুবিধাটি গ্রহণ করা খুব স্মার্ট ছিল। আমি সত্যিই যে পদ্ধতির পছন্দ।

— ট্র্যাভিস জে

মূলত যদি ঝোঁক থাকে তবে js2c کافی.org ব্যবহার করুন অরিজিনালটি মূল ভাষায় অনুবাদ করুন।

— আলেকজান্ডার কুরিলিন

Answer 2

আমি আসলে একটি ক্রোম এক্সটেনশন তৈরি করেছি যা ঠিক এটি করে এবং সমস্ত ওয়েব পৃষ্ঠাগুলির জন্য। সোর্স কোডটি গিটহাবে রয়েছে ।

ট্রেলোর পদ্ধতির সাথে আমি তিনটি বাগ পেয়েছি, যা আমি জানি কারণ আমি নিজেই তাদের মুখোমুখি হয়েছি :)

অনুলিপি এই পরিস্থিতিতে কাজ করে না:

1. আপনি যদি ইতিমধ্যে Ctrlচাপ দিয়ে থাকেন এবং তারপরে কোনও লিঙ্কটি হোভার করেন এবং হিট করেন Cতবে অনুলিপিটি কার্যকর হয় না।
2. যদি আপনার কার্সার পৃষ্ঠার অন্য কোনও পাঠ্য ক্ষেত্রে থাকে তবে অনুলিপিটি কাজ করে না।
3. যদি আপনার কার্সার ঠিকানা বারে থাকে তবে অনুলিপিটি কার্যকর হয় না।

আমি # 1 টি সর্বদা একটি লুকানো স্প্যান করে সমাধান করেছি, যখন ব্যবহারকারী হিট করে Ctrl/ তৈরি করে তখন একটি তৈরি করে Cmd।

অস্থায়ীভাবে শূন্য দৈর্ঘ্যের নির্বাচন সাফ করে, কেরেটের অবস্থান সংরক্ষণ করে, অনুলিপিটি করে এবং ক্যারেটের অবস্থান পুনরুদ্ধার করে আমি # 2 সমাধান করেছি।

আমি এখনও # 3 এর জন্য কোনও সমাধান খুঁজে পাইনি :) (তথ্যের জন্য, আমার গিটহাব প্রকল্পে খোলার সমস্যাটি দেখুন)।

Comments

সুতরাং আপনি আসলে ট্রেলোর মতোই এটি করেছিলেন। মিষ্টি যখন এই জিনিসগুলি একত্রিত হয়

— টমাস আহলে

@ থমাসআহলে, আপনার অর্থ কী?

— পেসারিয়ার

@ পেসারিয়র, আমি ধরে নিয়েছি যে টমাস কনভারজেন্ট বিবর্তনকে নির্দেশ করেছেন - "... বিভিন্ন বংশের প্রজাতির মধ্যে একই বৈশিষ্ট্যের স্বতন্ত্র বিবর্তন"

— yoniLavi

পবিত্র গরু আপনি এই বিষয় সম্পর্কে একটি নতুন চ্যাট খুলতে পারেন

— carkod

Answer 3

রেইনকোটের ( গিটহাবের লিঙ্ক ) কোডের সাহায্যে, আমি সরল জাভাস্ক্রিপ্ট সহ ক্লিপবোর্ডে অ্যাক্সেস করে একটি চলমান সংস্করণ পেতে সক্ষম হয়েছি।

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 চাপতে হবে।

— ভাদিম ইভানভ

@ ভাদিমআইভানভ সত্য! কেউ জানে কেন?

— ফেলিক্স

@ don41382 আমি ঠিক জানি না কেন তবে আমি একটি সমাধান পেয়েছি। আপনার একটি ছোট্ট বাগ আছে, onKeyDown প্রথম বিবৃতিটি হওয়া উচিত যদি (! (E.ctrlKey || e.metaKey)) {ফেরত; } এর অর্থ হ'ল মেটাখে চেপে অনুলিপি করার জন্য আমাদের টেক্সারিয়া তৈরি করা দরকার (ট্রেলো থেকে আসা ছেলেরা এভাবে কৌশল চালিয়েছে)। এটি ট্রেলো ডট

— ভাদিম ইভানভ

@ ভাদিমআইভানভ ধন্যবাদ আমি উপরে এটি ঠিক করব।

— ফেলিক্স

এটি এফএফ 33.1 এ কাজ করছে না কারণ অপরিজ্ঞাত el.innerTextছিল, তাই আমি ক্রস-ব্রাউজারের আরও সামঞ্জস্যের জন্য clipboard()ফাংশনের শেষ লাইনটি পরিবর্তন করেছি clip.setValue(el.innerText || el.textContent);। লিঙ্ক: jsfiddle.net/AGEf7/31

— রেভানপ্রডিজালকাইট

Answer 4

ড্যানিয়েল লেচেমিন্যান্টের কোডটি কফিস্ক্রিপ্ট থেকে জাভাস্ক্রিপ্টে ( জেএস 2 কফি ) রূপান্তর করার পরে আমার পক্ষে কার্যকর হয়নি । এটি _.defer()লাইনে বোমা বর্ষণ করে চলেছে ।

আমি ধরে নিয়েছিলাম যে এটি jQuery স্থগিতের সাথে কিছু করার জন্য তাই আমি এটিকে পরিবর্তন করেছিলাম $.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

আপনি ইউআরএলটি সংক্ষিপ্ত করে রাখলে http://goo.gl তে খুব অনুরূপ কিছু দেখা যায় ।

এখানে একটি পঠনযোগ্য ইনপুট উপাদান রয়েছে যা CTRL-Cঅনুলিপি করার জন্য প্রোগ্রামটিমেটিকভাবে কেন্দ্রীভূত হয় tool

আপনি যখন শর্টকাটটি হিট করবেন তখন ইনপুট সামগ্রী কার্যকরভাবে ক্লিপবোর্ডে প্রবেশ করবে। সত্যিই সুন্দর :)