Merged PR 40176: Use powerbi.bootstrap in playground.

ali-hamud · ali-hamud · commit 0a01c236c46f · 2019-08-01T08:55:33.000Z
Use powerbi.bootstrap in playground.

- one bug which will be treated with low priority for now:
When clicking on phone-layout without clicking on run, report is embedded.

- one important change is:
Demo folder is now installing the powerbi-client package from parent folder.
diff --git a/demo/package.json b/demo/package.json
@@ -35,7 +35,7 @@
     "fetch": "^1.0.0",
     "http-server": "^0.10.0",
     "jquery": "^3.1.0",
-    "powerbi-client": "^2.7.0",
+    "powerbi-client": "file:..",
     "powerbi-report-authoring": "^1.0.0",
     "syntaxhighlighter": "4.0.1"
   },
diff --git a/demo/v2-demo/scripts/codesamples.js b/demo/v2-demo/scripts/codesamples.js
@@ -367,8 +367,6 @@ function _Mock_Embed_BasicEmbed(isEdit) {
     // Get a reference to the embedded report HTML element
     var embedContainer = $('#embedContainer')[0];
 
-    powerbi.reset(embedContainer);
-
     // Embed the report and display it within the div container.
     var report = powerbi.embed(embedContainer, config);
 
@@ -2958,7 +2956,7 @@ function _Report_Authoring_ResetProperty() {
                 // Reset visual legend position
                 // Documentation link: https://github.com/microsoft/powerbi-report-authoring/wiki/Properties
                 visual.resetProperty({ objectName: "legend", propertyName: "position" })
-                    .then(function () { 
+                    .then(function () {
                         Log.logText("Last visual legend position property was reset to default value.");
                     })
                     .catch(function (errors) {
diff --git a/demo/v2-demo/scripts/report.js b/demo/v2-demo/scripts/report.js
@@ -81,6 +81,28 @@ function OpenCodeStep(mode, entityType, tokenType) {
     LoadEmbedSettings(mode, entityType, tokenType);
 }
 
+function bootstrapIframe(entityType) {
+    const activeContainer = getActiveEmbedContainer();
+
+    // Bootstrap iframe - for better performance.
+    let embedUrl = GetSession(SessionKeys.EmbedUrl);
+    config = {
+        type: entityType.toLowerCase(),
+        embedUrl: embedUrl
+    };
+
+    const isMobile = $(".mobile-view").hasClass(active_class);
+    if (isMobile) {
+        config.settings = {
+            layoutType: models.LayoutType.MobilePortrait
+        };
+    }
+
+    // Hide the container in order to hide the spinner.
+    $(activeContainer).css({"visibility":"hidden"});
+    powerbi.bootstrap(activeContainer, config);
+}
+
 function LoadEmbedSettings(mode, entityType, tokenType) {
     if (entityType == EntityType.Report)
     {
@@ -392,6 +414,7 @@ function OpenEmbedMode(mode, entityType, tokenType)
 function setCodeAndShowEmbedSettings(mode, entityType, tokenType) {
     setCodeArea(mode, entityType);
     showEmbedSettings(mode, entityType, tokenType);
+    bootstrapIframe(entityType);
 }
 
 function OpenViewMode() {
@@ -521,7 +544,7 @@ function EmbedAreaDesktopView() {
 
     $(".desktop-view").show();
     $(".mobile-view").hide();
-    
+
     $(".desktop-view").addClass(active_class);
     $(".mobile-view").removeClass(active_class);
 
diff --git a/demo/v2-demo/scripts/utils.js b/demo/v2-demo/scripts/utils.js
@@ -6,7 +6,7 @@ const textCodeTimeout = 100;
 function BodyCodeOfFunction(func) {
     let lines = func.toString().split('\n');
     lines = lines.slice(1, lines.length-1);
-    
+
     for (let i = 0; i < lines.length; ++i)
     {
         // remove trailing spaces.
@@ -68,6 +68,7 @@ function SetCode(func) {
 
         $('#btnRunCode').off('click');
         $('#btnRunCode').click(function() {
+            showEmbedContainer();
             elementClicked('#btnRunCode');
             runFunc();
         });
@@ -134,6 +135,13 @@ function getEmbedContainerClassPrefix(entityType) {
     }
 }
 
+function getActiveEmbedContainer() {
+    const entityType = GetSession(SessionKeys.EntityType);
+    const classPrefix = getEmbedContainerClassPrefix(entityType);
+    const activeContainer = classPrefix + ($(".desktop-view").hasClass(active_class) ? 'Container' : 'MobileContainer');
+    return $(activeContainer)[0];
+}
+
 function getEntityTypeFromParameter(urlParam) {
   switch (urlParam) {
       case "visual":
@@ -156,6 +164,11 @@ function elementClicked(element) {
     }, elementClickedTimeout);
 }
 
+function showEmbedContainer() {
+    const activeContainer = getActiveEmbedContainer();
+    $(activeContainer).css({"visibility":"visible"});
+}
+
 function SetAuthoringPageActive(report) {
     return new Promise(function(resolve, reject) {
 
