football-competitiveness/scrolly_functions.R

create_scrolly_side <- function(name,css
    
) {
name<-name
css<-paste0(

"


#scrolly-side .scrolly article .scrolly-side {
min-height: 105vh;
margin-bottom: 1rem;

}

#scrolly-side .scrolly article .scrolly-side.is-active p {
background-color: #f4f4f4;
opacity:1;
color:black;
border-radius: 25px;


}
#scrolly-side .scrolly article .scrolly-side p {
margin: 0;
padding: 1rem;
text-align: left;
font-weight: 400;
opacity:0.3;
transition: background-color 250ms ease-in-out;
color:black;
border-radius: 25px;



}



/* css when screen is larger than 768px */


@media screen and (min-width: 768px){

#scrolly-side .scrolly article {
padding: 0;
margin: 0 auto;
max-width:40%;
position: relative;
text-align: left;
font-size: 20px;
}

#scrolly-side .scrolly {
display: flex;           /* this is what stops content overlapping */
max-width:100%;
margin: 3rem auto;
background-color:#ffffff;
padding: 1rem;
border-radius:0;
gap:10px;
}

#scrolly-side .scrolly figure.sticky {
position: sticky;
width: 100%;
height: 80vh;
background: #ffffff;
margin: 10;
top: 10vh;
left: 0;
border-radius: 25px;
order: 1;
}
}

@media screen and (max-width: 767px){

#scrolly-side .scrolly article {
padding: 0;
margin: 0 auto;
max-width:100%;
position: relative;
text-align: left;
font-size: 15px;
pointer-events: none !important;
}


#scrolly-side .scrolly {
max-width:90%;
margin: 3rem auto;
background-color: #ffffff;
opacity:1;
padding: 1rem;
border-radius: 25px;
}

#scrolly-side .scrolly article .scrolly-side p {
border-radius: 25px;
background-color: #F4F4F4;
opacity:1;
color:black;
max-width:100%;
}

#scrolly-side .scrolly figure.sticky {
position: sticky;
width: 100%;
height: 40vh;
background: #ffffff;
margin: 10;
top: 30vh;
left: 0;
border-radius: 25px;
order: 1;
}

#scrolly-side .sticky{
position: relative;
z-index: 0;
pointer-events: auto;
}

#scrolly-side .text-article{
pointer-events: none !important;
}
#scrolly-side .text-article .detail-toggle-btn {
  pointer-events: auto !important;
}

}



")

  
  #### script #####
  js<-"<script>
const container = d3.select('#scrolly-side');
const stepSel = container.selectAll('.step');

function updateChart(index) {
  const sel = container.select(`[data-index='${index}']`);
  const width = sel.attr('data-width');
  stepSel.classed('is-active', (d, i) => i === index);
  container.select('.bar-inner').style('width', width);
  Shiny.setInputValue(\"input1\", index)

}

function init() {
  Stickyfill.add(d3.select('.sticky').node());

  enterView({
    selector: stepSel.nodes(),
    offset: 0.5,
    enter: el => {
      const index = +d3.select(el).attr('data-index');
      updateChart(index);
    },
    exit: el => {
      let index = +d3.select(el).attr('data-index');
      index = Math.max(0, index - 1);
      updateChart(index);
    } });

}

init();
</script>"

css<-gsub("scrolly-side",name,css)
css<-gsub("step",name,css)
js<-gsub("step",name,js)
js<-gsub("scrolly-side",name,js)
js<-gsub("container",paste0("container",name),js)
js<-gsub("updateChart",paste0("updateChart",name),js)
js<-gsub("init",paste0("init",name),js)
js<-gsub("input1",paste0(name),js)

list<-list(css,js)

return(list)
}


##### create_scrolly_overlay ####


create_scrolly_overlay <- function(name) {
  name<-name
  css<-
    "
#scrolly-overlay .scrolly {
max-width: 100%;
margin: 3rem auto;
background: transparent;
padding: 0;
border-radius: 0;
}
#scrolly-overlay .scrolly article {
padding: 0;
max-width: 100rem;
margin: 0 auto;
color:black;
position: relative;
text-align: left;
font-size: 20px;
border-radius: 25px;
pointer-events: none !important;
}
#scrolly-overlay .scrolly article .scrolly-overlay {
min-height: 105vh;
margin-bottom: 1rem;
border-radius: 25px;

}
#scrolly-overlay .scrolly article .scrolly-overlay:last-of-type {
margin-bottom: 0;
border-radius: 25px;

}
#scrolly-overlay .scrolly article .scrolly-overlay.is-active p {
border-radius: 25px;
color:white;
background-color: #e7e7e7  ;
opacity:0.8;

color:black;

}
#scrolly-overlay .scrolly article .scrolly-overlay p {
margin: 0;
padding: 1rem;
text-align: center;
font-weight: 400;
background-color: #e7e7e7 ;
opacity:0.3;

transition: background-color 250ms ease-in-out;
border-radius: 25px;

  }
#scrolly-overlay .scrolly figure.sticky {
position: sticky;
width: 100%;
height: 98vh;
background:white;
margin: 0;
top: 1vh;
left: 0;
border-radius: 25px;

}

#scrolly-overlay .sticky{
position: relative;
z-index: 0;
pointer-events: auto;
}

#scrolly-overlay .text-article{
pointer-events: none !important;
}
#scrolly-overlay .text-article .detail-toggle-btn {
  pointer-events: auto !important;
}
"

#### script #####
js<-"<script>
const container = d3.select('#scrolly-overlay');
const stepSel = container.selectAll('.step');

function updateChart(index) {
  const sel = container.select(`[data-index='${index}']`);
  const width = sel.attr('data-width');
  stepSel.classed('is-active', (d, i) => i === index);
  container.select('.bar-inner').style('width', width);
  Shiny.setInputValue(\"input1\", index)

}

function init() {
  Stickyfill.add(d3.select('.sticky').node());

  enterView({
    selector: stepSel.nodes(),
    offset: 0.5,
    enter: el => {
      const index = +d3.select(el).attr('data-index');
      updateChart(index);
    },
    exit: el => {
      let index = +d3.select(el).attr('data-index');
      index = Math.max(0, index - 1);
      updateChart(index);
    } });

}

init();
</script>"

css<-gsub("scrolly-overlay",name,css)
css<-gsub("step",name,css)
js<-gsub("step",name,js)

js<-gsub("scrolly-overlay",name,js)
js<-gsub("container",paste0("container",name),js)
js<-gsub("updateChart",paste0("updateChart",name),js)

js<-gsub("init",paste0("init",name),js)
js<-gsub("input1",paste0(name),js)

list<-list(css,js)

return(list)
}