mirror of
https://github.com/a2nt/webpack-bootstrap-ui-kit.git
synced 2024-10-22 11:05:45 +02:00
Bugfixtures
This commit is contained in:
Tony Air
parent
851d032c29
commit
297f99bc9e
8
dist/index.html
vendored
8
dist/index.html
vendored
@ -1 +1,7 @@
|
||||
<!doctype html><html lang="en"><head><title>Webpack Bootstrap 4 UI Demo</title><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="description" content=""><meta name="author" content=""><link href="css/main.css" rel="stylesheet"></head><body><noscript><div class="main-bn">Please, enable javascript.</div></noscript><div id="PageTopAnchor"></div><div class="wrapper"><header id="Header" class="bg-dark"><div class="container-fluid"><nav id="Navigation" class="fixed-top navbar-dark bg-dark navbar navbar-expand-lg"><a class="navbar-brand" href="#">UI Kit</a> <button data-target="#NavbarResponsive" aria-controls="NavbarResponsive" class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><div id="NavbarResponsive" class="collapse navbar-collapse"><ul class="navbar-nav mr-auto nav-fill w-100"><li class="nav-item active"><a class="nav-link js-scrollTo" href="#PageTopAnchor">Home <span class="sr-only">(current)</span></a></li><li class="nav-item"><a class="nav-link js-scrollTo" href="#Slider">Slider</a></li><li class="nav-item dropdown"><a id="NavbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a><div class="dropdown-menu bg-dark" aria-labelledby="NavbarDropdown"><a class="dropdown-item" href="#">Action</a> <a class="dropdown-item js-scrollTo" href="#AccordionList">Scroll to AccordionList</a><div class="dropdown-divider"></div><a class="dropdown-item" href="https://google.com" target="_blank" rel="nofollow">Go to Google.com</a></div></li><li class="nav-item"><a class="nav-link js-scrollTo" href="#Content">Content</a></li><li class="nav-item"><a class="nav-link js-scrollTo" href="#List">List</a></li><li class="nav-item"><a class="nav-link js-scrollTo" href="#AccordionList">Accordion List</a></li><li><form class="form-inline my-2 my-lg-0"><input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit"><i class="fas fa-search"></i> <span class="sr-only">Search</span></button></form></li></ul></div></nav></div></header><main id="MainContent" class="page-content"><section id="Slider" class="element site__elements__sliderelement"><div class="element-container container-fluid"><div id="Carousel{$ID}" class="carousel slide js-carousel d-none d-sm-block" data-indicators="true" data-arrows="true"><div class="carousel-inner"><div class="carousel-item active"><a href="$PageLink.Link" title="$PageLink.MenuTitle.XML" class="btn-primary"><img class="d-block w-100" src="https://placehold.it/1200x600" alt="$Headline"></a><div class="carousel-caption"><div class="carousel-caption-container"><h2 class="carousel-title">$Headline #1</h2><p class="carousel-content">$Description</p><p><a href="$PageLink.Link" title="$PageLink.MenuTitle.XML" class="btn btn-default btn-lg"><i class="fas fa-bars"></i> Learn More</a></p></div></div></div><div class="carousel-item"><a href="$PageLink.Link" title="$PageLink.MenuTitle.XML" class="btn-primary"><img class="d-block w-100" src="https://placehold.it/1200x600" alt="$Headline"></a><div class="carousel-caption"><div class="carousel-caption-container"><h2 class="carousel-title">$Headline #2</h2><p class="carousel-content">$Description</p><p><a href="$PageLink.Link" title="$PageLink.MenuTitle.XML" class="btn btn-default btn-lg"><i class="fas fa-bars"></i> Learn More</a></p></div></div></div><div class="carousel-item"><a href="$PageLink.Link" title="$PageLink.MenuTitle.XML" class="btn-primary"><img class="d-block w-100" src="https://placehold.it/1200x600" alt="$Headline"></a><div class="carousel-caption"><div class="carousel-caption-container"><h2 class="carousel-title">$Headline #3</h2><p class="carousel-content">$Description</p><p><a href="$PageLink.Link" title="$PageLink.MenuTitle.XML" class="btn btn-default btn-lg"><i class="fas fa-bars"></i> Learn More</a></p></div></div></div></div></div></div></section><section id="Content" class="element dnadesign__elemental__models__elementcontent"><div class="element-container container"><div class="content-element__content"><h2 class="content-element__title">Content Header</h2><div class="typography"><p>Content Text Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p><p><i class="fas fa-search"></i> Content Text Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p><h2><i class="fas fa-search"></i> Header #2 <i class="fas fa-search"></i></h2><p><img src="https://placehold.it/200x200" alt="Test Image" class="image right">Content Text Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p><h3>Header #3</h3><p><img src="https://placehold.it/200x200" alt="Test Image" class="image left"> Content Text Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p><h2>Header #2</h2><h3 class="text-left">Header #3</h3><h4 class="text-center">Header #4</h4><h5 class="text-right">Header #5</h5><h6>Header #6</h6><p class="text-right"><img src="https://placehold.it/200x200" alt="Test Image" class="image center"> Content Text <a href="#">Link</a> ... Content Text <b>Bold</b> ... Content Text <i>Italic</i> ... Content Text <b><i>Bold-Italic</i></b> ... <s>Content Text</s> Bla-bla-bla ... Content Text Bla-bla-bla ... Content Text Bla-bla-bla ... Content Text Bla-bla-bla ... Content Text Bla-bla-bla ... Content Text Bla-bla-bla ... Content Text Bla-bla-bla ... Content Text Bla-bla-bla ...</p><ul><li>First</li><li>Second</li><li>Third</li></ul><p class="text-left">Content Text Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p><ol><li>First<ul><li>First</li><li>Second<ol><li>First</li><li>Second</li><li>Third</li></ol><ul><li>First</li><li>Second</li><li>Third</li></ul></li><li><p>Content Text Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></li></ul></li><li><p>{paragraph} Second</p><p>{paragraph} Second #2</p></li><li><p>Content Text Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></li></ol><h2 class="text-center">Table #1: Default</h2><table><thead><tr><th>#1</th><th>#2</th><th>#3</th></tr></thead><tbody><tr><th>#1-1</th><td>#1-2</td><td>#1-3</td></tr><tr><td>#2-1</td><td>#2-2</td><td>#2-3</td></tr><tr><th>#3-1</th><td>#3-2</td><td>#3-3</td></tr></tbody></table><p class="text-justify">Content Text Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p><h2 class="text-center">Table #2: Border-less</h2><table class="table-none"><thead><tr><th>#1</th><th>#2</th><th>#3</th></tr></thead><tbody><tr><th>#1-1</th><td>#1-2</td><td>#1-3</td></tr><tr><td>#2-1</td><td>#2-2</td><td>#2-3</td></tr><tr><th>#3-1</th><td>#3-2</td><td>#3-3</td></tr></tbody></table></div></div></div></section><section id="List" class="element dnadesign__elementallist__model__elementlist bg-dark"><div class="element-container container"><h2 class="list-element__title">Content Header</h2><div class="typography">Some content ...</div><div class="list-element__container row" data-listelement-count="4"><div class="element dnadesign__elemental__models__elementcontent block col-md-3"><div class="element-container"><div class="content-element__content"><div class="typography"><img src="https://placehold.it/300x300" alt="Some kind image"></div></div></div></div><div class="element dnadesign__elemental__models__elementcontent block col-md-3"><div class="element-container"><div class="content-element__content"><div class="typography"><img src="https://placehold.it/300x300" alt="Some kind image"></div></div></div></div><div class="element dnadesign__elemental__models__elementcontent block col-md-3"><div class="element-container"><div class="content-element__content"><div class="typography"><img src="https://placehold.it/300x300" alt="Some kind image"></div></div></div></div><div class="element dnadesign__elemental__models__elementcontent block col-md-3"><div class="element-container"><div class="content-element__content"><div class="typography"><img src="https://placehold.it/300x300" alt="Some kind image"></div></div></div></div></div></div></section><section id="AccordionList" class="element site__elements__accordion"><div class="element-container container"><h2 class="list-element__title">Content Header</h2><div class="typography">Some content ...</div><div id="AccordionExample" class="list-element__container row accordion" data-listelement-count="4"><div class="element dnadesign__elemental__models__elementcontent block col-md-12 card"><div class="element-container"><div class="content-element__content"><div id="Heading1" class="card-header"><button data-target="#Collapse1" aria-controls="Collapse1" class="btn btn-link collapsed" type="button" data-toggle="collapse" aria-expanded="false"><h2 class="element__title">Content Header #1</h2></button></div><div id="Collapse1" aria-labelledby="Heading1" data-parent="#AccordionExample" class="collapse"><div class="card-body"><div class="typography"><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></div></div></div></div></div></div><div class="element dnadesign__elemental__models__elementcontent block col-md-12 card"><div class="element-container"><div class="content-element__content"><div class="card-header" id="Heading2"><button data-target="#Collapse2" aria-controls="Collapse2" class="btn btn-link collapsed" type="button" data-toggle="collapse" aria-expanded="false"><h2 class="element__title">Content Header #2</h2></button></div><div id="Collapse2" class="collapse" aria-labelledby="Heading2" data-parent="#AccordionExample"><div class="card-body"><div class="typography"><p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p></div></div></div></div></div></div><div class="element dnadesign__elemental__models__elementcontent block col-md-12 card"><div class="element-container"><div class="content-element__content"><div class="card-header" id="Heading3"><button data-target="#Collapse3" aria-controls="Collapse3" class="btn btn-link collapsed" type="button" data-toggle="collapse" aria-expanded="false"><h2 class="element__title">Content Header #3</h2></button></div><div id="Collapse3" class="collapse" aria-labelledby="Heading3" data-parent="#AccordionExample"><div class="card-body"><div class="typography"><p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p></div></div></div></div></div></div><div class="element dnadesign__elemental__models__elementcontent block col-md-12 card"><div class="element-container"><div class="content-element__content"><div id="Heading4" class="card-header"><button data-target="#Collapse4" aria-controls="Collapse4" class="btn btn-link collapsed" type="button" data-toggle="collapse" aria-expanded="false"><h2 class="element__title">Content Header #2</h2></button></div><div id="Collapse4" class="collapse" aria-labelledby="Heading4" data-parent="#AccordionExample"><div class="card-body"><div class="typography"><p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p></div></div></div></div></div></div></div></div></section></main></div><footer id="Footer" class="footer site-footer"><div class="wrapper"><div class="container"><div class="row"><div class="col-sm-3">Col #1</div><div class="col-sm-3">Col #2</div><div class="col-sm-3">Col #3</div><div class="col-sm-3">Col #4</div></div></div></div><div class="footer"><div class="container"><div class="row"><div class="col-sm-8 d-flex"><div class="copyright">Copyright © 2019 - Tony Air (A2nt) Webpack Bootstrap 4 UI Kit</div><nav class="footer-nav"><ul class="list-inline d-flex"><li><a href="#">Sitemap</a></li><li><a href="#">Privacy Policy</a></li></ul></nav></div><div class="col-sm-4 text-right"><div class="credits footer__credits"><a href="https://github.com/a2nt" target="_blank" rel="nofollow"><span>Developed by</span> Tony Air</a></div></div></div></div></div></footer><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.0/css/all.css" media="all"><script src="js/app.js"></script></body></html>
|
||||
<!doctype html><html lang="en"><head><title>Webpack Bootstrap 4 UI Demo</title><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="description" content=""><meta name="author" content=""><link href="css/main.css" rel="stylesheet"></head><body><noscript><div class="main-bn">Please, enable javascript.</div></noscript><div id="PageTopAnchor"></div><div class="wrapper"><header id="Header" class="bg-dark"><div class="container-fluid"><nav id="Navigation" class="fixed-top navbar-dark bg-dark navbar navbar-expand-lg"><a class="navbar-brand" href="#">UI Kit</a> <button data-target="#NavbarResponsive" aria-controls="NavbarResponsive" class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><div id="NavbarResponsive" class="collapse navbar-collapse"><ul class="navbar-nav mr-auto nav-fill w-100"><li class="nav-item active"><a class="nav-link js-scrollTo" href="#PageTopAnchor">Home <span class="sr-only">(current)</span></a></li><li class="nav-item"><a class="nav-link js-scrollTo" href="#Slider">Slider</a></li><li class="nav-item dropdown"><a id="NavbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a><div class="dropdown-menu bg-dark" aria-labelledby="NavbarDropdown"><a class="dropdown-item" href="#">Action</a> <a class="dropdown-item js-scrollTo" href="#AccordionList">Scroll to AccordionList</a><div class="dropdown-divider"></div><a class="dropdown-item" href="https://google.com" target="_blank" rel="nofollow">Go to Google.com</a></div></li><li class="nav-item"><a class="nav-link js-scrollTo" href="#Content">Content</a></li><li class="nav-item"><a class="nav-link js-scrollTo" href="#List">List</a></li><li class="nav-item"><a class="nav-link js-scrollTo" href="#AccordionList">Accordion List</a></li><li><form class="form-inline my-2 my-lg-0"><input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit"><i class="fas fa-search"></i> <span class="sr-only">Search</span></button></form></li></ul></div></nav></div></header><main id="MainContent" class="page-content"><section id="Slider" class="element site__elements__sliderelement"><div class="element-container container-fluid"><div id="Carousel{$ID}" class="carousel slide js-carousel d-none d-sm-block" data-indicators="true" data-arrows="true"><div class="carousel-inner"><div class="carousel-item active"><a href="$PageLink.Link" title="$PageLink.MenuTitle.XML" class="btn-primary"><img class="d-block w-100" src="https://placehold.it/1200x600" alt="$Headline"></a><div class="carousel-caption"><div class="carousel-caption-container"><h2 class="carousel-title">$Headline #1</h2><p class="carousel-content">$Description</p><p><a href="$PageLink.Link" title="$PageLink.MenuTitle.XML" class="btn btn-default btn-lg"><i class="fas fa-bars"></i> Learn More</a></p></div></div></div><div class="carousel-item"><a href="$PageLink.Link" title="$PageLink.MenuTitle.XML" class="btn-primary"><img class="d-block w-100" src="https://placehold.it/1200x600" alt="$Headline"></a><div class="carousel-caption"><div class="carousel-caption-container"><h2 class="carousel-title">$Headline #2</h2><p class="carousel-content">$Description</p><p><a href="$PageLink.Link" title="$PageLink.MenuTitle.XML" class="btn btn-default btn-lg"><i class="fas fa-bars"></i> Learn More</a></p></div></div></div><div class="carousel-item"><a href="$PageLink.Link" title="$PageLink.MenuTitle.XML" class="btn-primary"><img class="d-block w-100" src="https://placehold.it/1200x600" alt="$Headline"></a><div class="carousel-caption"><div class="carousel-caption-container"><h2 class="carousel-title">$Headline #3</h2><p class="carousel-content">$Description</p><p><a href="$PageLink.Link" title="$PageLink.MenuTitle.XML" class="btn btn-default btn-lg"><i class="fas fa-bars"></i> Learn More</a></p></div></div></div></div></div></div></section><section id="Content" class="element dnadesign__elemental__models__elementcontent"><div class="element-container container"><div class="content-element__content"><h2 class="content-element__title">Content Header</h2><form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
|
||||
<input type="hidden" name="cmd" value="_s-xclick" />
|
||||
<input type="hidden" name="hosted_button_id" value="GZYEJESVKDRA6" />
|
||||
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit" title="PayPal - The safer, easier way to pay online!" alt="Donate with PayPal button" />
|
||||
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1" />
|
||||
</form>
|
||||
<div class="typography"><p>Content Text Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p><p><i class="fas fa-search"></i> Content Text Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p><h2><i class="fas fa-search"></i> Header #2 <i class="fas fa-search"></i></h2><p><img src="https://placehold.it/200x200" alt="Test Image" class="image right">Content Text Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p><h3>Header #3</h3><p><img src="https://placehold.it/200x200" alt="Test Image" class="image left"> Content Text Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p><h2>Header #2</h2><h3 class="text-left">Header #3</h3><h4 class="text-center">Header #4</h4><h5 class="text-right">Header #5</h5><h6>Header #6</h6><p class="text-right"><img src="https://placehold.it/200x200" alt="Test Image" class="image center"> Content Text <a href="#">Link</a> ... Content Text <b>Bold</b> ... Content Text <i>Italic</i> ... Content Text <b><i>Bold-Italic</i></b> ... <s>Content Text</s> Bla-bla-bla ... Content Text Bla-bla-bla ... Content Text Bla-bla-bla ... Content Text Bla-bla-bla ... Content Text Bla-bla-bla ... Content Text Bla-bla-bla ... Content Text Bla-bla-bla ... Content Text Bla-bla-bla ...</p><ul><li>First</li><li>Second</li><li>Third</li></ul><p class="text-left">Content Text Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p><ol><li>First<ul><li>First</li><li>Second<ol><li>First</li><li>Second</li><li>Third</li></ol><ul><li>First</li><li>Second</li><li>Third</li></ul></li><li><p>Content Text Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></li></ul></li><li><p>{paragraph} Second</p><p>{paragraph} Second #2</p></li><li><p>Content Text Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></li></ol><h2 class="text-center">Table #1: Default</h2><table><thead><tr><th>#1</th><th>#2</th><th>#3</th></tr></thead><tbody><tr><th>#1-1</th><td>#1-2</td><td>#1-3</td></tr><tr><td>#2-1</td><td>#2-2</td><td>#2-3</td></tr><tr><th>#3-1</th><td>#3-2</td><td>#3-3</td></tr></tbody></table><p class="text-justify">Content Text Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p><h2 class="text-center">Table #2: Border-less</h2><table class="table-none"><thead><tr><th>#1</th><th>#2</th><th>#3</th></tr></thead><tbody><tr><th>#1-1</th><td>#1-2</td><td>#1-3</td></tr><tr><td>#2-1</td><td>#2-2</td><td>#2-3</td></tr><tr><th>#3-1</th><td>#3-2</td><td>#3-3</td></tr></tbody></table></div></div></div></section><section id="List" class="element dnadesign__elementallist__model__elementlist bg-dark"><div class="element-container container"><h2 class="list-element__title">Content Header</h2><div class="typography">Some content ...</div><div class="list-element__container row" data-listelement-count="4"><div class="element dnadesign__elemental__models__elementcontent block col-md-3"><div class="element-container"><div class="content-element__content"><div class="typography"><img src="https://placehold.it/300x300" alt="Some kind image"></div></div></div></div><div class="element dnadesign__elemental__models__elementcontent block col-md-3"><div class="element-container"><div class="content-element__content"><div class="typography"><img src="https://placehold.it/300x300" alt="Some kind image"></div></div></div></div><div class="element dnadesign__elemental__models__elementcontent block col-md-3"><div class="element-container"><div class="content-element__content"><div class="typography"><img src="https://placehold.it/300x300" alt="Some kind image"></div></div></div></div><div class="element dnadesign__elemental__models__elementcontent block col-md-3"><div class="element-container"><div class="content-element__content"><div class="typography"><img src="https://placehold.it/300x300" alt="Some kind image"></div></div></div></div></div></div></section><section id="AccordionList" class="element site__elements__accordion"><div class="element-container container"><h2 class="list-element__title">Content Header</h2><div class="typography">Some content ...</div><div id="AccordionExample" class="list-element__container row accordion" data-listelement-count="4"><div class="element dnadesign__elemental__models__elementcontent block col-md-12 card"><div class="element-container"><div class="content-element__content"><div id="Heading1" class="card-header"><button data-target="#Collapse1" aria-controls="Collapse1" class="btn btn-link collapsed" type="button" data-toggle="collapse" aria-expanded="false"><h2 class="element__title">Content Header #1</h2></button></div><div id="Collapse1" aria-labelledby="Heading1" data-parent="#AccordionExample" class="collapse"><div class="card-body"><div class="typography"><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></div></div></div></div></div></div><div class="element dnadesign__elemental__models__elementcontent block col-md-12 card"><div class="element-container"><div class="content-element__content"><div class="card-header" id="Heading2"><button data-target="#Collapse2" aria-controls="Collapse2" class="btn btn-link collapsed" type="button" data-toggle="collapse" aria-expanded="false"><h2 class="element__title">Content Header #2</h2></button></div><div id="Collapse2" class="collapse" aria-labelledby="Heading2" data-parent="#AccordionExample"><div class="card-body"><div class="typography"><p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p></div></div></div></div></div></div><div class="element dnadesign__elemental__models__elementcontent block col-md-12 card"><div class="element-container"><div class="content-element__content"><div class="card-header" id="Heading3"><button data-target="#Collapse3" aria-controls="Collapse3" class="btn btn-link collapsed" type="button" data-toggle="collapse" aria-expanded="false"><h2 class="element__title">Content Header #3</h2></button></div><div id="Collapse3" class="collapse" aria-labelledby="Heading3" data-parent="#AccordionExample"><div class="card-body"><div class="typography"><p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p></div></div></div></div></div></div><div class="element dnadesign__elemental__models__elementcontent block col-md-12 card"><div class="element-container"><div class="content-element__content"><div id="Heading4" class="card-header"><button data-target="#Collapse4" aria-controls="Collapse4" class="btn btn-link collapsed" type="button" data-toggle="collapse" aria-expanded="false"><h2 class="element__title">Content Header #2</h2></button></div><div id="Collapse4" class="collapse" aria-labelledby="Heading4" data-parent="#AccordionExample"><div class="card-body"><div class="typography"><p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p></div></div></div></div></div></div></div></div></section></main></div><footer id="Footer" class="footer site-footer"><div class="wrapper"><div class="container"><div class="row"><div class="col-sm-3">Col #1</div><div class="col-sm-3">Col #2</div><div class="col-sm-3">Col #3</div><div class="col-sm-3">Col #4</div></div></div></div><div class="footer"><div class="container"><div class="row"><div class="col-sm-8 d-flex"><div class="copyright">Copyright © 2019 - Tony Air (A2nt) Webpack Bootstrap 4 UI Kit</div><nav class="footer-nav"><ul class="list-inline d-flex"><li><a href="#">Sitemap</a></li><li><a href="#">Privacy Policy</a></li></ul></nav></div><div class="col-sm-4 text-right"><div class="credits footer__credits"><a href="https://github.com/a2nt" target="_blank" rel="nofollow"><span>Developed by</span> Tony Air</a></div></div></div></div></div></footer><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.0/css/all.css" media="all"><script src="js/app.js"></script></body></html>
|
||||
11
package.json
11
package.json
@ -28,7 +28,7 @@
|
||||
"bootstrap-confirmation2": "^4.1.0",
|
||||
"bootstrap-datepicker": "^1.9.0",
|
||||
"bootstrap-offcanvas": "^1.0.0",
|
||||
"bootstrap-select": "^1.13.10",
|
||||
"bootstrap-select": "github:snapappointments/bootstrap-select#v2.0.0-beta1",
|
||||
"bootstrap-table": "^1.14.2",
|
||||
"bootstrap-timepicker": "^0.5.2",
|
||||
"core-util-is": "^1.0.2",
|
||||
@ -110,8 +110,7 @@
|
||||
"block-no-empty": null,
|
||||
"color-no-invalid-hex": true,
|
||||
"comment-empty-line-before": [
|
||||
"always",
|
||||
{
|
||||
"always", {
|
||||
"ignore": [
|
||||
"stylelint-commands",
|
||||
"after-comment"
|
||||
@ -120,8 +119,7 @@
|
||||
],
|
||||
"declaration-colon-space-after": "always",
|
||||
"indentation": [
|
||||
4,
|
||||
{
|
||||
4, {
|
||||
"except": [
|
||||
"value"
|
||||
]
|
||||
@ -129,8 +127,7 @@
|
||||
],
|
||||
"max-empty-lines": 2,
|
||||
"rule-empty-line-before": [
|
||||
"always",
|
||||
{
|
||||
"always", {
|
||||
"except": [
|
||||
"first-nested"
|
||||
],
|
||||
|
||||
@ -1,5 +1,8 @@
|
||||
import $ from 'jquery';
|
||||
|
||||
import 'hammerjs/hammer';
|
||||
import 'jquery-hammerjs/jquery.hammer';
|
||||
|
||||
import Events from '../_events';
|
||||
|
||||
const CarouselUI = (($) => {
|
||||
@ -87,4 +90,4 @@ const CarouselUI = (($) => {
|
||||
return CarouselUI;
|
||||
})($);
|
||||
|
||||
export default CarouselUI;
|
||||
export default CarouselUI;
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
import $ from 'jquery';
|
||||
|
||||
import 'bootstrap-select/js/bootstrap-select';
|
||||
import 'bootstrap-select/dist/js/bootstrap-select';
|
||||
$.fn.selectpicker.Constructor.BootstrapVersion = '4';
|
||||
|
||||
import 'jquery.inputmask/dist/jquery.inputmask.bundle';
|
||||
|
||||
import Events from "../_events";
|
||||
@ -12,6 +14,8 @@ const FormBasics = (($) => {
|
||||
const NAME = 'jsFormBasics';
|
||||
const DATA_KEY = NAME;
|
||||
const $Html = $('html, body');
|
||||
const W = window;
|
||||
const D = document;
|
||||
|
||||
class FormBasics {
|
||||
|
||||
@ -27,6 +31,7 @@ const FormBasics = (($) => {
|
||||
const $fields = $element.find(Events.FORM_FIELDS);
|
||||
// init fields ui
|
||||
$fields.each((i, el) => {
|
||||
// skip some fields here
|
||||
new FormFieldUI(el);
|
||||
});
|
||||
|
||||
@ -51,12 +56,12 @@ const FormBasics = (($) => {
|
||||
|
||||
// wrap options
|
||||
if (maxOptions > 1) {
|
||||
$el.on('rendered.bs.select,changed.bs.select,refreshed.bs.select,loaded.bs.select', () => {
|
||||
const wrapOptions = () => {
|
||||
if (!$el.val().length) {
|
||||
return true;
|
||||
}
|
||||
|
||||
const $container = $el.parent().find('.filter-option-inner-inner');
|
||||
const $container = $el.parent().find('.dropdown-toggle .filter-option');
|
||||
const val = $container.text();
|
||||
const vals = val.split(separator);
|
||||
let html = '';
|
||||
@ -67,7 +72,7 @@ const FormBasics = (($) => {
|
||||
});
|
||||
|
||||
html += `<span class="option" data-val=${ $opt.attr('value') }>${ opt
|
||||
} <i class="fas fa-times btn-remove"></i></span>`;
|
||||
} <i class="fas fa-times btn-remove"></i></span>`;
|
||||
|
||||
});
|
||||
|
||||
@ -87,26 +92,25 @@ const FormBasics = (($) => {
|
||||
vals.splice(i, 1);
|
||||
$el.selectpicker('val', vals);
|
||||
}
|
||||
|
||||
wrapOptions();
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
$el.on('rendered.bs.select changed.bs.select refreshed.bs.select loaded.bs.select change', wrapOptions);
|
||||
wrapOptions();
|
||||
}
|
||||
|
||||
|
||||
// FIX: hidden picker
|
||||
$el.selectpicker('render');
|
||||
$el.selectpicker('refresh');
|
||||
$el.selectpicker('toggle');
|
||||
document.activeElement.blur();
|
||||
window.scroll(0, 0);
|
||||
|
||||
//$el.selectpicker('show');
|
||||
//$el.selectpicker('hide');
|
||||
|
||||
/*$el.parents('.field.dropdown').find('.dropdown-toggle').click();
|
||||
$el.parents('.field.dropdown').find('.dropdown-toggle').click();
|
||||
$el.parents('.field.dropdown').find('.dropdown-toggle').blur();*/
|
||||
});
|
||||
|
||||
// FIX: missing conflicting 'bootstrap/js/dist/dropdown' with bootstrap-select/dist/js/bootstrap-select
|
||||
$('[data-toggle="dropdown"]').on('click', (e) => {
|
||||
$(e.currentTarget).siblings('.dropdown-menu').toggleClass('show');
|
||||
});
|
||||
|
||||
$('.dropdown-menu a').on('click', (e) => {
|
||||
$(e.currentTarget).parents('.dropdown-menu').removeClass('show');
|
||||
});
|
||||
// /FIX
|
||||
|
||||
$fields.each((e, el) => {
|
||||
const $el = $(el);
|
||||
@ -128,7 +132,14 @@ const FormBasics = (($) => {
|
||||
const $el = $(e.currentTarget);
|
||||
const $parent = $el.parents('.radio');
|
||||
|
||||
$parent.siblings('.radio').removeClass('checked');
|
||||
$parent.siblings('.radio').each((i, el) => {
|
||||
const $el = $(el);
|
||||
|
||||
if (!$el.find('input').is(':checked')) {
|
||||
$el.removeClass('checked');
|
||||
}
|
||||
});
|
||||
|
||||
if ($el.is(':checked')) {
|
||||
$parent.addClass('checked');
|
||||
}
|
||||
@ -152,7 +163,7 @@ const FormBasics = (($) => {
|
||||
}
|
||||
|
||||
static _jQueryInterface() {
|
||||
return this.each(function() {
|
||||
return this.each(() => {
|
||||
// attach functionality to element
|
||||
const $element = $(this);
|
||||
let data = $element.data(DATA_KEY);
|
||||
@ -173,18 +184,13 @@ const FormBasics = (($) => {
|
||||
return FormBasics._jQueryInterface;
|
||||
};
|
||||
|
||||
const init = () => {
|
||||
$('form').jsFormBasics();
|
||||
};
|
||||
|
||||
// auto-apply
|
||||
$(window).on(`${Events.AJAX} ${Events.LOADED}`, () => {
|
||||
$('form').each((i, el) => {
|
||||
const $el = $(el);
|
||||
|
||||
// skip some forms
|
||||
if ($el.hasClass('no-validation')) {
|
||||
return true;
|
||||
}
|
||||
|
||||
$el.jsFormBasics();
|
||||
});
|
||||
$(W).on(`${Events.AJAX} ${Events.LOADED}`, () => {
|
||||
init();
|
||||
});
|
||||
|
||||
return FormBasics;
|
||||
|
||||
@ -45,7 +45,7 @@ const CroppieUI = (($) => {
|
||||
|
||||
$el.append(
|
||||
'<div class="cropper-wrap"><div class="cropper-container"></div>' +
|
||||
'<a href="#" class="btn-remove"><i class="fas fa-times"></i> Remove</a></div>'
|
||||
'<a href="#" class="btn-remove" style="display:none"><i class="fas fa-times"></i> Remove</a></div>'
|
||||
);
|
||||
//$el.append(ui.inputData);
|
||||
|
||||
@ -68,7 +68,8 @@ const CroppieUI = (($) => {
|
||||
this.readFile(e.currentTarget);
|
||||
});
|
||||
|
||||
$el.find('.btn-remove').on('click', (e) => {
|
||||
ui.$btnRemove = $el.find('.btn-remove');
|
||||
ui.$btnRemove.on('click', (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
ui.uploadCrop.removeClass('ready');
|
||||
@ -79,6 +80,10 @@ const CroppieUI = (($) => {
|
||||
|
||||
ui.uploadCropWrap.hide();
|
||||
});
|
||||
|
||||
if (ui.$el.find('img.croppie-image').length) {
|
||||
ui.$btnRemove.show();
|
||||
}
|
||||
}
|
||||
|
||||
readFile(input) {
|
||||
@ -97,6 +102,7 @@ const CroppieUI = (($) => {
|
||||
|
||||
ui.uploadCrop.show();
|
||||
ui.uploadCropWrap.show();
|
||||
ui.$btnRemove.show();
|
||||
}
|
||||
|
||||
reader.readAsDataURL(input.files[0]);
|
||||
|
||||
@ -46,7 +46,7 @@ const DatetimeUI = (($) => {
|
||||
if ($el.hasClass('time') || $el.attr('type') === 'time') {
|
||||
$el.attr('readonly', 'true');
|
||||
$el.timepicker($.extend({
|
||||
defaultTime: $el.data('default-time'),
|
||||
snapToStep: true,
|
||||
icons: {
|
||||
up: 'fas fa-chevron-up',
|
||||
down: 'fas fa-chevron-down',
|
||||
@ -54,7 +54,11 @@ const DatetimeUI = (($) => {
|
||||
}, $el.data())).on('show.timepicker', (e) => {
|
||||
const $el = $(e.currentTarget);
|
||||
const $dropdown = $Body.find('.bootstrap-timepicker-widget');
|
||||
$dropdown.find('tbody').append('<tr><td colspan="5"><a href="#" data-action="clear">Clear</a></td></tr>');
|
||||
|
||||
if (!$dropdown.find('[data-action="clear"]').length) {
|
||||
$dropdown.find('tbody').append('<tr><td colspan="5"><a href="#" data-action="clear">Clear</a></td></tr>');
|
||||
}
|
||||
|
||||
const $clearBtn = $dropdown.find('[data-action="clear"]');
|
||||
$clearBtn.on('click', (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
@ -13,7 +13,7 @@ const FormFieldUI = (($) => {
|
||||
const ui = this;
|
||||
|
||||
ui.$el = $(el);
|
||||
ui.$el.data(DATA_KEY, this);
|
||||
ui.$el.data(DATA_KEY, ui);
|
||||
ui.shown = true;
|
||||
//ui.$actions = ui.$el.parents('form').children('.btn-toolbar,.form-actions');
|
||||
|
||||
@ -22,7 +22,24 @@ const FormFieldUI = (($) => {
|
||||
'checked': ui.$el.is(':checked'),
|
||||
};
|
||||
|
||||
// bootstrap collapse integration
|
||||
ui.$el.parents('.optionset').not('.field').removeClass('collapse');
|
||||
ui.$collapse = ui.$el.parents('.field.collapse').not('.composite').first();
|
||||
if (ui.$collapse.length) {
|
||||
ui.$el.removeClass('collapse');
|
||||
|
||||
ui.$collapse.on('show.bs.collapse', (e) => {
|
||||
ui.show();
|
||||
});
|
||||
|
||||
ui.$collapse.on('hidden.bs.collapse', (e) => {
|
||||
ui.hide();
|
||||
});
|
||||
}
|
||||
|
||||
ui.$el.addClass(`${NAME}-active`);
|
||||
|
||||
return ui;
|
||||
}
|
||||
|
||||
// Public methods
|
||||
@ -32,7 +49,6 @@ const FormFieldUI = (($) => {
|
||||
|
||||
$el.removeClass(`${NAME}-active`);
|
||||
$.removeData(this._el, DATA_KEY);
|
||||
this._el = null;
|
||||
}
|
||||
|
||||
show() {
|
||||
@ -42,11 +58,15 @@ const FormFieldUI = (($) => {
|
||||
ui.restore();
|
||||
ui.shown = true;
|
||||
|
||||
if ($el.hasClass('collapse')) {
|
||||
$el.collapse('show');
|
||||
/*if (ui.$collapse.length) {
|
||||
ui.$collapse.collapse('show');
|
||||
}
|
||||
|
||||
$el.trigger('change');
|
||||
if ($el.hasClass('collapse')) {
|
||||
$el.collapse('show');
|
||||
}*/
|
||||
|
||||
$el.trigger('shown.' + NAME);
|
||||
}
|
||||
|
||||
hide() {
|
||||
@ -56,21 +76,22 @@ const FormFieldUI = (($) => {
|
||||
ui.wipe();
|
||||
ui.shown = false;
|
||||
|
||||
/*if (ui.$collapse.length) {
|
||||
ui.$collapse.collapse('hide');
|
||||
}
|
||||
|
||||
if ($el.hasClass('collapse')) {
|
||||
$el.collapse('hide');
|
||||
}
|
||||
|
||||
$el.trigger('change');
|
||||
$el.trigger('change');*/
|
||||
$el.trigger('hidden.' + NAME);
|
||||
}
|
||||
|
||||
wipe() {
|
||||
const ui = this;
|
||||
const $el = ui.$el;
|
||||
|
||||
if (!ui.shown) {
|
||||
return;
|
||||
}
|
||||
|
||||
ui.vals = {
|
||||
'name': $el.attr('name'),
|
||||
'val': $el.val(),
|
||||
@ -84,9 +105,10 @@ const FormFieldUI = (($) => {
|
||||
restore() {
|
||||
const ui = this;
|
||||
const $el = ui.$el;
|
||||
const checked = ui.vals['checked'];
|
||||
|
||||
$el.val(ui.vals['val']);
|
||||
$el.prop('checked', ui.vals['checked']);
|
||||
$el.prop('checked', checked);
|
||||
}
|
||||
|
||||
static _jQueryInterface() {
|
||||
|
||||
@ -83,7 +83,7 @@ const FormStorage = (($) => {
|
||||
$element.data(DATA_KEY).clear();
|
||||
});
|
||||
|
||||
$element.find('button,[type="submit"],[type="clear"]').on('click', () => {
|
||||
$element.find('.btn-toolbar,.form-actions').children('button,[type="submit"],[type="clear"]').on('click', () => {
|
||||
$element.data(DATA_KEY).clear();
|
||||
});
|
||||
|
||||
|
||||
@ -20,7 +20,7 @@ const FormValidateField = (($) => {
|
||||
// prevent browsers checks (will do it using JS)
|
||||
$element.attr('novalidate', 'novalidate');
|
||||
|
||||
$element.on('change', (e) => {
|
||||
$element.on('change focusout', (e) => {
|
||||
ui.validate(false);
|
||||
});
|
||||
|
||||
@ -45,19 +45,25 @@ const FormValidateField = (($) => {
|
||||
let valid = true;
|
||||
let msg = null;
|
||||
|
||||
const val = $el.val();
|
||||
|
||||
// browser checks + required
|
||||
if (!ui._element.checkValidity() ||
|
||||
($el.hasClass('required') && !$el.val().trim().length)
|
||||
($el.hasClass('required') && (!val.length || !val.trim().length ||
|
||||
ui.isHtml(val) && !$(val).text().length
|
||||
))
|
||||
) {
|
||||
valid = false;
|
||||
}
|
||||
|
||||
// validate URL
|
||||
if ($el.hasClass('url') && $el.val().trim().length && !this.valideURL($el.val())) {
|
||||
if ($el.hasClass('url') && val.length && !this.valideURL(val)) {
|
||||
valid = false;
|
||||
msg = 'URL must start with http:// or https://. For example: https://your-domain.com/';
|
||||
}
|
||||
|
||||
this.removeError();
|
||||
|
||||
// extra checks
|
||||
if (extraChecks) {
|
||||
extraChecks.forEach((check) => {
|
||||
@ -65,25 +71,27 @@ const FormValidateField = (($) => {
|
||||
});
|
||||
}
|
||||
|
||||
this.removeError();
|
||||
if (valid) {
|
||||
return true;
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
this.setError(scrollTo, msg);
|
||||
}, 500);
|
||||
this.setError(scrollTo, msg);
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
isHtml(str) {
|
||||
const doc = new DOMParser().parseFromString(str, "text/html");
|
||||
return Array.from(doc.body.childNodes).some(node => node.nodeType === 1);
|
||||
}
|
||||
|
||||
valideURL(str) {
|
||||
const pattern = new RegExp('^(https?:\\/\\/){1}' + // protocol
|
||||
'((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.?)+[a-z]{2,}|' + // domain name
|
||||
'((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address
|
||||
'(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path
|
||||
'(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
|
||||
'(\\#[-a-z\\d_]*)?$', 'i'); // fragment locator
|
||||
'((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.?)+[a-z]{2,}|' + // domain name
|
||||
'((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address
|
||||
'(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path
|
||||
'(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
|
||||
'(\\#[-a-z\\d_]*)?$', 'i'); // fragment locator
|
||||
return pattern.test(str);
|
||||
}
|
||||
|
||||
|
||||
@ -31,6 +31,11 @@ const FormValidate = (($) => {
|
||||
|
||||
// init fields validation
|
||||
$fields.each((i, el) => {
|
||||
// skip some fields here
|
||||
if ($(el).attr('role') === 'combobox') {
|
||||
return;
|
||||
}
|
||||
|
||||
new FormValidateField(el);
|
||||
});
|
||||
|
||||
|
||||
@ -25,16 +25,19 @@ const VideoPreviewUI = (($) => {
|
||||
|
||||
ui.$_el.data(DATA_KEY, this);
|
||||
const href = ui.$_el.attr('href') || ui.$_el.data('href');
|
||||
const YouTubeGetID = (url) => {
|
||||
url = url.split(/(vi\/|v%3D|v=|\/v\/|youtu\.be\/|\/embed\/)/);
|
||||
return undefined !== url[2] ? url[2].split(/[^0-9a-z_\-]/i)[0] : url[0];
|
||||
};
|
||||
|
||||
|
||||
let video;
|
||||
|
||||
if (video = href.match(/(youtube|youtube-nocookie|youtu|vimeo)\.(com|be)\/(watch\?v=([\w-]+)|([\w-]+))/)) {
|
||||
let video_id;
|
||||
|
||||
if (video[1] === 'youtube' || video[1] === 'youtube-nocookie') {
|
||||
video_id = video[4];
|
||||
}
|
||||
if (video[1] === 'youtu') {
|
||||
video_id = video[3];
|
||||
if (video[1] === 'youtube' || video[1] === 'youtube-nocookie' || video[1] === 'youtu') {
|
||||
video_id = YouTubeGetID(href);
|
||||
}
|
||||
|
||||
if (video[1] == 'vimeo') {
|
||||
|
||||
@ -5,6 +5,9 @@ import $ from 'jquery';
|
||||
import 'hammerjs/hammer';
|
||||
import 'jquery-hammerjs/jquery.hammer';
|
||||
|
||||
//import Confirmation from 'bootstrap-confirmation2/dist/bootstrap-confirmation';
|
||||
//import Table from 'bootstrap-table/dist/bootstrap-table';
|
||||
|
||||
// Routie
|
||||
import 'pouchdb/dist/pouchdb';
|
||||
import './_components/routes/index';
|
||||
@ -12,17 +15,21 @@ import './_components/routes/index';
|
||||
import Events from './_events';
|
||||
import Spinner from './_components/_ui.spinner';
|
||||
|
||||
import './_components/_ui.video.preview';
|
||||
import './_components/_ui.carousel';
|
||||
import './_components/_ui.menu';
|
||||
|
||||
|
||||
import FormBasics from './_components/_ui.form.basics';
|
||||
import FormDatetime from './_components/_ui.form.datetime';
|
||||
//import FormToggleUI from './_components/_ui.form.fields.toggle';
|
||||
//import FormDatetime from './_components/_ui.form.datetime';
|
||||
import FormStepped from './_components/_ui.form.stepped';
|
||||
import FormValidate from './_components/_ui.form.validate';
|
||||
import FormStorage from './_components/_ui.form.storage';
|
||||
//import FormCroppie from './_components/_ui.form.croppie';
|
||||
|
||||
import AjaxUI from './_components/_ui.ajax';
|
||||
import NoCaptcha from './_components/_ui.nocaptcha';
|
||||
|
||||
import SmoothScroll from 'smooth-scroll';
|
||||
const smoothScroll = SmoothScroll();
|
||||
@ -145,7 +152,9 @@ const MainUI = (($) => {
|
||||
$('a.offline').addClass('offline-available');
|
||||
}
|
||||
|
||||
this.loadImages();
|
||||
if (typeof AjaxUI !== 'undefined') {
|
||||
this.loadImages();
|
||||
}
|
||||
|
||||
// mark external links
|
||||
$('a.external,a[rel="external"]').attr('target', '_blank');
|
||||
|
||||
@ -7,7 +7,10 @@ import 'bootstrap/js/dist/alert';
|
||||
import 'bootstrap/js/dist/button';
|
||||
import 'bootstrap/js/dist/carousel';
|
||||
import 'bootstrap/js/dist/collapse';
|
||||
import 'bootstrap/js/dist/dropdown';
|
||||
|
||||
// conflicting with bootstrap-select/dist/js/bootstrap-select
|
||||
//import 'bootstrap/js/dist/dropdown';
|
||||
|
||||
import 'bootstrap/js/dist/modal';
|
||||
import 'bootstrap/js/dist/tooltip';
|
||||
import 'bootstrap/js/dist/popover';
|
||||
|
||||
@ -2,6 +2,14 @@
|
||||
* Bootstrap carousel improvement
|
||||
*/
|
||||
|
||||
.carousel-item {
|
||||
&.active {
|
||||
display: flex !important;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
.carousel-control-prev,
|
||||
.carousel-control-next {
|
||||
z-index: 2;
|
||||
|
||||
@ -2,6 +2,9 @@
|
||||
* Your custom variables
|
||||
*/
|
||||
|
||||
$grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1390px, xxxl: 1590px);
|
||||
$container-max-widths: (sm: 540px, md: 720px, lg: 960px, xl: 1140px, xxl: 1330px, xxxl: 1560px);
|
||||
|
||||
$font-family-base: "Lato", sans-serif;
|
||||
|
||||
$grid-gutter-height: 8rem;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user