Adding initial pass at alert js.

11 years ago · dcafb2a209
8 changed files with 100 additions and 11 deletions
--- a/Gruntfile.js
+++ b/Gruntfile.js
@ -31,7 +31,8 @@ module.exports = function(grunt) {
          '<%= meta.srcPath %>js/push.js',
          '<%= meta.srcPath %>js/segmented-controllers.js',
          '<%= meta.srcPath %>js/sliders.js',
-          '<%= meta.srcPath %>js/toggles.js'
+          '<%= meta.srcPath %>js/toggles.js',
+          '<%= meta.srcPath %>js/alerts.js'
        ],
        dest: '<%= meta.distPath %><%= pkg.name %>.js'
      }
--- a/dist/ratchet.css
+++ b/dist/ratchet.css
@ -1002,6 +1002,12 @@ input[type="button"] {
  color: #fff;
  border-radius: 3px;
  z-index: 10;
+  -webkit-transition: opacity;
+  transition: opacity;
+  -webkit-transition-duration: 0.5s;
+  transition-duration: 0.5s;
+  -webkit-transition-timing-function: linear;
+  transition-timing-function: linear;
 }
 .alert .close {
  position: relative;
@ -1018,6 +1024,9 @@ input[type="button"] {
 .alert .close:active {
  opacity: .6;
 }
+.alert.dismiss {
+  opacity: 0;
+}

 .alert-positive {
  background-color: rgba(76, 217, 100, 0.97);
--- a/dist/ratchet.js
+++ b/dist/ratchet.js
@ -15,8 +15,7 @@

 !function () {
  var findModals = function (target) {
-    var i;
-    var modals = document.querySelectorAll('a');
+    var i, modals = document.querySelectorAll('a');
    for (; target && target !== document; target = target.parentNode) {
      for (i = modals.length; i--;) { if (modals[i] === target) return target; }
    }
@ -776,4 +775,41 @@
    toggle    = false;
  });

-}();
+}();
+/* ----------------------------------
+ * ALERT v0.0.1
+ * Licensed under The MIT License
+ * http://opensource.org/licenses/MIT
+ * ---------------------------------- */
+
+!function () {
+  var findAlerts = function (target) {
+    var i, alerts = document.querySelectorAll('a');
+    for (; target && target !== document; target = target.parentNode) {
+      for (i = alerts.length; i--;) { if (alerts[i] === target) return target; }
+    }
+  };
+
+  var onAlertHidden = function () {
+    var alert = getAlert(event);
+
+    alert.style.display = 'none';
+    alert.removeEventListener('webkitTransitionEnd', onAlertHidden);
+  }
+
+  var getAlert = function (event) {
+    var alertDismiss = findAlerts(event.target);
+    if (alertDismiss && alertDismiss.hash) return document.querySelector(alertDismiss.hash);
+    console.log('get alert');
+  };
+
+  window.addEventListener('click', function (event) {
+    var alert = getAlert(event);
+    
+    if (alert) {
+      if (alert && alert.classList.contains('alert')) alert.classList.add('dismiss');
+      alert.addEventListener('webkitTransitionEnd', onAlertHidden);
+      event.preventDefault();
+    }
+  });
+}();
--- a/examples/app-default/index.html
+++ b/examples/app-default/index.html
@ -19,8 +19,8 @@
  <body>

    <!-- Alert -->
-    <div class="alert alert-negative">
-      <span class="icon icon-share close"></span>
+    <div id="myAlert" class="alert alert-negative">
+      <a href="#myAlert" class="icon icon-share close"></a>
      <strong>This</strong> is an alert.
    </div>

@ -71,8 +71,8 @@
        </ul>
      </div>

-      <div class="alert alert-positive alert-inline">
-        <span class="icon icon-share close"></span>
+      <div id="myAlert2" class="alert alert-positive alert-inline">
+        <a href="#myAlert2" class="icon icon-share close"></a>
        <strong>This</strong> is an inline alert.
      </div>

--- a/index.html
+++ b/index.html
@ -869,7 +869,7 @@ document
      <h3 class="component-title">Popovers</h3>

      <div class="component-example">
-        <div id="popover" class="popover">  
+        <div id="myPopover" class="popover">  
          <header class="bar-nav">
            <a class="button">
              Left
--- a/lib/js/alerts.js
+++ b/lib/js/alerts.js
@ -0,0 +1,37 @@
+/* ----------------------------------
+ * ALERT v0.0.1
+ * Licensed under The MIT License
+ * http://opensource.org/licenses/MIT
+ * ---------------------------------- */
+
+!function () {
+  var findAlerts = function (target) {
+    var i, alerts = document.querySelectorAll('a');
+    for (; target && target !== document; target = target.parentNode) {
+      for (i = alerts.length; i--;) { if (alerts[i] === target) return target; }
+    }
+  };
+
+  var onAlertHidden = function () {
+    var alert = getAlert(event);
+
+    alert.style.display = 'none';
+    alert.removeEventListener('webkitTransitionEnd', onAlertHidden);
+  }
+
+  var getAlert = function (event) {
+    var alertDismiss = findAlerts(event.target);
+    if (alertDismiss && alertDismiss.hash) return document.querySelector(alertDismiss.hash);
+    console.log('get alert');
+  };
+
+  window.addEventListener('click', function (event) {
+    var alert = getAlert(event);
+    
+    if (alert) {
+      if (alert && alert.classList.contains('alert')) alert.classList.add('dismiss');
+      alert.addEventListener('webkitTransitionEnd', onAlertHidden);
+      event.preventDefault();
+    }
+  });
+}();
--- a/lib/js/modals.js
+++ b/lib/js/modals.js
@ -6,8 +6,7 @@

 !function () {
  var findModals = function (target) {
-    var i;
-    var modals = document.querySelectorAll('a');
+    var i, modals = document.querySelectorAll('a');
    for (; target && target !== document; target = target.parentNode) {
      for (i = modals.length; i--;) { if (modals[i] === target) return target; }
    }
--- a/lib/sass/alerts.scss
+++ b/lib/sass/alerts.scss
@ -11,6 +11,9 @@
  color: #fff;
  border-radius: 3px;
  z-index: 10;
+  @include transition(opacity);
+  @include transition-duration(.5s);
+  @include transition-timing-function(linear);

  .close {
    position: relative;
@ -25,6 +28,10 @@
      opacity: .6;
    }
  }
+
+  &.dismiss {
+    opacity: 0;
+  }
 }

 // Positive alert (Default color is green)