xuguopeng/rrweb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

new sandbox strategy

Browse Source 
In this commit we switched the sandbox strategy to use iframe's
sandbox attribute. Indeed we do not need delegate event anymore,
but need to add some styles into the iframe.
The details were documented in the sandbox part of internal design.
This commit is contained in:
Yanzhen Yu
2018-11-27 17:01:00 +08:00
parent b3edcb30ad
commit b7e7f12d32
6 changed files with 102 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/replay/styles/style.css
View File

@@ -3,8 +3,12 @@
}
.replayer-mouse {
position: absolute;
width: 1px;
height: 1px;
width: 20px;
height: 20px;
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
background-image: url('data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9JzMwMHB4JyB3aWR0aD0nMzAwcHgnICBmaWxsPSIjMDAwMDAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGRhdGEtbmFtZT0iTGF5ZXIgMSIgdmlld0JveD0iMCAwIDUwIDUwIiB4PSIwcHgiIHk9IjBweCI+PHRpdGxlPkRlc2lnbl90bnA8L3RpdGxlPjxwYXRoIGQ9Ik00OC43MSw0Mi45MUwzNC4wOCwyOC4yOSw0NC4zMywxOEExLDEsMCwwLDAsNDQsMTYuMzlMMi4zNSwxLjA2QTEsMSwwLDAsMCwxLjA2LDIuMzVMMTYuMzksNDRhMSwxLDAsMCwwLDEuNjUuMzZMMjguMjksMzQuMDgsNDIuOTEsNDguNzFhMSwxLDAsMCwwLDEuNDEsMGw0LjM4LTQuMzhBMSwxLDAsMCwwLDQ4LjcxLDQyLjkxWm0tNS4wOSwzLjY3TDI5LDMyYTEsMSwwLDAsMC0xLjQxLDBsLTkuODUsOS44NUwzLjY5LDMuNjlsMzguMTIsMTRMMzIsMjcuNThBMSwxLDAsMCwwLDMyLDI5TDQ2LjU5LDQzLjYyWiI+PC9wYXRoPjwvc3ZnPg==');
}
.replayer-mouse::after {
content: '';
@@ -12,7 +16,27 @@
width: 20px;
height: 20px;
border-radius: 10px;
background: thistle;
background: rgb(73, 80, 246);
transform: translate(-10px, -10px);
opacity: 0.5;
opacity: 0.3;
}
.replayer-mouse.active::after {
animation: click 0.3s ease-in-out 1;
}
@keyframes click {
0% {
opacity: 0.3;
width: 20px;
height: 20px;
border-radius: 10px;
transform: translate(-10px, -10px);
}
50% {
opacity: 0.5;
width: 10px;
height: 10px;
border-radius: 5px;
transform: translate(-5px, -5px);
}
}