ari/prideflag
ari/prideflag
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases 1 Wiki Activity

inject css at runtime- no onmouse events!

Browse source
This commit is contained in:
mellodoot 2023-04-18 11:32:11 +01:00
parent ba1d4bda40
commit 0498a68f90
1 changed files with 46 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

58
prideflag.js
View file

@ -25,40 +25,42 @@ const pride_flag_svg =
<circle id="intpurple" cx="120" cy="0" r="5" stroke="#7601ad" stroke-width="2" fill="none"/> <circle id="intpurple" cx="120" cy="0" r="5" stroke="#7601ad" stroke-width="2" fill="none"/>
</svg>`; </svg>`;
const pride_flag_css =
`#pride-flag svg {
position: fixed;
top: 0;
right: 0;
width: 120px;
transform-origin: 100% 0%;
transition: transform .5s cubic-bezier(.32,1.63,.41,1.01);
z-index: 8008135;
pointer-events: none;
}
#pride-flag svg:hover {
transform: scale(110%);
}
#pride-flag svg:active {
transform: scale(110%);
}
#pride-flag svg * {
pointer-events: all;
}`;
function create_pride_flag() { function create_pride_flag() {
const container = document.createElement("a"); const container = document.createElement("a");
container.id = "pride-triangle"; container.id = "pride-flag";
container.href = "https://github.com/mellodoot/prideflag"; container.href = "https://github.com/mellodoot/prideflag";
container.target = "_blank"; container.target = "_blank";
container.innerHTML = pride_flag_svg;
triangle = document.createElement('svg');
triangle.innerHTML = pride_flag_svg;
triangle.style.position = "fixed";
triangle.style.top = "0";
triangle.style.right = "0";
triangle.style.width = "120px";
triangle.style.transformOrigin = "100% 0%";
triangle.style.transition = "transform .5s cubic-bezier(.32,1.63,.41,1.01)";
triangle.style.zIndex = "8008135";
triangle.onmouseenter = function () {
this.style.transform = "scale(110%)";
};
triangle.onmouseleave = function () {
this.style.transform = "initial";
};
triangle.onmousedown = function () {
this.style.transform = "scale(90%)";
};
triangle.onmouseup = function () {
this.style.transform = "initial";
};
container.appendChild(triangle);
return container; return container;
} }
function load_pride_flag_style() {
const pride_stylesheet = document.createElement('style');
pride_stylesheet.textContent = pride_flag_css;
document.head.appendChild(pride_stylesheet);
}
load_pride_flag_style();
pride_flag = create_pride_flag(); pride_flag = create_pride_flag();
document.body.appendChild(pride_flag); document.body.appendChild(pride_flag);