neff
/
neff-steindesign.de
1
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

Reformat documents

This commit is contained in:
Patrick Neff 2019-05-06 02:22:01 +02:00
parent 81bcbbb92f
commit a4f3ae2e52
50 changed files with 2315 additions and 2260 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
prettier.config.js Normal file
View File

@ -0,0 +1,7 @@
module.exports = {
trailingComma: "es5",
tabWidth: 2,
useTabs: false,
semi: false,
singleQuote: true
};

14
themes/neff/layouts/_default/baseof.html
View File

@ -13,7 +13,7 @@
{{- partial "schema/article.html" . -}} {{- partial "schema/article.html" . -}}
{{- end -}} {{- end -}}
{{- if (eq .Kind "section") -}} {{- if (eq .Kind "section") -}}
{{- partial "schema/collectionpage.html" . -}} {{- partial "schema/collectionPage.html" . -}}
{{- end -}} {{- end -}}
{{ partial "part/style.html" (dict "ctx" . "path" "css/style.css" )}} {{ partial "part/style.html" (dict "ctx" . "path" "css/style.css" )}}
<link rel="shortcut icon" href="/img/favicon.ico"> <link rel="shortcut icon" href="/img/favicon.ico">
@ -24,6 +24,7 @@
<meta name="msapplication-TileBackground" content="#000000"> <meta name="msapplication-TileBackground" content="#000000">
<meta name="msapplication-TileImage" content="/img/ms-tile.png"> <meta name="msapplication-TileImage" content="/img/ms-tile.png">
{{- block "head" . -}}{{- end -}} {{- block "head" . -}}{{- end -}}
<body> <body>
<div class="fixed-background background-{{ with .Params.background }}{{- . -}}{{- else -}}default{{- end -}}"></div> <div class="fixed-background background-{{ with .Params.background }}{{- . -}}{{- else -}}default{{- end -}}"></div>
<div id="header" class="large"> <div id="header" class="large">
@ -33,14 +34,16 @@
<div class="navbar-logo padding"> <div class="navbar-logo padding">
<a href="{{.Site.BaseURL }}"> <a href="{{.Site.BaseURL }}">
<picture> <picture>
<source srcset="/img/logo.svg" <source srcset="/img/logo.svg" media="(min-width: 48rem)">
media="(min-width: 48rem)">
<img src="/img/logo-klein.svg" alt="Logo der Firma Neff Stein-Design" /> <img src="/img/logo-klein.svg" alt="Logo der Firma Neff Stein-Design" />
</picture> </picture>
</a> </a>
</div> </div>
<div class="navbar small"> <div class="navbar small">
<input type="checkbox" class="hamburger" id="top-navigation-checkbox" name="top-navigation-checkbox"><label class="hamburger" for="top-navigation-checkbox"><span class="toggler"><span class="line"></span><span class="line"></span><span class="line"></span></span></label> <input type="checkbox" class="hamburger" id="top-navigation-checkbox"
name="top-navigation-checkbox"><label class="hamburger" for="top-navigation-checkbox"><span
class="toggler"><span class="line"></span><span class="line"></span><span
class="line"></span></span></label>
<div class="navbar-container"> <div class="navbar-container">
<nav> <nav>
<ul> <ul>
@ -164,4 +167,5 @@
{{ partial "part/script.html" (dict "ctx" . "path" "js/app.bundle.js")}} {{ partial "part/script.html" (dict "ctx" . "path" "js/app.bundle.js")}}
{{- block "scripts" . -}}{{- end -}} {{- block "scripts" . -}}{{- end -}}
</body> </body>
</html>
</html>

7
themes/neff/layouts/_default/li.html
View File

@ -8,13 +8,16 @@
{{ partial "figure.html" (dict "ctx" $currentPage "image" . "lightbox" false "class" "left round small")}} {{ partial "figure.html" (dict "ctx" $currentPage "image" . "lightbox" false "class" "left round small")}}
{{- end -}} {{- end -}}
{{- end -}} {{- end -}}
<a href="{{ .RelPermalink }}"><h4>{{ .Title }}</h4></a> <a href="{{ .RelPermalink }}">
<h4>{{ .Title }}</h4>
</a>
{{ .Summary }} {{ .Summary }}
{{- if .Truncated -}} {{- if .Truncated -}}
&nbsp;<a href="{{ .RelPermalink }}">{{ i18n "read-more" }}&#8230;</a> &nbsp;<a href="{{ .RelPermalink }}">{{ i18n "read-more" }}&#8230;</a>
{{- end -}} {{- end -}}
<footer> <footer>
<time class="list-item-lastmod" datetime='{{ .Lastmod.Format "2006-01-02T15:04-07:00" }}'>{{ .Lastmod.Format "02.01.2006 15:04" }}</time> <time class="list-item-lastmod"
datetime='{{ .Lastmod.Format "2006-01-02T15:04-07:00" }}'>{{ .Lastmod.Format "02.01.2006 15:04" }}</time>
</footer> </footer>
</div> </div>
</div> </div>

2
themes/neff/layouts/_default/list.html
View File

@ -1,5 +1,5 @@
{{- define "title" -}} {{- define "title" -}}
{{ .Title }} &bull; {{ .Site.Title }} {{ .Title }} &bull; {{ .Site.Title }}
{{- end -}} {{- end -}}
{{ define "main" }} {{ define "main" }}

5
themes/neff/layouts/_default/single.html
View File

@ -1,5 +1,5 @@
{{- define "title" -}} {{- define "title" -}}
{{ .Title }} &bull; {{ .Site.Title }} {{ .Title }} &bull; {{ .Site.Title }}
{{- end -}} {{- end -}}
{{- define "main" -}} {{- define "main" -}}
@ -24,7 +24,8 @@
{{- end -}} {{- end -}}
<footer class="single-footer padding"> <footer class="single-footer padding">
<p> <p>
<i class="fa fa-calendar"></i> <time datetime='{{ .Lastmod.Format "2006-01-02T15:04-07:00" }}'>{{ .Lastmod.Format "02.01.2006 15:04" }}</time> <i class="fa fa-calendar"></i> <time
datetime='{{ .Lastmod.Format "2006-01-02T15:04-07:00" }}'>{{ .Lastmod.Format "02.01.2006 15:04" }}</time>
</p> </p>
</footer> </footer>
</article> </article>

11
themes/neff/layouts/catalog/li.html
View File

@ -8,15 +8,16 @@
{{- $images = .Resources.ByType "image" -}} {{- $images = .Resources.ByType "image" -}}
{{- end -}} {{- end -}}
{{- range $images -}} {{- range $images -}}
{{ if .Params.featured }} {{ if .Params.featured }}
{{ $image = . }} {{ $image = . }}
{{ end }} {{ end }}
{{ end }} {{ end }}
{{ if $image }} {{ if $image }}
{{ else }} {{ else }}
{{ $image = index $images 0 }} {{ $image = index $images 0 }}
{{ end }} {{ end }}
{{ with $image }} {{ with $image }}
<li class="col-xs-6 col-sm-4"> {{- partial "figure.html" (dict "ctx" $ctx "image" . "class" "catalog" "showTitle" true "showDescription" true "showDetails" true "isOverlay" true) -}} <li class="col-xs-6 col-sm-4">
{{- partial "figure.html" (dict "ctx" $ctx "image" . "class" "catalog" "showTitle" true "showDescription" true "showDetails" true "isOverlay" true) -}}
</li> </li>
{{ end }} {{ end }}

22
themes/neff/layouts/catalog/single.html
View File

@ -1,5 +1,5 @@
{{- define "title" -}} {{- define "title" -}}
{{ .Title }} &bull; {{ .Site.Title }} {{ .Title }} &bull; {{ .Site.Title }}
{{- end -}} {{- end -}}
{{- define "main" -}} {{- define "main" -}}
@ -14,11 +14,15 @@
{{- $orig := . -}} {{- $orig := . -}}
{{ partial "figure.html" (dict "ctx" . "image" . "lightbox" true "class" "featured left wide" "showTitle" false "showDescription" false)}} {{ partial "figure.html" (dict "ctx" . "image" . "lightbox" true "class" "featured left wide" "showTitle" false "showDescription" false)}}
{{- end -}} {{- end -}}
{{ with .Params.offer }}<p class="offer"><a class="btn btn-secondary" href="{{ . }}">Angebot</a></p>{{ end }} {{ with .Params.offer }}
<p class="offer"><a class="btn btn-secondary" href="{{ . }}">Angebot</a></p>{{ end }}
<p class="type">Typ: {{ range $index, $value := .Params.used_for }}{{ if $index }}, {{end}}{{ . }}{{end}}</p> <p class="type">Typ: {{ range $index, $value := .Params.used_for }}{{ if $index }}, {{end}}{{ . }}{{end}}</p>
{{ with .Params.material }}<p class="material">Material: {{ . }}</p>{{ end }} {{ with .Params.material }}
{{ with .Params.ornament }}<p class="ornament">Ornament: {{ . }}</p>{{ end }} <p class="material">Material: {{ . }}</p>{{ end }}
{{ with .Params.description }}<p class="description">{{ . }}</p>{{ end }} {{ with .Params.ornament }}
<p class="ornament">Ornament: {{ . }}</p>{{ end }}
{{ with .Params.description }}
<p class="description">{{ . }}</p>{{ end }}
<p class="article-id">Art. Nr.: {{ .Params.article_id }}</p> <p class="article-id">Art. Nr.: {{ .Params.article_id }}</p>
{{ with .Content }} {{ with .Content }}
{{ . }} {{ . }}
@ -30,11 +34,11 @@
{{- end -}} {{- end -}}
{{- define "head" -}} {{- define "head" -}}
{{ partial "part/style.html" (dict "ctx" . "path" "css/catalog.css")}} {{ partial "part/style.html" (dict "ctx" . "path" "css/catalog.css")}}
{{- end -}} {{- end -}}
{{- define "scripts" -}} {{- define "scripts" -}}
{{ partial "part/script.html" (dict "ctx" . "path" "js/three.bundle.js")}} {{ partial "part/script.html" (dict "ctx" . "path" "js/three.bundle.js")}}
{{ partial "part/script.html" (dict "ctx" . "path" "js/vue.bundle.js")}} {{ partial "part/script.html" (dict "ctx" . "path" "js/vue.bundle.js")}}
{{ partial "part/script.html" (dict "ctx" . "path" "js/catalog.bundle.js")}} {{ partial "part/script.html" (dict "ctx" . "path" "js/catalog.bundle.js")}}
{{- end -}} {{- end -}}

