playground
/
ratchet
mirror of https://github.com/twbs/ratchet.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

Adding initial pass at alert js.

pull/231/head
connors 11 years ago
parent
2b005473dc
commit
dcafb2a209
8 changed files with 100 additions and 11 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      Gruntfile.js
  2. 9
      dist/ratchet.css
  3. 42
      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
Unescape View File

@ -31,7 +31,8 @@ module.exports = function(grunt) {
'<%= meta.srcPath %>js/push.js', '<%= meta.srcPath %>js/push.js',
'<%= meta.srcPath %>js/segmented-controllers.js', '<%= meta.srcPath %>js/segmented-controllers.js',
'<%= meta.srcPath %>js/sliders.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' dest: '<%= meta.distPath %><%= pkg.name %>.js'
} }

9
dist/ratchet.css vendored
Unescape View File

@ -1002,6 +1002,12 @@ input[type="button"] {
color: #fff; color: #fff;
border-radius: 3px; border-radius: 3px;
z-index: 10; 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 { .alert .close {
position: relative; position: relative;
@ -1018,6 +1024,9 @@ input[type="button"] {
.alert .close:active { .alert .close:active {
opacity: .6; opacity: .6;
} }
.alert.dismiss {
opacity: 0;
}
.alert-positive { .alert-positive {
background-color: rgba(76, 217, 100, 0.97); background-color: rgba(76, 217, 100, 0.97);

42
dist/ratchet.js vendored
Unescape View File

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

8
examples/app-default/index.html
Unescape View File

@ -19,8 +19,8 @@
<body> <body>
<!-- Alert --> <!-- Alert -->
<div class="alert alert-negative"> <div id="myAlert" class="alert alert-negative">
<span class="icon icon-share close"></span> <a href="#myAlert" class="icon icon-share close"></a>
<strong>This</strong> is an alert. <strong>This</strong> is an alert.
</div> </div>
@ -71,8 +71,8 @@
</ul> </ul>
</div> </div>
<div class="alert alert-positive alert-inline"> <div id="myAlert2" class="alert alert-positive alert-inline">
<span class="icon icon-share close"></span> <a href="#myAlert2" class="icon icon-share close"></a>
<strong>This</strong> is an inline alert. <strong>This</strong> is an inline alert.
</div> </div>

2
index.html
Unescape View File

@ -869,7 +869,7 @@ document
<h3 class="component-title">Popovers</h3> <h3 class="component-title">Popovers</h3>
<div class="component-example"> <div class="component-example">
<div id="popover" class="popover"> <div id="myPopover" class="popover">
<header class="bar-nav"> <header class="bar-nav">
<a class="button"> <a class="button">
Left Left

37
lib/js/alerts.js
Unescape View File

@ -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
Unescape View File

@ -6,8 +6,7 @@
!function () { !function () {
var findModals = function (target) { var findModals = function (target) {
var i; var i, modals = document.querySelectorAll('a');
var modals = document.querySelectorAll('a');
for (; target && target !== document; target = target.parentNode) { for (; target && target !== document; target = target.parentNode) {
for (i = modals.length; i--;) { if (modals[i] === target) return target; } for (i = modals.length; i--;) { if (modals[i] === target) return target; }
} }

7
lib/sass/alerts.scss
Unescape View File

@ -11,6 +11,9 @@
color: #fff; color: #fff;
border-radius: 3px; border-radius: 3px;
z-index: 10; z-index: 10;
@include transition(opacity);
@include transition-duration(.5s);
@include transition-timing-function(linear);
.close { .close {
position: relative; position: relative;
@ -25,6 +28,10 @@
opacity: .6; opacity: .6;
} }
} }
&.dismiss {
opacity: 0;
}
} }
// Positive alert (Default color is green) // Positive alert (Default color is green)

Write Preview
Loading…
Cancel
Save