-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
160 lines (133 loc) Β· 19.1 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<!doctype html><html lang="en"><head><meta charset="UTF-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta http-equiv="X-UA-Compatible" content="ie=edge"/><title>Tabs</title><link rel="icon" type="image/png" href="open-file-folder.png"/><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/><link href="https://cdn.jsdelivr.net/npm/[email protected]/themes/prism.min.css" rel="stylesheet"/><style>.tab-content > .is-active {
display: block;
}
.tab-content section {
animation: fadeEffect 1s;
}
@keyframes fadeEffect {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.nav-tabs .nav-link.is-active {
color: #495057;
background-color: #fff;
border-color: #dee2e6 #dee2e6 #fff;
}
.nav-tabs .nav-link {
color: #007bff;
text-decoration: none;
background-color: transparent;
}
.Alert {
margin: 1em;
position: fixed;
top: 0;
right: 0;
z-index: 10;
}</style></head><body><div class="Alert js-alert"></div><div class="container"><div class="my-5 row"><div><h1 class="m-0"><a href="https://github.com/19h47/19h47-tabs">Tabs</a></h1></div></div><div class="my-5 row"><div><pre class="p-3 language-javascript"><code>import Tabs from '@19h47/tabs';
const $element = document.querySelector('.js-tabs');
const tabs = new Tabs($element);
tabs.init();</code></pre></div></div><div class="my-5 row"><div><div class="p-3 border"><h3 class="mb-3">Selection doesn't automatically follow focus and hash option is disabled</h3><code>{ delay: false, hash: false }</code><div class="mt-3 js-tabs" data-hash="false"><div class="p-3 my-3 border"><button class="mr-2 btn btn-primary js-destroy" type="button">Destroy</button> <button class="btn btn-primary js-create" type="button">Create</button></div><ul class="mt-3 nav nav-tabs" role="tablist"><li class="nav-item"><button type="button" class="nav-link is-active" role="tab" aria-selected="true" aria-controls="barracuda-tab" id="barracuda">Barracuda</button></li><li class="nav-item"><button type="button" class="nav-link" role="tab" aria-selected="false" aria-controls="dracolich-tab" id="dracolich" tabindex="-1">Dracolich</button></li><li class="nav-item"><button type="button" class="nav-link" role="tab" aria-selected="false" aria-controls="contact-tab" id="contact" tabindex="-1" data-deletable="true">Deletable!</button></li></ul><div class="tab-content"><section class="p-3 border-end border-bottom border-start is-active" tabindex="0" role="tabpanel" aria-labelledby="barracuda" id="barracuda-tab"><p class="mb-0">The first clue that a barracuda is in the area might be a sudden pain in the foot, as the marauder swims by and bites off a few tender toes. They are found in warm salt waters.</p></section><section class="p-3 border-end border-bottom border-start" tabindex="0" role="tabpanel" aria-labelledby="dracolich" id="dracolich-tab" hidden><p>The dracolich is an undead creature resulting from the unnatural transformation of an evil dragon. The mysterious Cult of the Dragon practices the powerful magic necessary for the creation of the dracolich, though other practitioners are also rumored to exist.</p><p class="mb-0">A dracolich can be created from any of the evil dragon subspecies. A dracolich retains the physical appearance of its original body, except that its eyes appear as glowing points of light floating in shadowy eye sockets. Skeletal or semi-skeletal dracoliches have been observed on occasion.<br/>The senses of a dracolich are similar to those of its original form; it can detect invisible objects and creatures (including those hidden in darkness of fog) within a 10-foot radius per age category and also possesses a natural clairaudience ability while in its lair equal to a range of 20 feet per age category. A dracolich can speak, cast spells, and employ the breath weapon of its original form; it can cast each of its spells once per day and can use its breath weapon once every three combat rounds. Additionally, a dracolich retains the intelligence and memory of its original form.</p></section><section class="p-3 border-end border-bottom border-start" tabindex="0" role="tabpanel" aria-labelledby="contact" id="contact-tab" hidden><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi id doloribus soluta minima nulla nemo rerum, eveniet dolorem earum! Similique atque, aliquam esse dolores alias minima voluptas mollitia quos nisi.</p><p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, quia, sunt. Laudantium possimus vel ex nam fugit est eligendi sapiente repellat ab a. Neque saepe magni laudantium dolorem, obcaecati earum.</p></section></div></div></div></div></div><div class="my-5 row"><div><div class="p-3 border"><h3 class="mb-3">Selection automatically follow focus (thanks to delay option) and hash option is enabled</h3><code>{ delay: 300, hash: true }</code><div class="mt-3 js-tabs" data-delay="300" data-hash="true"><div class="p-3 my-3 border"><button class="mr-2 btn btn-primary js-destroy" type="button">Destroy</button> <button class="btn btn-primary js-create" type="button">Create</button></div><ul class="mt-3 nav nav-tabs" role="tablist"><li class="nav-item"><button type="button" class="nav-link is-active" role="tab" aria-selected="true" aria-controls="ant-giant-tab" id="ant">Ant, giant</button></li><li class="nav-item"><button type="button" class="nav-link" role="tab" aria-selected="false" aria-controls="ettercap-tab" id="ettercap" tabindex="-1">Ettercap</button></li><li class="nav-item"><button type="button" class="nav-link" role="tab" aria-selected="false" aria-controls="cloaker-tab" id="cloaker" tabindex="-1">Cloaker</button></li></ul><div class="tab-content"><section class="p-3 border-end border-bottom border-start is-active" tabindex="0" role="tabpanel" aria-labelledby="ant-giant" id="ant-giant-tab"><p class="mb-0">Both worker and warrior ants fight. If a warrior manages to bite, it also tries to sting for 3d4 points damage. A successful save reduces damage to 1d4. The queen has 10 HD but does not move or fight.</p></section><section class="p-3 border-end border-bottom border-start" tabindex="0" role="tabpanel" aria-labelledby="ettercap" id="ettercap-tab" hidden><p>Ettercaps are ugly bipedal creatures that get along very well with all types of giant spiders. These creatures of low intelligence are exceedingly cruel, very cunning, and are skilled in setting traps -- very deadly traps -- much like the spiders that often live around them.</p><p>Ettercaps stand around six feet tall, even with their stooping gait and hunched shoulders. The creatures have short, spindly legs, long arms that reach nearly to their ankles, and large pot-bellies. The hands of ettercaps have a thumb and three long fingers that end in razor sharp claws. Their bodies are covered by tufts of thick, wiry, black hair, and their skin is dark and thick. Ettercaps' heads are almost equine in shape, but they have large reptilian eyes, usually blood-red in color, and large fangs, one protruding downward from each side of the mouth. The mouth itself is large and lined with very sharp teeth.</p><p class="mb-0">Ettercaps do not have a formal language. They express themselves through a combination of highpitched chittering noises, shrieks, and violent actions.</p></section><section class="p-3 border-end border-bottom border-start" tabindex="0" role="tabpanel" aria-labelledby="cloaker" id="cloaker-tab" hidden><p>Cloakers are fiendish horrors, related to trappers, that dwell in dark places far beneath the surface of the earth. They generally seek to kill those who enter their lairs, unless they can think up some other, more amusing way to punish interlopers.</p><p>When a cloaker is first seen, it is almost impossible to distinguish this monster from a common black cloak. The monster's back has two rows of black eye spots running down it that look much like buttons, and the two ivory-colored claws on its upper edge can easily be mistaken for bone clasps.</p><p class="mb-0">When it unfurls itself and moves to attack, however, its true nature becomes all too obvious. At this point, its white underside is clear and the monster's face is fully visible. This face, with the glow of its two piercing, red eyes and the needle-like fangs that line its mouth, is a truly horrible sight. At this point, the monster also uncurls the whip-like tail at its trailing edge and begins to swish it back and forth in anticipation.</p></section></div></div></div></div></div><div class="my-5 row"><div><div class="p-3 border"><h3 class="mb-3">Add</h3><div class="mt-3 js-tabs"><div class="p-3 my-3 border"><div class="mb-2 form-group"><input class="form-control js-input" placeholder="Item" name="add"/></div><div class="mb-2 form-group"><textarea placeholder="Content" class="form-control js-textarea" name="content"></textarea></div><button class="mr-2 btn btn-primary js-add" type="button">Add</button> <button class="mr-2 btn btn-primary js-destroy" type="button">Destroy</button> <button class="btn btn-primary js-create" type="button">Create</button></div><ul class="mt-3 nav nav-tabs js-tab-list" role="tablist"><li class="nav-item"><button type="button" class="nav-link is-active" role="tab" aria-selected="true" aria-controls="galeb-duhr-tab" id="galeb-duhr">Galeb Duhr</button></li><li class="nav-item"><button type="button" class="nav-link" role="tab" aria-selected="false" aria-controls="troll-tab" id="troll" tabindex="-1">Troll</button></li><li class="nav-item"><button type="button" class="nav-link" role="tab" aria-selected="false" aria-controls="jermlaine-tab" id="jermlaine" tabindex="-1">Jermlaine</button></li></ul><div class="tab-content js-tab-content"><section class="p-3 border-end border-bottom border-start is-active" tabindex="0" role="tabpanel" aria-labelledby="galeb-duhr" id="galeb-duhr-tab"><p>The galeb duhr is a curious boulder-like creature with appendages that act as hands and feet. These intelligent beings are very large and slow-moving. They live in rocky or mountainous areas where they can feel the earth power and control the rocks around them.</p><p class="mb-0">A typical galeb duhr is from 8 to 12 feet tall. When not moving it looks like part of the terrain it lives in.</p></section><section class="p-3 border-end border-bottom border-start" tabindex="0" role="tabpanel" aria-labelledby="troll" id="troll-tab" hidden><p class="mb-0">Trolls are horrid carnivores found in all climes, from arctic wastelands to tropical jungles. Most creatures avoid these beasts, since trolls know no fear and attack unceasingly when hungry. Their frame appears thin and frail, but trolls possess surprising strength. Their arms and legs are long and ungainly. The legs end in great three-toed feet, the arms in wide, powerful hands with sharpened claws. The trolls' rubbery hide is colored a moss green, mottled green and gray, or putrid gray. A writhing hairlike mass grows out of their skulls and is usually greenish black or iron gray in color. Their dull, sunken black eyes possess 90-foot infravision. Females are easily distinguished from males; they are both larger and more powerful than their male counterparts.</p></section><section class="p-3 border-end border-bottom border-start" tabindex="0" role="tabpanel" aria-labelledby="jermlaine" id="jermlaine-tab" hidden><p>Jermlaine are a diminutive humanoid race that dwells in tunnels and ambushes hapless adventurers. They are known by a variety of names such as jinxkin or bane-midges.</p><p class="mb-0">Jermlaine appear to be tiny humans dressed in baggy clothing and leather helmets. In fact the "clothing" is their own saggy skin and pointed heads. The limbs are knottily muscled. The fingernails and toenails are thick and filthy, although the fingers and toes are very nimble. Their gray-brown, warty hide blends in with natural earth and stone. When they wear rags or scraps as clothing, such items are also camouflage colored.</p></section></div></div></div></div></div><div class="my-5 row"><div><div class="p-3 border"><h3 class="mb-3">Nested</h3><div class="mt-3 js-tabs"><ul class="mt-3 nav nav-tabs js-tab-list" role="tablist"><li class="nav-item"><button type="button" class="nav-link is-active" role="tab" aria-selected="true" aria-controls="nested-tab" id="nested">Nested</button></li><li class="nav-item"><button type="button" class="nav-link" role="tab" aria-selected="false" aria-controls="golem-plush-tab" id="golem-plush" tabindex="-1">Golem, Plush</button></li><li class="nav-item"><button type="button" class="nav-link" role="tab" aria-selected="false" aria-controls="kyton-tab" id="kyton" tabindex="-1">Kyton</button></li></ul><div class="tab-content js-tab-content"><section class="p-3 border-end border-bottom border-start is-active" tabindex="0" role="tabpanel" aria-labelledby="nested" id="nested-tab"><div class="js-tabs"><ul class="mt-3 nav nav-tabs js-tab-list" role="tablist"><li class="nav-item"><button type="button" class="nav-link is-active" role="tab" aria-selected="true" aria-controls="adherer-tab" id="adherer">Adherer</button></li><li class="nav-item"><button type="button" class="nav-link" role="tab" aria-selected="false" aria-controls="crimbil-tab" id="crimbil" tabindex="-1">Crimbil</button></li><li class="nav-item"><button type="button" class="nav-link" role="tab" aria-selected="false" aria-controls="frost-salamander-tab" id="frost-salamander" tabindex="-1">Jermlaine</button></li></ul><div class="tab-content js-tab-content"><section class="p-3 border-end border-bottom border-start is-active" tabindex="0" role="tabpanel" aria-labelledby="adherer" id="adherer-tab"><p>At first glance the adherer seems like a mummy, with folds of off-white skin resembling filthy bandages. Adherers can be distinguished from mummies by the sour, mucilaginous smell that accompanies them. The smell comes from a resin-like secretion with adhesive properties that is constantly exuded through the pores of the adherer's skin.</p></section><section class="p-3 border-end border-bottom border-start" tabindex="0" role="tabpanel" aria-labelledby="crimbil" id="crimbil-tab" hidden><p class="mb-0">The malicious crimbils are rumored to be a corrupted bloodline of wood gnomes. Few sylvan lands do not have tales of these wee folk with skin as white as moonlight and hearts as black as coal.</p></section><section class="p-3 border-end border-bottom border-start" tabindex="0" role="tabpanel" aria-labelledby="frost-salamander" id="frost-salamander-tab" hidden><p>Frost salamanders, natives of the Paraelemental Plane of Ice, thrive in very cold places. They are sometimes found on other elemental planes and may find themselves summoned to the Prime Material Plane.</p></section></div></div></section><section class="p-3 border-end border-bottom border-start" tabindex="0" role="tabpanel" aria-labelledby="golem-plush" id="golem-plush-tab" hidden><p class="mb-0">Plush golems are every parents nightmare. They are typically given as gifts to young children, usually by obnoxious aunts or uncles. Plush golems seem like ordinary stuffed animals at first, but eventually reveal their animated state of being to the children who own them. As the children treat their toy animals more and more like live creatures, the parents' frustration increases as the child insists that the toy be allowed to eat at the dinner table, go along on outings, and take part in other family activities to the nuisance of everyone.</p></section><section class="p-3 border-end border-bottom border-start" tabindex="0" role="tabpanel" aria-labelledby="kyton" id="kyton-tab" hidden><p>Kytons are a race of creatures inhabiting the city of Jangling Hiter on the third layer of Baator. They are the city's constabulaly, ferreting out transgressors. A soul knows when he's being stalked by one of these monstrosities if he hears tinkling chains and an accompanying malicious titter.</p></section></div></div></div></div></div></div><script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.22.0/prism.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.22.0/plugins/autoloader/prism-autoloader.min.js"></script><script src="main.js"></script><script>const elements = [...document.querySelectorAll('.js-tabs')];
const alert = content => {
const div = document.createElement('div');
div.className = 'toast fade show';
div.style = 'toast fade show';
div.innerHTML = `<div class="toast-body">${content}</div>`;
div.setAttribute('role', 'alert');
div.setAttribute('aria-live', 'assertive');
div.setAttribute('aria-atomic', 'true');
return div;
};
const $alert = document.querySelector('.js-alert');
const onChange = content => {
console.log('onChange');
const $el = alert(content);
$alert.appendChild($el);
$el.addEventListener(
'click',
() => $el.style.setProperty('display', 'none'),
false,
);
setTimeout(() => $el.parentNode.removeChild($el), 2000);
};
elements.forEach($el => {
const delay = parseInt($el.getAttribute('data-delay'), 10) || false;
const hash = JSON.parse($el.getAttribute('data-hash'));
const tabs = new Tabs.default($el, {
delay,
hash,
callback() {
onChange(`<strong>${this.controls}</strong> callback!`);
},
});
const $destroy = $el.querySelector('.js-destroy');
const $create = $el.querySelector('.js-create');
const $list = $el.querySelector('.js-tab-list');
const $content = $el.querySelector('.js-tab-content');
const $add = $el.querySelector('.js-add');
const $input = $el.querySelector('.js-input');
const $textarea = $el.querySelector('.js-textarea');
tabs.init();
$destroy && $destroy.addEventListener('click', () => tabs.destroy());
$create && $create.addEventListener('click', () => tabs.create());
tabs.tabs.forEach(tab => {
tab.el.addEventListener('Tab.activate', ({ detail }) => {
onChange(`<strong>${detail.controls}</strong> has been activated!`);
});
tab.el.addEventListener('Tab.delete', ({ detail }) => {
console.log('Tab.delete');
onChange(`<strong>${detail.controls}</strong> has been deleted!`);
});
});
$add &&
$add.addEventListener('click', () => {
const { value: tab } = $input;
const { value: panel } = $textarea;
if (tab && panel) {
console.log(tab, panel);
tabs.destroy();
$list.insertAdjacentHTML(
'beforeend',
`<li class="nav-item">
<button
type="button"
class="nav-link"
role="tab"
aria-selected="false"
aria-controls="${tab}-tab"
id="${tab}"
tabindex="-1"
>
${tab}
</button>
</li>`,
);
$content.insertAdjacentHTML(
'beforeend',
`<section
class="p-3 border-end border-bottom border-start"
tabindex="0"
role="tabpanel"
aria-labelledby="${tab}"
id="${tab}-tab"
hidden
>
<p class="mb-0">${panel}</p>
</section>`,
);
tabs.create();
console.log(tabs);
tabs.tabs.forEach(tab => {
tab.el.addEventListener('Tab.activate', ({ detail }) => {
onChange(
`<strong>${detail.controls}</strong> has been activated!`,
);
});
});
}
});
});</script></body></html>