NoRedInk/noredink-ui
1
1
Fork 0
mirror of https://github.com/NoRedInk/noredink-ui.git synced 2024-09-17 10:17:09 +03:00
Code Issues Packages Projects Releases Wiki Activity

🎨

Browse Source
This commit is contained in:
Brian Hicks 2023-05-10 08:44:49 -05:00
parent 93c45f5f7b
commit 6e8ee216ca
No known key found for this signature in database
GPG Key ID: C4F324B9CAAB0D50
1 changed files with 66 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

129
component-catalog/index.html
View File

@ -1,71 +1,74 @@
<!DOCTYPE HTML>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>NoRedInk style guide</title>
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link href="https://fonts.googleapis.com/css?family=Muli:400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="svg-target"></div>
<script src="elm.js"></script>
<script>
const app = Elm.Main.init();
<head>
<meta charset="utf-8" />
<title>NoRedInk style guide</title>
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<link
href="https://fonts.googleapis.com/css?family=Muli:400,400i,600,600i,700,700i,800,800i,900,900i"
rel="stylesheet"
/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<div id="svg-target"></div>
<script src="elm.js"></script>
<script>
const app = Elm.Main.init();
// HIGHLIGHTER
// HIGHLIGHTER
// start listening to events when the user starts dragging/clickingdown
app.ports.highlighterListen.subscribe(function (id) {
window.requestAnimationFrame(() => {
var highlighter = document.getElementById(id);
if (!id || !highlighter) {
// in a real application, report an error at this point.
return;
}
// start listening to events when the user starts dragging/clickingdown
app.ports.highlighterListen.subscribe(function (id) {
window.requestAnimationFrame(() => {
var highlighter = document.getElementById(id);
if (!id || !highlighter) {
// in a real application, report an error at this point.
return;
}
document.addEventListener("mouseup", onDocumentUp(id));
document.addEventListener("touchend", onDocumentUp(id));
highlighter.addEventListener("touchmove", handleTouchEvents("move", id));
});
});
/*
* Touchmove event always fire on the element that got the initial touchstart event.
* We need the element under the finger to highlight a section though.
*/
function handleTouchEvents(type, id) {
return function (e) {
e.preventDefault();
e.stopPropagation();
if (e.touches.length > 1) return; // we don't care about multitouch
var loc = e.changedTouches[0];
var realTarget = document.elementFromPoint(loc.clientX, loc.clientY); // get the element under the finger
var data;
if (realTarget) {
data = realTarget.getAttribute("data-highlighter-item-index"); // each word has a data attribute with its index.
}
// we only want to be informed for touchmove-events in the current highlighter.
if (data && id === realTarget.parentNode.id) {
app.ports.highlighterOnTouch.send(
[type, id, parseInt(data, 10)]
document.addEventListener("mouseup", onDocumentUp(id));
document.addEventListener("touchend", onDocumentUp(id));
highlighter.addEventListener(
"touchmove",
handleTouchEvents("move", id)
);
}
};
}
});
});
/*
* inform elm when we receive a mouseup/touchend event.
*/
function onDocumentUp(id) {
return function () {
app.ports.highlighterOnDocumentUp.send(id);
};
}
/*
* Touchmove event always fire on the element that got the initial touchstart event.
* We need the element under the finger to highlight a section though.
*/
function handleTouchEvents(type, id) {
return function (e) {
e.preventDefault();
e.stopPropagation();
if (e.touches.length > 1) return; // we don't care about multitouch
var loc = e.changedTouches[0];
var realTarget = document.elementFromPoint(loc.clientX, loc.clientY); // get the element under the finger
var data;
</script>
<script src="bundle.js"></script>
</body>
if (realTarget) {
data = realTarget.getAttribute("data-highlighter-item-index"); // each word has a data attribute with its index.
}
// we only want to be informed for touchmove-events in the current highlighter.
if (data && id === realTarget.parentNode.id) {
app.ports.highlighterOnTouch.send([type, id, parseInt(data, 10)]);
}
};
}
/*
* inform elm when we receive a mouseup/touchend event.
*/
function onDocumentUp(id) {
return function () {
app.ports.highlighterOnDocumentUp.send(id);
};
}
</script>
<script src="bundle.js"></script>
</body>
</html>