Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Overlay and sidebar layout options #55

Merged
merged 37 commits into from
Jul 31, 2024
Merged

Overlay and sidebar layout options #55

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
37 commits
Select commit Hold shift + click to select a range
93a670b
add grid.scss
andrewpbray Jul 27, 2024
2bf747e
Merge branch 'main' into fix-gallery-scss-merge
andrewpbray Jul 28, 2024
0d02974
switch from grid.scss to grid.css
andrewpbray Jul 28, 2024
815efea
grid.css -> grid.scss
Jul 28, 2024
ea2a2b6
Add compiled grid styles
Jul 28, 2024
2cfb383
nytimes.css -> nytimes.scss
Jul 28, 2024
5861439
Add compiled nytimes stylesheet
Jul 28, 2024
e310884
try adding grid.css to _quarto.yml
andrewpbray Jul 28, 2024
5d2c973
hard code link from demos to grid.css
andrewpbray Jul 28, 2024
096d695
reference grid.css in same dir as demo
andrewpbray Jul 28, 2024
6909598
try referencing original extension css file.
andrewpbray Jul 28, 2024
d8336ba
remove link to css
andrewpbray Jul 28, 2024
a992908
remove sourceMapping URL comment
andrewpbray Jul 28, 2024
7ff0bc8
clean up from troubleshooting
andrewpbray Jul 28, 2024
9994bcc
Inject layout YAML options into <meta>
Jul 29, 2024
8cc3ef2
Merge header space removal work in
Jul 26, 2024
7d95985
Cleanup speculative body class injection code
Jul 29, 2024
32ea179
Add layout class to <body>
Jul 29, 2024
d620252
Lua/JS bug fixes
Jul 29, 2024
6912489
Example config for Minard
Jul 29, 2024
d7fd5d5
Fix - Margin specificity
Jul 29, 2024
fb65654
Fix - extra specificity for locked mobile layout
Jul 29, 2024
a875e3c
Fix - default layout side in JS
Jul 29, 2024
5401914
rename all source files to be named closeread.ext
andrewpbray Jul 30, 2024
708d040
change "sidebar" to "section" or "narrative" as appropriate
andrewpbray Jul 30, 2024
1e3944d
reorganize and add comments to script
andrewpbray Jul 30, 2024
e8798fb
begin refactor of make_section to append correct classes
andrewpbray Jul 30, 2024
9eacfee
reimplement formation of narrative col
andrewpbray Jul 30, 2024
1274465
merge from main
andrewpbray Jul 30, 2024
19776e0
change approach to making narrative_blocks from using walk{} to using…
andrewpbray Jul 30, 2024
a6698c0
read layout from meta but override with section attr then assign as c…
andrewpbray Jul 30, 2024
064615a
update scss and css for simpler lua file structure
andrewpbray Jul 31, 2024
d21f180
use cr-section and add layouts
andrewpbray Jul 31, 2024
8b87d37
rm two-key yaml approach
andrewpbray Jul 31, 2024
ad64379
rm two-option layout implementation
andrewpbray Jul 31, 2024
57764cf
attempt fixing mobile
andrewpbray Jul 31, 2024
615c0d2
improve documentation
andrewpbray Jul 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion _extensions/closeread/_extension.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ contributes:
html:
filters:
- closeread.lua
theme: [grid.scss]
css: closeread.css
page-layout: full
execute:
echo: false
Expand Down
149 changes: 149 additions & 0 deletions _extensions/closeread/closeread.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions _extensions/closeread/closeread.css.map
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

37 changes: 28 additions & 9 deletions _extensions/closeread/scroller-init.js → _extensions/closeread/closeread.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,28 @@
//==============//
// closeread.js //
//==============//

/* each "scroller" requires an initiation that tells it:
(a) which elements to watch (eg. .step)
(b) what to do when these elements enter and exit.
although users may have several scrollers in one quarto doc, i think with
the right syntax we can get away with a single init block for everyone */

// set params
const stepSelector = "[data-focus-on]"

// code that will be run when the HTML file is initially loaded by a browser
document.addEventListener("DOMContentLoaded", () => {

// if debugging, add .cr-debug to the body
const debugOption = document
.querySelector("meta[cr-debug-mode]")?.getAttribute("cr-debug-mode")
const debugMode = debugOption === "true"
// attach meta classes to <body>
document.body.classList.add("closeread")
const debugMode = getBooleanConfig("debug-mode")
const removeHeaderSpace = getBooleanConfig("remove-header-space")
if (debugMode) {
console.info("Close Read: debug mode ON")
document.body.classList.add("cr-debug")
}
if (removeHeaderSpace) {
document.body.classList.add("cr-removeheaderspace")
}

// define ojs variables if the connector module is available
Expand Down Expand Up @@ -67,7 +73,11 @@ document.addEventListener("DOMContentLoaded", () => {

});

/* updateStickies: fill in with description */
//=================//
// Update Stickies //
//=================//

/* updateStickies: triggers effects and transformations of the focused sticky */
function updateStickies(allStickies, focusedStickyName, response) {
const focusedSticky = document.querySelectorAll("[id=" + focusedStickyName)[0];

Expand Down Expand Up @@ -232,9 +242,9 @@ function scalePoemToSpan(el, highlightIds, paddingX = 75, paddingY = 50) {
}


//=================//
//==================//
// Transform Sticky //
//=================//
//==================//

function transformSticky(sticky, step) {

Expand Down Expand Up @@ -266,3 +276,12 @@ function transformSticky(sticky, step) {
sticky.style.transform = transformStr;

}

/* getBooleanConfig: checks for a <meta> with named attribute `cr-[metaFlag]`
and returns true if its value is "true" or false otherwise */
function getBooleanConfig(metaFlag) {
const option = document
.querySelector("meta[cr-" + metaFlag + "]")?.getAttribute("cr-" + metaFlag)
return option === "true"
}

Loading