was formatted code

2026-06-15 18:13:25 +03:00 · 2022-01-26 18:50:10 +02:00
parent f3c95cdd4c
commit 977de5eb51
4 changed files with 173 additions and 162 deletions
--- a/demo.css
+++ b/demo.css
@@ -38,7 +38,6 @@ form h1 {
  font-size: 3em;
  font-weight: 300;
  text-align: center;
-  /*color: #2196f3;*/
  color: #2196f3;
  padding-top: 0;
  margin-top: 0;
@@ -103,18 +102,18 @@ select {
  outline: none;
 }

-.group input:focus~label,
-.group select:focus~label,
-.group input:valid~label,
-.group select:valid~label {
+.group input:focus ~ label,
+.group select:focus ~ label,
+.group input:valid ~ label,
+.group select:valid ~ label {
  top: -14px;
  font-size: 12px;
  color: #2196f3;
  /*color: #04c484;*/
 }

-.group input:focus~.bar:before,
-.group select:focus~.bar:before {
+.group input:focus ~ .bar:before,
+.group select:focus ~ .bar:before {
  width: 100%;
 }

@@ -177,7 +176,7 @@ select {
 }

 .ripple:after {
-  content: "";
+  content: '';
  display: block;
  position: absolute;
  width: 100%;
@@ -190,11 +189,11 @@ select {
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
-  transition: transform .5s, opacity 1s;
+  transition: transform 0.5s, opacity 1s;
 }

 .ripple:active:after {
  transform: scale(0, 0);
-  opacity: .3;
+  opacity: 0.3;
  transition: 0s;
-}
+}
--- a/index.html
+++ b/index.html
@@ -32,23 +32,23 @@
      </div>
      <div class="group">
        <select id="position">
-        <option value="top-right">Top Right</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>
+          <option value="top-right">Top Right</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>
        <label>Position</label>
      </div>
      <div class="group">
        <select id="type">
-        <option value="info">Information</option>
-        <option value="success">Success</option>
-        <option value="warning">Warning</option>
-        <option value="error">Error</option>
-        <option value="dialog">Dialog</option>
-      </select>
+          <option value="info">Information</option>
+          <option value="success">Success</option>
+          <option value="warning">Warning</option>
+          <option value="error">Error</option>
+          <option value="dialog">Dialog</option>
+        </select>
        <span class="bar"></span>
        <label>Type</label>
      </div>
@@ -57,7 +57,7 @@
      </div>
    </form>
    <div class="code">
-        <pre>
+      <pre>
            <code class="language-javascript">
 /*
  position may be:
@@ -96,7 +96,7 @@ popup.error({
  <div class="overlay"></div>
  <script src="./notification.js" type="text/javascript"></script>
  <script>
-    window.addEventListener('DOMContentLoaded', function() {
+    window.addEventListener('DOMContentLoaded', function () {

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

@@ -134,7 +134,7 @@ popup.error({
        messageEl.value = defaultText[typeEl.value].defaultMessage;
      })

-      form.addEventListener('submit', function(e) {
+      form.addEventListener('submit', function (e) {
        e.preventDefault();

        // Form elements
--- a/notification.css
+++ b/notification.css
@@ -7,7 +7,7 @@
  box-sizing: border-box;
  z-index: 1000;
  overflow: hidden;
-  transition: all .5s linear;
+  transition: all 0.5s linear;
 }

 .notification-container.center {
@@ -46,7 +46,7 @@
  overflow: hidden;
  max-height: 500px;
  transition-property: all;
-  transition-duration: .5s;
+  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
  margin: 0 0 6px;
  opacity: 0.9;
@@ -72,13 +72,13 @@
  height: 100%;
  width: 100%;
  background-color: #000;
-  background: rgba(0, 0, 0, .5);
+  background: rgba(0, 0, 0, 0.5);
  z-index: 10;
  display: none;
 }

 .notification:not(.notification-default) {
-  width: 310px
+  width: 310px;
 }

 .notification-default {
@@ -119,7 +119,7 @@
  display: block;
  height: 24px;
  width: 24px;
-  transition: color .1s;
+  transition: color 0.1s;
  cursor: pointer;
 }

@@ -166,26 +166,26 @@
 }

 .notification-default .notification-icon::before {
-  content: "\1F514";
+  content: '\1F514';
 }

 .notification-warning .notification-icon::before {
-  content: "\0021";
+  content: '\0021';
 }

 .notification-error .notification-icon::before {
-  content: "\26A0";
+  content: '\26A0';
 }

 .notification-success .notification-icon::before {
-  content: "\2714";
+  content: '\2714';
 }

 .notification-info .notification-icon::before {
-  content: "\24D8";
+  content: '\24D8';
 }

-.notification-body>div {
+.notification-body > div {
  padding: 4px;
  height: 100%;
 }
@@ -213,33 +213,33 @@

 .bottom-right .notification.animation-slide-in,
 .top-right .notification.animation-slide-in {
-  animation: right-slide-in .5s forwards, bounceIn .7s forwards;
+  animation: right-slide-in 0.5s forwards, bounceIn 0.7s forwards;
  transform: translateX(100%);
 }

 .bottom-right .notification.animation-slide-out,
 .top-right .notification.animation-slide-out {
-  animation: right-slide-out .5s forwards;
+  animation: right-slide-out 0.5s forwards;
 }

 .top-left .notification.animation-slide-in,
 .bottom-left .notification.animation-slide-in {
-  animation: left-slide-in .5s forwards, bounceIn .7s forwards;
+  animation: left-slide-in 0.5s forwards, bounceIn 0.7s forwards;
  transform: translateX(-100%);
 }

 .top-left .notification.animation-slide-out,
 .bottom-left .notification.animation-slide-out {
-  animation: left-slide-out .5s forwards;
+  animation: left-slide-out 0.5s forwards;
 }

 .notification.animation-fade-in {
-  animation: fade-in .5s forwards, bounceIn .7s forwards;
+  animation: fade-in 0.5s forwards, bounceIn 0.7s forwards;
  opacity: 0;
 }

 .notification.animation-fade-out {
-  animation: fade-out .5s forwards;
+  animation: fade-out 0.5s forwards;
 }

 .notification-buttons {
@@ -272,7 +272,7 @@
 }

 .notification-cancel:before {
-  content: "\2717";
+  content: '\2717';
 }

 .notification-cancel {
@@ -285,7 +285,7 @@
 }

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

 .notification-action {
@@ -355,7 +355,6 @@

@keyframes fade-out {
  to {
-    opacity: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
@@ -363,4 +362,4 @@
    max-height: 0;
    opacity: 0;
  }
-}
+}
--- a/notification.js
+++ b/notification.js
@@ -1,59 +1,59 @@
 function Notification(opts) {
  const defaultOpts = {
    position: 'top-right',
-    duration: 4000
-  }
-  opts = Object.assign({}, defaultOpts, opts)
-  opts.duration = parseInt(opts.duration)
+    duration: 4000,
+  };
+  opts = Object.assign({}, defaultOpts, opts);
+  opts.duration = parseInt(opts.duration);

-  const timeouts = []
+  const timeouts = [];

  // selectors
-  const classMainSelector = 'notification-container'
-  const classPopup = 'notification'
-  const animationInClass = 'animation-slide-in'
-  const animationOutClass = 'animation-slide-out'
-  const animationFadeInClass = 'animation-fade-in'
-  const animationFadeOutClass = 'animation-fade-out'
-  const titleSelector = '.notification-title'
-  const descSelector = '.notification-desc'
-  const closeSelector = '.notification-close'
-  const actionButSelector = '.notification-action'
-  const cancelButSelector = '.notification-cancel'
-  const overlaySelector = '.overlay'
+  const classMainSelector = 'notification-container';
+  const classPopup = 'notification';
+  const animationInClass = 'animation-slide-in';
+  const animationOutClass = 'animation-slide-out';
+  const animationFadeInClass = 'animation-fade-in';
+  const animationFadeOutClass = 'animation-fade-out';
+  const titleSelector = '.notification-title';
+  const descSelector = '.notification-desc';
+  const closeSelector = '.notification-close';
+  const actionButSelector = '.notification-action';
+  const cancelButSelector = '.notification-cancel';
+  const overlaySelector = '.overlay';

  // class, defaultTitle and defaultMessage
  const dataByType = {
    dialog: {
      classType: 'notification-default',
      defaultTitle: 'Confirm',
-      defaultMessage: 'Are you sure you want to do this?'
+      defaultMessage: 'Are you sure you want to do this?',
    },
    info: {
      classType: 'notification-info',
      defaultTitle: 'Info',
-      defaultMessage: 'default Info'
+      defaultMessage: 'default Info',
    },
    success: {
      classType: 'notification-success',
      defaultTitle: 'Success',
-      defaultMessage: 'default Success'
+      defaultMessage: 'default Success',
    },
    warning: {
      classType: 'notification-warning',
      defaultTitle: 'Warning',
-      defaultMessage: 'default Warning'
+      defaultMessage: 'default Warning',
    },
    error: {
      classType: 'notification-error',
      defaultTitle: 'Error',
-      defaultMessage: 'An error has occurred'
-    }
-  }
+      defaultMessage: 'An error has occurred',
+    },
+  };

  const setPosition = (newPosition) => {
-    opts.position = newPosition
-  }
+    opts.position = newPosition;
+  };

  const tempatePopup = () => {
    return `
@@ -68,160 +68,173 @@ function Notification(opts) {
        <div class="notification-title"></div>
        <div class="notification-desc"></div>
      </div>
-    </div>`
-  }
+    </div>`;
+  };

  const dialogButtons = () => {
    return `<div class="notification-buttons">
    <span class="notification-button notification-cancel"></span>
    <span class="notification-button notification-action"></span>
-    </div>`
-  }
+    </div>`;
+  };

  const createMainContainer = (position) => {
-    let container = document.querySelector(`.${classMainSelector}.${position}`)
+    let container = document.querySelector(`.${classMainSelector}.${position}`);

    if (!container) {
-      container = document.createElement('div')
-      container.classList = classMainSelector + ' ' + position
-      document.body.appendChild(container)
+      container = document.createElement('div');
+      container.classList = classMainSelector + ' ' + position;
+      document.body.appendChild(container);
    }

-    return container
-  }
+    return container;
+  };

  const createPopup = (type) => {
-    const container = createMainContainer(opts.position)
+    const container = createMainContainer(opts.position);

-    const elPopup = document.createElement('div')
+    const elPopup = document.createElement('div');

    // add classes
-    elPopup.classList.add(classPopup)
+    elPopup.classList.add(classPopup);
    elPopup.classList.add(
-      opts.position === 'center' ?
-      animationFadeInClass :
-      animationInClass
-    )
-    elPopup.classList.add(dataByType[type].classType)
+      opts.position === 'center' ? animationFadeInClass : animationInClass
+    );
+    elPopup.classList.add(dataByType[type].classType);

    // insert template in element
-    elPopup.insertAdjacentHTML('beforeend', tempatePopup())
+    elPopup.insertAdjacentHTML('beforeend', tempatePopup());

    // add buttons if confirm dialog
    if (type === 'dialog') {
-      elPopup.insertAdjacentHTML('beforeend', dialogButtons())
-      document.querySelector(overlaySelector).style.display = 'block'
+      elPopup.insertAdjacentHTML('beforeend', dialogButtons());
+      document.querySelector(overlaySelector).style.display = 'block';
    }

    // add element to container in the required sequence
    if (opts.position.includes('bottom')) {
-      container.prepend(elPopup)
+      container.prepend(elPopup);
    } else {
-      container.appendChild(elPopup)
+      container.appendChild(elPopup);
    }

-    return elPopup
-  }
+    return elPopup;
+  };

  const setButtonsEvent = (elPopup, callback = null) => {
-    const elAction = elPopup.querySelector(actionButSelector)
-    elAction.addEventListener('click', function handlerAction(event) {
-      event.stopPropagation()
-      event.preventDefault()
-      hidePopUp(elPopup)
+    const elAction = elPopup.querySelector(actionButSelector);
+    elAction.addEventListener(
+      'click',
+      function handlerAction(event) {
+        event.stopPropagation();
+        event.preventDefault();
+        hidePopUp(elPopup);

-      elAction.removeEventListener('click', handlerAction, false)
-      if (callback) {
-        return callback('ok')
-      }
-      return false
-    }, false)
+        elAction.removeEventListener('click', handlerAction, false);
+        if (callback) {
+          return callback('ok');
+        }
+        return false;
+      },
+      false
+    );

-    const elCancel = elPopup.querySelector(cancelButSelector)
-    elCancel.addEventListener('click', function handlerCancel(event) {
-      event.stopPropagation()
-      event.preventDefault()
-      hidePopUp(elPopup)
+    const elCancel = elPopup.querySelector(cancelButSelector);
+    elCancel.addEventListener(
+      'click',
+      function handlerCancel(event) {
+        event.stopPropagation();
+        event.preventDefault();
+        hidePopUp(elPopup);

-      elCancel.removeEventListener('click', handlerCancel, false)
-      if (callback) {
-        return callback('cancel')
-      }
-      return false
-    }, false)
-  }
+        elCancel.removeEventListener('click', handlerCancel, false);
+        if (callback) {
+          return callback('cancel');
+        }
+        return false;
+      },
+      false
+    );
+  };

  const hidePopUp = (elPopup) => {
-    const container = document.querySelector(`.${classMainSelector}.${opts.position}`)
+    const container = document.querySelector(
+      `.${classMainSelector}.${opts.position}`
+    );

-    const firstTimeout = timeouts.shift()
-    clearTimeout(firstTimeout)
+    const firstTimeout = timeouts.shift();
+    clearTimeout(firstTimeout);

    // change animation class
    elPopup.classList.remove(
-      opts.position === 'center' ?
-      animationFadeInClass :
-      animationInClass
-    )
+      opts.position === 'center' ? animationFadeInClass : animationInClass
+    );

    elPopup.classList.add(
-      opts.position === 'center' ?
-      animationFadeOutClass :
-      animationOutClass
-    )
+      opts.position === 'center' ? animationFadeOutClass : animationOutClass
+    );

-    setTimeout(function() {
+    setTimeout(function () {
      if (elPopup.parentNode == container) {
-        container.removeChild(elPopup)
+        container.removeChild(elPopup);

        if (opts.type === 'dialog') {
-          document.querySelector(overlaySelector).style.display = 'none'
+          document.querySelector(overlaySelector).style.display = 'none';
        }
      }

      // Remove container if it empty
      if (!container.hasChildNodes()) {
-        document.body.removeChild(container)
+        document.body.removeChild(container);
      }
-    }, 500)
-  }
+    }, 500);
+  };

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

    // set title and message to created element
-    const elTitle = elPopup.querySelector(titleSelector)
-    const elText = elPopup.querySelector(descSelector)
+    const elTitle = elPopup.querySelector(titleSelector);
+    const elText = elPopup.querySelector(descSelector);

-    const titlePopup = title || dataByType[type].defaultTitle
-    const messagePopup = message || dataByType[type].defaultMessage
+    const titlePopup = title || dataByType[type].defaultTitle;
+    const messagePopup = message || dataByType[type].defaultMessage;

-    elTitle.innerText = titlePopup
-    elText.innerText = messagePopup
+    elTitle.innerText = titlePopup;
+    elText.innerText = messagePopup;

    // click event
    if (type === 'dialog') {
      // set buttons click event
-      setButtonsEvent(elPopup, callback)
+      setButtonsEvent(elPopup, callback);
    } else {
      // push new timeout to timeouts array if type is not dialog
-      const timeout = setTimeout(() => hidePopUp(elPopup), opts.duration)
-      timeouts.push(timeout)
+      const timeout = setTimeout(() => hidePopUp(elPopup), opts.duration);
+      timeouts.push(timeout);
    }

    // add click event to close element
-    const elClose = elPopup.querySelector(closeSelector)
-    elClose.addEventListener('click', function handlerClose(event) {
-      hidePopUp(elPopup)
-      elClose.removeEventListener('click', handlerClose, false)
-    }, false)
-  }
+    const elClose = elPopup.querySelector(closeSelector);
+    elClose.addEventListener(
+      'click',
+      function handlerClose(event) {
+        hidePopUp(elPopup);
+        elClose.removeEventListener('click', handlerClose, false);
+      },
+      false
+    );
+  };

-  const dialog = ({ title, message, callback = null }) => showPopup({ type: 'dialog', title, message, callback })
-  const info = ({ title, message }) => showPopup({ type: 'info', title, message })
-  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, setPosition }
-}
+  const dialog = ({ title, message, callback = null }) =>
+    showPopup({ type: 'dialog', title, message, callback });
+  const info = ({ title, message }) =>
+    showPopup({ type: 'info', title, message });
+  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, setPosition };
+}