Browse Source

Adding initial pass at alert js.

pull/231/head
connors 11 years ago
parent
commit
dcafb2a209
  1. 3
      Gruntfile.js
  2. 9
      dist/ratchet.css
  3. 40
      dist/ratchet.js
  4. 8
      examples/app-default/index.html
  5. 2
      index.html
  6. 37
      lib/js/alerts.js
  7. 3
      lib/js/modals.js
  8. 7
      lib/sass/alerts.scss

3
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'
}

9
dist/ratchet.css vendored

@ -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);

40
dist/ratchet.js vendored

@ -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; }
}
@ -777,3 +776,40 @@
});
}();
/* ----------------------------------
* 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();
}
});
}();

8
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>

2
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

37
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();
}
});
}();

3
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; }
}

7
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)

Loading…
Cancel
Save