ට්‍රෙලෝ පරිශීලකයාගේ ක්ලිප් පුවරුවට ප්‍රවේශ වන්නේ කෙසේද?

විට ඔබට සැරිසරන්න දී කාඩ් කට Trello සහ මාධ්ය Ctrl+ C, මේ කාඩ් URL එක අලවන්න පිටපත් කර ඇත. ඔවුන් මෙය කරන්නේ කෙසේද?

මට කිව හැකි තාක් දුරට ෆ්ලෑෂ් චිත්‍රපටයක් සම්බන්ධ නොවේ. මම ෆ්ලෑෂ් බ්ලොක් ස්ථාපනය කර ඇති අතර ෆයර්ෆොක්ස් ජාල පටිත්තෙහි කිසිදු ෆ්ලෑෂ් චිත්‍රපටයක් පටවා නොමැති බව පෙන්වයි. (එය සාමාන්‍ය ක්‍රමයයි, උදාහරණයක් ලෙස, සීරෝ ක්ලිප්බෝඩ්.)

ඔවුන් මෙම මායාව සාක්ෂාත් කරගන්නේ කෙසේද?

(දකුණේ මේ මොහොතේ මම මම එපිෆනි තිබුණා හිතන්නේ: ඔබ පිටුවේ තෝරාගත් පෙළ නොහැකි, මම ඔවුන් JavaScript කේතය හරහා පෙළ තෝරා නිර්මාණය එහිදී අදෘශ්යමාන අංගයක්, ඇති, උපකල්පනය එසේ Ctrl+ Cබව නොපෙනෙන පිටපත්, බ්රව්සරය පෙරනිමි හැසිරීම මූලික හේතුව node හි පෙළ අගය.)

අනාවරණය: මම ට්‍රෙලෝ භාවිතා කරන කේතය ලිව්වා ; පහත කේතය ක්ලිප්බෝඩ් උපක්‍රමය ඉටු කිරීම සඳහා ට්‍රෙලෝ භාවිතා කරන සත්‍ය ප්‍රභව කේතයයි.

අපි ඇත්ත වශයෙන්ම "පරිශීලකයාගේ ක්ලිප් පුවරුවට පිවිසෙන්නේ නැත", ඒ වෙනුවට අපි පරිශීලකයා 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>

ක්ලිප්බෝඩ් දේවල් සඳහා 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;
}

... සහ CSS මඟින් එය නිපදවන බැවින් ඔබට එය පෙළපොත් දර්ශනය වන විට සැබවින්ම නොපෙනේ ... නමුත් එය පිටපත් කිරීමට තරම් "දෘශ්‍යමාන" වේ.

ඔබ කාඩ්පතක් උඩින් සැරිසරන විට, එය අමතයි

TrelloClipboard.set(cardUrl)

... එබැවින් Ctrlයතුර එබූ විට තෝරාගත යුතු දේ ක්ලිප්බෝඩ් සහයකයා දනී .

මම සැබවින්ම ක්‍රෝම් දිගුවක් ගොඩනඟා ඇති අතර එය හරියටම මෙය සිදු කරයි, සහ සියලු වෙබ් පිටු සඳහා. ප්‍රභව කේතය GitHub හි ඇත.

ට්‍රෙලෝගේ ප්‍රවේශය සමඟ දෝෂ තුනක් මට හමු විය, එය මා විසින්ම මුහුණ දුන් නිසා මම දනිමි :)

මෙම අවස්ථා වලදී පිටපත ක්‍රියා නොකරයි:

1. ඔබ දැනටමත් Ctrlඑබීමෙන් පසුව සබැඳියක් තබා පහරක් එල්ල කර Cඇත්නම්, පිටපත ක්‍රියා නොකරයි.
2. ඔබගේ කර්සරය පිටුවේ වෙනත් පෙළ ක්ෂේත්‍රයක තිබේ නම්, පිටපත ක්‍රියා නොකරයි.
3. ඔබගේ කර්සරය ලිපින තීරුවේ තිබේ නම්, පිටපත ක්‍රියා නොකරයි.

මම හැම විටම ඒ වෙනුවට භාවිතා කරන්නන්ගේ පහර එක් නිර්මාණය වඩා, සැඟවුණු කාලයක් සහිත විසින් # 1 විසඳා Ctrl/ Cmd.

මම # 2 විසඳුවේ ශුන්‍ය දිග තේරීම තාවකාලිකව ඉවත් කිරීම, භාරකාර ස්ථානය සුරැකීම, පිටපත සිදු කිරීම සහ භාරකාර ස්ථානය යථා තත්වයට පත් කිරීමෙනි.

මම තවමත් # 3 සඳහා විසඳුමක් සොයාගෙන නැත :) (තොරතුරු සඳහා, මගේ GitHub ව්‍යාපෘතියේ විවෘත නිකුතුව පරීක්ෂා කරන්න).

වැහි කබායේ ( 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");

එකම ගැටළුව නම්, මෙම අනුවාදය ක්‍රියාත්මක වන්නේ ක්‍රෝම් සමඟ පමණි. Trello වේදිකාව සියලුම බ්‍රව්සර් සඳහා සහය දක්වයි. මට නැති වී ඇත්තේ කුමක්ද?

වඩිම් ඉවානොව්ට ස්තූතියි.

වැඩ කරන උදාහරණයක් බලන්න: http://jsfiddle.net/AGEf7/

කෝපි ස්ක්‍රිප්ට් සිට ජාවාස්ක්‍රිප්ට් ( js2coffee ) බවට පරිවර්තනය කිරීමෙන් පසුව ඩැනියෙල් ලී කෙමිනන්ට්ගේ කේතය මට වැඩ කළේ නැත . එය දිගින් දිගටම බෝම්බ _.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;

})());

ඔබ URL කෙටි කළ විට ඉතා සමාන දෙයක් http://goo.gl හි දැකිය හැකිය .

CTRL-Cපිටපත් කිරීම සඳහා මෙවලම් මුද්‍රණ යන්ත්‍රය සමඟ ක්‍රමලේඛගතව අවධානය යොමු කරන කියවීමට පමණක් ආදාන අංගයක් ඇත.

ඔබ එම කෙටිමඟට පහර දුන් විට, ආදාන අන්තර්ගතය cl ලදායි ලෙස ක්ලිප් පුවරුවට ඇතුල් වේ. ඇත්තටම හොඳයි :)