Browse Source

Adding option to not-minify js, creating updateScrollShadows() function and applying to configured selectors

enp1-edits
Logan McGrath 7 months ago
parent
commit
8106979e99
  1. 1
      config.yaml
  2. 76
      site/js/main.js
  3. 13
      src/Green/Config.hs
  4. 2
      src/Green/Site.hs
  5. 15
      src/Green/Site/Js.hs

1
config.yaml

@ -27,6 +27,7 @@ default: &default
debug-settings:
preview: false
inflate-css: true
inflate-js: true
prod:
<<: *default

76
site/js/main.js

@ -1,6 +1,12 @@
let sideScrollingSelectors = ["pre.sourceCode"]
window.addEventListener("load", () => {
writeCopyrightYear()
addCodeScrolling()
sideScrollingSelectors.forEach(updateScrollShadowsSelector)
})
window.addEventListener("resize", () => {
sideScrollingSelectors.forEach(updateScrollShadowsSelector)
})
function writeCopyrightYear() {
@ -12,28 +18,58 @@ function writeCopyrightYear() {
})
}
function addCodeScrolling() {
document.querySelectorAll("pre.sourceCode").forEach(wrapper => {
let content = wrapper.querySelector("code.sourceCode")
let contentScrollWidth = content.scrollWidth - wrapper.offsetWidth
if (contentScrollWidth <= 0) {
return;
}
function updateScrollShadowsSelector(selector) {
document.querySelectorAll(selector).forEach(wrapper => updateScrollShadows(wrapper))
}
function updateScrollShadows(wrapper) {
// identity the scrolling content within the wrapper
let contentQuery = wrapper.querySelector(".scroll-content")
let content
if (contentQuery) {
content = contentQuery
} else {
content = wrapper.firstChild
content.classList.add("scroll-content")
}
let leftShadow = document.createElement("div")
leftShadow.classList.add("shadow", "shadow-left")
wrapper.appendChild(leftShadow)
let contentScrollWidth = content.scrollWidth - wrapper.offsetWidth
// remove shadows if no scrolling is needed
if (contentScrollWidth <= 0) {
wrapper.querySelectorAll(".shadow").forEach(x => x.remove())
delete wrapper.updateScrollShadows
return
}
let rightShadow = document.createElement("div")
rightShadow.classList.add("shadow", "shadow-right")
wrapper.appendChild(rightShadow)
// skip if scroll shadows already added
if (wrapper.updateScrollShadows) {
return;
}
function setScroll() {
let currentScroll = content.scrollLeft / contentScrollWidth
leftShadow.style.opacity = currentScroll
rightShadow.style.opacity = 1 - currentScroll
// create scroll shadows
let [leftShadow, rightShadow] = ["left", "right"].map(side => {
let shadowQuery = wrapper.querySelector(`.shadow-${side}`)
let shadow
if (shadowQuery) {
shadow = shadowQuery
} else {
shadow = document.createElement("div")
shadow.classList.add("shadow", `shadow-${side}`)
wrapper.appendChild(shadow)
}
return shadow
})
// add method to update shadow opacity relative to scroll
wrapper.updateScrollShadows = () => {
let currentScroll = content.scrollLeft / contentScrollWidth
leftShadow.style.opacity = currentScroll
rightShadow.style.opacity = 1 - currentScroll
}
// attach event listener to update shadows
content.addEventListener("scroll", function () {
if (wrapper.updateScrollShadows) {
wrapper.updateScrollShadows()
}
setScroll();
content.addEventListener("scroll", setScroll);
})
wrapper.updateScrollShadows()
}

13
src/Green/Config.hs

@ -11,7 +11,8 @@ import qualified Hakyll as H
data SiteDebug = SiteDebug
{ _debugPreview :: Bool,
_debugInflateCss :: Bool
_debugInflateCss :: Bool,
_debugInflateJs :: Bool
}
deriving (Show)
@ -21,7 +22,8 @@ defaultSiteDebug :: SiteDebug
defaultSiteDebug =
SiteDebug
{ _debugPreview = False,
_debugInflateCss = False
_debugInflateCss = False,
_debugInflateJs = False
}
instance FromJSON SiteDebug where
@ -29,12 +31,14 @@ instance FromJSON SiteDebug where
SiteDebug
<$> debug .:? "preview" .!= (defaultSiteDebug ^. debugPreview)
<*> debug .:? "inflate-css" .!= (defaultSiteDebug ^. debugInflateCss)
<*> debug .:? "inflate-js" .!= (defaultSiteDebug ^. debugInflateJs)
instance ToJSON SiteDebug where
toJSON SiteDebug {..} =
object
[ "preview" .= _debugPreview,
"inflate-css" .= _debugInflateCss
"inflate-css" .= _debugInflateCss,
"inflate-js" .= _debugInflateJs
]
data SiteInfo = SiteInfo
@ -206,8 +210,9 @@ parseSiteConfigJSON env timeLocale time = withObject "SiteConfig" \allConfig ->
envKey = fromMaybe "default" $ lookup "SITE_ENV" env
overrideDebugSettings debug =
debug
& debugInflateCss %~ (\x -> maybe x read $ lookup "SITE_INFLATE_CSS" env)
& debugPreview %~ (\x -> maybe x read $ lookup "SITE_PREVIEW" env)
& debugInflateCss %~ (\x -> maybe x read $ lookup "SITE_INFLATE_CSS" env)
& debugInflateJs %~ (\x -> maybe x read $ lookup "SITE_INFLATE_JS" env)
parseConfigYaml :: [(String, String)] -> TimeLocale -> ZonedTime -> ByteString -> Either String SiteConfig
parseConfigYaml env timeLocale time =

2
src/Green/Site.hs

@ -21,7 +21,7 @@ site :: SiteConfig -> Rules ()
site config = do
brokenLinks
images
js
js config
scss config
templatesDependency <- templates
rulesExtraDependencies [templatesDependency] do

15
src/Green/Site/Js.hs

@ -1,14 +1,19 @@
module Green.Site.Js where
import qualified Data.ByteString.Lazy.Char8 as C
import Hakyll
import Green.Common
import Green.Config
import Text.Jasmine
js :: Rules ()
js =
js :: SiteConfig -> Rules ()
js config =
match "js/**.js" do
route idRoute
compile do
let minifyJS = C.unpack . minify . C.pack . itemBody
s <- getResourceString
return $ itemSetBody (minifyJS s) s
return $ itemSetBody (processJS $ itemBody s) s
where
processJS
| config ^. siteDebug . debugInflateJs = id
| otherwise = minifyJS
minifyJS = C.unpack . minify . C.pack

Loading…
Cancel
Save