Skip to content

Commit 8995695

Browse files
bredmond5bredmond5
committed
add an iframe
1 parent 8fb780d commit 8995695

File tree

3 files changed

+102
-89
lines changed

3 files changed

+102
-89
lines changed

‎examples/example.template.html‎

Lines changed: 66 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -213,72 +213,72 @@
213213
<div style="display: flex; flex-direction: column; align-items: center; width: 100%">
214214
<h2>Branch Metrics Web SDK Example</h2>
215215
<hr class="lineBreak horizontalLine">
216-
<!-- <div class="split-container">-->
217-
<!-- <div class="container api-methods">-->
218-
<!-- <section>-->
219-
<!-- <h3>Methods</h3>-->
220-
<!-- <a href="https://help.branch.io/developers-hub/docs/web-full-reference" target="_blank">https://help.branch.io/developers-hub/docs/web-full-reference</a>-->
221-
<!-- <hr class="lineBreak horizontalLine">-->
222-
223-
<!-- <h4>Session</h4>-->
224-
<!-- <div class="group">-->
225-
<!-- <button class="btn btn-info" onclick="callData()">.data()</button>-->
226-
<!-- <button class="btn btn-info" onclick="callLogout()">Logout</button>-->
227-
<!-- <button class="btn btn-info" onclick="callFirst()">.first()</button>-->
228-
<!-- </div>-->
229-
<!-- <h4>Identity</h4>-->
230-
<!-- <div class="group">-->
231-
<!-- <input class="example-input" type="text" id="identityID" placeholder="[email protected]">-->
232-
<!-- <button id="setIdentity" class="btn btn-info" onclick="callSetIdentity()">Set Identity</button>-->
233-
<!-- </div>-->
234-
<!-- <h4>Events</h4>-->
235-
<!-- <div class="group">-->
236-
<!-- <button class="btn btn-info" onclick="callLogEvent('PURCHASE')">Create Standard Event</button>-->
237-
<!-- <button class="btn btn-info" onclick="callLogEvent('testedCustomEvent')">Create Custom Event</button>-->
238-
<!-- </div>-->
239-
<!-- <h4>Sharing</h4>-->
240-
<!-- <div class="group">-->
241-
<!-- <button class="btn btn-info" onclick="callLink()">Create Link</button>-->
242-
<!-- <button class="btn btn-info" onclick="callQrCode()">Create QrCode</button>-->
243-
<!-- <button class="btn btn-info" onclick="callBanner()">.banner()</button>-->
244-
<!-- </div>-->
245-
<!-- <h4>Tracking</h4>-->
246-
<!-- <div class="group">-->
247-
<!-- <button class="btn btn-info" onclick="callDisableTracking()">Disable Tracking</button>-->
248-
<!-- <button class="btn btn-info" onclick="callEnableTracking()">Enable Tracking</button>-->
249-
<!-- </div>-->
250-
<!-- <h3>Api Settings</h3>-->
251-
<!-- <hr class="lineBreak horizontalLine">-->
252-
<!-- <div class="group" id="configButtons"></div>-->
253-
<!-- <label id="branchKeyLabel" for="branchKeyInput">Branch Key:</label>-->
254-
<!-- <input type="text" id="branchKeyInput" class="apiInput">-->
255-
<!-- <br>-->
256-
<!-- <label id="apiUrlLabel" for="apiUrlInput">Api Url:</label>-->
257-
<!-- <input type="text" id="apiUrlInput" class="apiInput">-->
258-
<!-- <br>-->
259-
<!-- <button class="btn btn-info" onclick="updateQueryParams()">-->
260-
<!-- Update Api Settings-->
261-
<!-- </button>-->
262-
<!-- </section>-->
263-
<!-- </div>-->
264-
<!-- <div class="lineBreak verticalLine"></div>-->
265-
<!-- <div class="container api-info">-->
266-
<!-- <section>-->
267-
<!-- <h3>Api Requests</h3>-->
268-
<!-- <hr class="lineBreak horizontalLine">-->
269-
<!-- <h4>Session Info-->
270-
<!-- <button class="btn btn-info" onclick="copySessionInfo()" style="margin-left: 10px; font-size: 12px; padding: 2px 8px; cursor: pointer;">-->
271-
<!-- Copy-->
272-
<!-- </button>-->
273-
<!-- </h4>-->
274-
<!-- <pre id="session-info">Reading session from .init()...</pre>-->
275-
<!-- <h4>Request</h4>-->
276-
<!-- <pre id="request">Click a button!</pre>-->
277-
<!-- <h4>Response</h4>-->
278-
<!-- <pre id="response">Click a button!</pre>-->
279-
<!-- </section>-->
280-
<!-- </div>-->
281-
<!-- </div>-->
216+
<div class="split-container">
217+
<div class="container api-methods">
218+
<section>
219+
<h3>Methods</h3>
220+
<a href="https://help.branch.io/developers-hub/docs/web-full-reference" target="_blank">https://help.branch.io/developers-hub/docs/web-full-reference</a>
221+
<hr class="lineBreak horizontalLine">
222+
223+
<h4>Session</h4>
224+
<div class="group">
225+
<button class="btn btn-info" onclick="callData()">.data()</button>
226+
<button class="btn btn-info" onclick="callLogout()">Logout</button>
227+
<button class="btn btn-info" onclick="callFirst()">.first()</button>
228+
</div>
229+
<h4>Identity</h4>
230+
<div class="group">
231+
<input class="example-input" type="text" id="identityID" placeholder="[email protected]">
232+
<button id="setIdentity" class="btn btn-info" onclick="callSetIdentity()">Set Identity</button>
233+
</div>
234+
<h4>Events</h4>
235+
<div class="group">
236+
<button class="btn btn-info" onclick="callLogEvent('PURCHASE')">Create Standard Event</button>
237+
<button class="btn btn-info" onclick="callLogEvent('testedCustomEvent')">Create Custom Event</button>
238+
</div>
239+
<h4>Sharing</h4>
240+
<div class="group">
241+
<button class="btn btn-info" onclick="callLink()">Create Link</button>
242+
<button class="btn btn-info" onclick="callQrCode()">Create QrCode</button>
243+
<button class="btn btn-info" onclick="callBanner()">.banner()</button>
244+
</div>
245+
<h4>Tracking</h4>
246+
<div class="group">
247+
<button class="btn btn-info" onclick="callDisableTracking()">Disable Tracking</button>
248+
<button class="btn btn-info" onclick="callEnableTracking()">Enable Tracking</button>
249+
</div>
250+
<h3>Api Settings</h3>
251+
<hr class="lineBreak horizontalLine">
252+
<div class="group" id="configButtons"></div>
253+
<label id="branchKeyLabel" for="branchKeyInput">Branch Key:</label>
254+
<input type="text" id="branchKeyInput" class="apiInput">
255+
<br>
256+
<label id="apiUrlLabel" for="apiUrlInput">Api Url:</label>
257+
<input type="text" id="apiUrlInput" class="apiInput">
258+
<br>
259+
<button class="btn btn-info" onclick="updateQueryParams()">
260+
Update Api Settings
261+
</button>
262+
</section>
263+
</div>
264+
<div class="lineBreak verticalLine"></div>
265+
<div class="container api-info">
266+
<section>
267+
<h3>Api Requests</h3>
268+
<hr class="lineBreak horizontalLine">
269+
<h4>Session Info
270+
<button class="btn btn-info" onclick="copySessionInfo()" style="margin-left: 10px; font-size: 12px; padding: 2px 8px; cursor: pointer;">
271+
Copy
272+
</button>
273+
</h4>
274+
<pre id="session-info">Reading session from .init()...</pre>
275+
<h4>Request</h4>
276+
<pre id="request">Click a button!</pre>
277+
<h4>Response</h4>
278+
<pre id="response">Click a button!</pre>
279+
</section>
280+
</div>
281+
</div>
282282
</div>
283283
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
284284
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

