website/src/pages/webapps/scrollbar.scm

;; Copyright (C) 2022 Ivan Polyakov
;;
;; This file is part of vilor's website.
;;
;; Vilor's website is free software: you can redistribute it and/or modify
;; it under the terms of the GNU General Public License as published by
;; the Free Software Foundation, either version 3 of the License, or
;; (at your option) any later version.
;;
;; Vilor's website is distributed in the hope that it will be useful,
;; but WITHOUT ANY WARRANTY; without even the implied warranty of
;; MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
;; GNU General Public License for more details.
;;   
;; You should have received a copy of the GNU General Public License
;; along with this program.  If not, see <https://www.gnu.org/licenses/>.

(import sxml-serializer)
(import scss)

(load "./src/general.scm")

(define title "vilor/webapps/scrollbar")
(define page-name "Scrollbar styling")
(define page-desc
  '((p "Demonstration of possible customization of the scrollbar.")
    (p (@ (class "note"))
       (b "Note")
       ": The result will look different in different browsers, try checking the result in browsers based on different engines.")))
(define page-styles '("scrollbar.css"))
(define page-scripts '("scrollbar.js"))

(define (backend-selectable-option value name)
  `("{% if thumbbstl == \"" ,value "\" %}"
    (option (@ (value ,value) (selected "selected")) ,name)
    "{% else %}"
    (option (@ (value ,value)) ,name)
    "{% endif %}"))

(define page-embedded-style
 '(css+
   (.scrollbar-app__demo
    (scrollbar-width "{{ sbw }}")
    (scrollbar-color "{{ thumbclr }} {{ trackclr }}")

    ((& ::-webkit-scrollbar)
     (width "{{ sbw }}"))

    ((& ::-webkit-scrollbar-thumb)
     (background-color "{{ thumbclr }}")
     (border-width "{{ thumbbw }}")
     (border-style "{{ thumbbstl }}")
     (border-color "{{ thumbbclr }}")
     (border-radius "{{ thumbbrad }}"))

    ((& ::-webkit-scrollbar-track)
     (background-color "{{ trackclr }}")
     (border-radius "{{ trackbrad }}")
     (margin-top "{{ trackmt }}")
     (margin-bottom "{{ trackmb }}")))))

(define example-text "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")

(define content
  `(div (@ (class "scrollbar-app"))
      (form (@ (method "GET") (action "/webapps/scrollbar.xhtml"))
       (fieldset (@ (class "scrollbar-app__panel"))
        (h3 "Bar:")
        (div (@ (class "scrollbar-app__input"))
         (label (@ (for "sbw")) "Width: ")
         (input (@
                 (type "text")
                 (id "sbw")
                 (name "sbw")
                 (value "{{ sbw }}")
                 (pattern "\\d+px")
                 (title "Size in pixels with format: \"<NUMBER>px\"")))))

       (fieldset (@ (class "scrollbar-app__panel"))
        (h3 "Thumbnail:")
        (div (@ (class "scrollbar-app__input"))
         (label (@ (for "thumbclr")) "Color: ")
         (input (@
                 (type "color")
                 (id "thumbclr")
                 (name "thumbclr")
                 (value "{{ thumbclr }}")))
         (input (@
                 (type "text")
                 (id "thumbclrtxt")
                 (name "thumbclrtxt")
                 (value "{{ thumbclr }}")
                 (pattern "#[0-9A-Fa-f]{6}")
                 (title "Hexadecimal RGB color with \"#\" at the beginning"))))

        (fieldset
         (h4 "Border:")
         (div (@ (class "scrollbar-app__input"))
          (label (@ (for "thumbbstl")) "Style: ")
          (select (@ (id "thumbbstl") (name "thumbbstl"))
                  ,(map
                    (lambda (l) (backend-selectable-option l l))
                    '("none" "hidden" "solid" "dotted" "dashed"
                      "double" "groove" "ridge" "inset" "outset"))))

         (div (@ (class "scrollbar-app__input"))
          (label (@ (for "thumbbrad")) "Radius: ")
          (input (@
                  (type "text")
                  (id "thumbbrad")
                  (name "thumbbrad")
                  (value "{{ thumbbrad }}")
                  (pattern "\\d+(px|%)")
                  (title "Radius in pixels or percents with format: \"<NUMBER>px\" or \"<NUMBER>%\""))))

         (div (@ (class "scrollbar-app__input"))
          (label (@ (for "thumbbw")) "Width: ")
          (input (@
                  (type "text")
                  (id "thumbbw")
                  (name "thumbbw")
                  (value "{{ thumbbw }}")
                  (pattern "\\d+px")
                  (title "Size in pixels with format: \"<NUMBER>px\""))))

         (div (@ (class "scrollbar-app__input"))
          (label (@ (for "thumbbclr")) "Color: ")
          (input (@
                  (type "color")
                  (id "thumbbclr")
                  (name "thumbbclr")
                  (value "{{ thumbbclr }}")))
          (input (@
                  (type "text")
                  (id "thumbbclrtxt")
                  (name "thumbbclrtxt")
                  (value "{{ thumbbclr }}")
                  (pattern "#[0-9A-Fa-f]{6}")
                  (title "Hexadecimal RGB color with \"\#\" at the beginning"))))))

       (fieldset (@ (class "scrollbar-app__panel"))
        (h3 "Track:")
        (div (@ (class "scrollbar-app__input"))
         (label (@ (for "trackclr")) "Color: ")
         (input (@
                 (type "color")
                 (id "trackclr")
                 (name "trackclr")
                 (value "{{ trackclr }}")))
         (input (@
                 (type "text")
                 (id "trackclrtxt")
                 (name "trackclrtxt")
                 (value "{{ trackclr }}")
                 (pattern "#[0-9A-Fa-f]{6}")
                 (title "Hexadecimal RGB color with \"#\" at the beginning"))))

        (div (@ (class "scrollbar-app__input"))
        (label (@ (for "trackbrad")) "Border radius: ")
        (input (@
                (type "text")
                (id "trackbrad")
                (name "trackbrad")
                (value "{{ trackbrad }}")
                (pattern "\\d+(px|%)")
                (title "Radius in pixels or percents with format: \"<NUMBER>px\" or \"<NUMBER>%\""))))

        (div (@ (class "scrollbar-app__input"))
         (label (@ (for "trackmt")) "Margin top: ")
         (input (@
                 (type "text")
                 (id "trackmt")
                 (name "trackmt")
                 (value "{{ trackmt }}")
                 (pattern "\\d+px")
                 (title "Size in pixels with format: \"<NUMBER>px\""))))

        (div (@ (class "scrollbar-app__input"))
         (label (@ (for "trackmb")) "Margin bottom: ")
         (input (@
                 (type "text")
                 (id "trackmb")
                 (name "trackmb")
                 (value "{{ trackmb }}")
                 (pattern "\\d+px")
                 (title "Size in pixels with format: \"<NUMBER>px\"")))))

       (div (@ (class "scrollbar-app__buttons") (id "sbBtns"))
        (button (@ (type "submit") (id "sbUpdBtn")) "update")))

      (pre (@ (class "scrollbar-app__panel") (id "sbScssOut"))
       "
.selector {
    scrollbar-color: {{ thumbclr }} {{ trackclr }};

    &::-webkit-scrollbar {
        width: {{ sbw }};
    }

    &::-webkit-scrollbar-track {
        background-color: {{ trackclr }};
        border-radius: {{ trackbrad }};
        margin-top: {{ trackmt }};
        margin-bottom: {{ trackmb }};
    }

    &::-webkit-scrollbar-thumb {
        background-color: {{ thumbclr }};
        border: {{ thumbbw }} {{ thumbbstl }} {{ thumbbclr }};
        border-radius: {{ thumbbrad }};
    }
}")
      (textarea (@ (class "scrollbar-app__demo")
                   (readonly "readonly")
                   (rows 5)
                   (cols 30))
       ,example-text)))

(load "./src/templates/default.scm")
(display xhtml-1.0-doctype)
(display (serialize-sxml
          (default-tpl
            title
            content
            page-name
            page-desc
            page-embedded-style
            page-styles
            page-scripts
            `(((name "description")
               (content "Demonstration of possible customization of the scrollbar."))
              ((name "keywords")
               (content "CSS, SCSS, scrollbar, styling, constructor"))))))