Adding initial pass at alert js.
This commit is contained in:
connors
Родитель
2b005473dc
Коммит
dcafb2a209
|
|
@ -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'
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
});
|
||||
}();
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
});
|
||||
}();
|
||||
|
|
@ -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; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче