Skip to content

Commit

Permalink
Changes:
Browse files Browse the repository at this point in the history 
* Added "static" backdrop option for Offcanvas
* Updated Test suite and docs
  • Loading branch information
@thednp
thednp committed May 30, 2022
1 parent 54748b6 commit aa39e28
Show file tree
Hide file tree
Showing 10 changed files with 48 additions and 25 deletions.
8 changes: 3 additions & 5 deletions cypress/integration/offcanvas.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,6 @@ describe('Offcanvas Class Tests', () => {
.get('@click_test').its('triggers').eq(0).click()
.get('@click_test').its('element').should('have.class', 'show').and('be.visible')
.get('@click_test').its('triggers').eq(0).click()
// .wait(100)
.get('@click_test').its('element').should('not.have.class', 'show').and('be.hidden')
.get('@click_test').its('triggers').eq(0).click()
.get('@click_test').its('element').should('have.class', 'show').and('be.visible')
Expand All @@ -95,14 +94,15 @@ describe('Offcanvas Class Tests', () => {
it('Can be dismissed via Escape', function() {
cy.wait('@offcanvas-page')
.get('[data-cy="offcanvas"]').eq(0).then(($element) => {
cy.wrap(new Offcanvas($element[0])).as('key_test');
cy.wrap(new Offcanvas($element[0], { backdrop: 'static'})).as('key_test');
})
.get('@key_test').invoke('show')
.get('@key_test').its('element').should('have.class', 'show').and('be.visible')
.get('.offcanvas-backdrop').click()
.get('@key_test').its('element').should('have.class', 'show').and('be.visible')
.wait(100)
.document().trigger('keydown', { code: 'Escape' })
.get('@key_test').its('element').should('not.have.class', 'show').and('be.hidden')
// .wait(200)
});

it('Can do dispose()', () => {
Expand Down Expand Up @@ -137,7 +137,6 @@ describe('Offcanvas Class Tests', () => {
.get('@hide_event').its('element').should('have.class', 'show').and('be.visible')
.get('@hide_event').invoke('hide')
.get('@hide_event').its('element').should('have.class', 'show').and('be.visible')
// .wait(200)
});

it('Can work with CustomEvent show', function() {
Expand All @@ -154,6 +153,5 @@ describe('Offcanvas Class Tests', () => {
})
.get('@show_event').invoke('toggle')
.get('@show_event').its('element').should('not.have.class', 'show').and('be.hidden')
// .wait(200)
});
});
8 changes: 6 additions & 2 deletions dist/bootstrap-native.esm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3567,18 +3567,22 @@ function offcanvasDismissHandler(e) {
if (!self) return;

const { options, triggers } = self;
const { backdrop } = options;
const trigger = closest(target, offcanvasToggleSelector);
const selection = getDocument(element).getSelection();

if (overlay.contains(target) && backdrop === 'static') return;

/* istanbul ignore else */
if (!(selection && selection.toString().length)
&& ((!element.contains(target) && options.backdrop
&& /* istanbul ignore next */(!trigger || (trigger && !triggers.includes(trigger))))
&& ((!element.contains(target) && backdrop
&& /* istanbul ignore next */(!trigger || triggers.includes(target)))
|| (offCanvasDismiss && offCanvasDismiss.contains(target)))) {
self.relatedTarget = offCanvasDismiss && offCanvasDismiss.contains(target)
? offCanvasDismiss : null;
self.hide();
}

/* istanbul ignore next */
if (trigger && trigger.tagName === 'A') e.preventDefault();
}
Expand Down
2 changes: 1 addition & 1 deletion dist/bootstrap-native.esm.min.js
View file

Large diffs are not rendered by default.

8 changes: 6 additions & 2 deletions dist/bootstrap-native.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3573,18 +3573,22 @@
if (!self) return;

const { options, triggers } = self;
const { backdrop } = options;
const trigger = closest(target, offcanvasToggleSelector);
const selection = getDocument(element).getSelection();

if (overlay.contains(target) && backdrop === 'static') return;

/* istanbul ignore else */
if (!(selection && selection.toString().length)
&& ((!element.contains(target) && options.backdrop
&& /* istanbul ignore next */(!trigger || (trigger && !triggers.includes(trigger))))
&& ((!element.contains(target) && backdrop
&& /* istanbul ignore next */(!trigger || triggers.includes(target)))
|| (offCanvasDismiss && offCanvasDismiss.contains(target)))) {
self.relatedTarget = offCanvasDismiss && offCanvasDismiss.contains(target)
? offCanvasDismiss : null;
self.hide();
}

/* istanbul ignore next */
if (trigger && trigger.tagName === 'A') e.preventDefault();
}
Expand Down
2 changes: 1 addition & 1 deletion dist/bootstrap-native.min.js
View file

Large diffs are not rendered by default.

8 changes: 6 additions & 2 deletions dist/components/offcanvas-native.esm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1278,18 +1278,22 @@ function offcanvasDismissHandler(e) {
if (!self) return;

const { options, triggers } = self;
const { backdrop } = options;
const trigger = closest(target, offcanvasToggleSelector);
const selection = getDocument(element).getSelection();

if (overlay.contains(target) && backdrop === 'static') return;

/* istanbul ignore else */
if (!(selection && selection.toString().length)
&& ((!element.contains(target) && options.backdrop
&& /* istanbul ignore next */(!trigger || (trigger && !triggers.includes(trigger))))
&& ((!element.contains(target) && backdrop
&& /* istanbul ignore next */(!trigger || triggers.includes(target)))
|| (offCanvasDismiss && offCanvasDismiss.contains(target)))) {
self.relatedTarget = offCanvasDismiss && offCanvasDismiss.contains(target)
? offCanvasDismiss : null;
self.hide();
}

/* istanbul ignore next */
if (trigger && trigger.tagName === 'A') e.preventDefault();
}
Expand Down
8 changes: 6 additions & 2 deletions dist/components/offcanvas-native.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1284,18 +1284,22 @@
if (!self) return;

const { options, triggers } = self;
const { backdrop } = options;
const trigger = closest(target, offcanvasToggleSelector);
const selection = getDocument(element).getSelection();

if (overlay.contains(target) && backdrop === 'static') return;

/* istanbul ignore else */
if (!(selection && selection.toString().length)
&& ((!element.contains(target) && options.backdrop
&& /* istanbul ignore next */(!trigger || (trigger && !triggers.includes(trigger))))
&& ((!element.contains(target) && backdrop
&& /* istanbul ignore next */(!trigger || triggers.includes(target)))
|| (offCanvasDismiss && offCanvasDismiss.contains(target)))) {
self.relatedTarget = offCanvasDismiss && offCanvasDismiss.contains(target)
? offCanvasDismiss : null;
self.hide();
}

/* istanbul ignore next */
if (trigger && trigger.tagName === 'A') e.preventDefault();
}
Expand Down
8 changes: 6 additions & 2 deletions docs/assets/js/bootstrap-native.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3573,18 +3573,22 @@
if (!self) return;

const { options, triggers } = self;
const { backdrop } = options;
const trigger = closest(target, offcanvasToggleSelector);
const selection = getDocument(element).getSelection();

if (overlay.contains(target) && backdrop === 'static') return;

/* istanbul ignore else */
if (!(selection && selection.toString().length)
&& ((!element.contains(target) && options.backdrop
&& /* istanbul ignore next */(!trigger || (trigger && !triggers.includes(trigger))))
&& ((!element.contains(target) && backdrop
&& /* istanbul ignore next */(!trigger || triggers.includes(target)))
|| (offCanvasDismiss && offCanvasDismiss.contains(target)))) {
self.relatedTarget = offCanvasDismiss && offCanvasDismiss.contains(target)
? offCanvasDismiss : null;
self.hide();
}

/* istanbul ignore next */
if (trigger && trigger.tagName === 'A') e.preventDefault();
}
Expand Down
13 changes: 7 additions & 6 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1466,7 +1466,7 @@ <h3>Modal Options</h3>
<tbody>
<tr>
<td><code>backdrop</code></td>
<td><em>boolean</em> or the <em>string</em> <code>'static'</code></td>
<td><em>boolean</em> or the <em>string</em> <code>"static"</code></td>
<td><em>true</em></td>
<td>Includes a modal-backdrop element. Alternatively, specify <code>'static'</code> for a backdrop which
doesn't close the modal on click.</td>
Expand Down Expand Up @@ -1894,9 +1894,10 @@ <h3>Offcanvas Options</h3>
<tbody>
<tr>
<td><code>backdrop</code></td>
<td><em>boolean</em></td>
<td><em>boolean</em><br><em>"static"</em></td>
<td><em>true</em></td>
<td>Option to add a backdrop on the body when offcanvas element is shown.</td>
<td>Option to add a backdrop on the body when offcanvas element is shown. Alternatively, specify <code>"static"</code>
for a backdrop which doesn't close the offcanvas on click.</td>
</tr>
<tr>
<td><code>keyboard</code></td>
Expand Down Expand Up @@ -2140,7 +2141,6 @@ <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
<button type="button" class="btn btn-secondary mb-1" data-bs-toggle="popover" data-bs-trigger="click"
data-bs-content="Closing this offcanvas will also close this popover.">Popover</button>
</div>

</div>
</div>

Expand Down Expand Up @@ -2176,13 +2176,14 @@ <h5 class="offcanvas-title" id="offcanvasScrollingLabel">Offcanvas with scrollin
</div>
</div>
</div>
<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTopWithBackdrop" aria-labelledby="offcanvasTopWithBackdropLabel">

<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTopWithBackdrop" aria-labelledby="offcanvasTopWithBackdropLabel" data-bs-backdrop="static">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasTopWithBackdropLabel">Offcanvas Top</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<p>.....</p>
<p>This offcanvas instance uses "static" backdrop.</p>
<div class="btn-toolbar">
<svg viewBox="0 0 80 43" width="80" height="43" xmlns="http://www.w3.org/2000/svg" class="me-1 mb-1"
data-bs-toggle="tooltip" data-bs-placement="top"
Expand Down
8 changes: 6 additions & 2 deletions src/components/offcanvas-native.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -199,18 +199,22 @@ function offcanvasDismissHandler(e) {
if (!self) return;

const { options, triggers } = self;
const { backdrop } = options;
const trigger = closest(target, offcanvasToggleSelector);
const selection = getDocument(element).getSelection();

if (overlay.contains(target) && backdrop === 'static') return;

/* istanbul ignore else */
if (!(selection && selection.toString().length)
&& ((!element.contains(target) && options.backdrop
&& /* istanbul ignore next */(!trigger || (trigger && !triggers.includes(trigger))))
&& ((!element.contains(target) && backdrop
&& /* istanbul ignore next */(!trigger || triggers.includes(target)))
|| (offCanvasDismiss && offCanvasDismiss.contains(target)))) {
self.relatedTarget = offCanvasDismiss && offCanvasDismiss.contains(target)
? offCanvasDismiss : null;
self.hide();
}

/* istanbul ignore next */
if (trigger && trigger.tagName === 'A') e.preventDefault();
}
Expand Down

0 comments on commit aa39e28

Please sign in to comment.