traitify-widgets 1.12.22 → 3.0.0-alpha.0

package/README.md

@@ -7,15 +7,13 @@ The widgets can be installed through our CDN or npm. Usage through the CDN will
 ### CDN
 
 ```
-<script src="https://cdn.traitify.com/js/v2/traitify.js"></script>
+<script src="https://cdn.traitify.com/js/v3/traitify.js"></script>
 <script>
-  Traitify.setHost("your host url");
-  Traitify.setPublicKey("your public key");
+  Traitify.http.authKey = "Your Traitify public key";
+  Traitify.http.host = "https://api.traitify.com";
 
-  assessment = Traitify.ui.component();
-  assessment.assessmentID("an assessment id you have generated via a server side client");
-  assessment.target("#the-id-of-the-target-you-wish-to-render-to");
-  assessment.render();
+  Traitify.options.assessmentID = "an assessment id you have generated via a server side client";
+  Traitify.render("#the-id-of-the-target-you-wish-to-render-to");
 </script>
 ```
 
@@ -32,209 +30,82 @@ npm i --save traitify-widgets
 ```
 import traitify from "traitify-widgets";
 
-assessment = traitify.ui.component();
-assessment.assessmentID("an assessment id you have generated via a server side client");
-assessment.target("#the-id-of-the-target-you-wish-to-render-to");
-assessment.render();
+traitify.options.assessmentID = "an assessment id you have generated via a server side client";
+traitify.render("#the-id-of-the-target-you-wish-to-render-to");
 ```
 
-[Click here](src/index.js) to view other classes available to import, such as the `TraitifyClient`.
+[Click here](src/index.js) to view other classes available to import, such as the `Http`.
 
 ## Rendering Components
 
-### All Decks
+[Click here](src/components/index.js) to view available to components, such as the `Results.Personality.Type.List`.
 
-#### SlideDeck
+#### Survey
 
 ```
-assessment.render("SlideDeck"); // Render just the SlideDeck in the target element
+Traitify.render({Survey: "#dom-id"}); // Render just the Survey in the target element
 ```
 
 #### Results
 
 ```
-assessment.render("Results"); // Render just the Results in the target element
+Traitify.render({Results: "#dom-id"}); // Render just the Results in the target element
 ```
 
-#### Personality Types/Dimensions
-
-```
-assessment.render("PersonalityTypes"); // Render just the Type/Dimensions in the target element
-```
-
-#### Personality Traits
-
-```
-assessment.render("PersonalityTraits"); // Render just the Traits in the target element
-```
-
-#### Personality Details
-
-```
-assessment.render("PersonalityDetails"); // Render just the details in the target element
-```
-
-### Type Based Decks (ex. career-deck, core, heroes)
-
-#### Personality Blend
-
-```
-assessment.render("PersonalityBlend"); // Render just the Blend in the target element
-```
-
-### Careers Deck Components (career-deck)
-
-#### Render All Career Components
-
-```
-assessment.render("Careers"); // Render all the career components
-```
-
-#### Specific Career Components
-
-#### Career Filter
-
-```
-assessment.render("CareerFilter"); // Render the career filter
-```
-
-#### Career Results
-
-```
-assessment.render("CareerResults"); // Render the career list
-```
-
-#### Career Modal
-
-```
-assessment.render("CareerModal"); // Render the career modal
-```
-
-### Additional Career Component Customizations
-
-#### Add content to the Career Filter
-
-```
-// Add content to the career filter
-Traitify.ui.on("CareerFilter.updated", function(context){
-  context.customContent.appendChild(document.createTextNode("I am custom content"));
-});
-```
-
-#### Add content to the Career Modal
-
-```
-// Add content to the career modal
-Traitify.ui.on("CareerModal.updated", function(context){
-  if(!context.customContent){ return; }
-  context.customContent.appendChild(document.createTextNode("I am custom content"));
-});
-```
-
-#### Trigger a refresh of the career results with different params
-
-```
-// Update parameters and re-request careers
-Traitify.ui.trigger("Careers.mergeParams", this, {experienceLevels: [4, 5], page: 1});
-```
+### Career Component Customizations
 
 #### Get your careers from a different endpoint
 
 This is useful if you want to get the career results server side and modify the data returned or just want to proxy through your own server.
 
 ```
-Traitify.ui.options.careerOptions.path = "/my-career-endpoint";
+Traitify.options.career.path = "/my-career-endpoint";
 ```
 
 #### Change which experience levels are in the filter
 
 ```
-Traitify.ui.options.careerOptions.experienceLevels = [4, 5];
+Traitify.options.career.experienceLevels = [4, 5];
 ```
 
 #### Change how many results to show per page
 
 ```
-Traitify.ui.options.careerOptions.perPage = 10;
-```
-
-### Dimension Based Decks (big-five)
-
-#### Radar Graph
-
-```
-assessment.render("Radar"); // Render just the Radar graph in the target element
-```
-
-#### Personality Heading
-
-```
-assessment.render("PersonalityHeading"); // Render just the archetype in the target element
-```
-
-### Interview Guide
-
-#### Interview questions for big-five assessments
-
-```
-assessment.render("Guide"); // Given an assessmentID with results, render just the Interview in the target element
+Traitify.options.career.perPage = 10;
 ```
 
 ### Render multiple components in specific elements
 
 ```
-assessment.targets({
-  "SlideDeck": "#slide-deck",
-  "PersonalityTypes": "#personality-types",
-  "PersonalityTraits": "#personality-traits",
+Traitify.render({
+  "Survey": "#survey",
   "Results": "#results",
-  "Careers": "#careers",
-  "Guide": "#guide",
+  "Results.Career.Container": "#careers",
+  "Results.Guide": "#guide",
+  "Results.Personality.Type.List": "#personality-types",
+  "Results.Personality.Trait.List": "#personality-traits"
 });
-
-assessment.render();
 ```
 
 ## Events
 
