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.

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 →