Mastermind9890
Virgin
When you click "View Story Map" there is a parameter added
I think the backend will render the HTML of the story map such that the current chapter has this CSS class
Problem: An author I follow will publish a new chapter after several months. I want to reread the entire branch that the author wrote. I cannot find the branch in the story map because the story has many branches.
Suggestion: Can we add a button that allows us to automatically scroll to the current selected chapter? Below is some code that auto-scrolls to the HTML element with class="current"
Possible Issues: We don't always load the whole story map (at least not on mobile). The button will do nothing if the element is not present. If this blocks the feature, the only fix I can think of is to always load enough of the story map to include the current chapter.
Demo: I wrote some code to (1) add the button in the story-map page and (2) auto-scroll to the current chapter. Open up the Story Map of any story. You can paste the following into your browser console to see a demo.
https://chyoa.com/story/Misogyny-Heaven.61039/map?chapter=1534707
I think the backend will render the HTML of the story map such that the current chapter has this CSS class
<div class="story-map-chapter current" style="margin-left: 0px;"></div>
Problem: An author I follow will publish a new chapter after several months. I want to reread the entire branch that the author wrote. I cannot find the branch in the story map because the story has many branches.
Suggestion: Can we add a button that allows us to automatically scroll to the current selected chapter? Below is some code that auto-scrolls to the HTML element with class="current"
Possible Issues: We don't always load the whole story map (at least not on mobile). The button will do nothing if the element is not present. If this blocks the feature, the only fix I can think of is to always load enough of the story map to include the current chapter.
Demo: I wrote some code to (1) add the button in the story-map page and (2) auto-scroll to the current chapter. Open up the Story Map of any story. You can paste the following into your browser console to see a demo.
(function () {
// locate the .controls container inside the header
const controls = document.querySelector('.story-map-header .controls');
if (!controls) return;
// create a new btn-group
const group = document.createElement('div');
group.className = 'btn-group';
group.setAttribute('role', 'group');
// create the button
const b = document.createElement('button');
b.id = '__goto_current_btn';
b.type = 'button';
b.className = 'btn btn-big';
b.textContent = 'Go to Current';
b.onclick = function () {
const el = document.querySelector('.story-map-chapter.current');
if (!el) return;
// Attempt 1: Try page scroll (doesn't work for me, but is recommended by Mozilla)
el.scrollIntoView({behavior:'smooth', block:'center'});
// Attempt 2: Try story-map-content scroll if it exists and is scrollable
const scroller = document.querySelector('.story-map-content');
if (scroller && scroller.scrollHeight > scroller.clientHeight) {
const rect = el.getBoundingClientRect();
const base = scroller.getBoundingClientRect();
const offset = rect.top - base.top;
const target = scroller.scrollTop + offset - (scroller.clientHeight / 2);
scroller.scrollTo({top: target, behavior: 'smooth'});
}
};
// append button to new group, then group to controls
group.appendChild(b);
controls.appendChild(group);
})();
// locate the .controls container inside the header
const controls = document.querySelector('.story-map-header .controls');
if (!controls) return;
// create a new btn-group
const group = document.createElement('div');
group.className = 'btn-group';
group.setAttribute('role', 'group');
// create the button
const b = document.createElement('button');
b.id = '__goto_current_btn';
b.type = 'button';
b.className = 'btn btn-big';
b.textContent = 'Go to Current';
b.onclick = function () {
const el = document.querySelector('.story-map-chapter.current');
if (!el) return;
// Attempt 1: Try page scroll (doesn't work for me, but is recommended by Mozilla)
el.scrollIntoView({behavior:'smooth', block:'center'});
// Attempt 2: Try story-map-content scroll if it exists and is scrollable
const scroller = document.querySelector('.story-map-content');
if (scroller && scroller.scrollHeight > scroller.clientHeight) {
const rect = el.getBoundingClientRect();
const base = scroller.getBoundingClientRect();
const offset = rect.top - base.top;
const target = scroller.scrollTop + offset - (scroller.clientHeight / 2);
scroller.scrollTo({top: target, behavior: 'smooth'});
}
};
// append button to new group, then group to controls
group.appendChild(b);
controls.appendChild(group);
})();
