From 072e3d9870fe0fe2005867747dd3a5acd77bf4d2 Mon Sep 17 00:00:00 2001 From: "Collin J. Doering" Date: Sun, 28 Jun 2015 03:37:31 -0400 Subject: [PATCH] Themed post content (tables, images, figures, code) Added theming for tables, inline images, and figures. Inline images are specified using the markdown syntax "![link text](link_href)" somewhere within a paragraph. When a link is specified with the same syntax given previously, Pandoc will generate it as a figure. Figures are displayed across the whole width of the post and inline-images floated to the right. Some javascript was added to js/default.js to enable the ability to click to toggle fullscreen on images and figures. Code blocks were previously themed but the styling needed to be updated due to how an update to how pandoc generates code blocks. Signed-off-by: Collin J. Doering --- clay/PageComponents.hs | 122 ++++++++++++++++++++++++++++------------- js/default.js | 36 ++++++++++++ 2 files changed, 121 insertions(+), 37 deletions(-) diff --git a/clay/PageComponents.hs b/clay/PageComponents.hs index a02a047..bcb488d 100644 --- a/clay/PageComponents.hs +++ b/clay/PageComponents.hs @@ -38,6 +38,10 @@ pageComponents = do businessCard tagPageHeading srcCodeBlock + postFigures + inlinePostImages + postTables + statusMessages aPost :: Css aPost = do @@ -159,25 +163,24 @@ tagPageHeading = do srcCodeBlock :: Css srcCodeBlock = do - ".code-term" # ".sourceCode" ? do + div # ".sourceCode" |> (pre <> table) # ".sourceCode" # ".code-term" ? do display block backgroundColor "#111" color white sym borderRadius (px 3) - sym2 padding (em 0.5) nil + sym padding (em 0.5) marginBottom (em 0.75) overflow auto maxHeight (em 50) - ".code-term" ** pre |> code # ".sourceCode" ? do + div # ".sourceCode" ** pre # ".code-term" |> code <> + div # ".sourceCode" |> table # ".code-term" ** code ? do backgroundColor inherit borderStyle none + sym padding nil - (table # ".sourceCode") <> - (tr # ".sourceCode") <> - (td # ".lineNumbers") <> - (td # ".sourceCode") <> - (table # ".sourceCode" ** pre) ? do + (table <> tr <> td) # ".sourceCode" + <> table # ".sourceCode" ** pre ? do sym margin nil sym padding nil border none nil black @@ -193,41 +196,86 @@ srcCodeBlock = do td # ".sourceCode" ? paddingLeft (px 5) - (pre <> code) # ".sourceCode" ** span # ".kw" ? do - color "#007020" - fontWeight bold + (pre <> code) # ".sourceCode" ? do + span # ".kw" ? do + color "#007020" + fontWeight bold + span # ".dt" ? color "#902000" + span # ".dv" ? color "#40a070" + span # ".bn" ? color "#40a070" + span # ".fl" ? color "#40a070" + span # ".ch" ? color "#4070a0" + span # ".st" ? color "#4070a0" + span # ".co" ? do + color "#60a0b0" + fontStyle italic + span # ".al" ? do + color red + fontWeight bold + span # ".fu" ? color "#06287e" + span # ".er" ? do + color red + fontWeight bold - (pre <> code) # ".sourceCode" ** span # ".dt" ? - color "#902000" +postFigures :: Css +postFigures = do + figure ? do + border solid (px 1) black + sym borderRadius (px 3) + clear both - (pre <> code) # ".sourceCode" ** span # ".dv" ? - color "#40a070" + figure ? do + img code) # ".sourceCode" ** span # ".bn" ? - color "#40a070" + figcaption # ":before" code) # ".sourceCode" ** span # ".fl" ? - color "#40a070" + figcaption code) # ".sourceCode" ** span # ".ch" ? - color "#4070a0" +inlinePostImages :: Css +inlinePostImages = article # ".post" ? do + p |> img code) # ".sourceCode" ** span # ".st" ? - color "#4070a0" + let fullCss = do + width (pct 100) + float none + p |> img # ":-webkit-full-screen" img # ":-moz-full-screen" img # ":-ms-full-screen" img # ":fullscreen" code) # ".sourceCode" ** span # ".co" ? do - color "#60a0b0" - fontStyle italic +postTables :: Css +postTables = article # ".post" ? do + table code) # ".sourceCode" ** span # ".al" ? do - color red - fontWeight bold + table td) # ":first-child" ? paddingLeft (px 14) + (th <> td) # ":last-child" ? paddingRight (px 14) - (pre <> code) # ".sourceCode" ** span # ".fu" ? - color "#06287e" - - -- (pre <> code) # ".sourceCode" ** span # ".re" - - (pre <> code) # ".sourceCode" ** span # ".er" ? do - color red - fontWeight bold +statusMessages :: Css +statusMessages = "#status" ? do + ".close-button" img').click(function () { + $(this).get(0).toggleFullScreen(); + }); + $('figure').click(function () { + $(this).children('img').get(0).toggleFullScreen(); + }); + // Run current handles onSuccess callback (if it exists) if (handlerCallback.hasOwnProperty('onSuccess') && typeof handlerCallback.onSuccess === 'function') { handlerCallback.onSuccess(); @@ -281,3 +289,31 @@ page.init(router); }(jQuery, MathJax)); + +// Modified from: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode +function toggleFullScreen() { + if (!document.fullscreenElement && // alternative standard method + !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) { // current working methods + if (document.documentElement.requestFullscreen) { + this.requestFullscreen(); + } else if (document.documentElement.msRequestFullscreen) { + this.msRequestFullscreen(); + } else if (document.documentElement.mozRequestFullScreen) { + this.mozRequestFullScreen(); + } else if (document.documentElement.webkitRequestFullscreen) { + this.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT); + } + } else { + if (document.exitFullscreen) { + document.exitFullscreen(); + } else if (document.msExitFullscreen) { + document.msExitFullscreen(); + } else if (document.mozCancelFullScreen) { + document.mozCancelFullScreen(); + } else if (document.webkitExitFullscreen) { + document.webkitExitFullscreen(); + } + } +} + +Element.prototype.toggleFullScreen = toggleFullScreen;