chrismytton · January 14, 2012 14:51 · Feb 18, 2012 · Feb 18, 2012 · Feb 18, 2012 · Feb 18, 2012
diff --git a/01_basic.js b/01_basic.js
@@ -18,7 +18,10 @@
 
   // Create an iframe element and set some attributes.
   var iframe = document.createElement('iframe');
-  iframe.setAttribute('src', iframeSrc);
+
+  // 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);
 

diff --git a/03_scraper.js → 02_scraper.js b/03_scraper.js → 02_scraper.js
diff --git a/02_ajax.js → 03_ajax.js b/02_ajax.js → 03_ajax.js
diff --git a/03_scraper.js b/03_scraper.js
@@ -0,0 +1,28 @@
+/**
+ * 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);
diff --git a/02_ajax.js b/02_ajax.js
@@ -27,7 +27,7 @@
       var iframe = document.createElement('iframe');
 
       // Send the videoId to the space in the src attribute of the iframe.
-      iframe.setAttribute('src', iframeSrc + '?custom1=' + videoId);
+      iframe.setAttribute('src', iframeSrc + '?custom1=' + encodeURIComponent(videoId));
 
       iframe.setAttribute('id', 'rusic-modal');
       iframe.setAttribute('style', iframeStyle);

diff --git a/01_basic.js b/01_basic.js
@@ -11,7 +11,7 @@
 (function() {
 
   // This is the page that will display inside the iframe.
-  var iframeSrc = 'http://hq.rusic.com/ideas/new';
+  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;';

diff --git a/02_ajax.js b/02_ajax.js
@@ -12,7 +12,7 @@
  */
 (function() {
 
-  var iframeSrc = 'http://hq.rusic.com/ideas/new';
+  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.

diff --git a/02_ajax.js b/02_ajax.js
@@ -12,22 +12,26 @@
  */
 (function() {
 
-  // This is the page that will display inside the iframe.
   var iframeSrc = 'http://hq.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;';
 
   // 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');
-      iframe.setAttribute('src', iframeSrc + '?custom1=' + JSON.parse(xhr.responseText).video_id);
+
+      // Send the videoId to the space in the src attribute of the iframe.
+      iframe.setAttribute('src', iframeSrc + '?custom1=' + videoId);
+
       iframe.setAttribute('id', 'rusic-modal');
       iframe.setAttribute('style', iframeStyle);
+
       var body = document.getElementsByTagName('body')[0];
       body.appendChild(iframe);
     }

diff --git a/basic.js → 01_basic.js b/basic.js → 01_basic.js
diff --git a/ajax.js → 02_ajax.js b/ajax.js → 02_ajax.js
diff --git a/ajax.js b/ajax.js
@@ -0,0 +1,39 @@
+/**
+ * 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() {
+
+  // This is the page that will display inside the iframe.
+  var iframeSrc = 'http://hq.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;';
+
+  // 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) {
+      var iframe = document.createElement('iframe');
+      iframe.setAttribute('src', iframeSrc + '?custom1=' + JSON.parse(xhr.responseText).video_id);
+      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);
diff --git a/index.js b/index.js
@@ -1,21 +0,0 @@
-(function(document) {
-
-  // 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) {
-      var iframe = document.createElement('iframe');
-      iframe.setAttribute('src', 'http://hectic.rusic.com/ideas/new?custom1=' + JSON.parse(xhr.responseText).video_id);
-      iframe.setAttribute('id', 'rusic-modal');
-      iframe.setAttribute('style', 'position: fixed; z-index: 999999; width: 500px; height: 300px; right: 0; top: 0; border: none; overflow: hidden;');
-      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);
-
-})(document);

diff --git a/basic.js b/basic.js
@@ -0,0 +1,29 @@
+/**
+ * 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://hq.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');
+  iframe.setAttribute('src', iframeSrc);
+  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);
diff --git a/index.js b/index.js
@@ -0,0 +1,21 @@
+(function(document) {
+
+  // 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) {
+      var iframe = document.createElement('iframe');
+      iframe.setAttribute('src', 'http://hectic.rusic.com/ideas/new?custom1=' + JSON.parse(xhr.responseText).video_id);
+      iframe.setAttribute('id', 'rusic-modal');
+      iframe.setAttribute('style', 'position: fixed; z-index: 999999; width: 500px; height: 300px; right: 0; top: 0; border: none; overflow: hidden;');
+      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);
+
+})(document);