Category: JavaScript

link

Thomas and Amy apparently don’t have enough awesome stuff going on yet, so they’ve decided to release a book on JavaScript performance. Thomas tells me his findings have some implications for how we package Prototype & script.aculo.us.

code
1

Code: Disabling text selection

Inspired by Thomas’s classic and event delegation.

/**
 *  Element.enableTextSelection(element, isEnabled)
 *  
 *  Enables or disables text selection within the given element.
 *  - element (Element): The element within which a dragging motion
 *    _should_ or _should not_ behave like text selection.
 *  - isEnabled (boolean): Whether to enable or disable text selection.
**/
(function() {
  var IGNORED_ELEMENTS = [];
  function _textSelectionHandler(event) {
    var element = Event.element(event);
    if (!element) return;
    for (var i = 0, node; node = IGNORED_ELEMENTS[i]; i++) {
      if (element === node || element.descendantOf(node)) {
        Event.stop(event);
        break;
      }
    }
  }
  
  if (document.attachEvent)
    document.onselectstart = _textSelectionHandler.bindAsEventListener(window);    
  else
    document.observe('mousedown', _textSelectionHandler);
    

  Element.addMethods({
    enableTextSelection: function(element, isEnabled) {
      if (isEnabled) {
        IGNORED_ELEMENTS = IGNORED_ELEMENTS.without(element);
      } else {
        if (!IGNORED_ELEMENTS.include(element))
          IGNORED_ELEMENTS.push(element);
      }
    }
  });
})();
link
1

This image “evolution” simulator would be a good benchmark for the up‐and‐coming JavaScript engines… but, sadly, Google Chrome doesn’t yet support Canvas#getImageData. Anyway, both Firefox 3.1b2 and the latest WebKit nightly do very well.

link

No Labs Love for Google Apps. This domain’s e‐mail account is hosted by Google Apps — and I use Mail.app to read my e‐mail — so the fact that GApps seems to be branched off from all the cool Gmail features is an annoyance for me, too. Good to hear that someone’s trying to fix it.

code

Auto-format Tweets

Used on my “About” page.

(function() {  
  var USERNAMES = /@([A-Za-z0-9_]*)\b/;
  var URLS      = /https?:\/\/([-\w\.]+)+(:\d+)?(\/([\w\/_\.]*(\?\S+)?)?)?/;
  
  function getInnerText(element) {
    element = $(element);
    return element.innerText && !window.opera ? element.innerText :
     element.innerHTML.stripScripts().unescapeHTML().replace(/[\n\r\s]+/g, ' ');
  }
  
  function linkifyTweet(li) {
    var html = li.innerHTML, text = getInnerText(li);

    text.scan(URLS, function(match) {
      html = html.sub(match[0], '<a href="#{0}">#{0}');
    });    
    html = html.gsub(USERNAMES, '<a href="http://twitter.com/#{1}/">#{0}');
    li.update(html);
  }
  
  function init() {
    $('twitter').select('li > span.tweet').each(linkifyTweet);
  }  

  document.observe('dom:loaded', init);  
})();

Animating the YouTube Arrow

Posted in JavaScript, Web

Whenever I drift into one of my twice‐weekly YouTube stream‐of‐consciousness video‐watching binges, I let myself be bothered by a small, inconsequential nitpick. Here’s the “Related Videos” heading in its collapsed state: And here it is in its expanded state: Though there’s no animation between these two states, I’ve always considered

Read more →