From f6217a6abcd61f08899d3bbb291b3018e567e67c Mon Sep 17 00:00:00 2001 From: David Kebler Date: Fri, 15 Jan 2021 08:31:56 -0800 Subject: [PATCH] removed from landing page theme and added in mdf shortcode --- layouts/shortcodes/avatar.html | 13 +++ layouts/shortcodes/bookmark.html | 6 + layouts/shortcodes/box.html | 4 + layouts/shortcodes/contact.html | 23 ++++ layouts/shortcodes/disqus.html | 50 ++++++++ layouts/shortcodes/embed.html | 23 ++++ layouts/shortcodes/format.html | 4 + layouts/shortcodes/image.html | 22 ++++ layouts/shortcodes/jotform.html | 4 + layouts/shortcodes/link.html | 24 ++++ layouts/shortcodes/lorem.html | 7 ++ layouts/shortcodes/mdf.html | 16 +++ layouts/shortcodes/social.html | 8 ++ layouts/shortcodes/youtube.html | 38 ++++++ static/css/custom.css | 5 + static/css/uci-shortcodes.css | 191 +++++++++++++++++++++++++++++++ static/js/lorem.js | 141 +++++++++++++++++++++++ static/js/page.js | 161 ++++++++++++++++++++++++++ static/js/util.js | 6 + static/js/youtube.js | 50 ++++++++ 20 files changed, 796 insertions(+) create mode 100644 layouts/shortcodes/avatar.html create mode 100644 layouts/shortcodes/bookmark.html create mode 100644 layouts/shortcodes/box.html create mode 100644 layouts/shortcodes/contact.html create mode 100644 layouts/shortcodes/disqus.html create mode 100644 layouts/shortcodes/embed.html create mode 100644 layouts/shortcodes/format.html create mode 100644 layouts/shortcodes/image.html create mode 100644 layouts/shortcodes/jotform.html create mode 100644 layouts/shortcodes/link.html create mode 100644 layouts/shortcodes/lorem.html create mode 100644 layouts/shortcodes/mdf.html create mode 100644 layouts/shortcodes/social.html create mode 100644 layouts/shortcodes/youtube.html create mode 100644 static/css/custom.css create mode 100644 static/css/uci-shortcodes.css create mode 100644 static/js/lorem.js create mode 100644 static/js/page.js create mode 100644 static/js/util.js create mode 100644 static/js/youtube.js diff --git a/layouts/shortcodes/avatar.html b/layouts/shortcodes/avatar.html new file mode 100644 index 0000000..96fa424 --- /dev/null +++ b/layouts/shortcodes/avatar.html @@ -0,0 +1,13 @@ +{{ $path := "/images/" }} {{ with $.Site.Params.imagespath }} {{ $path := ( . ) }}{{ end }} +{{ if .IsNamedParams }} +
+ {{ with .Get "url" }}{{ end }} + + {{ with .Get "url" }}{{ end }} +
+{{ else }} +{{ $avatar := ( .Get 0 | default "avatar.jpg" ) }} +
+ +
+{{ end }} diff --git a/layouts/shortcodes/bookmark.html b/layouts/shortcodes/bookmark.html new file mode 100644 index 0000000..2de630a --- /dev/null +++ b/layouts/shortcodes/bookmark.html @@ -0,0 +1,6 @@ +{{ $numOfParams := ( len .Params ) }} +{{ if eq $numOfParams 1 }} {{ .Get 0 }} {{ end }} +{{ if eq $numOfParams 2 }} {{ .Get 1 }} {{ end }} +{{ if eq $numOfParams 3 }} +{{ .Get 1 }} +{{ end }} diff --git a/layouts/shortcodes/box.html b/layouts/shortcodes/box.html new file mode 100644 index 0000000..acad83f --- /dev/null +++ b/layouts/shortcodes/box.html @@ -0,0 +1,4 @@ +{{ $numOfParams := ( len .Params ) }} +
+{{ .Inner }} +
diff --git a/layouts/shortcodes/contact.html b/layouts/shortcodes/contact.html new file mode 100644 index 0000000..7b50b46 --- /dev/null +++ b/layouts/shortcodes/contact.html @@ -0,0 +1,23 @@ +{{ with .Site.Params.contact }} {{ $path := "/images/" }} {{ with $.Site.Params.imagespath }} {{ $path := ( . ) }}{{ end }} +
+ +
+

{{ .name }}

