(js, css) Improve sg-ripple-click directive
This commit is contained in:
parent
0ec79e0411
commit
8389ec5f40
|
@ -70,27 +70,42 @@
|
|||
element.on('click', listener);
|
||||
|
||||
function listener(event) {
|
||||
var coordinates;
|
||||
|
||||
if (element[0].hasAttribute('disabled')) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.pageX && event.pageY) {
|
||||
// Event is a mouse click
|
||||
coordinates = { left: event.pageX, top: event.pageY };
|
||||
}
|
||||
else {
|
||||
// Event is a form submit; target is the submit button
|
||||
coordinates = event.target.getBoundingClientRect();
|
||||
}
|
||||
|
||||
if (content.classList.contains('ng-hide')) {
|
||||
// Show ripple
|
||||
angular.element(container).css({ 'overflow': 'hidden' });
|
||||
content.classList.remove('ng-hide');
|
||||
angular.element(content).css({ top: container.scrollTop + 'px' });
|
||||
$timeout(function() {
|
||||
// Wait until next digest for CSS animation to work
|
||||
ripple.css({
|
||||
'top': (event.pageY - container.offsetTop + container.scrollTop) + 'px',
|
||||
'left': (event.pageX - container.offsetLeft) + 'px',
|
||||
'width': '400vmin',
|
||||
'height': '400vmin'
|
||||
'top': (coordinates.top - container.offsetTop + container.scrollTop) + 'px',
|
||||
'left': (coordinates.left - container.offsetLeft) + 'px',
|
||||
'height': '400vmin',
|
||||
'width': '400vmin'
|
||||
});
|
||||
// Show ripple content
|
||||
content.classList.remove('ng-hide');
|
||||
});
|
||||
}
|
||||
else {
|
||||
// Hide ripple layer
|
||||
ripple.css({
|
||||
'top': (event.pageY - container.offsetTop + container.scrollTop) + 'px',
|
||||
'left': (event.pageX - container.offsetLeft) + 'px',
|
||||
'top': (coordinates.top - container.offsetTop + container.scrollTop) + 'px',
|
||||
'left': (coordinates.left - container.offsetLeft) + 'px',
|
||||
'height': '0px',
|
||||
'width': '0px'
|
||||
});
|
||||
|
|
|
@ -5,10 +5,10 @@ sg-ripple {
|
|||
height: 0px;
|
||||
width: 0px;
|
||||
position: absolute;
|
||||
transition: width 800ms linear, height 800ms linear, background-color 400ms linear;
|
||||
transition: width 800ms linear, height 800ms linear, background-color 400ms linear 200ms;
|
||||
transform: translate(-50%, -50%);
|
||||
opacity: 1;
|
||||
z-index: $z-index-toolbar + 1;
|
||||
z-index: $z-index-scroll-mask;
|
||||
}
|
||||
|
||||
sg-ripple-content {
|
||||
|
@ -17,5 +17,5 @@ sg-ripple-content {
|
|||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: $z-index-toolbar + 2;
|
||||
z-index: $z-index-scroll-mask + 1;
|
||||
}
|
Loading…
Reference in a new issue