Skip to content

Commit b3da7ad

Browse files
author
Amit Shuster
committed
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
1 parent 5216b20 commit b3da7ad

11 files changed

Lines changed: 90 additions & 58 deletions

‎demo/v2-demo/docs.html‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,20 @@
22
<div id="docs-content">
33
<div class="docs-line">
44
<div class="docs-links">
5-
<h2>Getting Started</h2>
5+
<h2>Getting started</h2>
66
<a href="https://github.com/Microsoft/powerbi-javascript/wiki">Power BI JavaScript API wiki</a><br>
77
<a href="https://docs.microsoft.com/en-us/power-bi/developer/embedding">Power BI Embedding Documentation</a><br>
88
</div>
99
<div class="docs-links">
10-
<h2>Useful Links</h2>
10+
<h2>Useful links</h2>
1111
<a href="https://azure.microsoft.com/en-us/services/power-bi-embedded/">Power BI Embedded on Azure</a><br>
12-
<a href="https://community.powerbi.com/t5/Forums/ct-p/Forums">Power BI Community</a><br>
13-
<a href="https://ideas.powerbi.com/forums/265200-power-bi-ideas/category/161718-apis-and-embedding">Power BI Ideas - APIs and Embedding</a><br>
12+
<a href="https://community.powerbi.com/t5/Forums/ct-p/Forums">Power BI community</a><br>
13+
<a href="https://ideas.powerbi.com/forums/265200-power-bi-ideas/category/161718-apis-and-embedding">Power BI Ideas - APIs and embedding</a><br>
1414
</div>
1515
<div class="docs-links">
1616
<h2>Support</h2>
1717
<a href="https://docs.microsoft.com/en-us/power-bi/developer/embedded-faq">Power BI Embedded FAQ</a><br>
18-
<a href="https://docs.microsoft.com/en-us/power-bi/developer/embedded-troubleshoot">Power BI Embedded Troubleshooting</a><br>
18+
<a href="https://docs.microsoft.com/en-us/power-bi/developer/embedded-troubleshoot">Power BI Embedded troubleshooting</a><br>
1919
<a href="https://powerbi.microsoft.com/en-us/support/">Power BI Support</a><br>
2020
</div>
2121
</div>
@@ -30,11 +30,11 @@ <h2>Videos</h2>
3030
<iframe width="330" height="186" src="https://www.youtube.com/embed/NbsLRDMWNRI" frameborder="0" allow="encrypted-media" allowfullscreen></iframe>
3131
</div>
3232
<div class="docs-video">
33-
Get an Embed Token & Embed Your Analytics<br>
33+
Get an embed token & embed your analytics<br>
3434
<iframe width="330" height="186" src="https://www.youtube.com/embed/GPHHdDRSlis" frameborder="0" allow="encrypted-media" allowfullscreen></iframe>
3535
</div>
3636
<div class="docs-video">
37-
Setting up and Getting Started<br>
37+
Setting up and getting started<br>
3838
<video width="330" height="186" controls="controls" preload="metadata">
3939
<source src="https://sec.ch9.ms/ch9/5da0/29725d07-f7c3-4090-8b80-a5881e5d5da0/PowerBiEmbeddedPart1_high.mp4#t=12.6" type="video/mp4">
4040
Your browser does not support the video tag.
@@ -48,7 +48,7 @@ <h2>Videos</h2>
4848
</video>
4949
</div>
5050
<div class="docs-video">
51-
Extend Context Menu Feature<br>
51+
Extend context menu feature<br>
5252
<iframe width="330" height="186" src="https://www.youtube.com/embed/Yt4MGpD2cVk" frameborder="0" allow="encrypted-media" allowfullscreen></iframe>
5353
</div>
5454
</div>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<div id="showcases-text">
2-
<h3>Bookmarks Showcase</h3>
2+
<h3>Capture insights & share</h3>
33
<br>
44
<div id="showcases-description">
55
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‎

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,9 @@ var BookmarkShowcaseState = {
88
nextBookmarkId: 1
99
}
1010

11+
const dialogTextSelectTimeout = 50;
12+
13+
// Embed the report and retrieve the existing report bookmarks
1114
function embedBookmarksReport() {
1215

1316
// Load sample report properties into session
@@ -136,6 +139,7 @@ function createBookmarksList(bookmarks) {
136139
}
137140
}
138141

