Search typeahead

.gitignore

@@ -0,0 +1,11 @@
+# Ignore IntelliJ
+*.iml
+*.idea
+
+# Ignore OS X
+*.DS_Store
+
+# Ignore vim
+*~
+*.swp
+*.swo

README → README.md

@@ -4,11 +4,10 @@ integrates Asana into your web experience in the following ways:
 
   * Creates a button in your button-bar which, when clicked, pops up a
     QuickAdd window to create a new task associated with the current web page.
-    It will populate the task name with the page title by default, and
-    put the URL in the notes, along with any text you may have selected
-    when you pressed the button.
+    You can click a button to populate the task name with the page title and
+    the URL and current selected text in the notes.
 
-  * Installs the special Asana TAB+Q keyboard shortcut. When this key combo
+  * Installs the special Asana ALT+A keyboard shortcut. When this key combo
     is pressed from any web page, it brings up the same popup.
     This functionality will operate on any window opened after the extension
     is loaded.
@@ -35,4 +34,9 @@ To install:
   2. Navigate chrome to `chrome://extensions`
   3. Check the `Developer mode` toggle
   4. Click on `Load Unpacked Extension...`
-  5. Select the folder containing the extension
+  5. Select the folder containing the extension
+
+This package uses the following libraries:
+  * jQuery 1.7.1
+  * jQuery UI 1.8.10
+  * Typeahead.JS (https://twitter.github.io/typeahead.js/)

api_bridge.js

@@ -1,14 +1,13 @@
 /**
  * Functionality to communicate with the Asana API. This should get loaded
  * in the "server" portion of the chrome extension because it will make
- * HTTP requests and needs cross-domain priveleges.
+ * HTTP requests and needs cross-domain privileges.
  *
  * The bridge does not need to use an auth token to connect to
- * the API, because since it is a browser extension it can access
- * the user's cookies, and can use them to authenticate to the API.
- * This capability is specific to browser extensions, and other
- * types of applications would have to obtain an auth token to communicate
- * with the API.
+ * the API. Since it is a browser extension it can access the user's cookies
+ * and can use them to authenticate to the API. This capability is specific
+ * to browser extensions, and other types of applications would have to obtain
+ * an auth token to communicate with the API.
  */
 Asana.ApiBridge = {
 
@@ -17,6 +16,26 @@ Asana.ApiBridge = {
    */
   API_VERSION: "1.0",
 
+  /**
+   * @type {Integer} How long an entry stays in the cache.
+   */
+  CACHE_TTL_MS: 15 * 60 * 1000,
+
+  /**
+   * @type {Boolean} Set to true on the server (background page), which will
+   *     actually make the API requests. Clients will just talk to the API
+   *     through the ExtensionServer.
+   *
+   */
+  is_server: false,
+
+  /**
+   * @type {dict} Map from API path to cache entry for recent GET requests.
+   *     date {Date} When cache entry was last refreshed
+   *     response {*} Cached request.
+   */
+  _cache: {},
+
   /**
    * @param opt_options {dict} Options to use; if unspecified will be loaded.
    * @return {String} The base URL to use for API requests.
@@ -37,9 +56,64 @@ Asana.ApiBridge = {
    *     data {dict} Object representing response of API call, depends on
    *         method. Only available if response was a 200.
    *     error {String?} Error message, if there was a problem.
+   * @param options {dict?}
+   *     miss_cache {Boolean} Do not check cache before requesting
    */
-  request: function(http_method, path, params, callback) {
-    var url = this.baseApiUrl() + path;
+  request: function(http_method, path, params, callback, options) {
+    var me = this;
+    http_method = http_method.toUpperCase();
+
+    // If we're not the server page, send a message to it to make the
+    // API request.
+    if (!me.is_server) {
+      console.info("Client API Request", http_method, path, params);
+      chrome.runtime.sendMessage({
+        type: "api",
+        method: http_method,
+        path: path,
+        params: params,
+        options: options || {}
+      }, callback);
+      return;
+    }
+
+    console.info("Server API Request", http_method, path, params);
+
+    // Serve from cache first.
+    if (!options.miss_cache && http_method === "GET") {
+      var data = me._readCache(path, new Date());
+      if (data) {
+        console.log("Serving request from cache", path);
+        callback(data);
+        return;
+      }
+    }
+
+    // Be polite to Asana API and tell them who we are.
+    var manifest = chrome.runtime.getManifest();
+    var client_name = [
+      "chrome-extension",
+      chrome.i18n.getMessage("@@extension_id"),
+      manifest.version,
+      manifest.name
+    ].join(":");
+
+    var url = me.baseApiUrl() + path;
+    var body_data;
+    if (http_method === "PUT" || http_method === "POST") {
+      // POST/PUT request, put params in body
+      body_data = {
+        data: params,
+        options: { client_name: client_name }
+      };
+    } else {
+      // GET/DELETE request, add params as URL parameters.
+      var url_params = Asana.update({ opt_client_name: client_name }, params);
+      url += "?" + $.param(url_params);
+    }
+
+    console.log("Making request to API", http_method, url);
+
     chrome.cookies.get({
       url: url,
       name: 'ticket'
@@ -59,10 +133,22 @@ Asana.ApiBridge = {
         url: url,
         timeout: 30000,   // 30 second timeout
         headers: {
-          "X-Requested-With": "XMLHttpRequest"
+          //********************************************************************
+          // WARNING: If you are using this extension as an example of
+          // connecting to Asana's API, please note that we recommend using the
+          // supported forms of authentication, which can be found at
+          // http://developer.asana.com/documentation/#Authentication
+          // We will be deprecating cookie authentication in the Chrome
+          // Extension in favor of Oauth2
+          //********************************************************************
+          "X-Requested-With": "XMLHttpRequest",
+          "X-Allow-Asana-Client": "1"
         },
         accept: "application/json",
         success: function(data, status, xhr) {
+          if (http_method === "GET") {
+            me._writeCache(path, data, new Date());
+          }
           callback(data);
         },
         error: function(xhr, status, error) {
@@ -80,20 +166,35 @@ Asana.ApiBridge = {
             }
             callback(response);
           } else {
-            callback({ error: error || status });
+            callback({ errors: [{message: error || status }]});
           }
         },
         xhrFields: {
           withCredentials: true
         }
       };
       if (http_method === "POST" || http_method === "PUT") {
-        attrs.data = JSON.stringify({data: params});
+        attrs.data = JSON.stringify(body_data);
         attrs.dataType = "json";
         attrs.processData = false;
         attrs.contentType = "application/json";
       }
       $.ajax(attrs);
     });
+  },
+
+  _readCache: function(path, date) {
+    var entry = this._cache[path];
+    if (entry && entry.date >= date - this.CACHE_TTL_MS) {
+      return entry.response;
+    }
+    return null;
+  },
+
+  _writeCache: function(path, response, date) {
+    this._cache[path] = {
+      response: response,
+      date: date
+    };
   }
 };

asana.js

@@ -1,4 +1,68 @@
 /**
  * Define the top-level Asana namespace.
  */
-Asana = {};
+Asana = {
+
+  // When popping up a window, the size given is for the content.
+  // When resizing the same window, the size must include the chrome. Sigh.
+  CHROME_TITLEBAR_HEIGHT: 24,
+  // Natural dimensions of popup window. The Chrome popup window adds 10px
+  // bottom padding, so we must add that as well when considering how tall
+  // our popup window should be.
+  POPUP_UI_HEIGHT: 310 + 10,
+  POPUP_UI_WIDTH: 410,
+  // Size of popup when expanded to include assignee list.
+  POPUP_EXPANDED_UI_HEIGHT: 310 + 10 + 129,
+
+  // If the modifier key is TAB, amount of time user has from pressing it
+  // until they can press Q and still get the popup to show up.
+  QUICK_ADD_WINDOW_MS: 5000
+
+
+};
+
+/**
+ * Things borrowed from asana library.
+ */
+
+
+Asana.update = function(to, from) {
+  for (var k in from) {
+    to[k] = from[k];
+  }
+  return to;
+};
+
+Asana.Node = {
+
+  /**
+   * Ensures that the bottom of the element is visible. If it is not then it
+   * will be scrolled up enough to be visible.
+   *
+   * Note: this does not take account of the size of the window. That's ok for
+   * now because the scrolling element is not the top-level element.
+   */
+  ensureBottomVisible: function(node) {
+    var el = $(node);
+    var pos = el.position();
+    var element_from_point = document.elementFromPoint(
+        pos.left, pos.top + el.height());
+    if (element_from_point === null ||
+        $(element_from_point).closest(node).size() === 0) {
+      node.scrollIntoView(/*alignWithTop=*/ false);
+    }
+  }
+
+};
+
+if (!RegExp.escape) {
+  // Taken from http://simonwillison.net/2006/Jan/20/escape/
+  RegExp.escape = function(text, opt_do_not_escape_spaces) {
+    if (opt_do_not_escape_spaces !== true) {
+      return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&"); // nolint
+    } else {
+      // only difference is lack of escaping \s
+      return text.replace(/[-[\]{}()*+?.,\\^$|#]/g, "\\$&"); // nolint
+    }
+  };
+}

background.js

@@ -0,0 +1,26 @@
+Asana.ExtensionServer.listen();
+Asana.ServerModel.startPrimingCache();
+
+// Modify referer header sent to typekit, to allow it to serve to us.
+// See http://stackoverflow.com/questions/12631853/google-chrome-extensions-with-typekit-fonts
+chrome.webRequest.onBeforeSendHeaders.addListener(function(details) {
+  var requestHeaders = details.requestHeaders;
+  for (var i = 0; i < requestHeaders.length; ++i) {
+    if (requestHeaders[i].name.toLowerCase() === 'referer') {
+      // The request was certainly not initiated by a Chrome extension...
+      return;
+    }
+  }
+  // Set Referer
+  requestHeaders.push({
+    name: 'referer',
+    // Host must match the domain in our Typekit kit settings
+    value: 'https://abkfopjdddhbjkiamjhkmogkcfedcnml'
+  });
+  return {
+    requestHeaders: requestHeaders
+  };
+}, {
+  urls: ['*://use.typekit.net/*'],
+  types: ['stylesheet', 'script']
+}, ['requestHeaders','blocking']);

extension_server.js

@@ -9,22 +9,19 @@ Asana.ExtensionServer = {
    * requests from page clients, which can't make cross-domain requests.
    */
   listen: function() {
-    var self = this;
-    chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
+    var me = this;
+
+    // Mark our Api Bridge as the server side (the one that actually makes
+    // API requests to Asana vs. just forwarding them to the server window).
+    Asana.ApiBridge.is_server = true;
+
+    chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
       if (request.type === "api") {
         // Request to the API. Pass it on to the bridge.
-        Asana.ApiBridge.api(
-            request.method, request.path, request.data || {}, sendResponse);
-
-      } else if (request.type === "quick_add") {
-        // QuickAdd request, made from a content window.
-        // Open up a new popup, and set the request information on its window
-        // (see popup.html for how it's used)
-        var popup = window.open(
-            chrome.extension.getURL('popup.html') + '?external=true',
-            "asana_quick_add",
-            "dependent=1,resizable=0,location=0,menubar=0,status=0,toolbar=0,width=410,height=310");
-        popup.quick_add_request = request;
+        Asana.ApiBridge.request(
+            request.method, request.path, request.params, sendResponse,
+            request.options || {});
+        return true;  // will call sendResponse asynchronously
       }
     });
   }