mirror of
https://github.com/a2nt/webpack-bootstrap-ui-kit.git
synced 2024-10-22 11:05:45 +02:00
FIX: js liniting
This commit is contained in:
Tony Air
parent
a4e2bfe5a1
commit
f8c5f5df35
@ -1 +1 @@
|
||||
/site/client
|
||||
/src/thirdparty
|
||||
5
dist/index.html
vendored
5
dist/index.html
vendored
@ -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="{"type":"MarkerCollection","features":[{"id":4,"type":"Feature","icon":"<i class=\"fas fa-map-marker-alt\"><\/i>","properties":{"content":"<div id=\"MapPin4\" data-id=\"4\" class=\"location\">\n <div class=\"fn\">Office #1<\/div>\n <div class=\"addr\">17 Lakeside Drive<\/div>\n \n \n \n <div class=\"d-none\"> U<\/div>\n \n \n \n <div class=\"dir-link\">\n <a href=\"https:\/\/www.google.com\/maps\/dir\/Current+Location\/40.8827743,-74.4276612\" target=\"_blank\">Get Directions &raquo;<\/a>\n <\/div>\n<\/div>\n"},"geometry":{"type":"Point","coordinates":[-74.4276612,40.8827743]}},{"id":3,"type":"Feature","icon":"<i class=\"fas fa-map-marker-alt\"><\/i>","properties":{"content":"<div id=\"MapPin3\" data-id=\"3\" class=\"location\">\n <div class=\"fn\">Office #2<\/div>\n <div class=\"addr\">Flower Hill Cemetery<\/div>\n \n \n \n <div class=\"d-none\"> N<\/div>\n \n \n \n <div class=\"dir-link\">\n <a href=\"https:\/\/www.google.com\/maps\/dir\/Current+Location\/40.7884708,-74.0249253\" target=\"_blank\">Get Directions &raquo;<\/a>\n <\/div>\n<\/div>\n"},"geometry":{"type":"Point","coordinates":[-74.0249253,40.7884708]}},{"id":2,"type":"Feature","icon":"<i class=\"fas fa-map-marker-alt\"><\/i>","properties":{"content":"<div id=\"MapPin2\" data-id=\"2\" class=\"location\">\n <div class=\"fn\">Office #3<\/div>\n <div class=\"addr\">555 Phoenix Road<\/div>\n \n \n \n <div class=\"d-none\"> U<\/div>\n \n \n \n <div class=\"dir-link\">\n <a href=\"https:\/\/www.google.com\/maps\/dir\/Current+Location\/40.8527479,-78.2475576\" target=\"_blank\">Get Directions &raquo;<\/a>\n <\/div>\n<\/div>\n"},"geometry":{"type":"Point","coordinates":[-78.2475576,40.8527479]}},{"id":1,"type":"Feature","icon":"<i class=\"fas fa-map-marker-alt\"><\/i>","properties":{"content":"<div id=\"MapPin1\" data-id=\"1\" class=\"location\">\n <div class=\"fn\">Office #4<\/div>\n <div class=\"addr\">15 East Hadley Road<\/div>\n \n \n \n <div class=\"d-none\"> U<\/div>\n \n \n \n <div class=\"dir-link\">\n <a href=\"https:\/\/www.google.com\/maps\/dir\/Current+Location\/42.3297023,-72.5552186\" target=\"_blank\">Get Directions &raquo;<\/a>\n <\/div>\n<\/div>\n"},"geometry":{"type":"Point","coordinates":[-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 »</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 »</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 »</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 »</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 © 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="{"type":"MarkerCollection","features":[{"id":4,"type":"Feature","icon":"<i class=\"fas fa-map-marker-alt\"><\/i>","properties":{"content":"<div id=\"MapPin4\" data-id=\"4\" class=\"location\">\n <div class=\"fn\">Office #1<\/div>\n <div class=\"addr\">17 Lakeside Drive<\/div>\n \n \n \n <div class=\"d-none\"> U<\/div>\n \n \n \n <div class=\"dir-link\">\n <a href=\"https:\/\/www.google.com\/maps\/dir\/Current+Location\/40.8827743,-74.4276612\" target=\"_blank\">Get Directions &raquo;<\/a>\n <\/div>\n<\/div>\n"},"geometry":{"type":"Point","coordinates":[-74.4276612,40.8827743]}},{"id":3,"type":"Feature","icon":"<i class=\"fas fa-map-marker-alt\"><\/i>","properties":{"content":"<div id=\"MapPin3\" data-id=\"3\" class=\"location\">\n <div class=\"fn\">Office #2<\/div>\n <div class=\"addr\">Flower Hill Cemetery<\/div>\n \n \n \n <div class=\"d-none\"> N<\/div>\n \n \n \n <div class=\"dir-link\">\n <a href=\"https:\/\/www.google.com\/maps\/dir\/Current+Location\/40.7884708,-74.0249253\" target=\"_blank\">Get Directions &raquo;<\/a>\n <\/div>\n<\/div>\n"},"geometry":{"type":"Point","coordinates":[-74.0249253,40.7884708]}},{"id":2,"type":"Feature","icon":"<i class=\"fas fa-map-marker-alt\"><\/i>","properties":{"content":"<div id=\"MapPin2\" data-id=\"2\" class=\"location\">\n <div class=\"fn\">Office #3<\/div>\n <div class=\"addr\">555 Phoenix Road<\/div>\n \n \n \n <div class=\"d-none\"> U<\/div>\n \n \n \n <div class=\"dir-link\">\n <a href=\"https:\/\/www.google.com\/maps\/dir\/Current+Location\/40.8527479,-78.2475576\" target=\"_blank\">Get Directions &raquo;<\/a>\n <\/div>\n<\/div>\n"},"geometry":{"type":"Point","coordinates":[-78.2475576,40.8527479]}},{"id":1,"type":"Feature","icon":"<i class=\"fas fa-map-marker-alt\"><\/i>","properties":{"content":"<div id=\"MapPin1\" data-id=\"1\" class=\"location\">\n <div class=\"fn\">Office #4<\/div>\n <div class=\"addr\">15 East Hadley Road<\/div>\n \n \n \n <div class=\"d-none\"> U<\/div>\n \n \n \n <div class=\"dir-link\">\n <a href=\"https:\/\/www.google.com\/maps\/dir\/Current+Location\/42.3297023,-72.5552186\" target=\"_blank\">Get Directions &raquo;<\/a>\n <\/div>\n<\/div>\n"},"geometry":{"type":"Point","coordinates":[-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 »</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 »</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 »</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 »</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 © 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
2
dist/js/app.js
vendored
File diff suppressed because one or more lines are too long
2
dist/js/app.js.map
vendored
2
dist/js/app.js.map
vendored
File diff suppressed because one or more lines are too long
19
package.json
19
package.json
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@a2nt/ss-bootstrap-ui-webpack-boilerplate",
|
||||
"version": "1.1.6",
|
||||
"version": "1.1.7",
|
||||
"author": "Tony Air <tony@twma.pro>",
|
||||
"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.",
|
||||
@ -17,10 +17,10 @@
|
||||
"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",
|
||||
"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:fix": "eslint ./app/client/src --config .eslintrc --fix && sass-lint ./app/client/src --config .sasslintrc -v -q --fix",
|
||||
"lint:js": "eslint ./app/client/src --config .eslintrc",
|
||||
"lint:sass": "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 ./src --config .eslintrc --fix && sass-lint ./src --config .sasslintrc -v -q --fix",
|
||||
"lint:js": "eslint ./src --config .eslintrc",
|
||||
"lint:sass": "sass-lint ./src --config .sasslintrc -v -q",
|
||||
"prebuild": "yarn lint:fix && rimraf dist",
|
||||
"prepare": "yarn lint:fix && yarn build"
|
||||
},
|
||||
@ -124,8 +124,7 @@
|
||||
"block-no-empty": null,
|
||||
"color-no-invalid-hex": true,
|
||||
"comment-empty-line-before": [
|
||||
"always",
|
||||
{
|
||||
"always", {
|
||||
"ignore": [
|
||||
"stylelint-commands",
|
||||
"after-comment"
|
||||
@ -134,8 +133,7 @@
|
||||
],
|
||||
"declaration-colon-space-after": "always",
|
||||
"indentation": [
|
||||
4,
|
||||
{
|
||||
4, {
|
||||
"except": [
|
||||
"value"
|
||||
]
|
||||
@ -143,8 +141,7 @@
|
||||
],
|
||||
"max-empty-lines": 2,
|
||||
"rule-empty-line-before": [
|
||||
"always",
|
||||
{
|
||||
"always", {
|
||||
"except": [
|
||||
"first-nested"
|
||||
],
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<h2 class="list-element__title">Content Header</h2>
|
||||
<h2 class="list-element__title">Accordion demo</h2>
|
||||
<div class="typography">
|
||||
Some content ...
|
||||
</div>
|
||||
|
||||
@ -1,30 +1,33 @@
|
||||
<div class="content-element__content ">
|
||||
<h2 class="content-element__title">Content Header</h2>
|
||||
<h2 class="content-element__title">Content Demo</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>
|
||||
<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>
|
||||
@ -43,23 +46,23 @@
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>#1-1</th>
|
||||
<td>#1-2</td>
|
||||
@ -75,19 +78,19 @@
|
||||
<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>
|
||||
</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>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>#1-1</th>
|
||||
<td>#1-2</td>
|
||||
@ -103,7 +106,7 @@
|
||||
<td>#3-2</td>
|
||||
<td>#3-3</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,4 +1,7 @@
|
||||
<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"
|
||||
|
||||
@ -15,13 +15,13 @@ const CookieUI = (($) => {
|
||||
static set(name, value, days = 7, path = "/") {
|
||||
const expires = new Date(Date.now() + days * 864e5).toUTCString();
|
||||
D.cookie =
|
||||
name +
|
||||
"=" +
|
||||
encodeURIComponent(value) +
|
||||
"; expires=" +
|
||||
expires +
|
||||
"; path=" +
|
||||
path;
|
||||
`${name
|
||||
}=${
|
||||
encodeURIComponent(value)
|
||||
}; expires=${
|
||||
expires
|
||||
}; path=${
|
||||
path}`;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -26,8 +26,8 @@ const VideoPreviewUI = (($) => {
|
||||
ui.$_el.data(DATA_KEY, this);
|
||||
const href = ui.$_el.attr('href') || ui.$_el.data('href');
|
||||
const YouTubeGetID = (url) => {
|
||||
url = url.split(/(vi\/|v%3D|v=|\/v\/|youtu\.be\/|\/embed\/)/);
|
||||
return undefined !== url[2] ? url[2].split(/[^0-9a-z_\-]/i)[0] : url[0];
|
||||
parsedURL = url.split(/(vi\/|v%3D|v=|\/v\/|youtu\.be\/|\/embed\/)/);
|
||||
return undefined !== parsedURL[2] ? parsedURL[2].split(/[^0-9a-z_-]/i)[0] : parsedURL[0];
|
||||
};
|
||||
|
||||
|
||||
|
||||
@ -18,7 +18,7 @@ const Obj = {
|
||||
ui.onClick = options.onClick;
|
||||
ui.onMouseOver = options.onMouseOver;
|
||||
|
||||
ui.isBoolean = arg => {
|
||||
ui.isBoolean = (arg) => {
|
||||
if (typeof arg === 'boolean') {
|
||||
return true;
|
||||
} else {
|
||||
@ -26,7 +26,7 @@ const Obj = {
|
||||
}
|
||||
};
|
||||
|
||||
ui.isNotUndefined = arg => {
|
||||
ui.isNotUndefined = (arg) => {
|
||||
if (typeof arg !== 'undefined') {
|
||||
return true;
|
||||
} else {
|
||||
@ -34,7 +34,7 @@ const Obj = {
|
||||
}
|
||||
};
|
||||
|
||||
ui.hasContent = arg => {
|
||||
ui.hasContent = (arg) => {
|
||||
if (arg.length > 0) {
|
||||
return true;
|
||||
} else {
|
||||
@ -42,7 +42,7 @@ const Obj = {
|
||||
}
|
||||
};
|
||||
|
||||
ui.isString = arg => {
|
||||
ui.isString = (arg) => {
|
||||
if (typeof arg === 'string') {
|
||||
return true;
|
||||
} else {
|
||||
@ -50,7 +50,7 @@ const Obj = {
|
||||
}
|
||||
};
|
||||
|
||||
ui.isFunction = arg => {
|
||||
ui.isFunction = (arg) => {
|
||||
if (typeof arg === 'function') {
|
||||
return true;
|
||||
} else {
|
||||
@ -99,13 +99,13 @@ const Obj = {
|
||||
ui.getPanes().overlayMouseTarget.appendChild(ui.div);
|
||||
|
||||
// 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');
|
||||
if (ui.isFunction(ui.onClick)) ui.onClick();
|
||||
event.stopPropagation();
|
||||
});
|
||||
|
||||
google.maps.event.addDomListener(ui.div, 'mouseover', event => {
|
||||
google.maps.event.addDomListener(ui.div, 'mouseover', (event) => {
|
||||
google.maps.event.trigger(ui, 'mouseover');
|
||||
if (ui.isFunction(ui.onMouseOver)) ui.onMouseOver();
|
||||
event.stopPropagation();
|
||||
@ -123,7 +123,7 @@ const Obj = {
|
||||
// Align HTML overlay relative to original position
|
||||
var divOffset = {
|
||||
y: undefined,
|
||||
x: undefined
|
||||
x: undefined,
|
||||
};
|
||||
|
||||
switch (Array.isArray(ui.align) ? ui.align.join(' ') : '') {
|
||||
@ -169,8 +169,8 @@ const Obj = {
|
||||
}
|
||||
|
||||
// Set position
|
||||
ui.div.style.top = positionInPixels.y - divOffset.y + 'px';
|
||||
ui.div.style.left = positionInPixels.x - divOffset.x + 'px';
|
||||
ui.div.style.top = `${positionInPixels.y - divOffset.y }px`;
|
||||
ui.div.style.left = `${positionInPixels.x - divOffset.x }px`;
|
||||
}
|
||||
|
||||
getPosition() {
|
||||
@ -191,7 +191,7 @@ const Obj = {
|
||||
}
|
||||
}
|
||||
return GoogleMapsHtmlOverlay;
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
export default Obj;
|
||||
|
||||
@ -40,10 +40,10 @@ const GoogleMapsDriver = (($) => {
|
||||
'zoom': (config['mapZoom'] ? config['mapZoom'] : 10),
|
||||
'center': (config['center'] ? {
|
||||
lat: config['center'][1],
|
||||
lng: config['center'][0]
|
||||
lng: config['center'][0],
|
||||
} : {
|
||||
lat: 0,
|
||||
lng: 0
|
||||
lng: 0,
|
||||
}),
|
||||
'fullscreenControl': true,
|
||||
'styles': (config['style'] ? config['style'] : null),
|
||||
@ -70,7 +70,7 @@ const GoogleMapsDriver = (($) => {
|
||||
const ui = this;
|
||||
const pos = {
|
||||
lat: crds[1],
|
||||
lng: crds[0]
|
||||
lng: crds[0],
|
||||
};
|
||||
|
||||
|
||||
@ -81,7 +81,7 @@ const GoogleMapsDriver = (($) => {
|
||||
'onClick': (e) => {
|
||||
const $popup = $(ui.popup.getDiv());
|
||||
$popup.css({
|
||||
'opacity': '0'
|
||||
'opacity': '0',
|
||||
});
|
||||
$popup.removeClass('d-none');
|
||||
|
||||
@ -95,9 +95,9 @@ const GoogleMapsDriver = (($) => {
|
||||
|
||||
$popup.css({
|
||||
'margin-left': '1rem',
|
||||
'opacity': '1'
|
||||
'opacity': '1',
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
@ -118,15 +118,15 @@ const GoogleMapsDriver = (($) => {
|
||||
const content = marker.properties.content;
|
||||
|
||||
ui.addMarker(crds, {
|
||||
'id': id,
|
||||
'content': content,
|
||||
id,
|
||||
content,
|
||||
'icon': marker.icon,
|
||||
'flyToMarker': config['flyToMarker']
|
||||
'flyToMarker': config['flyToMarker'],
|
||||
});
|
||||
|
||||
bounds.extend({
|
||||
lat: crds[1],
|
||||
lng: crds[0]
|
||||
lng: crds[0],
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@ -18,7 +18,7 @@ const Obj = {
|
||||
ui.onClick = options.onClick;
|
||||
ui.onMouseOver = options.onMouseOver;
|
||||
|
||||
ui.isBoolean = arg => {
|
||||
ui.isBoolean = (arg) => {
|
||||
if (typeof arg === 'boolean') {
|
||||
return true;
|
||||
} else {
|
||||
@ -26,7 +26,7 @@ const Obj = {
|
||||
}
|
||||
};
|
||||
|
||||
ui.isNotUndefined = arg => {
|
||||
ui.isNotUndefined = (arg) => {
|
||||
if (typeof arg !== 'undefined') {
|
||||
return true;
|
||||
} else {
|
||||
@ -34,7 +34,7 @@ const Obj = {
|
||||
}
|
||||
};
|
||||
|
||||
ui.hasContent = arg => {
|
||||
ui.hasContent = (arg) => {
|
||||
if (arg.length > 0) {
|
||||
return true;
|
||||
} else {
|
||||
@ -42,7 +42,7 @@ const Obj = {
|
||||
}
|
||||
};
|
||||
|
||||
ui.isString = arg => {
|
||||
ui.isString = (arg) => {
|
||||
if (typeof arg === 'string') {
|
||||
return true;
|
||||
} else {
|
||||
@ -50,7 +50,7 @@ const Obj = {
|
||||
}
|
||||
};
|
||||
|
||||
ui.isFunction = arg => {
|
||||
ui.isFunction = (arg) => {
|
||||
if (typeof arg === 'function') {
|
||||
return true;
|
||||
} else {
|
||||
@ -99,13 +99,13 @@ const Obj = {
|
||||
ui.getPanes().overlayMouseTarget.appendChild(ui.div);
|
||||
|
||||
// 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');
|
||||
if (ui.isFunction(ui.onClick)) ui.onClick();
|
||||
event.stopPropagation();
|
||||
});
|
||||
|
||||
google.maps.event.addDomListener(ui.div, 'mouseover', event => {
|
||||
google.maps.event.addDomListener(ui.div, 'mouseover', (event) => {
|
||||
google.maps.event.trigger(ui, 'mouseover');
|
||||
if (ui.isFunction(ui.onMouseOver)) ui.onMouseOver();
|
||||
event.stopPropagation();
|
||||
@ -123,7 +123,7 @@ const Obj = {
|
||||
// Align HTML overlay relative to original position
|
||||
var divOffset = {
|
||||
y: undefined,
|
||||
x: undefined
|
||||
x: undefined,
|
||||
};
|
||||
|
||||
switch (Array.isArray(ui.align) ? ui.align.join(' ') : '') {
|
||||
@ -169,8 +169,8 @@ const Obj = {
|
||||
}
|
||||
|
||||
// Set position
|
||||
ui.div.style.top = positionInPixels.y - divOffset.y + 'px';
|
||||
ui.div.style.left = positionInPixels.x - divOffset.x + 'px';
|
||||
ui.div.style.top = `${positionInPixels.y - divOffset.y }px`;
|
||||
ui.div.style.left = `${positionInPixels.x - divOffset.x }px`;
|
||||
}
|
||||
|
||||
getPosition() {
|
||||
@ -191,7 +191,7 @@ const Obj = {
|
||||
}
|
||||
}
|
||||
return GoogleMapsHtmlOverlay;
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
export default Obj;
|
||||
|
||||
@ -26,7 +26,7 @@ const MapBoxDriver = (($) => {
|
||||
'zoom': (config['mapZoom'] ? config['mapZoom'] : 10),
|
||||
'attributionControl': false,
|
||||
'antialias': true,
|
||||
'accessToken': config['key']
|
||||
'accessToken': config['key'],
|
||||
})
|
||||
.addControl(new mapBoxGL.AttributionControl({
|
||||
compact: true,
|
||||
@ -136,10 +136,10 @@ const MapBoxDriver = (($) => {
|
||||
const content = marker.properties.content;
|
||||
|
||||
ui.addMarker(crds, {
|
||||
'id': id,
|
||||
'content': content,
|
||||
id,
|
||||
content,
|
||||
'icon': marker.icon,
|
||||
'flyToMarker': config['flyToMarker']
|
||||
'flyToMarker': config['flyToMarker'],
|
||||
});
|
||||
|
||||
bounds.extend(crds);
|
||||
|
||||
@ -15,7 +15,7 @@ const CONSTS = {
|
||||
'xxl',
|
||||
'xxxl',
|
||||
],
|
||||
MAP_DRIVER: MAP_DRIVER
|
||||
MAP_DRIVER,
|
||||
};
|
||||
|
||||
export default CONSTS;
|
||||
|
||||
@ -235,7 +235,7 @@ const MainUI = (($) => {
|
||||
$Body.append($el);
|
||||
let curEnv = envs.shift();
|
||||
|
||||
for (let env of envs.reverse()) {
|
||||
for (const env of envs.reverse()) {
|
||||
$el.addClass(`d-${env}-none`);
|
||||
if ($el.is(':hidden')) {
|
||||
curEnv = env;
|
||||
|
||||
@ -73,8 +73,6 @@ import '@a2nt/meta-lightbox/src/js/index';
|
||||
|
||||
// Map UI
|
||||
import MapApi from './_components/_ui.map.api';
|
||||
// Google Maps
|
||||
//import MapApi from './_components/_ui.map.api.google';
|
||||
|
||||
import './_main';
|
||||
import './_layout';
|
||||
|
||||
@ -6,4 +6,4 @@
|
||||
* 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,""").replace(/'/g,"'").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(/"/g,'"').replace(/'/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,""").replace(/'/g,"'").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(/"/g,'"').replace(/'/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)
|
||||
@ -12,27 +12,27 @@
|
||||
|
||||
// default titles of buttons
|
||||
var varsTitle = [
|
||||
{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"}
|
||||
{ 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" },
|
||||
];
|
||||
|
||||
// default text formats
|
||||
@ -52,7 +52,7 @@
|
||||
"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"
|
||||
"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
|
||||
@ -66,12 +66,12 @@
|
||||
'titletext' : varsTitle,
|
||||
'button' : "OK",
|
||||
'format' : true,
|
||||
'formats' : formats,
|
||||
formats,
|
||||
'fsize' : true,
|
||||
'fsizes' : fsizes,
|
||||
fsizes,
|
||||
'funit' : "px",
|
||||
'color' : true,
|
||||
'linktypes' : linktypes,
|
||||
linktypes,
|
||||
'b' : true,
|
||||
'i' : true,
|
||||
'u' : true,
|
||||
@ -97,12 +97,12 @@
|
||||
// events
|
||||
'change' : "",
|
||||
'focus' : "",
|
||||
'blur' : ""
|
||||
'blur' : "",
|
||||
}, options);
|
||||
|
||||
// methods
|
||||
$.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
|
||||
@ -118,7 +118,7 @@
|
||||
function addParams(name,command,key,tag,emphasis)
|
||||
{
|
||||
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
|
||||
@ -154,9 +154,9 @@
|
||||
if(!vars.status || !$(this).data("jqte"))
|
||||
{
|
||||
// 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
|
||||
var thisElementAttrs = "";
|
||||
@ -164,13 +164,13 @@
|
||||
$($(this)[0].attributes).each(function()
|
||||
{
|
||||
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";
|
||||
|
||||
// the contents of this element
|
||||
var createValue = '>'+editorValue;
|
||||
var createValue = `>${editorValue}`;
|
||||
|
||||
// if this element is input or option
|
||||
if(thisElementTag=="input" || thisElementTag=="option")
|
||||
@ -179,13 +179,13 @@
|
||||
editorValue = editorValue.replace(/"/g,'"').replace(/'/g,''').replace(/</g,'<').replace(/>/g,'>');
|
||||
|
||||
// the value of this element
|
||||
createValue = 'value="'+editorValue+'">';
|
||||
createValue = `value="${editorValue}">`;
|
||||
}
|
||||
|
||||
var thisClone = $(this).clone();
|
||||
|
||||
$(this).data("jqte",false).closest("."+vars.css).before(thisClone).remove();
|
||||
thisClone.replaceWith('<'+ thisElementTag + thisElementAttrs + createValue + '</'+thisElementTag+'>');
|
||||
$(this).data("jqte",false).closest(`.${vars.css}`).before(thisClone).remove();
|
||||
thisClone.replaceWith(`<${ thisElementTag }${thisElementAttrs }${createValue }</${thisElementTag}>`);
|
||||
}
|
||||
return;
|
||||
}
|
||||
@ -206,37 +206,37 @@
|
||||
thisElementVal = thisElementVal.replace(/"/g,'"').replace(/'/g,"'").replace(/</g,'<').replace(/>/g,'>').replace(/&/g,'&');
|
||||
|
||||
// start jqte editor to after the element
|
||||
$(this).after('<div class="'+vars.css+'"></div>');
|
||||
$(this).after(`<div class="${vars.css}"></div>`);
|
||||
|
||||
// jqte
|
||||
var jQTE = $(this).next('.'+vars.css);
|
||||
var jQTE = $(this).next(`.${vars.css}`);
|
||||
|
||||
// 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 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 emphasize = vars.css+"_tool_depressed"; // highlight style of the toolbar buttons
|
||||
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 editor = jQTE.find(`.${vars.css}_editor`); // the text-field of jqte editor
|
||||
var emphasize = `${vars.css}_tool_depressed`; // highlight style of the toolbar buttons
|
||||
|
||||
// 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 linkinput = linkform.find("."+vars.css+"_linkinput"); // the input of insertion link
|
||||
var linkbutton = linkform.find("."+vars.css+"_linkbutton"); // the button of insertion link
|
||||
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 linkbutton = linkform.find(`.${vars.css}_linkbutton`); // the button of insertion link
|
||||
|
||||
// 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 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 linktypes = linktypeselect.find(`.${vars.css}_linktypes`); // the select box of link types
|
||||
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"
|
||||
|
||||
// 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
|
||||
thisElement.appendTo(sourceField);
|
||||
@ -249,11 +249,11 @@
|
||||
|
||||
$(thisElement[0].attributes).each(function(){
|
||||
if(this.nodeName!="type" && this.nodeName!="value")
|
||||
thisElementAttrs = thisElementAttrs+" "+this.nodeName+'="'+this.nodeValue+'"';
|
||||
thisElementAttrs = `${thisElementAttrs} ${this.nodeName}="${this.nodeValue}"`;
|
||||
});
|
||||
|
||||
// convert the element to textarea
|
||||
thisElement.replaceWith('<textarea '+thisElementAttrs+'>'+thisElementVal+'</textarea>');
|
||||
thisElement.replaceWith(`<textarea ${thisElementAttrs}>${thisElementVal}</textarea>`);
|
||||
|
||||
// update to variable of thisElement
|
||||
thisElement = sourceField.find("textarea");
|
||||
@ -269,14 +269,14 @@
|
||||
if(vars[buttons[n].name])
|
||||
{
|
||||
// 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 : '';
|
||||
|
||||
// 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
|
||||
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
|
||||
if(buttons[n].name=="format" && $.isArray(vars.formats))
|
||||
@ -284,46 +284,46 @@
|
||||
// selected text format
|
||||
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)
|
||||
.append('<div class="'+vars.css+'_formats" unselectable></div>');
|
||||
toolbar.find(`.${vars.css}_tool_${buttons[n].cls}`)
|
||||
.append(`<div class="${vars.css}_formats" unselectable></div>`);
|
||||
|
||||
// add font-sizes to font-size-selector
|
||||
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
|
||||
else if(buttons[n].name=="fsize" && $.isArray(vars.fsizes))
|
||||
{
|
||||
toolbar.find("."+vars.css+'_tool_'+buttons[n].cls)
|
||||
.append('<div class="'+vars.css+'_fontsizes" unselectable></div>');
|
||||
toolbar.find(`.${vars.css}_tool_${buttons[n].cls}`)
|
||||
.append(`<div class="${vars.css}_fontsizes" unselectable></div>`);
|
||||
|
||||
// add font-sizes to font-size-selector
|
||||
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
|
||||
else if(buttons[n].name=="color" && $.isArray(colors))
|
||||
{
|
||||
toolbar.find("."+vars.css+'_tool_'+buttons[n].cls)
|
||||
.append('<div class="'+vars.css+'_cpalette" unselectable></div>');
|
||||
toolbar.find(`.${vars.css}_tool_${buttons[n].cls}`)
|
||||
.append(`<div class="${vars.css}_cpalette" unselectable></div>`);
|
||||
|
||||
// create color palette to color-selector field
|
||||
for(var c = 0; c < colors.length; c++)
|
||||
{
|
||||
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
|
||||
toolbar.find("."+vars.css+"_cpalette").append('<div class="'+vars.css+"_colorSeperator"+'"></div>');
|
||||
toolbar.find(`.${vars.css}_cpalette`).append(`<div class="${vars.css}_colorSeperator`+`"></div>`);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -335,9 +335,9 @@
|
||||
// add link types to link-type-selector
|
||||
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
|
||||
@ -359,33 +359,33 @@
|
||||
// the feature of 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();
|
||||
});
|
||||
}
|
||||
|
||||
// make unselectable to unselectable attribute ones
|
||||
jQTE.find("[unselectable]")
|
||||
.css(prefixCss+"user-select","none")
|
||||
.css(`${prefixCss}user-select`,"none")
|
||||
.addClass("unselectable")
|
||||
.attr("unselectable","on")
|
||||
.on("selectstart mousedown",false);
|
||||
|
||||
// each button of the toolbar
|
||||
var toolbutton = toolbar.find("."+vars.css+"_tool");
|
||||
var toolbutton = toolbar.find(`.${vars.css}_tool`);
|
||||
|
||||
// format menu
|
||||
var formatbar = toolbar.find("."+vars.css+"_formats");
|
||||
var formatbar = toolbar.find(`.${vars.css}_formats`);
|
||||
|
||||
// font-size filed
|
||||
var fsizebar = toolbar.find("."+vars.css+"_fontsizes");
|
||||
var fsizebar = toolbar.find(`.${vars.css}_fontsizes`);
|
||||
|
||||
// color palette
|
||||
var cpalette = toolbar.find("."+vars.css+"_cpalette");
|
||||
var cpalette = toolbar.find(`.${vars.css}_cpalette`);
|
||||
|
||||
// get the selected text as plain format
|
||||
function selectionGet()
|
||||
@ -478,7 +478,7 @@
|
||||
var range = document.selection.createRange();
|
||||
var selectedText = range.htmlText;
|
||||
|
||||
var newText = '<'+tTag+' '+tAttr+'="'+tVal+'">'+selectedText+'</'+tTag+'>';
|
||||
var newText = `<${tTag} ${tAttr}="${tVal}">${selectedText}</${tTag}>`;
|
||||
|
||||
document.selection.createRange().pasteHTML(newText);
|
||||
}
|
||||
@ -531,7 +531,7 @@
|
||||
styleKey = styleKey[0].split(":") // get the key of first style feature
|
||||
|
||||
// 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]);
|
||||
|
||||
// select to the selected node again
|
||||
@ -606,20 +606,19 @@
|
||||
linkinput.val(thisHrefLink).focus();
|
||||
|
||||
// the method of displaying-hiding to link-types
|
||||
linktypeselect.click(function(e)
|
||||
{
|
||||
if($(e.target).hasClass(vars.css+"_linktypetext") || $(e.target).hasClass(vars.css+"_linktypearrow"))
|
||||
linktypeselect.click((e) => {
|
||||
if($(e.target).hasClass(`${vars.css}_linktypetext`) || $(e.target).hasClass(`${vars.css}_linktypearrow`))
|
||||
linktypeSwitch(true);
|
||||
});
|
||||
|
||||
// the method of selecting to link-types
|
||||
linktypes.find("a").click(function()
|
||||
{
|
||||
var thisLinkType = $(this).attr(vars.css+"-linktype");
|
||||
var thisLinkType = $(this).attr(`${vars.css}-linktype`);
|
||||
|
||||
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);
|
||||
|
||||
@ -635,19 +634,17 @@
|
||||
// update to value
|
||||
.val(thisHrefLink)
|
||||
// the event of key to enter in link-input
|
||||
.bind("keypress keyup",function(e)
|
||||
{
|
||||
.bind("keypress keyup",(e) => {
|
||||
if(e.keyCode==13)
|
||||
{
|
||||
linkRecord(jQTE.find("["+setdatalink+"]"));
|
||||
linkRecord(jQTE.find(`[${setdatalink}]`));
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
// the event of click link-button
|
||||
linkbutton.click(function()
|
||||
{
|
||||
linkRecord(jQTE.find("["+setdatalink+"]"));
|
||||
linkbutton.click(() => {
|
||||
linkRecord(jQTE.find(`[${setdatalink}]`));
|
||||
});
|
||||
}
|
||||
else
|
||||
@ -698,8 +695,8 @@
|
||||
function linkAreaSwitch(status)
|
||||
{
|
||||
// remove all pre-link attribute (mark as "link will be added")
|
||||
clearSetElement("["+setdatalink+"]:not([href])");
|
||||
jQTE.find("["+setdatalink+"][href]").removeAttr(setdatalink);
|
||||
clearSetElement(`[${setdatalink}]:not([href])`);
|
||||
jQTE.find(`[${setdatalink}][href]`).removeAttr(setdatalink);
|
||||
|
||||
if(status)
|
||||
{
|
||||
@ -758,7 +755,7 @@
|
||||
// the event of click to style button
|
||||
styleField.find("a").unbind("click").click(function()
|
||||
{
|
||||
var styleValue = $(this).attr(vars.css + "-styleval"); // the property of style value to be added
|
||||
var styleValue = $(this).attr(`${vars.css }-styleval`); // the property of style value to be added
|
||||
|
||||
// if selected to changing the font-size value
|
||||
if(styleCommand=="fSize")
|
||||
@ -770,19 +767,19 @@
|
||||
else if(styleCommand=="colors")
|
||||
{
|
||||
styleType = "color";
|
||||
styleValue = "rgb("+styleValue + ")"; // combine color value with rgb
|
||||
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
|
||||
replaceSelection("span","style",styleType+":"+styleValue+";"+prevStyles);
|
||||
replaceSelection("span","style",`${styleType}:${styleValue};${prevStyles}`);
|
||||
|
||||
// hide all style-fields
|
||||
styleFieldSwitch("",false);
|
||||
|
||||
// remove title bubbles
|
||||
$('.'+vars.css+'_title').remove();
|
||||
$(`.${vars.css}_title`).remove();
|
||||
|
||||
// export contents of the text to the sources
|
||||
editor.trigger("change");
|
||||
@ -801,7 +798,7 @@
|
||||
function styleFieldSwitch(styleField,status)
|
||||
{
|
||||
var mainData="", // the style data of the actual wanted
|
||||
allData = [{"d":"fsizeOpened","f":fsizebar},{"d":"cpallOpened","f":cpalette}]; // all style datas
|
||||
allData = [{ "d":"fsizeOpened","f":fsizebar },{ "d":"cpallOpened","f":cpalette }]; // all style datas
|
||||
|
||||
// if the style data of the actual wanted isn't empty
|
||||
if(styleField!="")
|
||||
@ -878,18 +875,17 @@
|
||||
|
||||
formatbar.find("a").click(function()
|
||||
{
|
||||
$("*",this).click(function(e)
|
||||
{
|
||||
$("*",this).click((e) => {
|
||||
e.preventDefault();
|
||||
return false;
|
||||
});
|
||||
|
||||
formatLabelView($(this).text());
|
||||
|
||||
var formatValue = $(this).attr(vars.css + "-formatval"); // the type of format value
|
||||
var formatValue = $(this).attr(`${vars.css }-formatval`); // the type of format value
|
||||
|
||||
// convert to selected format
|
||||
selectionSet("formatBlock",'<'+formatValue+'>');
|
||||
selectionSet("formatBlock",`<${formatValue}>`);
|
||||
|
||||
formatFieldSwitch(false);
|
||||
});
|
||||
@ -911,10 +907,10 @@
|
||||
// change format label
|
||||
function formatLabelView(str)
|
||||
{
|
||||
var formatLabel = formatbar.closest("."+vars.css+"_tool").find("."+vars.css+"_tool_label").find("."+vars.css+"_tool_text");
|
||||
var formatLabel = formatbar.closest(`.${vars.css}_tool`).find(`.${vars.css}_tool_label`).find(`.${vars.css}_tool_text`);
|
||||
|
||||
if(str.length > 10)
|
||||
str = str.substr(0,7) + "...";
|
||||
str = `${str.substr(0,7) }...`;
|
||||
|
||||
// change format label of button
|
||||
formatLabel.html(str);
|
||||
@ -933,7 +929,7 @@
|
||||
/<(\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
|
||||
/\<em(|\s+.*?)>(.*?)\<\/em>/gim // convert em to i
|
||||
/\<em(|\s+.*?)>(.*?)\<\/em>/gim, // convert em to i
|
||||
];
|
||||
|
||||
$htmlReplace = [
|
||||
@ -941,7 +937,7 @@
|
||||
'',
|
||||
'<p$1>$2</p>',
|
||||
'<b$1>$2</b>',
|
||||
'<i$1>$2</i>'
|
||||
'<i$1>$2</i>',
|
||||
];
|
||||
|
||||
// repeat the cleaning process 5 times
|
||||
@ -963,12 +959,12 @@
|
||||
{
|
||||
$htmlPattern = [
|
||||
/\<br>(.*?)/ig,
|
||||
/\<br\/>(.*?)/ig
|
||||
/\<br\/>(.*?)/ig,
|
||||
];
|
||||
|
||||
$htmlReplace = [
|
||||
'<p>$1</p>',
|
||||
'<p>$1</p>'
|
||||
'<p>$1</p>',
|
||||
];
|
||||
|
||||
// create loop as the number of pattern (for breaks)
|
||||
@ -1006,7 +1002,7 @@
|
||||
|
||||
if($node)
|
||||
{
|
||||
$.each(tags, function(i, val){
|
||||
$.each(tags, (i, val) => {
|
||||
parentsTag = $node.prop('tagName').toLowerCase();
|
||||
|
||||
if (parentsTag == val)
|
||||
@ -1033,7 +1029,7 @@
|
||||
for(var n = 0; n < buttons.length; n++)
|
||||
{
|
||||
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);
|
||||
detectElement(buttons[n].tag) ? toolbar.find(`.${vars.css}_tool_${buttons[n].cls}`).addClass(emphasize) : $(`.${vars.css}_tool_${buttons[n].cls}`).removeClass(emphasize);
|
||||
}
|
||||
// showing text format
|
||||
if(vars.format && $.isArray(vars.formats))
|
||||
@ -1071,8 +1067,8 @@
|
||||
if($(this).data('command')=='displaysource' && !toolbar.data("sourceOpened"))
|
||||
{
|
||||
// hide all the toolbar buttons (except the source button)
|
||||
toolbar.find("."+vars.css+"_tool").addClass(vars.css+"_hiddenField");
|
||||
$(this).removeClass(vars.css+"_hiddenField");
|
||||
toolbar.find(`.${vars.css}_tool`).addClass(`${vars.css}_hiddenField`);
|
||||
$(this).removeClass(`${vars.css}_hiddenField`);
|
||||
|
||||
// update to data of source displaying
|
||||
toolbar.data("sourceOpened",true);
|
||||
@ -1080,8 +1076,8 @@
|
||||
// equalize height of the text field with height of the source field
|
||||
thisElement.css("height",editor.outerHeight());
|
||||
|
||||
sourceField.removeClass(vars.css+"_hiddenField");
|
||||
editor.addClass(vars.css+"_hiddenField");
|
||||
sourceField.removeClass(`${vars.css}_hiddenField`);
|
||||
editor.addClass(`${vars.css}_hiddenField`);
|
||||
thisElement.focus();
|
||||
|
||||
// hide the link-form-field
|
||||
@ -1121,7 +1117,7 @@
|
||||
// if the format button is clicked
|
||||
else if($(this).data('command')=='formats')
|
||||
{
|
||||
if($(this).data('command')=='formats' && !$(e.target).hasClass(vars.css+"_format"))
|
||||
if($(this).data('command')=='formats' && !$(e.target).hasClass(`${vars.css}_format`))
|
||||
selected2format();
|
||||
|
||||
// hide all style-fields
|
||||
@ -1135,8 +1131,8 @@
|
||||
else if($(this).data('command')=='fSize' || $(this).data('command')=='colors')
|
||||
{
|
||||
if(
|
||||
($(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
|
||||
($(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
|
||||
)
|
||||
selected2style($(this).data('command'));
|
||||
|
||||
@ -1165,8 +1161,8 @@
|
||||
// to highlight the toolbar buttons according to the cursor position in jqte editor
|
||||
$(this).data('emphasis')==true && !$(this).hasClass(emphasize) ? $(this).addClass(emphasize) : $(this).removeClass(emphasize);
|
||||
|
||||
sourceField.addClass(vars.css+"_hiddenField");
|
||||
editor.removeClass(vars.css+"_hiddenField");
|
||||
sourceField.addClass(`${vars.css}_hiddenField`);
|
||||
editor.removeClass(`${vars.css}_hiddenField`);
|
||||
}
|
||||
|
||||
}
|
||||
@ -1177,10 +1173,10 @@
|
||||
toolbar.data("sourceOpened",false);
|
||||
|
||||
// display all the toolbar buttons
|
||||
toolbar.find("."+vars.css+"_tool").removeClass(vars.css+"_hiddenField");
|
||||
toolbar.find(`.${vars.css}_tool`).removeClass(`${vars.css}_hiddenField`);
|
||||
|
||||
sourceField.addClass(vars.css+"_hiddenField");
|
||||
editor.removeClass(vars.css+"_hiddenField");
|
||||
sourceField.addClass(`${vars.css}_hiddenField`);
|
||||
editor.removeClass(`${vars.css}_hiddenField`);
|
||||
}
|
||||
|
||||
if(vars.placeholder && vars.placeholder!="")
|
||||
@ -1192,24 +1188,24 @@
|
||||
})
|
||||
// the event of showing to the title bubble when mouse over of the toolbar buttons
|
||||
.hover(function(e){
|
||||
if(vars.title && $(this).data("title")!="" && ( $(e.target).hasClass(vars.css+"_tool") || $(e.target).hasClass(vars.css+"_tool_icon") ))
|
||||
if(vars.title && $(this).data("title")!="" && ( $(e.target).hasClass(`${vars.css}_tool`) || $(e.target).hasClass(`${vars.css}_tool_icon`) ))
|
||||
{
|
||||
$('.'+vars.css+'_title').remove();
|
||||
$(`.${vars.css}_title`).remove();
|
||||
|
||||
// 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>');
|
||||
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 thisTitle = $('.'+vars.css+'_title:first');
|
||||
var thisArrow = thisTitle.find('.'+vars.css+'_titleArrowIcon');
|
||||
var thisTitle = $(`.${vars.css}_title:first`);
|
||||
var thisArrow = thisTitle.find(`.${vars.css}_titleArrowIcon`);
|
||||
var thisPosition = $(this).position();
|
||||
var thisAlignX = thisPosition.left + $(this).outerWidth() - (thisTitle.outerWidth()/2) - ($(this).outerWidth()/2);
|
||||
var thisAlignY = (thisPosition.top + $(this).outerHeight() + 5);
|
||||
|
||||
// show the title bubble and set to its position
|
||||
thisTitle.delay(400).css({'top':thisAlignY, 'left':thisAlignX}).fadeIn(200);
|
||||
thisTitle.delay(400).css({ 'top':thisAlignY, 'left':thisAlignX }).fadeIn(200);
|
||||
}
|
||||
},function(){
|
||||
$('.'+vars.css+'_title').remove();
|
||||
},() => {
|
||||
$(`.${vars.css}_title`).remove();
|
||||
});
|
||||
|
||||
// prevent multiple calling postToSource()
|
||||
@ -1236,8 +1232,7 @@
|
||||
if(vars.placeholder && vars.placeholder!="")
|
||||
$(this).text()!="" ? placeHolder.hide() : placeHolder.show();
|
||||
})
|
||||
.bind("change",function()
|
||||
{
|
||||
.bind("change",() => {
|
||||
if(!toolbar.data("sourceOpened"))
|
||||
{
|
||||
clearTimeout(editorChangeTimer);
|
||||
@ -1246,8 +1241,7 @@
|
||||
})
|
||||
|
||||
// run to keyboard shortcuts
|
||||
.keydown(function(e)
|
||||
{
|
||||
.keydown((e) => {
|
||||
// if ctrl key is clicked
|
||||
if(e.ctrlKey)
|
||||
{
|
||||
@ -1274,14 +1268,13 @@
|
||||
.bind("mouseup keyup",buttonEmphasize)
|
||||
|
||||
// the event of focus to the text field
|
||||
.focus(function()
|
||||
{
|
||||
.focus(() => {
|
||||
// if the focus method is added run the focus method
|
||||
if($.isFunction(vars.focus))
|
||||
vars.focus();
|
||||
|
||||
// add onfocus class
|
||||
jQTE.addClass(vars.css+"_focused");
|
||||
jQTE.addClass(`${vars.css}_focused`);
|
||||
|
||||
// prevent focus problem on opera
|
||||
if(/opera/.test(thisBrowser))
|
||||
@ -1296,8 +1289,7 @@
|
||||
})
|
||||
|
||||
// the event of focus out from the text field
|
||||
.focusout(function()
|
||||
{
|
||||
.focusout(() => {
|
||||
// remove to highlights of all toolbar buttons
|
||||
toolbutton.removeClass(emphasize);
|
||||
|
||||
@ -1311,7 +1303,7 @@
|
||||
vars.blur();
|
||||
|
||||
// remove onfocus class
|
||||
jQTE.removeClass(vars.css+"_focused");
|
||||
jQTE.removeClass(`${vars.css}_focused`);
|
||||
|
||||
// show default text format
|
||||
if($.isArray(vars.formats))
|
||||
@ -1332,15 +1324,13 @@
|
||||
if($(this).val()=="")
|
||||
$(this).height(0);
|
||||
})
|
||||
.focus(function()
|
||||
{
|
||||
.focus(() => {
|
||||
// add onfocus class
|
||||
jQTE.addClass(vars.css+"_focused");
|
||||
jQTE.addClass(`${vars.css}_focused`);
|
||||
})
|
||||
.focusout(function()
|
||||
{
|
||||
.focusout(() => {
|
||||
// remove onfocus class
|
||||
jQTE.removeClass(vars.css+"_focused");
|
||||
jQTE.removeClass(`${vars.css}_focused`);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user