Merged PR 5692: Playground adjustments · brenopsa/PowerBI-JavaScript@b3da7ad · GitHub
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

‎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

0 commit comments

Comments
 (0)