first commit
This commit is contained in:
aschwarz
4
bootstrap/node_modules/scrolling-tabs-bootstrap-5/.github/FUNDING.yml
generated
vendored
Normal file
4
bootstrap/node_modules/scrolling-tabs-bootstrap-5/.github/FUNDING.yml
generated
vendored
Normal file
@ -0,0 +1,4 @@
|
||||
# These are supported funding model platforms
|
||||
|
||||
github: [fanmixco]
|
||||
custom: ['https://www.buymeacoffee.com/fanmixco']
|
||||
201
bootstrap/node_modules/scrolling-tabs-bootstrap-5/LICENSE
generated
vendored
Normal file
201
bootstrap/node_modules/scrolling-tabs-bootstrap-5/LICENSE
generated
vendored
Normal file
@ -0,0 +1,201 @@
|
||||
Apache License
|
||||
Version 2.0, January 2004
|
||||
http://www.apache.org/licenses/
|
||||
|
||||
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
|
||||
|
||||
1. Definitions.
|
||||
|
||||
"License" shall mean the terms and conditions for use, reproduction,
|
||||
and distribution as defined by Sections 1 through 9 of this document.
|
||||
|
||||
"Licensor" shall mean the copyright owner or entity authorized by
|
||||
the copyright owner that is granting the License.
|
||||
|
||||
"Legal Entity" shall mean the union of the acting entity and all
|
||||
other entities that control, are controlled by, or are under common
|
||||
control with that entity. For the purposes of this definition,
|
||||
"control" means (i) the power, direct or indirect, to cause the
|
||||
direction or management of such entity, whether by contract or
|
||||
otherwise, or (ii) ownership of fifty percent (50%) or more of the
|
||||
outstanding shares, or (iii) beneficial ownership of such entity.
|
||||
|
||||
"You" (or "Your") shall mean an individual or Legal Entity
|
||||
exercising permissions granted by this License.
|
||||
|
||||
"Source" form shall mean the preferred form for making modifications,
|
||||
including but not limited to software source code, documentation
|
||||
source, and configuration files.
|
||||
|
||||
"Object" form shall mean any form resulting from mechanical
|
||||
transformation or translation of a Source form, including but
|
||||
not limited to compiled object code, generated documentation,
|
||||
and conversions to other media types.
|
||||
|
||||
"Work" shall mean the work of authorship, whether in Source or
|
||||
Object form, made available under the License, as indicated by a
|
||||
copyright notice that is included in or attached to the work
|
||||
(an example is provided in the Appendix below).
|
||||
|
||||
"Derivative Works" shall mean any work, whether in Source or Object
|
||||
form, that is based on (or derived from) the Work and for which the
|
||||
editorial revisions, annotations, elaborations, or other modifications
|
||||
represent, as a whole, an original work of authorship. For the purposes
|
||||
of this License, Derivative Works shall not include works that remain
|
||||
separable from, or merely link (or bind by name) to the interfaces of,
|
||||
the Work and Derivative Works thereof.
|
||||
|
||||
"Contribution" shall mean any work of authorship, including
|
||||
the original version of the Work and any modifications or additions
|
||||
to that Work or Derivative Works thereof, that is intentionally
|
||||
submitted to Licensor for inclusion in the Work by the copyright owner
|
||||
or by an individual or Legal Entity authorized to submit on behalf of
|
||||
the copyright owner. For the purposes of this definition, "submitted"
|
||||
means any form of electronic, verbal, or written communication sent
|
||||
to the Licensor or its representatives, including but not limited to
|
||||
communication on electronic mailing lists, source code control systems,
|
||||
and issue tracking systems that are managed by, or on behalf of, the
|
||||
Licensor for the purpose of discussing and improving the Work, but
|
||||
excluding communication that is conspicuously marked or otherwise
|
||||
designated in writing by the copyright owner as "Not a Contribution."
|
||||
|
||||
"Contributor" shall mean Licensor and any individual or Legal Entity
|
||||
on behalf of whom a Contribution has been received by Licensor and
|
||||
subsequently incorporated within the Work.
|
||||
|
||||
2. Grant of Copyright License. Subject to the terms and conditions of
|
||||
this License, each Contributor hereby grants to You a perpetual,
|
||||
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
||||
copyright license to reproduce, prepare Derivative Works of,
|
||||
publicly display, publicly perform, sublicense, and distribute the
|
||||
Work and such Derivative Works in Source or Object form.
|
||||
|
||||
3. Grant of Patent License. Subject to the terms and conditions of
|
||||
this License, each Contributor hereby grants to You a perpetual,
|
||||
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
||||
(except as stated in this section) patent license to make, have made,
|
||||
use, offer to sell, sell, import, and otherwise transfer the Work,
|
||||
where such license applies only to those patent claims licensable
|
||||
by such Contributor that are necessarily infringed by their
|
||||
Contribution(s) alone or by combination of their Contribution(s)
|
||||
with the Work to which such Contribution(s) was submitted. If You
|
||||
institute patent litigation against any entity (including a
|
||||
cross-claim or counterclaim in a lawsuit) alleging that the Work
|
||||
or a Contribution incorporated within the Work constitutes direct
|
||||
or contributory patent infringement, then any patent licenses
|
||||
granted to You under this License for that Work shall terminate
|
||||
as of the date such litigation is filed.
|
||||
|
||||
4. Redistribution. You may reproduce and distribute copies of the
|
||||
Work or Derivative Works thereof in any medium, with or without
|
||||
modifications, and in Source or Object form, provided that You
|
||||
meet the following conditions:
|
||||
|
||||
(a) You must give any other recipients of the Work or
|
||||
Derivative Works a copy of this License; and
|
||||
|
||||
(b) You must cause any modified files to carry prominent notices
|
||||
stating that You changed the files; and
|
||||
|
||||
(c) You must retain, in the Source form of any Derivative Works
|
||||
that You distribute, all copyright, patent, trademark, and
|
||||
attribution notices from the Source form of the Work,
|
||||
excluding those notices that do not pertain to any part of
|
||||
the Derivative Works; and
|
||||
|
||||
(d) If the Work includes a "NOTICE" text file as part of its
|
||||
distribution, then any Derivative Works that You distribute must
|
||||
include a readable copy of the attribution notices contained
|
||||
within such NOTICE file, excluding those notices that do not
|
||||
pertain to any part of the Derivative Works, in at least one
|
||||
of the following places: within a NOTICE text file distributed
|
||||
as part of the Derivative Works; within the Source form or
|
||||
documentation, if provided along with the Derivative Works; or,
|
||||
within a display generated by the Derivative Works, if and
|
||||
wherever such third-party notices normally appear. The contents
|
||||
of the NOTICE file are for informational purposes only and
|
||||
do not modify the License. You may add Your own attribution
|
||||
notices within Derivative Works that You distribute, alongside
|
||||
or as an addendum to the NOTICE text from the Work, provided
|
||||
that such additional attribution notices cannot be construed
|
||||
as modifying the License.
|
||||
|
||||
You may add Your own copyright statement to Your modifications and
|
||||
may provide additional or different license terms and conditions
|
||||
for use, reproduction, or distribution of Your modifications, or
|
||||
for any such Derivative Works as a whole, provided Your use,
|
||||
reproduction, and distribution of the Work otherwise complies with
|
||||
the conditions stated in this License.
|
||||
|
||||
5. Submission of Contributions. Unless You explicitly state otherwise,
|
||||
any Contribution intentionally submitted for inclusion in the Work
|
||||
by You to the Licensor shall be under the terms and conditions of
|
||||
this License, without any additional terms or conditions.
|
||||
Notwithstanding the above, nothing herein shall supersede or modify
|
||||
the terms of any separate license agreement you may have executed
|
||||
with Licensor regarding such Contributions.
|
||||
|
||||
6. Trademarks. This License does not grant permission to use the trade
|
||||
names, trademarks, service marks, or product names of the Licensor,
|
||||
except as required for reasonable and customary use in describing the
|
||||
origin of the Work and reproducing the content of the NOTICE file.
|
||||
|
||||
7. Disclaimer of Warranty. Unless required by applicable law or
|
||||
agreed to in writing, Licensor provides the Work (and each
|
||||
Contributor provides its Contributions) on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
|
||||
implied, including, without limitation, any warranties or conditions
|
||||
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
|
||||
PARTICULAR PURPOSE. You are solely responsible for determining the
|
||||
appropriateness of using or redistributing the Work and assume any
|
||||
risks associated with Your exercise of permissions under this License.
|
||||
|
||||
8. Limitation of Liability. In no event and under no legal theory,
|
||||
whether in tort (including negligence), contract, or otherwise,
|
||||
unless required by applicable law (such as deliberate and grossly
|
||||
negligent acts) or agreed to in writing, shall any Contributor be
|
||||
liable to You for damages, including any direct, indirect, special,
|
||||
incidental, or consequential damages of any character arising as a
|
||||
result of this License or out of the use or inability to use the
|
||||
Work (including but not limited to damages for loss of goodwill,
|
||||
work stoppage, computer failure or malfunction, or any and all
|
||||
other commercial damages or losses), even if such Contributor
|
||||
has been advised of the possibility of such damages.
|
||||
|
||||
9. Accepting Warranty or Additional Liability. While redistributing
|
||||
the Work or Derivative Works thereof, You may choose to offer,
|
||||
and charge a fee for, acceptance of support, warranty, indemnity,
|
||||
or other liability obligations and/or rights consistent with this
|
||||
License. However, in accepting such obligations, You may act only
|
||||
on Your own behalf and on Your sole responsibility, not on behalf
|
||||
of any other Contributor, and only if You agree to indemnify,
|
||||
defend, and hold each Contributor harmless for any liability
|
||||
incurred by, or claims asserted against, such Contributor by reason
|
||||
of your accepting any such warranty or additional liability.
|
||||
|
||||
END OF TERMS AND CONDITIONS
|
||||
|
||||
APPENDIX: How to apply the Apache License to your work.
|
||||
|
||||
To apply the Apache License to your work, attach the following
|
||||
boilerplate notice, with the fields enclosed by brackets "[]"
|
||||
replaced with your own identifying information. (Don't include
|
||||
the brackets!) The text should be enclosed in the appropriate
|
||||
comment syntax for the file format. We also recommend that a
|
||||
file or class name and description of purpose be included on the
|
||||
same "printed page" as the copyright notice for easier
|
||||
identification within third-party archives.
|
||||
|
||||
Copyright [yyyy] [name of copyright owner]
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
80
bootstrap/node_modules/scrolling-tabs-bootstrap-5/README.md
generated
vendored
Normal file
80
bootstrap/node_modules/scrolling-tabs-bootstrap-5/README.md
generated
vendored
Normal file
@ -0,0 +1,80 @@
|
||||
# Scrollable Tabs for Bootstrap 5
|
||||
|
||||
A simple plugin to create scrollable tabs with Bootstrap 5.
|
||||
|
||||
[![preview][1]][1]
|
||||
|
||||
## Support me:
|
||||
|
||||
[![sponsor me][2]](https://www.buymeacoffee.com/fanmixco)
|
||||
|
||||
## Usage:
|
||||
|
||||
### Install:
|
||||
|
||||
- [Download the latest release](https://github.com/SupernovaIC/scrollable-tabs-bootstrap-5/archive/refs/tags/v1.0.4.zip)
|
||||
|
||||
- Install with [npm](https://www.npmjs.com/): `npm i scrolling-tabs-bootstrap-5`
|
||||
|
||||
[](https://www.npmjs.com/package/scrolling-tabs-bootstrap-5)
|
||||
|
||||
### Required libraries:
|
||||
|
||||
```html
|
||||
<!--Bootstrap icons-->
|
||||
<link rel="stylesheet" href="node_modules/bootstrap-icons/1.7.2/font/bootstrap-icons.min.css">
|
||||
|
||||
<!--External library-->
|
||||
<script src="node_modules/move-js/move.min.js"></script>
|
||||
<!--https://visionmedia.github.io/move.js/-->
|
||||
|
||||
<!--Scrollable libs-->
|
||||
<link href="node_modules/scrollable-tabs-bootstrap-5/dist/scrollable-tabs.css" rel="stylesheet">
|
||||
<script src="node_modules/scrollable-tabs-bootstrap-5/dist/scrollable-tabs.js"></script>
|
||||
```
|
||||
|
||||
### HTML example:
|
||||
|
||||
```html
|
||||
<div class="w-100">
|
||||
<div class="scroller scroller-left float-start mt-2"><i class="bi bi-caret-left-fill"></i></div>
|
||||
<div class="scroller scroller-right float-end mt-2"><i class="bi bi-caret-right-fill"></i></div>
|
||||
<div class="wrapper-nav">
|
||||
<nav class="nav nav-tabs list mt-2" id="myTab" role="tablist">
|
||||
<a class="nav-item nav-link pointer active" data-bs-toggle="tab" data-bs-target="#tab1" role="tab" aria-controls="public" aria-selected="true">Tab1</a>
|
||||
<a class="nav-item nav-link pointer" data-bs-target="#tab2" role="tab" data-bs-toggle="tab">Tab 2</a>
|
||||
<a class="nav-item nav-link pointer" data-bs-target="#tab3" role="tab" data-bs-toggle="tab">Tab 3</a>
|
||||
<a class="nav-item nav-link pointer" data-bs-target="#tab4" role="tab" data-bs-toggle="tab">Tab 4</a>
|
||||
<a class="nav-item nav-link pointer" data-bs-target="#tab5" role="tab" data-bs-toggle="tab">Tab 5</a>
|
||||
<a class="nav-item nav-link pointer" data-bs-target="#tab6" role="tab" data-bs-toggle="tab">Tab 6</a>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="tab-content p-3" id="myTabContent">
|
||||
<div role="tabpanel" class="tab-pane fade active show mt-2" id="tab1" aria-labelledby="public-tab" >
|
||||
This is the content of Tab 1...
|
||||
</div>
|
||||
<div class="tab-pane fade mt-2" id="tab2" role="tabpanel" aria-labelledby="group-dropdown2-tab" >
|
||||
This is the content of Tab 2...
|
||||
</div>
|
||||
<div class="tab-pane fade mt-2" id="tab3" role="tabpanel" aria-labelledby="group-dropdown2-tab" >
|
||||
This is the content of Tab 3...
|
||||
</div>
|
||||
<div class="tab-pane fade mt-2" id="tab4" role="tabpanel" aria-labelledby="group-dropdown2-tab" >
|
||||
This is the content of Tab 4...
|
||||
</div>
|
||||
<div class="tab-pane fade mt-2" id="tab5" role="tabpanel" aria-labelledby="group-dropdown2-tab" >
|
||||
This is the content of Tab 5...
|
||||
</div>
|
||||
<div class="tab-pane fade mt-2" id="tab6" role="tabpanel" aria-labelledby="group-dropdown2-tab" >
|
||||
This is the content of Tab 6...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
**Based on:**
|
||||
|
||||
https://www.codeply.com/go/Loo3CqsA7T
|
||||
|
||||
[1]: preview.gif
|
||||
[2]: https://raw.githubusercontent.com/FANMixco/Xamarin-SearchBar/master/bmc-rezr5vpd.gif
|
||||
38
bootstrap/node_modules/scrolling-tabs-bootstrap-5/dist/scrollable-tabs.css
generated
vendored
Normal file
38
bootstrap/node_modules/scrolling-tabs-bootstrap-5/dist/scrollable-tabs.css
generated
vendored
Normal file
@ -0,0 +1,38 @@
|
||||
|
||||
.wrapper-nav {
|
||||
position:relative;
|
||||
margin:0 auto;
|
||||
overflow:hidden;
|
||||
padding:5px;
|
||||
height:50px;
|
||||
}
|
||||
|
||||
.list {
|
||||
position:absolute;
|
||||
left:0px;
|
||||
top:0px;
|
||||
min-width:3500px;
|
||||
margin-top:0px;
|
||||
}
|
||||
|
||||
.list li{
|
||||
display:table-cell;
|
||||
position:relative;
|
||||
text-align:center;
|
||||
cursor:grab;
|
||||
cursor:-webkit-grab;
|
||||
color:#efefef;
|
||||
vertical-align:middle;
|
||||
}
|
||||
|
||||
.scroller {
|
||||
text-align:center;
|
||||
cursor:pointer;
|
||||
display:none;
|
||||
padding:7px;
|
||||
white-space:no-wrap;
|
||||
vertical-align:middle;
|
||||
background-color:#fff;
|
||||
}
|
||||
|
||||
.pointer {cursor: pointer;}
|
||||
137
bootstrap/node_modules/scrolling-tabs-bootstrap-5/dist/scrollable-tabs.js
generated
vendored
Normal file
137
bootstrap/node_modules/scrolling-tabs-bootstrap-5/dist/scrollable-tabs.js
generated
vendored
Normal file
@ -0,0 +1,137 @@
|
||||
//let move = require('move');
|
||||
|
||||
const scrollBarWidths = 40;
|
||||
const wrapper = document.getElementsByClassName("wrapper-nav")[0];
|
||||
const navLink = document.getElementsByClassName("nav-item nav-link");
|
||||
const lastNavLink = navLink[navLink.length - 1];
|
||||
|
||||
const scrollerRight = document.getElementsByClassName("scroller-right")[0];
|
||||
const scrollerLeft = document.getElementsByClassName("scroller-left")[0];
|
||||
|
||||
const list = document.querySelectorAll(".list");
|
||||
|
||||
let btnTriggered = false;
|
||||
|
||||
let widthOfList = function() {
|
||||
let itemsWidth = 0;
|
||||
|
||||
const listLinks = document.querySelectorAll(".list a");
|
||||
|
||||
listLinks.forEach((el) => {
|
||||
let itemWidth = getOuterWidth(el);
|
||||
itemsWidth += itemWidth;
|
||||
});
|
||||
|
||||
return itemsWidth;
|
||||
};
|
||||
|
||||
let widthOfHidden = function(w) {
|
||||
const wrapperh = document.getElementsByClassName("wrapper-nav")[0];
|
||||
|
||||
w = (!w) ? 0 : w;
|
||||
|
||||
oW = getOuterWidth(wrapperh) - w;
|
||||
|
||||
let ww = parseFloat((0 - oW).toFixed(3));
|
||||
|
||||
let hw = (oW - widthOfList() - getLeftPosi()) - scrollBarWidths;
|
||||
|
||||
let rp = document.body.clientWidth - (getOuterLeft(lastNavLink) + getOuterWidth(lastNavLink)) - w;
|
||||
|
||||
if (ww > hw) {
|
||||
//return ww;
|
||||
return (rp > ww ? rp : ww);
|
||||
}
|
||||
else {
|
||||
//return hw;
|
||||
return (rp > hw ? rp : hw);
|
||||
}
|
||||
};
|
||||
|
||||
let getLeftPosi = function() {
|
||||
let ww = 0 - getOuterWidth(wrapper);
|
||||
let lp = getOuterLeft(list[0]);
|
||||
|
||||
if (ww > lp) {
|
||||
return ww;
|
||||
}
|
||||
else {
|
||||
return lp;
|
||||
}
|
||||
};
|
||||
|
||||
let reAdjust = function() {
|
||||
let rp = document.body.clientWidth - (getOuterLeft(lastNavLink) + getOuterWidth(lastNavLink));
|
||||
|
||||
if (getOuterWidth(wrapper) < widthOfList() && (rp < 0)) {
|
||||
scrollerRight.style.cssText = 'display: flex';
|
||||
}
|
||||
else {
|
||||
scrollerRight.style.display = 'none';
|
||||
}
|
||||
|
||||
if (getLeftPosi() < 0) {
|
||||
scrollerLeft.style.cssText = 'display: flex';
|
||||
}
|
||||
else {
|
||||
scrollerLeft.style.display = 'none';
|
||||
}
|
||||
|
||||
btnTriggered = false;
|
||||
}
|
||||
|
||||
window.addEventListener('resize', function(event) {
|
||||
reAdjust();
|
||||
}, true);
|
||||
|
||||
scrollerRight.addEventListener("click", function() {
|
||||
if (btnTriggered) return;
|
||||
|
||||
btnTriggered = true;
|
||||
|
||||
fade(scrollerLeft);
|
||||
unfade(scrollerRight);
|
||||
|
||||
let wR = getOuterWidth(scrollerRight);
|
||||
|
||||
move(document.querySelectorAll(".list")[0]).add("left", +widthOfHidden(wR), 200).end().then(x=> {
|
||||
reAdjust();
|
||||
});
|
||||
});
|
||||
|
||||
scrollerLeft.addEventListener("click", function() {
|
||||
if (btnTriggered) return;
|
||||
|
||||
btnTriggered = true;
|
||||
|
||||
fade(scrollerRight);
|
||||
unfade(scrollerLeft);
|
||||
|
||||
let wL = getOuterWidth(scrollerLeft);
|
||||
|
||||
move(document.querySelectorAll(".list")[0]).add("left", -getLeftPosi() + wL, 200).end().then(()=> {
|
||||
reAdjust();
|
||||
});
|
||||
});
|
||||
|
||||
let getOuterLeft = function(elem) {
|
||||
return elem.getBoundingClientRect().left;
|
||||
}
|
||||
|
||||
let getOuterWidth = function(elem) {
|
||||
return parseFloat(window.getComputedStyle(elem).width);
|
||||
}
|
||||
|
||||
function fade(elem) {
|
||||
elem.style.display = "none";
|
||||
elem.style.transition="opacity 0.6s";
|
||||
elem.style.opacity=0;
|
||||
}
|
||||
|
||||
function unfade(elem) {
|
||||
elem.style.display = "block";
|
||||
elem.style.transition="opacity 0.6s";
|
||||
elem.style.opacity=1;
|
||||
}
|
||||
|
||||
reAdjust();
|
||||
1
bootstrap/node_modules/scrolling-tabs-bootstrap-5/dist/scrollable-tabs.min.css
generated
vendored
Normal file
1
bootstrap/node_modules/scrolling-tabs-bootstrap-5/dist/scrollable-tabs.min.css
generated
vendored
Normal file
@ -0,0 +1 @@
|
||||
.wrapper-nav{position:relative;margin:0 auto;overflow:hidden;padding:5px;height:50px}.list{position:absolute;left:0;top:0;min-width:3500px;margin-top:0}.list li{display:table-cell;position:relative;text-align:center;cursor:grab;cursor:-webkit-grab;color:#efefef;vertical-align:middle}.scroller{text-align:center;cursor:pointer;display:none;padding:7px;white-space:no-wrap;vertical-align:middle;background-color:#fff}.pointer{cursor:pointer}
|
||||
1
bootstrap/node_modules/scrolling-tabs-bootstrap-5/dist/scrollable-tabs.min.js
generated
vendored
Normal file
1
bootstrap/node_modules/scrolling-tabs-bootstrap-5/dist/scrollable-tabs.min.js
generated
vendored
Normal file
@ -0,0 +1 @@
|
||||
const scrollBarWidths=40,wrapper=document.getElementsByClassName("wrapper-nav")[0],navLink=document.getElementsByClassName("nav-item nav-link"),lastNavLink=navLink[navLink.length-1],scrollerRight=document.getElementsByClassName("scroller-right")[0],scrollerLeft=document.getElementsByClassName("scroller-left")[0],list=document.querySelectorAll(".list");let btnTriggered=!1,widthOfList=function(){let e=0;return document.querySelectorAll(".list a").forEach(t=>{let l=getOuterWidth(t);e+=l}),e},widthOfHidden=function(e){const t=document.getElementsByClassName("wrapper-nav")[0];e=e||0,oW=getOuterWidth(t)-e;let l=parseFloat((0-oW).toFixed(3)),r=oW-widthOfList()-getLeftPosi()-40,n=document.body.clientWidth-(getOuterLeft(lastNavLink)+getOuterWidth(lastNavLink))-e;return l>r?n>l?n:l:n>r?n:r},getLeftPosi=function(){let e=0-getOuterWidth(wrapper),t=getOuterLeft(list[0]);return e>t?e:t},reAdjust=function(){let e=document.body.clientWidth-(getOuterLeft(lastNavLink)+getOuterWidth(lastNavLink));getOuterWidth(wrapper)<widthOfList()&&e<0?scrollerRight.style.cssText="display: flex":scrollerRight.style.display="none",getLeftPosi()<0?scrollerLeft.style.cssText="display: flex":scrollerLeft.style.display="none",btnTriggered=!1};window.addEventListener("resize",function(e){reAdjust()},!0),scrollerRight.addEventListener("click",function(){if(btnTriggered)return;btnTriggered=!0,fade(scrollerLeft),unfade(scrollerRight);let e=getOuterWidth(scrollerRight);move(document.querySelectorAll(".list")[0]).add("left",+widthOfHidden(e),200).end().then(e=>{reAdjust()})}),scrollerLeft.addEventListener("click",function(){if(btnTriggered)return;btnTriggered=!0,fade(scrollerRight),unfade(scrollerLeft);let e=getOuterWidth(scrollerLeft);move(document.querySelectorAll(".list")[0]).add("left",-getLeftPosi()+e,200).end().then(()=>{reAdjust()})});let getOuterLeft=function(e){return e.getBoundingClientRect().left},getOuterWidth=function(e){return parseFloat(window.getComputedStyle(e).width)};function fade(e){e.style.display="none",e.style.transition="opacity 0.6s",e.style.opacity=0}function unfade(e){e.style.display="block",e.style.transition="opacity 0.6s",e.style.opacity=1}reAdjust();
|
||||
96
bootstrap/node_modules/scrolling-tabs-bootstrap-5/example/index.html
generated
vendored
Normal file
96
bootstrap/node_modules/scrolling-tabs-bootstrap-5/example/index.html
generated
vendored
Normal file
@ -0,0 +1,96 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="description" content="Scrollable tab for Bootstrap 5">
|
||||
<meta name="keywords" content="Bootstrap, Bootstrap 5, Tabs">
|
||||
<meta name="author" content="Federico Navarrete">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Scrollable Tabs Bootstrap 5</title>
|
||||
<link href="../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<script src="../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
||||
|
||||
<link rel="stylesheet" href="../node_modules/bootstrap-icons/font/bootstrap-icons.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="w-100 pt-3">
|
||||
<div class="scroller scroller-left float-start mt-2"><i class="bi bi-caret-left-fill"></i></div>
|
||||
<div class="scroller scroller-right float-end mt-2"><i class="bi bi-caret-right-fill"></i></div>
|
||||
<div class="wrapper-nav">
|
||||
<nav class="nav nav-tabs list mt-2" id="myTab" role="tablist">
|
||||
<a class="nav-item nav-link pointer active" data-bs-toggle="tab" data-bs-target="#tab1" role="tab" aria-controls="public" aria-selected="true">Tab1</a>
|
||||
<a class="nav-item nav-link pointer" data-bs-target="#tab2" role="tab" data-bs-toggle="tab">Tab 2</a>
|
||||
<a class="nav-item nav-link pointer" data-bs-target="#tab3" role="tab" data-bs-toggle="tab">Tab 3</a>
|
||||
<a class="nav-item nav-link pointer" data-bs-target="#tab4" role="tab" data-bs-toggle="tab">Tab 4</a>
|
||||
<a class="nav-item nav-link pointer" data-bs-target="#tab5" role="tab" data-bs-toggle="tab">Tab 5</a>
|
||||
<a class="nav-item nav-link pointer" data-bs-target="#tab6" role="tab" data-bs-toggle="tab">Tab 6</a>
|
||||
<a class="nav-item nav-link pointer" data-bs-target="#tab7" role="tab" data-bs-toggle="tab">Tab 7</a>
|
||||
<a class="nav-item nav-link pointer" data-bs-target="#tab8" role="tab" data-bs-toggle="tab">Tab 8</a>
|
||||
<a class="nav-item nav-link pointer" data-bs-target="#tab9" role="tab" data-bs-toggle="tab">Tab 9</a>
|
||||
<a class="nav-item nav-link pointer" data-bs-target="#tab10" role="tab" data-bs-toggle="tab">Tab 10</a>
|
||||
<a class="nav-item nav-link pointer" data-bs-target="#tab11" role="tab" data-bs-toggle="tab">Tab 11</a>
|
||||
<a class="nav-item nav-link pointer" data-bs-target="#tab12" role="tab" data-bs-toggle="tab">Tab 12</a>
|
||||
<a class="nav-item nav-link pointer" data-bs-target="#tab13" role="tab" data-bs-toggle="tab">Tab 13</a>
|
||||
<a class="nav-item nav-link pointer" data-bs-target="#tab14" role="tab" data-bs-toggle="tab">Tab 14</a>
|
||||
<a class="nav-item nav-link pointer" data-bs-target="#tab15" role="tab" data-bs-toggle="tab">Tab 15</a>
|
||||
<a class="nav-item nav-link pointer" data-bs-target="#tab16" role="tab" data-bs-toggle="tab">Tab 16</a>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="tab-content p-3" id="myTabContent">
|
||||
<div role="tabpanel" class="tab-pane fade active show mt-2" id="tab1" aria-labelledby="public-tab" >
|
||||
This is the content of Tab 1...
|
||||
</div>
|
||||
<div class="tab-pane fade mt-2" id="tab2" role="tabpanel" aria-labelledby="group-dropdown2-tab" >
|
||||
This is the content of Tab 2...
|
||||
</div>
|
||||
<div class="tab-pane fade mt-2" id="tab3" role="tabpanel" aria-labelledby="group-dropdown2-tab" >
|
||||
This is the content of Tab 3...
|
||||
</div>
|
||||
<div class="tab-pane fade mt-2" id="tab4" role="tabpanel" aria-labelledby="group-dropdown2-tab" >
|
||||
This is the content of Tab 4...
|
||||
</div>
|
||||
<div class="tab-pane fade mt-2" id="tab5" role="tabpanel" aria-labelledby="group-dropdown2-tab" >
|
||||
This is the content of Tab 5...
|
||||
</div>
|
||||
<div class="tab-pane fade mt-2" id="tab6" role="tabpanel" aria-labelledby="group-dropdown2-tab" >
|
||||
This is the content of Tab 6...
|
||||
</div>
|
||||
<div class="tab-pane fade mt-2" id="tab7" role="tabpanel" aria-labelledby="group-dropdown2-tab" >
|
||||
This is the content of Tab 7...
|
||||
</div>
|
||||
<div class="tab-pane fade mt-2" id="tab8" role="tabpanel" aria-labelledby="group-dropdown2-tab" >
|
||||
This is the content of Tab 8...
|
||||
</div>
|
||||
<div class="tab-pane fade mt-2" id="tab9" role="tabpanel" aria-labelledby="group-dropdown2-tab" >
|
||||
This is the content of Tab 9...
|
||||
</div>
|
||||
<div class="tab-pane fade mt-2" id="tab10" role="tabpanel" aria-labelledby="group-dropdown2-tab" >
|
||||
This is the content of Tab 10...
|
||||
</div>
|
||||
<div class="tab-pane fade mt-2" id="tab11" role="tabpanel" aria-labelledby="group-dropdown2-tab" >
|
||||
This is the content of Tab 11...
|
||||
</div>
|
||||
<div class="tab-pane fade mt-2" id="tab12" role="tabpanel" aria-labelledby="group-dropdown2-tab" >
|
||||
This is the content of Tab 12...
|
||||
</div>
|
||||
<div class="tab-pane fade mt-2" id="tab13" role="tabpanel" aria-labelledby="group-dropdown2-tab" >
|
||||
This is the content of Tab 13...
|
||||
</div>
|
||||
<div class="tab-pane fade mt-2" id="tab14" role="tabpanel" aria-labelledby="group-dropdown2-tab" >
|
||||
This is the content of Tab 14...
|
||||
</div>
|
||||
<div class="tab-pane fade mt-2" id="tab15" role="tabpanel" aria-labelledby="group-dropdown2-tab" >
|
||||
This is the content of Tab 15...
|
||||
</div>
|
||||
<div class="tab-pane fade mt-2" id="tab16" role="tabpanel" aria-labelledby="group-dropdown2-tab" >
|
||||
This is the content of Tab 16...
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../node_modules/move-js/move.js"></script>
|
||||
<link href="../dist/scrollable-tabs.min.css" rel="stylesheet">
|
||||
<script src="../dist/scrollable-tabs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
218
bootstrap/node_modules/scrolling-tabs-bootstrap-5/example/index_b4.html
generated
vendored
Normal file
218
bootstrap/node_modules/scrolling-tabs-bootstrap-5/example/index_b4.html
generated
vendored
Normal file
@ -0,0 +1,218 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Scrollable Tabs Bootstrap 4</title>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
|
||||
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" type="text/css" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
.wrapper-nav {
|
||||
position:relative;
|
||||
margin:0 auto;
|
||||
overflow:hidden;
|
||||
padding:5px;
|
||||
height:50px;
|
||||
}
|
||||
|
||||
.list {
|
||||
position:absolute;
|
||||
left:0px;
|
||||
top:0px;
|
||||
min-width:3500px;
|
||||
margin-top:0px;
|
||||
}
|
||||
|
||||
.list li{
|
||||
display:table-cell;
|
||||
position:relative;
|
||||
text-align:center;
|
||||
cursor:grab;
|
||||
cursor:-webkit-grab;
|
||||
color:#efefef;
|
||||
vertical-align:middle;
|
||||
}
|
||||
|
||||
.scroller {
|
||||
text-align:center;
|
||||
cursor:pointer;
|
||||
display:none;
|
||||
padding:7px;
|
||||
padding-top:13px;
|
||||
white-space:no-wrap;
|
||||
vertical-align:middle;
|
||||
background-color:#fff;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="w-100 pt-3">
|
||||
<div class="scroller scroller-left float-left mt-2"><i class="fa fa-chevron-left"></i></div>
|
||||
<div class="scroller scroller-right float-right mt-2"><i class="fa fa-chevron-right"></i></div>
|
||||
<div class="wrapper-nav">
|
||||
<nav class="nav nav-tabs list mt-2" id="myTab" role="tablist">
|
||||
<a class="nav-item nav-link active" data-toggle="tab" href="#tab1" role="tab" aria-controls="public" aria-expanded="true">Tab1</a>
|
||||
<a class="nav-item nav-link" href="#tab2" role="tab" data-toggle="tab">Tab 2</a>
|
||||
<a class="nav-item nav-link" href="#tab3" role="tab" data-toggle="tab">Tab 3</a>
|
||||
<a class="nav-item nav-link" href="#tab4" role="tab" data-toggle="tab">Tab 4</a>
|
||||
<a class="nav-item nav-link" href="#tab5" role="tab" data-toggle="tab">Tab 5</a>
|
||||
<a class="nav-item nav-link" href="#tab6" role="tab" data-toggle="tab">Tab 6</a>
|
||||
<a class="nav-item nav-link" href="#tab7" role="tab" data-toggle="tab">Tab 7</a>
|
||||
<a class="nav-item nav-link" href="#tab8" role="tab" data-toggle="tab">Tab 8</a>
|
||||
<a class="nav-item nav-link" href="#tab9" role="tab" data-toggle="tab">Tab 9</a>
|
||||
<a class="nav-item nav-link" href="#tab10" role="tab" data-toggle="tab">Tab 10</a>
|
||||
<a class="nav-item nav-link" href="#tab11" role="tab" data-toggle="tab">Tab 11</a>
|
||||
<a class="nav-item nav-link" href="#tab12" role="tab" data-toggle="tab">Tab 12</a>
|
||||
<a class="nav-item nav-link" href="#tab13" role="tab" data-toggle="tab">Tab 13</a>
|
||||
<a class="nav-item nav-link" href="#tab14" role="tab" data-toggle="tab">Tab 14</a>
|
||||
<a class="nav-item nav-link" href="#tab15" role="tab" data-toggle="tab">Tab 15</a>
|
||||
<a class="nav-item nav-link" href="#tab16" role="tab" data-toggle="tab">Tab 16</a>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="tab-content p-3" id="myTabContent">
|
||||
<div role="tabpanel" class="tab-pane fade active show mt-2" id="tab1" aria-labelledby="public-tab" aria-expanded="true">
|
||||
This is the content of Tab 1...
|
||||
</div>
|
||||
<div class="tab-pane fade mt-2" id="tab2" role="tabpanel" aria-labelledby="group-dropdown2-tab" aria-expanded="false">
|
||||
This is the content of Tab 2...
|
||||
</div>
|
||||
<div class="tab-pane fade mt-2" id="tab3" role="tabpanel" aria-labelledby="group-dropdown2-tab" aria-expanded="false">
|
||||
This is the content of Tab 3...
|
||||
</div>
|
||||
<div class="tab-pane fade mt-2" id="tab4" role="tabpanel" aria-labelledby="group-dropdown2-tab" aria-expanded="false">
|
||||
This is the content of Tab 4...
|
||||
</div>
|
||||
<div class="tab-pane fade mt-2" id="tab5" role="tabpanel" aria-labelledby="group-dropdown2-tab" aria-expanded="false">
|
||||
This is the content of Tab 5...
|
||||
</div>
|
||||
<div class="tab-pane fade mt-2" id="tab6" role="tabpanel" aria-labelledby="group-dropdown2-tab" aria-expanded="false">
|
||||
This is the content of Tab 6...
|
||||
</div>
|
||||
<div class="tab-pane fade mt-2" id="tab7" role="tabpanel" aria-labelledby="group-dropdown2-tab" aria-expanded="false">
|
||||
This is the content of Tab 7...
|
||||
</div>
|
||||
<div class="tab-pane fade mt-2" id="tab8" role="tabpanel" aria-labelledby="group-dropdown2-tab" aria-expanded="false">
|
||||
This is the content of Tab 8...
|
||||
</div>
|
||||
<div class="tab-pane fade mt-2" id="tab9" role="tabpanel" aria-labelledby="group-dropdown2-tab" aria-expanded="false">
|
||||
This is the content of Tab 9...
|
||||
</div>
|
||||
<div class="tab-pane fade mt-2" id="tab10" role="tabpanel" aria-labelledby="group-dropdown2-tab" aria-expanded="false">
|
||||
This is the content of Tab 10...
|
||||
</div>
|
||||
<div class="tab-pane fade mt-2" id="tab11" role="tabpanel" aria-labelledby="group-dropdown2-tab" aria-expanded="false">
|
||||
This is the content of Tab 11...
|
||||
</div>
|
||||
<div class="tab-pane fade mt-2" id="tab12" role="tabpanel" aria-labelledby="group-dropdown2-tab" aria-expanded="false">
|
||||
This is the content of Tab 12...
|
||||
</div>
|
||||
<div class="tab-pane fade mt-2" id="tab13" role="tabpanel" aria-labelledby="group-dropdown2-tab" aria-expanded="false">
|
||||
This is the content of Tab 13...
|
||||
</div>
|
||||
<div class="tab-pane fade mt-2" id="tab14" role="tabpanel" aria-labelledby="group-dropdown2-tab" aria-expanded="false">
|
||||
This is the content of Tab 14...
|
||||
</div>
|
||||
<div class="tab-pane fade mt-2" id="tab15" role="tabpanel" aria-labelledby="group-dropdown2-tab" aria-expanded="false">
|
||||
This is the content of Tab 15...
|
||||
</div>
|
||||
<div class="tab-pane fade mt-2" id="tab16" role="tabpanel" aria-labelledby="group-dropdown2-tab" aria-expanded="false">
|
||||
This is the content of Tab 16...
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var hidWidth;
|
||||
var scrollBarWidths = 40;
|
||||
|
||||
var widthOfList = function() {
|
||||
var itemsWidth = 0;
|
||||
$('.list a').each(function() {
|
||||
var itemWidth = $(this).outerWidth();
|
||||
itemsWidth += itemWidth;
|
||||
});
|
||||
return itemsWidth;
|
||||
};
|
||||
|
||||
var widthOfHidden = function(){
|
||||
var ww = 0 - $('.wrapper-nav').outerWidth();
|
||||
|
||||
var hw = (($('.wrapper-nav').outerWidth()) - widthOfList() - getLeftPosi()) - scrollBarWidths;
|
||||
|
||||
var rp = $(document).width() - ($('.nav-item.nav-link').last().offset().left + $('.nav-item.nav-link').last().outerWidth());
|
||||
|
||||
if (ww > hw) {
|
||||
//return ww;
|
||||
return (rp > ww ? rp : ww);
|
||||
}
|
||||
else {
|
||||
//return hw;
|
||||
return (rp > hw ? rp : hw);
|
||||
}
|
||||
};
|
||||
|
||||
var getLeftPosi = function(){
|
||||
|
||||
var ww = 0 - $('.wrapper-nav').outerWidth();
|
||||
var lp = $('.list').position().left;
|
||||
|
||||
if (ww > lp) {
|
||||
return ww;
|
||||
}
|
||||
else {
|
||||
return lp;
|
||||
}
|
||||
};
|
||||
|
||||
var reAdjust = function(){
|
||||
// check right pos of last nav item
|
||||
var rp = $(document).width() - ($('.nav-item.nav-link').last().offset().left + $('.nav-item.nav-link').last().outerWidth());
|
||||
|
||||
if (($('.wrapper-nav').outerWidth()) < widthOfList() && (rp < 0)) {
|
||||
$('.scroller-right').show().css('display', 'flex');
|
||||
}
|
||||
else {
|
||||
$('.scroller-right').hide();
|
||||
}
|
||||
|
||||
if (getLeftPosi() < 0) {
|
||||
$('.scroller-left').show().css('display', 'flex');
|
||||
}
|
||||
else {
|
||||
$('.scroller-left').hide();
|
||||
}
|
||||
}
|
||||
|
||||
reAdjust();
|
||||
|
||||
$(window).on('resize',function(e){
|
||||
reAdjust();
|
||||
});
|
||||
|
||||
$('.scroller-right').click(function() {
|
||||
$('.scroller-left').fadeIn('slow');
|
||||
$('.scroller-right').fadeOut('slow');
|
||||
|
||||
$('.list').animate({ left: `+=${widthOfHidden()}px` }, 'slow', function() {
|
||||
reAdjust();
|
||||
});
|
||||
});
|
||||
|
||||
$('.scroller-left').click(function() {
|
||||
|
||||
$('.scroller-right').fadeIn('slow');
|
||||
$('.scroller-left').fadeOut('slow');
|
||||
|
||||
$('.list').animate({ left: `-=${getLeftPosi()}px` }, 'slow', function() {
|
||||
reAdjust();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
96
bootstrap/node_modules/scrolling-tabs-bootstrap-5/index.html
generated
vendored
Normal file
96
bootstrap/node_modules/scrolling-tabs-bootstrap-5/index.html
generated
vendored
Normal file
@ -0,0 +1,96 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="description" content="Scrollable tab for Bootstrap 5">
|
||||
<meta name="keywords" content="Bootstrap, Bootstrap 5, Tabs">
|
||||
<meta name="author" content="Federico Navarrete">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Scrollable Tabs Bootstrap 5</title>
|
||||
<link href="../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<script src="../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
||||
|
||||
<link rel="stylesheet" href="../node_modules/bootstrap-icons/font/bootstrap-icons.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="w-100 pt-3">
|
||||
<div class="scroller scroller-left float-start mt-2"><i class="bi bi-caret-left-fill"></i></div>
|
||||
<div class="scroller scroller-right float-end mt-2"><i class="bi bi-caret-right-fill"></i></div>
|
||||
<div class="wrapper-nav">
|
||||
<nav class="nav nav-tabs list mt-2" id="myTab" role="tablist">
|
||||
<a class="nav-item nav-link pointer active" data-bs-toggle="tab" data-bs-target="#tab1" role="tab" aria-controls="public" aria-selected="true">Tab1</a>
|
||||
<a class="nav-item nav-link pointer" data-bs-target="#tab2" role="tab" data-bs-toggle="tab">Tab 2</a>
|
||||
<a class="nav-item nav-link pointer" data-bs-target="#tab3" role="tab" data-bs-toggle="tab">Tab 3</a>
|
||||
<a class="nav-item nav-link pointer" data-bs-target="#tab4" role="tab" data-bs-toggle="tab">Tab 4</a>
|
||||
<a class="nav-item nav-link pointer" data-bs-target="#tab5" role="tab" data-bs-toggle="tab">Tab 5</a>
|
||||
<a class="nav-item nav-link pointer" data-bs-target="#tab6" role="tab" data-bs-toggle="tab">Tab 6</a>
|
||||
<a class="nav-item nav-link pointer" data-bs-target="#tab7" role="tab" data-bs-toggle="tab">Tab 7</a>
|
||||
<a class="nav-item nav-link pointer" data-bs-target="#tab8" role="tab" data-bs-toggle="tab">Tab 8</a>
|
||||
<a class="nav-item nav-link pointer" data-bs-target="#tab9" role="tab" data-bs-toggle="tab">Tab 9</a>
|
||||
<a class="nav-item nav-link pointer" data-bs-target="#tab10" role="tab" data-bs-toggle="tab">Tab 10</a>
|
||||
<a class="nav-item nav-link pointer" data-bs-target="#tab11" role="tab" data-bs-toggle="tab">Tab 11</a>
|
||||
<a class="nav-item nav-link pointer" data-bs-target="#tab12" role="tab" data-bs-toggle="tab">Tab 12</a>
|
||||
<a class="nav-item nav-link pointer" data-bs-target="#tab13" role="tab" data-bs-toggle="tab">Tab 13</a>
|
||||
<a class="nav-item nav-link pointer" data-bs-target="#tab14" role="tab" data-bs-toggle="tab">Tab 14</a>
|
||||
<a class="nav-item nav-link pointer" data-bs-target="#tab15" role="tab" data-bs-toggle="tab">Tab 15</a>
|
||||
<a class="nav-item nav-link pointer" data-bs-target="#tab16" role="tab" data-bs-toggle="tab">Tab 16</a>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="tab-content p-3" id="myTabContent">
|
||||
<div role="tabpanel" class="tab-pane fade active show mt-2" id="tab1" aria-labelledby="public-tab" >
|
||||
This is the content of Tab 1...
|
||||
</div>
|
||||
<div class="tab-pane fade mt-2" id="tab2" role="tabpanel" aria-labelledby="group-dropdown2-tab" >
|
||||
This is the content of Tab 2...
|
||||
</div>
|
||||
<div class="tab-pane fade mt-2" id="tab3" role="tabpanel" aria-labelledby="group-dropdown2-tab" >
|
||||
This is the content of Tab 3...
|
||||
</div>
|
||||
<div class="tab-pane fade mt-2" id="tab4" role="tabpanel" aria-labelledby="group-dropdown2-tab" >
|
||||
This is the content of Tab 4...
|
||||
</div>
|
||||
<div class="tab-pane fade mt-2" id="tab5" role="tabpanel" aria-labelledby="group-dropdown2-tab" >
|
||||
This is the content of Tab 5...
|
||||
</div>
|
||||
<div class="tab-pane fade mt-2" id="tab6" role="tabpanel" aria-labelledby="group-dropdown2-tab" >
|
||||
This is the content of Tab 6...
|
||||
</div>
|
||||
<div class="tab-pane fade mt-2" id="tab7" role="tabpanel" aria-labelledby="group-dropdown2-tab" >
|
||||
This is the content of Tab 7...
|
||||
</div>
|
||||
<div class="tab-pane fade mt-2" id="tab8" role="tabpanel" aria-labelledby="group-dropdown2-tab" >
|
||||
This is the content of Tab 8...
|
||||
</div>
|
||||
<div class="tab-pane fade mt-2" id="tab9" role="tabpanel" aria-labelledby="group-dropdown2-tab" >
|
||||
This is the content of Tab 9...
|
||||
</div>
|
||||
<div class="tab-pane fade mt-2" id="tab10" role="tabpanel" aria-labelledby="group-dropdown2-tab" >
|
||||
This is the content of Tab 10...
|
||||
</div>
|
||||
<div class="tab-pane fade mt-2" id="tab11" role="tabpanel" aria-labelledby="group-dropdown2-tab" >
|
||||
This is the content of Tab 11...
|
||||
</div>
|
||||
<div class="tab-pane fade mt-2" id="tab12" role="tabpanel" aria-labelledby="group-dropdown2-tab" >
|
||||
This is the content of Tab 12...
|
||||
</div>
|
||||
<div class="tab-pane fade mt-2" id="tab13" role="tabpanel" aria-labelledby="group-dropdown2-tab" >
|
||||
This is the content of Tab 13...
|
||||
</div>
|
||||
<div class="tab-pane fade mt-2" id="tab14" role="tabpanel" aria-labelledby="group-dropdown2-tab" >
|
||||
This is the content of Tab 14...
|
||||
</div>
|
||||
<div class="tab-pane fade mt-2" id="tab15" role="tabpanel" aria-labelledby="group-dropdown2-tab" >
|
||||
This is the content of Tab 15...
|
||||
</div>
|
||||
<div class="tab-pane fade mt-2" id="tab16" role="tabpanel" aria-labelledby="group-dropdown2-tab" >
|
||||
This is the content of Tab 16...
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../node_modules/move-js/move.js"></script>
|
||||
<link href="../dist/scrollable-tabs.min.css" rel="stylesheet">
|
||||
<script src="../dist/scrollable-tabs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
39
bootstrap/node_modules/scrolling-tabs-bootstrap-5/package.json
generated
vendored
Normal file
39
bootstrap/node_modules/scrolling-tabs-bootstrap-5/package.json
generated
vendored
Normal file
@ -0,0 +1,39 @@
|
||||
{
|
||||
"name": "scrolling-tabs-bootstrap-5",
|
||||
"version": "1.0.7",
|
||||
"description": "A simple plugin to create scrollable tabs with Bootstrap 5.",
|
||||
"main": "./dist/scrollable-tabs.js",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/SupernovaIC/scrollable-tabs-bootstrap-5.git"
|
||||
},
|
||||
"keywords": [
|
||||
"scrollable",
|
||||
"scrolling",
|
||||
"tabs",
|
||||
"bootstrap",
|
||||
"boostrap",
|
||||
"bootstrap-5",
|
||||
"javascript",
|
||||
"css",
|
||||
"web",
|
||||
"front-end",
|
||||
"move-js",
|
||||
"css"
|
||||
],
|
||||
"ignore": [
|
||||
".gitignore",
|
||||
"README.md"
|
||||
],
|
||||
"author": "Federico Navarrete <fanmixco@gmail.com>",
|
||||
"license": "Apache 2.0",
|
||||
"bugs": {
|
||||
"url": "https://github.com/SupernovaIC/scrollable-tabs-bootstrap-5/issues"
|
||||
},
|
||||
"homepage": "https://github.com/SupernovaIC/scrollable-tabs-bootstrap-5#readme",
|
||||
"dependencies": {
|
||||
"bootstrap": "^5.1.3",
|
||||
"bootstrap-icons": "^1.7.2",
|
||||
"move-js": "^0.5.0"
|
||||
}
|
||||
}
|
||||
BIN
bootstrap/node_modules/scrolling-tabs-bootstrap-5/preview.gif
generated
vendored
Normal file
BIN
bootstrap/node_modules/scrolling-tabs-bootstrap-5/preview.gif
generated
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 340 KiB |
38
bootstrap/node_modules/scrolling-tabs-bootstrap-5/src/css/scrollable-tabs.css
generated
vendored
Normal file
38
bootstrap/node_modules/scrolling-tabs-bootstrap-5/src/css/scrollable-tabs.css
generated
vendored
Normal file
@ -0,0 +1,38 @@
|
||||
|
||||
.wrapper-nav {
|
||||
position:relative;
|
||||
margin:0 auto;
|
||||
overflow:hidden;
|
||||
padding:5px;
|
||||
height:50px;
|
||||
}
|
||||
|
||||
.list {
|
||||
position:absolute;
|
||||
left:0px;
|
||||
top:0px;
|
||||
min-width:3500px;
|
||||
margin-top:0px;
|
||||
}
|
||||
|
||||
.list li{
|
||||
display:table-cell;
|
||||
position:relative;
|
||||
text-align:center;
|
||||
cursor:grab;
|
||||
cursor:-webkit-grab;
|
||||
color:#efefef;
|
||||
vertical-align:middle;
|
||||
}
|
||||
|
||||
.scroller {
|
||||
text-align:center;
|
||||
cursor:pointer;
|
||||
display:none;
|
||||
padding:7px;
|
||||
white-space:no-wrap;
|
||||
vertical-align:middle;
|
||||
background-color:#fff;
|
||||
}
|
||||
|
||||
.pointer {cursor: pointer;}
|
||||
1
bootstrap/node_modules/scrolling-tabs-bootstrap-5/src/css/scrollable-tabs.min.css
generated
vendored
Normal file
1
bootstrap/node_modules/scrolling-tabs-bootstrap-5/src/css/scrollable-tabs.min.css
generated
vendored
Normal file
@ -0,0 +1 @@
|
||||
.wrapper-nav{position:relative;margin:0 auto;overflow:hidden;padding:5px;height:50px}.list{position:absolute;left:0;top:0;min-width:3500px;margin-top:0}.list li{display:table-cell;position:relative;text-align:center;cursor:grab;cursor:-webkit-grab;color:#efefef;vertical-align:middle}.scroller{text-align:center;cursor:pointer;display:none;padding:7px;white-space:no-wrap;vertical-align:middle;background-color:#fff}.pointer{cursor:pointer}
|
||||
137
bootstrap/node_modules/scrolling-tabs-bootstrap-5/src/js/scrollable-tabs.js
generated
vendored
Normal file
137
bootstrap/node_modules/scrolling-tabs-bootstrap-5/src/js/scrollable-tabs.js
generated
vendored
Normal file
@ -0,0 +1,137 @@
|
||||
//let move = require('move');
|
||||
|
||||
const scrollBarWidths = 40;
|
||||
const wrapper = document.getElementsByClassName("wrapper-nav")[0];
|
||||
const navLink = document.getElementsByClassName("nav-item nav-link");
|
||||
const lastNavLink = navLink[navLink.length - 1];
|
||||
|
||||
const scrollerRight = document.getElementsByClassName("scroller-right")[0];
|
||||
const scrollerLeft = document.getElementsByClassName("scroller-left")[0];
|
||||
|
||||
const list = document.querySelectorAll(".list");
|
||||
|
||||
let btnTriggered = false;
|
||||
|
||||
let widthOfList = function() {
|
||||
let itemsWidth = 0;
|
||||
|
||||
const listLinks = document.querySelectorAll(".list a");
|
||||
|
||||
listLinks.forEach((el) => {
|
||||
let itemWidth = getOuterWidth(el);
|
||||
itemsWidth += itemWidth;
|
||||
});
|
||||
|
||||
return itemsWidth;
|
||||
};
|
||||
|
||||
let widthOfHidden = function(w) {
|
||||
const wrapperh = document.getElementsByClassName("wrapper-nav")[0];
|
||||
|
||||
w = (!w) ? 0 : w;
|
||||
|
||||
oW = getOuterWidth(wrapperh) - w;
|
||||
|
||||
let ww = parseFloat((0 - oW).toFixed(3));
|
||||
|
||||
let hw = (oW - widthOfList() - getLeftPosi()) - scrollBarWidths;
|
||||
|
||||
let rp = document.body.clientWidth - (getOuterLeft(lastNavLink) + getOuterWidth(lastNavLink)) - w;
|
||||
|
||||
if (ww > hw) {
|
||||
//return ww;
|
||||
return (rp > ww ? rp : ww);
|
||||
}
|
||||
else {
|
||||
//return hw;
|
||||
return (rp > hw ? rp : hw);
|
||||
}
|
||||
};
|
||||
|
||||
let getLeftPosi = function() {
|
||||
let ww = 0 - getOuterWidth(wrapper);
|
||||
let lp = getOuterLeft(list[0]);
|
||||
|
||||
if (ww > lp) {
|
||||
return ww;
|
||||
}
|
||||
else {
|
||||
return lp;
|
||||
}
|
||||
};
|
||||
|
||||
let reAdjust = function() {
|
||||
let rp = document.body.clientWidth - (getOuterLeft(lastNavLink) + getOuterWidth(lastNavLink));
|
||||
|
||||
if (getOuterWidth(wrapper) < widthOfList() && (rp < 0)) {
|
||||
scrollerRight.style.cssText = 'display: flex';
|
||||
}
|
||||
else {
|
||||
scrollerRight.style.display = 'none';
|
||||
}
|
||||
|
||||
if (getLeftPosi() < 0) {
|
||||
scrollerLeft.style.cssText = 'display: flex';
|
||||
}
|
||||
else {
|
||||
scrollerLeft.style.display = 'none';
|
||||
}
|
||||
|
||||
btnTriggered = false;
|
||||
}
|
||||
|
||||
window.addEventListener('resize', function(event) {
|
||||
reAdjust();
|
||||
}, true);
|
||||
|
||||
scrollerRight.addEventListener("click", function() {
|
||||
if (btnTriggered) return;
|
||||
|
||||
btnTriggered = true;
|
||||
|
||||
fade(scrollerLeft);
|
||||
unfade(scrollerRight);
|
||||
|
||||
let wR = getOuterWidth(scrollerRight);
|
||||
|
||||
move(document.querySelectorAll(".list")[0]).add("left", +widthOfHidden(wR), 200).end().then(x=> {
|
||||
reAdjust();
|
||||
});
|
||||
});
|
||||
|
||||
scrollerLeft.addEventListener("click", function() {
|
||||
if (btnTriggered) return;
|
||||
|
||||
btnTriggered = true;
|
||||
|
||||
fade(scrollerRight);
|
||||
unfade(scrollerLeft);
|
||||
|
||||
let wL = getOuterWidth(scrollerLeft);
|
||||
|
||||
move(document.querySelectorAll(".list")[0]).add("left", -getLeftPosi() + wL, 200).end().then(()=> {
|
||||
reAdjust();
|
||||
});
|
||||
});
|
||||
|
||||
let getOuterLeft = function(elem) {
|
||||
return elem.getBoundingClientRect().left;
|
||||
}
|
||||
|
||||
let getOuterWidth = function(elem) {
|
||||
return parseFloat(window.getComputedStyle(elem).width);
|
||||
}
|
||||
|
||||
function fade(elem) {
|
||||
elem.style.display = "none";
|
||||
elem.style.transition="opacity 0.6s";
|
||||
elem.style.opacity=0;
|
||||
}
|
||||
|
||||
function unfade(elem) {
|
||||
elem.style.display = "block";
|
||||
elem.style.transition="opacity 0.6s";
|
||||
elem.style.opacity=1;
|
||||
}
|
||||
|
||||
reAdjust();
|
||||
1
bootstrap/node_modules/scrolling-tabs-bootstrap-5/src/js/scrollable-tabs.min.js
generated
vendored
Normal file
1
bootstrap/node_modules/scrolling-tabs-bootstrap-5/src/js/scrollable-tabs.min.js
generated
vendored
Normal file
@ -0,0 +1 @@
|
||||
const scrollBarWidths=40,wrapper=document.getElementsByClassName("wrapper-nav")[0],navLink=document.getElementsByClassName("nav-item nav-link"),lastNavLink=navLink[navLink.length-1],scrollerRight=document.getElementsByClassName("scroller-right")[0],scrollerLeft=document.getElementsByClassName("scroller-left")[0],list=document.querySelectorAll(".list");let btnTriggered=!1,widthOfList=function(){let e=0;return document.querySelectorAll(".list a").forEach(t=>{let l=getOuterWidth(t);e+=l}),e},widthOfHidden=function(e){const t=document.getElementsByClassName("wrapper-nav")[0];e=e||0,oW=getOuterWidth(t)-e;let l=parseFloat((0-oW).toFixed(3)),r=oW-widthOfList()-getLeftPosi()-40,n=document.body.clientWidth-(getOuterLeft(lastNavLink)+getOuterWidth(lastNavLink))-e;return l>r?n>l?n:l:n>r?n:r},getLeftPosi=function(){let e=0-getOuterWidth(wrapper),t=getOuterLeft(list[0]);return e>t?e:t},reAdjust=function(){let e=document.body.clientWidth-(getOuterLeft(lastNavLink)+getOuterWidth(lastNavLink));getOuterWidth(wrapper)<widthOfList()&&e<0?scrollerRight.style.cssText="display: flex":scrollerRight.style.display="none",getLeftPosi()<0?scrollerLeft.style.cssText="display: flex":scrollerLeft.style.display="none",btnTriggered=!1};window.addEventListener("resize",function(e){reAdjust()},!0),scrollerRight.addEventListener("click",function(){if(btnTriggered)return;btnTriggered=!0,fade(scrollerLeft),unfade(scrollerRight);let e=getOuterWidth(scrollerRight);move(document.querySelectorAll(".list")[0]).add("left",+widthOfHidden(e),200).end().then(e=>{reAdjust()})}),scrollerLeft.addEventListener("click",function(){if(btnTriggered)return;btnTriggered=!0,fade(scrollerRight),unfade(scrollerLeft);let e=getOuterWidth(scrollerLeft);move(document.querySelectorAll(".list")[0]).add("left",-getLeftPosi()+e,200).end().then(()=>{reAdjust()})});let getOuterLeft=function(e){return e.getBoundingClientRect().left},getOuterWidth=function(e){return parseFloat(window.getComputedStyle(e).width)};function fade(e){e.style.display="none",e.style.transition="opacity 0.6s",e.style.opacity=0}function unfade(e){e.style.display="block",e.style.transition="opacity 0.6s",e.style.opacity=1}reAdjust();
|
||||
Reference in New Issue
Block a user