[HEAD]: initial commit
This commit is contained in:
John Gatward
@@ -0,0 +1,322 @@
|
||||
|
||||
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)
|
||||
}
|
||||
Reference in New Issue
Block a user