11
themes/neff/layouts/gallery/li.html
View File

@ -8,15 +8,16 @@
{{- $images = .Resources.ByType "image" -}} {{- $images = .Resources.ByType "image" -}}
{{- end -}} {{- end -}}
{{- range $images -}} {{- range $images -}}
{{ if .Params.featured }} {{ if .Params.featured }}
{{ $image = . }} {{ $image = . }}
{{ end }} {{ end }}
{{ end }} {{ end }}
{{ if $image }} {{ if $image }}
{{ else }} {{ else }}
{{ $image = index $images 0 }} {{ $image = index $images 0 }}
{{ end }} {{ end }}
{{ with $image }} {{ with $image }}
<li class="col-xs-6 col-sm-4"> {{- partial "figure.html" (dict "ctx" $ctx "image" . "class" "catalog" "showTitle" true "showDescription" true) -}} <li class="col-xs-6 col-sm-4">
{{- partial "figure.html" (dict "ctx" $ctx "image" . "class" "catalog" "showTitle" true "showDescription" true) -}}
</li> </li>
{{ end }} {{ end }}

2
themes/neff/layouts/gallery/list.html
View File

@ -1,5 +1,5 @@
{{- define "title" -}} {{- define "title" -}}
{{ .Title }} &bull; {{ .Site.Title }} {{ .Title }} &bull; {{ .Site.Title }}
{{- end -}} {{- end -}}
{{ define "main" }} {{ define "main" }}

15
themes/neff/layouts/index.html
View File

@ -1,5 +1,5 @@
{{ define "content" }} {{ define "content" }}
<div id="index"> <div id="index">
<div class="container transparent"> <div class="container transparent">
<div class="row"> <div class="row">
<div class="col-xs-12 col-offset-sm-8 col-sm-4" id="index-short-contact"> <div class="col-xs-12 col-offset-sm-8 col-sm-4" id="index-short-contact">
@ -33,7 +33,9 @@
<div class="container"> <div class="container">
<section id="index-hero"> <section id="index-hero">
<a class="anchor" id="{{ i18n "about-us" }}"><h1 class="padding">{{ (replace (replace (i18n "about-us") "-" " ") "ue" "ü") | title}}</h1></a> <a class="anchor" id="{{ i18n "about-us" }}">
<h1 class="padding">{{ (replace (replace (i18n "about-us") "-" " ") "ue" "ü") | title}}</h1>
</a>
<ul class="list-unstyled row"> <ul class="list-unstyled row">
{{- range .Params.about_us }} {{- range .Params.about_us }}
<li class="col-xs-12 col-sm-4"> <li class="col-xs-12 col-sm-4">
@ -50,7 +52,9 @@
<div class="container"> <div class="container">
<section class="row" id="index-contact"> <section class="row" id="index-contact">
<div class="col-xs-12"> <div class="col-xs-12">
<a class="anchor" id="{{ i18n "contact" }}"><h1 class="padding">Kontakt</h1></a> <a class="anchor" id="{{ i18n "contact" }}">
<h1 class="padding">Kontakt</h1>
</a>
<div class="call-to-action flex row text-center"> <div class="call-to-action flex row text-center">
<div class="padding"> <div class="padding">
<a class="btn btn-primary" href="mailto:{{ .Site.Author.email }}">{{ i18n "send-mail" }}</a> <a class="btn btn-primary" href="mailto:{{ .Site.Author.email }}">{{ i18n "send-mail" }}</a>
@ -95,7 +99,8 @@
<div class="container"> <div class="container">
<section class="row" id="index-news"> <section class="row" id="index-news">
<h1 class="col-xs-12 padding"><a class="anchor" href="/neuigkeiten" id="{{ i18n "news" }}">{{ i18n "news" | title}}</a></h1> <h1 class="col-xs-12 padding"><a class="anchor" href="/neuigkeiten"
id="{{ i18n "news" }}">{{ i18n "news" | title}}</a></h1>
<div class="col-xs-12"> <div class="col-xs-12">
<ul class="list-unstyled row"> <ul class="list-unstyled row">
{{- range (first 3 (where .Site.Pages.ByWeight ".Params.type" "news")) -}} {{- range (first 3 (where .Site.Pages.ByWeight ".Params.type" "news")) -}}
@ -126,6 +131,6 @@
</section> </section>
</div> </div>
{{- end -}} {{- end -}}
</div> </div>
{{ end }} {{ end }}

4
themes/neff/layouts/partials/address.html
View File

@ -44,5 +44,7 @@
{{- end -}} {{- end -}}
{{ partial "schema/localbusiness.html" (dict "contact" .address "ctx" .ctx "short" false) }} {{ partial "schema/localbusiness.html" (dict "contact" .address "ctx" .ctx "short" false) }}
</address> </address>
<a href="https://maps.openrouteservice.org/directions?n1={{ .address.geo.lat }}&n2={{ .address.geo.lon }}&n3=13&a=null,null,{{ .address.geo.lat }},{{ .address.geo.lon }}&b=0&k1=de-DE&k2=km"><i class="fa fa-map"></i> Zum Routenplaner</a> <a
href="https://maps.openrouteservice.org/directions?n1={{ .address.geo.lat }}&n2={{ .address.geo.lon }}&n3=13&a=null,null,{{ .address.geo.lat }},{{ .address.geo.lon }}&b=0&k1=de-DE&k2=km"><i
class="fa fa-map"></i> Zum Routenplaner</a>
</section> </section>

3
themes/neff/layouts/partials/breadcrumbs.html
View File

@ -9,7 +9,8 @@
{{ template "breadcrumbnav" (dict "p1" .p1.Site.Home "p2" .p2 ) }} {{ template "breadcrumbnav" (dict "p1" .p1.Site.Home "p2" .p2 ) }}
{{ end }} {{ end }}
<li class="{{ if eq .p1 .p2 }} active{{ end }}"> <li class="{{ if eq .p1 .p2 }} active{{ end }}">
<a href="{{ .p1.Permalink }}">{{ if .p1.IsHome }}Startseite{{ else }}{{ .p1.Title }}{{ end }}</a>{{ if ne .p1 .p2 }} <i class="fa fa-chevron-right"></i>{{ end }} <a href="{{ .p1.Permalink }}">{{ if .p1.IsHome }}Startseite{{ else }}{{ .p1.Title }}{{ end }}</a>{{ if ne .p1 .p2 }}
<i class="fa fa-chevron-right"></i>{{ end }}
</li> </li>
{{ end }} {{ end }}
</nav> </nav>

9
themes/neff/layouts/partials/figure.html
View File

@ -8,8 +8,9 @@
{{- $imgClass := .imgClass -}} {{- $imgClass := .imgClass -}}
{{- $href := .ctx.Params.href }} {{- $href := .ctx.Params.href }}
<figure {{- with .class }} class="{{ . }}"{{- end -}}> <figure {{- with .class }} class="{{ . }}" {{- end -}}>
<a href="{{- with $href -}}{{ . }}{{ else }}{{ .ctx.RelPermalink }}{{ end }}"{{- with .lightbox }} data-lightbox{{- end -}}> <a href="{{- with $href -}}{{ . }}{{ else }}{{ .ctx.RelPermalink }}{{ end }}" {{- with .lightbox }}
data-lightbox{{- end -}}>
{{- partial "img.html" (dict "image" .image "ctx" .ctx "keepOriginal" $keep "class" $imgClass) -}} {{- partial "img.html" (dict "image" .image "ctx" .ctx "keepOriginal" $keep "class" $imgClass) -}}
</a> </a>
{{ with .ctx.Params.offer }} {{ with .ctx.Params.offer }}
@ -22,7 +23,9 @@
<figcaption class="description{{ if .isOverlay }} overlay hidden{{ end }}"> <figcaption class="description{{ if .isOverlay }} overlay hidden{{ end }}">
{{- if .showTitle -}} {{- if .showTitle -}}
{{- if $href -}} {{- if $href -}}
<a href="{{$href}}"><h3>{{ $title }}</h3></a> <a href="{{$href}}">
<h3>{{ $title }}</h3>
</a>
{{- else -}} {{- else -}}
<h3>{{ $title }}</h3> <h3>{{ $title }}</h3>
{{- end -}} {{- end -}}

22
themes/neff/layouts/partials/img.html
View File

@ -1,31 +1,25 @@
{{ $keep := .keepOriginal}} {{ $keep := .keepOriginal}}
{{- $title := .ctx.Name -}} {{- $title := .ctx.Name -}}
{{- with .ctx.Title -}} {{- with .ctx.Title -}}
{{- $title = . -}} {{- $title = . -}}
{{- end -}} {{- end -}}
{{- $alt := $title -}} {{- $alt := $title -}}
{{- with .ctx.Params.alt -}} {{- with .ctx.Params.alt -}}
{{- $alt = . -}} {{- $alt = . -}}
{{- end -}} {{- end -}}
{{ $class := "" }} {{ $class := "" }}
{{- with .class -}} {{- with .class -}}
{{- $class = . -}} {{- $class = . -}}
{{- end -}} {{- end -}}
{{- $ctx := .ctx -}} {{- $ctx := .ctx -}}
{{ with .image }} {{ with .image }}
{{ if eq $keep true }} {{ if eq $keep true }}
<img alt="{{ $alt }}" <img alt="{{ $alt }}" title="{{ $title }}" class="original {{ $class }}" src="{{ .RelPermalink }}" />
title="{{ $title }}"
class="original {{ $class }}"
src="{{ .RelPermalink }}" />
{{ else }} {{ else }}
{{- $imageSm := .Fill "300x300 Top" -}} {{- $imageSm := .Fill "300x300 Top" -}}
{{- $imageMd := .Fill "500x500 Top" -}} {{- $imageMd := .Fill "500x500 Top" -}}
<img alt="{{ $alt }}" <img alt="{{ $alt }}" title="{{ $title }}" class="{{ $class }}"
title="{{ $title }}" srcset="{{ $imageSm.RelPermalink }} 300w, {{ $imageMd.RelPermalink }} 500w" sizes="(min-width: 48rem) 300px, 500px"
class="{{ $class }}"
srcset="{{ $imageSm.RelPermalink }} 300w, {{ $imageMd.RelPermalink }} 500w"
sizes="(min-width: 48rem) 300px, 500px"
src="{{ $imageMd.RelPermalink }}" /> src="{{ $imageMd.RelPermalink }}" />
{{ end }} {{ end }}
{{- partial "schema/img.html" (dict "image" . "ctx" $ctx) -}} {{- partial "schema/img.html" (dict "image" . "ctx" $ctx) -}}

