Bookmarklet templates for #rusichackday

01_basic.js

/**
 * Basic bookmarklet template.
 *
 * Change the `iframeSrc` variable to point to your space's new idea
 * page. You can adjust the iframe styles and position using the
 * `iframeStyle` variable.
 *
 * For turning this script into a bookmarklet, you should probably take
 * a look at https://gist.github.com/1856012.
 */
(function() {

  // This is the page that will display inside the iframe.
  var iframeSrc = 'http://hectic.rusic.com/ideas/new';

  // Styles for the iframe.
  var iframeStyle = 'position: fixed; z-index: 999999; width: 500px; height: 300px; right: 0; top: 0; border: none; overflow: hidden; background-color: white;';

  // Create an iframe element and set some attributes.
  var iframe = document.createElement('iframe');

  // Pass the current url across to the space.
  iframe.setAttribute('src', iframeSrc + '?custom1=' + encodeURIComponent(window.location.href));

  iframe.setAttribute('id', 'rusic-modal');
  iframe.setAttribute('style', iframeStyle);

  // Inject the iframe into the host page.
  var body = document.getElementsByTagName('body')[0];
  body.appendChild(iframe);

}).call(this);

02_scraper.js

/**
 * Scraper bookmarklet template.
 *
 * This is an example of scraping the page for the first image, then posting that
 * across to the space. As with the AJAX example, you could scrape anything from
 * the page, or multiple things, and post them all to the space.
 */
(function() {

  var iframeSrc = 'http://hectic.rusic.com/ideas/new';
  var iframeStyle = 'position: fixed; z-index: 999999; width: 500px; height: 300px; right: 0; top: 0; border: none; overflow: hidden; background-color: white;';

  // Scrape the first image from the page and grab it's `src` attribute.
  var firstImage = document.querySelectorAll('img')[0].src;

  var iframe = document.createElement('iframe');

  // Send the firstImage to the iframe in the src attribute.
  iframe.setAttribute('src', iframeSrc + '?custom1=' + encodeURIComponent(firstImage));
  iframe.setAttribute('id', 'rusic-modal');
  iframe.setAttribute('style', iframeStyle);

  // Inject the iframe into the host page.
  var body = document.getElementsByTagName('body')[0];
  body.appendChild(iframe);


}).call(this);

03_ajax.js

/**
 * AJAX Vimeo OEmbed bookmarklet template.
 *
 * Vimeo provides an OEmbed API, this looks up the video metadata based on
 * the url, then posts the video_id across to rusic as a custom field. This
 * can be read in your theme in order to embed the video.
 *
 * This could be changed to lookup pretty much anything that is exposed over
 * a JSONP or CORS compatible API.
 *
 * Bear in mind that you can post more than one piece of custom data.
 */
(function() {

  var iframeSrc = 'http://hectic.rusic.com/ideas/new';
  var iframeStyle = 'position: fixed; z-index: 999999; width: 500px; height: 300px; right: 0; top: 0; border: none; overflow: hidden; background-color: white;';

  // Grab the video id from the vimeo oembed api, then post it across to the space.
  var xhr = new XMLHttpRequest();

  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {

      // Get the video_id from the JSON response.
      var videoId = JSON.parse(xhr.responseText).video_id

      var iframe = document.createElement('iframe');

      // Send the videoId to the space in the src attribute of the iframe.
      iframe.setAttribute('src', iframeSrc + '?custom1=' + encodeURIComponent(videoId));

      iframe.setAttribute('id', 'rusic-modal');
      iframe.setAttribute('style', iframeStyle);

      var body = document.getElementsByTagName('body')[0];
      body.appendChild(iframe);
    }
  };

  xhr.open('GET', 'http://vimeo.com/api/oembed.json?url=' + encodeURIComponent(window.location.href), true);
  xhr.send(null);

}).call(this);

For a script to compile bookmarklets, check out the comments on this gist.