‎src/branch_view.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -245,7 +245,7 @@ branch_view._getPageviewRequestData = function(metadata, options, branch, isDism
245245
obj = utils.addPropertyIfNotNull(obj, 'branch_view_id', branchViewId);
246246
obj = utils.addPropertyIfNotNull(obj, 'no_journeys', options['no_journeys']);
247247
obj = utils.addPropertyIfNotNull(obj, 'is_iframe', utils.isIframe());
248-
// obj = utils.addPropertyIfNotNull(obj, 'journey_dismissals', journeyDismissals);
248+
obj = utils.addPropertyIfNotNull(obj, 'journey_dismissals', journeyDismissals);
249249
obj = utils.addPropertyIfNotNull(obj, 'identity', identity);
250250
obj = utils.addPropertyIfNotNull(obj, 'session_link_click_id', SessionlinkClickId);
251251
obj['user_language'] = userLanguage;

‎src/journeys_utils.js‎

Lines changed: 35 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -248,9 +248,8 @@ journeys_utils.createIframe = function() {
248248
iframe.scrolling = 'no';
249249
iframe.id = 'branch-banner-iframe';
250250
iframe.className = 'branch-animation';
251-
iframe.setAttribute('tabindex', '0');
252-
iframe.setAttribute('aria-label', 'Branch Banner Frame');
253251
iframe.title = 'Branch Banner Frame';
252+
iframe.setAttribute('aria-label', 'Branch Banner Frame');
254253
utils.addNonceAttribute(iframe);
255254

256255
return iframe;
@@ -288,38 +287,52 @@ journeys_utils.addHtmlToIframe = function(iframe, html, userAgent) {
288287
var focusableContent = modal.querySelectorAll(focusableElements);
289288
var focusElementIdx = 0;
290289
291-
function handleTabKey(e) {
290+
function handleKeyboardNavigation(e) {
292291
var isTabPressed = e.key === 'Tab' || e.keyCode === 9;
293-
294-
if (!isTabPressed) {
295-
return;
296-
}
292+
var isEnterPressed = e.key === 'Enter' || e.keyCode === 13;
297293
298-
console.log('tab pressed');
299-
300-
if (e.shiftKey) {
301-
if (focusElementIdx <= 0) {
302-
focusElementIdx = focusableContent.length - 1;
294+
// Handle Tab key for focus navigation
295+
if (isTabPressed) {
296+
if (e.shiftKey) {
297+
if (focusElementIdx <= 0) {
298+
focusElementIdx = focusableContent.length - 1;
299+
} else {
300+
focusElementIdx = focusElementIdx - 1;
301+
}
303302
} else {
304-
focusElementIdx = focusElementIdx - 1;
303+
if (focusElementIdx >= focusableContent.length - 1) {
304+
focusElementIdx = 0;
305+
} else {
306+
focusElementIdx = focusElementIdx + 1;
307+
}
305308
}
306-
} else {
307-
if (focusElementIdx >= focusableContent.length - 1) {
308-
focusElementIdx = 0;
309-
} else {
310-
focusElementIdx = focusElementIdx + 1;
309+
310+
focusableContent[focusElementIdx].focus();
311+
e.preventDefault();
312+
return;
313+
}
314+
315+
// Handle Enter key for activation
316+
if (isEnterPressed) {
317+
// Get the currently focused element
318+
var focusedElement = document.activeElement;
319+
if (focusedElement && (
320+
focusedElement.tagName === 'BUTTON' ||
321+
focusedElement.getAttribute('role') === 'button' ||
322+
focusedElement.tagName === 'A'
323+
)) {
324+
// Simulate a click on the element
325+
focusedElement.click();
326+
e.preventDefault();
311327
}
312328
}
313-
314-
focusableContent[focusElementIdx].focus();
315-
e.preventDefault();
316329
}
317330
318331
function autoFocus(delay) {
319332
setTimeout(function() { focusableContent[focusElementIdx].focus() }, delay);
320333
}
321334
322-
document.addEventListener('keydown', handleTabKey);
335+
document.addEventListener('keydown', handleKeyboardNavigation);
323336
autoFocus(100);
324337
325338
`;

0 commit comments

Comments
 (0)