Merged PR 5692: Playground adjustments

Playground adjustments
* Scroll to the top on Sample selection
* Hover color added to copy button
* Dialog input selected by default
* Function comments adjustments
* Clean log when switching between samples
* Hide features on interact tab for Mobile and Create Mode
* Bookmark dialog - bookmark name appears twice bug fix
* Custom layout, fix the bug visuals list duplicate

Author: Amit Shuster

demo/v2-demo/docs.html

@@ -2,20 +2,20 @@
     <div id="docs-content">
         <div class="docs-line">
             <div class="docs-links">
-                <h2>Getting Started</h2>
+                <h2>Getting started</h2>
                 <a href="https://github.com/Microsoft/powerbi-javascript/wiki">Power BI JavaScript API wiki</a><br>
                 <a href="https://docs.microsoft.com/en-us/power-bi/developer/embedding">Power BI Embedding Documentation</a><br>
             </div>
             <div class="docs-links">
-                <h2>Useful Links</h2>
+                <h2>Useful links</h2>
                 <a href="https://azure.microsoft.com/en-us/services/power-bi-embedded/">Power BI Embedded on Azure</a><br>
-                <a href="https://community.powerbi.com/t5/Forums/ct-p/Forums">Power BI Community</a><br>
-                <a href="https://ideas.powerbi.com/forums/265200-power-bi-ideas/category/161718-apis-and-embedding">Power BI Ideas - APIs and Embedding</a><br>
+                <a href="https://community.powerbi.com/t5/Forums/ct-p/Forums">Power BI community</a><br>
+                <a href="https://ideas.powerbi.com/forums/265200-power-bi-ideas/category/161718-apis-and-embedding">Power BI Ideas - APIs and embedding</a><br>
             </div>
             <div class="docs-links">
                 <h2>Support</h2>
                 <a href="https://docs.microsoft.com/en-us/power-bi/developer/embedded-faq">Power BI Embedded FAQ</a><br>
-                <a href="https://docs.microsoft.com/en-us/power-bi/developer/embedded-troubleshoot">Power BI Embedded Troubleshooting</a><br>
+                <a href="https://docs.microsoft.com/en-us/power-bi/developer/embedded-troubleshoot">Power BI Embedded troubleshooting</a><br>
                 <a href="https://powerbi.microsoft.com/en-us/support/">Power BI Support</a><br>
             </div>
         </div>
@@ -30,11 +30,11 @@ <h2>Videos</h2>
                 <iframe width="330" height="186" src="https://www.youtube.com/embed/NbsLRDMWNRI" frameborder="0" allow="encrypted-media" allowfullscreen></iframe>
             </div>
             <div class="docs-video">
-                Get an Embed Token & Embed Your Analytics<br>
+                Get an embed token & embed your analytics<br>
                 <iframe width="330" height="186" src="https://www.youtube.com/embed/GPHHdDRSlis" frameborder="0" allow="encrypted-media" allowfullscreen></iframe>
             </div>
             <div class="docs-video">
-                Setting up and Getting Started<br>
+                Setting up and getting started<br>
                 <video width="330" height="186" controls="controls" preload="metadata">
                     <source src="https://sec.ch9.ms/ch9/5da0/29725d07-f7c3-4090-8b80-a5881e5d5da0/PowerBiEmbeddedPart1_high.mp4#t=12.6" type="video/mp4">
                     Your browser does not support the video tag.
@@ -48,7 +48,7 @@ <h2>Videos</h2>
                 </video>
             </div>
             <div class="docs-video">
-                Extend Context Menu Feature<br>
+                Extend context menu feature<br>
                 <iframe width="330" height="186" src="https://www.youtube.com/embed/Yt4MGpD2cVk" frameborder="0" allow="encrypted-media" allowfullscreen></iframe>
             </div>
         </div>

demo/v2-demo/live_showcases/bookmarks/showcase_bookmarks.html

@@ -1,5 +1,5 @@
 <div id="showcases-text">
-    <h3>Bookmarks Showcase</h3>
+    <h3>Capture insights & share</h3>
     <br>
     <div id="showcases-description">
         Use this showcase to experience the capabilities of the bookmarks API, so your users can create and share their own bookmarks<br><br>

demo/v2-demo/live_showcases/bookmarks/showcase_bookmarks.js

@@ -8,6 +8,9 @@ var BookmarkShowcaseState = {
     nextBookmarkId: 1
 }
 