+
+ + + +
+ +
+ {{ if .cell_image | or .cell }} + {{ if .cell_image }} + + {{ else }} +
{{ .cell }}
+ {{ end }} + {{ end }} +
+
+
+{{ end }} diff --git a/layouts/shortcodes/disqus.html b/layouts/shortcodes/disqus.html new file mode 100644 index 0000000..a66871a --- /dev/null +++ b/layouts/shortcodes/disqus.html @@ -0,0 +1,50 @@ +
+
+
+
+ + + + + +comments powered by Disqus + + + + + + diff --git a/layouts/shortcodes/embed.html b/layouts/shortcodes/embed.html new file mode 100644 index 0000000..67ea536 --- /dev/null +++ b/layouts/shortcodes/embed.html @@ -0,0 +1,23 @@ + +{{ if .IsNamedParams }} +
+ {{ with .Get "title" }} +
{{ . }}
+ {{ end }} +
+ {{ .Inner }} +
+ {{ with .Get "caption"}} +
{{ . }}
+ {{ end }} +
+{{ else }} +
+ {{ .Inner }} +
+{{ end }} diff --git a/layouts/shortcodes/format.html b/layouts/shortcodes/format.html new file mode 100644 index 0000000..cecde2a --- /dev/null +++ b/layouts/shortcodes/format.html @@ -0,0 +1,4 @@ + + +{{ .Inner }} + diff --git a/layouts/shortcodes/image.html b/layouts/shortcodes/image.html new file mode 100644 index 0000000..1ebb969 --- /dev/null +++ b/layouts/shortcodes/image.html @@ -0,0 +1,22 @@ +{{ $path := "/images/" }} +{{ $filename := .Get "filename" }} +{{ with $.Site.Params.imagespath }} {{ $path := ( . ) }}{{ end }} +
+{{ with .Get "title" }} +
{{ . }}
+ {{ end }} +{{ with .Get "link"}} +{{ if eq . "lightbox" }}{{ else }}{{ end }} +{{ end }} + +{{ if .Get "link"}}{{ end }} +{{ with .Get "caption"}} +
{{ . }}
+{{ end }} +
diff --git a/layouts/shortcodes/jotform.html b/layouts/shortcodes/jotform.html new file mode 100644 index 0000000..aa6d093 --- /dev/null +++ b/layouts/shortcodes/jotform.html @@ -0,0 +1,4 @@ + +
+{{ .Get 1 }} +
diff --git a/layouts/shortcodes/link.html b/layouts/shortcodes/link.html new file mode 100644 index 0000000..fda8f7b --- /dev/null +++ b/layouts/shortcodes/link.html @@ -0,0 +1,24 @@ +{{ .Scratch.Set "url" (.Get "url") }} +{{ .Scratch.Set "height" (.Get "height") }} +{{ .Scratch.Set "width" (.Get "width" | default "1000") }} +{{ if .Get "height" }} + {{ .Scratch.Set "height" ( printf ", height=%s" ( .Scratch.Get "height" ) ) }} + {{else}} + {{ .Scratch.Set "height" "" }} + {{ end }} + +{{ if eq (.Get "display") "window" }} +{{ .Scratch.Set "url" ( printf "javascript:void( window.open('%s', 'blank', 'scrollbars=yes, toolbar=no, width=%s %s' ))" (.Scratch.Get "url") (.Scratch.Get "width") (.Scratch.Get "height") ) }} +{{ end }} + +{{ with .Get "icon" }}{{ end }} +{{ if eq (.Get "type") "btn" }}
{{ .Get "text" }}
+{{ else }} +{{ .Get "text" }} +{{ end }} + diff --git a/layouts/shortcodes/lorem.html b/layouts/shortcodes/lorem.html new file mode 100644 index 0000000..b7ddbfc --- /dev/null +++ b/layouts/shortcodes/lorem.html @@ -0,0 +1,7 @@ + +
diff --git a/layouts/shortcodes/mdf.html b/layouts/shortcodes/mdf.html new file mode 100644 index 0000000..526a288 --- /dev/null +++ b/layouts/shortcodes/mdf.html @@ -0,0 +1,16 @@ +{{ $s := newScratch }} +{{ $s.Set "file" (.Get 0) }} +{{ if not ( path.Ext ($s.Get "file")) }} + {{ $s.Set "file" (print ($s.Get "file") ".md") }} +{{ end }} +{{ if not ( fileExists ($s.Get "file")) }} +{{ $s.Set "file" (print ( .Site.Params.extraContentDir | default "content_common") "/" ($s.Get "file")) }} +{{ end }} + +
+ {{ if fileExists ($s.Get "file") }} + {{ ($s.Get "file") | readFile | replaceRE "^---[\\s\\S]+?---" "" | markdownify }} + {{ else }} + Error file: {{ ($s.Get "file") }} not found + {{ end }} +
diff --git a/layouts/shortcodes/social.html b/layouts/shortcodes/social.html new file mode 100644 index 0000000..a1394b4 --- /dev/null +++ b/layouts/shortcodes/social.html @@ -0,0 +1,8 @@ +{{ range .Site.Params.social }} +
  • + + + {{ .title }} + +
    • +{{ end }} diff --git a/layouts/shortcodes/youtube.html b/layouts/shortcodes/youtube.html new file mode 100644 index 0000000..bb306bb --- /dev/null +++ b/layouts/shortcodes/youtube.html @@ -0,0 +1,38 @@ +{{ $.Scratch.Set "maxwidth" ( $.Page.Site.Params.youtube.maxwidth ) }} +{{ $.Scratch.Set "wpad" ( $.Page.Site.Params.youtube.wpad ) }} +{{ $.Scratch.Set "nothumb" ( $.Page.Site.Params.youtube.disable_thumb ) }} +{{ if .IsNamedParams }} +{{ with .Get "maxwidth" }}{{ $.Scratch.Set "maxwidth" . }}{{ end }} +{{ with .Get "wpad" }}{{ $.Scratch.Set "wpad" . }}{{ end }} +{{ with .Get "nothumb" }}{{ $.Scratch.Set "nothumb" . }}{{ end }} +
    + {{ with .Get "title" }} +
    {{ . }}
    + {{ end }} +
    + +
    + {{ with .Get "caption"}} +
    {{ . }}
    + {{ end }} +
    +{{ else }} +{{ $numOfParams := ( len .Params ) }} +
    + +
    +{{ end }} diff --git a/static/css/custom.css b/static/css/custom.css new file mode 100644 index 0000000..08aab88 --- /dev/null +++ b/static/css/custom.css @@ -0,0 +1,5 @@ +/* picture captions */ +.lg-sub-html { + font-size: 2em; + font-weight: bold; +} diff --git a/static/css/uci-shortcodes.css b/static/css/uci-shortcodes.css new file mode 100644 index 0000000..dd7e63b --- /dev/null +++ b/static/css/uci-shortcodes.css @@ -0,0 +1,191 @@ +/* ---------------- + Components/Shortcodes Styling +---------------- */ + +/* box creates a flexbox wrapper, row default */ +.box { + display: flex; + flex-flow: wrap; + align-content: center; + justify-content: center; + padding-left: 0.5em; + padding-right: 0.5em; +} + +.box--embed { + flex-direction: column; + flex-wrap: nowrap; + padding-bottom: 0; + justify-content: center; + align-items: center; +} + +.box--embed::before, +.box--image::before { + content: ""; + height: 0.5em; +} + +.box--embed::after, +.box--image::after { + content: ""; + height: 0.5em; +} + +.box--btn-bar { + padding-top: 0.5em; + padding-bottom: 0.5em; +} + +.box--column { + flex-direction: column; + align-items: center; +} + +.box__caption { + font-style: italic; +} + +.box__title { + text-transform: capitalize; + font-weight: bold; +} + +.box--headline { +} + +.box--text { +} + +.box--btn { + padding: 0.5em; + margin-bottom: 0.5em; +} + +.box--btn-bar > .box--btn { + margin-right: 0.2em; +} + +.btn__text { + align-self: center; +} + +.btn__icon { + align-self: center; + padding-right: 0.2em; +} + +.btn--large .btn__text, +.btn--large .btn__icon { + font-size: 3rem; +} + +.btn--small .btn__text, +.btn--small .btn__icon { + font-size: 1rem; +} + +.btn--circle { + border-radius: 50%; + padding: 0.5em; +} + +.highlight { + font-size: 0.7em; + align-items: left; + color: red; + background-color: white; + padding: 0.5em; + border-color: black; + border-width: 3px; + border-radius: 1em; +} + +.highlight > ul > li::before { + font-family: FontAwesome; + content: "\f054"; /* chevron-right */ + padding-right: 1.1em; + margin-left: -2em; +} + +.box--avatar > a { + opacity: 1; +} + +.thumb--yt { + display: flex; + align-items: center; + justify-content: center; + background-repeat: no-repeat; + background-size: cover; + filter: brightness(0.8); +} + +.thumb--yt:hover { + -webkit-filter: brightness(1); + cursor: pointer; +} + +.thumb--yt > .play-button { + font-size: 3.5em; + color: red; + text-shadow: 3px 3px black; +} + +.box__embed--disqus { + width: 90vw; + max-width: 800px; +} + +.box__contact-info > * { + padding: 0.1em; + align-self: center; +} + +.box__contact-info > * > * { + margin: 0.2em; + align-self: center; +} + +/*turn off default bullets*/ +.box--gallery { + list-style: none; +} + +.box--gallery li, +.box--gallery__item { + padding: 0.2em; +} + +/*turn off fontawesome bullets*/ +.box--gallery li::before, +.box--gallery__item li::before { + display: none; +} + +code { + font-size: 0.8em; + font-family: 'Roboto Mono', monospace; + background-color: black; + border-radius: 0.2em; + color: white; + padding-left: 0.2em; + padding-right: 0.2em; + padding-top: 0.05em; + padding-bottom: 0.07em; + overflow-x: scroll; +} + +code.hljs { + font-size: 0.75em; + border-radius: 0.2em; + background-color: black; + color: white; + padding: 1em; + margin-bottom: 0.7em; + width: inherit; + max-width: 90vw; + border-style: solid; + border-width: 3px; + border-color: dimgrey; +} diff --git a/static/js/lorem.js b/static/js/lorem.js new file mode 100644 index 0000000..39479c6 --- /dev/null +++ b/static/js/lorem.js @@ -0,0 +1,141 @@ +var Lorem; +(function() { + + //Create a class named Lorem and constructor + Lorem = function() { + //Default values. + this.type = null; + this.query = null; + this.data = null; + }; + //Static variables + Lorem.IMAGE = 1; + Lorem.TEXT = 2; + Lorem.TYPE = { + PARAGRAPH: 1, + SENTENCE: 2, + WORD: 3 + }; + //Words to create lorem ipsum text. + Lorem.WORDS = [ + "lorem", "ipsum", "dolor", "sit", "amet,", "consectetur", "adipiscing", "elit", "ut", "aliquam,", "purus", "sit", "amet", "luctus", "venenatis,", "lectus", "magna", "fringilla", "urna,", "porttitor", "rhoncus", "dolor", "purus", "non", "enim", "praesent", "elementum", "facilisis", "leo,", "vel", "fringilla", "est", "ullamcorper", "eget", "nulla", "facilisi", "etiam", "dignissim", "diam", "quis", "enim", "lobortis", "scelerisque", "fermentum", "dui", "faucibus", "in", "ornare", "quam", "viverra", "orci", "sagittis", "eu", "volutpat", "odio", "facilisis", "mauris", "sit", "amet", "massa", "vitae", "tortor", "condimentum", "lacinia", "quis", "vel", "eros", "donec", "ac", "odio", "tempor", "orci", "dapibus", "ultrices", "in", "iaculis", "nunc", "sed", "augue", "lacus,", "viverra", "vitae", "congue", "eu,", "consequat", "ac", "felis", "donec", "et", "odio", "pellentesque", "diam", "volutpat", "commodo", "sed", "egestas", "egestas", "fringilla", "phasellus", "faucibus", "scelerisque", "eleifend", "donec", "pretium", "vulputate", "sapien", "nec", "sagittis", "aliquam", "malesuada", "bibendum", "arcu", "vitae", "elementum", + "curabitur", "vitae", "nunc", "sed", "velit", "dignissim", "sodales", "ut", "eu", "sem", "integer", "vitae", "justo", "eget", "magna", "fermentum", "iaculis", "eu", "non", "diam", "phasellus", "vestibulum", "lorem", "sed", "risus", "ultricies", "tristique", "nulla", "aliquet", "enim", "tortor,", "at", "auctor", "urna", "nunc", "id", "cursus", "metus", "aliquam", "eleifend", "mi", "in", "nulla", "posuere", "sollicitudin", "aliquam", "ultrices", "sagittis", "orci,", "a", "scelerisque", "purus", "semper", "eget", "duis", "at", "tellus", "at", "urna", "condimentum", "mattis", "pellentesque", "id", "nibh", "tortor,", "id", "aliquet", "lectus", "proin", "nibh", "nisl,", "condimentum", "id", "venenatis", "a,", "condimentum", "vitae", "sapien", "pellentesque", "habitant", "morbi", "tristique", "senectus", "et", "netus", "et", "malesuada", "fames", "ac", "turpis", "egestas", "sed", "tempus,", "urna", "et", "pharetra", "pharetra,", "massa", "massa", "ultricies", "mi,", "quis", "hendrerit", "dolor", "magna", "eget", "est", "lorem", "ipsum", "dolor", "sit", "amet,", "consectetur", "adipiscing", "elit", "pellentesque", "habitant", "morbi", "tristique", "senectus", "et", "netus", "et", "malesuada", "fames", "ac", "turpis", "egestas", "integer", "eget", "aliquet", "nibh", "praesent", "tristique", "magna", "sit", "amet", "purus", "gravida", "quis", "blandit", "turpis", "cursus", "in", "hac", "habitasse", "platea", "dictumst", "quisque", "sagittis,", "purus", "sit", "amet", "volutpat", "consequat,", "mauris", "nunc", "congue", "nisi,", "vitae", "suscipit", "tellus", "mauris", "a", "diam", + "maecenas", "sed", "enim", "ut", "sem", "viverra", "aliquet", "eget", "sit", "amet", "tellus", "cras", "adipiscing", "enim", "eu", "turpis", "egestas", "pretium", "aenean", "pharetra,", "magna", "ac", "placerat", "vestibulum,", "lectus", "mauris", "ultrices", "eros,", "in", "cursus", "turpis", "massa", "tincidunt", "dui", "ut", "ornare", "lectus", "sit", "amet", "est", "placerat", "in", "egestas", "erat", "imperdiet", "sed", "euismod", "nisi", "porta", "lorem", "mollis", "aliquam", "ut", "porttitor", "leo", "a", "diam", "sollicitudin", "tempor", "id", "eu", "nisl", "nunc", "mi", "ipsum,", "faucibus", "vitae", "aliquet", "nec,", "ullamcorper", "sit", "amet", "risus", "nullam", "eget", "felis", "eget", "nunc", "lobortis", "mattis", "aliquam", "faucibus", "purus", "in", "massa", "tempor", "nec", "feugiat", "nisl", "pretium", "fusce", "id", "velit", "ut", "tortor", "pretium", "viverra", "suspendisse", "potenti", "nullam", "ac", "tortor", "vitae", "purus", "faucibus", "ornare", "suspendisse", "sed", "nisi", "lacus,", "sed", "viverra", "tellus", "in", "hac", "habitasse", "platea", "dictumst", "vestibulum", "rhoncus", "est", "pellentesque", "elit", "ullamcorper", "dignissim", "cras", "tincidunt", "lobortis", "feugiat", "vivamus", "at", "augue", "eget", "arcu", "dictum", "varius", "duis", "at", "consectetur", "lorem", + "donec", "massa", "sapien,", "faucibus", "et", "molestie", "ac,", "feugiat", "sed", "lectus", "vestibulum", "mattis", "ullamcorper", "velit", "sed", "ullamcorper", "morbi", "tincidunt", "ornare", "massa,", "eget", "egestas", "purus", "viverra", "accumsan", "in", "nisl", "nisi,", "scelerisque", "eu", "ultrices", "vitae,", "auctor", "eu", "augue", "ut", "lectus", "arcu,", "bibendum", "at", "varius", "vel,", "pharetra", "vel", "turpis", "nunc", "eget", "lorem", "dolor,", "sed", "viverra", "ipsum", "nunc", "aliquet", "bibendum", "enim,", "facilisis", "gravida", "neque", "convallis", "a", "cras", "semper", "auctor", "neque,", "vitae", "tempus", "quam", "pellentesque", "nec", "nam", "aliquam", "sem", "et", "tortor", "consequat", "id", "porta", "nibh", "venenatis", "cras", "sed", "felis", "eget", "velit", "aliquet", "sagittis", "id", "consectetur", "purus", "ut", "faucibus", "pulvinar", "elementum", "integer", "enim", "neque,", "volutpat", "ac", "tincidunt", "vitae,", "semper", "quis", "lectus", "nulla", "at", "volutpat", "diam", "ut", "venenatis", "tellus", "in", "metus", "vulputate", "eu", "scelerisque", "felis", "imperdiet", "proin", "fermentum", "leo", "vel", "orci", "porta", "non", "pulvinar", "neque", "laoreet", "suspendisse", "interdum", "consectetur", "libero,", "id", "faucibus", "nisl", "tincidunt", "eget", "nullam", "non", "nisi", "est,", "sit", "amet", "facilisis", "magna", + "etiam", "tempor,", "orci", "eu", "lobortis", "elementum,", "nibh", "tellus", "molestie", "nunc,", "non", "blandit", "massa", "enim", "nec", "dui", "nunc", "mattis", "enim", "ut", "tellus", "elementum", "sagittis", "vitae", "et", "leo", "duis", "ut", "diam", "quam", "nulla", "porttitor", "massa", "id", "neque", "aliquam", "vestibulum", "morbi", "blandit", "cursus", "risus,", "at", "ultrices", "mi", "tempus", "imperdiet", "nulla", "malesuada", "pellentesque", "elit", "eget", "gravida", "cum", "sociis", "natoque", "penatibus", "et", "magnis", "dis", "parturient", "montes,", "nascetur", "ridiculus", "mus", "mauris", "vitae", "ultricies", "leo", "integer", "malesuada", "nunc", "vel", "risus", "commodo", "viverra", "maecenas", "accumsan,", "lacus", "vel", "facilisis", "volutpat,", "est", "velit", "egestas", "dui,", "id", "ornare", "arcu", "odio", "ut", "sem", "nulla", "pharetra", "diam", "sit", "amet", "nisl", "suscipit", "adipiscing", "bibendum", "est", "ultricies", "integer", "quis", "auctor", "elit", + "sed", "vulputate", "mi", "sit", "amet", "mauris", "commodo", "quis", "imperdiet", "massa", "tincidunt", "nunc", "pulvinar", "sapien", "et", "ligula", "ullamcorper", "malesuada", "proin", "libero", "nunc,", "consequat", "interdum", "varius", "sit", "amet,", "mattis", "vulputate", "enim", "nulla", "aliquet", "porttitor", "lacus,", "luctus", "accumsan", "tortor", "posuere", "ac", "ut", "consequat", "semper", "viverra", "nam", "libero", "justo,", "laoreet", "sit", "amet", "cursus", "sit", "amet,", "dictum", "sit", "amet", "justo", "donec", "enim", "diam,", "vulputate", "ut", "pharetra", "sit", "amet,", "aliquam", "id", "diam", "maecenas", "ultricies", "mi", "eget", "mauris", "pharetra", "et", "ultrices", "neque", "ornare", "aenean", "euismod", "elementum", "nisi,", "quis", "eleifend", "quam", "adipiscing", "vitae", "proin", "sagittis,", "nisl", "rhoncus", "mattis", "rhoncus,", "urna", "neque", "viverra", "justo,", "nec", "ultrices", "dui", "sapien", "eget", "mi", "proin", "sed", "libero", "enim,", "sed", "faucibus", "turpis", "in", "eu", "mi", "bibendum", "neque", "egestas", "congue", "quisque", "egestas", "diam", "in", "arcu", "cursus", "euismod", "quis", "viverra", "nibh", "cras", "pulvinar", "mattis", "nunc,", "sed", "blandit", "libero", "volutpat", "sed", "cras", "ornare", "arcu", "dui", "vivamus", "arcu", "felis,", "bibendum", "ut", "tristique", "et,", "egestas", "quis", "ipsum", "suspendisse", "ultrices", "gravida", "dictum", + "fusce", "ut", "placerat", "orci", "nulla", "pellentesque", "dignissim", "enim,", "sit", "amet", "venenatis", "urna", "cursus", "eget", "nunc", "scelerisque", "viverra", "mauris,", "in", "aliquam", "sem", "fringilla", "ut", "morbi", "tincidunt", "augue", "interdum", "velit", "euismod", "in", "pellentesque", "massa", "placerat", "duis", "ultricies", "lacus", "sed", "turpis", "tincidunt", "id", "aliquet", "risus", "feugiat", "in", "ante", "metus,", "dictum", "at", "tempor", "commodo,", "ullamcorper", "a", "lacus", "vestibulum", "sed", "arcu", "non", "odio", "euismod", "lacinia", "at", "quis", "risus", "sed", "vulputate", "odio", "ut", "enim", "blandit", "volutpat", "maecenas", "volutpat", "blandit", "aliquam", "etiam", "erat", "velit,", "scelerisque", "in", "dictum", "non,", "consectetur", "a", "erat", "nam", "at", "lectus", "urna", "duis", "convallis", "convallis", "tellus,", "id", "interdum", "velit", "laoreet", "id", "donec", "ultrices", "tincidunt", "arcu,", "non", "sodales", "neque", "sodales", "ut", "etiam", "sit", "amet", "nisl", "purus,", "in", "mollis", "nunc", + "sed", "id", "semper", "risus", "in", "hendrerit", "gravida", "rutrum", "quisque", "non", "tellus", "orci,", "ac", "auctor", "augue", "mauris", "augue", "neque,", "gravida", "in", "fermentum", "et,", "sollicitudin", "ac", "orci", "phasellus", "egestas", "tellus", "rutrum", "tellus", "pellentesque", "eu", "tincidunt", "tortor", "aliquam", "nulla", "facilisi", "cras", "fermentum,", "odio", "eu", "feugiat", "pretium,", "nibh", "ipsum", "consequat", "nisl,", "vel", "pretium", "lectus", "quam", "id", "leo", "in", "vitae", "turpis", "massa", "sed", "elementum", "tempus", "egestas", "sed", "sed", "risus", "pretium", "quam", "vulputate", "dignissim", "suspendisse", "in", "est", "ante", "in", "nibh", "mauris,", "cursus", "mattis", "molestie", "a,", "iaculis", "at", "erat", + "pellentesque", "adipiscing", "commodo", "elit,", "at", "imperdiet", "dui", "accumsan", "sit", "amet", "nulla", "facilisi", "morbi", "tempus", "iaculis", "urna,", "id", "volutpat", "lacus", "laoreet", "non", "curabitur", "gravida", "arcu", "ac", "tortor", "dignissim", "convallis", "aenean", "et", "tortor", "at", "risus", "viverra", "adipiscing", "at", "in", "tellus", "integer", "feugiat", "scelerisque", "varius", "morbi", "enim", "nunc,", "faucibus", "a", "pellentesque", "sit", "amet,", "porttitor", "eget", "dolor", "morbi", "non", "arcu", "risus,", "quis", "varius", "quam", "quisque", "id", "diam", "vel", "quam", "elementum", "pulvinar", "etiam", "non", "quam", "lacus", "suspendisse", "faucibus", "interdum", "posuere", "lorem", "ipsum", "dolor", "sit", "amet,", "consectetur", "adipiscing", "elit", "duis", "tristique", "sollicitudin", "nibh", "sit", "amet", "commodo", "nulla", "facilisi", + "nullam", "vehicula", "ipsum", "a", "arcu", "cursus", "vitae", "congue", "mauris", "rhoncus", "aenean", "vel", "elit", "scelerisque", "mauris", "pellentesque", "pulvinar", "pellentesque", "habitant", "morbi", "tristique", "senectus", "et", "netus", "et", "malesuada", "fames", "ac", "turpis", "egestas", "maecenas", "pharetra", "convallis", "posuere", "morbi", "leo", "urna,", "molestie", "at", "elementum", "eu,", "facilisis", "sed", "odio", "morbi", "quis", "commodo", "odio", "aenean", "sed", "adipiscing", "diam", "donec", "adipiscing", "tristique", "risus", "nec", "feugiat", "in", "fermentum", "posuere", "urna", "nec", "tincidunt", "praesent", "semper", "feugiat", "nibh", "sed", "pulvinar", "proin", "gravida", "hendrerit", "lectus", "a", "molestie" + ]; + //random integer method. + Lorem.prototype.randomInt = function (min, max) { + return Math.floor(Math.random() * (max - min + 1)) + min; + }; + //text creator method with parameters: how many, what + Lorem.prototype.createText = function(count, type) { + switch (type) { + //paragraphs are loads of sentences. + case Lorem.TYPE.PARAGRAPH: + var paragraphs = new Array; + for (var i = 0; i < count; i++) { + var paragraphLength = this.randomInt(10, 20); + var paragraph = this.createText(paragraphLength, Lorem.TYPE.SENTENCE); + paragraphs.push('

    '+paragraph+'

    '); + } + return paragraphs.join('\n'); + break; + //sentences are loads of words. + case Lorem.TYPE.SENTENCE: + var sentences = new Array; + for (var i = 0; i < count; i++) { + var sentenceLength = this.randomInt(5, 10); + var words = this.createText(sentenceLength, Lorem.TYPE.WORD).split(' '); + words[0] = words[0].substr(0, 1).toUpperCase() + words[0].substr(1); + var sentence = words.join(' '); + + sentences.push(sentence); + } + return (sentences.join('. ') + '.').replace(/(\.\,|\,\.)/g, '.'); + break; + //words are words + case Lorem.TYPE.WORD: + var wordIndex = this.randomInt(0, Lorem.WORDS.length - count - 1); + + return Lorem.WORDS.slice(wordIndex, wordIndex + count).join(' ').replace(/\.|\,/g, ''); + break; + } + }; + Lorem.prototype.createLorem = function(element) { + + var lorem = new Array; + var count; + + if (/\d+-\d+[psw]/.test(this.query)){ + var range = this.query.replace(/[a-z]/,'').split("-"); + count = Math.floor(Math.random() * parseInt(range[1])) + parseInt(range[0]); + }else{ + count = parseInt(this.query); + } + + if (/\d+p/.test(this.query)) { + var type = Lorem.TYPE.PARAGRAPH; + } + else if (/\d+s/.test(this.query)) { + var type = Lorem.TYPE.SENTENCE; + } + else if (/\d+w/.test(this.query)) { + var type = Lorem.TYPE.WORD; + } + + lorem.push(this.createText(count, type)); + lorem = lorem.join(' '); + + if (element) { + if (this.type == Lorem.TEXT) + element.innerHTML += lorem; + else if (this.type == Lorem.IMAGE) { + //TODO: for now, using lorempixum. + var path = ''; + var options = this.query.split(' '); + if (options[0] == 'gray') { + path += '/g'; + options[0] = ''; + } + if (element.getAttribute('width')) + path += '/' + element.getAttribute('width'); + + if (element.getAttribute('height')) + path += '/' + element.getAttribute('height'); + + path += '/' + options.join(' ').replace(/(^\s+|\s+$)/, ''); + element.src = 'http://lorempixum.com'+path.replace(/\/\//, '/'); + } + } + + if (element == null) + return lorem; + }; + + //Register as jQuery + if (typeof jQuery != 'undefined') { + (function($) { + $.fn.lorem = function() { + $(this).each(function() { + var lorem = new Lorem; + lorem.type = $(this).is('img') ? Lorem.IMAGE : Lorem.TEXT; + //data-lorem can be taken with data function (thanks to http://forrst.com/people/webking) + lorem.query = $(this).data('lorem'); + lorem.createLorem(this); + }) + }; + + //If developer run this javascript, then we can run the lorem.js + $(document).ready(function() { + $('[data-lorem]').lorem(); + }); + })(jQuery); + } + +})(); \ No newline at end of file diff --git a/static/js/page.js b/static/js/page.js new file mode 100644 index 0000000..02fd0d2 --- /dev/null +++ b/static/js/page.js @@ -0,0 +1,161 @@ +// Smooth Scroll Init - Register click handler for ID anchors +$('a[href*="#"]:not(a[modal])').click(function () { + if (location.pathname.replace(/\/$/, "") == this.pathname.replace(/\/$/, "") && location.hostname == this.hostname) { + var target = $(this.hash); + target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); + if (target.length) { + var targetOffset = target.offset().top - $(".nav-bar__header").outerHeight(true); + // console.log(targetOffset, target.offset().top, $(".nav-bar__header").outerHeight()) + $('html, body').animate({ + scrollTop: targetOffset + }, 1000); + return false; + } + } +}); + +// navbar mobile toggle - preload +(function navbarInit() { + + function toggleMobileMenu() { + $('.nav-bar__menu')[0].style.transition = "max-height 0.5s"; + $('.nav-bar__menu')[0].classList.toggle("hide-menu"); + } + $('.nav-bar__menu-button, .nav-bar__menu-item > a').click(toggleMobileMenu) + +}()); + +// using an image for phone and toggle hide it +$('#cell').click(function () { $('#cell-number').toggleClass("hide"); }); +// $('#phone').click(function () { alert('phone clicked'); return false; }); + +function navbarSpacer() { + $('.nav-bar-spacer').css({ + height: $(".nav-bar__header").outerHeight(true), + }); +} + +// hero resizer +function heroResize(bfr = 30) { + var h = $(window).height() - $(".nav-bar__header").outerHeight(true), + w = $(window).width(), + fr = bfr * h / w + // console.log('w,h,fr', w, h, fr) + // minimum base font ratio + fr = (fr > bfr) ? bfr : fr + // adjust for short viewport height + fr = (w / h > 1 && h < 700) ? 30 * w / h : fr + //console.log('fr after', fr) + + $('#hero').css({ + width: w + 15, + height: h / w > 1.5 ? w * 1.5 : h, + }); + + var mf = w / h > 1 ? 0 : 12 + + $('#hero').flowtype({ + maxFont: 30, + minFont: mf, + fontRatio: fr + }); +} + +function typeResize(fr = 20) { + $('main:not(#hero)').flowtype({ + // maximum: 1000, + minFont: 12, + maxFont: 25, + fontRatio: fr + }) +} + +// Lightbox for Gallery + +function lightgallery(id) { + // Intialize all the media i.e. photos with "media" id + // TODO use Hugo params to initialize multiple galleries/albums + var lg = $(id).lightGallery({ + thumbnail: true, + thumbWidth: 80, + controls: true, + loop: false, + download: false, + counter: true, + // videojs: true + }); + + lg.on('onBeforeOpen.lg', function (event) { + $('.nav-bar').css("display", "none") + }); + + lg.on('onCloseAfter.lg', function (event) { + $('.nav-bar').css("display", "flex") + }); + +} + +// Modal tool. Must use modal template for content +(function ($) { + + // extend jquery so remove handlers can be added and removed at the right time in a group + $.fn.modalHandlers = function (state = 'on') { + + if (state === 'on') { + $(document).on('click', modalClickOutside); + $(document).keypress(modalEsc); + this.find('a[modal-close]').on('click', modalClickCloser); + return this + } + + if (state === 'off') { + $(document).off('click', modalClickOutside); + $(document).off('keypress', modalEsc); + this.find('a[modal-close]').off('click', modalClickCloser); + return this + } + + return false; + + }; + + // modal event handlers - add more if you want - add them to extension above + function modalEsc(event) { + if (event.key === "Escape") { modalHide() } + } + + function modalClickOutside(event) { + var container = $(".section__container--modal"); + if (!container.is(event.target) && // If the target of the click isn't the container... + container.has(event.target).length === 0) // ... nor a descendant of the container + { modalHide(); } + } + + function modalClickCloser(event) { + modalHide(); + } + + // modal show and hide + function modalShow(modal_hash) { + var closer = "" + $(modal_hash).find('.section__headline').append(closer).end().modalHandlers().addClass("current").css('display', 'flex'); + } + + function modalHide() { + $('.section--modal.current').hide().modalHandlers("off").removeClass("current").find('a[modal-close]').remove; + } + + // Register click event for all modal links on page + $("a[modal]").click(function () { + if (location.pathname.replace(/\/$/, "") == this.pathname.replace(/\/$/, "") && location.hostname == this.hostname) { + var target = this.hash; + modalShow(target); + } else { + alert(`modal display of off page content not supported`); + } + return false; + }); + +}(jQuery)); + +// end modal diff --git a/static/js/util.js b/static/js/util.js new file mode 100644 index 0000000..c29b5d1 --- /dev/null +++ b/static/js/util.js @@ -0,0 +1,6 @@ +function isMobile(a) { + return (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4))); +} + +// Call is +// isMobile(navigator.userAgent || navigator.vendor || window.opera) diff --git a/static/js/youtube.js b/static/js/youtube.js new file mode 100644 index 0000000..4a95ddd --- /dev/null +++ b/static/js/youtube.js @@ -0,0 +1,50 @@ +(function ($) { + + $(document).bind("DOMContentLoaded", + function () { + + var playBtn = '' + $('div[youtube_id]').each(function () { + if ($(this).attr('nothumb') !== "yes") { + var vid = $(this).attr('youtube_id'); + var bgi = `style="background-image: url(https://i.ytimg.com/vi/${vid}/mqdefault.jpg)"` + var thumb = `
    ` + $(this).append(thumb).children().append(playBtn).click(insertIframe).fitToWindow() + + } else { // if image thumbs turned off + insertIframe.call(this) + } + + }) + }) + + function insertIframe() { + var $box = $(this).parent() + var id = $box.attr('youtube_id') + var autoplay = "autoplay=1&" + if (!id) { // image thumb is off not called by thumb so don't need parent + $box = $(this) + id = $box.attr('youtube_id') + autoplay = "" + } + var mw = $box.attr('maxWidth'); + var wp = $box.attr('wPad'); + var start = $box.attr("start") || 1 + if ($box.attr("end")) { var end = "&end=" + $box.attr("end") } else { var end = "" } + var list = "" + if ($box.attr("list")) { list = `&list=${$box.attr("list")}` } + var url = `https://www.youtube.com/embed/${id}?${autoplay}start=${start}${end}` + var vIframe = `` + $box.html(vIframe).children().fitToWindow($box.data("maxWidth") || mw, $box.data("wPad") || wp) + } + +}(jQuery)); + +// TODO grab the video title as well as the thumb for use in thumb display +// only works if server allows cross domain like s3 +//http://stackoverflow.com/questions/1760231/how-do-i-get-the-title-of-a-youtube-video-if-i-have-the-video-id +// #var ytApiKey = "..."; +// #var videoId = "ylLzyHk54Z0"; +// #$.get("https://www.googleapis.com/youtube/v3/videos?part=snippet&id=" + videoId + "&key=" + ytApiKey, function(data) { +// #alert(data.items[0].snippet.title); +// # });