Skip to content

Commit 154524e

Browse files
djthorpedjthorpe
committed
Added v45 with storybook and tooltip
1 parent da1f756 commit 154524e

File tree

7 files changed

+2039
-86
lines changed

7 files changed

+2039
-86
lines changed

‎html/index.html

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<head>
3+
<link rel="stylesheet" href="./index.css">
4+
</head>
5+
<body>
6+
<h1>Storybook</h1>
7+
<div class="row border">
8+
<div class="col-md-2 bg-light">
9+
<ul>
10+
<li>Button</li>
11+
<li>Offcanvas</li>
12+
<li>Tooltip</li>
13+
</ul>
14+
</div>
15+
<div class="col-md-10">
16+
<iframe class="w-100" src="/tooltip.html"></iframe>
17+
</div>
18+
</div>
19+
</body>
20+
</html>

‎html/offcanvas.html

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html>
2+
3+
<head>
4+
<link rel="stylesheet" href="./index.css">
5+
</head>
6+
7+
<body>
8+
<h1>Offcanvas Element</h1>
9+
10+
<!-- Javascript -->
11+
<script type="module">
12+
import { Offcanvas, Button } from './index.js';
13+
const offcanvas = new Offcanvas(document.querySelector('#offcanvasRight'));
14+
const show = new Button(document.querySelector('#show'));
15+
show.addEventListener('button:click',(sender) => {
16+
offcanvas.show();
17+
});
18+
const hide = new Button(document.querySelector('#hide'));
19+
hide.addEventListener('button:click',(sender) => {
20+
offcanvas.hide();
21+
});
22+
</script>
23+
24+
<!-- HTML -->
25+
<button class="btn btn-primary" id="show">Show</button>
26+
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
27+
<div class="offcanvas-header">
28+
<h5 id="offcanvasRightLabel">Offcanvas right</h5>
29+
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
30+
</div>
31+
<div class="offcanvas-body">
32+
<button class="btn btn-primary" id="hide">Hide</button>
33+
</div>
34+
</div>
35+
</body>
36+
37+
</html>

‎html/tooltip.html

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!DOCTYPE html>
2+
<head>
3+
<link rel="stylesheet" href="./index.css">
4+
</head>
5+
<body>
6+
<h1>Tooltip Element</h1>
7+
8+
<!-- Javascript -->
9+
<script type="module">
10+
import { Tooltip, Button } from './index.js';
11+
const tooltip = new Tooltip(document.querySelector('#tooltip'));
12+
tooltip.addEventListener('tooltip:show',(sender) => {
13+
console.log("Showing tooltip");
14+
});
15+
tooltip.addEventListener('tooltip:hide',(sender) => {
16+
console.log("Hiding tooltip");
17+
});
18+
19+
const show = new Button(document.querySelector('#show'));
20+
show.addEventListener('button:click',(sender) => {
21+
tooltip.show();
22+
});
23+
24+
const hide = new Button(document.querySelector('#hide'));
25+
hide.addEventListener('button:click',(sender) => {
26+
tooltip.hide();
27+
});
28+
29+
</script>
30+
31+
<!-- HTML -->
32+
<div>
33+
<span class="border" id="tooltip" title="Some tooltip text!">Hello, world</span>
34+
</div>
35+
36+
<button class="btn btn-primary" id="show">Show Tooltip</button>
37+
<button class="btn btn-primary" id="hide">Hide Tooltip</button>
38+
</body>
39+
40+
</html>

‎js/index.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import Nav from './nav';
1313
import Button from './button';
1414
import Form from './form';
1515
import Offcanvas from './view/offcanvas';
16+
import Tooltip from './view/tooltip';
1617

1718
// Utils
1819
import Error from './error';
@@ -28,5 +29,6 @@ import '../css/style.css';
2829

2930
// Exports
3031
export {
31-
Model, View, Controller, Provider, Error, Emitter, List, Nav, Toast, Button, Form, Offcanvas,
32+
Model, View, Controller, Provider, Error, Emitter, List, Nav, Toast, Button, Form,
33+
Offcanvas, Tooltip,
3234
};

‎js/view/tooltip.js

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
// Tooltip element
2+
3+
import { Tooltip as TooltipBS } from 'bootstrap';
4+
import View from '../view';
5+
6+
// ////////////////////////////////////////////////////////////////////////////
7+
// CONSTANTS
8+
9+
const EVENT_ROOT = 'tooltip';
10+
11+
/**
12+
* Tooltip show event, which is emitted when a element is about to be made visible.
13+
*
14+
* @event Tooltip#tooltip:show
15+
* @arg {Tooltip} sender - The view that emitted the event.
16+
*/
17+
const EVENT_SHOW = `${EVENT_ROOT}:show`;
18+
19+
/**
20+
* Tooltip hide event, which is emitted when a element has been hidden.
21+
*
22+
* @event Tooltip#tooltip:hide
23+
* @arg {Tooltip} sender - The view that emitted the event.
24+
*/
25+
const EVENT_HIDE = `${EVENT_ROOT}:hide`;
26+
27+
// ////////////////////////////////////////////////////////////////////////////
28+
29+
/**
30+
* @class Tooltip
31+
* @implements {View}
32+
* @classdesc This class is constructed with a DOM element and
33+
* controls an existing
34+
* [Bootstrap Tooltip]{@link https://getbootstrap.com/docs/5.0/components/tooltips/}
35+
* and is generally used for showing additional information above an existing element.
36+
*
37+
* @arg {Node} node - The node to attach the view to. Throws an error if the node
38+
* is not provided. Include the tooltip text in the "title" attribute of the view.
39+
*/
40+
export default class Tooltip extends View {
41+
constructor(node) {
42+
super(node);
43+
this.$tooltip = new TooltipBS(node, {
44+
boundary: document.body,
45+
});
46+
node.addEventListener('show.bs.tooltip', () => {
47+
this.dispatchEvent(EVENT_SHOW, this);
48+
});
49+
node.addEventListener('hidden.bs.tooltip', () => {
50+
this.dispatchEvent(EVENT_HIDE, this);
51+
});
52+
}
53+
54+
/**
55+
* Make the tooltip view visible
56+
* @fires Offcanvas#offcanvas:show
57+
* @throws Error
58+
*/
59+
show() {
60+
this.$tooltip.show();
61+
}
62+
63+
/**
64+
* Make the tooltip view hidden.
65+
* @fires Offcanvas#offcanvas:hide
66+
*/
67+
hide() {
68+
this.$tooltip.hide();
69+
}
70+
}

0 commit comments

Comments
 (0)