Update new tab design with final touches for site suggestions.

mozilla · Nov 2, 2012 · 75dcae6 · 75dcae6
1 parent 0b67478
commit 75dcae6
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 21 deletions.
diff --git a/siteSuggest/icon.png b/siteSuggest/icon.png
diff --git a/siteSuggest/icon64.png b/siteSuggest/icon64.png
diff --git a/siteSuggest/lib/main.js b/siteSuggest/lib/main.js
@@ -22,19 +22,48 @@ const gUserProfile = new UserProfile();
 
 function addApplicationFrame(document) {
   let tabGrid = document.getElementById("newtab-grid");
-  let lastRowDiv = tabGrid.querySelector(".newtab-row:last-child");
-  let tabCell = tabGrid.querySelector(".newtab-cell");
+  let theTab = tabGrid.querySelector(".newtab-row:last-child").querySelector(".newtab-cell:last-child");
+  let site = theTab.querySelector(".newtab-site");
+  let ref = site.getElementsByTagName("a")[0];
+  let spanImage = site.querySelector(".newtab-thumbnail");
+  let spanTitle = site.querySelector(".newtab-title");
+  let spanCatTitle = spanTitle.cloneNode(false);
+
+  theTab.setAttribute("style" , "box-shadow: 0 0 5px orange, 0 0 10px orange;");
+  ref.setAttribute( "style" , "overflow: hidden;");
+  spanCatTitle.setAttribute( "style" , "transition-property: margin-bottom; transition-duration: 1s; margin-bottom: -20px;");
+  ref.appendChild(spanCatTitle);
+
+  let window = document.defaultView;
+  let nesting = 0;
 
   // Add a row and cell for the showing the app frame
-  gUserProfile.demographer.pickRandomBest(function(cat) {
-     console.log(cat);
+  gUserProfile.demographer.pickRandomBest(function suggestCat(cat) {
+     let toggle = false;
      let req = request.Request({
           url: "https://sitesuggest.mozillalabs.com/" ,
           headers: { "Category": cat },
           onComplete: function(response) {
-            console.log( "response" , response.status );
             if( response.status == 200 ) {
-              console.log(JSON.stringify(response.json));
+              ref.setAttribute('title', response.json.title);
+              ref.setAttribute('href', response.json.url);
+              spanImage.setAttribute('style','background-image: url("' + response.json.image + '");');
+              spanTitle.textContent = response.json.title;
+              spanCatTitle.textContent = "Your interest: " + cat;
+              window.setInterval(function keepLoading() {
+                if( toggle ) {
+                  spanCatTitle.setAttribute( "style" , "transition-property: margin-bottom; transition-duration: 1s; margin-bottom: -20px;");
+                  toggle = false;
+                }
+                else {
+                  spanCatTitle.setAttribute( "style" , "transition-property: margin-bottom; transition-duration: 1s; margin-bottom: 0px;");
+                  toggle = true;
+                }
+              },3000);
+            }
+            else if( nesting < 3) {
+              nesting++;
+              gUserProfile.demographer.pickRandomBest(suggestCat);
             }
           }
         });

diff --git a/siteSuggest/package.json b/siteSuggest/package.json
@@ -1,17 +1,9 @@
 {
-    "name": "newtab",
-    "license": "MPL 2.0",
-    "author": "",
-    "version": "0.1",
-    "fullName": "newtab",
-    "id": "jid1-g9J9DON7BbvIBw",
-    "description": "a basic add-on",
-    "preferences": [
-        {
-            "name": "apps_page_url",
-            "title": "apps page url",
-            "type": "string",
-            "value":  "https://newnewtab-dev.mozillalabs.com/"
-        }
-     ]
+  "author": "Mozilla Labs",
+  "description": "Suggest sites in the corner of new tabs based on your interests.",
+  "fullName": "Mozilla Labs: Prospector - Site Suggest",
+  "id": "siteSuggest@prospector.labs.mozilla",
+  "license": "MPL 2.0",
+  "name": "site-suggest",
+  "version": "1"
 }