Merge pull request #11 from mickelsonmichael/dev

Feature: Snackbar Positioning
mickelsonmichael · Jan 14, 2021 · 7237a5a · 7237a5a
2 parents dc0dbb1 + e94f028
commit 7237a5a
Show file tree

Hide file tree

Showing 3 changed files with 106 additions and 8 deletions.
diff --git a/css/js-snackbar.css b/css/js-snackbar.css
@@ -7,9 +7,31 @@
     align-items: flex-end;
     max-width: 100%;
     padding: 10px;
+    z-index: 999;
     overflow: hidden;
 }
 
+.js-snackbar-container--top-left {
+    bottom: unset;
+    right: unset;
+    top: 0;
+    left: 0;
+}
+
+.js-snackbar-container--top-right {
+    bottom: unset;
+    right: 0;
+    left: unset;
+    top: 0;
+}
+
+.js-snackbar-container--bottom-left {
+    bottom: 0;
+    right: unset;
+    left: 0;
+    top: unset;
+}
+
 .js-snackbar-container--fixed {
     position: fixed;
 }

diff --git a/index.html b/index.html
@@ -49,12 +49,18 @@ <h1>JS-Snackbar</h1>
                     </a>
                 </li>
 
+                <li class="nav-li">
+                    <a href="#Positioning" class="nav-a">
+                        Positioning
+                    </a>
+                </li>
+
                 <li class="nav-li">
                     <a href="#Fixed" class="nav-a">
                         Fixed Position
                     </a>
                 </li>
-
+               
                 <li class="nav-li">
                     <a href="#tryit" class="nav-a">
                         Try it Yourself
@@ -184,6 +190,40 @@ <h2 class="section-title">Timeout Options</h2>
                 <button type="button" class="button" onclick="demoNoDissmiss();">Undismissible</button>
             </article>
 
+            <article id="Positioning" class="section">
+                <h2 class="section-title">Positioning</h2>
+
+                <p>
+                    By default, the Snackbar will appear in the bottom-right corner of the container.
+                    This can be changed by setting the <strong>position</strong> option to either "tr", "tl", "bl", or "br" while creating the SnackBar.
+                </p>
+
+                <p>
+                    Snackbars can appear in multiple positions simultaneously without interfering with one another
+                </p>
+
+                <pre>
+var snack = new SnackBar({
+    position: "br"
+});
+                </pre>
+
+                <button type=button class="button" onclick="demoPosition('tl');">Top-Left</button>
+                <button type=button class="button" onclick="demoPosition('tr');">Top-Right</button>
+                <button type=button class="button" onclick="demoPosition('bl');">Bottom-Left</button>
+                <button type=button class="button" onclick="demoPosition('br');">Bottom-Right</button>
+
+
+                <script>
+                    var demoPosition = function(pos) {
+                        var snack = SnackBar({
+                            position: pos,
+                            message: "I should be in the '" + pos + "' corner!"
+                        });
+                    }
+                </script>
+            </article>
+
             <article id="Fixed" class="section">
                 <h2 class="section-title">Fixed Positioning</h2>
 
@@ -237,6 +277,16 @@ <h2 class="section-title">Try it Yourself!</h2>
                         </div>
 
                     </div>
+
+                    <div class="field">
+                        <label>Position</label>
+                        <select id="demo_pos">
+                            <option selected value="br">Bottom-Right</option>
+                            <option value="tr">Top-Right</option>
+                            <option value="bl">Bottom-Left</option>
+                            <option value="tl">Top-Left</option>
+                        </select>
+                    </div>
 
                     <div class="field">
                         <label for=demo_dismiss>
@@ -353,10 +403,6 @@ <h2 class="section-title">Containers</h2>
         </section>
     </div>
 
-
-
-    <script src="js/js-snackbar.js?v=1.1.0"></script>
-    <script src="site.js?v=1.0.0"></script>
     <script>
 
         var demoTimeout = function () {
@@ -391,12 +437,16 @@ <h2 class="section-title">Containers</h2>
                 message: document.getElementById("demo_text").value,
                 dismissible: document.getElementById("demo_dismiss").checked,
                 status: document.getElementById("demo_status").value,
-                timeout: timeout
+                timeout: timeout,
+                position: document.getElementById("demo_pos").value
             });
 
             return false;
         }
     </script>
+
+    <script src="js/js-snackbar.js?v=1.2.0"></script>
+    <script src="site.js?v=1.0.0"></script>
 </body>
 
 </html>
diff --git a/js/js-snackbar.js b/js/js-snackbar.js
@@ -14,7 +14,8 @@ function SnackBar(userOptions) {
         timeout: 5000,
         status: "",
         actions: [],
-        fixed: false
+        fixed: false,
+        position: "br"
     }
     var _Options = _OptionDefaults;
 
@@ -59,6 +60,8 @@ function SnackBar(userOptions) {
             _Container.classList.remove("js-snackbar-container--fixed");
         }
 
+        // Apply the positioning class
+        _Container.classList.add(getPositionClass());
 
         _Element = document.createElement("div");
         _Element.classList.add("js-snackbar__wrapper");
@@ -223,6 +226,8 @@ function SnackBar(userOptions) {
         if (userOptions.fixed !== undefined) {
             _Options.fixed = userOptions.fixed;
         }
+
+        _Options.position = userOptions.position ?? _OptionDefaults.position;
     }
 
 
@@ -231,16 +236,22 @@ function SnackBar(userOptions) {
         var htmlCollection = target.children;
         var node = null;
         var i = 0;
+        var positionClass = getPositionClass();
 
         for (i = 0; i < htmlCollection.length; i++) {
             node = htmlCollection.item(i);
 
-            if (node.nodeType === 1 && node.classList.length > 0 && node.classList.contains("js-snackbar-container")) {
+            if (node.nodeType === 1
+                && node.classList.length > 0
+                && node.classList.contains("js-snackbar-container")
+                && node.classList.contains(positionClass)) {
                 return node;
             }
         }
 
         return null;
+
+
     }
 
     this.Open = function() {
@@ -283,6 +294,21 @@ function SnackBar(userOptions) {
         }, 1000);
     };
 
+    this.getPositionClass = function() {
+        console.log(_Options.position)
+        switch(_Options.position)
+        {
+            case "bl":
+                return "js-snackbar-container--bottom-left";
+            case "tl":
+                return "js-snackbar-container--top-left";
+            case "tr":
+                return "js-snackbar-container--top-right";
+            default:
+                return "js-snackbar-container--bottom-right";
+        }
+    }
+
     _ConfigureDefaults();
     _Create();
     _This.Open();