tonyair/webpack-bootstrap-ui-kit
1
0
Fork 0
mirror of https://github.com/a2nt/webpack-bootstrap-ui-kit.git synced 2024-10-22 11:05:45 +02:00
Code Issues Projects Releases Wiki Activity

FIX: js liniting

Browse Source
This commit is contained in:
Tony Air 2019-12-10 20:23:32 +07:00
parent a4e2bfe5a1
commit f8c5f5df35
19 changed files with 1267 additions and 1273 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.eslintignore
View File

@ -1 +1 @@
/site/client /src/thirdparty

5
dist/index.html vendored
View File

@ -1 +1,4 @@
<!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 data-default-lng="0" data-default-lat="0"><noscript><div class="main-bn">Please, enable javascript.</div></noscript><div id="PageTopAnchor"></div><div class="flyout-FlyoutUI"><i class="fas fa-times flyout-FlyoutUI__close"></i><h2 class="flyout-FlyoutUI__title"><i class="fas fa-asterisk"></i> Flyout Demo</h2><div class="flyout-FlyoutUI__content typography"><p>Lipsum .... .... ....</p></div></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 dropdown-hover"><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="Lightbox" class="element dnadesign__elemental__models__elementcontent"><div class="element-container container"><div class="content-element__content"><h2 class="content-element__title">Lightbox Demo</h2><div class="typography"><p><a href="../src/img/photo1.png" data-toggle="lightbox" data-lightbox-gallery="demo" data-title="That's first link">Click me to start</a></p><p><a href="../src/img/photo2.jpg" data-toggle="lightbox" data-lightbox-gallery="demo">Use data-toggle="lightbox" attribute to attach lightbox action and href to specify URL.</a></p><p><a href="../src/img/photo1.png" data-toggle="lightbox" data-lightbox-gallery="demo" data-title="Use data-title attribute to specify lightbox title">Use data-lightbox-gallery="YOUR_GALLERY_NAME" to group ligthboxes and use next/prev arrows</a></p><p data-toggle="lightbox" data-href="https://youtu.be/GgnClrx8N2k" data-lightbox-gallery="demo" data-title="Yes you can link vimeo and youtube videos as long as AJAX content">You can use data-href attribute to specify link and attach lightbox to another element</p></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><section id="MapElement" class="element site__elements__mapelement"><div class="element-container container"><h2 class="content-element__title">Find Location</h2><div class="mapAPI-map-container" data-map-zoom="12" data-key="" data-map-style="mapbox://styles/mapbox/streets-v9" data-geojson="{&quot;type&quot;:&quot;MarkerCollection&quot;,&quot;features&quot;:[{&quot;id&quot;:4,&quot;type&quot;:&quot;Feature&quot;,&quot;icon&quot;:&quot;&lt;i class=\&quot;fas fa-map-marker-alt\&quot;&gt;&lt;\/i&gt;&quot;,&quot;properties&quot;:{&quot;content&quot;:&quot;&lt;div id=\&quot;MapPin4\&quot; data-id=\&quot;4\&quot; class=\&quot;location\&quot;&gt;\n &lt;div class=\&quot;fn\&quot;&gt;Office #1&lt;\/div&gt;\n &lt;div class=\&quot;addr\&quot;&gt;17 Lakeside Drive&lt;\/div&gt;\n \n \n \n &lt;div class=\&quot;d-none\&quot;&gt; U&lt;\/div&gt;\n \n \n \n &lt;div class=\&quot;dir-link\&quot;&gt;\n &lt;a href=\&quot;https:\/\/www.google.com\/maps\/dir\/Current+Location\/40.8827743,-74.4276612\&quot; target=\&quot;_blank\&quot;&gt;Get Directions &amp;raquo;&lt;\/a&gt;\n &lt;\/div&gt;\n&lt;\/div&gt;\n&quot;},&quot;geometry&quot;:{&quot;type&quot;:&quot;Point&quot;,&quot;coordinates&quot;:[-74.4276612,40.8827743]}},{&quot;id&quot;:3,&quot;type&quot;:&quot;Feature&quot;,&quot;icon&quot;:&quot;&lt;i class=\&quot;fas fa-map-marker-alt\&quot;&gt;&lt;\/i&gt;&quot;,&quot;properties&quot;:{&quot;content&quot;:&quot;&lt;div id=\&quot;MapPin3\&quot; data-id=\&quot;3\&quot; class=\&quot;location\&quot;&gt;\n &lt;div class=\&quot;fn\&quot;&gt;Office #2&lt;\/div&gt;\n &lt;div class=\&quot;addr\&quot;&gt;Flower Hill Cemetery&lt;\/div&gt;\n \n \n \n &lt;div class=\&quot;d-none\&quot;&gt; N&lt;\/div&gt;\n \n \n \n &lt;div class=\&quot;dir-link\&quot;&gt;\n &lt;a href=\&quot;https:\/\/www.google.com\/maps\/dir\/Current+Location\/40.7884708,-74.0249253\&quot; target=\&quot;_blank\&quot;&gt;Get Directions &amp;raquo;&lt;\/a&gt;\n &lt;\/div&gt;\n&lt;\/div&gt;\n&quot;},&quot;geometry&quot;:{&quot;type&quot;:&quot;Point&quot;,&quot;coordinates&quot;:[-74.0249253,40.7884708]}},{&quot;id&quot;:2,&quot;type&quot;:&quot;Feature&quot;,&quot;icon&quot;:&quot;&lt;i class=\&quot;fas fa-map-marker-alt\&quot;&gt;&lt;\/i&gt;&quot;,&quot;properties&quot;:{&quot;content&quot;:&quot;&lt;div id=\&quot;MapPin2\&quot; data-id=\&quot;2\&quot; class=\&quot;location\&quot;&gt;\n &lt;div class=\&quot;fn\&quot;&gt;Office #3&lt;\/div&gt;\n &lt;div class=\&quot;addr\&quot;&gt;555 Phoenix Road&lt;\/div&gt;\n \n \n \n &lt;div class=\&quot;d-none\&quot;&gt; U&lt;\/div&gt;\n \n \n \n &lt;div class=\&quot;dir-link\&quot;&gt;\n &lt;a href=\&quot;https:\/\/www.google.com\/maps\/dir\/Current+Location\/40.8527479,-78.2475576\&quot; target=\&quot;_blank\&quot;&gt;Get Directions &amp;raquo;&lt;\/a&gt;\n &lt;\/div&gt;\n&lt;\/div&gt;\n&quot;},&quot;geometry&quot;:{&quot;type&quot;:&quot;Point&quot;,&quot;coordinates&quot;:[-78.2475576,40.8527479]}},{&quot;id&quot;:1,&quot;type&quot;:&quot;Feature&quot;,&quot;icon&quot;:&quot;&lt;i class=\&quot;fas fa-map-marker-alt\&quot;&gt;&lt;\/i&gt;&quot;,&quot;properties&quot;:{&quot;content&quot;:&quot;&lt;div id=\&quot;MapPin1\&quot; data-id=\&quot;1\&quot; class=\&quot;location\&quot;&gt;\n &lt;div class=\&quot;fn\&quot;&gt;Office #4&lt;\/div&gt;\n &lt;div class=\&quot;addr\&quot;&gt;15 East Hadley Road&lt;\/div&gt;\n \n \n \n &lt;div class=\&quot;d-none\&quot;&gt; U&lt;\/div&gt;\n \n \n \n &lt;div class=\&quot;dir-link\&quot;&gt;\n &lt;a href=\&quot;https:\/\/www.google.com\/maps\/dir\/Current+Location\/42.3297023,-72.5552186\&quot; target=\&quot;_blank\&quot;&gt;Get Directions &amp;raquo;&lt;\/a&gt;\n &lt;\/div&gt;\n&lt;\/div&gt;\n&quot;},&quot;geometry&quot;:{&quot;type&quot;:&quot;Point&quot;,&quot;coordinates&quot;:[-72.5552186,42.3297023]}}]}" data-fly-to-marker="true" data-fly-to-bounds="false"><div class="mapAPI-map"></div></div><div class="locations"><div class="row"><div class="col-sm-3"><div id="MapPin4" data-id="4" class="location"><div class="fn">Office #1</div><div class="addr">17 Lakeside Drive</div><div class="d-none">U</div><div class="dir-link"><a href="https://www.google.com/maps/dir/Current+Location/40.8827743,-74.4276612" target="_blank">Get Directions &raquo;</a></div></div></div><div class="col-sm-3"><div id="MapPin3" data-id="3" class="location"><div class="fn">Office #2</div><div class="addr">Flower Hill Cemetery</div><div class="d-none">N</div><div class="dir-link"><a href="https://www.google.com/maps/dir/Current+Location/40.7884708,-74.0249253" target="_blank">Get Directions &raquo;</a></div></div></div><div class="col-sm-3"><div id="MapPin2" data-id="2" class="location"><div class="fn">Office #3</div><div class="addr">555 Phoenix Road</div><div class="d-none">U</div><div class="dir-link"><a href="https://www.google.com/maps/dir/Current+Location/40.8527479,-78.2475576" target="_blank">Get Directions &raquo;</a></div></div></div><div class="col-sm-3"><div id="MapPin1" data-id="1" class="location"><div class="fn">Office #4</div><div class="addr">15 East Hadley Road</div><div class="d-none">U</div><div class="dir-link"><a href="https://www.google.com/maps/dir/Current+Location/42.3297023,-72.5552186" target="_blank">Get Directions &raquo;</a></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 &copy; 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 data-default-lng="0" data-default-lat="0"><noscript><div class="main-bn">Please, enable javascript.</div></noscript><div id="PageTopAnchor"></div><div class="flyout-FlyoutUI"><i class="fas fa-times flyout-FlyoutUI__close"></i><h2 class="flyout-FlyoutUI__title"><i class="fas fa-asterisk"></i> Flyout Demo</h2><div class="flyout-FlyoutUI__content typography"><p>Lipsum .... .... ....</p></div></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 dropdown-hover"><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="Lightbox" class="element dnadesign__elemental__models__elementcontent"><div class="element-container container"><div class="content-element__content"><h2 class="content-element__title">Lightbox Demo</h2><div class="typography"><p><a href="../src/img/photo1.png" data-toggle="lightbox" data-lightbox-gallery="demo" data-title="That's first link">Click me to start</a></p><p><a href="../src/img/photo2.jpg" data-toggle="lightbox" data-lightbox-gallery="demo">Use data-toggle="lightbox" attribute to attach lightbox action and href to specify URL.</a></p><p><a href="../src/img/photo1.png" data-toggle="lightbox" data-lightbox-gallery="demo" data-title="Use data-title attribute to specify lightbox title">Use data-lightbox-gallery="YOUR_GALLERY_NAME" to group ligthboxes and use next/prev arrows</a></p><p data-toggle="lightbox" data-href="https://youtu.be/GgnClrx8N2k" data-lightbox-gallery="demo" data-title="Yes you can link vimeo and youtube videos as long as AJAX content">You can use data-href attribute to specify link and attach lightbox to another element</p></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 Demo</h2><div class="typography"><h3><i class="fas fa-search"></i> Quick start</h3><ol><li><p>Clone quick start repository</p><pre>git clone https://github.com/a2nt/webpack-bootstrap-ui-kit-quick-start.git</pre></li><li><p>Install npm packages</p><pre>
cd ./webpack-bootstrap-ui-kit-quick-start.git
npm install
</pre></li><li><p>Edit ./src files</p></li><li><p>Start development server at https://127.0.0.1:8001/:</p><pre>yarn start</pre><p>Compile:</p><pre>yarn build</pre></li></ol><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><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">Accordion demo</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><section id="MapElement" class="element site__elements__mapelement"><div class="element-container container"><h2 class="content-element__title">Find Location</h2><div class="typography"><p>Use _consts.js to change Google Maps to Mapbox.</p></div><div class="mapAPI-map-container" data-map-zoom="12" data-key="" data-map-style="mapbox://styles/mapbox/streets-v9" data-geojson="{&quot;type&quot;:&quot;MarkerCollection&quot;,&quot;features&quot;:[{&quot;id&quot;:4,&quot;type&quot;:&quot;Feature&quot;,&quot;icon&quot;:&quot;&lt;i class=\&quot;fas fa-map-marker-alt\&quot;&gt;&lt;\/i&gt;&quot;,&quot;properties&quot;:{&quot;content&quot;:&quot;&lt;div id=\&quot;MapPin4\&quot; data-id=\&quot;4\&quot; class=\&quot;location\&quot;&gt;\n &lt;div class=\&quot;fn\&quot;&gt;Office #1&lt;\/div&gt;\n &lt;div class=\&quot;addr\&quot;&gt;17 Lakeside Drive&lt;\/div&gt;\n \n \n \n &lt;div class=\&quot;d-none\&quot;&gt; U&lt;\/div&gt;\n \n \n \n &lt;div class=\&quot;dir-link\&quot;&gt;\n &lt;a href=\&quot;https:\/\/www.google.com\/maps\/dir\/Current+Location\/40.8827743,-74.4276612\&quot; target=\&quot;_blank\&quot;&gt;Get Directions &amp;raquo;&lt;\/a&gt;\n &lt;\/div&gt;\n&lt;\/div&gt;\n&quot;},&quot;geometry&quot;:{&quot;type&quot;:&quot;Point&quot;,&quot;coordinates&quot;:[-74.4276612,40.8827743]}},{&quot;id&quot;:3,&quot;type&quot;:&quot;Feature&quot;,&quot;icon&quot;:&quot;&lt;i class=\&quot;fas fa-map-marker-alt\&quot;&gt;&lt;\/i&gt;&quot;,&quot;properties&quot;:{&quot;content&quot;:&quot;&lt;div id=\&quot;MapPin3\&quot; data-id=\&quot;3\&quot; class=\&quot;location\&quot;&gt;\n &lt;div class=\&quot;fn\&quot;&gt;Office #2&lt;\/div&gt;\n &lt;div class=\&quot;addr\&quot;&gt;Flower Hill Cemetery&lt;\/div&gt;\n \n \n \n &lt;div class=\&quot;d-none\&quot;&gt; N&lt;\/div&gt;\n \n \n \n &lt;div class=\&quot;dir-link\&quot;&gt;\n &lt;a href=\&quot;https:\/\/www.google.com\/maps\/dir\/Current+Location\/40.7884708,-74.0249253\&quot; target=\&quot;_blank\&quot;&gt;Get Directions &amp;raquo;&lt;\/a&gt;\n &lt;\/div&gt;\n&lt;\/div&gt;\n&quot;},&quot;geometry&quot;:{&quot;type&quot;:&quot;Point&quot;,&quot;coordinates&quot;:[-74.0249253,40.7884708]}},{&quot;id&quot;:2,&quot;type&quot;:&quot;Feature&quot;,&quot;icon&quot;:&quot;&lt;i class=\&quot;fas fa-map-marker-alt\&quot;&gt;&lt;\/i&gt;&quot;,&quot;properties&quot;:{&quot;content&quot;:&quot;&lt;div id=\&quot;MapPin2\&quot; data-id=\&quot;2\&quot; class=\&quot;location\&quot;&gt;\n &lt;div class=\&quot;fn\&quot;&gt;Office #3&lt;\/div&gt;\n &lt;div class=\&quot;addr\&quot;&gt;555 Phoenix Road&lt;\/div&gt;\n \n \n \n &lt;div class=\&quot;d-none\&quot;&gt; U&lt;\/div&gt;\n \n \n \n &lt;div class=\&quot;dir-link\&quot;&gt;\n &lt;a href=\&quot;https:\/\/www.google.com\/maps\/dir\/Current+Location\/40.8527479,-78.2475576\&quot; target=\&quot;_blank\&quot;&gt;Get Directions &amp;raquo;&lt;\/a&gt;\n &lt;\/div&gt;\n&lt;\/div&gt;\n&quot;},&quot;geometry&quot;:{&quot;type&quot;:&quot;Point&quot;,&quot;coordinates&quot;:[-78.2475576,40.8527479]}},{&quot;id&quot;:1,&quot;type&quot;:&quot;Feature&quot;,&quot;icon&quot;:&quot;&lt;i class=\&quot;fas fa-map-marker-alt\&quot;&gt;&lt;\/i&gt;&quot;,&quot;properties&quot;:{&quot;content&quot;:&quot;&lt;div id=\&quot;MapPin1\&quot; data-id=\&quot;1\&quot; class=\&quot;location\&quot;&gt;\n &lt;div class=\&quot;fn\&quot;&gt;Office #4&lt;\/div&gt;\n &lt;div class=\&quot;addr\&quot;&gt;15 East Hadley Road&lt;\/div&gt;\n \n \n \n &lt;div class=\&quot;d-none\&quot;&gt; U&lt;\/div&gt;\n \n \n \n &lt;div class=\&quot;dir-link\&quot;&gt;\n &lt;a href=\&quot;https:\/\/www.google.com\/maps\/dir\/Current+Location\/42.3297023,-72.5552186\&quot; target=\&quot;_blank\&quot;&gt;Get Directions &amp;raquo;&lt;\/a&gt;\n &lt;\/div&gt;\n&lt;\/div&gt;\n&quot;},&quot;geometry&quot;:{&quot;type&quot;:&quot;Point&quot;,&quot;coordinates&quot;:[-72.5552186,42.3297023]}}]}" data-fly-to-marker="true" data-fly-to-bounds="false"><div class="mapAPI-map"></div></div><div class="locations"><div class="row"><div class="col-sm-3"><div id="MapPin4" data-id="4" class="location"><div class="fn">Office #1</div><div class="addr">17 Lakeside Drive</div><div class="d-none">U</div><div class="dir-link"><a href="https://www.google.com/maps/dir/Current+Location/40.8827743,-74.4276612" target="_blank">Get Directions &raquo;</a></div></div></div><div class="col-sm-3"><div id="MapPin3" data-id="3" class="location"><div class="fn">Office #2</div><div class="addr">Flower Hill Cemetery</div><div class="d-none">N</div><div class="dir-link"><a href="https://www.google.com/maps/dir/Current+Location/40.7884708,-74.0249253" target="_blank">Get Directions &raquo;</a></div></div></div><div class="col-sm-3"><div id="MapPin2" data-id="2" class="location"><div class="fn">Office #3</div><div class="addr">555 Phoenix Road</div><div class="d-none">U</div><div class="dir-link"><a href="https://www.google.com/maps/dir/Current+Location/40.8527479,-78.2475576" target="_blank">Get Directions &raquo;</a></div></div></div><div class="col-sm-3"><div id="MapPin1" data-id="1" class="location"><div class="fn">Office #4</div><div class="addr">15 East Hadley Road</div><div class="d-none">U</div><div class="dir-link"><a href="https://www.google.com/maps/dir/Current+Location/42.3297023,-72.5552186" target="_blank">Get Directions &raquo;</a></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 &copy; 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>

2
dist/js/app.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/js/app.js.map vendored
View File

File diff suppressed because one or more lines are too long

