fixed famous people bug

traitify · Mar 28, 2015 · 82265ad · 82265ad
1 parent fe529a0
commit 82265ad
Show file tree

Hide file tree

Showing 8 changed files with 165 additions and 81 deletions.
diff --git a/Gulpfile.coffee b/Gulpfile.coffee
@@ -34,6 +34,13 @@ gulp.task("server", ->
     res.send(fileContents)
   )
 
+  app.get("/assets/*", (req, res)->
+    res.setHeader('Content-Type', "text/css" )
+    a = req.originalUrl
+    fileContents = fs.readFileSync(req.originalUrl.slice(1, req.originalUrl.length), "utf8")
+    res.send(fileContents)
+  )
+
   app.get("/public/*", (req, res)->
     a = req.originalUrl
     fileContents = fs.readFileSync(req.originalUrl.slice(1, req.originalUrl.length), "utf8")

diff --git a/bundles.yml b/bundles.yml
@@ -58,10 +58,6 @@ famous-people:
     - "compiled/widgets/results/career-details/master.js"
     - "compiled/widgets/results/personality-types/master.js"
     - "compiled/widgets/results/personality-traits/master.js"
-    - "support/riot.js"
-    - "support/html5shiv-printshiv.js"
-    - "support/html5shiv.js"
-    - "compiled/widgets/results/famous-people/main.js"
     - "compiled/widgets/results/famous-people/master.js"
   css:
     - "widgets/all/master.css"

diff --git a/package.json b/package.json
@@ -20,6 +20,7 @@
     "cors": "latest",
     "gulp-webserver": ">= 0.9.0",
     "traitify": "latest",
-    "express":"latest"
+    "express":"latest",
+    "gulp":"latest"
   }
 }
diff --git a/public/careers-bundle-stag.html b/public/careers-bundle-stag.html
@@ -1,32 +1,44 @@
 <!doctype html>
 <html>
-  <head>
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-    <style>
-      html, body{
-        margin:0px;
-        overflow-x:hidden;
-        width:100%;
-      }
-    </style>
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
-    <script src="http://cdn-stag.traitify.com/js/widgets/careers.js"></script>
-  </head>
-  <body>
-    <div class="slide-deck your-class"></div> <!-- Example Target Div for the widget -->
-    <div class="results your-class"></div>
-    <div class="personality-types your-class"></div>
-    <div class="personality-traits your-class"></div>
-    <script>
-      $.post("/public_key").then(function(publicKey){
-        $.post("/assessments/?deck=career-deck").then(function(assessment){
-          Traitify.setHost("https://api-sandbox.traitify.com");
-          Traitify.setPublicKey(publicKey);
-          Traitify.setVersion("v1");
-          assessmentId = "e4773461-b287-4fc1-b27d-426bcd115bbc";
-          window.tfWidget = Traitify.ui.load(assessment.id, ".slide-deck");
-        })
-      })
-    </script>
-  </body>
+<head>
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+<style>
+html, body{
+    margin:0px;
+    overflow-x:hidden;
+    width:100%;
+}
+</style>
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
+<script src="https://localhost:9292/compiled/bundles/famous-people.js"></script>
+</head>
+<body>
+<div class="slide-deck your-class"></div> <!-- Example Target Div for the widget -->
+<div class="results your-class"></div>
+<div class="personality-types your-class"></div>
+<div class="personality-traits your-class"></div>
+<div class="assessment"></div>
+<div class="results-container">
+  <div class="results"></div>
+</div>
+<div class="personality-types"></div>
+<div class="personality-traits"></div>
+<div class="celebrity-matches"></div>
+
+<script>
+$.post("/public_key").then(function(publicKey){
+  $.post("/assessments/?deck=livingsocial").then(function(assessment){
+    Traitify.setHost("https://api-sandbox.traitify.com");
+    Traitify.setPublicKey(publicKey);
+    Traitify.setVersion("v1");
+    window.tfWidget = Traitify.ui.load(assessment.id, ".slide-deck", {
+      results: {target: ".results-container > .results"},
+      personalityTypes: {target: ".personality-types"},
+      personalityTraits: {target: ".personality-traits"},
+      famousPeople: {target: ".celebrity-matches"},
+    });
+  })
+})
+</script>
+</body>
 </html>
diff --git a/public/famous-people-bundle.html b/public/famous-people-bundle.html
@@ -10,23 +10,44 @@
       }
     </style>
 
