Tuesday, October 23, 2012

TypeR gets copy and paste

Two new features of TypeR 1.1 i want to discuss right now are copy and paste. Everyone knows what that is, right? You have some toolbar buttons, and also keyboard shortcuts. If you have something selected, it copies the selection, or pastes over it. Well, TypeR isn't that advanced - yet. I'd like it to be in the future, but i'm not thinking too much about that yet.

Copy

Copy only has a button right now. I wanted to implement a keyboard shortcut (the classic ctrl+c), but the platform i'm using to support copy doesn't seem to be able to work with a keyboard shortcut. I contacted the developer, but he hasn't gotten back to me yet. I'm using the zClip jQuery extension.

Anyways, as you can see if you look at the alpha, the button says "copy all". You're thinking, what, i can't copy only what i selected? I'm afraid not. Don't worry, this button is still extremely useful! In 1.0, people had to carefully select all the text, which is in itself prone to errors, and then copy. In 0.1.0, people couldn't even press the keyboard shortcut, due to a bug fixed in 0.1.1! They had to right-click and copy from there. Sometimes the cursor would tag along with the copied text, which is obviously annoying. (Instead of using an actual cursor, i use a pipe ( | ) that was programmed to flash.
Now, it's just one click of a button!

Paste

Now, interestingly enough, paste is the opposite of copy - it only has a keyboard shortcut. There's a button, but it only works in IE. In other browsers, it gives you a message: Sorry, but your browser doesn't allow this button due to security. Please press ctrl+v instead. Here, it will paste at the location of the cursor. If something is selected, it won't over-write it, though. Selecting isn't really supported except for native browser implements.

Warning: technical description in this paragraph. When the paste button is clicked, it sniffs for the window.clipboardData object. Why not just check if it's IE? A) Not all versions of IE might support it; B) Other browsers might eventually support it. If it's not supported, it gives the alert. If it is, it calls the same function that the shortcut does. I'll expound on this after i tell how the shortcut works.
When ctrl+v is pressed, a paste event is automatically sent to the browser. I didn't take advantage of this, and simply check whether ctrl+v is pressed when a key event is sent. Whatever. A non-visible, but not hidden, <input type="text" /> is focused now, before the event finishes running. How is it invisible but not hidden? By setting the width to 1px, so it doesn't take up space, and opacity to 0, so that you can't even see the 1px. After 20 milliseconds, which should be long enough for it to be pasted, the input loses focus, which fires the onchange event. Now this is where it gets parsed. The function called now reads the contents of the input. For each item, it adds it as a character (without saving the revision). When done, it updates (saving the revision). Then, so that new pastes aren't appended to the previous ones, it clears the input.
In IE, pressing the button fills the input with the contents of the clipboard. This calls onchange, and i already explained what happens then.

Summary

So, i'm posting this to let you know more about what's coming pretty soon. But, i'd also like some coding help with these. If anyone knows how to fire zClip for an element through code, or if anyone knows ways for other browsers to access the clipboard, please comment, or email it to me. Thanks, everyone!

No comments:

Post a Comment