How does Trello access the user's clipboard?
Disclosure: I wrote the code that Trello uses; the code below is the actual source code Trello uses to accomplish the clipboard trick.
We don't actually "access the user's clipboard", instead we help the user out a bit by selecting something useful when they press Ctrl+C.
Sounds like you've figured it out; we take advantage of the fact that when you want to hit Ctrl+C, you have to hit the Ctrl key first. When the Ctrl key is pressed, we pop in a textarea that contains the text we want to end up on the clipboard, and select all the text in it, so the selection is all set when the C key is hit. (Then we hide the textarea when the Ctrl key comes up.)
Specifically, Trello does this:
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) ->
In the DOM we've got:<div id="clipboard-container"><textarea id="clipboard"></textarea></div>
CSS for the clipboard stuff:#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;
}
... and the CSS makes it so you can't actually see the textarea when it pops in ... but it's "visible" enough to copy from.When you hover over a card, it calls
TrelloClipboard.set(cardUrl)
... so then the clipboard helper knows what to select when the Ctrl key is pressed. Does Trello provide a way to identify who created a card?
You can find the author of the card using actions
, like this:
Trello.get('/cards/CARD_ID_HERE/actions?action_memberCreator_fields')
It is under the arguments for GET /1/cards/[card id or shortlink] here: https://developers.trello.com/advanced-reference/card#get-1-cards-card-id-or-shortlinkYou can also get a list of all your cards like this:
Trello.get('/members/me/cards')
and use the field idBoard
to filter only cards for specific board. How does Trello handle rearrangement of cards, lists, checklists etc
Each item is given a pos
(a JavaScript number, so double-precision float). Then, they are rendered by sorting by pos
.
When a new item is added, it's pos
is based on where in the list it is:
- bottom of list - maximum
pos
currently in the list + a buffer (I think1024
is used) - top of list - minimum
pos
currently in the list divided by two - middle of list - average of
pos
of the two adjacent items
"top"
or "bottom"
in which case the server will perform the logic.On the server, after assigning the pos
to the new item as shown above, the item is checked against its nearest neighbors for adjacency - if they are less than a minimum distance apart (.01
is used, I believe), they are spread out (potentially cascading into increasing the pos
of the entire list).
I don't think this is the ideal way, but it is how Trello does it.
How to access the trello API from within a powerup?
Since your power-up is run through an iframe, it's not actually coming from the Trello page itself so you need to specify your API key and token in the GET URL.
Example:
https://api.trello.com/1/boards/560bf4298b3dda300c18d09c?fields=name,url&key={YOUR-API-KEY}&token={AN-OAUTH-TOKEN}
The info for getting your API key and token can be found here: https://trello.readme.io/v1.0/reference#api-key-tokens
Related Topics
JavaScript Displaying a Float to 2 Decimal Places
Node.Js Piping the Same Readable Stream into Multiple (Writable) Targets
How to Make a Directive Update Ng-Model on Jquery on Event
Angular Ui-Router $Urlrouterprovider .When Not Working When I Click <A Ui-Sref="...">
Gmail Extension, Sendmessage to Background from Page Context
How to Write Regex to Validate Dates
How to Detect If JavaScript Files Are Loaded
Differencebetween Settimeout(Fn, 0) and Settimeout(Fn, 1)
JavaScript Curry: What Are the Practical Applications
How to Get the Focused Element with Jquery
Problems with Circular Dependency and Oop in Angularjs
What Causes the Error "Can't Execute Code from a Freed Script"
Click Everywhere But Here Event
What Is Ngdefaultcontrol in Angular
Scope of Default Function Parameters in JavaScript
How to Stop Intense JavaScript Loop from Freezing the Browser