-```
-// Event handlers must be set before the render command, or they will not be called.
-assessment.on("SlideDeck.Finished", function(){
-  console.log("SlideDeck.Finished");
-});
-
-assessment.on("SlideDeck.Initialized", function(){
-  console.log("SlideDeck.Initialized");
-});
-
-assessment.on("SlideDeck.IsReady", function(){
-  console.log("SlideDeck.IsReady");
-});
-
-assessment.on("SlideDeck.UpdateSlide", function(event, slideResponse){
-  console.log("SlideDeck.UpdateSlide");
-  console.log(slideResponse);
-});
-
-assessment.on("SlideDeck.BackSlide", function(){
-  console.log("SlideDeck.BackSlide");
-});
+Most components trigger an initialized and updated event. Some components offer additional events. Event handlers must be set before the render command, or they will not be called.
 
-assessment.on("SlideDeck.Fullscreen", function(event, isFullScreen){
-  console.log("SlideDeck.Fullscreen");
-  console.log(isFullScreen);
+```
+Traitify.listener.on("Survey.initialized", () => {
+  console.log("Survey.initialized");
 });
 
-assessment.on("Results.Initialized", function(){
-  console.log("Results.Initialized");
+Traitify.listener.on("Survey.updated", () => {
+  console.log("Survey.updated");
 });
 
-assessment.on("PersonalityTypes.Initialized", function(){
-  console.log("PersonalityTypes.Initialized");
+Traitify.listener.on("Survey.updateSlide", ({response}) => {
+  console.log("Survey.finished", response);
 });
 
-assessment.on("PersonalityTraits.Initialized", function(){
-  console.log("PersonalityTraits.Initialized");
+Traitify.listener.on("Survey.finished", ({response}) => {
+  console.log("Survey.finished", response);
 });
 ```
 
@@ -243,15 +114,7 @@ assessment.on("PersonalityTraits.Initialized", function(){
 ### Internationalization Options
 
 ```
-// Set globally
-Traitify.ui.setLocale("es-us");
-```
-
-or
-
-```
-// Set just for the instance of the widget
-assessment.locale("nl-nl");
+Traitify.options.locale = "en-us";
 ```
 
 Here is a list of the available locales (`en-us` is the default):
@@ -271,19 +134,19 @@ Here is a list of the available locales (`en-us` is the default):
 ### Render a back button to allow users to change answers during the test
 
 ```
-assessment.allowBack();
+Traitify.options.survey.allowBack = true;
 ```
 
 ### Allow the user to click a button to go full screen
 
 ```
-assessment.allowFullscreen();
+Traitify.options.survey.allowFullscreen = true;
 ```
 
 ### Allow the user to view section results section headers
 
 ```
-assessment.allowHeaders();
+Traitify.options.showHeaders = true;
 ```
 
 ### Render results using specific perspective
@@ -291,56 +154,53 @@ assessment.allowHeaders();
 \* currently only the `big-five` assessment has perspective content
 
 ```
-assessment.perspective("firstPerson");
+Traitify.options.perspective = "firstPerson";
 
 OR
 
-assessment.perspective("thirdPerson");
+Traitify.options.perspective = "thirdPerson";
 ```
 
 ## Reports
 
-Set the perspective and view options to display our Big Five Personality Reports.
-
 ### Big Five Hiring Manager Report
 
 ```
-assessment.perspective("thirdPerson");
-assessment.view("manager");
+Traitify.options.report = "manager";
 ```
 
 This report also makes use of a benchmark/recommendation. It will default to the benchmark used to create an assessment. To use a different benchmark, you can pass the ID as an option.
 
 ```
-assessment.benchmarkID(benchmarkID);
+Traitify.options.benchmarkID = benchmarkID;
 ```
 
 ### Big Five Candidate Report
 
 ```
-assessment.perspective("firstPerson");
-assessment.view("candidate");
+Traitify.options.report = "candidate";
 ```
 
 ### Engage Employee Report
 
 ```
-assessment.perspective("thirdPerson");
-assessment.view("employee");
+Traitify.options.report = "employee";
 ```
 
-## Traitify Client
+## Traitify HTTP
 
 We expose our JavaScript api client that you can use to make additional calls to our API from the client side. We make available `get`, `put`, and `post` functions. These methods will use the api key and url you configured when you initialized the Traitify library. Here is an example that returns career matches for a `career-deck` assessment. Further documentation on the API methods available can be found at https://app.traitify.com/developer/documentation.
 
 ```
-<script src="https://cdn.traitify.com/js/v2/traitify.js"></script>
+<script src="https://cdn.traitify.com/js/v3/traitify.js"></script>
 <script>
-  Traitify.setHost("your host url");
-  Traitify.setPublicKey("your public key");
-  var assessmentId = "an assessment id you have generated via a server side client";
-  Traitify.get("/assessments/" + assessmentId + "/matches/careers").then(function(career_matches){
-    console.log(career_matches);
+  Traitify.http.authKey = "Your Traitify public key";
+  Traitify.http.host = "https://api.traitify.com";
+
+  const assessmentID = "an assessment id you have generated via a server side client";
+
+  Traitify.http.get(`/assessments/${assessmentID}/matches/careers`).then((matches) => {
+    console.log(matches);
   });
 </script>
 ```