8
themes/neff/layouts/partials/menu-item.html
View File

@ -1,18 +1,18 @@
{{- $currentPage := .ctx -}} {{- $currentPage := .ctx -}}
{{- $link := .item -}} {{- $link := .item -}}
{{- if (eq .item.Identifier "copyright") -}} {{- if (eq .item.Identifier "copyright") -}}
<li> <li>
<a href="{{ .item.URL }}"> <a href="{{ .item.URL }}">
<span>&copy; {{ $currentPage.Site.Copyright }}</span> <span>&copy; {{ $currentPage.Site.Copyright }}</span>
</a> </a>
</li> </li>
{{- else -}} {{- else -}}
<li class="{{ if $currentPage.HasMenuCurrent .item.Menu .item }}active{{ end }}"> <li class="{{ if $currentPage.HasMenuCurrent .item.Menu .item }}active{{ end }}">
{{- if ne .item.Title "" -}} {{- if ne .item.Title "" -}}
<a href="{{ .item.URL }}"> <a href="{{ .item.URL }}">
{{ $link.Pre }} {{ $link.Pre }}
<span>{{ $link.Name }}</span> <span>{{ $link.Name }}</span>
</a> </a>
{{- end -}} {{- end -}}
</li> </li>
{{- end -}} {{- end -}}

10
themes/neff/layouts/partials/part/script.html
View File

@ -1,7 +1,7 @@
{{- $js := resources.Get .path -}} {{- $js := resources.Get .path -}}
{{ if .ctx.Site.IsServer }} {{ if .ctx.Site.IsServer }}
<script src="{{ $js.RelPermalink }}"></script> <script src="{{ $js.RelPermalink }}"></script>
{{ else }} {{ else }}
{{- $js = $js | resources.Fingerprint -}} {{- $js = $js | resources.Fingerprint -}}
<script src="{{ $js.RelPermalink }}" integrity="{{ $js.Data.Integrity }}"></script> <script src="{{ $js.RelPermalink }}" integrity="{{ $js.Data.Integrity }}"></script>
{{ end }} {{ end }}

68
themes/neff/layouts/shortcodes/gallery.html
View File

@ -4,46 +4,46 @@
{{- $description := true -}} {{- $description := true -}}
{{- $lightbox := true -}} {{- $lightbox := true -}}
{{- if .IsNamedParams -}} {{- if .IsNamedParams -}}
{{- with .Get "search" -}} {{- with .Get "search" -}}
{{ $search = . }} {{ $search = . }}
{{- end -}} {{- end -}}
{{- with .Get "original" -}} {{- with .Get "original" -}}
{{- $keep = true }} {{- $keep = true }}
{{- end -}} {{- end -}}
{{- with .Get "title" -}} {{- with .Get "title" -}}
{{ $title = . }} {{ $title = . }}
{{- end -}} {{- end -}}
{{- $description := true -}} {{- $description := true -}}
{{ with .Get "description" -}} {{ with .Get "description" -}}
{{- end -}} {{- end -}}
{{- with .Get "lightbox" -}} {{- with .Get "lightbox" -}}
{{ $lightbox = true }} {{ $lightbox = true }}
{{- end -}} {{- end -}}
{{- else -}} {{- else -}}
{{- with .Get 0 -}} {{- with .Get 0 -}}
{{ $search = . }} {{ $search = . }}
{{- end -}} {{- end -}}
{{- with .Get 1 -}} {{- with .Get 1 -}}
{{ $title = . }} {{ $title = . }}
{{- end -}} {{- end -}}
{{- with .Get 2 -}} {{- with .Get 2 -}}
{{ $description = . }} {{ $description = . }}
{{- end -}} {{- end -}}
{{- with .Get 3 -}} {{- with .Get 3 -}}
{{ $keep = true }} {{ $keep = true }}
{{- end -}} {{- end -}}
{{- with .Get 4 -}} {{- with .Get 4 -}}
{{ $lightbox = true }} {{ $lightbox = true }}
{{- end -}} {{- end -}}
{{- end -}} {{- end -}}
<div class="clearfix"></div> <div class="clearfix"></div>
{{ with .Inner }} {{ with .Inner }}
<ul class="list-unstyled row gallery"> <ul class="list-unstyled row gallery">
{{ . }} {{ . }}
</ul> </ul>
{{ else }} {{ else }}
<ul class="list-unstyled row gallery"> <ul class="list-unstyled row gallery">
{{ range $.Page.Resources.Match $search }} {{ range $.Page.Resources.Match $search }}
{{- if (ne .Params.featured true) -}} {{- if (ne .Params.featured true) -}}
<li class="col-xs-6 col-sm-4"> <li class="col-xs-6 col-sm-4">
@ -51,5 +51,5 @@
</li> </li>
{{- end -}} {{- end -}}
{{- end -}} {{- end -}}
</ul> </ul>
{{- end -}} {{- end -}}

78
themes/neff/layouts/shortcodes/image.html
View File

@ -8,48 +8,48 @@
{{ $showDescription := true }} {{ $showDescription := true }}
{{ $list := false }} {{ $list := false }}
{{ if .IsNamedParams }} {{ if .IsNamedParams }}
{{ with .Get "search" }} {{ with .Get "search" }}
{{ $search = .}} {{ $search = .}}
{{ end }} {{ end }}
{{ with .Get "class" }} {{ with .Get "class" }}
{{ $class = .}} {{ $class = .}}
{{ end }} {{ end }}
{{ with .Get "title" }} {{ with .Get "title" }}
{{ $title = .}} {{ $title = .}}
{{ end }} {{ end }}
{{ with .Get "description" }} {{ with .Get "description" }}
{{ $description = .}} {{ $description = .}}
{{ end }} {{ end }}
{{ with .Get "alt" }} {{ with .Get "alt" }}
{{ $alt = .}} {{ $alt = .}}
{{ else }}
{{ $alt = $description}}
{{ end }}
{{ with .Get "lightbox" }}
{{ $lightbox = .}}
{{ end }}
{{ with .Get "showTitle" }}
{{ $showTitle = .}}
{{ end }}
{{ with .Get "showDescription" }}
{{ $showTitle = .}}
{{ end }}
{{ with .Get "list" }}
{{ $list = .}}
{{ end }}
{{ else }} {{ else }}
{{ with .Get 0 }} {{ $alt = $description}}
{{ $search = . }} {{ end }}
{{ end }} {{ with .Get "lightbox" }}
{{ with .Get 1 }} {{ $lightbox = .}}
{{ $class = . }} {{ end }}
{{ end }} {{ with .Get "showTitle" }}
{{ $showTitle = .}}
{{ end }}
{{ with .Get "showDescription" }}
{{ $showTitle = .}}
{{ end }}
{{ with .Get "list" }}
{{ $list = .}}
{{ end }}
{{ else }}
{{ with .Get 0 }}
{{ $search = . }}
{{ end }}
{{ with .Get 1 }}
{{ $class = . }}
{{ end }}
{{ end }} {{ end }}
{{ $image := $.Page.Resources.GetMatch $search }} {{ $image := $.Page.Resources.GetMatch $search }}
{{ if $list }} {{ if $list }}
<li class="col-xs-6 col-sm-4 padding"> <li class="col-xs-6 col-sm-4 padding">
{{ end }} {{ end }}
{{ partial "figure.html" (dict "image" $image "ctx" $image "class" $class "lightbox" $lightbox "showTitle" $showTitle "showDescription" $showDescription) }} {{ partial "figure.html" (dict "image" $image "ctx" $image "class" $class "lightbox" $lightbox "showTitle" $showTitle "showDescription" $showDescription) }}
{{ if $list }} {{ if $list }}
</li> </li>
{{ end }} {{ end }}

15
themes/neff/src/js/catalog.js
View File

@ -1,12 +1,12 @@
import Vue from "vue" import Vue from 'vue'
import CatalogArticle from "../vue/CatalogArticle.vue" import CatalogArticle from '../vue/CatalogArticle.vue'
import ModelViewer from "../vue/ModelViewer.vue" import ModelViewer from '../vue/ModelViewer.vue'
import store from "../vue/catalogArticle.store.js" import store from '../vue/catalogArticle.store.js'
let modelViewerRoot = document.getElementById('model-viewer-root') let modelViewerRoot = document.getElementById('model-viewer-root')
if (modelViewerRoot) { if (modelViewerRoot) {
new Vue({ new Vue({
store, store,
render: function(h) { render: function(h) {
@ -14,11 +14,10 @@ let modelViewerRoot = document.getElementById('model-viewer-root')
}, },
beforeMount() { beforeMount() {
this.modelUrl = this.$el.dataset.url this.modelUrl = this.$el.dataset.url
} },
}).$mount(modelViewerRoot) }).$mount(modelViewerRoot)
} }
let catalogArticle = document.getElementById('catalog-article') let catalogArticle = document.getElementById('catalog-article')
if (catalogArticle) { if (catalogArticle) {
new Vue({ new Vue({
@ -28,6 +27,6 @@ if (catalogArticle) {
}, },
beforeMount() { beforeMount() {
this.modelUrl = this.$el.dataset.url this.modelUrl = this.$el.dataset.url
} },
}).$mount(catalogArticle) }).$mount(catalogArticle)
} }

9
themes/neff/src/js/catalogSimilar.js
View File

@ -1,9 +0,0 @@
import Vue from "vue"
import CatalogSimilar from "../vue/CatalogSimilar.vue"
import wrap from '@vue/web-component-wrapper'
const myCatalogSimilar = wrap(Vue, CatalogSimilar)
window.customElements.define('my-catalog-similar', myCatalogSimilar)

98
themes/neff/src/js/cookies.js
View File

