LupusNobilis
/
sogo
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

(js, css) Improve sg-ripple-click directive

pull/27/merge
Francis Lachapelle 2016-08-01 11:55:21 -04:00
parent 0ec79e0411
commit 8389ec5f40
2 changed files with 27 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
UI/WebServerResources/js/Common/sgRippleClick.directive.js
View File

@ -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' });
ripple.css({
'top': (event.pageY - container.offsetTop + container.scrollTop) + 'px',
'left': (event.pageX - container.offsetLeft) + 'px',
'width': '400vmin',
'height': '400vmin'
});
$timeout(function() {
// Wait until next digest for CSS animation to work
ripple.css({
'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'
});

6
UI/WebServerResources/scss/components/ripple/ripple.scss
View File

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