html.js.predm

//var bookmarklet = function() {
// BEGIN_NON_BOOKMARKLET_CODE
var bookmarklet =
// END_NON_BOOKMARKLET_CODE

(function() {

 // INSERT_GIF_JS_HERE

  var playGIF = function(gif) {
    var stream;
    var hdr;

    var loadError = false;

    var transparency = null;
    var delay = null;
    var disposalMethod = null;
    var lastDisposalMethod = null;
    var frame = null;

    var playing = true;
    var forward = true;

    var frames = [];

    var clear = function() {
      transparency = null;
      delay = null;
      lastDisposalMethod = disposalMethod;
      disposalMethod = null;
      frame = null;
      //frame = tmpCanvas.getContext('2d');
    };

    var doGet = function() {
      var h = new XMLHttpRequest();
      h.overrideMimeType('text/plain; charset=x-user-defined');
      h.onload = function(e) {
          //doLoadProgress(e);
          stream = new Stream(h.responseText);
          setTimeout(function() { parseGIF(stream, handler); }, 0);
      };
      //h.onprogress = doLoadProgress;
      h.onerror = doLoadError;
      h.open('GET', gif.src, true);
      h.send();
    };

    var doText = function(text) {
      toolbar.innerHTML = text; // innerText? Escaping? Whatever.
      //ctx.fillStyle = 'black';
      //ctx.font = '32px sans-serif';
      //ctx.fillText(text, 8, 32);
    };

    var doShowProgress = function(prefix, pos, length, draw) {
      //toolbar.style.display = pos === length ? 'none' : 'block';
      //toolbar.style.display = pos === length ? '' : 'block'; // FIXME Move this to doPlay() or something.
      toolbar.style.visibility = pos === length ? '' : 'visible'; // FIXME Move this to doPlay() or something.

      if (draw) {
        var height = Math.min(canvas.height >> 3, canvas.height);
        var top = (canvas.height - height) >> 1;
        var bottom = (canvas.height + height) >> 1;

        // XXX Figure out alpha fillRect.
        ctx.fillStyle = 'salmon';
        ctx.fillRect(0, top, canvas.width, height);

        ctx.fillStyle = 'teal';
        ctx.fillRect(0, top, (pos / length) * canvas.width, height);
      }

      doText(prefix + ' ' + Math.floor(pos / length * 100) + '%');
    };

    var doLoadProgress = function(e) {
      // TODO: Find out what lengthComputable actually means.
      if (e.lengthComputable) doShowProgress('Loading...', e.loaded, e.total, true);
    };

    var doDecodeProgress = function(draw) {
      // XXX
      doShowProgress('Decoding (frame ' + (frames.length + 1) + ')...', stream.pos, stream.data.length, draw);
    };

    var doLoadError = function(e) {
      var drawError = function() {
        ctx.fillStyle = 'black';
        ctx.fillRect(0, 0, hdr.width, hdr.height);
        ctx.strokeStyle = 'red';
        ctx.lineWidth = 3;
        ctx.moveTo(0, 0);
        ctx.lineTo(hdr.width, hdr.height);
        ctx.moveTo(0, hdr.height);
        ctx.lineTo(hdr.width, 0);
        ctx.stroke();
      };

      loadError = true;
      hdr = {width: gif.width, height: gif.height}; // Fake header.
      frames = [];
      drawError();
      setTimeout(doPlay, 0);
    };

    var doHdr = function(_hdr) {
      hdr = _hdr;
      //console.assert(gif.width === hdr.width && gif.height === hdr.height); // See other TODO.

      canvas.width = hdr.width;
      canvas.height = hdr.height;
      div.style.width = hdr.width + 'px';
      //div.style.height = hdr.height + 'px';
      toolbar.style.minWidth = hdr.width + 'px';

      tmpCanvas.width = hdr.width;
      tmpCanvas.height = hdr.height;
      //if (hdr.gctFlag) { // Fill background.
      //  rgb = hdr.gct[hdr.bgColor];
      //  tmpCanvas.fillStyle = 'rgba(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ',');
      //}
      //tmpCanvas.getContext('2d').fillRect(0, 0, hdr.width, hdr.height);
      // TODO: Figure out the disposal method business.
      doDecodeProgress(true);
    };

    var doGCE = function(gce) {
      pushFrame();
      clear();
      transparency = gce.transparencyGiven ? gce.transparencyIndex : null;
      delay = gce.delayTime;
      disposalMethod = gce.disposalMethod;
      // We don't have much to do with the rest of GCE.
      doDecodeProgress(true);
    };

    var pushFrame = function() {
      if (!frame) return;
      frames.push({data: frame.getImageData(0, 0, hdr.width, hdr.height),
                   delay: delay});
    };

    var doImg = function(img) {
      if (!frame) frame = tmpCanvas.getContext('2d');
      var ct = img.lctFlag ? img.lct : hdr.gct; // TODO: What if neither exists?

      var cData = frame.getImageData(img.leftPos, img.topPos, img.width, img.height);

      img.pixels.forEach(function(pixel, i) {
        // cData.data === [R,G,B,A,...]
        if (transparency !== pixel) { // This includes null, if no transparency was defined.
          cData.data[i * 4 + 0] = ct[pixel][0];
          cData.data[i * 4 + 1] = ct[pixel][1];
          cData.data[i * 4 + 2] = ct[pixel][2];
          cData.data[i * 4 + 3] = 255; // Opaque.
        } else {
          // TODO: Handle disposal method properly.
          // XXX: When I get to an Internet connection, check which disposal method is which.
          if (lastDisposalMethod === 2 || lastDisposalMethod === 3) {
            cData.data[i * 4 + 3] = 0; // Transparent.
            // XXX: This is very very wrong.
          } else {
            // lastDisposalMethod should be null (no GCE), 0, or 1; leave the pixel as it is.
            // assert(lastDispsalMethod === null || lastDispsalMethod === 0 || lastDispsalMethod === 1);
            // XXX: If this is the first frame (and we *do* have a GCE),
            // lastDispsalMethod will be null, but we want to set undefined
            // pixels to the background color.
          }
        }
      });
      frame.putImageData(cData, img.leftPos, img.topPos);
      // We could use the on-page canvas directly, except that we draw a progress
      // bar for each image chunk (not just the final image).
      ctx.putImageData(cData, img.leftPos, img.topPos);
      doDecodeProgress(true);
    };

    var doPlay = (function() {
        var i = -1;
        var curFrame;  // XXX These two are <input> tags. They're declared up here
                       // instead of in initToolbar's scope so that stepFrame has
                       // access to them. This is hacky and should be eliminated.
                       // (Maybe this should actually be a class instead of a
                       // cheap plastic imitation? At the very least it should be
                       // abstracted more.)
        var delayInfo;


        var showingInfo = false;
        var pinned = false;

        var stepFrame = function(delta) { // XXX: Name is confusing.
          i = (i + delta + frames.length) % frames.length;
          curFrame.value = i + 1;
          delayInfo.value = frames[i].delay;
          putFrame();
        };

        var step = (function() {
          var stepping = false;

          var doStep = function() {
            stepping = playing;
            if (!stepping) return;

            stepFrame(forward ? 1 : -1);
            var delay = frames[i].delay * 10;
            if (!delay) delay = 100; // FIXME: Should this even default at all? What should it be?
            setTimeout(doStep, delay);
          };

          return function() { if (!stepping) setTimeout(doStep, 0); };
        }());

        var putFrame = function() {
          ctx.putImageData(frames[i].data, 0, 0);
        };

        var initToolbar = function() {
          // Characters.
          var right = '&#9654;';
          var left = '&#9664;';
          var bar = '&#10073;';
          var rarr = '&rarr;';
          var larr = '&larr;';
          var xsign = '&#10006;';
          var infosource = '&#8505;';
          var circle = '&#9675;';
          var circledot = '&#8857;';
          var blackSquare = '&#9632;'; // XXX
          var doubleVerticalLine = '&#8214;'; // XXX
          // Buttons.
          var playIcon = right;
          var pauseIcon = bar + bar;
          var revplayIcon = left;
          var prevIcon = left + bar;
          var nextIcon = bar + right;
          //var showInfoIcon = infosource;
          var showInfoIcon = 'i'; // Fonts.
          var revIcon = larr;
          var revrevIcon = rarr;
          var closeIcon = xsign;
          var pinIcon = circledot;
          var unpinIcon = circle;

          /**
           * @param{Object=} attrs Attributes (optional).
           */ // Make compiler happy.
          var elt = function(tag, cls, attrs) {
            var e = document.createElement(tag);
            if (cls) e.className = 'jsgif_' + cls;
            for (var k in attrs) {
              e[k] = attrs[k];
            }
            return e;
          };

          var simpleTools = elt('div', 'simple_tools');
          var rev = elt('button', 'rev');
          var showInfo = elt('button', 'show_info');
          var prev = elt('button', 'prev');
          var playPause = elt('button', 'play_pause');
          var next = elt('button', 'next');
          var pin = elt('button', 'pin');
          var close = elt('button', 'close');

          var infoTools = elt('div', 'info_tools');
          curFrame = elt('input', 'cur_frame', {type: 'text'}); // See above.
          delayInfo = elt('input', 'delay_info', {type: 'text'}); // See above.

          var updateTools = function() {
            if (playing) {
              playPause.innerHTML = pauseIcon;
              prev.style.visibility = 'hidden'; // See TODO.
              next.style.visibility = 'hidden';
            } else {
              playPause.innerHTML = forward ? playIcon : revplayIcon;
              prev.style.visibility = '';
              next.style.visibility = '';
            }

            toolbar.style.visibility = pinned ? 'visible' : ''; // See TODO.

            infoTools.style.display = showingInfo ? '' : 'none'; // See TODO.

            showInfo.innerHTML = showInfoIcon;
            rev.innerHTML = forward ? revIcon : revrevIcon;
            prev.innerHTML = prevIcon;
            next.innerHTML = nextIcon;
            pin.innerHTML = pinned ? unpinIcon : pinIcon;
            close.innerHTML = closeIcon;

            curFrame.disabled = playing;
            delayInfo.disabled = playing;

            toolbar.innerHTML = '';
            simpleTools.innerHTML = '';
            infoTools.innerHTML = '';

            if (frames.length < 2) { // XXX
              // Also, this shouldn't actually be playing in this case.
              // TODO: Are we going to want an info tool that'll be displayed on static GIFs later?
              toolbar.appendChild(close);
              return;
            }

            var t = function(text) {
              return document.createTextNode(text);
            };

            // We don't actually need to repack all of these -- that's left over
            // from before -- but it doesn't especially hurt either.
            var populate = function(elt, children) {
              elt.innerHTML = '';
              children.forEach(function(c) { elt.appendChild(c); });
              //children.forEach(elt.appendChild); // Is this a "pseudo-function"?
            };

            // XXX Blach.
            var simpleToolList = forward ? [showInfo, rev, prev, playPause, next, pin, close]
                                         : [showInfo, rev, next, playPause, prev, pin, close];
            populate(toolbar, [simpleTools, infoTools]);
            populate(simpleTools, simpleToolList);
            populate(infoTools, [t(' frame: '), curFrame, t(' / '), t(frames.length), t(' (delay: '), delayInfo, t(')')]);
          };

          var doRev = function() {
            forward = !forward;
            updateTools();
            rev.focus(); // (because repack)
          };

          var doNextFrame = function() { stepFrame(1); };
          var doPrevFrame = function() { stepFrame(-1); };

          var doPlayPause = function() {
            playing = !playing;
            updateTools();
            playPause.focus(); // In case this was called by clicking on the
                               // canvas (we have to do this here because we
                               // repack the buttons).
            step();
          };

          var doCurFrameChanged = function() {
            var newFrame = +curFrame.value;
            if (isNaN(newFrame) || newFrame < 1 || newFrame > frames.length) {
              // Invalid frame; put it back to what it was.
              curFrame.value = i + 1;
            } else {
              i = newFrame - 1;
              putFrame();
            }
          };

          var doCurDelayChanged = function() {
            var newDelay = +delayInfo.value;
            if (!isNaN(newDelay)) {
              frames[i].delay = newDelay;
            }
          };

          var doToggleShowingInfo = function() {
            showingInfo = !showingInfo;
            updateTools();
            showInfo.focus(); // (because repack)
          };

          var doTogglePinned = function() {
            pinned = !pinned;
            updateTools();
            pin.focus(); // (because repack)
          };

          // TODO: If the <img> was in an <a>, every one of these will go to the
          // URL. We don't want that for the buttons (and probably not for
          // anything?).
          showInfo.addEventListener('click', doToggleShowingInfo, false);
          rev.addEventListener('click', doRev, false);
          curFrame.addEventListener('change', doCurFrameChanged, false);
          prev.addEventListener('click', doPrevFrame, false);
          playPause.addEventListener('click', doPlayPause, false);
          next.addEventListener('click', doNextFrame, false);
          pin.addEventListener('click', doTogglePinned, false);
          close.addEventListener('click', doClose, false);

          delayInfo.addEventListener('change', doCurDelayChanged, false);

          canvas.addEventListener('click', doPlayPause, false);

          // For now, to handle GIFs in <a> tags and so on. This needs to be handled better, though.
          div.addEventListener('click', function(e) { e.preventDefault(); }, false);

          updateTools();
        };

        return function() {
          setTimeout(initToolbar, 0);
          if (loadError) return;
          canvas.width = hdr.width;
          canvas.height = hdr.height;
          step();
        };
    }());

    var doClose = function() {
      playing = false;
      parent.insertBefore(gif, div);
      parent.removeChild(div);
    };

    // FIXME: It makes some sense for each function to do decodeProgress (so we
    // can use the information), but that still doesn't mean each one should do
    // it explicitly.
    var handler = {
      hdr: doHdr,
      gce: doGCE,
      com: function() { doDecodeProgress(true); }, // I guess that's all for now.
      app: {
        NETSCAPE: function(block) {
          doDecodeProgress(true);
          // TODO: Is there much point in actually supporting iterations?
        }
      },
      img: doImg,
      eof: function() {
        //toolbar.style.display = '';
        pushFrame();
        doDecodeProgress(true);
        doText('Playing...');
        doPlay();
      }
    };

    var parent = gif.parentNode;

    var div = document.createElement('div');
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    var toolbar = document.createElement('div');

    var tmpCanvas = document.createElement('canvas');

    // This is our first estimate for the size of the picture. It might have been
    // changed so we'll correct it when we parse the header. TODO: Handle zoom etc.
    canvas.width = gif.width;
    canvas.height = gif.height;
    toolbar.style.minWidth = gif.width + 'px';

    div.className = 'jsgif';
    toolbar.className = 'jsgif_toolbar';
    div.appendChild(canvas);
    div.appendChild(toolbar);

    parent.insertBefore(div, gif);
    parent.removeChild(gif);

    doText('Loading...');
    doGet();
  };

  var bookmarkletCSS = '/* INSERT_CSS_HERE */';

  var insertCSS = function(css) { // Surely there's a much better way of handling this whole thing.
    // XXX: If there isn't a better way of handling this: Should we remove the <style> tag when the bookmarklet is done?
    var style = document.createElement('style');
    style.type = 'text/css';
    style.textContent = css; // See TODO.
    document.body.appendChild(style);
  };

  var to_a = function(pseudoList) { // Blagh, delicious DOM. I'll do this for now.
    var a = [];
    for (var i = 0; i < pseudoList.length; i++) {
      a.push(pseudoList[i]);
    }
    return a;
  };

  // There *has* to be a better way of doing this. This is just... Temporary. That's right, temporary.
  var join = function(strings, between) {
    if (between === undefined) between = '';
    return strings.reduce(function(s, n) { return s + between + n; }, '');
  };
  var elemClasses = function(elem) {
    return elem.className.split(/\s/);
  };
  var addClass = function(elem, cls) {
    elem.className += ' ' + cls;
  };
  var removeClass = function(elem, cls) {
    var classes = elemClasses(elem).filter(function(_cls) { return _cls !== cls; });
    elem.className = join(classes, ' ');
  };

  var gifs = to_a(document.getElementsByTagName('img')).filter(function(img) {
    return img.src.slice(-4).toLowerCase() === '.gif';
    // This is a very cheap plastic imitation of checking the MIME type -- I've
    // seen GIFs with no extension (or, even worse, ending in .jpg). I can't
    // see a good way of figuring out if an image is a GIF, though, so this
    // will have to do for now. TODO.
  });

  var clicked = function(e) {
    var gif = this; // eventListener context
    gifs.forEach(rmOverlay);
    setTimeout(function() { playGIF(gif); }, 0);
    e.preventDefault();
  };

  var mkOverlay = function(gif) {
    if (elemClasses(gif).indexOf('jsgif_overlaid') !== -1) return; // Idempotent.
    addClass(gif, 'jsgif_overlaid');
    gif.addEventListener('click', clicked, false);
  };

  var rmOverlay = function(gif) {
    // XXX: What if the bookmarklet was run more than once?
    removeClass(gif, 'jsgif_overlaid');
    gif.removeEventListener('click', clicked, false);
  };

  //var clicked = function() {
  //  var gif = overlay_to_gif(this);
  //  gifs.forEach(rmOverlay);
  //  setTimeout(function() { playGIF(gif); }, 0);
  //};

  //var mkOverlay = function(gif) {
  //  var overlayOuter = document.createElement('div');
  //  overlayOuter.className = 'jsgif_overlay_outer';
  //  var overlayInner = document.createElement('div');
  //  overlayInner.className = 'jsgif_overlay_inner';
  //  var parent = gif.parentNode;
  //  parent.insertBefore(overlayOuter, gif);
  //  parent.removeChild(gif);
  //  overlayOuter.appendChild(gif);
  //  overlayOuter.appendChild(overlayInner);
  //  overlayInner.addEventListener('click', clicked, false);
  //};

  //var clearOverlay = function(gif) {
  //  var overlayOuter = gif.parentNode;
  //  var parent = overlayOuter.parentNode;
  //  overlayOuter.removeChild(gif);
  //  parent.insertBefore(gif, overlayOuter);
  //  parent.removeChild(overlayOuter);
  //};

  //var overlay_to_gif = function(overlayInner) {
  //  // We get overlayInner because that's what the event handler is on.
  //  return overlayInner.previousSibling;
  //};

  insertCSS(bookmarkletCSS);

  // XXX: In retrospect, this behavior is more confusing than useful.
  //if (gifs.length === 1) {
  //  setTimeout(function() { playGIF(gifs[0]); }, 0);
  //  return;
  //}

  gifs.forEach(mkOverlay);
}

// BEGIN_NON_BOOKMARKLET_CODE
/*
// END_NON_BOOKMARKLET_CODE
()
// BEGIN_NON_BOOKMARKLET_CODE
*/
// END_NON_BOOKMARKLET_CODE
);