@ -1,86 +1,102 @@
import 'cookieconsent' import 'cookieconsent'
var gaDisableStr = 'ga-disable-' + $googleAnalytics
var gaDisableStr = 'ga-disable-' + $googleAnalytics;
function disableGoogleAnalytics() { function disableGoogleAnalytics() {
if (document.cookie.indexOf(gaDisableStr + '=true') > -1) { if (document.cookie.indexOf(gaDisableStr + '=true') > -1) {
window[gaDisableStr] = true; window[gaDisableStr] = true
} }
document.cookie = gaDisableStr + '=true; expires=Thu, 31 Dec 2099 23:59:59 UTC; path=/'; document.cookie =
window[gaDisableStr] = true; gaDisableStr + '=true; expires=Thu, 31 Dec 2099 23:59:59 UTC; path=/'
window[gaDisableStr] = true
} }
function enableGoogleAnalytics() { function enableGoogleAnalytics() {
var dnt = (navigator.doNotTrack || window.doNotTrack || navigator.msDoNotTrack); var dnt = navigator.doNotTrack || window.doNotTrack || navigator.msDoNotTrack
var doNotTrack = (dnt == "1" || dnt == "yes"); var doNotTrack = dnt == '1' || dnt == 'yes'
if (!doNotTrack) { if (!doNotTrack) {
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ ;(function(i, s, o, g, r, a, m) {
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), i['GoogleAnalyticsObject'] = r
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) ;(i[r] =
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); i[r] ||
ga('create', $googleAnalytics, 'auto'); function() {
ga('set', 'anonymizeIp', true); ;(i[r].q = i[r].q || []).push(arguments)
ga('send', 'pageview'); }),
(i[r].l = 1 * new Date())
;(a = s.createElement(o)), (m = s.getElementsByTagName(o)[0])
a.async = 1
a.src = g
m.parentNode.insertBefore(a, m)
})(
window,
document,
'script',
'https://www.google-analytics.com/analytics.js',
'ga'
)
ga('create', $googleAnalytics, 'auto')
ga('set', 'anonymizeIp', true)
ga('send', 'pageview')
} }
} }
function setupGoogleAnalytics(status) { function setupGoogleAnalytics(status) {
if (status === 'allow' || status === 'dismiss') { if (status === 'allow' || status === 'dismiss') {
enableGoogleAnalytics(); enableGoogleAnalytics()
} }
if (status === 'deny') { if (status === 'deny') {
disableGoogleAnalytics(); disableGoogleAnalytics()
} }
} }
window.addEventListener('load', function() {
window.addEventListener("load", function () {
window.cookieconsent.initialise({ window.cookieconsent.initialise({
palette: { palette: {
popup: { popup: {
background: "#efefef", background: '#efefef',
text: "#000" text: '#000',
}, },
button: { button: {
background: "#2d763a", background: '#2d763a',
text: "#ffffff" text: '#ffffff',
}
}, },
theme: "classic", },
type: "opt-out", theme: 'classic',
type: 'opt-out',
content: { content: {
message: "Diese Webseite nutzt Cookies zur Verbesserung des Erlebnisses unserer Besucher.<br>Indem Sie weiterhin auf dieser Webseite navigieren, erklären Sie sich mit der Verwendung von Cookies einverstanden. Die Nutzung von externen Cookies kann unterbunden werden.", message:
dismiss: "OK", 'Diese Webseite nutzt Cookies zur Verbesserung des Erlebnisses unserer Besucher.<br>Indem Sie weiterhin auf dieser Webseite navigieren, erklären Sie sich mit der Verwendung von Cookies einverstanden. Die Nutzung von externen Cookies kann unterbunden werden.',
allow: "Erlauben", dismiss: 'OK',
deny: "Verbieten", allow: 'Erlauben',
href: "/datenschutz", deny: 'Verbieten',
link: "Datenschutzbestimmung", href: '/datenschutz',
policy: "Cookie Vereinbarung" link: 'Datenschutzbestimmung',
policy: 'Cookie Vereinbarung',
}, },
dismissOnScroll: 600, dismissOnScroll: 600,
onInitialise: function (status) { onInitialise: function(status) {
setupGoogleAnalytics(status) setupGoogleAnalytics(status)
}, },
onStatusChange: function (status) { onStatusChange: function(status) {
if (status === 'allow' || status === 'dismiss') { if (status === 'allow' || status === 'dismiss') {
if (document.cookie.indexOf(gaDisableStr + '=true') > -1) { if (document.cookie.indexOf(gaDisableStr + '=true') > -1) {
window[gaDisableStr] = false; window[gaDisableStr] = false
document.cookie = gaDisableStr + '=true; expires=Thu, 31 Dec 1970 23:59:59 UTC; path=/'; document.cookie =
gaDisableStr +
'=true; expires=Thu, 31 Dec 1970 23:59:59 UTC; path=/'
} }
} }
setupGoogleAnalytics(status) setupGoogleAnalytics(status)
}, },
}) })
}); })
var gaOptOut = document.querySelector('a.ga-optout') var gaOptOut = document.querySelector('a.ga-optout')
if (gaOptOut !== null) { if (gaOptOut !== null) {
gaOptOut.addEventListener('click', (e) => { gaOptOut.addEventListener('click', e => {
e.preventDefault(); e.preventDefault()
disableGoogleAnalytics(); disableGoogleAnalytics()
}) })
} }

6
themes/neff/src/js/gallery.js
View File