-    <script src="http://cdn-stag.traitify.com/js/widgets/edge.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
+    <script src="http://localhost:9292/compiled/bundles/famous-people.js"></script>
   </head>
   <body>
-    <div class="slide-deck"></div>
-    <div class="personality-types"></div>
-    <div class="personality-traits"></div>
-    <div class="famous-people"></div>
-    <script>
-      Traitify.setHost("api-sandbox.traitify.com");
-      Traitify.setPublicKey("mc6geq9f4p9erhc908o6tik99b");
-      Traitify.setVersion("v1");
-      var assessmentId = "5435d657-bf9e-467e-b950-8469047bdbf1";
-      Traitify.ui.load(assessmentId, ".slide-deck", {
-        famousPeople: {
-          target: ".famous-people"
+        <div class="slide-deck your-class"></div> <!-- Example Target Div for the widget -->
+        <div class="results-container">
+          <div class="results"></div>
+        </div>
+        <div class="personality-types"></div>
+        <div class="personality-traits"></div>
+        <div class="celebrity-matches"></div>
+
+        <script>
+        function processAssessment(){
+          Traitify.setHost("https://api-sandbox.traitify.com");
+            Traitify.setPublicKey($.cookie("publicKey"));
+            Traitify.setVersion("v1");
+            window.tfWidget = Traitify.ui.load($.cookie("assessmentId"), ".slide-deck", {
+              results: {target: ".results-container > .results"},
+              personalityTypes: {target: ".personality-types"},
+              personalityTraits: {target: ".personality-traits"},
+              famousPeople: {target: ".celebrity-matches"}
+            });
+
         }
-      })
-    </script>
+        if($.cookie("assessmentId")){
+            processAssessment()
+        }else{
+          $.post("/public_key").then(function(publicKey){
+            $.cookie("publicKey", publicKey)
+            $.post("/assessments/?deck=livingsocial").then(function(assessment){
+              $.cookie("assessmentId", assessment.id)
+              processAssessment()
+            })
+          })
+        }
+
+        </script>
   </body>
 </html>
diff --git a/public/famous-people-source.html b/public/famous-people-source.html
@@ -9,38 +9,56 @@
         width:100%;
       }
     </style>
-    <script src="./api-client/compiled/api/master.js"></script>
-    <script src="./compiled/ui/master.js"></script>
-    <script src="./compiled/builder/master.js"></script>
-    <script src="./compiled/widgets/slide-deck/master.js"></script>
-    <script src="./compiled/widgets/results/default/master.js"></script>
-    <script src="./support/riot.js"></script>
-    <script src="./compiled/widgets/results/famous-people/main.js"></script>
-    <script src="./compiled/widgets/results/famous-people/master.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
 
-    <link href="./assets/stylesheets/widgets/all/master.css" rel="stylesheet" />
-    <link href="./assets/stylesheets/widgets/slide-deck/master.css" rel="stylesheet" />
-    <link href="./assets/stylesheets/widgets/results/default/master.css" rel="stylesheet" />
-    <link href="./assets/stylesheets/widgets/results/personality-types/master.css" rel="stylesheet" />
-    <link href="./assets/stylesheets/widgets/results/personality-traits/master.css" rel="stylesheet" />
-    <link href="./assets/stylesheets/widgets/results/famous-people/master.css" rel="stylesheet" />
+    <script src="/api-client/compiled/api/master.js"></script>
+    <script src="/compiled/ui/master.js"></script>
+    <script src="/compiled/builder/master.js"></script>
+    <script src="/compiled/widgets/slide-deck/master.js"></script>
+    <script src="/compiled/widgets/results/default/master.js"></script>
+    <script src="/compiled/widgets/results/famous-people/master.js"></script>
+
+    <link href="/assets/stylesheets/widgets/all/master.css" rel="stylesheet">
+    <link href="/assets/stylesheets/widgets/slide-deck/master.css" rel="stylesheet">
+    <link href="/assets/stylesheets/widgets/results/default/master.css" rel="stylesheet">
+    <link href="/assets/stylesheets/widgets/results/personality-types/master.css" rel="stylesheet">
+    <link href="/assets/stylesheets/widgets/results/personality-traits/master.css" rel="stylesheet">
+    <link href="/assets/stylesheets/widgets/results/famous-people/master.css" rel="stylesheet">
   </head>
   <body>