19
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@a2nt/ss-bootstrap-ui-webpack-boilerplate", "name": "@a2nt/ss-bootstrap-ui-webpack-boilerplate",
"version": "1.1.6", "version": "1.1.7",
"author": "Tony Air <tony@twma.pro>", "author": "Tony Air <tony@twma.pro>",
"license": "MIT", "license": "MIT",
"description": "This UI Kit allows you to build Bootstrap 4 webapp with some extra UI features. It's easy to extend and easy to convert HTML templates to CMS templates.", "description": "This UI Kit allows you to build Bootstrap 4 webapp with some extra UI features. It's easy to extend and easy to convert HTML templates to CMS templates.",
@ -17,10 +17,10 @@
"start": "cross-env NODE_ENV=development webpack-dev-server --https -d --config webpack.config.js", "start": "cross-env NODE_ENV=development webpack-dev-server --https -d --config webpack.config.js",
"dash": "cross-env NODE_ENV=development webpack-dashboard -- webpack-dev-server --config webpack.config.js", "dash": "cross-env NODE_ENV=development webpack-dashboard -- webpack-dev-server --config webpack.config.js",
"build": "cross-env NODE_ENV=production webpack -p --config webpack.config.js --progress", "build": "cross-env NODE_ENV=production webpack -p --config webpack.config.js --progress",
"lint:check": "eslint ./app/client/src --config .eslintrc && sass-lint ./app/client/src --config .sasslintrc -v -q", "lint:check": "eslint ./src --config .eslintrc && sass-lint ./src --config .sasslintrc -v -q",
"lint:fix": "eslint ./app/client/src --config .eslintrc --fix && sass-lint ./app/client/src --config .sasslintrc -v -q --fix", "lint:fix": "eslint ./src --config .eslintrc --fix && sass-lint ./src --config .sasslintrc -v -q --fix",
"lint:js": "eslint ./app/client/src --config .eslintrc", "lint:js": "eslint ./src --config .eslintrc",
"lint:sass": "sass-lint ./app/client/src --config .sasslintrc -v -q", "lint:sass": "sass-lint ./src --config .sasslintrc -v -q",
"prebuild": "yarn lint:fix && rimraf dist", "prebuild": "yarn lint:fix && rimraf dist",
"prepare": "yarn lint:fix && yarn build" "prepare": "yarn lint:fix && yarn build"
}, },
@ -124,8 +124,7 @@
"block-no-empty": null, "block-no-empty": null,
"color-no-invalid-hex": true, "color-no-invalid-hex": true,
"comment-empty-line-before": [ "comment-empty-line-before": [
"always", "always", {
{
"ignore": [ "ignore": [
"stylelint-commands", "stylelint-commands",
"after-comment" "after-comment"
@ -134,8 +133,7 @@
], ],
"declaration-colon-space-after": "always", "declaration-colon-space-after": "always",
"indentation": [ "indentation": [
4, 4, {
{
"except": [ "except": [
"value" "value"
] ]
@ -143,8 +141,7 @@
], ],
"max-empty-lines": 2, "max-empty-lines": 2,
"rule-empty-line-before": [ "rule-empty-line-before": [
"always", "always", {
{
"except": [ "except": [
"first-nested" "first-nested"
], ],

2
src/html/Elements/Accordion.html
View File

@ -1,4 +1,4 @@
<h2 class="list-element__title">Content Header</h2> <h2 class="list-element__title">Accordion demo</h2>
<div class="typography"> <div class="typography">
Some content ... Some content ...
</div> </div>

211
src/html/Elements/Content.html
View File

@ -1,109 +1,112 @@
<div class="content-element__content "> <div class="content-element__content ">
<h2 class="content-element__title">Content Header</h2> <h2 class="content-element__title">Content Demo</h2>
<div class="typography"> <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> <h3><i class="fas fa-search"></i> Quick start</h3>
<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> <ol>
<li> <li>
First <p>Clone quick start repository</p>
<ul> <pre>git clone https://github.com/a2nt/webpack-bootstrap-ui-kit-quick-start.git</pre>
<li>First</li> </li>
<li> <li>
Second <p>Install npm packages</p>
<ol> <pre>
<li>First</li> cd ./webpack-bootstrap-ui-kit-quick-start.git
<li>Second</li> npm install
<li>Third</li> </pre>
</ol> </li>
<ul> <li>
<li>First</li> <p>Edit ./src files</p>
<li>Second</li> </li>
<li>Third</li> <li>
</ul> <p>Start development server at https://127.0.0.1:8001/:</p>
</li> <pre>yarn start</pre>
<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> <p>Compile:</p>
</ul> <pre>yarn build</pre>
</li> </li>
<li> </ol>
<p>{paragraph} Second</p> <h2><i class="fas fa-search"></i> Header #2 <i class="fas fa-search"></i></h2>
<p>{paragraph} Second #2</p> <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>
</li> <ol>
<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> <li>
</ol> First
<h2 class="text-center">Table #1: Default</h2> <ul>
<table> <li>First</li>
<thead> <li>
<tr> Second
<th>#1</th> <ol>
<th>#2</th> <li>First</li>
<th>#3</th> <li>Second</li>
</tr> <li>Third</li>
</thead> </ol>
<tbody> <ul>
<tr> <li>First</li>
<th>#1-1</th> <li>Second</li>
<td>#1-2</td> <li>Third</li>
<td>#1-3</td> </ul>
</tr> </li>
<tr> <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>
<td>#2-1</td> </ul>
<td>#2-2</td> </li>
<td>#2-3</td> <li>
</tr> <p>{paragraph} Second</p>
<tr> <p>{paragraph} Second #2</p>
<th>#3-1</th> </li>
<td>#3-2</td> <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>
<td>#3-3</td> </ol>
</tr> <h2 class="text-center">Table #1: Default</h2>
</tbody> <table>
</table> <thead>
<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> <tr>
<h2 class="text-center">Table #2: Border-less</h2> <th>#1</th>
<table class="table-none"> <th>#2</th>
<thead> <th>#3</th>
<tr> </tr>
<th>#1</th> </thead>
<th>#2</th> <tbody>
<th>#3</th> <tr>
</tr> <th>#1-1</th>
</thead> <td>#1-2</td>
<tbody> <td>#1-3</td>
<tr> </tr>
<th>#1-1</th> <tr>
<td>#1-2</td> <td>#2-1</td>
<td>#1-3</td> <td>#2-2</td>
</tr> <td>#2-3</td>
<tr> </tr>
<td>#2-1</td> <tr>
<td>#2-2</td> <th>#3-1</th>
<td>#2-3</td> <td>#3-2</td>
</tr> <td>#3-3</td>
<tr> </tr>
<th>#3-1</th> </tbody>
<td>#3-2</td> </table>
<td>#3-3</td> <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>
</tr> <h2 class="text-center">Table #2: Border-less</h2>
</tbody> <table class="table-none">
</table> <thead>
</div> <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>

3
src/html/Elements/Map.html
View File

@ -1,4 +1,7 @@
<h2 class="content-element__title">Find Location</h2> <h2 class="content-element__title">Find Location</h2>
<div class="typography">
<p>Use _consts.js to change Google Maps to Mapbox.</p>
</div>
<div <div
class="mapAPI-map-container" class="mapAPI-map-container"
data-map-zoom="12" data-map-zoom="12"

14
src/js/_components/_ui.cookie.js
View File

@ -15,13 +15,13 @@ const CookieUI = (($) => {
static set(name, value, days = 7, path = "/") { static set(name, value, days = 7, path = "/") {
const expires = new Date(Date.now() + days * 864e5).toUTCString(); const expires = new Date(Date.now() + days * 864e5).toUTCString();
D.cookie = D.cookie =
name + `${name
"=" + }=${
encodeURIComponent(value) + encodeURIComponent(value)
"; expires=" + }; expires=${
expires + expires
"; path=" + }; path=${
path; path}`;
} }
} }

4
src/js/_components/_ui.video.preview.js
View File

@ -26,8 +26,8 @@ const VideoPreviewUI = (($) => {
ui.$_el.data(DATA_KEY, this); ui.$_el.data(DATA_KEY, this);
const href = ui.$_el.attr('href') || ui.$_el.data('href'); const href = ui.$_el.attr('href') || ui.$_el.data('href');
const YouTubeGetID = (url) => { const YouTubeGetID = (url) => {
url = url.split(/(vi\/|v%3D|v=|\/v\/|youtu\.be\/|\/embed\/)/); parsedURL = url.split(/(vi\/|v%3D|v=|\/v\/|youtu\.be\/|\/embed\/)/);
return undefined !== url[2] ? url[2].split(/[^0-9a-z_\-]/i)[0] : url[0]; return undefined !== parsedURL[2] ? parsedURL[2].split(/[^0-9a-z_-]/i)[0] : parsedURL[0];
}; };

22
src/js/_components/drivers/_map.google.font-icons.js
View File

@ -18,7 +18,7 @@ const Obj = {
ui.onClick = options.onClick; ui.onClick = options.onClick;
ui.onMouseOver = options.onMouseOver; ui.onMouseOver = options.onMouseOver;
ui.isBoolean = arg => { ui.isBoolean = (arg) => {
if (typeof arg === 'boolean') { if (typeof arg === 'boolean') {
return true; return true;
} else { } else {
@ -26,7 +26,7 @@ const Obj = {
} }
}; };
ui.isNotUndefined = arg => { ui.isNotUndefined = (arg) => {
if (typeof arg !== 'undefined') { if (typeof arg !== 'undefined') {
return true; return true;
} else { } else {
@ -34,7 +34,7 @@ const Obj = {
} }
}; };
ui.hasContent = arg => { ui.hasContent = (arg) => {
if (arg.length > 0) { if (arg.length > 0) {
return true; return true;
} else { } else {
@ -42,7 +42,7 @@ const Obj = {
} }
}; };
ui.isString = arg => { ui.isString = (arg) => {
if (typeof arg === 'string') { if (typeof arg === 'string') {
return true; return true;
} else { } else {
@ -50,7 +50,7 @@ const Obj = {
} }
}; };
ui.isFunction = arg => { ui.isFunction = (arg) => {
if (typeof arg === 'function') { if (typeof arg === 'function') {
return true; return true;
} else { } else {
@ -99,13 +99,13 @@ const Obj = {
ui.getPanes().overlayMouseTarget.appendChild(ui.div); ui.getPanes().overlayMouseTarget.appendChild(ui.div);
// Add listeners to the element. // Add listeners to the element.
google.maps.event.addDomListener(ui.div, 'click', event => { google.maps.event.addDomListener(ui.div, 'click', (event) => {
google.maps.event.trigger(ui, 'click'); google.maps.event.trigger(ui, 'click');
if (ui.isFunction(ui.onClick)) ui.onClick(); if (ui.isFunction(ui.onClick)) ui.onClick();
event.stopPropagation(); event.stopPropagation();
}); });
google.maps.event.addDomListener(ui.div, 'mouseover', event => { google.maps.event.addDomListener(ui.div, 'mouseover', (event) => {
google.maps.event.trigger(ui, 'mouseover'); google.maps.event.trigger(ui, 'mouseover');
if (ui.isFunction(ui.onMouseOver)) ui.onMouseOver(); if (ui.isFunction(ui.onMouseOver)) ui.onMouseOver();
event.stopPropagation(); event.stopPropagation();
@ -123,7 +123,7 @@ const Obj = {
// Align HTML overlay relative to original position // Align HTML overlay relative to original position
var divOffset = { var divOffset = {
y: undefined, y: undefined,
x: undefined x: undefined,
}; };
switch (Array.isArray(ui.align) ? ui.align.join(' ') : '') { switch (Array.isArray(ui.align) ? ui.align.join(' ') : '') {
@ -169,8 +169,8 @@ const Obj = {
} }
// Set position // Set position
ui.div.style.top = positionInPixels.y - divOffset.y + 'px'; ui.div.style.top = `${positionInPixels.y - divOffset.y }px`;
ui.div.style.left = positionInPixels.x - divOffset.x + 'px'; ui.div.style.left = `${positionInPixels.x - divOffset.x }px`;
} }
getPosition() { getPosition() {
@ -191,7 +191,7 @@ const Obj = {
} }
} }
return GoogleMapsHtmlOverlay; return GoogleMapsHtmlOverlay;
} },
} }
export default Obj; export default Obj;

20
src/js/_components/drivers/_map.google.js
View File

@ -40,10 +40,10 @@ const GoogleMapsDriver = (($) => {
'zoom': (config['mapZoom'] ? config['mapZoom'] : 10), 'zoom': (config['mapZoom'] ? config['mapZoom'] : 10),
'center': (config['center'] ? { 'center': (config['center'] ? {
lat: config['center'][1], lat: config['center'][1],
lng: config['center'][0] lng: config['center'][0],
} : { } : {
lat: 0, lat: 0,
lng: 0 lng: 0,
}), }),
'fullscreenControl': true, 'fullscreenControl': true,
'styles': (config['style'] ? config['style'] : null), 'styles': (config['style'] ? config['style'] : null),
@ -70,7 +70,7 @@ const GoogleMapsDriver = (($) => {
const ui = this; const ui = this;
const pos = { const pos = {
lat: crds[1], lat: crds[1],
lng: crds[0] lng: crds[0],
}; };
@ -81,7 +81,7 @@ const GoogleMapsDriver = (($) => {
'onClick': (e) => { 'onClick': (e) => {
const $popup = $(ui.popup.getDiv()); const $popup = $(ui.popup.getDiv());
$popup.css({ $popup.css({
'opacity': '0' 'opacity': '0',
}); });
$popup.removeClass('d-none'); $popup.removeClass('d-none');
@ -95,9 +95,9 @@ const GoogleMapsDriver = (($) => {
$popup.css({ $popup.css({
'margin-left': '1rem', 'margin-left': '1rem',
'opacity': '1' 'opacity': '1',
}); });
} },
}); });
@ -118,15 +118,15 @@ const GoogleMapsDriver = (($) => {
const content = marker.properties.content; const content = marker.properties.content;
ui.addMarker(crds, { ui.addMarker(crds, {
'id': id, id,
'content': content, content,
'icon': marker.icon, 'icon': marker.icon,
'flyToMarker': config['flyToMarker'] 'flyToMarker': config['flyToMarker'],
}); });
bounds.extend({ bounds.extend({
lat: crds[1], lat: crds[1],
lng: crds[0] lng: crds[0],
}); });
}); });

22
src/js/_components/drivers/_map.google.marker.js
View File

@ -18,7 +18,7 @@ const Obj = {
ui.onClick = options.onClick; ui.onClick = options.onClick;
ui.onMouseOver = options.onMouseOver; ui.onMouseOver = options.onMouseOver;
ui.isBoolean = arg => { ui.isBoolean = (arg) => {
if (typeof arg === 'boolean') { if (typeof arg === 'boolean') {
return true; return true;
} else { } else {
@ -26,7 +26,7 @@ const Obj = {
} }
}; };
ui.isNotUndefined = arg => { ui.isNotUndefined = (arg) => {
if (typeof arg !== 'undefined') { if (typeof arg !== 'undefined') {
return true; return true;
} else { } else {
@ -34,7 +34,7 @@ const Obj = {
} }
}; };
ui.hasContent = arg => { ui.hasContent = (arg) => {
if (arg.length > 0) { if (arg.length > 0) {
return true; return true;
} else { } else {
@ -42,7 +42,7 @@ const Obj = {
} }
}; };
ui.isString = arg => { ui.isString = (arg) => {
if (typeof arg === 'string') { if (typeof arg === 'string') {
return true; return true;
} else { } else {
@ -50,7 +50,7 @@ const Obj = {
} }
}; };
ui.isFunction = arg => { ui.isFunction = (arg) => {
if (typeof arg === 'function') { if (typeof arg === 'function') {
return true; return true;
} else { } else {
@ -99,13 +99,13 @@ const Obj = {
ui.getPanes().overlayMouseTarget.appendChild(ui.div); ui.getPanes().overlayMouseTarget.appendChild(ui.div);
// Add listeners to the element. // Add listeners to the element.
google.maps.event.addDomListener(ui.div, 'click', event => { google.maps.event.addDomListener(ui.div, 'click', (event) => {
google.maps.event.trigger(ui, 'click'); google.maps.event.trigger(ui, 'click');
if (ui.isFunction(ui.onClick)) ui.onClick(); if (ui.isFunction(ui.onClick)) ui.onClick();
event.stopPropagation(); event.stopPropagation();
}); });
google.maps.event.addDomListener(ui.div, 'mouseover', event => { google.maps.event.addDomListener(ui.div, 'mouseover', (event) => {
google.maps.event.trigger(ui, 'mouseover'); google.maps.event.trigger(ui, 'mouseover');
if (ui.isFunction(ui.onMouseOver)) ui.onMouseOver(); if (ui.isFunction(ui.onMouseOver)) ui.onMouseOver();
event.stopPropagation(); event.stopPropagation();
@ -123,7 +123,7 @@ const Obj = {
// Align HTML overlay relative to original position // Align HTML overlay relative to original position
var divOffset = { var divOffset = {
y: undefined, y: undefined,
x: undefined x: undefined,
}; };
switch (Array.isArray(ui.align) ? ui.align.join(' ') : '') { switch (Array.isArray(ui.align) ? ui.align.join(' ') : '') {
@ -169,8 +169,8 @@ const Obj = {
} }
// Set position // Set position
ui.div.style.top = positionInPixels.y - divOffset.y + 'px'; ui.div.style.top = `${positionInPixels.y - divOffset.y }px`;
ui.div.style.left = positionInPixels.x - divOffset.x + 'px'; ui.div.style.left = `${positionInPixels.x - divOffset.x }px`;
} }
getPosition() { getPosition() {
@ -191,7 +191,7 @@ const Obj = {
} }
} }
return GoogleMapsHtmlOverlay; return GoogleMapsHtmlOverlay;
} },
} }
export default Obj; export default Obj;

26
src/js/_components/drivers/_map.mapbox.js
View File

@ -18,16 +18,16 @@ const MapBoxDriver = (($) => {
mapBoxGL.accessToken = config['key']; mapBoxGL.accessToken = config['key'];
ui.map = new mapBoxGL.Map({ ui.map = new mapBoxGL.Map({
'container': $el.find('.mapAPI-map')[0], 'container': $el.find('.mapAPI-map')[0],
'center': (config['center'] ? config['center'] : [0, 0]), 'center': (config['center'] ? config['center'] : [0, 0]),
//hash: true, //hash: true,
'style': (config['style'] ? config['style'] : 'mapbox://styles/mapbox/streets-v9'), 'style': (config['style'] ? config['style'] : 'mapbox://styles/mapbox/streets-v9'),
'localIdeographFontFamily': config['font-family'], 'localIdeographFontFamily': config['font-family'],
'zoom': (config['mapZoom'] ? config['mapZoom'] : 10), 'zoom': (config['mapZoom'] ? config['mapZoom'] : 10),
'attributionControl': false, 'attributionControl': false,
'antialias': true, 'antialias': true,
'accessToken': config['key'] 'accessToken': config['key'],
}) })
.addControl(new mapBoxGL.AttributionControl({ .addControl(new mapBoxGL.AttributionControl({
compact: true, compact: true,
})) }))
@ -136,10 +136,10 @@ const MapBoxDriver = (($) => {
const content = marker.properties.content; const content = marker.properties.content;
ui.addMarker(crds, { ui.addMarker(crds, {
'id': id, id,
'content': content, content,
'icon': marker.icon, 'icon': marker.icon,
'flyToMarker': config['flyToMarker'] 'flyToMarker': config['flyToMarker'],
}); });
bounds.extend(crds); bounds.extend(crds);

2
src/js/_consts.js
View File

@ -15,7 +15,7 @@ const CONSTS = {
'xxl', 'xxl',
'xxxl', 'xxxl',
], ],
MAP_DRIVER: MAP_DRIVER MAP_DRIVER,
}; };
export default CONSTS; export default CONSTS;

2
src/js/_main.js
View File

@ -235,7 +235,7 @@ const MainUI = (($) => {
$Body.append($el); $Body.append($el);
let curEnv = envs.shift(); let curEnv = envs.shift();
for (let env of envs.reverse()) { for (const env of envs.reverse()) {
$el.addClass(`d-${env}-none`); $el.addClass(`d-${env}-none`);
if ($el.is(':hidden')) { if ($el.is(':hidden')) {
curEnv = env; curEnv = env;

2
src/js/app.js
View File

@ -73,8 +73,6 @@ import '@a2nt/meta-lightbox/src/js/index';
// Map UI // Map UI
import MapApi from './_components/_ui.map.api'; import MapApi from './_components/_ui.map.api';
// Google Maps
//import MapApi from './_components/_ui.map.api.google';
import './_main'; import './_main';
import './_layout'; import './_layout';

2
src/thirdparty/jQuery-TE_v.1.4.0/jquery-te-1.4.0.min.js vendored
View File

@ -6,4 +6,4 @@
* jQuery TE is provided under the MIT LICENSE. * jQuery TE is provided under the MIT LICENSE.
* *
*/ */
(function(e){e.fn.jqte=function(t){function l(e,t,n,r,i){var s=f.length+1;return f.push({name:e,cls:s,command:t,key:n,tag:r,emphasis:i})}var n=[{title:"Text Format"},{title:"Font Size"},{title:"Color"},{title:"Bold",hotkey:"B"},{title:"Italic",hotkey:"I"},{title:"Underline",hotkey:"U"},{title:"Ordered List",hotkey:"."},{title:"Unordered List",hotkey:","},{title:"Subscript",hotkey:"down arrow"},{title:"Superscript",hotkey:"up arrow"},{title:"Outdent",hotkey:"left arrow"},{title:"Indent",hotkey:"right arrow"},{title:"Justify Left"},{title:"Justify Center"},{title:"Justify Right"},{title:"Strike Through",hotkey:"K"},{title:"Add Link",hotkey:"L"},{title:"Remove Link"},{title:"Cleaner Style",hotkey:"Delete"},{title:"Horizontal Rule",hotkey:"H"},{title:"Source"}];var r=[["p","Normal"],["h1","Header 1"],["h2","Header 2"],["h3","Header 3"],["h4","Header 4"],["h5","Header 5"],["h6","Header 6"],["pre","Preformatted"]];var i=["10","12","16","18","20","24","28"];var s=["0,0,0","68,68,68","102,102,102","153,153,153","204,204,204","238,238,238","243,243,243","255,255,255",null,"255,0,0","255,153,0","255,255,0","0,255,0","0,255,255","0,0,255","153,0,255","255,0,255",null,"244,204,204","252,229,205","255,242,204","217,234,211","208,224,227","207,226,243","217,210,233","234,209,220","234,153,153","249,203,156","255,229,153","182,215,168","162,196,201","159,197,232","180,167,214","213,166,189","224,102,102","246,178,107","255,217,102","147,196,125","118,165,175","111,168,220","142,124,195","194,123,160","204,0,0","230,145,56","241,194,50","106,168,79","69,129,142","61,133,198","103,78,167","166,77,121","153,0,0","180,95,6","191,144,0","56,118,29","19,79,92","11,83,148","53,28,117","116,27,71","102,0,0","120,63,4","127,96,0","39,78,19","12,52,61","7,55,99","32,18,77","76,17,48"];var o=["Web Address","E-mail Address","Picture URL"];var u=e.extend({status:true,css:"jqte",title:true,titletext:n,button:"OK",format:true,formats:r,fsize:true,fsizes:i,funit:"px",color:true,linktypes:o,b:true,i:true,u:true,ol:true,ul:true,sub:true,sup:true,outdent:true,indent:true,left:true,center:true,right:true,strike:true,link:true,unlink:true,remove:true,rule:true,source:true,placeholder:false,br:true,p:true,change:"",focus:"",blur:""},t);e.fn.jqteVal=function(t){e(this).closest("."+u.css).find("."+u.css+"_editor").html(t)};var a=navigator.userAgent.toLowerCase();if(/msie [1-7]./.test(a))u.title=false;var f=[];l("format","formats","","",false);l("fsize","fSize","","",false);l("color","colors","","",false);l("b","Bold","B",["b","strong"],true);l("i","Italic","I",["i","em"],true);l("u","Underline","U",["u"],true);l("ol","insertorderedlist","¾",["ol"],true);l("ul","insertunorderedlist","¼",["ul"],true);l("sub","subscript","(",["sub"],true);l("sup","superscript","&",["sup"],true);l("outdent","outdent","%",["blockquote"],false);l("indent","indent","'",["blockquote"],true);l("left","justifyLeft","","",false);l("center","justifyCenter","","",false);l("right","justifyRight","","",false);l("strike","strikeThrough","K",["strike"],true);l("link","linkcreator","L",["a"],true);l("unlink","unlink","",["a"],false);l("remove","removeformat",".","",false);l("rule","inserthorizontalrule","H",["hr"],false);l("source","displaysource","","",false);return this.each(function(){function B(){if(window.getSelection)return window.getSelection();else if(document.selection&&document.selection.createRange&&document.selection.type!="None")return document.selection.createRange()}function j(e,t){var n,r=B();if(window.getSelection){if(r.anchorNode&&r.getRangeAt)n=r.getRangeAt(0);if(n){r.removeAllRanges();r.addRange(n)}if(!a.match(/msie/))document.execCommand("StyleWithCSS",false,false);document.execCommand(e,false,t)}else if(document.selection&&document.selection.createRange&&document.selection.type!="None"){n=document.selection.createRange();n.execCommand(e,false,t)}q(false,false)}function F(t,n,r){if(v.not(":focus"))v.focus();if(window.getSelection){var i=B(),s,o,u;if(i.anchorNode&&i.getRangeAt){s=i.getRangeAt(0);o=document.createElement(t);e(o).attr(n,r);u=s.extractContents();o.appendChild(u);s.insertNode(o);i.removeAllRanges();if(n=="style")q(e(o),r);else q(e(o),false)}}else if(document.selection&&document.selection.createRange&&document.selection.type!="None"){var a=document.selection.createRange();var f=a.htmlText;var l="<"+t+" "+n+'="'+r+'">'+f+"</"+t+">";document.selection.createRange().pasteHTML(l)}}function q(e,t){var n=I();n=n?n:e;if(n&&t==false){if(n.parent().is("[style]"))n.attr("style",n.parent().attr("style"));if(n.is("[style]"))n.find("*").attr("style",n.attr("style"))}else if(e&&t&&e.is("[style]")){var r=t.split(";");r=r[0].split(":");if(e.is("[style*="+r[0]+"]"))e.find("*").css(r[0],r[1]);R(e)}}function R(t){if(t){var t=t[0];if(document.body.createTextRange){var n=document.body.createTextRange();n.moveToElementText(t);n.select()}else if(window.getSelection){var r=window.getSelection();var n=document.createRange();if(t!="undefined"&&t!=null){n.selectNodeContents(t);r.removeAllRanges();r.addRange(n);if(e(t).is(":empty")){e(t).append(" ");R(e(t))}}}}}function U(){if(!p.data("sourceOpened")){var t=I();var n="http://";W(true);if(t){var r=t.prop("tagName").toLowerCase();if(r=="a"&&t.is("[href]")){n=t.attr("href");t.attr(S,"")}else F("a",S,"")}else y.val(n).focus();g.click(function(t){if(e(t.target).hasClass(u.css+"_linktypetext")||e(t.target).hasClass(u.css+"_linktypearrow"))X(true)});w.find("a").click(function(){var t=e(this).attr(u.css+"-linktype");w.data("linktype",t);E.find("."+u.css+"_linktypetext").html(w.find("a:eq("+w.data("linktype")+")").text());V(n);X()});V(n);y.focus().val(n).bind("keypress keyup",function(e){if(e.keyCode==13){z(h.find("["+S+"]"));return false}});b.click(function(){z(h.find("["+S+"]"))})}else W(false)}function z(t){y.focus();R(t);t.removeAttr(S);if(w.data("linktype")!="2")j("createlink",y.val());else{j("insertImage",y.val());v.find("img").each(function(){var t=e(this).prev("a");var n=e(this).next("a");if(t.length>0&&t.html()=="")t.remove();else if(n.length>0&&n.html()=="")n.remove()})}W();v.trigger("change")}function W(e){Q("["+S+"]:not([href])");h.find("["+S+"][href]").removeAttr(S);if(e){p.data("linkOpened",true);d.show()}else{p.data("linkOpened",false);d.hide()}X()}function X(e){if(e)w.show();else w.hide()}function V(e){var t=w.data("linktype");if(t=="1"&&(y.val()=="http://"||y.is("[value^=http://]")||!y.is("[value^=mailto]")))y.val("mailto:");else if(t!="1"&&!y.is("[value^=http://]"))y.val("http://");else y.val(e)}function J(t){if(!p.data("sourceOpened")){if(t=="fSize")styleField=P;else if(t=="colors")styleField=H;K(styleField,true);styleField.find("a").unbind("click").click(function(){var n=e(this).attr(u.css+"-styleval");if(t=="fSize"){styleType="font-size";n=n+u.funit}else if(t=="colors"){styleType="color";n="rgb("+n+")"}var r=G(styleType);F("span","style",styleType+":"+n+";"+r);K("",false);e("."+u.css+"_title").remove();v.trigger("change")})}else K(styleField,false);W(false)}function K(e,t){var n="",r=[{d:"fsizeOpened",f:P},{d:"cpallOpened",f:H}];if(e!=""){for(var i=0;i<r.length;i++){if(e==r[i]["f"])n=r[i]}}if(t){p.data(n["d"],true);n["f"].slideDown(100);for(var i=0;i<r.length;i++){if(n["d"]!=r[i]["d"]){p.data(r[i]["d"],false);r[i]["f"].slideUp(100)}}}else{for(var i=0;i<r.length;i++){p.data(r[i]["d"],false);r[i]["f"].slideUp(100)}}}function Q(t){h.find(t).each(function(){e(this).before(e(this).html()).remove()})}function G(e){var t=I();if(t&&t.is("[style]")&&t.css(e)!=""){var n=t.css(e);t.css(e,"");var r=t.attr("style");t.css(e,n);return r}else return""}function Y(){Z(true);D.find("a").click(function(){e("*",this).click(function(e){e.preventDefault();return false});et(e(this).text());var t=e(this).attr(u.css+"-formatval");j("formatBlock","<"+t+">");Z(false)})}function Z(e){var t=e?true:false;t=e&&D.data("status")?true:false;if(t||!e)D.data("status",false).slideUp(200);else D.data("status",true).slideDown(200)}function et(e){var t=D.closest("."+u.css+"_tool").find("."+u.css+"_tool_label").find("."+u.css+"_tool_text");if(e.length>10)e=e.substr(0,7)+"...";t.html(e)}function tt(e){var t,n,r;t=e.replace(/\n/gim,"").replace(/\r/gim,"").replace(/\t/gim,"").replace(/ /gim," ");n=[/\<span(|\s+.*?)><span(|\s+.*?)>(.*?)<\/span><\/span>/gim,/<(\w*[^p])\s*[^\/>]*>\s*<\/\1>/gim,/\<div(|\s+.*?)>(.*?)\<\/div>/gim,/\<strong(|\s+.*?)>(.*?)\<\/strong>/gim,/\<em(|\s+.*?)>(.*?)\<\/em>/gim];r=["<span$2>$3</span>","","<p$1>$2</p>","<b$1>$2</b>","<i$1>$2</i>"];for(A=0;A<5;A++){for(var i=0;i<n.length;i++){t=t.replace(n[i],r[i])}}if(!u.p)t=t.replace(/\<p(|\s+.*?)>(.*?)\<\/p>/ig,"<br/>$2");if(!u.br){n=[/\<br>(.*?)/ig,/\<br\/>(.*?)/ig];r=["<p>$1</p>","<p>$1</p>"];for(var i=0;i<n.length;i++){t=t.replace(n[i],r[i])}}if(!u.p&&!u.br)t=t.replace(/\<p>(.*?)\<\/p>/ig,"<div>$1</div>");return t}function nt(){var e=v.text()==""&&v.html().length<12?"":v.html();l.val(tt(e))}function rt(){v.html(tt(l.val()))}function it(t){var n=false,r=I(),i;if(r){e.each(t,function(t,s){i=r.prop("tagName").toLowerCase();if(i==s)n=true;else{r.parents().each(function(){i=e(this).prop("tagName").toLowerCase();if(i==s)n=true})}});return n}else return false}function st(t){for(var n=0;n<f.length;n++){if(u[f[n].name]&&f[n].emphasis&&f[n].tag!="")it(f[n].tag)?p.find("."+u.css+"_tool_"+f[n].cls).addClass(m):e("."+u.css+"_tool_"+f[n].cls).removeClass(m)}if(u.format&&e.isArray(u.formats)){var r=false;for(var i=0;i<u.formats.length;i++){var s=[];s[0]=u.formats[i][0];if(u.formats[i][0].length>0&&it(s)){et(u.formats[i][1]);r=true;break}}if(!r)et(u.formats[0][1])}K("",false);Z(false)}if(!e(this).data("jqte")||e(this).data("jqte")==null||e(this).data("jqte")=="undefined")e(this).data("jqte",true);else e(this).data("jqte",false);if(!u.status||!e(this).data("jqte")){if(e(this).closest("."+u.css).length>0){var t=e(this).closest("."+u.css).find("."+u.css+"_editor").html();var n="";e(e(this)[0].attributes).each(function(){if(this.nodeName!="style")n=n+" "+this.nodeName+'="'+this.nodeValue+'"'});var r=e(this).is("[data-origin]")&&e(this).attr("data-origin")!=""?e(this).attr("data-origin"):"textarea";var i=">"+t;if(r=="input"||r=="option"){t=t.replace(/"/g,"&#34;").replace(/'/g,"&#39;").replace(/</g,"<").replace(/>/g,">");i='value="'+t+'">'}var o=e(this).clone();e(this).data("jqte",false).closest("."+u.css).before(o).remove();o.replaceWith("<"+r+n+i+"</"+r+">")}return}var l=e(this);var r=e(this).prop("tagName").toLowerCase();e(this).attr("data-origin",r);var c=e(this).is("[value]")||r=="textarea"?e(this).val():e(this).html();c=c.replace(/&#34;/g,'"').replace(/&#39;/g,"'").replace(/</g,"<").replace(/>/g,">").replace(/&/g,"&");e(this).after('<div class="'+u.css+'"></div>');var h=e(this).next("."+u.css);h.html('<div class="'+u.css+"_toolbar"+'" role="toolbar" unselectable></div><div class="'+u.css+'_linkform" style="display:none" role="dialog"></div><div class="'+u.css+"_editor"+'"></div>');var p=h.find("."+u.css+"_toolbar");var d=h.find("."+u.css+"_linkform");var v=h.find("."+u.css+"_editor");var m=u.css+"_tool_depressed";d.append('<div class="'+u.css+'_linktypeselect" unselectable></div><input class="'+u.css+'_linkinput" type="text/css" value=""><div class="'+u.css+'_linkbutton" unselectable>'+u.button+'</div> <div style="height:1px;float:none;clear:both"></div>');var g=d.find("."+u.css+"_linktypeselect");var y=d.find("."+u.css+"_linkinput");var b=d.find("."+u.css+"_linkbutton");g.append('<div class="'+u.css+'_linktypeview" unselectable></div><div class="'+u.css+'_linktypes" role="menu" unselectable></div>');var w=g.find("."+u.css+"_linktypes");var E=g.find("."+u.css+"_linktypeview");var S=u.css+"-setlink";v.after('<div class="'+u.css+"_source "+u.css+'_hiddenField"></div>');var x=h.find("."+u.css+"_source");l.appendTo(x);if(r!="textarea"){var n="";e(l[0].attributes).each(function(){if(this.nodeName!="type"&&this.nodeName!="value")n=n+" "+this.nodeName+'="'+this.nodeValue+'"'});l.replaceWith("<textarea "+n+">"+c+"</textarea>");l=x.find("textarea")}v.attr("contenteditable","true").html(c);for(var T=0;T<f.length;T++){if(u[f[T].name]){var N=f[T].key.length>0?u.titletext[T].hotkey!=null&&u.titletext[T].hotkey!="undefined"&&u.titletext[T].hotkey!=""?" (Ctrl+"+u.titletext[T].hotkey+")":"":"";var C=u.titletext[T].title!=null&&u.titletext[T].title!="undefined"&&u.titletext[T].title!=""?u.titletext[T].title+N:"";p.append('<div class="'+u.css+"_tool "+u.css+"_tool_"+f[T].cls+'" role="button" data-tool="'+T+'" unselectable><a class="'+u.css+'_tool_icon" unselectable></a></div>');p.find("."+u.css+"_tool[data-tool="+T+"]").data({tag:f[T].tag,command:f[T].command,emphasis:f[T].emphasis,title:C});if(f[T].name=="format"&&e.isArray(u.formats)){var k=u.formats[0][1].length>0&&u.formats[0][1]!="undefined"?u.formats[0][1]:"";p.find("."+u.css+"_tool_"+f[T].cls).find("."+u.css+"_tool_icon").replaceWith('<a class="'+u.css+'_tool_label" unselectable><span class="'+u.css+'_tool_text" unselectable>'+k+'</span><span class="'+u.css+'_tool_icon" unselectable></span></a>');p.find("."+u.css+"_tool_"+f[T].cls).append('<div class="'+u.css+'_formats" unselectable></div>');for(var L=0;L<u.formats.length;L++){p.find("."+u.css+"_formats").append("<a "+u.css+'-formatval="'+u.formats[L][0]+'" class="'+u.css+"_format"+" "+u.css+"_format_"+L+'" role="menuitem" unselectable>'+u.formats[L][1]+"</a>")}p.find("."+u.css+"_formats").data("status",false)}else if(f[T].name=="fsize"&&e.isArray(u.fsizes)){p.find("."+u.css+"_tool_"+f[T].cls).append('<div class="'+u.css+'_fontsizes" unselectable></div>');for(var L=0;L<u.fsizes.length;L++){p.find("."+u.css+"_fontsizes").append("<a "+u.css+'-styleval="'+u.fsizes[L]+'" class="'+u.css+"_fontsize"+'" style="font-size:'+u.fsizes[L]+u.funit+'" role="menuitem" unselectable>Abcdefgh...</a>')}}else if(f[T].name=="color"&&e.isArray(s)){p.find("."+u.css+"_tool_"+f[T].cls).append('<div class="'+u.css+'_cpalette" unselectable></div>');for(var A=0;A<s.length;A++){if(s[A]!=null)p.find("."+u.css+"_cpalette").append("<a "+u.css+'-styleval="'+s[A]+'" class="'+u.css+"_color"+'" style="background-color: rgb('+s[A]+')" role="gridcell" unselectable></a>');else p.find("."+u.css+"_cpalette").append('<div class="'+u.css+"_colorSeperator"+'"></div>')}}}}w.data("linktype","0");for(var T=0;T<3;T++){w.append("<a "+u.css+'-linktype="'+T+'" unselectable>'+u.linktypes[T]+"</a>");E.html('<div class="'+u.css+'_linktypearrow" unselectable></div><div class="'+u.css+'_linktypetext">'+w.find("a:eq("+w.data("linktype")+")").text()+"</div>")}var O="";if(/msie/.test(a))O="-ms-";else if(/chrome/.test(a)||/safari/.test(a)||/yandex/.test(a))O="-webkit-";else if(/mozilla/.test(a))O="-moz-";else if(/opera/.test(a))O="-o-";else if(/konqueror/.test(a))O="-khtml-";else O="";if(u.placeholder&&u.placeholder!=""){h.prepend('<div class="'+u.css+'_placeholder" unselectable><div class="'+u.css+'_placeholder_text">'+u.placeholder+"</div></div>");var M=h.find("."+u.css+"_placeholder");M.click(function(){v.focus()})}h.find("[unselectable]").css(O+"user-select","none").addClass("unselectable").attr("unselectable","on").on("selectstart mousedown",false);var _=p.find("."+u.css+"_tool");var D=p.find("."+u.css+"_formats");var P=p.find("."+u.css+"_fontsizes");var H=p.find("."+u.css+"_cpalette");var I=function(){var t,n;if(window.getSelection){n=getSelection();t=n.anchorNode}if(!t&&document.selection&&document.selection.createRange&&document.selection.type!="None"){n=document.selection;var r=n.getRangeAt?n.getRangeAt(0):n.createRange();t=r.commonAncestorContainer?r.commonAncestorContainer:r.parentElement?r.parentElement():r.item(0)}if(t){return t.nodeName=="#text"?e(t.parentNode):e(t)}else return false};_.unbind("click").click(function(t){if(e(this).data("command")=="displaysource"&&!p.data("sourceOpened")){p.find("."+u.css+"_tool").addClass(u.css+"_hiddenField");e(this).removeClass(u.css+"_hiddenField");p.data("sourceOpened",true);l.css("height",v.outerHeight());x.removeClass(u.css+"_hiddenField");v.addClass(u.css+"_hiddenField");l.focus();W(false);K("",false);Z();if(u.placeholder&&u.placeholder!="")M.hide()}else{if(!p.data("sourceOpened")){if(e(this).data("command")=="linkcreator"){if(!p.data("linkOpened"))U();else{W(false);Z(false)}}else if(e(this).data("command")=="formats"){if(e(this).data("command")=="formats"&&!e(t.target).hasClass(u.css+"_format"))Y();K("",false);if(v.not(":focus"))v.focus()}else if(e(this).data("command")=="fSize"||e(this).data("command")=="colors"){if(e(this).data("command")=="fSize"&&!e(t.target).hasClass(u.css+"_fontsize")||e(this).data("command")=="colors"&&!e(t.target).hasClass(u.css+"_color"))J(e(this).data("command"));Z(false);if(v.not(":focus"))v.focus()}else{if(v.not(":focus"))v.focus();j(e(this).data("command"),null);K("",false);Z(false);X();e(this).data("emphasis")==true&&!e(this).hasClass(m)?e(this).addClass(m):e(this).removeClass(m);x.addClass(u.css+"_hiddenField");v.removeClass(u.css+"_hiddenField")}}else{p.data("sourceOpened",false);p.find("."+u.css+"_tool").removeClass(u.css+"_hiddenField");x.addClass(u.css+"_hiddenField");v.removeClass(u.css+"_hiddenField")}if(u.placeholder&&u.placeholder!="")v.html()!=""?M.hide():M.show()}v.trigger("change")}).hover(function(t){if(u.title&&e(this).data("title")!=""&&(e(t.target).hasClass(u.css+"_tool")||e(t.target).hasClass(u.css+"_tool_icon"))){e("."+u.css+"_title").remove();h.append('<div class="'+u.css+'_title"><div class="'+u.css+'_titleArrow"><div class="'+u.css+'_titleArrowIcon"></div></div><div class="'+u.css+'_titleText">'+e(this).data("title")+"</div></div>");var n=e("."+u.css+"_title:first");var r=n.find("."+u.css+"_titleArrowIcon");var i=e(this).position();var s=i.left+e(this).outerWidth()-n.outerWidth()/2-e(this).outerWidth()/2;var o=i.top+e(this).outerHeight()+5;n.delay(400).css({top:o,left:s}).fadeIn(200)}},function(){e("."+u.css+"_title").remove()});var ot=null;v.bind("keypress keyup keydown drop cut copy paste DOMCharacterDataModified DOMSubtreeModified",function(){if(!p.data("sourceOpened"))e(this).trigger("change");X();if(e.isFunction(u.change))u.change();if(u.placeholder&&u.placeholder!="")e(this).text()!=""?M.hide():M.show()}).bind("change",function(){if(!p.data("sourceOpened")){clearTimeout(ot);ot=setTimeout(nt,10)}}).keydown(function(e){if(e.ctrlKey){for(var t=0;t<f.length;t++){if(u[f[t].name]&&e.keyCode==f[t].key.charCodeAt(0)){if(f[t].command!=""&&f[t].command!="linkcreator")j(f[t].command,null);else if(f[t].command=="linkcreator")U();return false}}}}).bind("mouseup keyup",st).focus(function(){if(e.isFunction(u.focus))u.focus();h.addClass(u.css+"_focused");if(/opera/.test(a)){var t=document.createRange();t.selectNodeContents(v[0]);t.collapse(false);var n=window.getSelection();n.removeAllRanges();n.addRange(t)}}).focusout(function(){_.removeClass(m);K("",false);Z(false);X();if(e.isFunction(u.blur))u.blur();h.removeClass(u.css+"_focused");if(e.isArray(u.formats))et(u.formats[0][1])});l.bind("keydown keyup",function(){setTimeout(rt,0);e(this).height(e(this)[0].scrollHeight);if(e(this).val()=="")e(this).height(0)}).focus(function(){h.addClass(u.css+"_focused")}).focusout(function(){h.removeClass(u.css+"_focused")})})}})(jQuery) (function(e){e.fn.jqte=function(t){function l(e,t,n,r,i){var s=f.length+1;return f.push({ name:e,cls:s,command:t,key:n,tag:r,emphasis:i })}var n=[{ title:"Text Format" },{ title:"Font Size" },{ title:"Color" },{ title:"Bold",hotkey:"B" },{ title:"Italic",hotkey:"I" },{ title:"Underline",hotkey:"U" },{ title:"Ordered List",hotkey:"." },{ title:"Unordered List",hotkey:"," },{ title:"Subscript",hotkey:"down arrow" },{ title:"Superscript",hotkey:"up arrow" },{ title:"Outdent",hotkey:"left arrow" },{ title:"Indent",hotkey:"right arrow" },{ title:"Justify Left" },{ title:"Justify Center" },{ title:"Justify Right" },{ title:"Strike Through",hotkey:"K" },{ title:"Add Link",hotkey:"L" },{ title:"Remove Link" },{ title:"Cleaner Style",hotkey:"Delete" },{ title:"Horizontal Rule",hotkey:"H" },{ title:"Source" }];var r=[["p","Normal"],["h1","Header 1"],["h2","Header 2"],["h3","Header 3"],["h4","Header 4"],["h5","Header 5"],["h6","Header 6"],["pre","Preformatted"]];var i=["10","12","16","18","20","24","28"];var s=["0,0,0","68,68,68","102,102,102","153,153,153","204,204,204","238,238,238","243,243,243","255,255,255",null,"255,0,0","255,153,0","255,255,0","0,255,0","0,255,255","0,0,255","153,0,255","255,0,255",null,"244,204,204","252,229,205","255,242,204","217,234,211","208,224,227","207,226,243","217,210,233","234,209,220","234,153,153","249,203,156","255,229,153","182,215,168","162,196,201","159,197,232","180,167,214","213,166,189","224,102,102","246,178,107","255,217,102","147,196,125","118,165,175","111,168,220","142,124,195","194,123,160","204,0,0","230,145,56","241,194,50","106,168,79","69,129,142","61,133,198","103,78,167","166,77,121","153,0,0","180,95,6","191,144,0","56,118,29","19,79,92","11,83,148","53,28,117","116,27,71","102,0,0","120,63,4","127,96,0","39,78,19","12,52,61","7,55,99","32,18,77","76,17,48"];var o=["Web Address","E-mail Address","Picture URL"];var u=e.extend({ status:true,css:"jqte",title:true,titletext:n,button:"OK",format:true,formats:r,fsize:true,fsizes:i,funit:"px",color:true,linktypes:o,b:true,i:true,u:true,ol:true,ul:true,sub:true,sup:true,outdent:true,indent:true,left:true,center:true,right:true,strike:true,link:true,unlink:true,remove:true,rule:true,source:true,placeholder:false,br:true,p:true,change:"",focus:"",blur:"" },t);e.fn.jqteVal=function(t){e(this).closest(`.${u.css}`).find(`.${u.css}_editor`).html(t)};var a=navigator.userAgent.toLowerCase();if(/msie [1-7]./.test(a))u.title=false;var f=[];l("format","formats","","",false);l("fsize","fSize","","",false);l("color","colors","","",false);l("b","Bold","B",["b","strong"],true);l("i","Italic","I",["i","em"],true);l("u","Underline","U",["u"],true);l("ol","insertorderedlist","¾",["ol"],true);l("ul","insertunorderedlist","¼",["ul"],true);l("sub","subscript","(",["sub"],true);l("sup","superscript","&",["sup"],true);l("outdent","outdent","%",["blockquote"],false);l("indent","indent","'",["blockquote"],true);l("left","justifyLeft","","",false);l("center","justifyCenter","","",false);l("right","justifyRight","","",false);l("strike","strikeThrough","K",["strike"],true);l("link","linkcreator","L",["a"],true);l("unlink","unlink","",["a"],false);l("remove","removeformat",".","",false);l("rule","inserthorizontalrule","H",["hr"],false);l("source","displaysource","","",false);return this.each(function(){function B(){if(window.getSelection)return window.getSelection();else if(document.selection&&document.selection.createRange&&document.selection.type!="None")return document.selection.createRange()}function j(e,t){var n,r=B();if(window.getSelection){if(r.anchorNode&&r.getRangeAt)n=r.getRangeAt(0);if(n){r.removeAllRanges();r.addRange(n)}if(!a.match(/msie/))document.execCommand("StyleWithCSS",false,false);document.execCommand(e,false,t)}else if(document.selection&&document.selection.createRange&&document.selection.type!="None"){n=document.selection.createRange();n.execCommand(e,false,t)}q(false,false)}function F(t,n,r){if(v.not(":focus"))v.focus();if(window.getSelection){var i=B(),s,o,u;if(i.anchorNode&&i.getRangeAt){s=i.getRangeAt(0);o=document.createElement(t);e(o).attr(n,r);u=s.extractContents();o.appendChild(u);s.insertNode(o);i.removeAllRanges();if(n=="style")q(e(o),r);else q(e(o),false)}}else if(document.selection&&document.selection.createRange&&document.selection.type!="None"){var a=document.selection.createRange();var f=a.htmlText;var l=`<${t} ${n}="${r}">${f}</${t}>`;document.selection.createRange().pasteHTML(l)}}function q(e,t){var n=I();n=n?n:e;if(n&&t==false){if(n.parent().is("[style]"))n.attr("style",n.parent().attr("style"));if(n.is("[style]"))n.find("*").attr("style",n.attr("style"))}else if(e&&t&&e.is("[style]")){var r=t.split(";");r=r[0].split(":");if(e.is(`[style*=${r[0]}]`))e.find("*").css(r[0],r[1]);R(e)}}function R(t){if(t){var t=t[0];if(document.body.createTextRange){var n=document.body.createTextRange();n.moveToElementText(t);n.select()}else if(window.getSelection){var r=window.getSelection();var n=document.createRange();if(t!="undefined"&&t!=null){n.selectNodeContents(t);r.removeAllRanges();r.addRange(n);if(e(t).is(":empty")){e(t).append(" ");R(e(t))}}}}}function U(){if(!p.data("sourceOpened")){var t=I();var n="http://";W(true);if(t){var r=t.prop("tagName").toLowerCase();if(r=="a"&&t.is("[href]")){n=t.attr("href");t.attr(S,"")}else F("a",S,"")}else y.val(n).focus();g.click((t) => {if(e(t.target).hasClass(`${u.css}_linktypetext`)||e(t.target).hasClass(`${u.css}_linktypearrow`))X(true)});w.find("a").click(function(){var t=e(this).attr(`${u.css}-linktype`);w.data("linktype",t);E.find(`.${u.css}_linktypetext`).html(w.find(`a:eq(${w.data("linktype")})`).text());V(n);X()});V(n);y.focus().val(n).bind("keypress keyup",(e) => {if(e.keyCode==13){z(h.find(`[${S}]`));return false}});b.click(() => {z(h.find(`[${S}]`))})}else W(false)}function z(t){y.focus();R(t);t.removeAttr(S);if(w.data("linktype")!="2")j("createlink",y.val());else{j("insertImage",y.val());v.find("img").each(function(){var t=e(this).prev("a");var n=e(this).next("a");if(t.length>0&&t.html()=="")t.remove();else if(n.length>0&&n.html()=="")n.remove()})}W();v.trigger("change")}function W(e){Q(`[${S}]:not([href])`);h.find(`[${S}][href]`).removeAttr(S);if(e){p.data("linkOpened",true);d.show()}else{p.data("linkOpened",false);d.hide()}X()}function X(e){if(e)w.show();else w.hide()}function V(e){var t=w.data("linktype");if(t=="1"&&(y.val()=="http://"||y.is("[value^=http://]")||!y.is("[value^=mailto]")))y.val("mailto:");else if(t!="1"&&!y.is("[value^=http://]"))y.val("http://");else y.val(e)}function J(t){if(!p.data("sourceOpened")){if(t=="fSize")styleField=P;else if(t=="colors")styleField=H;K(styleField,true);styleField.find("a").unbind("click").click(function(){var n=e(this).attr(`${u.css}-styleval`);if(t=="fSize"){styleType="font-size";n=n+u.funit}else if(t=="colors"){styleType="color";n=`rgb(${n})`}var r=G(styleType);F("span","style",`${styleType}:${n};${r}`);K("",false);e(`.${u.css}_title`).remove();v.trigger("change")})}else K(styleField,false);W(false)}function K(e,t){var n="",r=[{ d:"fsizeOpened",f:P },{ d:"cpallOpened",f:H }];if(e!=""){for(var i=0;i<r.length;i++){if(e==r[i]["f"])n=r[i]}}if(t){p.data(n["d"],true);n["f"].slideDown(100);for(var i=0;i<r.length;i++){if(n["d"]!=r[i]["d"]){p.data(r[i]["d"],false);r[i]["f"].slideUp(100)}}}else{for(var i=0;i<r.length;i++){p.data(r[i]["d"],false);r[i]["f"].slideUp(100)}}}function Q(t){h.find(t).each(function(){e(this).before(e(this).html()).remove()})}function G(e){var t=I();if(t&&t.is("[style]")&&t.css(e)!=""){var n=t.css(e);t.css(e,"");var r=t.attr("style");t.css(e,n);return r}else return""}function Y(){Z(true);D.find("a").click(function(){e("*",this).click((e) => {e.preventDefault();return false});et(e(this).text());var t=e(this).attr(`${u.css}-formatval`);j("formatBlock",`<${t}>`);Z(false)})}function Z(e){var t=e?true:false;t=e&&D.data("status")?true:false;if(t||!e)D.data("status",false).slideUp(200);else D.data("status",true).slideDown(200)}function et(e){var t=D.closest(`.${u.css}_tool`).find(`.${u.css}_tool_label`).find(`.${u.css}_tool_text`);if(e.length>10)e=`${e.substr(0,7)}...`;t.html(e)}function tt(e){var t,n,r;t=e.replace(/\n/gim,"").replace(/\r/gim,"").replace(/\t/gim,"").replace(/ /gim," ");n=[/\<span(|\s+.*?)><span(|\s+.*?)>(.*?)<\/span><\/span>/gim,/<(\w*[^p])\s*[^\/>]*>\s*<\/\1>/gim,/\<div(|\s+.*?)>(.*?)\<\/div>/gim,/\<strong(|\s+.*?)>(.*?)\<\/strong>/gim,/\<em(|\s+.*?)>(.*?)\<\/em>/gim];r=["<span$2>$3</span>","","<p$1>$2</p>","<b$1>$2</b>","<i$1>$2</i>"];for(A=0;A<5;A++){for(var i=0;i<n.length;i++){t=t.replace(n[i],r[i])}}if(!u.p)t=t.replace(/\<p(|\s+.*?)>(.*?)\<\/p>/ig,"<br/>$2");if(!u.br){n=[/\<br>(.*?)/ig,/\<br\/>(.*?)/ig];r=["<p>$1</p>","<p>$1</p>"];for(var i=0;i<n.length;i++){t=t.replace(n[i],r[i])}}if(!u.p&&!u.br)t=t.replace(/\<p>(.*?)\<\/p>/ig,"<div>$1</div>");return t}function nt(){var e=v.text()==""&&v.html().length<12?"":v.html();l.val(tt(e))}function rt(){v.html(tt(l.val()))}function it(t){var n=false,r=I(),i;if(r){e.each(t,(t,s) => {i=r.prop("tagName").toLowerCase();if(i==s)n=true;else{r.parents().each(function(){i=e(this).prop("tagName").toLowerCase();if(i==s)n=true})}});return n}else return false}function st(t){for(var n=0;n<f.length;n++){if(u[f[n].name]&&f[n].emphasis&&f[n].tag!="")it(f[n].tag)?p.find(`.${u.css}_tool_${f[n].cls}`).addClass(m):e(`.${u.css}_tool_${f[n].cls}`).removeClass(m)}if(u.format&&e.isArray(u.formats)){var r=false;for(var i=0;i<u.formats.length;i++){var s=[];s[0]=u.formats[i][0];if(u.formats[i][0].length>0&&it(s)){et(u.formats[i][1]);r=true;break}}if(!r)et(u.formats[0][1])}K("",false);Z(false)}if(!e(this).data("jqte")||e(this).data("jqte")==null||e(this).data("jqte")=="undefined")e(this).data("jqte",true);else e(this).data("jqte",false);if(!u.status||!e(this).data("jqte")){if(e(this).closest(`.${u.css}`).length>0){var t=e(this).closest(`.${u.css}`).find(`.${u.css}_editor`).html();var n="";e(e(this)[0].attributes).each(function(){if(this.nodeName!="style")n=`${n} ${this.nodeName}="${this.nodeValue}"`});var r=e(this).is("[data-origin]")&&e(this).attr("data-origin")!=""?e(this).attr("data-origin"):"textarea";var i=`>${t}`;if(r=="input"||r=="option"){t=t.replace(/"/g,"&#34;").replace(/'/g,"&#39;").replace(/</g,"<").replace(/>/g,">");i=`value="${t}">`}var o=e(this).clone();e(this).data("jqte",false).closest(`.${u.css}`).before(o).remove();o.replaceWith(`<${r}${n}${i}</${r}>`)}return}var l=e(this);var r=e(this).prop("tagName").toLowerCase();e(this).attr("data-origin",r);var c=e(this).is("[value]")||r=="textarea"?e(this).val():e(this).html();c=c.replace(/&#34;/g,'"').replace(/&#39;/g,"'").replace(/</g,"<").replace(/>/g,">").replace(/&/g,"&");e(this).after(`<div class="${u.css}"></div>`);var h=e(this).next(`.${u.css}`);h.html(`<div class="${u.css}_toolbar`+`" role="toolbar" unselectable></div><div class="${u.css}_linkform" style="display:none" role="dialog"></div><div class="${u.css}_editor`+`"></div>`);var p=h.find(`.${u.css}_toolbar`);var d=h.find(`.${u.css}_linkform`);var v=h.find(`.${u.css}_editor`);var m=`${u.css}_tool_depressed`;d.append(`<div class="${u.css}_linktypeselect" unselectable></div><input class="${u.css}_linkinput" type="text/css" value=""><div class="${u.css}_linkbutton" unselectable>${u.button}</div> <div style="height:1px;float:none;clear:both"></div>`);var g=d.find(`.${u.css}_linktypeselect`);var y=d.find(`.${u.css}_linkinput`);var b=d.find(`.${u.css}_linkbutton`);g.append(`<div class="${u.css}_linktypeview" unselectable></div><div class="${u.css}_linktypes" role="menu" unselectable></div>`);var w=g.find(`.${u.css}_linktypes`);var E=g.find(`.${u.css}_linktypeview`);var S=`${u.css}-setlink`;v.after(`<div class="${u.css}_source ${u.css}_hiddenField"></div>`);var x=h.find(`.${u.css}_source`);l.appendTo(x);if(r!="textarea"){var n="";e(l[0].attributes).each(function(){if(this.nodeName!="type"&&this.nodeName!="value")n=`${n} ${this.nodeName}="${this.nodeValue}"`});l.replaceWith(`<textarea ${n}>${c}</textarea>`);l=x.find("textarea")}v.attr("contenteditable","true").html(c);for(var T=0;T<f.length;T++){if(u[f[T].name]){var N=f[T].key.length>0?u.titletext[T].hotkey!=null&&u.titletext[T].hotkey!="undefined"&&u.titletext[T].hotkey!=""?` (Ctrl+${u.titletext[T].hotkey})`:"":"";var C=u.titletext[T].title!=null&&u.titletext[T].title!="undefined"&&u.titletext[T].title!=""?u.titletext[T].title+N:"";p.append(`<div class="${u.css}_tool ${u.css}_tool_${f[T].cls}" role="button" data-tool="${T}" unselectable><a class="${u.css}_tool_icon" unselectable></a></div>`);p.find(`.${u.css}_tool[data-tool=${T}]`).data({ tag:f[T].tag,command:f[T].command,emphasis:f[T].emphasis,title:C });if(f[T].name=="format"&&e.isArray(u.formats)){var k=u.formats[0][1].length>0&&u.formats[0][1]!="undefined"?u.formats[0][1]:"";p.find(`.${u.css}_tool_${f[T].cls}`).find(`.${u.css}_tool_icon`).replaceWith(`<a class="${u.css}_tool_label" unselectable><span class="${u.css}_tool_text" unselectable>${k}</span><span class="${u.css}_tool_icon" unselectable></span></a>`);p.find(`.${u.css}_tool_${f[T].cls}`).append(`<div class="${u.css}_formats" unselectable></div>`);for(var L=0;L<u.formats.length;L++){p.find(`.${u.css}_formats`).append(`<a ${u.css}-formatval="${u.formats[L][0]}" class="${u.css}_format`+` ${u.css}_format_${L}" role="menuitem" unselectable>${u.formats[L][1]}</a>`)}p.find(`.${u.css}_formats`).data("status",false)}else if(f[T].name=="fsize"&&e.isArray(u.fsizes)){p.find(`.${u.css}_tool_${f[T].cls}`).append(`<div class="${u.css}_fontsizes" unselectable></div>`);for(var L=0;L<u.fsizes.length;L++){p.find(`.${u.css}_fontsizes`).append(`<a ${u.css}-styleval="${u.fsizes[L]}" class="${u.css}_fontsize`+`" style="font-size:${u.fsizes[L]}${u.funit}" role="menuitem" unselectable>Abcdefgh...</a>`)}}else if(f[T].name=="color"&&e.isArray(s)){p.find(`.${u.css}_tool_${f[T].cls}`).append(`<div class="${u.css}_cpalette" unselectable></div>`);for(var A=0;A<s.length;A++){if(s[A]!=null)p.find(`.${u.css}_cpalette`).append(`<a ${u.css}-styleval="${s[A]}" class="${u.css}_color`+`" style="background-color: rgb(${s[A]})" role="gridcell" unselectable></a>`);else p.find(`.${u.css}_cpalette`).append(`<div class="${u.css}_colorSeperator`+`"></div>`)}}}}w.data("linktype","0");for(var T=0;T<3;T++){w.append(`<a ${u.css}-linktype="${T}" unselectable>${u.linktypes[T]}</a>`);E.html(`<div class="${u.css}_linktypearrow" unselectable></div><div class="${u.css}_linktypetext">${w.find(`a:eq(${w.data("linktype")})`).text()}</div>`)}var O="";if(/msie/.test(a))O="-ms-";else if(/chrome/.test(a)||/safari/.test(a)||/yandex/.test(a))O="-webkit-";else if(/mozilla/.test(a))O="-moz-";else if(/opera/.test(a))O="-o-";else if(/konqueror/.test(a))O="-khtml-";else O="";if(u.placeholder&&u.placeholder!=""){h.prepend(`<div class="${u.css}_placeholder" unselectable><div class="${u.css}_placeholder_text">${u.placeholder}</div></div>`);var M=h.find(`.${u.css}_placeholder`);M.click(() => {v.focus()})}h.find("[unselectable]").css(`${O}user-select`,"none").addClass("unselectable").attr("unselectable","on").on("selectstart mousedown",false);var _=p.find(`.${u.css}_tool`);var D=p.find(`.${u.css}_formats`);var P=p.find(`.${u.css}_fontsizes`);var H=p.find(`.${u.css}_cpalette`);var I=function(){var t,n;if(window.getSelection){n=getSelection();t=n.anchorNode}if(!t&&document.selection&&document.selection.createRange&&document.selection.type!="None"){n=document.selection;var r=n.getRangeAt?n.getRangeAt(0):n.createRange();t=r.commonAncestorContainer?r.commonAncestorContainer:r.parentElement?r.parentElement():r.item(0)}if(t){return t.nodeName=="#text"?e(t.parentNode):e(t)}else return false};_.unbind("click").click(function(t){if(e(this).data("command")=="displaysource"&&!p.data("sourceOpened")){p.find(`.${u.css}_tool`).addClass(`${u.css}_hiddenField`);e(this).removeClass(`${u.css}_hiddenField`);p.data("sourceOpened",true);l.css("height",v.outerHeight());x.removeClass(`${u.css}_hiddenField`);v.addClass(`${u.css}_hiddenField`);l.focus();W(false);K("",false);Z();if(u.placeholder&&u.placeholder!="")M.hide()}else{if(!p.data("sourceOpened")){if(e(this).data("command")=="linkcreator"){if(!p.data("linkOpened"))U();else{W(false);Z(false)}}else if(e(this).data("command")=="formats"){if(e(this).data("command")=="formats"&&!e(t.target).hasClass(`${u.css}_format`))Y();K("",false);if(v.not(":focus"))v.focus()}else if(e(this).data("command")=="fSize"||e(this).data("command")=="colors"){if(e(this).data("command")=="fSize"&&!e(t.target).hasClass(`${u.css}_fontsize`)||e(this).data("command")=="colors"&&!e(t.target).hasClass(`${u.css}_color`))J(e(this).data("command"));Z(false);if(v.not(":focus"))v.focus()}else{if(v.not(":focus"))v.focus();j(e(this).data("command"),null);K("",false);Z(false);X();e(this).data("emphasis")==true&&!e(this).hasClass(m)?e(this).addClass(m):e(this).removeClass(m);x.addClass(`${u.css}_hiddenField`);v.removeClass(`${u.css}_hiddenField`)}}else{p.data("sourceOpened",false);p.find(`.${u.css}_tool`).removeClass(`${u.css}_hiddenField`);x.addClass(`${u.css}_hiddenField`);v.removeClass(`${u.css}_hiddenField`)}if(u.placeholder&&u.placeholder!="")v.html()!=""?M.hide():M.show()}v.trigger("change")}).hover(function(t){if(u.title&&e(this).data("title")!=""&&(e(t.target).hasClass(`${u.css}_tool`)||e(t.target).hasClass(`${u.css}_tool_icon`))){e(`.${u.css}_title`).remove();h.append(`<div class="${u.css}_title"><div class="${u.css}_titleArrow"><div class="${u.css}_titleArrowIcon"></div></div><div class="${u.css}_titleText">${e(this).data("title")}</div></div>`);var n=e(`.${u.css}_title:first`);var r=n.find(`.${u.css}_titleArrowIcon`);var i=e(this).position();var s=i.left+e(this).outerWidth()-n.outerWidth()/2-e(this).outerWidth()/2;var o=i.top+e(this).outerHeight()+5;n.delay(400).css({ top:o,left:s }).fadeIn(200)}},() => {e(`.${u.css}_title`).remove()});var ot=null;v.bind("keypress keyup keydown drop cut copy paste DOMCharacterDataModified DOMSubtreeModified",function(){if(!p.data("sourceOpened"))e(this).trigger("change");X();if(e.isFunction(u.change))u.change();if(u.placeholder&&u.placeholder!="")e(this).text()!=""?M.hide():M.show()}).bind("change",() => {if(!p.data("sourceOpened")){clearTimeout(ot);ot=setTimeout(nt,10)}}).keydown((e) => {if(e.ctrlKey){for(var t=0;t<f.length;t++){if(u[f[t].name]&&e.keyCode==f[t].key.charCodeAt(0)){if(f[t].command!=""&&f[t].command!="linkcreator")j(f[t].command,null);else if(f[t].command=="linkcreator")U();return false}}}}).bind("mouseup keyup",st).focus(() => {if(e.isFunction(u.focus))u.focus();h.addClass(`${u.css}_focused`);if(/opera/.test(a)){var t=document.createRange();t.selectNodeContents(v[0]);t.collapse(false);var n=window.getSelection();n.removeAllRanges();n.addRange(t)}}).focusout(() => {_.removeClass(m);K("",false);Z(false);X();if(e.isFunction(u.blur))u.blur();h.removeClass(`${u.css}_focused`);if(e.isArray(u.formats))et(u.formats[0][1])});l.bind("keydown keyup",function(){setTimeout(rt,0);e(this).height(e(this)[0].scrollHeight);if(e(this).val()=="")e(this).height(0)}).focus(() => {h.addClass(`${u.css}_focused`)}).focusout(() => {h.removeClass(`${u.css}_focused`)})})}})(jQuery)

2660
src/thirdparty/jQuery-TE_v.1.4.0/uncompressed/jquery-te-1.4.0.js vendored
View File

@ -8,1340 +8,1330 @@
*/ */
(function($){ (function($){
$.fn.jqte = function(options){ $.fn.jqte = function(options){
// default titles of buttons // default titles of buttons
var varsTitle = [ var varsTitle = [
{title:"Text Format"}, { title:"Text Format" },
{title:"Font Size"}, { title:"Font Size" },
{title:"Color"}, { title:"Color" },
{title:"Bold",hotkey:"B"}, { title:"Bold",hotkey:"B" },
{title:"Italic",hotkey:"I"}, { title:"Italic",hotkey:"I" },
{title:"Underline",hotkey:"U"}, { title:"Underline",hotkey:"U" },
{title:"Ordered List",hotkey:"."}, { title:"Ordered List",hotkey:"." },
{title:"Unordered List",hotkey:","}, { title:"Unordered List",hotkey:"," },
{title:"Subscript",hotkey:"down arrow"}, { title:"Subscript",hotkey:"down arrow" },
{title:"Superscript",hotkey:"up arrow"}, { title:"Superscript",hotkey:"up arrow" },
{title:"Outdent",hotkey:"left arrow"}, { title:"Outdent",hotkey:"left arrow" },
{title:"Indent",hotkey:"right arrow"}, { title:"Indent",hotkey:"right arrow" },
{title:"Justify Left"}, { title:"Justify Left" },
{title:"Justify Center"}, { title:"Justify Center" },
{title:"Justify Right"}, { title:"Justify Right" },
{title:"Strike Through",hotkey:"K"}, { title:"Strike Through",hotkey:"K" },
{title:"Add Link",hotkey:"L"}, { title:"Add Link",hotkey:"L" },
{title:"Remove Link"}, { title:"Remove Link" },
{title:"Cleaner Style",hotkey:"Delete"}, { title:"Cleaner Style",hotkey:"Delete" },
{title:"Horizontal Rule",hotkey:"H"}, { title:"Horizontal Rule",hotkey:"H" },
{title:"Source"} { title:"Source" },
]; ];
// default text formats // default text formats
var formats = [["p","Normal"],["h1","Header 1"],["h2","Header 2"],["h3","Header 3"],["h4","Header 4"],["h5","Header 5"],["h6","Header 6"],["pre","Preformatted"]]; var formats = [["p","Normal"],["h1","Header 1"],["h2","Header 2"],["h3","Header 3"],["h4","Header 4"],["h5","Header 5"],["h6","Header 6"],["pre","Preformatted"]];
// default font sizes // default font sizes
var fsizes = ["10","12","16","18","20","24","28"]; var fsizes = ["10","12","16","18","20","24","28"];
// default rgb values of colors // default rgb values of colors
var colors = [ var colors = [
"0,0,0","68,68,68","102,102,102","153,153,153","204,204,204","238,238,238","243,243,243","255,255,255", "0,0,0","68,68,68","102,102,102","153,153,153","204,204,204","238,238,238","243,243,243","255,255,255",
null, null,
"255,0,0","255,153,0","255,255,0","0,255,0","0,255,255","0,0,255","153,0,255","255,0,255", "255,0,0","255,153,0","255,255,0","0,255,0","0,255,255","0,0,255","153,0,255","255,0,255",
null, null,
"244,204,204","252,229,205","255,242,204","217,234,211","208,224,227","207,226,243","217,210,233","234,209,220", "244,204,204","252,229,205","255,242,204","217,234,211","208,224,227","207,226,243","217,210,233","234,209,220",
"234,153,153","249,203,156","255,229,153","182,215,168","162,196,201","159,197,232","180,167,214","213,166,189", "234,153,153","249,203,156","255,229,153","182,215,168","162,196,201","159,197,232","180,167,214","213,166,189",
"224,102,102","246,178,107","255,217,102","147,196,125","118,165,175","111,168,220","142,124,195","194,123,160", "224,102,102","246,178,107","255,217,102","147,196,125","118,165,175","111,168,220","142,124,195","194,123,160",
"204,0,0","230,145,56","241,194,50","106,168,79","69,129,142","61,133,198","103,78,167","166,77,121", "204,0,0","230,145,56","241,194,50","106,168,79","69,129,142","61,133,198","103,78,167","166,77,121",
"153,0,0","180,95,6","191,144,0","56,118,29","19,79,92","11,83,148","53,28,117","116,27,71", "153,0,0","180,95,6","191,144,0","56,118,29","19,79,92","11,83,148","53,28,117","116,27,71",
"102,0,0","120,63,4","127,96,0","39,78,19","12,52,61","7,55,99","32,18,77","76,17,48" "102,0,0","120,63,4","127,96,0","39,78,19","12,52,61","7,55,99","32,18,77","76,17,48",
]; ];
// default link-type names // default link-type names
var linktypes = ["Web Address","E-mail Address","Picture URL"]; var linktypes = ["Web Address","E-mail Address","Picture URL"];
var vars = $.extend({ var vars = $.extend({
// options // options
'status' : true, 'status' : true,
'css' : "jqte", 'css' : "jqte",
'title' : true, 'title' : true,
'titletext' : varsTitle, 'titletext' : varsTitle,
'button' : "OK", 'button' : "OK",
'format' : true, 'format' : true,
'formats' : formats, formats,
'fsize' : true, 'fsize' : true,
'fsizes' : fsizes, fsizes,
'funit' : "px", 'funit' : "px",
'color' : true, 'color' : true,
'linktypes' : linktypes, linktypes,
'b' : true, 'b' : true,
'i' : true, 'i' : true,
'u' : true, 'u' : true,
'ol' : true, 'ol' : true,
'ul' : true, 'ul' : true,
'sub' : true, 'sub' : true,
'sup' : true, 'sup' : true,
'outdent' : true, 'outdent' : true,
'indent' : true, 'indent' : true,
'left' : true, 'left' : true,
'center' : true, 'center' : true,
'right' : true, 'right' : true,
'strike' : true, 'strike' : true,
'link' : true, 'link' : true,
'unlink' : true, 'unlink' : true,
'remove' : true, 'remove' : true,
'rule' : true, 'rule' : true,
'source' : true, 'source' : true,
'placeholder' : false, 'placeholder' : false,
'br' : true, 'br' : true,
'p' : true, 'p' : true,
// events // events
'change' : "", 'change' : "",
'focus' : "", 'focus' : "",
'blur' : "" 'blur' : "",
}, options); }, options);
// methods // methods
$.fn.jqteVal = function(value){ $.fn.jqteVal = function(value){
$(this).closest("."+vars.css).find("."+vars.css+"_editor").html(value); $(this).closest(`.${vars.css}`).find(`.${vars.css}_editor`).html(value);
} }
// browser information is received // browser information is received
var thisBrowser = navigator.userAgent.toLowerCase(); var thisBrowser = navigator.userAgent.toLowerCase();
// if browser is ie and it version is 7 or even older, close title property // if browser is ie and it version is 7 or even older, close title property
if(/msie [1-7]./.test(thisBrowser)) if(/msie [1-7]./.test(thisBrowser))
vars.title = false; vars.title = false;
var buttons = []; var buttons = [];
// insertion function for parameters to toolbar // insertion function for parameters to toolbar
function addParams(name,command,key,tag,emphasis) function addParams(name,command,key,tag,emphasis)
{ {
var thisCssNo = buttons.length+1; var thisCssNo = buttons.length+1;
return buttons.push({name:name, cls:thisCssNo, command:command, key:key, tag:tag, emphasis:emphasis}); return buttons.push({ name, cls:thisCssNo, command, key, tag, emphasis });
}; };
// add parameters for toolbar buttons // add parameters for toolbar buttons
addParams('format','formats','','',false); // text format button --> no hotkey addParams('format','formats','','',false); // text format button --> no hotkey
addParams('fsize','fSize','','',false); // font size button --> no hotkey addParams('fsize','fSize','','',false); // font size button --> no hotkey
addParams('color','colors','','',false); // text color button --> no hotkey addParams('color','colors','','',false); // text color button --> no hotkey
addParams('b','Bold','B',["b","strong"],true); // bold --> ctrl + b addParams('b','Bold','B',["b","strong"],true); // bold --> ctrl + b
addParams('i','Italic','I',["i","em"],true); // italic --> ctrl + i addParams('i','Italic','I',["i","em"],true); // italic --> ctrl + i
addParams('u','Underline','U',["u"],true); // underline --> ctrl + u addParams('u','Underline','U',["u"],true); // underline --> ctrl + u
addParams('ol','insertorderedlist','¾',["ol"],true); // ordered list --> ctrl + .(dot) addParams('ol','insertorderedlist','¾',["ol"],true); // ordered list --> ctrl + .(dot)
addParams('ul','insertunorderedlist','¼',["ul"],true); // unordered list --> ctrl + ,(comma) addParams('ul','insertunorderedlist','¼',["ul"],true); // unordered list --> ctrl + ,(comma)
addParams('sub','subscript','(',["sub"],true); // sub script --> ctrl + down arrow addParams('sub','subscript','(',["sub"],true); // sub script --> ctrl + down arrow
addParams('sup','superscript','&',["sup"],true); // super script --> ctrl + up arrow addParams('sup','superscript','&',["sup"],true); // super script --> ctrl + up arrow
addParams('outdent','outdent','%',["blockquote"],false); // outdent --> ctrl + left arrow addParams('outdent','outdent','%',["blockquote"],false); // outdent --> ctrl + left arrow
addParams('indent','indent','\'',["blockquote"],true); // indent --> ctrl + right arrow addParams('indent','indent','\'',["blockquote"],true); // indent --> ctrl + right arrow
addParams('left','justifyLeft','','',false); // justify Left --> no hotkey addParams('left','justifyLeft','','',false); // justify Left --> no hotkey
addParams('center','justifyCenter','','',false); // justify center --> no hotkey addParams('center','justifyCenter','','',false); // justify center --> no hotkey
addParams('right','justifyRight','','',false); // justify right --> no hotkey addParams('right','justifyRight','','',false); // justify right --> no hotkey
addParams('strike','strikeThrough','K',["strike"],true); // strike through --> ctrl + K addParams('strike','strikeThrough','K',["strike"],true); // strike through --> ctrl + K
addParams('link','linkcreator','L',["a"],true); // insertion link --> ctrl + L addParams('link','linkcreator','L',["a"],true); // insertion link --> ctrl + L
addParams('unlink','unlink','',["a"],false); // remove link --> ctrl + N addParams('unlink','unlink','',["a"],false); // remove link --> ctrl + N
addParams('remove','removeformat','.','',false); // remove all styles --> ctrl + delete addParams('remove','removeformat','.','',false); // remove all styles --> ctrl + delete
addParams('rule','inserthorizontalrule','H',["hr"],false); // insertion horizontal rule --> ctrl + H addParams('rule','inserthorizontalrule','H',["hr"],false); // insertion horizontal rule --> ctrl + H
addParams('source','displaysource','','',false); // feature of displaying source addParams('source','displaysource','','',false); // feature of displaying source
return this.each(function(){ return this.each(function(){
if(!$(this).data("jqte") || $(this).data("jqte")==null || $(this).data("jqte")=="undefined") if(!$(this).data("jqte") || $(this).data("jqte")==null || $(this).data("jqte")=="undefined")
$(this).data("jqte",true); $(this).data("jqte",true);
else else
$(this).data("jqte",false); $(this).data("jqte",false);
// is the status false of the editor // is the status false of the editor
if(!vars.status || !$(this).data("jqte")) if(!vars.status || !$(this).data("jqte"))
{ {
// if wanting the false status later // if wanting the false status later
if($(this).closest("."+vars.css).length>0) if($(this).closest(`.${vars.css}`).length>0)
{ {
var editorValue = $(this).closest("."+vars.css).find("."+vars.css+"_editor").html(); var editorValue = $(this).closest(`.${vars.css}`).find(`.${vars.css}_editor`).html();
// add all attributes of element // add all attributes of element
var thisElementAttrs = ""; var thisElementAttrs = "";
$($(this)[0].attributes).each(function() $($(this)[0].attributes).each(function()
{ {
if(this.nodeName!="style") if(this.nodeName!="style")
thisElementAttrs = thisElementAttrs+" "+this.nodeName+'="'+this.nodeValue+'"'; thisElementAttrs = `${thisElementAttrs} ${this.nodeName}="${this.nodeValue}"`;
}); });
var thisElementTag = $(this).is("[data-origin]") && $(this).attr("data-origin")!="" ? $(this).attr("data-origin") : "textarea"; var thisElementTag = $(this).is("[data-origin]") && $(this).attr("data-origin")!="" ? $(this).attr("data-origin") : "textarea";
// the contents of this element // the contents of this element
var createValue = '>'+editorValue; var createValue = `>${editorValue}`;
// if this element is input or option // if this element is input or option
if(thisElementTag=="input" || thisElementTag=="option") if(thisElementTag=="input" || thisElementTag=="option")
{ {
// encode special html characters // encode special html characters
editorValue = editorValue.replace(/"/g,'&#34;').replace(/'/g,'&#39;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); editorValue = editorValue.replace(/"/g,'&#34;').replace(/'/g,'&#39;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
// the value of this element // the value of this element
createValue = 'value="'+editorValue+'">'; createValue = `value="${editorValue}">`;
} }
var thisClone = $(this).clone(); var thisClone = $(this).clone();
$(this).data("jqte",false).closest("."+vars.css).before(thisClone).remove(); $(this).data("jqte",false).closest(`.${vars.css}`).before(thisClone).remove();
thisClone.replaceWith('<'+ thisElementTag + thisElementAttrs + createValue + '</'+thisElementTag+'>'); thisClone.replaceWith(`<${ thisElementTag }${thisElementAttrs }${createValue }</${thisElementTag}>`);
} }
return; return;
} }
// element will converted to the jqte editor // element will converted to the jqte editor
var thisElement = $(this); var thisElement = $(this);
// tag name of the element // tag name of the element
var thisElementTag = $(this).prop('tagName').toLowerCase(); var thisElementTag = $(this).prop('tagName').toLowerCase();
// tag name of origin // tag name of origin
$(this).attr("data-origin",thisElementTag); $(this).attr("data-origin",thisElementTag);
// contents of the element // contents of the element
var thisElementVal = $(this).is("[value]") || thisElementTag == "textarea" ? $(this).val() : $(this).html(); var thisElementVal = $(this).is("[value]") || thisElementTag == "textarea" ? $(this).val() : $(this).html();
// decode special html characters // decode special html characters
thisElementVal = thisElementVal.replace(/&#34;/g,'"').replace(/&#39;/g,"'").replace(/&lt;/g,'<').replace(/&gt;/g,'>').replace(/&amp;/g,'&'); thisElementVal = thisElementVal.replace(/&#34;/g,'"').replace(/&#39;/g,"'").replace(/&lt;/g,'<').replace(/&gt;/g,'>').replace(/&amp;/g,'&');
// start jqte editor to after the element // start jqte editor to after the element
$(this).after('<div class="'+vars.css+'"></div>'); $(this).after(`<div class="${vars.css}"></div>`);
// jqte // jqte
var jQTE = $(this).next('.'+vars.css); var jQTE = $(this).next(`.${vars.css}`);
// insert toolbar in jqte editor // insert toolbar in jqte editor
jQTE.html('<div class="'+vars.css+"_toolbar"+'" role="toolbar" unselectable></div><div class="'+vars.css+'_linkform" style="display:none" role="dialog"></div><div class="'+vars.css+"_editor"+'"></div>'); jQTE.html(`<div class="${vars.css}_toolbar`+`" role="toolbar" unselectable></div><div class="${vars.css}_linkform" style="display:none" role="dialog"></div><div class="${vars.css}_editor`+`"></div>`);
var toolbar = jQTE.find('.'+vars.css+"_toolbar"); // the toolbar variable var toolbar = jQTE.find(`.${vars.css}_toolbar`); // the toolbar variable
var linkform = jQTE.find('.'+vars.css+"_linkform"); // the link-form-area in the toolbar variable var linkform = jQTE.find(`.${vars.css}_linkform`); // the link-form-area in the toolbar variable
var editor = jQTE.find('.'+vars.css+"_editor"); // the text-field of jqte editor var editor = jQTE.find(`.${vars.css}_editor`); // the text-field of jqte editor
var emphasize = vars.css+"_tool_depressed"; // highlight style of the toolbar buttons var emphasize = `${vars.css}_tool_depressed`; // highlight style of the toolbar buttons
// add to some tools in link form area // add to some tools in link form area
linkform.append('<div class="'+vars.css+'_linktypeselect" unselectable></div><input class="'+vars.css+'_linkinput" type="text/css" value=""><div class="'+vars.css+'_linkbutton" unselectable>'+vars.button+'</div> <div style="height:1px;float:none;clear:both"></div>'); linkform.append(`<div class="${vars.css}_linktypeselect" unselectable></div><input class="${vars.css}_linkinput" type="text/css" value=""><div class="${vars.css}_linkbutton" unselectable>${vars.button}</div> <div style="height:1px;float:none;clear:both"></div>`);
var linktypeselect = linkform.find("."+vars.css+"_linktypeselect"); // the tool of link-type-selector var linktypeselect = linkform.find(`.${vars.css}_linktypeselect`); // the tool of link-type-selector
var linkinput = linkform.find("."+vars.css+"_linkinput"); // the input of insertion link var linkinput = linkform.find(`.${vars.css}_linkinput`); // the input of insertion link
var linkbutton = linkform.find("."+vars.css+"_linkbutton"); // the button of insertion link var linkbutton = linkform.find(`.${vars.css}_linkbutton`); // the button of insertion link
// add to the link-type-selector sub tool parts // add to the link-type-selector sub tool parts
linktypeselect.append('<div class="'+vars.css+'_linktypeview" unselectable></div><div class="'+vars.css+'_linktypes" role="menu" unselectable></div>'); linktypeselect.append(`<div class="${vars.css}_linktypeview" unselectable></div><div class="${vars.css}_linktypes" role="menu" unselectable></div>`);
var linktypes = linktypeselect.find("."+vars.css+"_linktypes"); // the select box of link types var linktypes = linktypeselect.find(`.${vars.css}_linktypes`); // the select box of link types
var linktypeview = linktypeselect.find("."+vars.css+"_linktypeview"); // the link type preview var linktypeview = linktypeselect.find(`.${vars.css}_linktypeview`); // the link type preview
var setdatalink = vars.css+"-setlink"; // the selected text add to mark as "link will be added" var setdatalink = `${vars.css}-setlink`; // the selected text add to mark as "link will be added"
// create to the source-area // create to the source-area
editor.after('<div class="'+vars.css+'_source '+vars.css+'_hiddenField"></div>'); editor.after(`<div class="${vars.css}_source ${vars.css}_hiddenField"></div>`);
var sourceField = jQTE.find("."+vars.css+"_source"); // the source-area variable var sourceField = jQTE.find(`.${vars.css}_source`); // the source-area variable
// move the element to the source-area // move the element to the source-area
thisElement.appendTo(sourceField); thisElement.appendTo(sourceField);
// if the element isn't a textarea, convert this to textarea // if the element isn't a textarea, convert this to textarea
if(thisElementTag!="textarea") if(thisElementTag!="textarea")
{ {
// add all attributes of element to new textarea (type and value except) // add all attributes of element to new textarea (type and value except)
var thisElementAttrs = ""; var thisElementAttrs = "";
$(thisElement[0].attributes).each(function(){ $(thisElement[0].attributes).each(function(){
if(this.nodeName!="type" && this.nodeName!="value") if(this.nodeName!="type" && this.nodeName!="value")
thisElementAttrs = thisElementAttrs+" "+this.nodeName+'="'+this.nodeValue+'"'; thisElementAttrs = `${thisElementAttrs} ${this.nodeName}="${this.nodeValue}"`;
}); });
// convert the element to textarea // convert the element to textarea
thisElement.replaceWith('<textarea '+thisElementAttrs+'>'+thisElementVal+'</textarea>'); thisElement.replaceWith(`<textarea ${thisElementAttrs}>${thisElementVal}</textarea>`);
// update to variable of thisElement // update to variable of thisElement
thisElement = sourceField.find("textarea"); thisElement = sourceField.find("textarea");
} }
// add feature editable to the text-field ve copy from the element's value to text-field // add feature editable to the text-field ve copy from the element's value to text-field
editor.attr("contenteditable","true").html(thisElementVal); editor.attr("contenteditable","true").html(thisElementVal);
// insertion the toolbar button // insertion the toolbar button
for(var n = 0; n < buttons.length; n++) for(var n = 0; n < buttons.length; n++)
{ {
// if setting of this button is activated (is it true?) // if setting of this button is activated (is it true?)
if(vars[buttons[n].name]) if(vars[buttons[n].name])
{ {
// if it have a title, add to this button // if it have a title, add to this button
var buttonHotkey = buttons[n].key.length>0 ? vars.titletext[n].hotkey!=null && vars.titletext[n].hotkey!="undefined" && vars.titletext[n].hotkey!="" ? ' (Ctrl+'+vars.titletext[n].hotkey+')' : '' : ''; var buttonHotkey = buttons[n].key.length>0 ? vars.titletext[n].hotkey!=null && vars.titletext[n].hotkey!="undefined" && vars.titletext[n].hotkey!="" ? ` (Ctrl+${vars.titletext[n].hotkey})` : '' : '';
var buttonTitle = vars.titletext[n].title!=null && vars.titletext[n].title!="undefined" && vars.titletext[n].title!="" ? vars.titletext[n].title+buttonHotkey : ''; var buttonTitle = vars.titletext[n].title!=null && vars.titletext[n].title!="undefined" && vars.titletext[n].title!="" ? vars.titletext[n].title+buttonHotkey : '';
// add this button to the toolbar // add this button to the toolbar
toolbar.append('<div class="'+vars.css+'_tool '+vars.css+'_tool_'+buttons[n].cls+'" role="button" data-tool="'+n+'" unselectable><a class="'+vars.css+'_tool_icon" unselectable></a></div>'); toolbar.append(`<div class="${vars.css}_tool ${vars.css}_tool_${buttons[n].cls}" role="button" data-tool="${n}" unselectable><a class="${vars.css}_tool_icon" unselectable></a></div>`);
// add the parameters to this button // add the parameters to this button
toolbar.find('.'+vars.css+'_tool[data-tool='+n+']').data({tag : buttons[n].tag, command : buttons[n].command, emphasis : buttons[n].emphasis, title : buttonTitle}); toolbar.find(`.${vars.css}_tool[data-tool=${n}]`).data({ tag : buttons[n].tag, command : buttons[n].command, emphasis : buttons[n].emphasis, title : buttonTitle });
// format-selector field // format-selector field
if(buttons[n].name=="format" && $.isArray(vars.formats)) if(buttons[n].name=="format" && $.isArray(vars.formats))
{ {
// selected text format // selected text format
var toolLabel = vars.formats[0][1].length>0 && vars.formats[0][1]!="undefined" ? vars.formats[0][1] : ""; var toolLabel = vars.formats[0][1].length>0 && vars.formats[0][1]!="undefined" ? vars.formats[0][1] : "";
toolbar.find("."+vars.css+'_tool_'+buttons[n].cls).find("."+vars.css+"_tool_icon").replaceWith('<a class="'+vars.css+'_tool_label" unselectable><span class="'+vars.css+'_tool_text" unselectable>'+toolLabel+'</span><span class="'+vars.css+'_tool_icon" unselectable></span></a>'); toolbar.find(`.${vars.css}_tool_${buttons[n].cls}`).find(`.${vars.css}_tool_icon`).replaceWith(`<a class="${vars.css}_tool_label" unselectable><span class="${vars.css}_tool_text" unselectable>${toolLabel}</span><span class="${vars.css}_tool_icon" unselectable></span></a>`);
toolbar.find("."+vars.css+'_tool_'+buttons[n].cls) toolbar.find(`.${vars.css}_tool_${buttons[n].cls}`)
.append('<div class="'+vars.css+'_formats" unselectable></div>'); .append(`<div class="${vars.css}_formats" unselectable></div>`);
// add font-sizes to font-size-selector // add font-sizes to font-size-selector
for(var f = 0; f < vars.formats.length; f++) for(var f = 0; f < vars.formats.length; f++)
{ {
toolbar.find("."+vars.css+"_formats").append('<a '+vars.css+'-formatval="'+ vars.formats[f][0] +'" class="'+vars.css+'_format'+' '+vars.css+'_format_'+f+'" role="menuitem" unselectable>'+ vars.formats[f][1] +'</a>'); toolbar.find(`.${vars.css}_formats`).append(`<a ${vars.css}-formatval="${ vars.formats[f][0] }" class="${vars.css}_format`+` ${vars.css}_format_${f}" role="menuitem" unselectable>${ vars.formats[f][1] }</a>`);
} }
toolbar.find("."+vars.css+"_formats").data("status",false); toolbar.find(`.${vars.css}_formats`).data("status",false);
} }
// font-size-selector field // font-size-selector field
else if(buttons[n].name=="fsize" && $.isArray(vars.fsizes)) else if(buttons[n].name=="fsize" && $.isArray(vars.fsizes))
{ {
toolbar.find("."+vars.css+'_tool_'+buttons[n].cls) toolbar.find(`.${vars.css}_tool_${buttons[n].cls}`)
.append('<div class="'+vars.css+'_fontsizes" unselectable></div>'); .append(`<div class="${vars.css}_fontsizes" unselectable></div>`);
// add font-sizes to font-size-selector // add font-sizes to font-size-selector
for(var f = 0; f < vars.fsizes.length; f++) for(var f = 0; f < vars.fsizes.length; f++)
{ {
toolbar.find("."+vars.css+"_fontsizes").append('<a '+vars.css+'-styleval="'+ vars.fsizes[f] +'" class="'+vars.css+'_fontsize'+'" style="font-size:'+ vars.fsizes[f] + vars.funit+'" role="menuitem" unselectable>Abcdefgh...</a>'); toolbar.find(`.${vars.css}_fontsizes`).append(`<a ${vars.css}-styleval="${ vars.fsizes[f] }" class="${vars.css}_fontsize`+`" style="font-size:${ vars.fsizes[f] }${vars.funit}" role="menuitem" unselectable>Abcdefgh...</a>`);
} }
} }
// color-selector field // color-selector field
else if(buttons[n].name=="color" && $.isArray(colors)) else if(buttons[n].name=="color" && $.isArray(colors))
{ {
toolbar.find("."+vars.css+'_tool_'+buttons[n].cls) toolbar.find(`.${vars.css}_tool_${buttons[n].cls}`)
.append('<div class="'+vars.css+'_cpalette" unselectable></div>'); .append(`<div class="${vars.css}_cpalette" unselectable></div>`);
// create color palette to color-selector field // create color palette to color-selector field
for(var c = 0; c < colors.length; c++) for(var c = 0; c < colors.length; c++)
{ {
if(colors[c]!=null) if(colors[c]!=null)
toolbar.find("."+vars.css+"_cpalette").append('<a '+vars.css+'-styleval="'+ colors[c] +'" class="'+vars.css+'_color'+'" style="background-color: rgb('+ colors[c] +')" role="gridcell" unselectable></a>'); toolbar.find(`.${vars.css}_cpalette`).append(`<a ${vars.css}-styleval="${ colors[c] }" class="${vars.css}_color`+`" style="background-color: rgb(${ colors[c] })" role="gridcell" unselectable></a>`);
else else
toolbar.find("."+vars.css+"_cpalette").append('<div class="'+vars.css+"_colorSeperator"+'"></div>'); toolbar.find(`.${vars.css}_cpalette`).append(`<div class="${vars.css}_colorSeperator`+`"></div>`);
} }
} }
} }
} }
// the default value of the link-type // the default value of the link-type
linktypes.data("linktype","0"); linktypes.data("linktype","0");
// add link types to link-type-selector // add link types to link-type-selector
for(var n = 0; n < 3; n++) for(var n = 0; n < 3; n++)
{ {
linktypes.append('<a '+vars.css+'-linktype="'+n+'" unselectable>'+vars.linktypes[n]+'</a>'); linktypes.append(`<a ${vars.css}-linktype="${n}" unselectable>${vars.linktypes[n]}</a>`);
linktypeview.html('<div class="'+vars.css+'_linktypearrow" unselectable></div><div class="'+vars.css+'_linktypetext">'+linktypes.find('a:eq('+linktypes.data("linktype")+')').text()+'</div>'); linktypeview.html(`<div class="${vars.css}_linktypearrow" unselectable></div><div class="${vars.css}_linktypetext">${linktypes.find(`a:eq(${linktypes.data("linktype")})`).text()}</div>`);
} }
// add the prefix of css according to browser // add the prefix of css according to browser
var prefixCss = ""; var prefixCss = "";
if(/msie/.test(thisBrowser)) // ie if(/msie/.test(thisBrowser)) // ie
prefixCss = '-ms-'; prefixCss = '-ms-';
else if(/chrome/.test(thisBrowser) || /safari/.test(thisBrowser) || /yandex/.test(thisBrowser)) // webkit group (safari, chrome, yandex) else if(/chrome/.test(thisBrowser) || /safari/.test(thisBrowser) || /yandex/.test(thisBrowser)) // webkit group (safari, chrome, yandex)
prefixCss = '-webkit-'; prefixCss = '-webkit-';
else if(/mozilla/.test(thisBrowser)) // firefox else if(/mozilla/.test(thisBrowser)) // firefox
prefixCss = '-moz-'; prefixCss = '-moz-';
else if(/opera/.test(thisBrowser)) // opera else if(/opera/.test(thisBrowser)) // opera
prefixCss = '-o-'; prefixCss = '-o-';
else if(/konqueror/.test(thisBrowser)) // konqueror else if(/konqueror/.test(thisBrowser)) // konqueror
prefixCss = '-khtml-'; prefixCss = '-khtml-';
else else
prefixCss = ''; prefixCss = '';
// the feature of placeholder // the feature of placeholder
if(vars.placeholder && vars.placeholder!="") if(vars.placeholder && vars.placeholder!="")
{ {
jQTE.prepend('<div class="'+vars.css+'_placeholder" unselectable><div class="'+vars.css+'_placeholder_text">'+vars.placeholder+'</div></div>'); jQTE.prepend(`<div class="${vars.css}_placeholder" unselectable><div class="${vars.css}_placeholder_text">${vars.placeholder}</div></div>`);
var placeHolder = jQTE.find("."+vars.css+"_placeholder"); var placeHolder = jQTE.find(`.${vars.css}_placeholder`);
placeHolder.click(function(){ placeHolder.click(() => {
editor.focus(); editor.focus();
}); });
} }
// make unselectable to unselectable attribute ones // make unselectable to unselectable attribute ones
jQTE.find("[unselectable]") jQTE.find("[unselectable]")
.css(prefixCss+"user-select","none") .css(`${prefixCss}user-select`,"none")
.addClass("unselectable") .addClass("unselectable")
.attr("unselectable","on") .attr("unselectable","on")
.on("selectstart mousedown",false); .on("selectstart mousedown",false);
// each button of the toolbar // each button of the toolbar
var toolbutton = toolbar.find("."+vars.css+"_tool"); var toolbutton = toolbar.find(`.${vars.css}_tool`);
// format menu // format menu
var formatbar = toolbar.find("."+vars.css+"_formats"); var formatbar = toolbar.find(`.${vars.css}_formats`);
// font-size filed // font-size filed
var fsizebar = toolbar.find("."+vars.css+"_fontsizes"); var fsizebar = toolbar.find(`.${vars.css}_fontsizes`);
// color palette // color palette
var cpalette = toolbar.find("."+vars.css+"_cpalette"); var cpalette = toolbar.find(`.${vars.css}_cpalette`);
// get the selected text as plain format // get the selected text as plain format
function selectionGet() function selectionGet()
{ {
// for webkit, mozilla, opera // for webkit, mozilla, opera
if (window.getSelection) if (window.getSelection)
return window.getSelection(); return window.getSelection();
// for ie // for ie
else if (document.selection && document.selection.createRange && document.selection.type != "None") else if (document.selection && document.selection.createRange && document.selection.type != "None")
return document.selection.createRange(); return document.selection.createRange();
} }
// the function of changing to the selected text with "execCommand" method // the function of changing to the selected text with "execCommand" method
function selectionSet(addCommand,thirdParam) function selectionSet(addCommand,thirdParam)
{ {
var range, var range,
sel = selectionGet(); sel = selectionGet();
// for webkit, mozilla, opera // for webkit, mozilla, opera
if (window.getSelection) if (window.getSelection)
{ {
if (sel.anchorNode && sel.getRangeAt) if (sel.anchorNode && sel.getRangeAt)
range = sel.getRangeAt(0); range = sel.getRangeAt(0);
if(range) if(range)
{ {
sel.removeAllRanges(); sel.removeAllRanges();
sel.addRange(range); sel.addRange(range);
} }
if(!thisBrowser.match(/msie/)) if(!thisBrowser.match(/msie/))
document.execCommand('StyleWithCSS', false, false); document.execCommand('StyleWithCSS', false, false);
document.execCommand(addCommand, false, thirdParam); document.execCommand(addCommand, false, thirdParam);
} }
// for ie // for ie
else if (document.selection && document.selection.createRange && document.selection.type != "None") else if (document.selection && document.selection.createRange && document.selection.type != "None")
{ {
range = document.selection.createRange(); range = document.selection.createRange();
range.execCommand(addCommand, false, thirdParam); range.execCommand(addCommand, false, thirdParam);
} }
// change styles to around tags // change styles to around tags
affectStyleAround(false,false); affectStyleAround(false,false);
} }
// the function of changing to the selected text with tags and tags's attributes // the function of changing to the selected text with tags and tags's attributes
function replaceSelection(tTag,tAttr,tVal) { function replaceSelection(tTag,tAttr,tVal) {
// first, prevent to conflict of different jqte editors // first, prevent to conflict of different jqte editors
if(editor.not(":focus")) if(editor.not(":focus"))
editor.focus(); editor.focus();
// for webkit, mozilla, opera // for webkit, mozilla, opera
if (window.getSelection) if (window.getSelection)
{ {
var selObj = selectionGet(), selRange, newElement, documentFragment; var selObj = selectionGet(), selRange, newElement, documentFragment;
if (selObj.anchorNode && selObj.getRangeAt) if (selObj.anchorNode && selObj.getRangeAt)
{ {
selRange = selObj.getRangeAt(0); selRange = selObj.getRangeAt(0);
// create to new element // create to new element
newElement = document.createElement(tTag); newElement = document.createElement(tTag);
// add the attribute to the new element // add the attribute to the new element
$(newElement).attr(tAttr,tVal); $(newElement).attr(tAttr,tVal);
// extract to the selected text // extract to the selected text
documentFragment = selRange.extractContents(); documentFragment = selRange.extractContents();
// add the contents to the new element // add the contents to the new element
newElement.appendChild(documentFragment); newElement.appendChild(documentFragment);
selRange.insertNode(newElement); selRange.insertNode(newElement);
selObj.removeAllRanges(); selObj.removeAllRanges();
// if the attribute is "style", change styles to around tags // if the attribute is "style", change styles to around tags
if(tAttr=="style") if(tAttr=="style")
affectStyleAround($(newElement),tVal); affectStyleAround($(newElement),tVal);
// for other attributes // for other attributes
else else
affectStyleAround($(newElement),false); affectStyleAround($(newElement),false);
} }
} }
// for ie // for ie
else if (document.selection && document.selection.createRange && document.selection.type != "None") else if (document.selection && document.selection.createRange && document.selection.type != "None")
{ {
var range = document.selection.createRange(); var range = document.selection.createRange();
var selectedText = range.htmlText; var selectedText = range.htmlText;
var newText = '<'+tTag+' '+tAttr+'="'+tVal+'">'+selectedText+'</'+tTag+'>'; var newText = `<${tTag} ${tAttr}="${tVal}">${selectedText}</${tTag}>`;
document.selection.createRange().pasteHTML(newText); document.selection.createRange().pasteHTML(newText);
} }
} }
// the function of getting to the parent tag // the function of getting to the parent tag
var getSelectedNode = function() { var getSelectedNode = function() {
var node,selection; var node,selection;
if(window.getSelection) { if(window.getSelection) {
selection = getSelection(); selection = getSelection();
node = selection.anchorNode; node = selection.anchorNode;
} }
if(!node && document.selection && document.selection.createRange && document.selection.type != "None") if(!node && document.selection && document.selection.createRange && document.selection.type != "None")
{ {
selection = document.selection; selection = document.selection;
var range = selection.getRangeAt ? selection.getRangeAt(0) : selection.createRange(); var range = selection.getRangeAt ? selection.getRangeAt(0) : selection.createRange();
node = range.commonAncestorContainer ? range.commonAncestorContainer : node = range.commonAncestorContainer ? range.commonAncestorContainer :
range.parentElement ? range.parentElement() : range.item(0); range.parentElement ? range.parentElement() : range.item(0);
} }
if(node) { if(node) {
return (node.nodeName == "#text" ? $(node.parentNode) : $(node)); return (node.nodeName == "#text" ? $(node.parentNode) : $(node));
} }
else else
return false; return false;
}; };
// the function of replacement styles to the around tags (parent and child) // the function of replacement styles to the around tags (parent and child)
function affectStyleAround(element,style) function affectStyleAround(element,style)
{ {
var selectedTag = getSelectedNode(); // the selected node var selectedTag = getSelectedNode(); // the selected node
selectedTag = selectedTag ? selectedTag : element; selectedTag = selectedTag ? selectedTag : element;
// (for replacement with execCommand) affect to child tags with parent tag's styles // (for replacement with execCommand) affect to child tags with parent tag's styles
if(selectedTag && style==false) if(selectedTag && style==false)
{ {
// apply to the selected node with parent tag's styles // apply to the selected node with parent tag's styles
if(selectedTag.parent().is("[style]")) if(selectedTag.parent().is("[style]"))
selectedTag.attr("style",selectedTag.parent().attr("style")); selectedTag.attr("style",selectedTag.parent().attr("style"));
// apply to child tags with parent tag's styles // apply to child tags with parent tag's styles
if(selectedTag.is("[style]")) if(selectedTag.is("[style]"))
selectedTag.find("*").attr("style",selectedTag.attr("style")); selectedTag.find("*").attr("style",selectedTag.attr("style"));
} }
// (for replacement with html changing method) // (for replacement with html changing method)
else if(element && style && element.is("[style]")) else if(element && style && element.is("[style]"))
{ {
var styleKey = style.split(";"); // split the styles var styleKey = style.split(";"); // split the styles
styleKey = styleKey[0].split(":") // get the key of first style feature styleKey = styleKey[0].split(":") // get the key of first style feature
// apply to child tags with parent tag's styles // apply to child tags with parent tag's styles
if(element.is("[style*="+styleKey[0]+"]")) if(element.is(`[style*=${styleKey[0]}]`))
element.find("*").css(styleKey[0],styleKey[1]); element.find("*").css(styleKey[0],styleKey[1]);
// select to the selected node again // select to the selected node again
selectText(element); selectText(element);
} }
} }
// the function of making selected to a element // the function of making selected to a element
function selectText(element) function selectText(element)
{ {
if(element) if(element)
{ {
var element = element[0]; var element = element[0];
if (document.body.createTextRange) if (document.body.createTextRange)
{ {
var range = document.body.createTextRange(); var range = document.body.createTextRange();
range.moveToElementText(element); range.moveToElementText(element);
range.select(); range.select();
} }
else if (window.getSelection) else if (window.getSelection)
{ {
var selection = window.getSelection(); var selection = window.getSelection();
var range = document.createRange(); var range = document.createRange();
if(element != "undefined" && element != null) if(element != "undefined" && element != null)
{ {
range.selectNodeContents(element); range.selectNodeContents(element);
selection.removeAllRanges(); selection.removeAllRanges();
selection.addRange(range); selection.addRange(range);
if($(element).is(":empty")) if($(element).is(":empty"))
{ {
$(element).append("&nbsp;"); $(element).append("&nbsp;");
selectText($(element)); selectText($(element));
} }
} }
} }
} }
} }
// the function of converting text to link // the function of converting text to link
function selected2link() function selected2link()
{ {
if(!toolbar.data("sourceOpened")) if(!toolbar.data("sourceOpened"))
{ {
var selectedTag = getSelectedNode(); // the selected node var selectedTag = getSelectedNode(); // the selected node
var thisHrefLink = "http://"; // default the input value of the link-form-field var thisHrefLink = "http://"; // default the input value of the link-form-field
// display the link-form-field // display the link-form-field
linkAreaSwitch(true); linkAreaSwitch(true);
if(selectedTag) if(selectedTag)
{ {
var thisTagName = selectedTag.prop('tagName').toLowerCase(); var thisTagName = selectedTag.prop('tagName').toLowerCase();
// if tag name of the selected node is "a" and the selected node have "href" attribute // if tag name of the selected node is "a" and the selected node have "href" attribute
if(thisTagName == "a" && selectedTag.is('[href]')) if(thisTagName == "a" && selectedTag.is('[href]'))
{ {
thisHrefLink = selectedTag.attr('href'); thisHrefLink = selectedTag.attr('href');
selectedTag.attr(setdatalink,""); selectedTag.attr(setdatalink,"");
} }
// if it don't have "a" tag name // if it don't have "a" tag name
else else
replaceSelection("a",setdatalink,""); replaceSelection("a",setdatalink,"");
} }
else else
linkinput.val(thisHrefLink).focus(); linkinput.val(thisHrefLink).focus();
// the method of displaying-hiding to link-types // the method of displaying-hiding to link-types
linktypeselect.click(function(e) linktypeselect.click((e) => {
{ if($(e.target).hasClass(`${vars.css}_linktypetext`) || $(e.target).hasClass(`${vars.css}_linktypearrow`))
if($(e.target).hasClass(vars.css+"_linktypetext") || $(e.target).hasClass(vars.css+"_linktypearrow")) linktypeSwitch(true);
linktypeSwitch(true); });
});
// the method of selecting to link-types
// the method of selecting to link-types linktypes.find("a").click(function()
linktypes.find("a").click(function() {
{ var thisLinkType = $(this).attr(`${vars.css}-linktype`);
var thisLinkType = $(this).attr(vars.css+"-linktype");
linktypes.data("linktype",thisLinkType)
linktypes.data("linktype",thisLinkType)
linktypeview.find(`.${vars.css}_linktypetext`).html(linktypes.find(`a:eq(${linktypes.data("linktype")})`).text());
linktypeview.find("."+vars.css+"_linktypetext").html(linktypes.find('a:eq('+linktypes.data("linktype")+')').text());
linkInputSet(thisHrefLink);
linkInputSet(thisHrefLink);
linktypeSwitch();
linktypeSwitch(); });
});
linkInputSet(thisHrefLink);
linkInputSet(thisHrefLink);
// the method of link-input
// the method of link-input linkinput
linkinput // auto focus
// auto focus .focus()
.focus() // update to value
// update to value .val(thisHrefLink)
.val(thisHrefLink) // the event of key to enter in link-input
// the event of key to enter in link-input .bind("keypress keyup",(e) => {
.bind("keypress keyup",function(e) if(e.keyCode==13)
{ {
if(e.keyCode==13) linkRecord(jQTE.find(`[${setdatalink}]`));
{ return false;
linkRecord(jQTE.find("["+setdatalink+"]")); }
return false; });
}
}); // the event of click link-button
linkbutton.click(() => {
// the event of click link-button linkRecord(jQTE.find(`[${setdatalink}]`));
linkbutton.click(function() });
{ }
linkRecord(jQTE.find("["+setdatalink+"]")); else
}); // hide the link-form-field
} linkAreaSwitch(false);
else }
// hide the link-form-field
linkAreaSwitch(false); function linkRecord(thisSelection)
} {
// focus to link-input
function linkRecord(thisSelection) linkinput.focus();
{
// focus to link-input // select to the selected node
linkinput.focus(); selectText(thisSelection);
// select to the selected node // remove pre-link attribute (mark as "link will be added") of the selected node
selectText(thisSelection); thisSelection.removeAttr(setdatalink);
// remove pre-link attribute (mark as "link will be added") of the selected node // if not selected to link-type of picture
thisSelection.removeAttr(setdatalink); if(linktypes.data("linktype")!="2")
selectionSet("createlink",linkinput.val()); // insert link url of link-input to the selected node
// if not selected to link-type of picture // if selected to link-type of picture
if(linktypes.data("linktype")!="2") else
selectionSet("createlink",linkinput.val()); // insert link url of link-input to the selected node {
// if selected to link-type of picture selectionSet("insertImage",linkinput.val()); // insert image url of link-input to the selected node
else
{ // the method of all pictures in the editor
selectionSet("insertImage",linkinput.val()); // insert image url of link-input to the selected node editor.find("img").each(function(){
var emptyPrevLinks = $(this).prev("a");
// the method of all pictures in the editor var emptyNextLinks = $(this).next("a");
editor.find("img").each(function(){
var emptyPrevLinks = $(this).prev("a"); // if "a" tags of the front and rear of the picture is empty, remove
var emptyNextLinks = $(this).next("a"); if(emptyPrevLinks.length>0 && emptyPrevLinks.html()=="")
emptyPrevLinks.remove();
// if "a" tags of the front and rear of the picture is empty, remove else if(emptyNextLinks.length>0 && emptyNextLinks.html()=="")
if(emptyPrevLinks.length>0 && emptyPrevLinks.html()=="") emptyNextLinks.remove();
emptyPrevLinks.remove(); });
else if(emptyNextLinks.length>0 && emptyNextLinks.html()=="") }
emptyNextLinks.remove();
}); // hide the link-form-field
} linkAreaSwitch();
// hide the link-form-field // export contents of the text to the sources
linkAreaSwitch(); editor.trigger("change");
}
// export contents of the text to the sources
editor.trigger("change"); // the function of switching link-form-field
} function linkAreaSwitch(status)
{
// the function of switching link-form-field // remove all pre-link attribute (mark as "link will be added")
function linkAreaSwitch(status) clearSetElement(`[${setdatalink}]:not([href])`);
{ jQTE.find(`[${setdatalink}][href]`).removeAttr(setdatalink);
// remove all pre-link attribute (mark as "link will be added")
clearSetElement("["+setdatalink+"]:not([href])"); if(status)
jQTE.find("["+setdatalink+"][href]").removeAttr(setdatalink); {
toolbar.data("linkOpened",true);
if(status) linkform.show();
{ }
toolbar.data("linkOpened",true); else
linkform.show(); {
} toolbar.data("linkOpened",false);
else linkform.hide();
{ }
toolbar.data("linkOpened",false);
linkform.hide(); linktypeSwitch();
} }
linktypeSwitch(); // the function of switching link-type-selector
} function linktypeSwitch(status)
{
// the function of switching link-type-selector if(status)
function linktypeSwitch(status) linktypes.show();
{ else
if(status) linktypes.hide();
linktypes.show(); }
else
linktypes.hide(); // the function of updating the link-input according to the link-type
} function linkInputSet(thisHrefLink)
{
// the function of updating the link-input according to the link-type var currentType = linktypes.data("linktype");
function linkInputSet(thisHrefLink)
{ // if selected type of e-mail
var currentType = linktypes.data("linktype"); if(currentType=="1" && (linkinput.val()=="http://" || linkinput.is("[value^=http://]") || !linkinput.is("[value^=mailto]")))
linkinput.val("mailto:");
// if selected type of e-mail else if(currentType!="1" && !linkinput.is("[value^=http://]"))
if(currentType=="1" && (linkinput.val()=="http://" || linkinput.is("[value^=http://]") || !linkinput.is("[value^=mailto]"))) linkinput.val("http://");
linkinput.val("mailto:"); else
else if(currentType!="1" && !linkinput.is("[value^=http://]")) linkinput.val(thisHrefLink);
linkinput.val("http://"); }
else
linkinput.val(thisHrefLink); // the function of adding style to selected text
} function selected2style(styleCommand)
{
// the function of adding style to selected text if(!toolbar.data("sourceOpened"))
function selected2style(styleCommand) {
{
if(!toolbar.data("sourceOpened")) // if selected to changing the font-size value
{ if(styleCommand=="fSize")
styleField = fsizebar;
// if selected to changing the font-size value
if(styleCommand=="fSize") // if selected to changing the text-color value
styleField = fsizebar; else if(styleCommand=="colors")
styleField = cpalette;
// if selected to changing the text-color value
else if(styleCommand=="colors") // display the style-field
styleField = cpalette; styleFieldSwitch(styleField,true);
// display the style-field // the event of click to style button
styleFieldSwitch(styleField,true); styleField.find("a").unbind("click").click(function()
{
// the event of click to style button var styleValue = $(this).attr(`${vars.css }-styleval`); // the property of style value to be added
styleField.find("a").unbind("click").click(function()
{ // if selected to changing the font-size value
var styleValue = $(this).attr(vars.css + "-styleval"); // the property of style value to be added if(styleCommand=="fSize")
{
// if selected to changing the font-size value styleType = "font-size";
if(styleCommand=="fSize") styleValue = styleValue + vars.funit; // combine the value with size unit
{ }
styleType = "font-size"; // if selected to changing the text-color value
styleValue = styleValue + vars.funit; // combine the value with size unit else if(styleCommand=="colors")
} {
// if selected to changing the text-color value styleType = "color";
else if(styleCommand=="colors") styleValue = `rgb(${styleValue })`; // combine color value with rgb
{ }
styleType = "color";
styleValue = "rgb("+styleValue + ")"; // combine color value with rgb var prevStyles = refuseStyle(styleType); // affect styles to child tags (and extract to the new style attributes)
}
// change to selected text
var prevStyles = refuseStyle(styleType); // affect styles to child tags (and extract to the new style attributes) replaceSelection("span","style",`${styleType}:${styleValue};${prevStyles}`);
// change to selected text // hide all style-fields
replaceSelection("span","style",styleType+":"+styleValue+";"+prevStyles); styleFieldSwitch("",false);
// hide all style-fields // remove title bubbles
styleFieldSwitch("",false); $(`.${vars.css}_title`).remove();
// remove title bubbles // export contents of the text to the sources
$('.'+vars.css+'_title').remove(); editor.trigger("change");
});
// export contents of the text to the sources
editor.trigger("change"); }
}); else
// hide the style-field
} styleFieldSwitch(styleField,false);
else
// hide the style-field // hide the link-form-field
styleFieldSwitch(styleField,false); linkAreaSwitch(false);
}
// hide the link-form-field
linkAreaSwitch(false); // the function of switching the style-field
} function styleFieldSwitch(styleField,status)
{
// the function of switching the style-field var mainData="", // the style data of the actual wanted
function styleFieldSwitch(styleField,status) allData = [{ "d":"fsizeOpened","f":fsizebar },{ "d":"cpallOpened","f":cpalette }]; // all style datas
{
var mainData="", // the style data of the actual wanted // if the style data of the actual wanted isn't empty
allData = [{"d":"fsizeOpened","f":fsizebar},{"d":"cpallOpened","f":cpalette}]; // all style datas if(styleField!="")
{
// if the style data of the actual wanted isn't empty // return to all datas and find the main data
if(styleField!="") for(var si=0; si < allData.length; si++)
{ {
// return to all datas and find the main data if(styleField==allData[si]["f"])
for(var si=0; si < allData.length; si++) mainData = allData[si];
{ }
if(styleField==allData[si]["f"]) }
mainData = allData[si]; // display the style-field
} if(status)
} {
// display the style-field toolbar.data(mainData["d"],true); // stil seçme alanının açıldığını belirten parametre yaz
if(status) mainData["f"].slideDown(100); // stil seçme alanını aç
{
toolbar.data(mainData["d"],true); // stil seçme alanının açıldığını belirten parametre yaz // return to all datas and close the fields of external datas
mainData["f"].slideDown(100); // stil seçme alanını aç for(var si=0; si < allData.length; si++)
{
// return to all datas and close the fields of external datas if(mainData["d"]!=allData[si]["d"])
for(var si=0; si < allData.length; si++) {
{ toolbar.data(allData[si]["d"],false);
if(mainData["d"]!=allData[si]["d"]) allData[si]["f"].slideUp(100);
{ }
toolbar.data(allData[si]["d"],false); }
allData[si]["f"].slideUp(100); }
} // hide all style-fields
} else
} {
// hide all style-fields // return to all datas and close all style fields
else for(var si=0; si < allData.length; si++)
{ {
// return to all datas and close all style fields toolbar.data(allData[si]["d"],false);
for(var si=0; si < allData.length; si++) allData[si]["f"].slideUp(100);
{ }
toolbar.data(allData[si]["d"],false); }
allData[si]["f"].slideUp(100); }
}
} // the function of removing all pre-link attribute (mark as "link will be added")
} function clearSetElement(elem)
{
// the function of removing all pre-link attribute (mark as "link will be added") jQTE.find(elem).each(function(){
function clearSetElement(elem) $(this).before($(this).html()).remove();
{ });
jQTE.find(elem).each(function(){ }
$(this).before($(this).html()).remove();
}); // the function of refusing some styles
} function refuseStyle(refStyle)
{
// the function of refusing some styles var selectedTag = getSelectedNode(); // the selected node
function refuseStyle(refStyle)
{ // if the selected node have attribute of "style" and it have unwanted style
var selectedTag = getSelectedNode(); // the selected node if(selectedTag && selectedTag.is("[style]") && selectedTag.css(refStyle)!="")
{
// if the selected node have attribute of "style" and it have unwanted style var refValue = selectedTag.css(refStyle); // first get key of unwanted style
if(selectedTag && selectedTag.is("[style]") && selectedTag.css(refStyle)!="")
{ selectedTag.css(refStyle,""); // clear unwanted style
var refValue = selectedTag.css(refStyle); // first get key of unwanted style
var cleanStyle = selectedTag.attr("style"); // cleaned style
selectedTag.css(refStyle,""); // clear unwanted style
selectedTag.css(refStyle,refValue); // add unwanted style to the selected node again
var cleanStyle = selectedTag.attr("style"); // cleaned style
return cleanStyle; // print cleaned style
selectedTag.css(refStyle,refValue); // add unwanted style to the selected node again }
else
return cleanStyle; // print cleaned style return "";
} }
else
return ""; // the function of adding style to selected text
} function selected2format()
{
// the function of adding style to selected text formatFieldSwitch(true);
function selected2format()
{ formatbar.find("a").click(function()
formatFieldSwitch(true); {
$("*",this).click((e) => {
formatbar.find("a").click(function() e.preventDefault();
{ return false;
$("*",this).click(function(e) });
{
e.preventDefault(); formatLabelView($(this).text());
return false;
}); var formatValue = $(this).attr(`${vars.css }-formatval`); // the type of format value
formatLabelView($(this).text()); // convert to selected format
selectionSet("formatBlock",`<${formatValue}>`);
var formatValue = $(this).attr(vars.css + "-formatval"); // the type of format value
formatFieldSwitch(false);
// convert to selected format });
selectionSet("formatBlock",'<'+formatValue+'>'); }
formatFieldSwitch(false); // the function of switching the style-field
}); function formatFieldSwitch(status)
} {
var thisStatus = status ? true : false;
// the function of switching the style-field
function formatFieldSwitch(status) thisStatus = status && formatbar.data("status") ? true : false;
{
var thisStatus = status ? true : false; if(thisStatus || !status)
formatbar.data("status",false).slideUp(200);
thisStatus = status && formatbar.data("status") ? true : false; else
formatbar.data("status",true).slideDown(200);
if(thisStatus || !status) }
formatbar.data("status",false).slideUp(200);
else // change format label
formatbar.data("status",true).slideDown(200); function formatLabelView(str)
} {
var formatLabel = formatbar.closest(`.${vars.css}_tool`).find(`.${vars.css}_tool_label`).find(`.${vars.css}_tool_text`);
// change format label
function formatLabelView(str) if(str.length > 10)
{ str = `${str.substr(0,7) }...`;
var formatLabel = formatbar.closest("."+vars.css+"_tool").find("."+vars.css+"_tool_label").find("."+vars.css+"_tool_text");
// change format label of button
if(str.length > 10) formatLabel.html(str);
str = str.substr(0,7) + "..."; }
// change format label of button // the function of insertion a specific form to texts
formatLabel.html(str); function extractToText(strings)
} {
var $htmlContent, $htmlPattern, $htmlReplace;
// the function of insertion a specific form to texts
function extractToText(strings) // first remove to unnecessary gaps
{ $htmlContent = strings.replace(/\n/gim,'').replace(/\r/gim,'').replace(/\t/gim,'').replace(/&nbsp;/gim,' ');
var $htmlContent, $htmlPattern, $htmlReplace;
$htmlPattern = [
// first remove to unnecessary gaps /\<span(|\s+.*?)><span(|\s+.*?)>(.*?)<\/span><\/span>/gim, // trim nested spans
$htmlContent = strings.replace(/\n/gim,'').replace(/\r/gim,'').replace(/\t/gim,'').replace(/&nbsp;/gim,' '); /<(\w*[^p])\s*[^\/>]*>\s*<\/\1>/gim, // remove empty or white-spaces tags (ignore paragraphs (<p>) and breaks (<br>))
/\<div(|\s+.*?)>(.*?)\<\/div>/gim, // convert div to p
$htmlPattern = [ /\<strong(|\s+.*?)>(.*?)\<\/strong>/gim, // convert strong to b
/\<span(|\s+.*?)><span(|\s+.*?)>(.*?)<\/span><\/span>/gim, // trim nested spans /\<em(|\s+.*?)>(.*?)\<\/em>/gim, // convert em to i
/<(\w*[^p])\s*[^\/>]*>\s*<\/\1>/gim, // remove empty or white-spaces tags (ignore paragraphs (<p>) and breaks (<br>)) ];
/\<div(|\s+.*?)>(.*?)\<\/div>/gim, // convert div to p
/\<strong(|\s+.*?)>(.*?)\<\/strong>/gim, // convert strong to b $htmlReplace = [
/\<em(|\s+.*?)>(.*?)\<\/em>/gim // convert em to i '<span$2>$3</span>',
]; '',
'<p$1>$2</p>',
$htmlReplace = [ '<b$1>$2</b>',
'<span$2>$3</span>', '<i$1>$2</i>',
'', ];
'<p$1>$2</p>',
'<b$1>$2</b>', // repeat the cleaning process 5 times
'<i$1>$2</i>' for(c=0; c<5; c++)
]; {
// create loop as the number of pattern
// repeat the cleaning process 5 times for(var i = 0; i < $htmlPattern.length; i++)
for(c=0; c<5; c++) {
{ $htmlContent = $htmlContent.replace($htmlPattern[i], $htmlReplace[i]);
// create loop as the number of pattern }
for(var i = 0; i < $htmlPattern.length; i++) }
{
$htmlContent = $htmlContent.replace($htmlPattern[i], $htmlReplace[i]); // if paragraph is false (<p>), convert <p> to <br>
} if(!vars.p)
} $htmlContent = $htmlContent.replace(/\<p(|\s+.*?)>(.*?)\<\/p>/ig, '<br/>$2');
// if paragraph is false (<p>), convert <p> to <br> // if break is false (<br>), convert <br> to <p>
if(!vars.p) if(!vars.br)
$htmlContent = $htmlContent.replace(/\<p(|\s+.*?)>(.*?)\<\/p>/ig, '<br/>$2'); {
$htmlPattern = [
// if break is false (<br>), convert <br> to <p> /\<br>(.*?)/ig,
if(!vars.br) /\<br\/>(.*?)/ig,
{ ];
$htmlPattern = [
/\<br>(.*?)/ig, $htmlReplace = [
/\<br\/>(.*?)/ig '<p>$1</p>',
]; '<p>$1</p>',
];
$htmlReplace = [
'<p>$1</p>', // create loop as the number of pattern (for breaks)
'<p>$1</p>' for (var i = 0; i < $htmlPattern.length; i++) {
]; $htmlContent = $htmlContent.replace($htmlPattern[i], $htmlReplace[i]);
}
// create loop as the number of pattern (for breaks) }
for (var i = 0; i < $htmlPattern.length; i++) {
$htmlContent = $htmlContent.replace($htmlPattern[i], $htmlReplace[i]); // if paragraph and break is false (<p> && <br>), convert <p> to <div>
} if(!vars.p && !vars.br)
} $htmlContent = $htmlContent.replace(/\<p>(.*?)\<\/p>/ig, '<div>$1</div>');
// if paragraph and break is false (<p> && <br>), convert <p> to <div> return $htmlContent;
if(!vars.p && !vars.br) }
$htmlContent = $htmlContent.replace(/\<p>(.*?)\<\/p>/ig, '<div>$1</div>');
// the function of exporting contents of the text field to the source field (to be the standard in all browsers)
return $htmlContent; function postToSource()
} {
// clear unnecessary tags when editor view empty
// the function of exporting contents of the text field to the source field (to be the standard in all browsers) var sourceStrings = editor.text()=="" && editor.html().length<12 ? "" : editor.html();
function postToSource()
{ thisElement.val(extractToText(sourceStrings));
// clear unnecessary tags when editor view empty }
var sourceStrings = editor.text()=="" && editor.html().length<12 ? "" : editor.html();
// the function of exporting contents of the source field to the text field (to be the standard in all browsers)
thisElement.val(extractToText(sourceStrings)); function postToEditor()
} {
editor.html(extractToText(thisElement.val()));
// the function of exporting contents of the source field to the text field (to be the standard in all browsers) }
function postToEditor()
{ // the function of getting parent (or super parent) tag name of the selected node
editor.html(extractToText(thisElement.val())); function detectElement(tags){
}
var resultdetect=false, $node = getSelectedNode(), parentsTag;
// the function of getting parent (or super parent) tag name of the selected node
function detectElement(tags){ if($node)
{
var resultdetect=false, $node = getSelectedNode(), parentsTag; $.each(tags, (i, val) => {
parentsTag = $node.prop('tagName').toLowerCase();
if($node)
{ if (parentsTag == val)
$.each(tags, function(i, val){ resultdetect = true;
parentsTag = $node.prop('tagName').toLowerCase(); else
{
if (parentsTag == val) $node.parents().each(function(){
resultdetect = true; parentsTag = $(this).prop('tagName').toLowerCase();
else if (parentsTag == val)
{ resultdetect = true;
$node.parents().each(function(){ });
parentsTag = $(this).prop('tagName').toLowerCase(); }
if (parentsTag == val) });
resultdetect = true;
}); return resultdetect;
} }
}); else
return false;
return resultdetect; };
}
else // the function of highlighting the toolbar buttons according to the cursor position in jqte editor
return false; function buttonEmphasize(e)
}; {
for(var n = 0; n < buttons.length; n++)
// the function of highlighting the toolbar buttons according to the cursor position in jqte editor {
function buttonEmphasize(e) if(vars[buttons[n].name] && buttons[n].emphasis && buttons[n].tag!='')
{ detectElement(buttons[n].tag) ? toolbar.find(`.${vars.css}_tool_${buttons[n].cls}`).addClass(emphasize) : $(`.${vars.css}_tool_${buttons[n].cls}`).removeClass(emphasize);
for(var n = 0; n < buttons.length; n++) }
{ // showing text format
if(vars[buttons[n].name] && buttons[n].emphasis && buttons[n].tag!='') if(vars.format && $.isArray(vars.formats))
detectElement(buttons[n].tag) ? toolbar.find('.'+vars.css+'_tool_'+buttons[n].cls).addClass(emphasize) : $('.'+vars.css+'_tool_'+buttons[n].cls).removeClass(emphasize); {
} var isFoundFormat = false;
// showing text format
if(vars.format && $.isArray(vars.formats)) for(var f = 0; f < vars.formats.length; f++)
{ {
var isFoundFormat = false; var thisFormat = [];
thisFormat[0] = vars.formats[f][0];
for(var f = 0; f < vars.formats.length; f++)
{ if(vars.formats[f][0].length>0 && detectElement(thisFormat))
var thisFormat = []; {
thisFormat[0] = vars.formats[f][0]; formatLabelView(vars.formats[f][1]);
if(vars.formats[f][0].length>0 && detectElement(thisFormat)) isFoundFormat = true;
{ break;
formatLabelView(vars.formats[f][1]); }
}
isFoundFormat = true;
break; if(!isFoundFormat)
} formatLabelView(vars.formats[0][1]);
} }
if(!isFoundFormat) // hide all style-fields
formatLabelView(vars.formats[0][1]); styleFieldSwitch("",false);
} formatFieldSwitch(false);
}
// hide all style-fields
styleFieldSwitch("",false); // the event of click to the toolbar buttons
formatFieldSwitch(false); toolbutton
} .unbind("click")
.click(function(e){
// the event of click to the toolbar buttons // if source button is clicked
toolbutton if($(this).data('command')=='displaysource' && !toolbar.data("sourceOpened"))
.unbind("click") {
.click(function(e){ // hide all the toolbar buttons (except the source button)
// if source button is clicked toolbar.find(`.${vars.css}_tool`).addClass(`${vars.css}_hiddenField`);
if($(this).data('command')=='displaysource' && !toolbar.data("sourceOpened")) $(this).removeClass(`${vars.css}_hiddenField`);
{
// hide all the toolbar buttons (except the source button) // update to data of source displaying
toolbar.find("."+vars.css+"_tool").addClass(vars.css+"_hiddenField"); toolbar.data("sourceOpened",true);
$(this).removeClass(vars.css+"_hiddenField");
// equalize height of the text field with height of the source field
// update to data of source displaying thisElement.css("height",editor.outerHeight());
toolbar.data("sourceOpened",true);
sourceField.removeClass(`${vars.css}_hiddenField`);
// equalize height of the text field with height of the source field editor.addClass(`${vars.css}_hiddenField`);
thisElement.css("height",editor.outerHeight()); thisElement.focus();
sourceField.removeClass(vars.css+"_hiddenField"); // hide the link-form-field
editor.addClass(vars.css+"_hiddenField"); linkAreaSwitch(false);
thisElement.focus();
// hide all style-fields
// hide the link-form-field styleFieldSwitch("",false);
linkAreaSwitch(false);
// hide format field
// hide all style-fields formatFieldSwitch();
styleFieldSwitch("",false);
// hide placeholder
// hide format field if(vars.placeholder && vars.placeholder!="")
formatFieldSwitch(); placeHolder.hide();
}
// hide placeholder // if other buttons is clicked
if(vars.placeholder && vars.placeholder!="") else
placeHolder.hide(); {
} // if source field is closed
// if other buttons is clicked if(!toolbar.data("sourceOpened"))
else {
{ // if insert-link-button is clicked
// if source field is closed if($(this).data('command')=='linkcreator')
if(!toolbar.data("sourceOpened")) {
{ if(!toolbar.data("linkOpened"))
// if insert-link-button is clicked selected2link();
if($(this).data('command')=='linkcreator') else
{ {
if(!toolbar.data("linkOpened")) // hide the link-form-field
selected2link(); linkAreaSwitch(false);
else
{ // hide format field
// hide the link-form-field formatFieldSwitch(false);
linkAreaSwitch(false); }
}
// hide format field
formatFieldSwitch(false); // if the format button is clicked
} else if($(this).data('command')=='formats')
} {
if($(this).data('command')=='formats' && !$(e.target).hasClass(`${vars.css}_format`))
// if the format button is clicked selected2format();
else if($(this).data('command')=='formats')
{ // hide all style-fields
if($(this).data('command')=='formats' && !$(e.target).hasClass(vars.css+"_format")) styleFieldSwitch("",false);
selected2format();
if(editor.not(":focus"))
// hide all style-fields editor.focus();
styleFieldSwitch("",false); }
if(editor.not(":focus")) // if the style buttons are clicked
editor.focus(); else if($(this).data('command')=='fSize' || $(this).data('command')=='colors')
} {
if(
// if the style buttons are clicked ($(this).data('command')=='fSize' && !$(e.target).hasClass(`${vars.css}_fontsize`)) || // the font-size button
else if($(this).data('command')=='fSize' || $(this).data('command')=='colors') ($(this).data('command')=='colors' && !$(e.target).hasClass(`${vars.css}_color`)) // the color button
{ )
if( selected2style($(this).data('command'));
($(this).data('command')=='fSize' && !$(e.target).hasClass(vars.css+"_fontsize")) || // the font-size button
($(this).data('command')=='colors' && !$(e.target).hasClass(vars.css+"_color")) // the color button // hide format field
) formatFieldSwitch(false);
selected2style($(this).data('command'));
if(editor.not(":focus"))
// hide format field editor.focus();
formatFieldSwitch(false); }
if(editor.not(":focus")) // if other buttons is clicked
editor.focus(); else
} {
// first, prevent to conflict of different jqte editors
// if other buttons is clicked if(editor.not(":focus"))
else editor.focus();
{
// first, prevent to conflict of different jqte editors // apply command of clicked button to the selected text
if(editor.not(":focus")) selectionSet($(this).data('command'),null);
editor.focus();
// hide all menu-fields
// apply command of clicked button to the selected text styleFieldSwitch("",false);
selectionSet($(this).data('command'),null); formatFieldSwitch(false);
linktypeSwitch();
// hide all menu-fields
styleFieldSwitch("",false); // to highlight the toolbar buttons according to the cursor position in jqte editor
formatFieldSwitch(false); $(this).data('emphasis')==true && !$(this).hasClass(emphasize) ? $(this).addClass(emphasize) : $(this).removeClass(emphasize);
linktypeSwitch();
sourceField.addClass(`${vars.css}_hiddenField`);
// to highlight the toolbar buttons according to the cursor position in jqte editor editor.removeClass(`${vars.css}_hiddenField`);
$(this).data('emphasis')==true && !$(this).hasClass(emphasize) ? $(this).addClass(emphasize) : $(this).removeClass(emphasize); }
sourceField.addClass(vars.css+"_hiddenField"); }
editor.removeClass(vars.css+"_hiddenField"); // hide the source field and display the text field
} else
{
} // update to data of source hiding
// hide the source field and display the text field toolbar.data("sourceOpened",false);
else
{ // display all the toolbar buttons
// update to data of source hiding toolbar.find(`.${vars.css}_tool`).removeClass(`${vars.css}_hiddenField`);
toolbar.data("sourceOpened",false);
sourceField.addClass(`${vars.css}_hiddenField`);
// display all the toolbar buttons editor.removeClass(`${vars.css}_hiddenField`);
toolbar.find("."+vars.css+"_tool").removeClass(vars.css+"_hiddenField"); }
sourceField.addClass(vars.css+"_hiddenField"); if(vars.placeholder && vars.placeholder!="")
editor.removeClass(vars.css+"_hiddenField"); editor.html()!="" ? placeHolder.hide() : placeHolder.show();
} }
if(vars.placeholder && vars.placeholder!="") // export contents of the text to the sources
editor.html()!="" ? placeHolder.hide() : placeHolder.show(); editor.trigger("change");
} })
// the event of showing to the title bubble when mouse over of the toolbar buttons
// export contents of the text to the sources .hover(function(e){
editor.trigger("change"); if(vars.title && $(this).data("title")!="" && ( $(e.target).hasClass(`${vars.css}_tool`) || $(e.target).hasClass(`${vars.css}_tool_icon`) ))
}) {
// the event of showing to the title bubble when mouse over of the toolbar buttons $(`.${vars.css}_title`).remove();
.hover(function(e){
if(vars.title && $(this).data("title")!="" && ( $(e.target).hasClass(vars.css+"_tool") || $(e.target).hasClass(vars.css+"_tool_icon") )) // create the title bubble
{ jQTE.append(`<div class="${vars.css}_title"><div class="${vars.css}_titleArrow"><div class="${vars.css}_titleArrowIcon"></div></div><div class="${vars.css}_titleText">${$(this).data("title")}</div></div>`);
$('.'+vars.css+'_title').remove();
var thisTitle = $(`.${vars.css}_title:first`);
// create the title bubble var thisArrow = thisTitle.find(`.${vars.css}_titleArrowIcon`);
jQTE.append('<div class="'+vars.css+'_title"><div class="'+vars.css+'_titleArrow"><div class="'+vars.css+'_titleArrowIcon"></div></div><div class="'+vars.css+'_titleText">'+$(this).data("title")+'</div></div>'); var thisPosition = $(this).position();
var thisAlignX = thisPosition.left + $(this).outerWidth() - (thisTitle.outerWidth()/2) - ($(this).outerWidth()/2);
var thisTitle = $('.'+vars.css+'_title:first'); var thisAlignY = (thisPosition.top + $(this).outerHeight() + 5);
var thisArrow = thisTitle.find('.'+vars.css+'_titleArrowIcon');
var thisPosition = $(this).position(); // show the title bubble and set to its position
var thisAlignX = thisPosition.left + $(this).outerWidth() - (thisTitle.outerWidth()/2) - ($(this).outerWidth()/2); thisTitle.delay(400).css({ 'top':thisAlignY, 'left':thisAlignX }).fadeIn(200);
var thisAlignY = (thisPosition.top + $(this).outerHeight() + 5); }
},() => {
// show the title bubble and set to its position $(`.${vars.css}_title`).remove();
thisTitle.delay(400).css({'top':thisAlignY, 'left':thisAlignX}).fadeIn(200); });
}
},function(){ // prevent multiple calling postToSource()
$('.'+vars.css+'_title').remove(); var editorChangeTimer = null;
});
// the methods of the text fields
// prevent multiple calling postToSource() editor
var editorChangeTimer = null;
// trigger change method of the text field when the text field modified
// the methods of the text fields .bind("keypress keyup keydown drop cut copy paste DOMCharacterDataModified DOMSubtreeModified",function()
editor {
// export contents of the text to the sources
// trigger change method of the text field when the text field modified if(!toolbar.data("sourceOpened"))
.bind("keypress keyup keydown drop cut copy paste DOMCharacterDataModified DOMSubtreeModified",function() $(this).trigger("change");
{
// export contents of the text to the sources // hide the link-type-field
if(!toolbar.data("sourceOpened")) linktypeSwitch();
$(this).trigger("change");
// if the change method is added run the change method
// hide the link-type-field if($.isFunction(vars.change))
linktypeSwitch(); vars.change();
// if the change method is added run the change method // the feature of placeholder
if($.isFunction(vars.change)) if(vars.placeholder && vars.placeholder!="")
vars.change(); $(this).text()!="" ? placeHolder.hide() : placeHolder.show();
})
// the feature of placeholder .bind("change",() => {
if(vars.placeholder && vars.placeholder!="") if(!toolbar.data("sourceOpened"))
$(this).text()!="" ? placeHolder.hide() : placeHolder.show(); {
}) clearTimeout(editorChangeTimer);
.bind("change",function() editorChangeTimer = setTimeout(postToSource,10);
{ }
if(!toolbar.data("sourceOpened")) })
{
clearTimeout(editorChangeTimer); // run to keyboard shortcuts
editorChangeTimer = setTimeout(postToSource,10); .keydown((e) => {
} // if ctrl key is clicked
}) if(e.ctrlKey)
{
// run to keyboard shortcuts // check all toolbar buttons
.keydown(function(e) for(var n = 0; n < buttons.length; n++)
{ {
// if ctrl key is clicked // if this settings of this button is activated (is it true)
if(e.ctrlKey) // if the keyed button with ctrl is same of hotkey of this button
{ if(vars[buttons[n].name] && e.keyCode == buttons[n].key.charCodeAt(0))
// check all toolbar buttons {
for(var n = 0; n < buttons.length; n++) if(buttons[n].command!='' && buttons[n].command!='linkcreator')
{ selectionSet(buttons[n].command,null);
// if this settings of this button is activated (is it true)
// if the keyed button with ctrl is same of hotkey of this button else if(buttons[n].command=='linkcreator')
if(vars[buttons[n].name] && e.keyCode == buttons[n].key.charCodeAt(0)) selected2link();
{
if(buttons[n].command!='' && buttons[n].command!='linkcreator') return false;
selectionSet(buttons[n].command,null); }
}
else if(buttons[n].command=='linkcreator') }
selected2link(); })
return false; // method of triggering to the highlight button
} .bind("mouseup keyup",buttonEmphasize)
}
} // the event of focus to the text field
}) .focus(() => {
// if the focus method is added run the focus method
// method of triggering to the highlight button if($.isFunction(vars.focus))
.bind("mouseup keyup",buttonEmphasize) vars.focus();
// the event of focus to the text field // add onfocus class
.focus(function() jQTE.addClass(`${vars.css}_focused`);
{
// if the focus method is added run the focus method // prevent focus problem on opera
if($.isFunction(vars.focus)) if(/opera/.test(thisBrowser))
vars.focus(); {
var range = document.createRange();
// add onfocus class range.selectNodeContents(editor[0]);
jQTE.addClass(vars.css+"_focused"); range.collapse(false);
var selection = window.getSelection();
// prevent focus problem on opera selection.removeAllRanges();
if(/opera/.test(thisBrowser)) selection.addRange(range);
{ }
var range = document.createRange(); })
range.selectNodeContents(editor[0]);
range.collapse(false); // the event of focus out from the text field
var selection = window.getSelection(); .focusout(() => {
selection.removeAllRanges(); // remove to highlights of all toolbar buttons
selection.addRange(range); toolbutton.removeClass(emphasize);
}
}) // hide all menu-fields
styleFieldSwitch("",false);
// the event of focus out from the text field formatFieldSwitch(false);
.focusout(function() linktypeSwitch();
{
// remove to highlights of all toolbar buttons // if the blur method is added run the blur method
toolbutton.removeClass(emphasize); if($.isFunction(vars.blur))
vars.blur();
// hide all menu-fields
styleFieldSwitch("",false); // remove onfocus class
formatFieldSwitch(false); jQTE.removeClass(`${vars.css}_focused`);
linktypeSwitch();
// show default text format
// if the blur method is added run the blur method if($.isArray(vars.formats))
if($.isFunction(vars.blur)) formatLabelView(vars.formats[0][1]);
vars.blur(); });
// remove onfocus class // the event of key in the source field
jQTE.removeClass(vars.css+"_focused"); thisElement
.bind("keydown keyup",function()
// show default text format {
if($.isArray(vars.formats)) // export contents of the source to the text field
formatLabelView(vars.formats[0][1]); setTimeout(postToEditor,0);
});
// auto extension for the source field
// the event of key in the source field $(this).height($(this)[0].scrollHeight);
thisElement
.bind("keydown keyup",function() // if the source field is empty, shorten to the source field
{ if($(this).val()=="")
// export contents of the source to the text field $(this).height(0);
setTimeout(postToEditor,0); })
.focus(() => {
// auto extension for the source field // add onfocus class
$(this).height($(this)[0].scrollHeight); jQTE.addClass(`${vars.css}_focused`);
})
// if the source field is empty, shorten to the source field .focusout(() => {
if($(this).val()=="") // remove onfocus class
$(this).height(0); jQTE.removeClass(`${vars.css}_focused`);
}) });
.focus(function() });
{ };
// add onfocus class
jQTE.addClass(vars.css+"_focused");
})
.focusout(function()
{
// remove onfocus class
jQTE.removeClass(vars.css+"_focused");
});
});
};
})(jQuery); })(jQuery);