In October, Adobe updated the Flash Player to version 10, which included some security changes, like: “Setting the Clipboard will now have to be invoked through a button, keyboard shortcut, or some other event initiated by the user.”. This broke CopyPasteCharacter (and many other sites) for people running Flash 10. I had some ideas on how to solve workaround this a pretty long time ago but too little time to implement it until now.

We’re now having a fully working version which, since I couldn’t find any other solutions online, I thought could be useful for others/Google to know about.

The workaround I came up with is to use a hidden Flash movie which will get resized and moved to overlay the element/character where the user’s mouse is. This way, when the user clicks on the character, the Flash movie will receive the mouse event and therefore be allowed to set the system’s clipboard.

1. The mouse roll overs a character.
2. A JavaScript will resize and move the invisible Flash movie to match the character’s size and position
3. The flash movie receives the mouseover and mouseouts so JavaScript can set the element’s class name (like a faked :hover selector)
4. When (if?) the user clicks on the character, the click event will get received by the invisible Flash movie and not the document itself.
5. The Flash movie asks JavaScript for the characters to copy (Clipboard#textToCopy) since it differs a bit depending on which element was clicked. Also, Flash tells JS if the the alt/option key was pressed (so the copy-multiple-characters-at-once feature works).
6. The same #textToCopy function highlights the clicked element using the same code as we had for the Flash 9 version.

Here’s the code for the Flash movie (highlighted version)

import flash.external.*;

var text:String;

button.onRelease = function() {
  text = String(ExternalInterface.call("Clipboard.textToCopy", Key.isDown(KEY.ALT))) || ' ';
  System.setClipboard(text);
  trace('copied [' + text + ']');
}

button.onRollOver = function() {
  ExternalInterface.call('Clipboard.onFlashButtonOver');
}

button.onRollOut = function() {
  ExternalInterface.call('Clipboard.onFlashButtonOut');
}

The Clipboard class can be found here if you’re interested. It should keep the old behaviour for Flash 9 players but we had some problems with it in some browsers on Windows so right now all players get the updated code.

The character you click will automatically get copied into your clipboard, thanks to the flash technique mentioned here. However, I wrote my own JavaScript class to handle the clipboard and the buffer of clicked characters since you can hold down ‹alt› to copy multiple characters at once.

Here’s the source for the copy buffer class in case anyone’s interested.

The results turned up pretty good (at least compared to the first test), or perhaps I just like recursing functions.

var sortOrder = {
  'cat-no': ['cat-no', 'name', 'type', 'year'],
  'name':   ['name',   'type', 'year', 'cat_no'],
  'year':   ['year',   'name', 'type', 'cat_no'],
  'type':   ['type',   'name', 'year', 'cat_no']
};

function sort(order) {
  var ordering = sortOrder[order], length = ordering.length;
  $$('#projects > li').sort(function(left, right) {
    left = Project.find(left), right = Project.find(right);
    return (function(index) {
      var a = left.getSortValue(ordering[index]),
          b = right.getSortValue(ordering[index]);
      return a < b ? -1 : a > b ? 1 :
        index < length ? arguments.callee(++index) : 0;
    })(0);
  }).each(function(project) {
    project.parentNode.appendChild(project);
  });
}

Ajax.CachedRequest = Class.create(Ajax.Request, {
  initialize: function($super, url, options) {
    options = options || {};
    var onSuccess = options.onSuccess || Prototype.K;
    if (!Ajax.CachedRequest.cache[url] || options.reload) {
      options.onSuccess = function(transport) {
        Ajax.CachedRequest.cache[url] = transport.responseText;
        onSuccess(transport);
      }
      $super(url, options);
    } else {
      eval(Ajax.CachedRequest.cache[url]);
      this.dispatch.defer();
      [onSuccess, options.onComplete].each(function(m) { m && m() });
    }
  },

  dispatch: function() {
    Ajax.Responders.dispatch('onComplete', null);
  }
});

Ajax.CachedRequest.cache = {};

Of course this assumes you’re using the brand new Prototype 1.6

• Only Spinoffs checkins

• Without Spinoffs checkins

There has been a lot of action the past days in the Prototype SVN; the release of 1.5.1 RC4, the new DOM and Position branches and a lot of other work. Since I watch most of the tickets and changesets I thought I write something about what’s (might be) in the future for Prototype.

DOM branch

I was happy to see a patch I’ve been working on (#7476) to get included some days ago. It will define a new Element#writeAttribute method which will work together as the already existing #readAttribute to work around many issues browsers having with the native set/getAttribute methods (as always mostly in IE) but also to make chaining work:

$('my_image').writeAttribute('src', 'new-image.png').show();

The method will also accept a hash for the attributes to let you set multiple attributes at once:

$('my_image').writeAttribute({src: 'new-image.png', custom_attr: 'foo'}).show();

The patch will also make the Element object into a constructor for very easy and fast element creation (i.e. document.createElement wrapper):

var header = new Element('h1');

The constructor will also accept an optional attributes hash for the attributes (as seen above in the #writeAttribute method):

var header = new Element('h1', {id: 'myHeader'});

Of course chaining will work so for a simple image switcher with preloading you could do this:

<!-- html -->
<img src="thumbnail.jpg" id="thumbnail" hires="big.jpg">

// javascript
$('thumbnail').observe('click', function(event) {
    var thumb = Event.element(event),
      preloader = new Element('img', {src: thumb.readAttribute('hires')});
    preloader.observe('load', function(event) {
        thumb.writeAttribute('src', preloader.readAttribute('src'));
    });
});

Event Branch

I haven’t followed the event branch very closely but from the code and messages on the ML I’ve seen there should be new functionality for better garbage collection (to prevent memory leaks) and for e.g. easier removal of observers from elements.

Where you before had to manually collect all an element’s event listeners to be able to remove them later:

var listener1 = function(event) {...}.bindAsEventListener();
var listener2 = function(event) {...}.bindAsEventListener();

// start listening
$('myElement').observe('click', listener1);
$('myElement').observe('click', listener2);

// stop listening
$('myElement').stopObserving('click', listener1);
$('myElement').stopObserving('click', listener2);

you will now be able to remove all event listener for a specfic event:

$('myElement').stopObserving('click'); // or Event.stopObserving('myElement', 'click');

Other

Some other new additions worth mentioning are:

• Element#wrap
• Element#insert
• Function#defer, Function#delay, Function#curry, Function#wrap

But to not make this post too long you’ll have to read about it on your own (check the source and/or the changesets manually).

Please notice that all these are subject to change since it’s under development right now and might never get into any future release of Prototype.

[...]
var text = transport.responseText;
if (Browser.WebKit) {
    text = text.gsub('indicator_black.gif', function(match) {
        return match + '?' + new Date().valueOf() +
          Math.round(Math.random() * 5000);
    });
}
[...]

Note that it uses Prototype JavaScript framework and you should too.

(5).seconds() // => 5000
(2).weeks() + (2).hours() + (15).seconds() // => 1216815000
(1).week().fromNow().toDate() // => Fri Sep 22 2006 19:16:32 GMT+0200 (CEST)
var date = new Date(2000, 11, 18, 18, 15, 23);
(2).years().since(date).toDate() // => Thu Dec 19 2002 06:15:23 GMT+0100 (CET)

Thought it could be useful for others as well. You’ll need the latest prototype library, unit tests are included.

Download a zip with both .js file and unit tests or just the .js-file.

Download here