+const dialogTextSelectTimeout = 50;
+
+// Embed the report and retrieve the existing report bookmarks
 function embedBookmarksReport() {
 
     // Load sample report properties into session
@@ -136,6 +139,7 @@ function createBookmarksList(bookmarks) {
     }
 }
 
+// Capture new bookmark of the current state and update the bookmarks list
 function onBookmarkCaptureClicked() {
 
     // Element clicked animation
@@ -160,6 +164,7 @@ function onBookmarkCaptureClicked() {
     });
 }
 
+// Set the new captured bookmark as the active bookmark on the list
 function setCapturedBookmarkActive(bookmark) {
     // Add the new bookmark to the HTML list
     $('#bookmarksList').append(buildBookmarkElement(bookmark));
@@ -177,19 +182,19 @@ function setCapturedBookmarkActive(bookmark) {
     $('#bookmark_' + BookmarkShowcaseState.nextBookmarkId).attr('checked', true);
 }
 
+// Closes the dialog
 function onCloseDialogClicked() {
-
-    // Close the dialog
     $('#overlay').hide();
     $('#shareDialog').hide();
 }
 
+// Copy the dialog's input text
 function onDialogCopyClicked() {
-
-    // Copy the input text
-    CopyTextArea('#dialogInput', '#btnDialogCopy')
+    CopyTextArea('#dialogInput', '#btnDialogCopy');
+    $('#dialogInput').select();
 }
 
+// Apply clicked bookmark state and set it as the active bookmark on the list
 function onBookmarkClicked(element) {
 
     // Remove share boomark icon
@@ -221,18 +226,23 @@ function shareBookmark(element) {
     let shareUrl = location.href.substring(0, location.href.lastIndexOf("/")) + '/shareBookmark.html' + '?state=' + currentBookmark.state;
 
     // Set bookmark display name and share URL on dialog HTML code
+    $('#dialogBookmarkName').empty();
     var displayNameElement = document.createTextNode(currentBookmark.displayName);
     $('#dialogBookmarkName').append(displayNameElement);
     $('#dialogInput').val(shareUrl);
 
     // Show overlay and share dialog
     $('#overlay').show();
     $('#shareDialog').show();
+
+    // Select dialog input after the dialog is shown
+    setTimeout(function() {
+        $('#dialogInput').select();
+    }, dialogTextSelectTimeout);
 }
 
 // Build bookmark radio button HTML element
 function buildBookmarkElement(bookmark) {
-
     var labelElement = document.createElement("label");
     labelElement.setAttribute("class", "bookmarkContainer");
 

demo/v2-demo/live_showcases/custom_layout/showcase_custom_layout.html

@@ -1,5 +1,5 @@
 <div id="showcases-text">
-    <h3>Custom Layout Showcase</h3>
+    <h3>Control your report layout</h3>
     <br>
     <div id="showcases-description">
         Use this showcase to learn how to leverage the custom layout API for a dynamic embedding of visuals<br><br>

demo/v2-demo/live_showcases/custom_layout/showcase_custom_layout.js

@@ -17,6 +17,7 @@ var LayoutShowcaseState = {
     layoutPageName: null
 }
 
+// Embed the report and retrieve all report visuals
 function embedCustomLayoutReport() {
 
     // Load custom layout report properties into session
@@ -101,6 +102,9 @@ function createVisualsArray(reportVisuals) {
         return visual.title !== undefined;
     });
 
+    // Clear visuals list div
+    $('#visualsList').empty();
+
     // Build checkbox html list and insert the html code to visualsList div
     for (let visual of LayoutShowcaseState.layoutVisuals) {
         $('#visualsList').append(buildVisualElement(visual));
@@ -124,10 +128,9 @@ function renderVisuals() {
     let pageWidth = $('#embedContainer').width();
     let pageHeight = $('#embedContainer').height();
 
-    // Calculate total width for visuals decreasing the size of margins from the width of the page
+    // Calculate the width left for visuals per line by decreasing the margins width from the page width
     let visualsTotalWidth = pageWidth - (LayoutShowcaseConsts.margin * (LayoutShowcaseState.columns + 1));
 
-
     // Calculate the width of a single visual, according to the number of columns
     // For one and three columns visuals width will be a third of visuals total width
     let width = (LayoutShowcaseState.columns === ColumnsNumber.Two) ? (visualsTotalWidth / 2) : (visualsTotalWidth / 3);
@@ -223,16 +226,14 @@ function renderVisuals() {
     LayoutShowcaseState.layoutReport.updateSettings(settings);
 }
 
+// Update the visuals list with the change and rerender all visuals
 function onCheckboxClicked(checkbox) {
-
-    // Update the visuals list with the change and render all visuals
     LayoutShowcaseState.layoutVisuals.find(visual => visual.name === checkbox.value).checked = $(checkbox).is(':checked');
     renderVisuals();
 };
 
+// Update columns number and rerender the visuals
 function onColumnsClicked(num) {
-
-    // Update columns var and render all visuals
     LayoutShowcaseState.columns = num;
     renderVisuals();
 }

demo/v2-demo/scripts/report.js

@@ -161,6 +161,7 @@ function OpenInteractTab() {
         $("#settings").load("settings_interact_dashboard.html", function() {
             SetToggleHandler("operation-categories");
             LoadCodeArea("#embedCodeDiv", "");
+            hideFeaturesOnMobile();
         });
     }
     else if (entityType == EntityType.Qna)
@@ -185,6 +186,8 @@ function OpenInteractTab() {
         $("#settings").load("settings_interact_report.html", function() {
             SetToggleHandler("operation-categories");
             LoadCodeArea("#embedCodeDiv", "");
+            $('.hideOnReportCreate').toggle(GetSession(SessionKeys.EmbedMode) !== EmbedCreateMode);
+            hideFeaturesOnMobile();
         });
     }
 }
@@ -513,6 +516,8 @@ function EmbedAreaDesktopView() {
         setCodeArea(mode, entityType)
     }
 
+    $('.hideOnMobile').show();
+
     // Check if run button was clicked in the other mode and wasn't clicked on the new mode
     if ($(classPrefix + "MobileContainer iframe").length && !$(classPrefix + "Container iframe").length) {
         let runFunc = getEmbedCode(mode, entityType);
@@ -553,6 +558,8 @@ function EmbedAreaMobileView() {
         setCodeArea(mode, entityType)
     }
 
+    $('.hideOnMobile').hide();
+
     // Check if run button was clicked in the other mode and wasn't clicked on the new mode
     if ($(classPrefix + "Container iframe").length && !$(classPrefix + "MobileContainer iframe").length) {
         let runFunc = getEmbedCode(mode, entityType);
@@ -608,3 +615,8 @@ function updateRunFuncSessionParameters(runFunc) {
 
     return code;
 }
+
+function hideFeaturesOnMobile(){
+    if ($(".mobile-view").hasClass(active_class))
+        $('.hideOnMobile').hide();
+}

demo/v2-demo/scripts/step_samples.js

@@ -1,4 +1,9 @@
 function OpenCodeStepWithSample(entityType) {
+    $("html, body").animate({ scrollTop: 0 }, "slow");
+
+    // Clear the log
+    ClearTextArea('#txtResponse');
+
     SetSession(SessionKeys.EntityType, entityType);
     SetSession(SessionKeys.TokenType, defaultTokenType);
 

demo/v2-demo/settings_interact_dashboard.html

@@ -4,10 +4,10 @@
             <div id="wrapper-operations-div" class="operations-div">
                 <div id="operation-categories" class="operations-div">
                     <ul class="operations-ul">
-                        <li id="dashboard-general-operations" onclick="OpenDashboardGeneralOperations();"><a href="#">General Operations</a></li>
+                        <li id="dashboard-general-operations" onclick="OpenDashboardGeneralOperations();" class="hideOnMobile"><a href="#">General Operations</a></li>
                         <ul id="dashboard-general-operations-ul" class="function-ul" style="display: none;">
-                            <li onclick="Dashboard_FullScreen()"><a href="#">Full screen</a></li>
-                            <li onclick="Dashboard_ExitFullScreen()"><a href="#">Exit full screen</a></li>
+                            <li onclick="Dashboard_FullScreen()" class="hideOnMobile"><a href="#">Full screen</a></li>
+                            <li onclick="Dashboard_ExitFullScreen()" class="hideOnMobile"><a href="#">Exit full screen</a></li>
                         </ul>
                         <li id="dashboard-properties-operations" onclick="OpenDashboardPropertiesOperations();"><a href="#">Properties</a></li>
                         <ul id="dashboard-properties-operations-ul" class="function-ul" style="display: none;">