-    <div class="slide-deck"></div>
-    <div class="personality-types"></div>
-    <div class="personality-traits"></div>
-    <div class="famous-people"></div>
-    <script>
-      Traitify.ui.styles = []
-      Traitify.setHost("api-sandbox.traitify.com");
-      Traitify.setPublicKey("mc6geq9f4p9erhc908o6tik99b");
-      Traitify.setVersion("v1");
-      var assessmentId = "5435d657-bf9e-467e-b950-8469047bdbf1";
-      Traitify.ui.load(assessmentId, ".slide-deck", {
-        famousPeople: {
-          target: ".famous-people"
+        <div class="slide-deck your-class"></div> <!-- Example Target Div for the widget -->
+        <div class="results-container">
+          <div class="results"></div>
+        </div>
+        <div class="personality-types"></div>
+        <div class="personality-traits"></div>
+        <div class="celebrity-matches"></div>
+
+        <script>
+        function processAssessment(){
+          Traitify.setHost("https://api-sandbox.traitify.com");
+            Traitify.setPublicKey($.cookie("publicKey"));
+            Traitify.setVersion("v1");
+            window.tfWidget = Traitify.ui.load($.cookie("assessmentId"), ".slide-deck", {
+              results: {target: ".results-container > .results"},
+              personalityTypes: {target: ".personality-types"},
+              personalityTraits: {target: ".personality-traits"},
+              famousPeople: {target: ".celebrity-matches"}
+            });
+
+        }
+        if($.cookie("assessmentId")){
+            processAssessment()
+        }else{
+          $.post("/public_key").then(function(publicKey){
+            $.cookie("publicKey", publicKey)
+            $.post("/assessments/?deck=livingsocial").then(function(assessment){
+              $.cookie("assessmentId", assessment.id)
+              processAssessment()
+            })
+          })
         }
-      })
     </script>
   </body>
 </html>
diff --git a/src/widgets/results/famous-people/master.coffee b/src/widgets/results/famous-people/master.coffee
@@ -4,13 +4,38 @@ Traitify.ui.widget("famousPeople", (widget, options)->
   widget.styleDependency("all")
   widget.styleDependency("results/famous-people")
 
+
+  ########################
+  # INITIALIZE
+  ########################
   widget.initialization.events.add("Setup Data", ->
+    widget.views.render("Famous People").appendTo("main")
+
+    widget.callbacks.trigger("Initialize")
+  )
+
+  #########################
+  # PARTIALS
+  #########################
+  widget.views.add("Famous People", ->
     personality_blend = widget.data.get("PersonalityTypes").personality_blend
-    peopleTag = riot.mountTo(widget.views.tags.get("main"), 'famouspeople')
     people = personality_blend.famous_people.sort(-> 0.5 - Math.random())[0..4]
-    peopleTag.famousPeople = people
-    peopleTag.update()
 
-    widget.callbacks.trigger("Initialize")
+    @tags.div("tfFamousPeopleContainerScroller")
+
+    @tags.div("personalityTypesContainer").appendTo("tfFamousPeopleContainerScroller")
+    @tags.div("tfFamousPeople").appendTo("personalityTypesContainer")
+    index = 0
+    for person in people
+        @tags.div(["tfFamousPerson"]).appendTo("tfFamousPeople")
+        @tags.img(["tfImage"], person.picture).appendTo(["tfFamousPerson", index])
+        @tags.div(["tfName"], Object(), person.name).appendTo(["tfFamousPerson", index])
+
+        index++
+
+    @tags.get("tfFamousPeopleContainerScroller")
+
+
   )
+
 )
diff --git a/src/widgets/slide-deck/master.coffee b/src/widgets/slide-deck/master.coffee
@@ -70,6 +70,10 @@ Traitify.ui.widget("slideDeck", (widget, options = Object())->
               callbacks = widgets.results.callbacks
               widgets.results = Traitify.ui.load("results", widget.assessmentId, widgets.results.target || widget.target, widgets.results.options)
               widgets.results.callbacks = callbacks
+            if widgets.famousPeople
+              callbacks = widgets.famousPeople.callbacks
+              widgets.famousPeople = Traitify.ui.load("famousPeople", widget.assessmentId, widgets.results.target || widget.target, widgets.results.options)
+              widgets.famousPeople.callbacks = callbacks
 
           widget.callbacks.trigger("Finished")
       ).catch(->