added default titles, messages; updated css; added function setPosition

2026-06-11 08:03:18 +03:00 · 2021-09-19 16:29:38 +03:00
parent 818821e975
commit 5d525b4b3f
4 changed files with 235 additions and 65 deletions
--- a/demo.css
+++ b/demo.css
@@ -5,33 +5,67 @@ body {
 }

 body {
-  font-family: 'PT Sans', sans-serif;
+  font-family: 'Roboto', sans-serif;
  width: 100%;
  height: 100%;
  background-color: #1d1d22;
 }

-form {
-  width: 40%;
-  margin: 15px auto;
-  padding: 15px 35px;
-  color: #fdfeff;
-  background-color: #18181b;
+.container-form {
+  position: relative;
+  overflow: hidden;
+  height: 100%;
+  width: 70%;
+  margin: 25px auto;
+  display: flex;
+  background-color: #0d1117;
  border: 1px solid #c6c6c6;
  border-radius: 5px;
  box-shadow: 0 0 8px#999999;
+}
+
+form {
+  width: 50%;
+  min-width: 200px;
+  padding: 15px 35px;
+  color: #fdfeff;
  box-sizing: border-box;
+  justify-content: center;
+  flex-grow: 1;
 }

 form h1 {
  font-size: 3em;
  font-weight: 300;
  text-align: center;
-  color: #20a0eb;
+  /*color: #2196f3;*/
+  color: #2196f3;
  padding-top: 0;
  margin-top: 0;
 }

+.code {
+  position: relative;
+  overflow: auto;
+  width: 50%;
+  color: #f8f8f2;
+  font-size: 1.2em;
+  border-left: 1px solid #c6c6c6;
+  box-shadow: 0 0 8px#999999;
+  justify-content: left;
+  flex-grow: 1;
+  display: flex;
+  align-items: left;
+  padding: 0 !important;
+  margin: 0 !important;
+}
+
+pre {
+  margin: 0 !important;
+  padding: 0 !important;
+  white-space: pre;
+}
+
 input,
 select {
  border: 1px solid #c6c6c6;
@@ -43,7 +77,7 @@ select {

 .group {
  position: relative;
-  margin: 40px 0;
+  margin: 50px 0;
  box-sizing: border-box;
 }

@@ -114,8 +148,9 @@ select {

 .btn {
  background: #fff;
+  background-position: center;
  color: #959595;
-  border: none;
+  border: 0;
  padding: 10px 20px;
  font-size: 1.1em;
  border-radius: 3px;
@@ -123,7 +158,8 @@ select {
  text-decoration: none;
  outline: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+  transition: background 400ms;
+  /*transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);*/
 }

 .btn-box {
@@ -131,27 +167,42 @@ select {
  margin: 20px 10px;
 }

-.btn.btn-submit {
+.btn {
  cursor: pointer;
  background-color: #2196f3;
  color: #deeffd;
 }

-.btn.btn-submit:hover {
-  background-color: #0d8bf1;
+.btn:hover {
+  background: #0875ce;
  color: #fff;
 }

-.btn.btn-submit:active {
-  background-color: #2196f3;
-  color: #061e31;
+.ripple {
+  position: relative;
+  overflow: hidden;
+  transform: translate3d(0, 0, 0);
 }

-.btn.btn-cancel {
-  background: #eee;
+.ripple:after {
+  content: "";
+  display: block;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
+  background-repeat: no-repeat;
+  background-position: 50%;
+  transform: scale(10, 10);
+  opacity: 0;
+  transition: transform .5s, opacity 1s;
 }

-.btn.btn-cancel:hover {
-  background: #e1e1e1;
-  color: #8b8b8b;
+.ripple:active:after {
+  transform: scale(0, 0);
+  opacity: .3;
+  transition: 0s;
 }
--- a/index.html
+++ b/index.html
@@ -8,18 +8,20 @@
  <link href="./demo.css" rel="stylesheet" type="text/css">
  <link href="./notification.css" rel="stylesheet" type="text/css">
  <title>Notifications</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/styles/github-dark.min.css">
 </head>

 <body>
+  <div class="container-form">
    <form autocomplete="off">
      <h1>Notifications</h1>
      <div class="group">
-      <input type="text" id="title" placeholder="Enter a title" value="Title">
+        <input type="text" id="title" placeholder="Enter a title" value="Info">
        <span class="bar"></span>
        <label>Title</label>
      </div>
      <div class="group">
-      <input type="text" id="message" placeholder="Enter a message" value="Default message">
+        <input type="text" id="message" placeholder="Enter a message" value="Default Info Message">
        <span class="bar"></span>
        <label>Message</label>
      </div>
@@ -30,10 +32,10 @@
      </div>
      <div class="group">
        <select id="position">
-        <option value="bottom-right">Bottom Right</option>
        <option value="top-right">Top Right</option>
-        <option value="bottom-left">Bottom Left</option>
+        <option value="bottom-right">Bottom Right</option>
        <option value="top-left">Top Left</option>
+        <option value="bottom-left">Bottom Left</option>
        <option value="center">Center</option>
      </select>
        <span class="bar"></span>
@@ -51,24 +53,96 @@
        <label>Type</label>
      </div>
      <div class="btn-box">
-      <button class="btn btn-submit" type="submit">Show notification</button>
+        <button class="btn ripple" type="submit">Show notification</button>
      </div>
    </form>
+    <div class="code">
+      <pre>
+<code class="language-javascript">
+/*
+  position may be:
+    top-right //default value
+    bottom-right
+    top-left
+    bottom-left
+    center
+  default duration value: 4000(ms)
+*/
+// Example of using
+const popup = Notification({
+  position: 'top-left',
+  duration: 3500
+});
+
+popup.error({
+  title: 'Error',
+  message: 'An error has occurred'
+});
+/*
+  Available methods:
+    error
+    warning
+    success
+    info
+    dialog 
+    
+  If you use dialog - 
+    the third parameter is the callback function
+*/  
+</code>
+      </pre>
+    </div>
+  </div>
+  <div class="overlay"></div>
  <script src="./notification.js" type="text/javascript"></script>
  <script>
    window.addEventListener('DOMContentLoaded', function() {

      const form = document.querySelector('form');

+      const titleEl = form.querySelector('#title');
+      const messageEl = form.querySelector('#message');
+      const positionEl = form.querySelector('#position');
+      const durationEl = form.querySelector('#duration');
+      const typeEl = form.querySelector('#type');
+
+      const defaultText = {
+        'info': {
+          'defaultTitle': 'Info',
+          'defaultMessage': 'Default Info Message'
+        },
+        'success': {
+          'defaultTitle': 'Success',
+          'defaultMessage': 'Default Success Message'
+        },
+        'warning': {
+          'defaultTitle': 'Warning',
+          'defaultMessage': 'Default Warning Message'
+        },
+        'error': {
+          'defaultTitle': 'Error',
+          'defaultMessage': 'An error has occurred'
+        },
+        'dialog': {
+          'defaultTitle': 'Confirm',
+          'defaultMessage': 'Are you sure you want to do this?'
+        }
+      };
+
+      typeEl.addEventListener('change', (event) => {
+        titleEl.value = defaultText[typeEl.value].defaultTitle;
+        messageEl.value = defaultText[typeEl.value].defaultMessage;
+      })
+
      form.addEventListener('submit', function(e) {
        e.preventDefault();

        // Form elements
-        let title = form.querySelector('#title').value;
-        let message = form.querySelector('#message').value;
-        let position = form.querySelector('#position').value;
-        let duration = form.querySelector('#duration').value;
-        let type = form.querySelector('#type').value;
+        const title = titleEl.value;
+        const message = messageEl.value;
+        const position = positionEl.value;
+        const duration = durationEl.value;
+        const type = typeEl.value;
        let callback = null;

        if (type == 'dialog') {
@@ -95,7 +169,16 @@
          message: message,
          callback: callback
        });
+        //Notification().error({message: 'An error has occured'}) 
      });
+
+
+    });
+  </script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/highlight.min.js"></script>
+  <script>
+    document.querySelectorAll('pre code').forEach((el) => {
+      hljs.highlightElement(el);
    });
  </script>
 </body>
--- a/notification.css
+++ b/notification.css
@@ -2,7 +2,7 @@

 .notification-container {
  position: fixed;
-  font-family: "Lato", sans-serif;
+  font-family: 'Roboto', sans-serif;
  font-size: 1.1em;
  box-sizing: border-box;
  z-index: 1000;
@@ -36,6 +36,11 @@
  bottom: 10px;
 }

+.notification-container.top-right .notification,
+.notification-container.bottom-right .notification {
+  margin-left: auto;
+}
+
 .notification {
  position: relative;
  overflow: hidden;
@@ -51,6 +56,7 @@
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
+  z-index: 100;
 }

 .notification:hover {
@@ -59,10 +65,27 @@
  cursor: pointer;
 }

+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  background-color: #000;
+  background: rgba(0, 0, 0, .5);
+  z-index: 10;
+  display: none;
+}
+
+.notification:not(.notification-default) {
+  width: 310px
+}
+
 .notification-default {
  background: rgba(255, 255, 255, 0.99);
  color: rgba(0, 0, 0, 0.8);
  border-left: 4px solid rgb(194, 191, 191);
+  width: 350px;
 }

 .notification-error {
@@ -263,11 +286,14 @@

 .notification-action:before {
  content: "\2714";
+}
+
+.notification-action {
  color: green;
 }

 .notification-action:hover {
-  color: #1983da;
+  color: rgb(4, 173, 4);
 }

@keyframes left-slide-in {
--- a/notification.js
+++ b/notification.js
@@ -1,7 +1,7 @@
 function Notification(opts) {
  const defaultOpts = {
-    position: 'bottom-right',
-    duration: 3000
+    position: 'top-right',
+    duration: 4000
  };
  opts = Object.assign({}, defaultOpts, opts);
  opts.duration = parseInt(opts.duration);
@@ -19,6 +19,7 @@ function Notification(opts) {
  const closeSelector = '.notification-close';
  const actionButSelector = '.notification-action';
  const cancelButSelector = '.notification-cancel';
+  const overlaySelector = '.overlay';

  // class, defaultTitle and defaultMessage
  const dataByType = {
@@ -42,7 +43,6 @@ function Notification(opts) {
      'defaultTitle': 'Warning',
      'defaultMessage': 'default Warning'
    },
-
    'error': {
      'classType': 'notification-error',
      'defaultTitle': 'Error',
@@ -50,6 +50,10 @@ function Notification(opts) {
    }
  };

+  const setPosition = (newPosition) => {
+    opts.position = newPosition;
+  }
+
  const tempatePopup = () => {
    return `
    <a class="notification-close">
@@ -106,6 +110,7 @@ function Notification(opts) {
    // add buttons if confirm dialog
    if (type == 'dialog') {
      elPopup.insertAdjacentHTML('beforeend', dialogButtons());
+      document.querySelector(overlaySelector).style.display = 'block';
    }

    // add element to container in the required sequence
@@ -168,6 +173,10 @@ function Notification(opts) {
    setTimeout(function() {
      if (elPopup.parentNode == container) {
        container.removeChild(elPopup);
+
+        if (opts.type == 'dialog') {
+          document.querySelector(overlaySelector).style.display = 'none';
+        }
      }

      // Remove container if it empty
@@ -178,6 +187,7 @@ function Notification(opts) {
  }

  const showPopup = ({ type, title, message, callback = null } = {}) => {
+    opts.type = type;
    const elPopup = createPopup(type);

    // set title and message to created element
@@ -213,5 +223,5 @@ function Notification(opts) {
  const success = ({ title, message }) => showPopup({ type: 'success', title, message });
  const warning = ({ title, message }) => showPopup({ type: 'warning', title, message });
  const error = ({ title, message }) => showPopup({ type: 'error', title, message });
-  return { dialog, info, success, warning, error };
+  return { dialog, info, success, warning, error, setPosition };
 }