@ -1,6 +1,6 @@
function showOverlay(el) { function showOverlay(el) {
if (el) { if (el) {
let classes = el.className; let classes = el.className
if (classes.indexOf('hidden') !== -1) { if (classes.indexOf('hidden') !== -1) {
el.className = classes.replace(/ ?hidden ?/, '') el.className = classes.replace(/ ?hidden ?/, '')
} }
@ -9,7 +9,7 @@ function showOverlay(el) {
function hideOverlay(el) { function hideOverlay(el) {
if (el) { if (el) {
let classes = el.className; let classes = el.className
if (classes.indexOf('hidden') === -1) { if (classes.indexOf('hidden') === -1) {
el.className = classes + ' hidden' el.className = classes + ' hidden'
} }
@ -27,7 +27,7 @@ function toggleOverlay(el) {
} }
function addListeners(el, overlay) { function addListeners(el, overlay) {
var isTouchSupported = "ontouchend" in document; var isTouchSupported = 'ontouchend' in document
if (isTouchSupported) { if (isTouchSupported) {
el.addEventListener('touchstart', ev => { el.addEventListener('touchstart', ev => {
ev.preventDefault() ev.preventDefault()

6
themes/neff/src/js/images.js
View File

@ -1,2 +1,4 @@
function requireAll(r) { r.keys().forEach(r); } function requireAll(r) {
requireAll(require.context('../img/', true, /\.(png|gif|jpg|jpeg|svg)$/)); r.keys().forEach(r)
}
requireAll(require.context('../img/', true, /\.(png|gif|jpg|jpeg|svg)$/))

85
themes/neff/src/js/lightbox.js
View File

@ -1,19 +1,19 @@
const container = document.querySelector('#lightbox-section'); const container = document.querySelector('#lightbox-section')
const template = document.querySelector('#lightbox-template') const template = document.querySelector('#lightbox-template')
const images = document.querySelectorAll('a[data-lightbox]') const images = document.querySelectorAll('a[data-lightbox]')
const lightboxes = []; const lightboxes = []
class Lightbox { class Lightbox {
constructor(idx) { constructor(idx) {
this.idx = idx this.idx = idx
this.element = images[idx]; this.element = images[idx]
this.figure = this.element.parentElement; this.figure = this.element.parentElement
this.image = this.figure.querySelector('img'); this.image = this.figure.querySelector('img')
if(this.image === null) { if (this.image === null) {
this.figure = this.element.parentElement.parentElement; this.figure = this.element.parentElement.parentElement
this.image = this.figure.querySelector('img'); this.image = this.figure.querySelector('img')
} }
this.title = this.figure.querySelector('h3') this.title = this.figure.querySelector('h3')
this.title = this.image.getAttribute('title') this.title = this.image.getAttribute('title')
@ -24,7 +24,7 @@ class Lightbox {
this.href = this.element.getAttribute('href') this.href = this.element.getAttribute('href')
this.alt = this.image.getAttribute('alt') this.alt = this.image.getAttribute('alt')
this.template = template.cloneNode(true); this.template = template.cloneNode(true)
} }
update() { update() {
@ -35,66 +35,67 @@ class Lightbox {
calcSurrounding() { calcSurrounding() {
if (images.length > 1) { if (images.length > 1) {
this.prev = this.idx - 1; this.prev = this.idx - 1
this.next = this.idx + 1; this.next = this.idx + 1
if (this.prev === -1) { if (this.prev === -1) {
this.prev = images.length - 1; this.prev = images.length - 1
} }
if (this.next === images.length) { if (this.next === images.length) {
this.next = 0; this.next = 0
} }
} }
} }
updateTemplate() { updateTemplate() {
// Update template // Update template
container.innerHTML = this.template.innerHTML; container.innerHTML = this.template.innerHTML
let lightbox = container.querySelector('#lightbox'); let lightbox = container.querySelector('#lightbox')
let img = lightbox.querySelector('img'); let img = lightbox.querySelector('img')
img.setAttribute('src', this.href); img.setAttribute('src', this.href)
img.setAttribute('alt', this.alt); img.setAttribute('alt', this.alt)
let title = lightbox.querySelector('.lightbox-title'); let title = lightbox.querySelector('.lightbox-title')
let description = lightbox.querySelector('.lightbox-footer'); let description = lightbox.querySelector('.lightbox-footer')
if (this.title !== null) { if (this.title !== null) {
title.innerHTML = this.title; title.innerHTML = this.title
} } else {
else { title.innerHtml = this.alt
title.innerHtml = this.alt;
} }
if (this.description !== null) { if (this.description !== null) {
description.innerHTML = this.description; description.innerHTML = this.description
} } else {
else { description.innerHTML = this.alt
description.innerHTML = this.alt;
} }
} }
addEventListeners() { addEventListeners() {
// Close with click outside of .lightbox-container // Close with click outside of .lightbox-container
let lightboxContainer = lightbox.querySelector('div.lightbox-container'); let lightboxContainer = lightbox.querySelector('div.lightbox-container')
lightbox.addEventListener('click', (e) => { lightbox.addEventListener('click', e => {
if (!lightboxContainer.contains(e.target)) { if (!lightboxContainer.contains(e.target)) {
container.innerHTML = ''; container.innerHTML = ''
} }
}) })
// Close with click on .lightbox-close link // Close with click on .lightbox-close link
let lightboxClose = lightbox.querySelector('a.lightbox-close'); let lightboxClose = lightbox.querySelector('a.lightbox-close')
lightboxClose.addEventListener('click', () => { lightboxClose.addEventListener('click', () => {
container.innerHTML = ''; container.innerHTML = ''
}) })
// Previous image with click on .lightbox-prev link // Previous image with click on .lightbox-prev link
let lightboxPrev = lightbox.querySelectorAll('a.lightbox-prev').forEach((el) => { let lightboxPrev = lightbox
.querySelectorAll('a.lightbox-prev')
.forEach(el => {
el.addEventListener('click', () => { el.addEventListener('click', () => {
lightboxes[this.prev].update(); lightboxes[this.prev].update()
}) })
}) })
// Next image with click on .lightbox-next link // Next image with click on .lightbox-next link
let lightboxNext = lightbox.querySelectorAll('a.lightbox-next').forEach((el) => { let lightboxNext = lightbox
.querySelectorAll('a.lightbox-next')
.forEach(el => {
el.addEventListener('click', () => { el.addEventListener('click', () => {
lightboxes[this.next].update(); lightboxes[this.next].update()
}) })
}) })
} }
@ -104,11 +105,11 @@ function main() {
for (let i = 0; i < images.length; i++) { for (let i = 0; i < images.length; i++) {
lightboxes.push(new Lightbox(i)) lightboxes.push(new Lightbox(i))
images[i].addEventListener('click', (e) => { images[i].addEventListener('click', e => {
e.preventDefault(); e.preventDefault()
lightboxes[i].update(); lightboxes[i].update()
}) })
} }
} }
main(); main()

35
themes/neff/src/js/scrollspy.js
View File

@ -1,45 +1,44 @@
const header = document.querySelector('#header'); const header = document.querySelector('#header')
const scrollPosition = 50; const scrollPosition = 50
const menuLinks = document.querySelectorAll('.menu-list li a'); const menuLinks = document.querySelectorAll('.menu-list li a')
const checkbox = document.querySelector('#top-navigation-checkbox'); const checkbox = document.querySelector('#top-navigation-checkbox')
const banner = document.querySelector('#banner'); const banner = document.querySelector('#banner')
let lastScrollPosition = 0; let lastScrollPosition = 0
window.addEventListener('scroll', (e) => { window.addEventListener('scroll', e => {
let st = window.pageYOffset || document.documentElement.scrollTop; let st = window.pageYOffset || document.documentElement.scrollTop
if (st > lastScrollPosition && st > scrollPosition) { if (st > lastScrollPosition && st > scrollPosition) {
header.classList.add('small') header.classList.add('small')
header.classList.remove('large') header.classList.remove('large')
header.classList.add('hidden') header.classList.add('hidden')
if(banner !== null) { if (banner !== null) {
banner.classList.add('hidden') banner.classList.add('hidden')
} }
checkbox.checked = false; checkbox.checked = false
} } else {
else {
if (st < scrollPosition) { if (st < scrollPosition) {
header.classList.add('large') header.classList.add('large')
header.classList.remove('small') header.classList.remove('small')
if(banner !== null) { if (banner !== null) {
banner.classList.remove('hidden') banner.classList.remove('hidden')
} }
} }
if (st < lastScrollPosition) { if (st < lastScrollPosition) {
setTimeout(() => { setTimeout(() => {
header.classList.remove('hidden') header.classList.remove('hidden')
}, 500); }, 500)
} }
if (st > lastScrollPosition && st > scrollPosition) { if (st > lastScrollPosition && st > scrollPosition) {
header.classList.add('hidden') header.classList.add('hidden')
} }
} }
lastScrollPosition = window.pageYOffset || document.documentElement.scrollTop; lastScrollPosition = window.pageYOffset || document.documentElement.scrollTop
}); })
menuLinks.forEach((el) => { menuLinks.forEach(el => {
el.addEventListener('click', () => { el.addEventListener('click', () => {
checkbox.checked = false; checkbox.checked = false
}) })
}) })

90
themes/neff/src/scss/_app.scss
View File

@ -1,6 +1,5 @@
/* BASE STYLES */ /* BASE STYLES */
html { html {
scroll-behavior: smooth; scroll-behavior: smooth;
} }
@ -23,7 +22,7 @@ body {
.fixed-background { .fixed-background {
background-attachment: scroll; background-attachment: scroll;
} }
} }
header { header {
margin: 0; margin: 0;
@ -33,9 +32,14 @@ p {
margin: 0.5rem 0; margin: 0.5rem 0;
} }
h1, h2, h3, h4, h5, h6 { h1,
h2,
h3,
h4,
h5,
h6 {
line-height: 1.2em; line-height: 1.2em;
margin: .2em auto; margin: 0.2em auto;
font-family: $heading-font-family; font-family: $heading-font-family;
font-weight: bold; font-weight: bold;
} }
@ -80,8 +84,10 @@ ol {
table { table {
tr { tr {
th, td { th,
padding: calc(#{$gutter-width} / 2) calc(#{$gutter-width * 2}) calc(#{$gutter-width} / 2) 0; td {
padding: calc(#{$gutter-width} / 2) calc(#{$gutter-width * 2})
calc(#{$gutter-width} / 2) 0;
} }
th { th {
@ -98,8 +104,6 @@ em {
font-style: italic; font-style: italic;
} }
@media only screen and (min-width: $sm-min) { @media only screen and (min-width: $sm-min) {
body { body {
padding: calc(9rem + #{$gutter-width}) 0 0; padding: calc(9rem + #{$gutter-width}) 0 0;
@ -180,8 +184,8 @@ table {
left: 0; left: 0;
z-index: -1000; z-index: -1000;
@include background("default"); @include background('default');
@include background("bau"); @include background('bau');
} }
/* CONTAINER */ /* CONTAINER */
@ -219,7 +223,7 @@ table {
.clearfix::before, .clearfix::before,
.clearfix::after { .clearfix::after {
content: " "; content: ' ';
display: table; display: table;
} }
@ -239,7 +243,6 @@ table {
padding: 0.5rem 0; padding: 0.5rem 0;
} }
figure { figure {
max-width: 100%; max-width: 100%;
position: relative; position: relative;
@ -291,11 +294,10 @@ figure {
&.original { &.original {
width: auto !important; width: auto !important;
max-width: 100% max-width: 100%;
} }
} }
figcaption { figcaption {
&.overlay { &.overlay {
&.hidden { &.hidden {
@ -312,7 +314,7 @@ figure {
} }
position: absolute; position: absolute;
background-color: rgba(230,230,230,0.85); background-color: rgba(230, 230, 230, 0.85);
top: 0; top: 0;
left: 0; left: 0;
bottom: 5px; bottom: 5px;
@ -333,41 +335,44 @@ figure {
.ribbon { .ribbon {
position: absolute; position: absolute;
right: 0px; top: 0px; right: 0px;
top: 0px;
overflow: hidden; overflow: hidden;
width: 75px; height: 75px; width: 75px;
height: 75px;
text-align: right; text-align: right;
span { span {
font-size: 12px; font-size: 12px;
color: #d7c9aa; color: #d7c9aa;
text-align: center; text-align: center;
font-weight: bold; line-height: 20px; font-weight: bold;
line-height: 20px;
transform: rotate(45deg); transform: rotate(45deg);
width: 100px; display: block; width: 100px;
display: block;
background: $secondary-color; background: $secondary-color;
box-shadow: 0 3px 10px -5px rgba(0, 0, 0, .5); box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 0.5);
position: absolute; position: absolute;
top: 19px; right: -21px; top: 19px;
right: -21px;
} }
} }
} }
.btn { .btn {
padding: .5rem 2rem; padding: 0.5rem 2rem;
border: 1px solid black; border: 1px solid black;
border-radius: $border-radius; border-radius: $border-radius;
color: black color: black margin 0 1rem;
margin 0 1rem;
line-height: 3rem; line-height: 3rem;
&.btn-small { &.btn-small {
padding: .3rem 1rem; padding: 0.3rem 1rem;
margin: 1rem; margin: 1rem;
} }
} }
.btn-primary { .btn-primary {
background-color: $primary-color; background-color: $primary-color;
border: 1px solid $primary-color; border: 1px solid $primary-color;
@ -428,7 +433,7 @@ a.btn-primary {
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
border:0; border: 0;
} }
} }
@ -452,7 +457,6 @@ nav {
/* CONTENT */ /* CONTENT */
/* HEADER */ /* HEADER */
#header { #header {
@ -543,7 +547,7 @@ nav {
max-width: none; max-width: none;
} }
input[type=checkbox] { input[type='checkbox'] {
display: none; display: none;
& + label { & + label {
@ -589,15 +593,15 @@ nav {
} }
} }
input[type=checkbox]:checked+.hamburger .line:nth-child(1) { input[type='checkbox']:checked + .hamburger .line:nth-child(1) {
transform: translateY(10px) rotate(-45deg); transform: translateY(10px) rotate(-45deg);
} }
input[type=checkbox]:checked+.hamburger .line:nth-child(2) { input[type='checkbox']:checked + .hamburger .line:nth-child(2) {
opacity: 0; opacity: 0;
} }
input[type=checkbox]:checked+.hamburger .line:nth-child(3) { input[type='checkbox']:checked + .hamburger .line:nth-child(3) {
transform: translateY(-10px) rotate(45deg); transform: translateY(-10px) rotate(45deg);
} }
@ -605,7 +609,7 @@ nav {
display: none; display: none;
} }
input[type=checkbox]:checked ~ .navbar-container nav { input[type='checkbox']:checked ~ .navbar-container nav {
ul { ul {
@include menu-list(column); @include menu-list(column);
@ -652,7 +656,7 @@ nav {
} }
@media only screen and (min-width: $sm-min) { @media only screen and (min-width: $sm-min) {
input[type=checkbox] { input[type='checkbox'] {
display: none; display: none;
& + label { & + label {
@ -756,7 +760,8 @@ nav {
overflow: hidden; overflow: hidden;
@media only screen and (min-width: $sm-min) { @media only screen and (min-width: $sm-min) {
margin: calc(100vh - calc(19rem - #{$gutter-width})) -$half-gutter-width 0 auto; margin: calc(100vh - calc(19rem - #{$gutter-width})) -$half-gutter-width 0
auto;
} }
ul { ul {
@ -789,9 +794,9 @@ nav {
} }
} }
} }
/* SINGLE */ /* SINGLE */
#single { #single {
.single-footer { .single-footer {
p { p {
margin: 0; margin: 0;
@ -826,11 +831,10 @@ nav {
} }
} }
p { p {
font-size: 1.2rem; font-size: 1.2rem;
&.material { &.material {
font-weight: bold font-weight: bold;
} }
&.type { &.type {
font-style: italic; font-style: italic;
@ -845,15 +849,15 @@ nav {
margin: 1rem 0; margin: 1rem 0;
} }
} }
} }
/* LIST */ /* LIST */
#list { #list {
footer { footer {
font-size: 0.8rem; font-size: 0.8rem;
} }
} }
} }
/* BANNER */ /* BANNER */

4
themes/neff/src/scss/_flexgrid.scss
View File

@ -10,7 +10,9 @@ $xl-min: 75rem !default;
/* CALCULATED VARIABLES */ /* CALCULATED VARIABLES */
$breakpoints: 1 8.33333333%, 2 16.66666667%, 3 25%, 4 33.33333333%, 5 41.66666667%, 6 50%, 7 58.33333333%, 8 66.66666667%, 9 75%, 10 83.33333333%, 11 91.66666667%, 12 100%; $breakpoints: 1 8.33333333%, 2 16.66666667%, 3 25%, 4 33.33333333%,
5 41.66666667%, 6 50%, 7 58.33333333%, 8 66.66666667%, 9 75%, 10 83.33333333%,
11 91.66666667%, 12 100%;
$half-gutter-width: $gutter-width * 0.5; $half-gutter-width: $gutter-width * 0.5;
$gutter-compensation: $half-gutter-width * -1; $gutter-compensation: $half-gutter-width * -1;

54
themes/neff/src/scss/_fonts.scss
View File

@ -4,18 +4,13 @@
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
src: url('../fonts/roboto-v18-latin-regular.eot'); src: url('../fonts/roboto-v18-latin-regular.eot');
/* IE9 Compat Modes */
src: local('Roboto'), local('Roboto-Regular'), src: local('Roboto'), local('Roboto-Regular'),
url('../fonts/roboto-v18-latin-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/roboto-v18-latin-regular.eot?#iefix')
/* IE6-IE8 */ format('embedded-opentype'),
url('../fonts/roboto-v18-latin-regular.woff2') format('woff2'), url('../fonts/roboto-v18-latin-regular.woff2') format('woff2'),
/* Super Modern Browsers */
url('../fonts/roboto-v18-latin-regular.woff') format('woff'), url('../fonts/roboto-v18-latin-regular.woff') format('woff'),
/* Modern Browsers */
url('../fonts/roboto-v18-latin-regular.ttf') format('truetype'), url('../fonts/roboto-v18-latin-regular.ttf') format('truetype'),
/* Safari, Android, iOS */
url('../fonts/roboto-v18-latin-regular.svg#Roboto') format('svg'); url('../fonts/roboto-v18-latin-regular.svg#Roboto') format('svg');
/* Legacy iOS */
} }
/* roboto-italic - latin */ /* roboto-italic - latin */
@ -24,18 +19,14 @@
font-style: italic; font-style: italic;
font-weight: 400; font-weight: 400;
src: url('../fonts/roboto-v18-latin-italic.eot'); src: url('../fonts/roboto-v18-latin-italic.eot');
/* IE9 Compat Modes */
src: local('Roboto Italic'), local('Roboto-Italic'), src: local('Roboto Italic'), local('Roboto-Italic'),
url('../fonts/roboto-v18-latin-italic.eot?#iefix') format('embedded-opentype'), url('../fonts/roboto-v18-latin-italic.eot?#iefix')
/* IE6-IE8 */ format('embedded-opentype'),
url('../fonts/roboto-v18-latin-italic.woff2') format('woff2'), url('../fonts/roboto-v18-latin-italic.woff2') format('woff2'),
/* Super Modern Browsers */
url('../fonts/roboto-v18-latin-italic.woff') format('woff'), url('../fonts/roboto-v18-latin-italic.woff') format('woff'),
/* Modern Browsers */
url('../fonts/roboto-v18-latin-italic.ttf') format('truetype'), url('../fonts/roboto-v18-latin-italic.ttf') format('truetype'),
/* Safari, Android, iOS */
url('../fonts/roboto-v18-latin-italic.svg#Roboto') format('svg'); url('../fonts/roboto-v18-latin-italic.svg#Roboto') format('svg');
/* Legacy iOS */
} }
/* roboto-700 - latin */ /* roboto-700 - latin */
@ -44,18 +35,12 @@
font-style: normal; font-style: normal;
font-weight: 700; font-weight: 700;
src: url('../fonts/roboto-v18-latin-700.eot'); src: url('../fonts/roboto-v18-latin-700.eot');
/* IE9 Compat Modes */
src: local('Roboto Bold'), local('Roboto-Bold'), src: local('Roboto Bold'), local('Roboto-Bold'),
url('../fonts/roboto-v18-latin-700.eot?#iefix') format('embedded-opentype'), url('../fonts/roboto-v18-latin-700.eot?#iefix') format('embedded-opentype'),
/* IE6-IE8 */
url('../fonts/roboto-v18-latin-700.woff2') format('woff2'), url('../fonts/roboto-v18-latin-700.woff2') format('woff2'),
/* Super Modern Browsers */
url('../fonts/roboto-v18-latin-700.woff') format('woff'), url('../fonts/roboto-v18-latin-700.woff') format('woff'),
/* Modern Browsers */
url('../fonts/roboto-v18-latin-700.ttf') format('truetype'), url('../fonts/roboto-v18-latin-700.ttf') format('truetype'),
/* Safari, Android, iOS */
url('../fonts/roboto-v18-latin-700.svg#Roboto') format('svg'); url('../fonts/roboto-v18-latin-700.svg#Roboto') format('svg');
/* Legacy iOS */
} }
/* roboto-700italic - latin */ /* roboto-700italic - latin */
@ -64,18 +49,14 @@
font-style: italic; font-style: italic;
font-weight: 700; font-weight: 700;
src: url('../fonts/roboto-v18-latin-700italic.eot'); src: url('../fonts/roboto-v18-latin-700italic.eot');
/* IE9 Compat Modes */
src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'),
url('../fonts/roboto-v18-latin-700italic.eot?#iefix') format('embedded-opentype'), url('../fonts/roboto-v18-latin-700italic.eot?#iefix')
/* IE6-IE8 */ format('embedded-opentype'),
url('../fonts/roboto-v18-latin-700italic.woff2') format('woff2'), url('../fonts/roboto-v18-latin-700italic.woff2') format('woff2'),
/* Super Modern Browsers */
url('../fonts/roboto-v18-latin-700italic.woff') format('woff'), url('../fonts/roboto-v18-latin-700italic.woff') format('woff'),
/* Modern Browsers */
url('../fonts/roboto-v18-latin-700italic.ttf') format('truetype'), url('../fonts/roboto-v18-latin-700italic.ttf') format('truetype'),
/* Safari, Android, iOS */
url('../fonts/roboto-v18-latin-700italic.svg#Roboto') format('svg'); url('../fonts/roboto-v18-latin-700italic.svg#Roboto') format('svg');
/* Legacy iOS */
} }
/* roboto-slab-regular - latin */ /* roboto-slab-regular - latin */
@ -84,18 +65,13 @@
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
src: url('../fonts/roboto-slab-v7-latin-regular.eot'); src: url('../fonts/roboto-slab-v7-latin-regular.eot');
/* IE9 Compat Modes */
src: local('Roboto Slab Regular'), local('RobotoSlab-Regular'), src: local('Roboto Slab Regular'), local('RobotoSlab-Regular'),
url('../fonts/roboto-slab-v7-latin-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/roboto-slab-v7-latin-regular.eot?#iefix')
/* IE6-IE8 */ format('embedded-opentype'),
url('../fonts/roboto-slab-v7-latin-regular.woff2') format('woff2'), url('../fonts/roboto-slab-v7-latin-regular.woff2') format('woff2'),
/* Super Modern Browsers */
url('../fonts/roboto-slab-v7-latin-regular.woff') format('woff'), url('../fonts/roboto-slab-v7-latin-regular.woff') format('woff'),
/* Modern Browsers */
url('../fonts/roboto-slab-v7-latin-regular.ttf') format('truetype'), url('../fonts/roboto-slab-v7-latin-regular.ttf') format('truetype'),
/* Safari, Android, iOS */
url('../fonts/roboto-slab-v7-latin-regular.svg#RobotoSlab') format('svg'); url('../fonts/roboto-slab-v7-latin-regular.svg#RobotoSlab') format('svg');
/* Legacy iOS */
} }
/* roboto-slab-700 - latin */ /* roboto-slab-700 - latin */
@ -104,16 +80,12 @@
font-style: normal; font-style: normal;
font-weight: 700; font-weight: 700;
src: url('../fonts/roboto-slab-v7-latin-700.eot'); src: url('../fonts/roboto-slab-v7-latin-700.eot');
/* IE9 Compat Modes */
src: local('Roboto Slab Bold'), local('RobotoSlab-Bold'), src: local('Roboto Slab Bold'), local('RobotoSlab-Bold'),
url('../fonts/roboto-slab-v7-latin-700.eot?#iefix') format('embedded-opentype'), url('../fonts/roboto-slab-v7-latin-700.eot?#iefix')
/* IE6-IE8 */ format('embedded-opentype'),
url('../fonts/roboto-slab-v7-latin-700.woff2') format('woff2'), url('../fonts/roboto-slab-v7-latin-700.woff2') format('woff2'),
/* Super Modern Browsers */
url('../fonts/roboto-slab-v7-latin-700.woff') format('woff'), url('../fonts/roboto-slab-v7-latin-700.woff') format('woff'),
/* Modern Browsers */
url('../fonts/roboto-slab-v7-latin-700.ttf') format('truetype'), url('../fonts/roboto-slab-v7-latin-700.ttf') format('truetype'),
/* Safari, Android, iOS */
url('../fonts/roboto-slab-v7-latin-700.svg#RobotoSlab') format('svg'); url('../fonts/roboto-slab-v7-latin-700.svg#RobotoSlab') format('svg');
/* Legacy iOS */
} }

3
themes/neff/src/scss/_mixins.scss
View File

@ -25,7 +25,7 @@
} }
@mixin background($class) { @mixin background($class) {
$background-image: "/img/background/" + $class + ".jpg"; $background-image: '/img/background/' + $class + '.jpg';
& { & {
background-position: center; background-position: center;
@ -44,4 +44,3 @@
} }
} }
} }

9
themes/neff/src/scss/_variables.scss
View File

@ -3,7 +3,7 @@ $gutter-width: 1rem;
$base-font-size: 16px; $base-font-size: 16px;
$base-line-height: 1.4em; $base-line-height: 1.4em;
$base-font-family: Roboto, sans-serif; $base-font-family: Roboto, sans-serif;
$heading-font-family: "Roboto Slab", sans-serif; $heading-font-family: 'Roboto Slab', sans-serif;
$font-color: black; $font-color: black;
$background-color: white; $background-color: white;
@ -12,8 +12,7 @@ $secondary-color: #720026;
$border-radius: 5px; $border-radius: 5px;
$background-default: 'grabmal';
$background-bau: 'bau';
$background-default: "grabmal"; $fa-font-path: '~@fortawesome/fontawesome-free/webfonts/';
$background-bau: "bau";
$fa-font-path: "~@fortawesome/fontawesome-free/webfonts/";

32
themes/neff/src/scss/main.scss
View File

@ -1,16 +1,16 @@
@import "_reset.scss"; @import '_reset.scss';
@import "_variables.scss"; @import '_variables.scss';
@import "~@fortawesome/fontawesome-free/scss/fontawesome.scss"; @import '~@fortawesome/fontawesome-free/scss/fontawesome.scss';
@import "~@fortawesome/fontawesome-free/scss/regular.scss"; @import '~@fortawesome/fontawesome-free/scss/regular.scss';
@import "~@fortawesome/fontawesome-free/scss/solid.scss"; @import '~@fortawesome/fontawesome-free/scss/solid.scss';
@import "~@fortawesome/fontawesome-free/scss/brands.scss"; @import '~@fortawesome/fontawesome-free/scss/brands.scss';
@import "~cookieconsent/src/styles/animation.css"; @import '~cookieconsent/src/styles/animation.css';
@import "~cookieconsent/src/styles/base.css"; @import '~cookieconsent/src/styles/base.css';
@import "~cookieconsent/src/styles/layout.css"; @import '~cookieconsent/src/styles/layout.css';
@import "~cookieconsent/src/styles/media.css"; @import '~cookieconsent/src/styles/media.css';
@import "~cookieconsent/src/styles/themes/classic.css"; @import '~cookieconsent/src/styles/themes/classic.css';
@import "_fonts.scss"; @import '_fonts.scss';
@import "_mixins.scss"; @import '_mixins.scss';
@import "_flexgrid.scss"; @import '_flexgrid.scss';
@import "_app.scss"; @import '_app.scss';
@import "_lightbox.scss"; @import '_lightbox.scss';

59
themes/neff/src/vue/CatalogArticle.vue
View File

@ -1,28 +1,46 @@
<template> <template>
<article class="row"v-if="articleData"> <article class="row" v-if="articleData">
<header class="col-xs-12"> <header class="col-xs-12">
<h1>{{ articleData.title }}</h1> <h1>{{ articleData.title }}</h1>
</header> </header>
<div class="col-xs-12"> <div class="col-xs-12">
<div class="row"> <div class="row">
<div v-if="hasWebGl && articleData.model" class="featured col-xs-12 col-sm-8"> <div
<model-viewer :modelData="articleData.model"/> v-if="hasWebGl && articleData.model"
class="featured col-xs-12 col-sm-8"
>
<model-viewer :modelData="articleData.model" />
</div> </div>
<figure v-else class="featured col-xs-12 col-sm-8"> <figure v-else class="featured col-xs-12 col-sm-8">
<img alt="" title="" class="" srcset="" sizes="" src=""> <img alt="" title="" class="" srcset="" sizes="" src="" />
</figure> </figure>
<div class="col-sm-4 col-xs-12"> <div class="col-sm-4 col-xs-12">
<p v-if="hasWebGl && articleData.model && articleData.model.textures.length > 1"> <p
v-if="
hasWebGl &&
articleData.model &&
articleData.model.textures.length > 1
"
>
<strong>Material ändern</strong> <strong>Material ändern</strong>
<material-switcher :modelData="articleData.model"/> <material-switcher :modelData="articleData.model" />
</p> </p>
<p class="offer"> <p class="offer">
<a class="btn btn-secondary" v-if="articleData.offer" :href="articleData.offer">Angebot</a> <a
class="btn btn-secondary"
v-if="articleData.offer"
:href="articleData.offer"
>Angebot</a
>
</p> </p>
<p class="type">Typ: {{ types }}</p> <p class="type">Typ: {{ types }}</p>
<p class="material">Material: {{ material }}</p> <p class="material">Material: {{ material }}</p>
<p class="ornament" v-if="articleData.ornament">Ornament: {{ articleData.ornament }}</p> <p class="ornament" v-if="articleData.ornament">
<p class="description" v-if="articleData.description">{{ articleData.description }}</p> Ornament: {{ articleData.ornament }}
</p>
<p class="description" v-if="articleData.description">
{{ articleData.description }}
</p>
<p class="article-id">Art. Nr.: {{ articleData.article_id }}</p> <p class="article-id">Art. Nr.: {{ articleData.article_id }}</p>
</div> </div>
</div> </div>
@ -34,18 +52,21 @@
import ModelViewer from './components/ModelViewer.vue' import ModelViewer from './components/ModelViewer.vue'
import MaterialSwitcher from './components/MaterialSwitcher.vue' import MaterialSwitcher from './components/MaterialSwitcher.vue'
import * as WebGL from 'three/examples/js/WebGL.js' import * as WebGL from 'three/examples/js/WebGL.js'
import { mapState } from 'vuex'; import { mapState } from 'vuex'
export default { export default {
data() { data() {
return { return {
hasWebGl: false hasWebGl: false,
} }
}, },
mounted() { mounted() {
this.$store.dispatch('fetchArticleData') this.$store.dispatch('fetchArticleData')
console.log(WebGL) console.log(WebGL)
var canvas = document.createElement( 'canvas' ); var canvas = document.createElement('canvas')
if ( window.WebGLRenderingContext && ( canvas.getContext( 'webgl' ) || canvas.getContext( 'experimental-webgl' ) ) ) { if (
window.WebGLRenderingContext &&
(canvas.getContext('webgl') || canvas.getContext('experimental-webgl'))
) {
this.hasWebGl = true this.hasWebGl = true
} else { } else {
this.hasWebGl = false this.hasWebGl = false
@ -54,22 +75,22 @@ export default {
computed: { computed: {
...mapState(['articleData', 'activeTexture']), ...mapState(['articleData', 'activeTexture']),
types() { types() {
if(this.articleData.article_type) { if (this.articleData.article_type) {
return this.articleData.article_type.join(', ') return this.articleData.article_type.join(', ')
} }
return "" return ''
}, },
material() { material() {
if(this.activeTexture) { if (this.activeTexture) {
return this.activeTexture.name return this.activeTexture.name
} }
return this.articleData.material return this.articleData.material
} },
}, },
components: { components: {
ModelViewer, ModelViewer,
MaterialSwitcher MaterialSwitcher,
} },
} }
</script> </script>

30
themes/neff/src/vue/ModelViewer.vue
View File

@ -6,17 +6,23 @@
<div class="content flex"> <div class="content flex">
<div class="padding"> <div class="padding">
<div v-if="articleData.model" class="featured left wide"> <div v-if="articleData.model" class="featured left wide">
<model-viewer class="model-viewer" :modelData="articleData.model"/> <model-viewer class="model-viewer" :modelData="articleData.model" />
</div> </div>
<p> <p>
<strong>Material ändern</strong> <strong>Material ändern</strong>
<material-switcher :modelData="articleData.model"/> <material-switcher :modelData="articleData.model" />
</p> </p>
<p class="type">Typ: {{ types }}</p> <p class="type">Typ: {{ types }}</p>
<p class="material">Material: {{ material }}</p> <p class="material">Material: {{ material }}</p>
<p class="offer" v-if="articleData.offer"><a :href="articleData.offer">Angebot</a></p> <p class="offer" v-if="articleData.offer">
<p class="ornament" v-if="articleData.ornament">Ornament: {{ articleData.ornament }}</p> <a :href="articleData.offer">Angebot</a>
<p class="description" v-if="articleData.description">{{ articleData.description }}</p> </p>
<p class="ornament" v-if="articleData.ornament">
Ornament: {{ articleData.ornament }}
</p>
<p class="description" v-if="articleData.description">
{{ articleData.description }}
</p>
<p class="article-id">Art. Nr.: {{ articleData.article_id }}</p> <p class="article-id">Art. Nr.: {{ articleData.article_id }}</p>
</div> </div>
</div> </div>
@ -26,7 +32,7 @@
<script> <script>
import ModelViewer from './components/ModelViewer.vue' import ModelViewer from './components/ModelViewer.vue'
import MaterialSwitcher from './components/MaterialSwitcher.vue' import MaterialSwitcher from './components/MaterialSwitcher.vue'
import { mapState } from 'vuex'; import { mapState } from 'vuex'
export default { export default {
mounted() { mounted() {
this.$store.dispatch('fetchArticleData') this.$store.dispatch('fetchArticleData')
@ -34,21 +40,21 @@ export default {
computed: { computed: {
...mapState(['articleData', 'activeTexture']), ...mapState(['articleData', 'activeTexture']),
types() { types() {
if(this.articleData.article_type) { if (this.articleData.article_type) {
return this.articleData.article_type.join(', ') return this.articleData.article_type.join(', ')
} }
return "" return ''
}, },
material() { material() {
if(this.activeTexture) { if (this.activeTexture) {
return this.activeTexture.name return this.activeTexture.name
} }
return this.articleData.material return this.articleData.material
} },
}, },
components: { components: {
ModelViewer, ModelViewer,
MaterialSwitcher MaterialSwitcher,
} },
} }
</script> </script>

17
themes/neff/src/vue/catalogArticle.store.js
View File

@ -1,13 +1,13 @@
import Vue from 'vue' import Vue from 'vue'
import Vuex from 'vuex' import Vuex from 'vuex'
import axios from "axios"; import axios from 'axios'
Vue.use(Vuex) Vue.use(Vuex)
export default new Vuex.Store({ export default new Vuex.Store({
state: { state: {
articleData: {}, articleData: {},
activeTexture: undefined activeTexture: undefined,
}, },
mutations: { mutations: {
setArticleData(store, data) { setArticleData(store, data) {
@ -15,17 +15,20 @@ export default new Vuex.Store({
}, },
setActiveTexture(store, data) { setActiveTexture(store, data) {
store.activeTexture = data store.activeTexture = data
} },
}, },
actions: { actions: {
fetchArticleData({ commit }) { fetchArticleData({ commit }) {
let path = window.location.pathname let path = window.location.pathname
axios.get(path.replace(/modell\//, '') + 'index.json').then(response => { axios
.get(path.replace(/modell\//, '') + 'index.json')
.then(response => {
commit('setArticleData', response.data) commit('setArticleData', response.data)
}).catch(error => console.log(error)) })
.catch(error => console.log(error))
}, },
updateActiveTexture({commit}, data) { updateActiveTexture({ commit }, data) {
commit('setActiveTexture', data) commit('setActiveTexture', data)
} },
}, },
}) })

11
themes/neff/src/vue/components/Hello.vue
View File

@ -1,11 +0,0 @@
<template>
<div>
Hello World
</div>
</template>
<script>
export default {
name: 'app'
};
</script>

12
themes/neff/src/vue/components/MaterialSwitcher.vue
View File

@ -1,6 +1,10 @@
<template> <template>
<ul class="list-unstyled material-switcher" v-if="modelData"> <ul class="list-unstyled material-switcher" v-if="modelData">
<material-switcher-item v-for="texture of modelData.textures" :key="texture.url" :texture="texture"/> <material-switcher-item
v-for="texture of modelData.textures"
:key="texture.url"
:texture="texture"
/>
</ul> </ul>
</template> </template>
@ -8,12 +12,12 @@
import MaterialSwitcherItem from './MaterialSwitcherItem.vue' import MaterialSwitcherItem from './MaterialSwitcherItem.vue'
export default { export default {
components: { components: {
materialSwitcherItem: MaterialSwitcherItem materialSwitcherItem: MaterialSwitcherItem,
}, },
props: { props: {
modelData: { modelData: {
type: Object, type: Object,
} },
} },
} }
</script> </script>

19
themes/neff/src/vue/components/MaterialSwitcherItem.vue
View File

@ -1,5 +1,12 @@
<template> <template>
<li><img class="texture-preview" :src="texture.url" :alt="texture.name" @click="applyTexture"></li> <li>
<img
class="texture-preview"
:src="texture.url"
:alt="texture.name"
@click="applyTexture"
/>
</li>
</template> </template>
<script> <script>
@ -7,14 +14,14 @@ export default {
props: { props: {
texture: { texture: {
type: Object, type: Object,
required: true required: true,
} },
}, },
methods: { methods: {
applyTexture() { applyTexture() {
this.$store.dispatch('updateActiveTexture', this.texture) this.$store.dispatch('updateActiveTexture', this.texture)
} },
} },
} }
</script> </script>
@ -29,7 +36,7 @@ export default {
} }
li:last-child { li:last-child {
padding: 0 0 0 2px padding: 0 0 0 2px;
} }
li { li {

94
themes/neff/src/vue/components/ModelViewer.vue
View File

@ -6,7 +6,16 @@
</template> </template>
<script> <script>
import { WebGLRenderer, PerspectiveCamera, Scene, AmbientLight, DirectionalLight, PCFShadowMap, LinearToneMapping, TextureLoader } from 'three' import {
WebGLRenderer,
PerspectiveCamera,
Scene,
AmbientLight,
DirectionalLight,
PCFShadowMap,
LinearToneMapping,
TextureLoader,
} from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls' import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader' import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'
import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader' import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader'
@ -23,7 +32,7 @@ export default {
} }
}, },
props: { props: {
modelData: Object modelData: Object,
}, },
mounted() { mounted() {
this.setup() this.setup()
@ -40,18 +49,18 @@ export default {
this.setupControls() this.setupControls()
}, },
setupControls() { setupControls() {
this.controls = new OrbitControls( this.camera, this.renderer.domElement ); this.controls = new OrbitControls(this.camera, this.renderer.domElement)
this.controls.addEventListener( 'change', this.render ); this.controls.addEventListener('change', this.render)
this.controls.addEventListener( 'touchstart', this.render ); this.controls.addEventListener('touchstart', this.render)
this.controls.enableDamping = false; this.controls.enableDamping = false
this.controls.dampingFactor = 1.5; this.controls.dampingFactor = 1.5
this.controls.screenSpacePanning = false; this.controls.screenSpacePanning = false
this.controls.enableZoom = false; this.controls.enableZoom = false
this.controls.enablePan = false; this.controls.enablePan = false
this.controls.minPolarAngle = Math.PI / 8; this.controls.minPolarAngle = Math.PI / 8
this.controls.maxPolarAngle = Math.PI - Math.PI / 4; this.controls.maxPolarAngle = Math.PI - Math.PI / 4
this.controls.minAzimuthAngle = -(Math.PI / 4); this.controls.minAzimuthAngle = -(Math.PI / 4)
this.controls.maxAzimuthAngle = Math.PI / 4; this.controls.maxAzimuthAngle = Math.PI / 4
this.controls.update() this.controls.update()
}, },
setupScene() { setupScene() {
@ -68,7 +77,7 @@ export default {
getHeight() { getHeight() {
let el = this.$el.parentElement || 0 let el = this.$el.parentElement || 0
if (el) { if (el) {
return el.offsetWidth / 1.333333; return el.offsetWidth / 1.333333
} }
return 0 return 0
}, },
@ -77,28 +86,32 @@ export default {
}, },
setupCamera() { setupCamera() {
this.camera = new PerspectiveCamera(60, this.getAspectRatio(), 0.1, 300) this.camera = new PerspectiveCamera(60, this.getAspectRatio(), 0.1, 300)
this.camera.position.z = 0.9; this.camera.position.z = 0.9
this.camera.position.y = 0.3 this.camera.position.y = 0.3
}, },
setupLight() { setupLight() {
var directionalLight = new DirectionalLight(0xffffff, 0.5) var directionalLight = new DirectionalLight(0xffffff, 0.5)
directionalLight.position.set(-30, -30 ,-30) directionalLight.position.set(-30, -30, -30)
this.scene.add(directionalLight) this.scene.add(directionalLight)
var directionalLight2 = new DirectionalLight(0xffffff, 1.6) var directionalLight2 = new DirectionalLight(0xffffff, 1.6)
directionalLight2.position.set(3, 10 ,10) directionalLight2.position.set(3, 10, 10)
this.scene.add(directionalLight2) this.scene.add(directionalLight2)
}, },
setupRenderer() { setupRenderer() {
this.renderer = new WebGLRenderer({canvas: this.$refs.renderer, antialias: true, alpha: true}) this.renderer = new WebGLRenderer({
canvas: this.$refs.renderer,
antialias: true,
alpha: true,
})
this.renderer.setClearColor(0xffffff) this.renderer.setClearColor(0xffffff)
this.renderer.setClearAlpha(0) this.renderer.setClearAlpha(0)
this.renderer.setSize(this.getWidth(), this.getHeight()) this.renderer.setSize(this.getWidth(), this.getHeight())
this.renderer.gammaOutput = true; this.renderer.gammaOutput = true
this.renderer.gammaFactor = 2.2 this.renderer.gammaFactor = 2.2
this.renderer.toneMapping = LinearToneMapping; this.renderer.toneMapping = LinearToneMapping
this.renderer.toneMappingExposure = Math.pow( 0.94, 5.0 ); this.renderer.toneMappingExposure = Math.pow(0.94, 5.0)
this.renderer.shadowMap.enabled = true; this.renderer.shadowMap.enabled = true
this.renderer.shadowMap.type = PCFShadowMap; this.renderer.shadowMap.type = PCFShadowMap
window.addEventListener('resize', this.setCanvasSize) window.addEventListener('resize', this.setCanvasSize)
}, },
loadObjMtl(objPath, mtlPath) { loadObjMtl(objPath, mtlPath) {
@ -107,20 +120,28 @@ export default {
var mtlLoader = new MTLLoader() var mtlLoader = new MTLLoader()
mtlLoader.setPath('/') mtlLoader.setPath('/')
new Promise((resolve, reject) => { new Promise((resolve, reject) => {
mtlLoader.load(mtlPath, materials => resolve(materials), undefined, error => reject(error)) mtlLoader.load(
}).then((materials) => { mtlPath,
materials => resolve(materials),
undefined,
error => reject(error)
)
})
.then(materials => {
materials.preload() materials.preload()
objLoader.setMaterials(materials) objLoader.setMaterials(materials)
objLoader.load(objPath, this.addObject) objLoader.load(objPath, this.addObject)
this.render() this.render()
}).catch(error => console.log(error)) })
.catch(error => console.log(error))
}, },
loadGltf(gltfPath) { loadGltf(gltfPath) {
var gltfLoader = new GLTFLoader() var gltfLoader = new GLTFLoader()
new Promise((resolve, reject) => { new Promise((resolve, reject) => {
gltfLoader.load(gltfPath, gltf => resolve(gltf), undefined, error => reject(error)) gltfLoader.load(gltfPath, gltf => resolve(gltf), undefined, error =>
reject(error)
)
}) })
.then(gltf => { .then(gltf => {
this.readGLTF(gltf) this.readGLTF(gltf)
@ -129,7 +150,7 @@ export default {
}, },
changeTexture(texture) { changeTexture(texture) {
new Promise(resolve => { new Promise(resolve => {
new TextureLoader().load(texture.url, (data) => resolve(data)); new TextureLoader().load(texture.url, data => resolve(data))
}).then(data => { }).then(data => {
this.$store.dispatch('updateActiveTexture', texture) this.$store.dispatch('updateActiveTexture', texture)
this.model.material.map = data this.model.material.map = data
@ -157,17 +178,17 @@ export default {
update() { update() {
this.controls.update() this.controls.update()
this.render() this.render()
} },
}, },
computed: { computed: {
...mapState(['activeTexture']) ...mapState(['activeTexture']),
}, },
watch: { watch: {
activeTexture(value) { activeTexture(value) {
console.log('hello', value) console.log('hello', value)
this.changeTexture(value) this.changeTexture(value)
} },
} },
} }
</script> </script>
@ -176,12 +197,12 @@ export default {
position: relative; position: relative;
canvas { canvas {
background: rgba(0,0,0,0) background: rgba(0, 0, 0, 0);
} }
.mouseover { .mouseover {
position: absolute; position: absolute;
top:0; top: 0;
right: 0; right: 0;
font-weight: bold; font-weight: bold;
@ -190,5 +211,4 @@ export default {
} }
} }
} }
</style> </style>

5
themes/neff/src/vue/components/index.js
View File

@ -1,5 +0,0 @@
import Hello from './Hello.vue'
export default {
hello: Hello
}