142+
// Capture new bookmark of the current state and update the bookmarks list
139143
function onBookmarkCaptureClicked() {
140144

141145
// Element clicked animation
@@ -160,6 +164,7 @@ function onBookmarkCaptureClicked() {
160164
});
161165
}
162166

167+
// Set the new captured bookmark as the active bookmark on the list
163168
function setCapturedBookmarkActive(bookmark) {
164169
// Add the new bookmark to the HTML list
165170
$('#bookmarksList').append(buildBookmarkElement(bookmark));
@@ -177,19 +182,19 @@ function setCapturedBookmarkActive(bookmark) {
177182
$('#bookmark_' + BookmarkShowcaseState.nextBookmarkId).attr('checked', true);
178183
}
179184

185+
// Closes the dialog
180186
function onCloseDialogClicked() {
181-
182-
// Close the dialog
183187
$('#overlay').hide();
184188
$('#shareDialog').hide();
185189
}
186190

191+
// Copy the dialog's input text
187192
function onDialogCopyClicked() {
188-
189-
// Copy the input text
190-
CopyTextArea('#dialogInput', '#btnDialogCopy')
193+
CopyTextArea('#dialogInput', '#btnDialogCopy');
194+
$('#dialogInput').select();
191195
}
192196

197+
// Apply clicked bookmark state and set it as the active bookmark on the list
193198
function onBookmarkClicked(element) {
194199

195200
// Remove share boomark icon
@@ -221,18 +226,23 @@ function shareBookmark(element) {
221226
let shareUrl = location.href.substring(0, location.href.lastIndexOf("/")) + '/shareBookmark.html' + '?state=' + currentBookmark.state;
222227

223228
// Set bookmark display name and share URL on dialog HTML code
229+
$('#dialogBookmarkName').empty();
224230
var displayNameElement = document.createTextNode(currentBookmark.displayName);
225231
$('#dialogBookmarkName').append(displayNameElement);
226232
$('#dialogInput').val(shareUrl);
227233

228234
// Show overlay and share dialog
229235
$('#overlay').show();
230236
$('#shareDialog').show();
237+
238+
// Select dialog input after the dialog is shown
239+
setTimeout(function() {
240+
$('#dialogInput').select();
241+
}, dialogTextSelectTimeout);
231242
}
232243

233244
// Build bookmark radio button HTML element
234245
function buildBookmarkElement(bookmark) {
235-
236246
var labelElement = document.createElement("label");
237247
labelElement.setAttribute("class", "bookmarkContainer");
238248

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<div id="showcases-text">
2-
<h3>Custom Layout Showcase</h3>
2+
<h3>Control your report layout</h3>
33
<br>
44
<div id="showcases-description">
55
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‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ var LayoutShowcaseState = {
1717
layoutPageName: null
1818
}
1919

20+
// Embed the report and retrieve all report visuals
2021
function embedCustomLayoutReport() {
2122

2223
// Load custom layout report properties into session
@@ -101,6 +102,9 @@ function createVisualsArray(reportVisuals) {
101102
return visual.title !== undefined;
102103
});
103104

105+
// Clear visuals list div
106+
$('#visualsList').empty();
107+
104108
// Build checkbox html list and insert the html code to visualsList div
105109
for (let visual of LayoutShowcaseState.layoutVisuals) {
106110
$('#visualsList').append(buildVisualElement(visual));
@@ -124,10 +128,9 @@ function renderVisuals() {
124128
let pageWidth = $('#embedContainer').width();
125129
let pageHeight = $('#embedContainer').height();
126130

127-
// Calculate total width for visuals decreasing the size of margins from the width of the page
131+
// Calculate the width left for visuals per line by decreasing the margins width from the page width
128132
let visualsTotalWidth = pageWidth - (LayoutShowcaseConsts.margin * (LayoutShowcaseState.columns + 1));
129133

130-
131134
// Calculate the width of a single visual, according to the number of columns
132135
// For one and three columns visuals width will be a third of visuals total width
133136
let width = (LayoutShowcaseState.columns === ColumnsNumber.Two) ? (visualsTotalWidth / 2) : (visualsTotalWidth / 3);
@@ -223,16 +226,14 @@ function renderVisuals() {
223226
LayoutShowcaseState.layoutReport.updateSettings(settings);
224227
}
225228

229+
// Update the visuals list with the change and rerender all visuals
226230
function onCheckboxClicked(checkbox) {
227-
228-
// Update the visuals list with the change and render all visuals
229231
LayoutShowcaseState.layoutVisuals.find(visual => visual.name === checkbox.value).checked = $(checkbox).is(':checked');
230232
renderVisuals();
231233
};
232234

235+
// Update columns number and rerender the visuals
233236
function onColumnsClicked(num) {
234-
235-
// Update columns var and render all visuals
236237
LayoutShowcaseState.columns = num;
237238
renderVisuals();
238239
}

‎demo/v2-demo/scripts/report.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -161,6 +161,7 @@ function OpenInteractTab() {
161161
$("#settings").load("settings_interact_dashboard.html", function() {
162162
SetToggleHandler("operation-categories");
163163
LoadCodeArea("#embedCodeDiv", "");
164+
hideFeaturesOnMobile();
164165
});
165166
}
166167
else if (entityType == EntityType.Qna)
@@ -185,6 +186,8 @@ function OpenInteractTab() {
185186
$("#settings").load("settings_interact_report.html", function() {
186187
SetToggleHandler("operation-categories");
187188
LoadCodeArea("#embedCodeDiv", "");
189+
$('.hideOnReportCreate').toggle(GetSession(SessionKeys.EmbedMode) !== EmbedCreateMode);
190+
hideFeaturesOnMobile();
188191
});
189192
}
190193
}
@@ -513,6 +516,8 @@ function EmbedAreaDesktopView() {
513516
setCodeArea(mode, entityType)
514517
}
515518

519+
$('.hideOnMobile').show();
520+
516521
// Check if run button was clicked in the other mode and wasn't clicked on the new mode
517522
if ($(classPrefix + "MobileContainer iframe").length && !$(classPrefix + "Container iframe").length) {
518523
let runFunc = getEmbedCode(mode, entityType);
@@ -553,6 +558,8 @@ function EmbedAreaMobileView() {
553558
setCodeArea(mode, entityType)
554559
}
555560

561+
$('.hideOnMobile').hide();
562+
556563
// Check if run button was clicked in the other mode and wasn't clicked on the new mode
557564
if ($(classPrefix + "Container iframe").length && !$(classPrefix + "MobileContainer iframe").length) {
558565
let runFunc = getEmbedCode(mode, entityType);
@@ -608,3 +615,8 @@ function updateRunFuncSessionParameters(runFunc) {
608615

609616
return code;
610617
}
618+
619+
function hideFeaturesOnMobile(){
620+
if ($(".mobile-view").hasClass(active_class))
621+
$('.hideOnMobile').hide();
622+
}

‎demo/v2-demo/scripts/step_samples.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
11
function OpenCodeStepWithSample(entityType) {
2+
$("html, body").animate({ scrollTop: 0 }, "slow");
3+
4+
// Clear the log
5+
ClearTextArea('#txtResponse');
6+
27
SetSession(SessionKeys.EntityType, entityType);
38
SetSession(SessionKeys.TokenType, defaultTokenType);
49

‎demo/v2-demo/settings_interact_dashboard.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@
44
<div id="wrapper-operations-div" class="operations-div">
55
<div id="operation-categories" class="operations-div">
66
<ul class="operations-ul">
7-
<li id="dashboard-general-operations" onclick="OpenDashboardGeneralOperations();"><a href="#">General Operations</a></li>
7+
<li id="dashboard-general-operations" onclick="OpenDashboardGeneralOperations();" class="hideOnMobile"><a href="#">General Operations</a></li>
88
<ul id="dashboard-general-operations-ul" class="function-ul" style="display: none;">
9-
<li onclick="Dashboard_FullScreen()"><a href="#">Full screen</a></li>
10-
<li onclick="Dashboard_ExitFullScreen()"><a href="#">Exit full screen</a></li>
9+
<li onclick="Dashboard_FullScreen()" class="hideOnMobile"><a href="#">Full screen</a></li>
10+
<li onclick="Dashboard_ExitFullScreen()" class="hideOnMobile"><a href="#">Exit full screen</a></li>
1111
</ul>
1212
<li id="dashboard-properties-operations" onclick="OpenDashboardPropertiesOperations();"><a href="#">Properties</a></li>
1313
<ul id="dashboard-properties-operations-ul" class="function-ul" style="display: none;">

0 commit comments

Comments
 (0)