diff --git a/assets/annotate.js b/assets/annotate.js
index df5573c..2a8b94e 100644
--- a/assets/annotate.js
+++ b/assets/annotate.js
@@ -1619,7 +1619,7 @@ class AnnotationPlayer extends HTMLElement {
styleEl.textContent = `
:host{
overflow: hidden;
- --disactive-path: rgba(220,220,220,.7)
+
}
svg{
diff --git a/canvas.html b/canvas.html
index b132698..71227ad 100644
--- a/canvas.html
+++ b/canvas.html
@@ -44,6 +44,10 @@
margin: 0.5rem auto;
}
+ .anchor{
+ cursor: pointer;
+ }
+
/*Filenames with code blocks: https://stackoverflow.com/a/58199362*/
div.sourceCode::before {
content: attr(data-filename);
@@ -69,6 +73,18 @@
top: -1000px;
left: -1000px;
}
+
+ #collage_window svg {
+ position: absolute;
+ left: 0;
+ top: 0;
+
+ }
+ div[data-custom-style='Body Text'] p{
+ padding: 1em 0;
+ margin: 0;
+ background-color: rgba(255,255,255, 0.8);
+ }
@@ -81,23 +97,26 @@
[7137, 3869], // left in practice is -5746px;, top: -2988px;:
]
+ // test with FPR
const canvasCenter = [20077 / 2, 10331 / 2]
let scale = .5;
const sheet = new CSSStyleSheet
sheet.replaceSync(
`
- :host(){
- --override-color: gray
+ :host{
+ --override-color: gray;
}
:host(.active){
--override-color: blue;
}
-
+
:host(.ending){
--override-color: blue;
- --disactive-path: rgba(100,100,100,.7)
- }`);
+ }
+ div.controls{display:none !important;}`
+ );
+ console.log(sheet, sheet.rules)
function easeInOutQuart(x) {
@@ -129,11 +148,18 @@
const windowEl = document.getElementById('collage_window')
const anchorEls = document.getElementsByClassName('anchor')
+ const playerEls = document.getElementsByTagName('annotation-player')
+
+ const paths = [document.getElementById('path1'), document.getElementById('path2'), document.getElementById('path3')]
+ paths.forEach((el) => el.style.strokeDasharray = Math.ceil(el.getTotalLength()) + 'px');
const lastAnchorEl = anchorEls[anchorEls.length - 1];
console.log(lastAnchorEl)
- for(const player of windowEl.children){
+ for (const anchorEl of anchorEls) {
+ anchorEl.addEventListener('click', ev => playerEls[anchorEl.dataset.i].annotator.playPause());
+ }
+ for (const player of playerEls) {
player.shadowRoot.adoptedStyleSheets = [sheet];
}
@@ -143,36 +169,63 @@
center_y = window.scrollY + window.innerHeight / 2
prev = null;
next = null;
- for (let offset of scroll_offsets) {
+ step_idx = null;
+ for (let idx in scroll_offsets) {
+ const offset = scroll_offsets[idx]
if (offset[0] > center_y) {
next = offset
+ step_idx = idx;
break;
}
prev = offset
}
- let source_pos, target_pos, source_scale, target_scale;
+ let source_pos, target_pos, source_scale, target_scale, source_color, target_color, source_x_offset, target_x_offset;
+
+ const x_column_width = window.innerWidth - document.body.getBoundingClientRect().width+200; // for some reason the 200 is neccesary
+ const x_center_map = x_column_width / 2;
+ const x_center_column = document.body.getBoundingClientRect().left + document.body.getBoundingClientRect().width / 2;
+
+ const fit_scale = x_column_width / (canvasCenter[0] * 1.7)
if (prev === null) {
prev = [next[0] - window.innerHeight / 2, null]
- source_scale = .1
+ source_scale = fit_scale
target_scale = .45
source_pos = canvasCenter
target_pos = centerPoints[next[1]]
+ source_color = 100;
+ target_color = 220;
+
+ source_x_offset = x_center_map;
+ target_x_offset = x_center_column;
+
} else if (next === null) {
next = [prev[0] + window.innerHeight / 2, null]
source_scale = .45
- target_scale = .1
+ target_scale = fit_scale
source_pos = centerPoints[prev[1]]
target_pos = canvasCenter
+
+ source_color = 220;
+ target_color = 50;
+
+ source_x_offset = x_center_column;
+ target_x_offset = x_center_map;
+
} else {
source_pos = centerPoints[prev[1]]
target_pos = centerPoints[next[1]]
target_scale = .45
source_scale = .45
+
+ source_color = target_color = 220;
+
+ source_x_offset = target_x_offset = x_center_column;
+
}
@@ -188,9 +241,38 @@
scale = source_scale + t_ease * ds;
- x = -1 * (source_pos[0] + dx * t_ease) * scale + window.innerWidth / 2;
+ x_offset = (target_x_offset - source_x_offset) * t_ease + source_x_offset
+ x = -1 * (source_pos[0] + dx * t_ease) * scale + x_offset;
y = -1 * (source_pos[1] + dy * t_ease) * scale + window.innerHeight / 2;
- // console.log('x', x, 'y', y, 'scale', scale)
+
+ const color = (target_color - source_color) * t_ease + source_color
+ console.log(sheet)
+ // sheet.rules[0].style.setProperty('--override-color', `rgba(${color},${color},${color},0.7)`);
+ sheet.rules[0].style.setProperty('--disactive-path', `rgba(${color},${color},${color},0.7)`);
+
+ // draw the line
+
+ if (step_idx === null) {
+ // full paths
+ paths.forEach(el => el.style.strokeDashoffset = 0)
+ }
+ else {
+ // no paths
+ paths.forEach((el, idx) => {
+ if (idx >= step_idx ) {
+ el.style.strokeDashoffset = Math.ceil(el.getTotalLength()) + 'px';
+ } else if (idx == step_idx-1 ) {
+ // console.log('anim', el)
+ el.style.strokeDashoffset = Math.ceil(el.getTotalLength() - el.getTotalLength()*t_ease) + 'px';
+ } else {
+ el.style.strokeDashoffset = 0;
+ }
+ });
+ // paths.forEach((el) => stroke)
+
+ }
+
+ // console.log('x', x, 'y', y, 'scale', scale, 'color', color)
// console.log(x, y);
@@ -202,11 +284,11 @@
const last = Math.max(...Array.from(anchorEls).map((e) => e.getBoundingClientRect().bottom))
console.log(last)
if (last < 0) {
- for (const playerEl of windowEl.children) {
+ for (const playerEl of playerEls) {
playerEl.classList.add('ending')
}
} else {
- for (const playerEl of windowEl.children) {
+ for (const playerEl of playerEls) {
playerEl.classList.remove('ending')
}
}
@@ -233,7 +315,7 @@
entries.forEach((entry) => {
index = entry.target.dataset.i;
console.log(entry)
- if (index >= windowEl.children.length) {
+ if (index >= playerEls.length) {
return;
}
playerEl = windowEl.children[index];
@@ -241,6 +323,10 @@
playerEl.classList.add('active')
} else {
playerEl.classList.remove('active')
+ if(typeof playerEl.annotator.paused !== 'undefined' && !playerEl.annotator.paused){
+ console.log('pause', playerEl.annotator, playerEl.annotator.paused)
+ playerEl.annotator.pause()
+ }
}
})
}, options);
@@ -348,6 +434,35 @@
+
+
+
+
diff --git a/paper.css b/paper.css
index 0b9ca3d..4c10616 100644
--- a/paper.css
+++ b/paper.css
@@ -6,7 +6,7 @@ html {
background-color: #fafafa;
}
body {
- margin: 0 auto;
+ margin: 0 50px 0 auto;
max-width: 36em;
padding-left: 50px;
padding-right: 50px;