Merge pull request #10 from draane/container

Add the option to set a container for the toast.
Script47 · Jul 10, 2019 · e362307 · e362307
2 parents 0b9c270 + deb66a4
commit e362307
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 23 deletions.
diff --git a/README.md b/README.md
@@ -16,14 +16,15 @@ As of Bootstrap 4.2, [toasts](https://getbootstrap.com/docs/4.2/components/toast
 You can pass to the `$.toast` function an object with the settings for your toast which are as follows:
 
 | Parameter     |Description| Default | Values |
-| ------------- |-----------| -------  |---------
+| ------------- |-----------| -------  |---------|
 | title         | Shows in the top left corner of the toast header | 'Notice!'|        |
 | subtitle      | Shows in the top right corner of the toast header | N/A      |        |
-| content       | Shows in the toast body | N/A      |
-| type          | Determines the style of the toast based on Bootstrap styles | 'info'   | 'info', 'success', 'warning', 'error'
+| content       | Shows in the toast body | N/A      |        |
+| type          | Determines the style of the toast based on Bootstrap styles | 'info'   | 'info', 'success', 'warning', 'error' |
 | delay         | Determines how long the Toast shoud be shown for.  The default, -1, will show the toast until the user clicks close. | -1 | omit or set to -1 to disable auto close, or timeout value in milliseconds
 | img           | Shows an image before the title | N/A | { src: '', class: '', title: '', alt: '' }
 | pause_on_hover| true/false respectively to pause on hover | false | true/false  |
+| container     | Set the container inside which the toasts will be displayed | $("body") | A JQuery selector |
 
 **Note:** If content is omitted, the toast will not have a `.toast-body` and can be used as a small snack which will be shown below in the examples. By default toasts will be positioned in the top right corner and will in the future (hopefully) have other position options.
 

diff --git a/css/toast.css b/css/toast.css
@@ -3,25 +3,25 @@
  * @description Toast - A Bootstrap 4.2+ jQuery plugin for the toast component
  * @version 0.7.1
  **/
-#toast-container {
+.toast-container {
     position: sticky;
     z-index: 1055;
     top: 0
 }
 
-#toast-wrapper {
+.toast-wrapper {
     position: absolute;
     top: 0;
     right: 0;
     margin: 5px
 }
 
-#toast-container>#toast-wrapper>.toast {
+.toast-container>.toast-wrapper>.toast {
     min-width: 150px;
     background-color: rgb(255, 255, 255);
     border-top: none;
 }
 
-#toast-container>#toast-wrapper>.toast>.toast-header strong {
+.toast-container>.toast-wrapper>.toast>.toast-header strong {
     padding-right: 20px;
-}
+}
diff --git a/dist/toast.min.css b/dist/toast.min.css
@@ -3,4 +3,4 @@
  * @description Toast - A Bootstrap 4.2+ jQuery plugin for the toast component
  * @version 0.7.1
  **/
-#toast-container{position:sticky;z-index:1055;top:0}#toast-wrapper{position:absolute;top:0;right:0;margin:5px}#toast-container>#toast-wrapper>.toast{min-width:150px;background-color:rgb(255,255,255);border-top:none;}#toast-container>#toast-wrapper>.toast>.toast-header strong{padding-right:20px}
+.toast-container{position:sticky;z-index:1055;top:0}.toast-wrapper{position:absolute;top:0;right:0;margin:5px}.toast-container > .toast-wrapper > .toast{min-width:150px;background-color:rgb(255, 255, 255);border-top:none}.toast-container > .toast-wrapper > .toast > .toast-header strong{padding-right:20px}
diff --git a/dist/toast.min.js b/dist/toast.min.js
diff --git a/example/index.html b/example/index.html
@@ -20,6 +20,12 @@
         <button class="btn-block btn-primary" onclick="show_image_toast();">Show Image Toast</button>
         <br>
         <button class="btn-block btn-primary" onclick="show_random_snack();">Show Random Snack</button>
+        <br>
+        <button class="btn-block btn-primary" onclick="show_toast_in_container();">Show Toast in Container</button>
+
+        <div class="mt-5 bg-secondary vh-100" id="my_container">
+            <p>My container</p>
+        </div>
 
         <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
@@ -90,7 +96,22 @@
                     delay: 5000
                 });
             }
+
+            function show_toast_in_container() {
+                let type = TYPES[Math.floor(Math.random() * TYPES.length)],
+                    title = TITLES[type],
+                    content = CONTENT[type];
+
+                $.toast({
+                    title: title,
+                    subtitle: '11 mins ago',
+                    content: content,
+                    type: type,
+                    delay: 5000,
+                    container: $("#my_container")
+                });
+            }
         </script>
     </body>
 
-</html>
+</html>
diff --git a/js/toast.js b/js/toast.js
@@ -4,18 +4,25 @@
  * @version 0.7.1
  **/
 (function ($) {
-    var TOAST_CONTAINER_HTML = '<div id="toast-container" aria-live="polite" aria-atomic="true"></div>';
-    var TOAST_WRAPPER_HTML = '<div id="toast-wrapper"></div>';
+    var TOAST_CONTAINER_HTML = '<div class="toast-container" aria-live="polite" aria-atomic="true"></div>';
+    var TOAST_WRAPPER_HTML = '<div class="toast-wrapper"></div>';
 
     $.toast = function (opts) {
-        if (!$('#toast-container').length) {
-            $('body').prepend(TOAST_CONTAINER_HTML);
-            $('#toast-container').append(TOAST_WRAPPER_HTML);
+        // If container is not set in opts use body
+        var general_container = $('body');
+        if (opts.container && opts.container.length === 1)
+            general_container = opts.container;
 
-            $('body').on('hidden.bs.toast', '.toast', function () {
+        // if toast container and wrapper are not present in container create them
+        if (!general_container.children('.toast-container').length) {
+            general_container.prepend(TOAST_CONTAINER_HTML);
+            general_container.children('.toast-container').append(TOAST_WRAPPER_HTML);
+
+            general_container.on('hidden.bs.toast', '.toast', function () {
                 $(this).remove();
             });
         }
+        var toast_wrapper = general_container.children('.toast-container').children('.toast-wrapper');
 
         var id = 'toast-' + ($('.toast').length + 1),
             html = '',
@@ -100,8 +107,8 @@
 
         html += '</div>';
 
-        $('#toast-wrapper').append(html);
-        $('#toast-wrapper .toast:last').toast('show');
+        toast_wrapper.append(html);
+        toast_wrapper.find('.toast:last').toast('show');
 
         if (pause_on_hover !== false) {
             setTimeout(function () {
@@ -126,4 +133,4 @@
             });
         }
     }
-}(jQuery));
+}(jQuery));